/* Light Theme Overrides - PT Inti Nusantara Teknologi */ /* Applied when does NOT have class="dark" */ html:not(.dark) { --tw-colors-background: #f5f0e8; --tw-colors-surface: #f5f0e8; --tw-colors-surface-dim: #d9d3c7; --tw-colors-surface-bright: #f5f0e8; --tw-colors-surface-container-lowest: #ffffff; --tw-colors-surface-container-low: #efe9dd; --tw-colors-surface-container: #e9e3d7; --tw-colors-surface-container-high: #e3ddd1; --tw-colors-surface-container-highest: #ded8cc; --tw-colors-on-background: #1d1b16; --tw-colors-on-surface: #1d1b16; --tw-colors-on-surface-variant: #4a4639; --tw-colors-primary: #6b5d3e; --tw-colors-on-primary: #ffffff; --tw-colors-primary-container: #f2e0c4; --tw-colors-on-primary-container: #231b00; --tw-colors-secondary: #6d5d2e; --tw-colors-on-secondary: #ffffff; --tw-colors-secondary-container: #f7e1a5; --tw-colors-on-secondary-container: #231b00; --tw-colors-tertiary: #4a6263; --tw-colors-on-tertiary: #ffffff; --tw-colors-tertiary-container: #cde4e4; --tw-colors-on-tertiary-container: #052f30; --tw-colors-error: #ba1a1a; --tw-colors-on-error: #ffffff; --tw-colors-outline: #7c7768; --tw-colors-outline-variant: #cdc7b7; } /* Light theme body and backgrounds */ html:not(.dark) body { background-color: #f5f0e8; color: #1d1b16; } html:not(.dark) .bg-background { background-color: #f5f0e8 !important; } html:not(.dark) .bg-surface { background-color: #f5f0e8 !important; } html:not(.dark) .bg-surface\/40 { background-color: rgba(245, 240, 232, 0.4) !important; } html:not(.dark) .bg-surface\/80 { background-color: rgba(245, 240, 232, 0.8) !important; } html:not(.dark) .bg-surface\/50 { background-color: rgba(245, 240, 232, 0.5) !important; } html:not(.dark) .bg-surface-container-lowest { background-color: #ffffff !important; } html:not(.dark) .bg-surface-container-lowest\/40 { background-color: rgba(255, 255, 255, 0.4) !important; } html:not(.dark) .bg-surface-container-lowest\/50 { background-color: rgba(255, 255, 255, 0.5) !important; } html:not(.dark) .bg-surface-container-lowest\/20 { background-color: rgba(255, 255, 255, 0.2) !important; } html:not(.dark) .bg-surface-container-lowest\/80 { background-color: rgba(255, 255, 255, 0.8) !important; } /* Footer - comprehensive light mode override */ html:not(.dark) footer { background-color: rgba(255, 255, 255, 0.9) !important; border-top-color: rgba(109, 93, 46, 0.15) !important; } html:not(.dark) footer .text-secondary { color: #6d5d2e !important; } html:not(.dark) footer .text-on-surface-variant { color: #4a4639 !important; } html:not(.dark) footer .text-on-surface { color: #1d1b16 !important; } html:not(.dark) footer a { color: #4a4639 !important; } html:not(.dark) footer a:hover { color: #4a6263 !important; } html:not(.dark) .bg-surface-container { background-color: #e9e3d7 !important; } html:not(.dark) .bg-surface-container-high { background-color: #e3ddd1 !important; } html:not(.dark) .bg-surface-container-high\/50 { background-color: rgba(227, 221, 209, 0.5) !important; } html:not(.dark) .bg-surface-container-low { background-color: #efe9dd !important; } /* Text colors */ html:not(.dark) .text-on-background { color: #1d1b16 !important; } html:not(.dark) .text-on-surface { color: #1d1b16 !important; } html:not(.dark) .text-on-surface-variant { color: #4a4639 !important; } html:not(.dark) .text-primary { color: #6b5d3e !important; } html:not(.dark) .text-secondary { color: #6d5d2e !important; } html:not(.dark) .text-tertiary { color: #4a6263 !important; } html:not(.dark) .text-on-primary { color: #ffffff !important; } html:not(.dark) .text-on-secondary { color: #ffffff !important; } html:not(.dark) .text-on-tertiary { color: #ffffff !important; } html:not(.dark) .text-on-tertiary-container { color: #052f30 !important; } html:not(.dark) .text-outline { color: #7c7768 !important; } html:not(.dark) .text-error { color: #ba1a1a !important; } /* Border colors */ html:not(.dark) .border-white\/10 { border-color: rgba(0, 0, 0, 0.1) !important; } html:not(.dark) .border-white\/5 { border-color: rgba(0, 0, 0, 0.05) !important; } html:not(.dark) .border-secondary\/20 { border-color: rgba(109, 93, 46, 0.2) !important; } html:not(.dark) .border-secondary\/30 { border-color: rgba(109, 93, 46, 0.3) !important; } html:not(.dark) .border-secondary\/40 { border-color: rgba(109, 93, 46, 0.4) !important; } html:not(.dark) .border-secondary\/50 { border-color: rgba(109, 93, 46, 0.5) !important; } html:not(.dark) .border-primary\/20 { border-color: rgba(107, 93, 62, 0.2) !important; } html:not(.dark) .border-primary\/30 { border-color: rgba(107, 93, 62, 0.3) !important; } html:not(.dark) .border-tertiary\/20 { border-color: rgba(74, 98, 99, 0.2) !important; } html:not(.dark) .border-tertiary\/30 { border-color: rgba(74, 98, 99, 0.3) !important; } html:not(.dark) .border-outline\/20 { border-color: rgba(124, 119, 104, 0.2) !important; } html:not(.dark) .border-outline-variant\/30 { border-color: rgba(205, 199, 183, 0.3) !important; } html:not(.dark) .border-on-tertiary-container { border-color: #052f30 !important; } /* Glass panels - light mode */ html:not(.dark) .glass-panel { background-color: rgba(255, 255, 255, 0.7) !important; border-color: rgba(107, 93, 62, 0.15) !important; border-top-color: rgba(107, 93, 62, 0.3) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08) !important; } html:not(.dark) .glass-card { background: rgba(255, 255, 255, 0.6) !important; border-color: rgba(0, 0, 0, 0.08) !important; border-top-color: #6d5d2e !important; } /* Blueprint cards - light mode */ html:not(.dark) .blueprint-card { background: rgba(255, 255, 255, 0.8) !important; border-color: rgba(107, 93, 62, 0.2) !important; box-shadow: inset 0 0 20px rgba(107, 93, 62, 0.05) !important; } html:not(.dark) .blueprint-card:hover { border-color: rgba(107, 93, 62, 0.5) !important; box-shadow: 0 0 20px rgba(107, 93, 62, 0.15), inset 0 0 30px rgba(107, 93, 62, 0.05) !important; } html:not(.dark) .blueprint-bg { background-color: #efe9dd !important; } html:not(.dark) .blueprint-grid { background-image: linear-gradient(rgba(107, 93, 62, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 93, 62, 0.15) 1px, transparent 1px), linear-gradient(rgba(107, 93, 62, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 93, 62, 0.05) 1px, transparent 1px) !important; } html:not(.dark) .blueprint-grid::after { background: radial-gradient(circle at center, transparent 10%, #efe9dd 90%) !important; } /* Navigation - light mode */ html:not(.dark) nav { background-color: rgba(245, 240, 232, 0.8) !important; border-bottom-color: rgba(0, 0, 0, 0.08) !important; } /* Footer - light mode */ html:not(.dark) footer { border-top-color: rgba(109, 93, 46, 0.15) !important; } /* Background overlays - light mode */ html:not(.dark) .tech-bg-overlay { background-image: linear-gradient(rgba(107, 93, 62, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 93, 62, 0.15) 1px, transparent 1px) !important; opacity: 0.08 !important; } html:not(.dark) .tech-bg-circuit { opacity: 0.1 !important; } html:not(.dark) .tech-grid { background-image: linear-gradient(rgba(107, 93, 62, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 93, 62, 0.08) 1px, transparent 1px) !important; } html:not(.dark) .tech-nodes { opacity: 0.15 !important; } /* Circuit backgrounds - light mode */ html:not(.dark) .circuit-bg { background-color: #e9e3d7 !important; background-image: radial-gradient(circle at 50% 30%, rgba(107, 93, 62, 0.1) 0%, transparent 60%), linear-gradient(rgba(107, 93, 62, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 93, 62, 0.06) 1px, transparent 1px) !important; } html:not(.dark) .circuit-divider { background: rgba(107, 93, 62, 0.1) !important; } html:not(.dark) .circuit-divider::before { background: linear-gradient(90deg, transparent, rgba(107, 93, 62, 0.5), transparent) !important; } html:not(.dark) .circuit-node { background: #6b5d3e !important; box-shadow: 0 0 10px rgba(107, 93, 62, 0.5) !important; } /* Tech glow - light mode */ html:not(.dark) .tech-glow { box-shadow: 0 0 15px rgba(107, 93, 62, 0.15) !important; } /* Specific background overrides */ html:not(.dark) .bg-\[\#02081a\] { background-color: #f5f0e8 !important; } html:not(.dark) .bg-\[\#02081a\]\/60 { background-color: rgba(245, 240, 232, 0.6) !important; } html:not(.dark) .bg-\[\#02081a\]\/90 { background-color: rgba(245, 240, 232, 0.9) !important; } html:not(.dark) .bg-\[\#050a1f\] { background-color: #efe9dd !important; } html:not(.dark) .bg-\[\#050b1e\] { background-color: #e9e3d7 !important; } html:not(.dark) .bg-\[\#0c0f10\]\/90 { background-color: rgba(255, 255, 255, 0.9) !important; } html:not(.dark) .bg-\[\#000010\] { background-color: #ffffff !important; } html:not(.dark) .bg-\[\#000015\] { background-color: #efe9dd !important; } html:not(.dark) .bg-\[\#000022\] { background-color: #e9e3d7 !important; } html:not(.dark) .bg-\[\#111415\]\/95 { background-color: rgba(245, 240, 232, 0.95) !important; } html:not(.dark) .bg-\[\#030712\] { background-color: #f5f0e8 !important; } html:not(.dark) .bg-\[\#000712\] { background-color: #efe9dd !important; } /* Gradient overrides */ html:not(.dark) .bg-gradient-to-t.from-\[\#02081a\] { --tw-gradient-from: #f5f0e8 !important; } html:not(.dark) .bg-gradient-to-b.from-transparent {} /* Scan lines - light mode */ html:not(.dark) .scan-lines { opacity: 0.3 !important; } /* Form inputs - light mode */ html:not(.dark) input, html:not(.dark) select, html:not(.dark) textarea { background-color: #efe9dd !important; border-color: rgba(0, 0, 0, 0.15) !important; color: #1d1b16 !important; } /* Hover states - light mode */ html:not(.dark) .hover\:bg-white\/5:hover { background-color: rgba(0, 0, 0, 0.03) !important; } html:not(.dark) .hover\:bg-\[\#0070FF\]\/10:hover { background-color: rgba(107, 93, 62, 0.08) !important; } /* Shadow overrides */ html:not(.dark) .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05) !important; } html:not(.dark) .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1) !important; } /* Background image containers - light mode */ html:not(.dark) .bg-\[url\*\=unsplash\] { opacity: 0.05 !important; } /* Orbit paths - light mode */ html:not(.dark) .orbit-path { border-color: rgba(107, 93, 62, 0.2) !important; } /* Geom cards - light mode */ html:not(.dark) .geom-card { background-color: rgba(255, 255, 255, 0.8) !important; } /* Background texture dots - light mode */ html:not(.dark) .fixed.inset-0.z-0.pointer-events-none.opacity-5 { opacity: 0.03 !important; } /* Tech overlay - light mode */ html:not(.dark) .tech-overlay { opacity: 0.1 !important; } /* Background gradient overrides for about page */ html:not(.dark) .bg-gradient-to-b.from-transparent.via-\[\#050a1f\]\/80 { --tw-gradient-via: rgba(239, 233, 221, 0.8) !important; } html:not(.dark) .bg-gradient-to-b.from-transparent.via-\[\#050a1f\]\/80.to-\[\#050a1f\] { --tw-gradient-to: #efe9dd !important; } /* Background radial gradient for contact */ html:not(.dark) .bg-\[radial-gradient\(ellipse_at_center\,rgba\(0\,112\,255\,0\.05\)_0\%\,transparent_100\%\)\] { background: radial-gradient(ellipse at center, rgba(107, 93, 62, 0.05) 0%, transparent 100%) !important; } /* Background radial gradient for contact map */ html:not(.dark) .bg-\[radial-gradient\(circle_at_center\,transparent_50\%\,rgba\(0\,0\,30\,0\.8\)_100\%\)\] { background: radial-gradient(circle at center, transparent 50%, rgba(233, 227, 215, 0.8) 100%) !important; } /* Background dot pattern for about */ html:not(.dark) .bg-\[url\(\'data\:image\/svg\+xml\;base64.*\'\)\] { opacity: 0.15 !important; } /* Ensure images have slight opacity reduction in light mode for consistency */ html:not(.dark) img[src*="hero-bg"] { opacity: 0.15 !important; } html:not(.dark) img[src*="unsplash-tech"] { opacity: 0.08 !important; } /* Light theme specific background for body */ html:not(.dark) .bg-\[\#02081a\]\/60 { background-color: rgba(245, 240, 232, 0.6) !important; } /* Additional background overrides */ html:not(.dark) .bg-\[\#02081a\]\/50 { background-color: rgba(245, 240, 232, 0.5) !important; } html:not(.dark) .bg-\[\#0c0f10\] { background-color: #e9e3d7 !important; } /* Terminal border - light mode */ html:not(.dark) .terminal-border { border-color: rgba(109, 93, 46, 0.2) !important; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.03) !important; } /* Orbit container - light mode */ html:not(.dark) .orbit-container { border-color: rgba(107, 93, 62, 0.15) !important; } /* Orbit nodes - light mode */ html:not(.dark) .orbit-node { background-color: rgba(255, 255, 255, 0.9) !important; border-color: rgba(107, 93, 62, 0.3) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important; } /* Drop shadow - light mode */ html:not(.dark) .drop-shadow-md { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.05)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.03)) !important; } /* Backdrop blur nav - light mode */ html:not(.dark) .backdrop-blur-xl { -webkit-backdrop-filter: blur(24px) !important; backdrop-filter: blur(24px) !important; } /* Secondary button overrides - light mode */ html:not(.dark) .bg-secondary\/20 { background-color: rgba(109, 93, 46, 0.1) !important; } html:not(.dark) .bg-secondary-fixed { background-color: #f7e1a5 !important; } /* Primary container overrides - light mode */ html:not(.dark) .bg-primary\/10 { background-color: rgba(107, 93, 62, 0.08) !important; } html:not(.dark) .bg-primary\/20 { background-color: rgba(107, 93, 62, 0.12) !important; } html:not(.dark) .bg-primary\/30 { background-color: rgba(107, 93, 62, 0.18) !important; } /* White text override for light mode */ html:not(.dark) .text-white { color: #1d1b16 !important; } html:not(.dark) .text-white\/70 { color: rgba(29, 27, 22, 0.7) !important; } html:not(.dark) .text-white\/80 { color: rgba(29, 27, 22, 0.8) !important; } /* Gradient text override for light mode */ html:not(.dark) .from-secondary.via-white.to-\[\#0070FF\] { --tw-gradient-from: #6d5d2e !important; --tw-gradient-via: #1d1b16 !important; --tw-gradient-to: #4a6263 !important; --tw-gradient-stops: #6d5d2e, #1d1b16, #4a6263 !important; background-image: linear-gradient(to right, #6d5d2e, #1d1b16, #4a6263) !important; } /* SVG stroke overrides for light mode */ html:not(.dark) svg [stroke="#0070FF"] { stroke: #4a6263; } /* Corner brackets - light mode */ html:not(.dark) .corner-brackets { border-color: rgba(109, 93, 46, 0.3) !important; } /* Card animate hover - light mode */ html:not(.dark) .card-animate:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important; } /* Mobile menu - light mode */ html:not(.dark) .mobile-menu-container { background-color: rgba(255, 255, 255, 0.95) !important; border-top-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important; } html:not(.dark) .mobile-menu-container a { color: #1d1b16 !important; border-bottom-color: rgba(0, 0, 0, 0.06) !important; } html:not(.dark) .mobile-menu-container a:hover { color: #6d5d2e !important; } html:not(.dark) .bg-surface-container-lowest\/95 { background-color: rgba(255, 255, 255, 0.95) !important; } html:not(.dark) .border-outline\/10 { border-color: rgba(124, 119, 104, 0.1) !important; } html:not(.dark) .border-outline\/20 { border-color: rgba(124, 119, 104, 0.2) !important; } /* ======================================== STYLE BLOCK HARD CODED COLOR OVERRIDES ======================================== */ /* Body backgrounds in