/* ================================================================ THEME: ACTIVE SILICON — "High-End Matte Black PCB meets Cyberpunk Terminal" Accent Palette: Copper (#D4813F), Neon Blue (#00D4FF), Amber (#FFB400) ================================================================ */ /* --- Icon Visibility Rules --- */ .silicon-icon { opacity: 0; transform: translateY(20px); color: #00D4FF; } body.dark.silicon .theme-toggle .silicon-icon { opacity: 1 !important; transform: translateY(0) !important; } body.dark.silicon .theme-toggle .moon-icon, body.dark.silicon .theme-toggle .sun-icon, body.dark.silicon .theme-toggle .fluids-icon, body.dark.silicon .theme-toggle .wave-icon, body.dark.silicon .theme-toggle .puzzle-icon { opacity: 0 !important; transform: translateY(-20px) !important; } /* Hide other theme backgrounds */ body.silicon .wave-container, body.silicon .stars, body.silicon #particles-js, body.silicon .cursor-trail, body.silicon .hero-shape, body.silicon .hero-background { display: none !important; } body.silicon #fluid-canvas { display: none !important; } /* --- Root Variables Override --- */ body.silicon { --primary-color: #D4813F; --secondary-color: #1a1a1a; --accent-color: #00D4FF; --text-color: #c8c8c8; --heading-color: #e8e8e8; --text-light: #999999; --bg-card: rgba(18, 18, 22, 0.85); --shadow: 0 10px 40px rgba(0, 0, 0, 0.5); --silicon-copper: #D4813F; --silicon-blue: #00D4FF; --silicon-amber: #FFB400; --silicon-bg: #0d0d11; --silicon-card: rgba(18, 18, 22, 0.85); --silicon-border: rgba(212, 129, 63, 0.25); --silicon-glow: rgba(0, 212, 255, 0.3); background: var(--silicon-bg) !important; color: var(--text-color); animation: none !important; } /* PCB grid dot etching pattern — applied to */ body.silicon::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(212, 129, 63, 0.06) 1px, transparent 1px); background-size: 24px 24px; } /* Silicon Canvas — full screen background */ #silicon-canvas { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; } body.silicon #silicon-canvas { display: block; } /* ================================================================ NAVBAR ================================================================ */ body.silicon .navbar { background: rgba(13, 13, 17, 0.85) !important; box-shadow: 0 1px 0 var(--silicon-border), 0 5px 25px rgba(0, 0, 0, 0.5) !important; border-bottom: 1px solid var(--silicon-border) !important; } body.silicon .name { background: linear-gradient(135deg, var(--silicon-copper), var(--silicon-blue)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: drop-shadow(0 0 8px rgba(212, 129, 63, 0.3)) !important; } body.silicon .name::before { background: var(--silicon-blue) !important; box-shadow: 0 0 8px var(--silicon-blue), 0 0 16px var(--silicon-blue) !important; animation: silicon-dot-pulse 2s ease-in-out infinite !important; } @keyframes silicon-dot-pulse { 0%, 100% { box-shadow: 0 0 5px var(--silicon-blue); opacity: 0.7; } 50% { box-shadow: 0 0 12px var(--silicon-blue), 0 0 24px var(--silicon-blue); opacity: 1; } } body.silicon .name::after { background: linear-gradient(90deg, var(--silicon-copper), var(--silicon-blue)) !important; } body.silicon .nav-center-list a { color: rgba(200, 200, 200, 0.7) !important; font-family: 'Orbitron', monospace !important; font-size: 0.8rem !important; letter-spacing: 0.5px !important; } body.silicon .nav-center-list a:hover { background: rgba(0, 212, 255, 0.08) !important; color: var(--silicon-blue) !important; } body.silicon .nav-center-list a.active { background: rgba(0, 212, 255, 0.12) !important; color: var(--silicon-blue) !important; font-weight: 700 !important; box-shadow: inset 0 -2px 0 var(--silicon-blue) !important; } body.silicon .resume-btn { background: linear-gradient(135deg, var(--silicon-copper), #b86d2f) !important; color: #000 !important; font-family: 'Orbitron', monospace !important; font-size: 0.8rem !important; letter-spacing: 1px !important; box-shadow: 0 0 15px rgba(212, 129, 63, 0.3) !important; border: 1px solid rgba(212, 129, 63, 0.4) !important; } body.silicon .resume-btn:hover { background: linear-gradient(135deg, #e09050, var(--silicon-copper)) !important; box-shadow: 0 0 25px rgba(212, 129, 63, 0.5), 0 0 8px rgba(0, 212, 255, 0.3) !important; } body.silicon .hamburger-line { background: var(--silicon-copper) !important; } /* ================================================================ CARDS — "PCB MODULE" STYLING ================================================================ */ body.silicon .card { background: var(--silicon-card) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid var(--silicon-border) !important; box-shadow: 0 0 0 0 transparent, 0 10px 40px rgba(0, 0, 0, 0.4) !important; position: relative; transition: border-color 0.5s ease, box-shadow 0.5s ease !important; } /* Boot-up glow animation for cards entering viewport */ body.silicon .card.silicon-powered { animation: silicon-boot 0.8s ease-out forwards; } @keyframes silicon-boot { 0% { border-color: transparent; box-shadow: 0 0 0 0 transparent; } 30% { border-color: var(--silicon-blue); box-shadow: 0 0 20px rgba(0, 212, 255, 0.3), inset 0 0 30px rgba(0, 212, 255, 0.05); } 60% { border-color: var(--silicon-copper); box-shadow: 0 0 15px rgba(212, 129, 63, 0.2); } 100% { border-color: var(--silicon-border); box-shadow: 0 0 8px rgba(212, 129, 63, 0.1), 0 10px 40px rgba(0, 0, 0, 0.4); } } body.silicon .card:hover { border-color: var(--silicon-blue) !important; box-shadow: 0 0 25px rgba(0, 212, 255, 0.15), 0 20px 50px rgba(0, 0, 0, 0.5) !important; } /* Card left accent line */ body.silicon .card::before { background: linear-gradient(180deg, var(--silicon-copper), var(--silicon-blue)) !important; } body.silicon #technical-skills.card .line-clipper::before { background: linear-gradient(180deg, var(--silicon-copper), var(--silicon-blue)) !important; } /* Schematic background pattern inside project cards */ body.silicon .project-card { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' opacity='0.03'%3E%3Cpath d='M10 30h15M35 30h15M30 10v15M30 35v15' stroke='%23D4813F' stroke-width='0.5' fill='none'/%3E%3Ccircle cx='30' cy='30' r='3' stroke='%23D4813F' stroke-width='0.5' fill='none'/%3E%3Ccircle cx='10' cy='30' r='2' fill='%23D4813F'/%3E%3Ccircle cx='50' cy='30' r='2' fill='%23D4813F'/%3E%3C/svg%3E"), rgba(0, 0, 0, 0.35) !important; border: 1px solid rgba(212, 129, 63, 0.15) !important; } body.silicon .project-card:hover { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' opacity='0.06'%3E%3Cpath d='M10 30h15M35 30h15M30 10v15M30 35v15' stroke='%2300D4FF' stroke-width='0.5' fill='none'/%3E%3Ccircle cx='30' cy='30' r='3' stroke='%2300D4FF' stroke-width='0.5' fill='none'/%3E%3Ccircle cx='10' cy='30' r='2' fill='%2300D4FF'/%3E%3Ccircle cx='50' cy='30' r='2' fill='%2300D4FF'/%3E%3C/svg%3E"), rgba(0, 0, 0, 0.5) !important; border-color: rgba(0, 212, 255, 0.3) !important; } /* ================================================================ HEADINGS & TEXT ================================================================ */ body.silicon h2 { color: var(--silicon-copper) !important; font-family: 'Orbitron', monospace !important; letter-spacing: 2px !important; text-transform: uppercase !important; font-size: 1.3rem !important; } body.silicon h2::after { background: linear-gradient(to right, var(--silicon-copper), transparent) !important; } body.silicon h3 { color: #e0e0e0 !important; } body.silicon p, body.silicon li, body.silicon span, body.silicon .education-details p, body.silicon .project-details li, body.silicon ul li em { color: #aaaaaa !important; } body.silicon a { color: var(--silicon-blue) !important; } body.silicon a:hover { color: var(--silicon-copper) !important; } body.silicon ul li::before { color: var(--silicon-copper) !important; } /* ================================================================ SECTION ICONS ================================================================ */ body.silicon .section-icon { background: rgba(212, 129, 63, 0.1) !important; color: var(--silicon-copper) !important; border: 1px solid rgba(212, 129, 63, 0.2) !important; box-shadow: 0 0 12px rgba(212, 129, 63, 0.15) !important; } /* ================================================================ EDUCATION ================================================================ */ body.silicon .education-details { border-left-color: rgba(212, 129, 63, 0.3) !important; } body.silicon .education-details::before { background: var(--silicon-copper) !important; box-shadow: 0 0 8px rgba(212, 129, 63, 0.5) !important; } /* ================================================================ SKILLS — Oscilloscope / Logic Analyzer Waveform Style ================================================================ */ body.silicon .skill-tag { color: var(--silicon-blue) !important; background: rgba(0, 212, 255, 0.06) !important; border: 1px solid rgba(0, 212, 255, 0.2) !important; font-family: 'Orbitron', monospace !important; font-size: 0.75rem !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; } body.silicon .skill-tag:hover { background: rgba(0, 212, 255, 0.15) !important; box-shadow: 0 0 10px rgba(0, 212, 255, 0.2) !important; color: #fff !important; } body.silicon .skill-level { background: linear-gradient(90deg, var(--silicon-blue), var(--silicon-copper)) !important; box-shadow: 0 0 8px rgba(0, 212, 255, 0.3) !important; } body.silicon .folder-header { background: rgba(212, 129, 63, 0.08) !important; border-color: rgba(212, 129, 63, 0.25) !important; } body.silicon .folder-header:hover { background: rgba(212, 129, 63, 0.15) !important; } body.silicon .folder-icon { color: var(--silicon-copper) !important; } body.silicon .folder-name { color: var(--silicon-copper) !important; font-family: 'Orbitron', monospace !important; } body.silicon .skill-corner { background: rgba(13, 13, 17, 0.9) !important; border: 1px solid rgba(212, 129, 63, 0.15) !important; } /* ================================================================ PROJECTS — "Datasheet" Module Look ================================================================ */ body.silicon .project-tag, body.silicon .edu-date, body.silicon .cert-date { color: var(--silicon-amber) !important; background: rgba(255, 180, 0, 0.1) !important; border: 1px solid rgba(255, 180, 0, 0.25) !important; font-family: 'Orbitron', monospace !important; font-size: 0.7rem !important; letter-spacing: 1px !important; } body.silicon .project-footer { border-top-color: rgba(212, 129, 63, 0.15) !important; } body.silicon .view-all-btn { background: transparent !important; color: var(--silicon-blue) !important; border: 1px solid var(--silicon-blue) !important; font-family: 'Orbitron', monospace !important; letter-spacing: 1px !important; box-shadow: 0 0 10px rgba(0, 212, 255, 0.15) !important; } body.silicon .view-all-btn:hover { background: var(--silicon-blue) !important; color: #000 !important; box-shadow: 0 0 25px rgba(0, 212, 255, 0.4) !important; } /* --- GitHub / Video Buttons as I/O Pins --- */ body.silicon .github-btn { background: rgba(212, 129, 63, 0.1) !important; color: var(--silicon-copper) !important; border: 1px solid rgba(212, 129, 63, 0.3) !important; } body.silicon .github-btn:hover { background: var(--silicon-copper) !important; color: #000 !important; box-shadow: 0 0 15px rgba(212, 129, 63, 0.4) !important; } body.silicon .video-btn { background: rgba(0, 212, 255, 0.1) !important; color: var(--silicon-blue) !important; border: 1px solid rgba(0, 212, 255, 0.3) !important; } body.silicon .video-btn:hover { background: var(--silicon-blue) !important; color: #000 !important; box-shadow: 0 0 15px rgba(0, 212, 255, 0.4) !important; } /* ================================================================ CERTIFICATIONS ================================================================ */ body.silicon .cert-item { background: rgba(0, 0, 0, 0.35) !important; border: 1px solid rgba(212, 129, 63, 0.12) !important; } body.silicon .cert-item:hover { background: rgba(0, 0, 0, 0.5) !important; border-color: var(--silicon-blue) !important; } body.silicon .cert-icon { color: var(--silicon-amber) !important; } body.silicon .cert-link-btn { background: rgba(0, 212, 255, 0.1) !important; color: var(--silicon-blue) !important; border: 1px solid rgba(0, 212, 255, 0.25) !important; } body.silicon .cert-link-btn:hover { background: var(--silicon-blue) !important; color: #000 !important; } /* ================================================================ EXTRACURRICULARS ================================================================ */ body.silicon .extra-item { background: rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(212, 129, 63, 0.1) !important; } body.silicon .extra-item:hover { background: rgba(0, 0, 0, 0.5) !important; border-color: var(--silicon-blue) !important; } body.silicon .extra-icon { color: var(--silicon-copper) !important; } /* ================================================================ CONTACT SECTION ================================================================ */ body.silicon .contact-item { background: rgba(0, 0, 0, 0.35) !important; border: 1px solid var(--silicon-border) !important; } body.silicon .contact-item:hover { background: rgba(0, 0, 0, 0.55) !important; border-color: var(--silicon-blue) !important; } body.silicon .contact-item i { color: var(--silicon-copper) !important; } body.silicon .contact-item a { color: var(--silicon-blue) !important; } body.silicon .contact-form input, body.silicon .contact-form textarea { background: rgba(0, 0, 0, 0.4) !important; border: 1px solid rgba(212, 129, 63, 0.2) !important; color: #ccc !important; font-family: 'Poppins', sans-serif !important; } body.silicon .contact-form input::placeholder, body.silicon .contact-form textarea::placeholder { color: rgba(200, 200, 200, 0.35) !important; } body.silicon .contact-form input:focus, body.silicon .contact-form textarea:focus { border-color: var(--silicon-blue) !important; box-shadow: 0 0 12px rgba(0, 212, 255, 0.2) !important; background: rgba(0, 0, 0, 0.55) !important; } body.silicon .submit-btn { background: linear-gradient(135deg, var(--silicon-copper), #b86d2f) !important; color: #000 !important; font-family: 'Orbitron', monospace !important; letter-spacing: 1px !important; border: none !important; box-shadow: 0 0 15px rgba(212, 129, 63, 0.3) !important; } body.silicon .submit-btn:hover { box-shadow: 0 0 25px rgba(212, 129, 63, 0.5), 0 0 8px rgba(0, 212, 255, 0.3) !important; } /* ================================================================ HERO SECTION ================================================================ */ body.silicon .hero-greeting, body.silicon .hero h1 { color: #e8e8e8 !important; -webkit-text-fill-color: #e8e8e8 !important; } body.silicon .hero-subtitle { background: rgba(0, 0, 0, 0.5) !important; border: 1px solid var(--silicon-border) !important; color: var(--silicon-blue) !important; font-family: 'Orbitron', monospace !important; font-size: 0.95rem !important; letter-spacing: 1px !important; } body.silicon .cursor { color: var(--silicon-blue) !important; text-shadow: 0 0 8px var(--silicon-blue) !important; } body.silicon .social-icon { color: #aaa !important; background: rgba(212, 129, 63, 0.08) !important; border: 1px solid rgba(212, 129, 63, 0.2) !important; } body.silicon .social-icon:hover { background: var(--silicon-copper) !important; color: #000 !important; border-color: var(--silicon-copper) !important; box-shadow: 0 0 15px rgba(212, 129, 63, 0.4) !important; } /* ================================================================ CLOCK — 7-SEGMENT LED DISPLAY with Red Glow ================================================================ */ body.silicon .sliding-clock-container { background: rgba(0, 0, 0, 0.7) !important; border: 2px solid rgba(212, 129, 63, 0.3) !important; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(0, 0, 0, 0.5), 0 0 6px rgba(212, 129, 63, 0.15) !important; } body.silicon .tape-strip div { color: #ff2222 !important; font-family: 'Orbitron', monospace !important; text-shadow: 0 0 8px rgba(255, 34, 34, 0.9), 0 0 20px rgba(255, 34, 34, 0.5), 0 0 40px rgba(255, 34, 34, 0.2) !important; } body.silicon .tape-separator { color: #ff2222 !important; text-shadow: 0 0 8px rgba(255, 34, 34, 0.9), 0 0 20px rgba(255, 34, 34, 0.5) !important; } body.silicon .tape-highlight { background: rgba(255, 34, 34, 0.05) !important; border-color: rgba(255, 34, 34, 0.3) !important; box-shadow: 0 0 12px rgba(255, 34, 34, 0.15) !important; } body.silicon .clock-date-display, body.silicon .clock-label-display { color: var(--silicon-amber) !important; font-family: 'Orbitron', monospace !important; text-shadow: 0 0 6px rgba(255, 180, 0, 0.3) !important; } /* ================================================================ FOOTER ================================================================ */ body.silicon footer { background: rgba(0, 0, 0, 0.5) !important; border-top: 1px solid var(--silicon-border) !important; color: rgba(200, 200, 200, 0.5) !important; } body.silicon footer p { color: rgba(200, 200, 200, 0.5) !important; } /* ================================================================ BACK TO TOP ================================================================ */ body.silicon #back-to-top { background: rgba(13, 13, 17, 0.9) !important; color: var(--silicon-blue) !important; border: 1px solid rgba(0, 212, 255, 0.3) !important; box-shadow: 0 0 10px rgba(0, 212, 255, 0.15) !important; } body.silicon #back-to-top:hover { background: var(--silicon-blue) !important; color: #000 !important; } /* ================================================================ THEME SETTINGS PROMPT — Silicon overrides ================================================================ */ body.silicon .theme-selection-prompt { background: rgba(13, 13, 17, 0.95) !important; border: 1px solid var(--silicon-border) !important; } body.silicon .prompt-arrow { background: rgba(13, 13, 17, 0.95) !important; border-color: var(--silicon-border) !important; } body.silicon .theme-selection-prompt h3 { color: var(--silicon-copper) !important; border-bottom-color: var(--silicon-border) !important; } body.silicon .theme-category-title { color: var(--silicon-blue) !important; background: rgba(0, 212, 255, 0.06) !important; } body.silicon .theme-checkbox-lbl { background: rgba(255, 255, 255, 0.03) !important; border-color: rgba(212, 129, 63, 0.15) !important; color: #ccc !important; } body.silicon .theme-checkbox-lbl:hover { background: rgba(0, 212, 255, 0.08) !important; } body.silicon .theme-check { border-color: rgba(212, 129, 63, 0.5) !important; } body.silicon .theme-check:checked { background-color: var(--silicon-copper) !important; border-color: var(--silicon-copper) !important; } body.silicon .theme-check:checked::after { background-color: #000 !important; } body.silicon .theme-settings-btn { color: var(--silicon-copper) !important; } /* ================================================================ MOBILE NAV OVERLAY ================================================================ */ @media (max-width: 900px) { body.silicon .nav-center { background: rgba(13, 13, 17, 0.97) !important; } } /* ================================================================ SELECTION COLOR ================================================================ */ body.silicon ::selection { background: var(--silicon-copper) !important; color: #000 !important; } /* ================================================================ RADAR SHADER (Task 1) ================================================================ */ #silicon-radar-canvas { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 1; } body.silicon #silicon-radar-canvas { display: block; } /* ================================================================ CAD EMULATION MODAL (Task 2) ================================================================ */ .cad-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(13, 13, 17, 0.95); z-index: 9999; display: none; justify-content: center; align-items: center; opacity: 0; backdrop-filter: blur(5px); } body.silicon .cad-modal-overlay.active { display: flex; } .cad-modal-container { width: 90vw; max-width: 1000px; height: 80vh; background: #0d0d11; border: 1px solid var(--silicon-copper); position: relative; box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(212, 129, 63, 0.1); overflow: hidden; font-family: \Orbitron\', monospace, Consolas, "Courier New"; } .cad-border-rulers .ruler { position: absolute; background: #15151a; color: var(--silicon-amber); font-size: 0.65rem; display: flex; align-items: center; justify-content: space-around; border: 1px solid rgba(212, 129, 63, 0.3); z-index: 10; } .ruler-top { top: 0; left: 30px; right: 0; height: 30px; border-bottom: 2px dashed rgba(212, 129, 63, 0.5); } .ruler-left { top: 30px; left: 0; bottom: 0; width: 30px; flex-direction: column; border-right: 2px dashed rgba(212, 129, 63, 0.5); text-align: center; } .cad-modal-content { position: absolute; top: 30px; left: 30px; right: 0; bottom: 0; padding: 30px; overflow-y: auto; z-index: 5; } .cad-grid-bg { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 20px 20px; z-index: 0; pointer-events: none; } .cad-svg-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .cad-header, .cad-body { position: relative; z-index: 2; opacity: 0; } .cad-header { border-bottom: 2px solid rgba(0, 212, 255, 0.3); padding-bottom: 10px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; } .cad-header h2 { color: var(--silicon-blue) !important; margin: 0; font-family: \Orbitron\', monospace, Consolas; font-size: 1.5rem; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 0 10px rgba(0, 212, 255, 0.4); } .cad-status { color: #0f0; font-size: 0.8rem; text-shadow: 0 0 5px #0f0; } .cad-body p, .cad-body li { color: #ccc !important; font-family: Consolas, "Courier New", monospace !important; font-size: 0.95rem; line-height: 1.6; } .cad-body ul { list-style: square; padding-left: 20px; } .cad-body li::marker { color: var(--silicon-amber); } .cad-close-btn { position: fixed; top: 35px; right: 35px; background: rgba(13, 13, 17, 0.8); border: 1px solid var(--silicon-copper); color: var(--silicon-copper); font-size: 1.2rem; cursor: pointer; z-index: 20; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; } .cad-close-btn:hover { background: var(--silicon-copper); color: #0d0d11; box-shadow: 0 0 15px rgba(212, 129, 63, 0.5); } /* ================================================================ I/O PIN MENU EXPANSION (Task 4) ================================================================ */ body.silicon .hamburger .default-line { display: none !important; } body.silicon .hamburger { background: transparent !important; border: none !important; box-shadow: none !important; width: 40px; height: 40px; padding: 0; display: flex; justify-content: center; align-items: center; overflow: visible; } body.silicon .silicon-chip-icon { display: block !important; width: 100%; height: 100%; min-width: 40px; transition: transform 0.3s; } body.silicon .silicon-chip-icon:hover { transform: scale(1.1); filter: drop-shadow(0 0 5px var(--silicon-copper)); } body.silicon .nav-center.open { background: transparent !important; box-shadow: none !important; } body.silicon .nav-center-list { position: relative; z-index: 901; } body.silicon .nav-center-list a { transition: opacity 0.3s; } #silicon-nav-traces { display: none; }