/* =========================================================== GORJU LIGHTMODE — assets/lightmode.css Comprehensive light theme system for the entire site Activated via [data-theme="light"] on element =========================================================== */ /* ═══════════════════════════════════════════════════════ 1. DESIGN TOKENS ═══════════════════════════════════════════════════════ */ /* Use html[data-theme] to beat inline :root in source-order cascade */ html[data-theme="light"] { --bg: #f7f7f2; --surface: #ffffff; --elevated: #edecea; --border: rgba(0, 0, 0, 0.08); --border-color: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.14); --accent: #111111; --grain-opacity: 0.015; --mockup-bg: #f0f0eb; --mockup-header: #e5e5e0; --overlay-bg: #f7f7f2; --gold-accent: #b87a18; } /* ═══════════════════════════════════════════════════════ 2. BASE ELEMENTS ═══════════════════════════════════════════════════════ */ [data-theme="light"] body { background-color: #f7f7f2 !important; color: #1a1a1a; } [data-theme="light"] .grain { opacity: 0.015; } [data-theme="light"] .ambient-light { background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.012) 0%, transparent 80%); } /* Canvas background sections */ [data-theme="light"] #bg-canvas { opacity: 0.5; } /* ═══════════════════════════════════════════════════════ 3. NAVIGATION ═══════════════════════════════════════════════════════ */ [data-theme="light"] #nav-overlay { background: #f5f5f0; } [data-theme="light"] .ui-dock { background: rgba(245, 245, 240, 0.7); border-color: rgba(0, 0, 0, 0.05); backdrop-filter: blur(20px); } [data-theme="light"] .dock-item { color: rgba(0, 0, 0, 0.35); } [data-theme="light"] .dock-item:hover { background: rgba(0, 0, 0, 0.04); color: #111; letter-spacing: 0.3em; } [data-theme="light"] .index-label { color: rgba(0, 0, 0, 0.35); } [data-theme="light"] .index-line { background: rgba(0, 0, 0, 0.15); } [data-theme="light"] .index-trigger:hover .index-line { background: #111; } [data-theme="light"] .index-trigger:hover .index-label { color: #111; } [data-theme="light"] .overlay-close { color: #111; } [data-theme="light"] .overlay-link { color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .overlay-link:hover { color: #111; transform: skewX(-10deg) translateX(30px); } /* Subpage nav-headers — CRITICAL: disable blend mode for light */ [data-theme="light"] .nav-header { mix-blend-mode: normal !important; } [data-theme="light"] .nav-header a { color: rgba(0, 0, 0, 0.6) !important; } [data-theme="light"] .nav-header > div { color: rgba(0, 0, 0, 0.3) !important; -webkit-text-fill-color: rgba(0, 0, 0, 0.3) !important; } [data-theme="light"] .nav-header [data-theme-toggle] { color: rgba(0, 0, 0, 0.5) !important; } /* ═══════════════════════════════════════════════════════ 4. HERO ═══════════════════════════════════════════════════════ */ /* Shimmer: silver → dark charcoal metallic */ [data-theme="light"] .char { background: linear-gradient( to right, #666666 0%, #444444 22%, #111111 45%, #000000 50%, #444444 78%, #666666 100% ) !important; background-size: 200% auto !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } [data-theme="light"] .hero-bg-text { -webkit-text-stroke: 1px rgba(0, 0, 0, 0.025) !important; background: linear-gradient( 90deg, transparent, rgba(0, 0, 0, 0.06), transparent ) !important; background-size: 200% 100% !important; background-repeat: no-repeat !important; -webkit-background-clip: text !important; background-clip: text !important; } [data-theme="light"] .separator-line { background: linear-gradient( 90deg, transparent, rgba(0, 0, 0, 0.18), transparent ) !important; } /* ═══════════════════════════════════════════════════════ 5. STUDIO / MANIFESTO ═══════════════════════════════════════════════════════ */ [data-theme="light"] .reveal-text { color: rgba(0, 0, 0, 0.88); } [data-theme="light"] .manifesto-text { color: #1a1a1a !important; text-shadow: 0 0 80px rgba(0, 0, 0, 0.06), 0 0 20px rgba(0, 0, 0, 0.03) !important; } [data-theme="light"] .tomorrow-ital { -webkit-text-fill-color: rgba(0, 0, 0, 0.28) !important; transition: -webkit-text-fill-color 0.6s ease !important; } [data-theme="light"] .group:hover .tomorrow-ital { -webkit-text-fill-color: rgba(0, 0, 0, 0.7) !important; } [data-theme="light"] .tomorrow-ital::after { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.25), transparent) !important; } [data-theme="light"] .manifesto-sub { color: rgba(0, 0, 0, 0.22) !important; } [data-theme="light"] .section-label { color: rgba(0, 0, 0, 0.32) !important; } /* Marquee background text in studio */ [data-theme="light"] .sticky [style*="-webkit-text-stroke"] { -webkit-text-stroke-color: rgba(0, 0, 0, 0.06) !important; color: transparent !important; mix-blend-mode: normal !important; } /* ═══════════════════════════════════════════════════════ 6. PRODUCTS ═══════════════════════════════════════════════════════ */ [data-theme="light"] .product-card { border-top-color: rgba(0, 0, 0, 0.05); } [data-theme="light"] .product-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); } [data-theme="light"] .product-title { color: rgba(0, 0, 0, 0.55); } [data-theme="light"] .product-card:hover .product-title { color: #111; } [data-theme="light"] .product-number { color: rgba(0, 0, 0, 0.2); } [data-theme="light"] .product-description { color: rgba(0, 0, 0, 0.42); } [data-theme="light"] .product-svg { color: rgba(0, 0, 0, 0.12); } [data-theme="light"] .product-card:hover .product-svg { color: rgba(0, 0, 0, 0.6); } [data-theme="light"] .product-svg-wrapper { opacity: 0.8; } [data-theme="light"] .product-card:hover .product-svg-wrapper { opacity: 1; } [data-theme="light"] .product-division-bar::before, [data-theme="light"] .product-division-bar::after { background: rgba(0, 0, 0, 0.05); } [data-theme="light"] .product-division-label { color: rgba(0, 0, 0, 0.14); } /* View All Projects link */ [data-theme="light"] .view-all-link, [data-theme="light"] a[style*="rgba(255, 255, 255, 0.25)"] { color: rgba(0, 0, 0, 0.25) !important; } [data-theme="light"] .view-all-link:hover, [data-theme="light"] a[style*="rgba(255, 255, 255, 0.25)"]:hover { color: rgba(0, 0, 0, 0.65) !important; } /* ═══════════════════════════════════════════════════════ 7. ENTITIES / INQUIRY ═══════════════════════════════════════════════════════ */ [data-theme="light"] .entity-container { /* inherits from body */ } [data-theme="light"] .entity-row { border-bottom-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .entity-name { color: rgba(0, 0, 0, 0.35); } [data-theme="light"] .entity-row:hover .entity-name { color: #111; } [data-theme="light"] .entity-index { color: rgba(0, 0, 0, 0.18); } [data-theme="light"] .entity-arrow { color: #111; } [data-theme="light"] .entity-meta { color: rgba(0, 0, 0, 0.22); } [data-theme="light"] .entity-row:hover .entity-meta { color: rgba(0, 0, 0, 0.7); } /* Entity hover line */ [data-theme="light"] .entity-row .bg-white { background-color: #111 !important; } /* CTA email glow */ [data-theme="light"] .cta-wrap .bg-white\/5, [data-theme="light"] .cta-wrap [class*="blur"] { opacity: 0.03; } /* ═══════════════════════════════════════════════════════ 8. BENTO CARDS ═══════════════════════════════════════════════════════ */ [data-theme="light"] .bento-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.06); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03); } [data-theme="light"] .bento-card:hover { border-color: rgba(0, 0, 0, 0.15); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); } [data-theme="light"] .tagline { color: rgba(0, 0, 0, 0.35); } [data-theme="light"] .bento-title { color: rgba(0, 0, 0, 0.9); } [data-theme="light"] .bento-desc { color: rgba(0, 0, 0, 0.5); } /* ═══════════════════════════════════════════════════════ 9. MOCKUP CONTAINERS & TERMINALS ═══════════════════════════════════════════════════════ */ [data-theme="light"] .mockup-container { border-color: rgba(0, 0, 0, 0.05); background: #ebebe6; } [data-theme="light"] .mockup-container .typing-line { border-right-color: rgba(0, 0, 0, 0.5); } /* Terminal window controls — keep subtle */ [data-theme="light"] .mockup-container .bg-red-500\/20 { background-color: rgba(239, 68, 68, 0.15); } [data-theme="light"] .mockup-container .bg-yellow-500\/20 { background-color: rgba(234, 179, 8, 0.15); } [data-theme="light"] .mockup-container .bg-green-500\/20 { background-color: rgba(34, 197, 94, 0.15); } [data-theme="light"] .mockup-container .border-red-500\/50 { border-color: rgba(239, 68, 68, 0.3); } [data-theme="light"] .mockup-container .border-yellow-500\/50 { border-color: rgba(234, 179, 8, 0.3); } [data-theme="light"] .mockup-container .border-green-500\/50 { border-color: rgba(34, 197, 94, 0.3); } /* ═══════════════════════════════════════════════════════ 10. SCROLL INDICATOR ═══════════════════════════════════════════════════════ */ [data-theme="light"] #scroll-indicator { background: rgba(0, 0, 0, 0.12); } /* ═══════════════════════════════════════════════════════ 11. SCROLL-VIDEO-SECTION (Beeamvo) ═══════════════════════════════════════════════════════ */ [data-theme="light"] .scroll-video-section { background: #eaeae5; } [data-theme="light"] .scroll-text .st-label { color: rgba(0, 0, 0, 0.35); } [data-theme="light"] .scroll-text .st-headline { color: #1a1a1a; text-shadow: 0 2px 20px rgba(255, 255, 255, 0.4); } [data-theme="light"] .scroll-text .st-headline em { color: rgba(0, 0, 0, 0.35); } [data-theme="light"] .scroll-text .st-body { color: rgba(0, 0, 0, 0.5); text-shadow: 0 1px 10px rgba(255, 255, 255, 0.2); } /* ═══════════════════════════════════════════════════════ 12. TESTIMONIALS (IT Consulting) ═══════════════════════════════════════════════════════ */ [data-theme="light"] .testimonial-text { color: rgba(0, 0, 0, 0.7); } [data-theme="light"] .testimonial-name { color: rgba(0, 0, 0, 0.85); } [data-theme="light"] .testimonial-company { color: rgba(0, 0, 0, 0.4); } [data-theme="light"] .testimonial-stars { color: #b87a18; } [data-theme="light"] .testimonial-quote-mark { color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .testimonial-dot { border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.03); } [data-theme="light"] .testimonial-dot.active { border-color: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.06); } /* ═══════════════════════════════════════════════════════ 13. ECOSYSTEM PAGE SPECIFICS ═══════════════════════════════════════════════════════ */ [data-theme="light"] .ghost-text { -webkit-text-stroke-color: rgba(0, 0, 0, 0.03) !important; color: transparent !important; } [data-theme="light"] .shimmer-text { color: #1a1a1a !important; } [data-theme="light"] .up-item { border-bottom-color: rgba(0, 0, 0, 0.04); } [data-theme="light"] .up-name { color: rgba(0, 0, 0, 0.75); } [data-theme="light"] .up-desc { color: rgba(0, 0, 0, 0.3); } [data-theme="light"] .up-tag { border-color: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.15); } [data-theme="light"] .up-idx { color: rgba(0, 0, 0, 0.08); } /* ═══════════════════════════════════════════════════════ 14. LEGAL / PRIVACY PAGES ═══════════════════════════════════════════════════════ */ [data-theme="light"] .legal-container { color: rgba(0, 0, 0, 0.65); } [data-theme="light"] .legal-container h1, [data-theme="light"] .legal-container h2 { color: rgba(0, 0, 0, 0.85); } [data-theme="light"] .legal-container a { color: rgba(0, 0, 0, 0.5); } [data-theme="light"] .legal-container a:hover { color: #111; } /* ═══════════════════════════════════════════════════════ 15. CTA SECTION (Sen) ═══════════════════════════════════════════════════════ */ [data-theme="light"] .cta-bg-text { -webkit-text-stroke-color: rgba(0, 0, 0, 0.02) !important; color: transparent !important; } /* SVG button beam animation */ [data-theme="light"] #btn-bg stop:first-child { stop-color: #f0f0eb; } [data-theme="light"] #btn-bg stop:last-child { stop-color: #e5e5e0; } [data-theme="light"] #btn-border stop:nth-child(1), [data-theme="light"] #btn-border stop:nth-child(3) { stop-color: rgba(0, 0, 0, 0.1); } [data-theme="light"] #btn-border stop:nth-child(2) { stop-color: rgba(0, 0, 0, 0.02); } /* ═══════════════════════════════════════════════════════ 16. TAILWIND UTILITY CLASS OVERRIDES — TEXT ═══════════════════════════════════════════════════════ */ [data-theme="light"] .text-white { color: rgba(0, 0, 0, 0.92) !important; } [data-theme="light"] .text-white\/90 { color: rgba(0, 0, 0, 0.82) !important; } [data-theme="light"] .text-white\/80 { color: rgba(0, 0, 0, 0.72) !important; } [data-theme="light"] .text-white\/70 { color: rgba(0, 0, 0, 0.62) !important; } [data-theme="light"] .text-white\/60 { color: rgba(0, 0, 0, 0.52) !important; } [data-theme="light"] .text-white\/50 { color: rgba(0, 0, 0, 0.45) !important; } [data-theme="light"] .text-white\/40 { color: rgba(0, 0, 0, 0.38) !important; } [data-theme="light"] .text-white\/35 { color: rgba(0, 0, 0, 0.32) !important; } [data-theme="light"] .text-white\/30 { color: rgba(0, 0, 0, 0.28) !important; } [data-theme="light"] .text-white\/25 { color: rgba(0, 0, 0, 0.22) !important; } [data-theme="light"] .text-white\/20 { color: rgba(0, 0, 0, 0.18) !important; } [data-theme="light"] .text-white\/15 { color: rgba(0, 0, 0, 0.14) !important; } [data-theme="light"] .text-white\/10 { color: rgba(0, 0, 0, 0.10) !important; } [data-theme="light"] .text-white\/5 { color: rgba(0, 0, 0, 0.06) !important; } /* ═══════════════════════════════════════════════════════ 17. TAILWIND UTILITY CLASS OVERRIDES — BG WHITE ═══════════════════════════════════════════════════════ */ /* bg-white used for hover lines, buttons, structural whites */ [data-theme="light"] .bg-white { background-color: #111 !important; } /* bg-white with opacities → subtle dark overlays on light */ [data-theme="light"] .bg-white\/80 { background-color: rgba(0, 0, 0, 0.04) !important; } [data-theme="light"] .bg-white\/60 { background-color: rgba(0, 0, 0, 0.03) !important; } [data-theme="light"] .bg-white\/50 { background-color: rgba(0, 0, 0, 0.025) !important; } [data-theme="light"] .bg-white\/30 { background-color: rgba(0, 0, 0, 0.03) !important; } [data-theme="light"] .bg-white\/20 { background-color: rgba(0, 0, 0, 0.025) !important; } [data-theme="light"] .bg-white\/15 { background-color: rgba(0, 0, 0, 0.02) !important; } [data-theme="light"] .bg-white\/10 { background-color: rgba(0, 0, 0, 0.025) !important; } [data-theme="light"] .bg-white\/5 { background-color: rgba(0, 0, 0, 0.015) !important; } [data-theme="light"] .bg-white\/3 { background-color: rgba(0, 0, 0, 0.01) !important; } [data-theme="light"] .bg-white\/2 { background-color: rgba(0, 0, 0, 0.008) !important; } /* Very low opacity white backgrounds → barely visible dark variants */ [data-theme="light"] [class*="bg-white/0"] { background-color: rgba(0, 0, 0, 0.008) !important; } /* ═══════════════════════════════════════════════════════ 18. TAILWIND UTILITY CLASS OVERRIDES — BG HEX (Dark hex backgrounds → Light equivalents) ═══════════════════════════════════════════════════════ */ [data-theme="light"] .bg-\[\#030303\] { background-color: #f5f5f0 !important; } [data-theme="light"] .bg-\[\#050505\] { background-color: #eeeee9 !important; } [data-theme="light"] .bg-\[\#080808\] { background-color: #e5e5e0 !important; } [data-theme="light"] .bg-\[\#0a0a0a\] { background-color: #deded9 !important; } [data-theme="light"] .bg-\[\#111\] { background-color: #d5d5d0 !important; } [data-theme="light"] .bg-\[\#111111\] { background-color: #d5d5d0 !important; } [data-theme="light"] .bg-\[\#1A1A1A\] { background-color: #cccccc !important; } /* ═══════════════════════════════════════════════════════ 19. TAILWIND UTILITY CLASS OVERRIDES — BORDER WHITE ═══════════════════════════════════════════════════════ */ [data-theme="light"] .border-white { border-color: rgba(0, 0, 0, 0.15) !important; } [data-theme="light"] .border-white\/50 { border-color: rgba(0, 0, 0, 0.1) !important; } [data-theme="light"] .border-white\/30 { border-color: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .border-white\/20 { border-color: rgba(0, 0, 0, 0.05) !important; } [data-theme="light"] .border-white\/15 { border-color: rgba(0, 0, 0, 0.04) !important; } [data-theme="light"] .border-white\/10 { border-color: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .border-white\/5 { border-color: rgba(0, 0, 0, 0.04) !important; } /* Arbitrary border whites */ [data-theme="light"] [class*="border-white/0"] { border-color: rgba(0, 0, 0, 0.03) !important; } [data-theme="light"] [class*="border-white/[.0"] { border-color: rgba(0, 0, 0, 0.02) !important; } [data-theme="light"] [class*="border-white/[.0"] { border-color: rgba(0, 0, 0, 0.02) !important; } [data-theme="light"] [class*="border-white/[.06"] { border-color: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] [class*="border-white/[.04"] { border-color: rgba(0, 0, 0, 0.04) !important; } /* ═══════════════════════════════════════════════════════ 20. DOT GRID PATTERNS ═══════════════════════════════════════════════════════ */ [data-theme="light"] [class*="radial-gradient(#ffffff"] { background-image: radial-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px) !important; } /* ═══════════════════════════════════════════════════════ 21. INLINE STYLE OVERRIDES (Target elements with inline color styles) ═══════════════════════════════════════════════════════ */ /* Any inline style setting color to white-ish values */ [data-theme="light"] [style*="color: white"], [data-theme="light"] [style*="color:white"] { color: #111 !important; } [data-theme="light"] [style*="color: rgba(255"] { color: rgba(0, 0, 0, 0.45) !important; } /* ═══════════════════════════════════════════════════════ 22. ACCENT COLORS — Slight Darkening for Light BG ═══════════════════════════════════════════════════════ */ [data-theme="light"] .text-\[\#E8A838\], [data-theme="light"] [class*="text-[#E8A838]"] { color: #b87a18 !important; } [data-theme="light"] [class*="bg-[#E8A838]/"] { opacity: 0.85; } /* ═══════════════════════════════════════════════════════ 23. THEME TOGGLE STYLES ═══════════════════════════════════════════════════════ */ [data-theme-toggle] { cursor: pointer; user-select: none; transition: color 0.3s ease; } [data-theme="light"] [data-theme-toggle] { color: rgba(0, 0, 0, 0.5); } [data-theme="light"] [data-theme-toggle]:hover { color: rgba(0, 0, 0, 0.8); } /* ═══════════════════════════════════════════════════════ 24. SCROLLBAR (Chrome/Edge) ═══════════════════════════════════════════════════════ */ [data-theme="light"] ::-webkit-scrollbar-track { background: #eeeee9; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 3px; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); } /* ═══════════════════════════════════════════════════════ 25. FOOTER AREAS ═══════════════════════════════════════════════════════ */ [data-theme="light"] .border-t { border-top-color: rgba(0, 0, 0, 0.06); } /* Hover states for footer links */ [data-theme="light"] footer a:hover, [data-theme="light"] .cta-wrap a:hover { color: #111 !important; } /* Colossal ambient text backgrounds */ [data-theme="light"] [class*="font-display"][class*="text-[45"] { color: rgba(0, 0, 0, 0.015) !important; mix-blend-mode: normal !important; } [data-theme="light"] [class*="font-display"][class*="text-[25"] { color: rgba(0, 0, 0, 0.02) !important; } /* ═══════════════════════════════════════════════════════ 26. BEEAMVO SHOWCASE SECTIONS — Light Mode ═══════════════════════════════════════════════════════ */ /* ── Showcase typography ── */ [data-theme="light"] .showcase-title { color: rgba(0, 0, 0, 0.92); text-shadow: 0 1px 30px rgba(0, 0, 0, 0.04); } [data-theme="light"] .showcase-title em { color: rgba(0, 0, 0, 0.32); } [data-theme="light"] .showcase-desc { color: rgba(0, 0, 0, 0.52); } /* ── Inject mockup ── */ [data-theme="light"] .inject-mockup { background: #ebebe6; border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .inject-orb { background: #deded9; border-right-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .inject-app { background: #e5e5e0; } [data-theme="light"] .inject-titlebar { border-bottom-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .inject-body { color: rgba(0, 0, 0, 0.65); } /* ── Pipeline mockup ── */ [data-theme="light"] .pipeline-mockup { background: #ebebe6; border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .pipeline-bar { background: #e5e5e0; border-color: rgba(0, 0, 0, 0.06); } /* ── Semantic mockup ── */ [data-theme="light"] .semantic-mockup { background: #ebebe6; border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .semantic-before { background: #deded9; border-bottom-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .semantic-before div { color: rgba(0, 0, 0, 0.32); } [data-theme="light"] .semantic-arrow { background: #e5e5e0; } [data-theme="light"] .semantic-after { background: rgba(184, 122, 24, 0.06); color: rgba(140, 90, 10, 0.85); } [data-theme="light"] .scramble-text { color: rgba(140, 90, 10, 0.85); } /* ── Platform strip ── */ [data-theme="light"] .platform-strip { border-top-color: rgba(0, 0, 0, 0.06); border-bottom-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .platform-strip-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .platform-strip-card:hover { border-color: rgba(0, 0, 0, 0.12); } [data-theme="light"] .platform-strip-card { background: #ffffff; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.06); } [data-theme="light"] .platform-strip-card div { color: rgba(0, 0, 0, 0.85); } [data-theme="light"] .platform-strip-card .font-mono { color: rgba(0, 0, 0, 0.35); } /* ── Hotkey badges ── */ [data-theme="light"] .hotkey-badge { border-color: rgba(0, 0, 0, 0.08); background: rgba(0, 0, 0, 0.025); color: rgba(0, 0, 0, 0.55); } [data-theme="light"] .hotkey-badge [class*="text-white"], [data-theme="light"] .hotkey-badge span { color: rgba(0, 0, 0, 0.55) !important; } [data-theme="light"] .hotkey-strip > div:last-child, [data-theme="light"] .hotkey-strip > .font-mono { color: rgba(0, 0, 0, 0.25) !important; } /* ── Vault mockup ── */ [data-theme="light"] .vault-mockup { background: #ebebe6; border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .vault-header { background: #deded9; border-bottom-color: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.45); } [data-theme="light"] .vault-header span { color: rgba(0, 0, 0, 0.45); } [data-theme="light"] .vault-header .font-mono { color: rgba(0, 0, 0, 0.22); } [data-theme="light"] .vault-entry { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .vault-entry-text { color: rgba(0, 0, 0, 0.72); } [data-theme="light"] .vault-entry-meta { color: rgba(0, 0, 0, 0.28); } /* ── Privacy badge ── */ [data-theme="light"] .privacy-badge { border-color: rgba(34, 197, 94, 0.18); background: rgba(34, 197, 94, 0.04); } [data-theme="light"] .privacy-badge span { color: rgba(22, 163, 74, 0.55); } /* ── Rules mockup ── */ [data-theme="light"] .rules-mockup { background: #ebebe6; border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .rules-header { background: #deded9; border-bottom-color: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.45); } [data-theme="light"] .rules-body .rule-item { color: rgba(0, 0, 0, 0.7); } [data-theme="light"] .rules-body .rule-item.active-rule { background-color: rgba(184, 122, 24, 0.06); border-color: rgba(184, 122, 24, 0.15); } /* ── Profile pills ── */ [data-theme="light"] .profile-pill { border-color: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.28); background: rgba(0, 0, 0, 0.015); } [data-theme="light"] .profile-pill.active { border-color: rgba(184, 122, 24, 0.25); color: rgba(140, 90, 10, 0.7); background: rgba(184, 122, 24, 0.04); } [data-theme="light"] .profile-pill:hover { border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.5); } /* ── Closing section ── */ [data-theme="light"] .bg-\[\#070707\], [data-theme="light"] [style*="background: #070707"], [data-theme="light"] [style*="background:#070707"] { background-color: #ffffff !important; } [data-theme="light"] [style*="border: 1px solid rgba(255,255,255,0.05)"], [data-theme="light"] [style*="border: 1px solid rgba(255, 255, 255, 0.05)"] { border-color: rgba(0, 0, 0, 0.06) !important; } /* ── Closing CTA buttons ── */ [data-theme="light"] .border-\[\#E8A838\]\/30 { border-color: rgba(184, 122, 24, 0.25) !important; } [data-theme="light"] .bg-\[\#E8A838\]\/\[0\.05\] { background-color: rgba(184, 122, 24, 0.04) !important; } [data-theme="light"] .text-\[\#E8A838\]\/60 { color: rgba(140, 90, 10, 0.65) !important; } /* ── Waveform rings — subtle dark borders for light ── */ [data-theme="light"] .wave-ring { border-color: rgba(184, 122, 24, 0.18); } /* ── Dot grid pattern in inject orb ── */ [data-theme="light"] .inject-orb [class*="radial-gradient(#ffffff"] { background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px) !important; } /* ── Radial glow backgrounds in pipeline nodes ── */ [data-theme="light"] .pipeline-whisper .absolute, [data-theme="light"] .pipeline-gemini .absolute { opacity: 0.5; } /* ── Particle stream in light mode ── */ [data-theme="light"] .data-particle { background: rgba(0, 0, 0, 0.35); box-shadow: 0 0 6px rgba(184, 122, 24, 0.2); } [data-theme="light"] .data-particle-purple { background: rgba(107, 33, 168, 0.4) !important; box-shadow: 0 0 6px rgba(107, 33, 168, 0.15) !important; } /* ── Hero text subtitle (beamvo page inline classes) ── */ [data-theme="light"] .split-text { color: rgba(0, 0, 0, 0.5) !important; } /* ── Platform pills in closing ── */ [data-theme="light"] .rounded-full[class*="border-white"] { border-color: rgba(0, 0, 0, 0.06) !important; } [data-theme="light"] .rounded-full .w-2 { background-color: rgba(0, 0, 0, 0.15) !important; } /* ── Vault item pulse animation ── */ [data-theme="light"] .vault-item { border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .vault-item.pulseOpacity { border-color: rgba(0, 0, 0, 0.08); } /* ═══════════════════════════════════════════════════════ 27. IMMERSIVE FULL-CANVAS SCENES — Light Mode ═══════════════════════════════════════════════════════ */ [data-theme="light"] .imm-viewport { background: var(--bg) !important; } [data-theme="light"] .imm-label { color: rgba(0,0,0,0.35); letter-spacing: 0.6em; } [data-theme="light"] .imm-headline { color: rgba(0,0,0,0.92); text-shadow: 0 1px 30px rgba(0,0,0,0.04); } [data-theme="light"] .imm-headline em { color: rgba(0,0,0,0.3); } [data-theme="light"] .imm-body { color: rgba(0,0,0,0.45); } [data-theme="light"] .imm-listen-tag { color: #b87a18; background: rgba(184,122,24,0.06); border-color: rgba(184,122,24,0.18); box-shadow: 0 2px 16px rgba(184,122,24,0.08); } [data-theme="light"] .imm-app-mockup { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.08); box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.04) inset; } [data-theme="light"] .imm-app-body { color: rgba(0,0,0,0.5); } [data-theme="light"] .imm-typing-line { color: rgba(0,0,0,0.88) !important; } [data-theme="light"] .imm-node-box { background: rgba(255,255,255,0.92); border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.06); } [data-theme="light"] .imm-node-name { color: rgba(0,0,0,0.85); } [data-theme="light"] .imm-node-sub { color: rgba(0,0,0,0.28); } [data-theme="light"] .imm-tf-card { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.08); box-shadow: 0 24px 64px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.04) inset; } [data-theme="light"] .imm-tf-messy { color: rgba(0,0,0,0.22); } [data-theme="light"] .imm-tf-after { background: rgba(184,122,24,0.05); color: rgba(140,90,10,0.9); } [data-theme="light"] .scramble-text { color: rgba(140,90,10,0.9); } /* Platform strip — SVG logos in light */ [data-theme="light"] .platform-strip-card svg { opacity: 0.75; } [data-theme="light"] .platform-strip-card .font-mono { color: rgba(0,0,0,0.35) !important; } /* Closing section */ [data-theme="light"] .closing-stage { background: #f5f5f0 !important; } [data-theme="light"] .closing-label { color: rgba(0,0,0,0.32); } [data-theme="light"] .closing-title { color: rgba(0,0,0,0.92); text-shadow: 0 1px 40px rgba(0,0,0,0.04); } [data-theme="light"] .closing-title span { color: rgba(0,0,0,0.28) !important; } [data-theme="light"] .closing-desc { color: rgba(0,0,0,0.42); } [data-theme="light"] .closing-pill { border-color: rgba(0,0,0,0.08); background: rgba(0,0,0,0.025); } [data-theme="light"] .closing-pill span { color: rgba(0,0,0,0.42); } [data-theme="light"] .closing-pill svg { opacity: 0.65; } [data-theme="light"] .closing-btn-primary { border-color: rgba(184,122,24,0.3); background: rgba(184,122,24,0.04); box-shadow: 0 2px 24px rgba(184,122,24,0.08); } [data-theme="light"] .closing-btn-primary span { color: rgba(140,90,10,0.65) !important; } [data-theme="light"] .closing-btn-primary svg { color: rgba(140,90,10,0.65) !important; } [data-theme="light"] .closing-btn-primary:hover { border-color: rgba(184,122,24,0.5); background: rgba(184,122,24,0.08); box-shadow: 0 4px 30px rgba(184,122,24,0.15); } [data-theme="light"] .closing-btn-primary:hover span { color: rgba(140,90,10,0.9) !important; } [data-theme="light"] .closing-btn-primary:hover svg { color: rgba(140,90,10,0.9) !important; } [data-theme="light"] .closing-btn-secondary { border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.03); color: rgba(0,0,0,0.5); } [data-theme="light"] .closing-btn-secondary:hover { border-color: rgba(0,0,0,0.2); background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.7); } /* ═══════════════════════════════════════════════════════ 28. PREMIUM LIGHT MODE REFINEMENTS ═══════════════════════════════════════════════════════ */ /* ── Warm ambient glow for hero ── */ [data-theme="light"] .ambient-light { background: radial-gradient(circle at 50% 40%, rgba(232, 168, 56, 0.025) 0%, transparent 70%); } /* ── Showcase sections — add subtle bg separation ── */ [data-theme="light"] .showcase-section:nth-child(even) { background: rgba(0, 0, 0, 0.012); } /* ── Vault mockup — elevated card feel ── */ [data-theme="light"] .vault-mockup { box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(0, 0, 0, 0.04) inset; } [data-theme="light"] .vault-entry { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.05); transition: background 0.3s, border-color 0.3s; } [data-theme="light"] .vault-entry:hover { background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.08); } /* ── Rules mockup — elevated ── */ [data-theme="light"] .rules-mockup { box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(0, 0, 0, 0.04) inset; } [data-theme="light"] .rules-body .rule-item { color: rgba(0, 0, 0, 0.65); transition: background 0.3s, border-color 0.3s; } /* ── Pipeline mockup — premium ── */ [data-theme="light"] .pipeline-mockup { box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(0, 0, 0, 0.04) inset; } /* ── Semantic mockup — premium ── */ [data-theme="light"] .semantic-mockup { box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(0, 0, 0, 0.04) inset; } /* ── Inject mockup — premium ── */ [data-theme="light"] .inject-mockup { box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(0, 0, 0, 0.04) inset; } /* ── Custom cursor in light mode — dark dot ── */ [data-theme="light"] #custom-cursor { background: rgba(0, 0, 0, 0.6); mix-blend-mode: normal; } /* ── Platform strip — subtle bg ── */ [data-theme="light"] .platform-strip { background: rgba(0, 0, 0, 0.015); } /* ── Immersive scene mockup inner text ── */ [data-theme="light"] .imm-app-comment { color: rgba(0, 0, 0, 0.2) !important; } [data-theme="light"] .imm-app-name { color: rgba(0, 0, 0, 0.15) !important; } [data-theme="light"] .imm-dot { opacity: 0.55 !important; } /* ── Waveform rings — stronger in light ── */ [data-theme="light"] .wave-ring { border-color: rgba(184, 122, 24, 0.22); } /* ── Profile pills — clearer active state ── */ [data-theme="light"] .profile-pill.active { border-color: rgba(184, 122, 24, 0.3); color: rgba(140, 90, 10, 0.75); background: rgba(184, 122, 24, 0.06); box-shadow: 0 2px 12px rgba(184, 122, 24, 0.08); } /* ── Privacy badge — stronger ── */ [data-theme="light"] .privacy-badge { border-color: rgba(34, 197, 94, 0.2); background: rgba(34, 197, 94, 0.05); } /* ── Better text contrast for inline mono text ── */ [data-theme="light"] .font-mono.text-white\/20, [data-theme="light"] .font-mono.text-white\\/20 { color: rgba(0, 0, 0, 0.3) !important; } [data-theme="light"] .font-mono.text-white\/30, [data-theme="light"] .font-mono.text-white\\/30 { color: rgba(0, 0, 0, 0.38) !important; } /* ── Hotkey pills in hero — light mode refinement ── */ [data-theme="light"] [class*="bg-white/[0.04]"] { background-color: rgba(0, 0, 0, 0.03) !important; } /* ── Scrollbar refinement ── */ [data-theme="light"] ::-webkit-scrollbar-track { background: #f0f0eb; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 3px; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); } /* ── App mockup inner elements — better readability ── */ [data-theme="light"] .imm-app-bar { border-bottom-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .imm-tf-before { border-bottom-color: rgba(0, 0, 0, 0.06); }