/* ===================================================================== * lnb-themes.css — hot-swappable theme registry * * Loaded on every public + admin page (linked from lnb-mobile.css and * directly from page heads). The theme system has THREE moving parts: * * 1. CSS variables: every visual surface (background, card, text, * border, accents, shadows) consumes a `--lnb-*` variable. The * pages may also still reference their legacy names (--bg, --text, * --card, etc.) — we redefine those too so existing code keeps * working without an HTML rewrite. * * 2. Theme selectors: `[data-theme="dark"]` and `[data-theme="light"]` * on the element. Default is dark (the site's original * design). New themes can be added by extending this file with * another `[data-theme=""]` block — no JS changes required. * * 3. Theme switcher (assets/js/lnb-theme-switcher.js): a floating * pill that flips the data-theme attribute and saves the choice * to localStorage("lnb.theme"). * * Brand accents (green, gold) stay consistent across themes for brand * recognition — only backgrounds, surfaces, text, and elevation change. * This is the same pattern used by Linear, Stripe, Vercel, etc. * * Future themes (holiday, seasonal, sponsor-branded) just add a new * block here and a new entry to THEMES[] in the switcher JS. * ===================================================================== */ :root { /* Default fallback variables — match dark theme so the page never looks broken before the theme attribute is applied. */ --lnb-bg: #050a07; --lnb-bg-2: #08130e; --lnb-surface: #0d1612; --lnb-surface-2: #121f18; --lnb-line: #203129; --lnb-text: #eef5ef; --lnb-text-2: #c9d7ce; --lnb-muted: #91a094; --lnb-green: #69e59a; --lnb-green-2: #27a556; --lnb-gold: #f0c35a; --lnb-gold-2: #d5a83f; --lnb-red: #f0a0a0; --lnb-blue: #75b8ff; --lnb-link: #69e59a; --lnb-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.32); --lnb-shadow: 0 20px 60px rgba(0, 0, 0, 0.42); --lnb-shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.5); --lnb-ring: rgba(110, 232, 154, 0.16); /* Backward-compatible legacy aliases. Every existing page reads these variable names — by mapping them to --lnb-* the theme switch propagates automatically without touching any page CSS. */ --bg: var(--lnb-bg); --bg2: var(--lnb-bg-2); --card: var(--lnb-surface); --card2: var(--lnb-surface-2); --line: var(--lnb-line); --text: var(--lnb-text); --text2: var(--lnb-text-2); --text-2: var(--lnb-text-2); --muted: var(--lnb-muted); --mute: var(--lnb-muted); --gold: var(--lnb-gold); --gold2: var(--lnb-gold-2); --gold-2: var(--lnb-gold-2); --green: var(--lnb-green); --green2: var(--lnb-green-2); --g-300: var(--lnb-green); --g-400: var(--lnb-green); --g-500: var(--lnb-green-2); --red: var(--lnb-red); --blue: var(--lnb-blue); } /* ================ DARK THEME (default) ================ */ [data-theme="dark"]:root, html[data-theme="dark"] { color-scheme: dark; --lnb-bg: #050a07; --lnb-bg-2: #08130e; --lnb-surface: #0d1612; --lnb-surface-2: #121f18; --lnb-line: #203129; --lnb-text: #eef5ef; --lnb-text-2: #c9d7ce; --lnb-muted: #91a094; --lnb-green: #69e59a; --lnb-green-2: #27a556; --lnb-gold: #f0c35a; --lnb-gold-2: #d5a83f; --lnb-red: #f0a0a0; --lnb-blue: #75b8ff; --lnb-link: #69e59a; --lnb-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.32); --lnb-shadow: 0 20px 60px rgba(0, 0, 0, 0.42); --lnb-shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.5); --lnb-ring: rgba(110, 232, 154, 0.16); } /* ================ LIGHT THEME ================ * Designed light-first — not just an inversion. Cards sit on warm * off-white with subtle shadow for elevation. Text uses a deep * almost-black green for brand affinity. Brand accents (green, gold) * are darkened slightly for proper contrast on white. */ [data-theme="light"]:root, html[data-theme="light"] { color-scheme: light; --lnb-bg: #f6f7f3; /* warm off-white page background */ --lnb-bg-2: #eef1ea; /* slightly cooler section bg */ --lnb-surface: #ffffff; /* card / panel */ --lnb-surface-2: #f8faf5; /* subtle alternate card */ --lnb-line: #d9e0d6; /* hairline borders */ --lnb-text: #0d1f17; /* near-black green — high contrast */ --lnb-text-2: #3a4c43; /* secondary text */ --lnb-muted: #5a6b61; /* tertiary / hints — darkened to clear WCAG AA (5.6:1 on white) */ --lnb-green: #1f8f4f; /* darker green so it works on white */ --lnb-green-2: #0c5f33; /* deepest brand green */ --lnb-gold: #b08820; /* deeper gold for readable text */ --lnb-gold-2: #8c6b15; /* darker gold for buttons/borders */ --lnb-red: #b94545; --lnb-blue: #2563eb; --lnb-link: #0c5f33; --lnb-shadow-sm: 0 2px 6px rgba(13, 31, 23, 0.06), 0 1px 2px rgba(13, 31, 23, 0.04); --lnb-shadow: 0 10px 30px rgba(13, 31, 23, 0.08), 0 4px 10px rgba(13, 31, 23, 0.04); --lnb-shadow-lg: 0 24px 60px rgba(13, 31, 23, 0.10), 0 8px 18px rgba(13, 31, 23, 0.05); --lnb-ring: rgba(31, 143, 79, 0.18); /* Brand-shimmer gradients (used on headlines) need lighter endpoints so the moving gradient stays visible against bright surfaces. */ --lnb-shimmer-1: #0d1f17; --lnb-shimmer-2: #1f8f4f; --lnb-shimmer-3: #b08820; } /* ================ FUTURE THEMES — leave the slot wide ================ * Add the next theme as another `[data-theme="..."]` block below. * The switcher JS picks them up automatically as long as you also * register them in THEMES[] inside lnb-theme-switcher.js. * * Examples to be unlocked later: * [data-theme="holiday-winter"] — deep green base + warm white text + * red+gold accents. * [data-theme="founders"] — black + gold premium variant for the * investor data room. * [data-theme="contrast"] — WCAG AAA black/white extreme for * accessibility-mode preview. * ===================================================================== */ /* ================ Light-theme component touchups ================ * These rules ONLY apply when [data-theme="light"]. They give cards, * forms, dark-as-built sections, and buttons a polished look on white. * The dark theme is left untouched. */ html[data-theme="light"] body { background-color: var(--lnb-bg); color: var(--lnb-text); } /* Smooth theme transition (only on theme-aware properties). Skip on first paint by using transition-duration:0 until the body has loaded. */ html[data-theme] body, html[data-theme] .panel, html[data-theme] .card, html[data-theme] .lnb-card, html[data-theme] .deck-section, html[data-theme] .deck-nav, html[data-theme] .lnb-nav, html[data-theme] .top-nav, html[data-theme] .lead-panel { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* Light theme — cards become solid white with a soft elevation shadow instead of the dark theme's dark-on-dark layered look. */ html[data-theme="light"] .panel, html[data-theme="light"] .card, html[data-theme="light"] .lnb-card, html[data-theme="light"] .lead-panel { background-color: var(--lnb-surface); color: var(--lnb-text); border-color: var(--lnb-line); box-shadow: var(--lnb-shadow); } html[data-theme="light"] .panel h1, html[data-theme="light"] .panel h2, html[data-theme="light"] .panel h3, html[data-theme="light"] .lnb-card h3, html[data-theme="light"] .card h3, html[data-theme="light"] .lead-panel h2 { color: var(--lnb-text); } /* Forms — labels, inputs, placeholders re-color for light bg. */ html[data-theme="light"] label, html[data-theme="light"] .lnb-form label { color: var(--lnb-muted); } html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background-color: var(--lnb-surface); color: var(--lnb-text); border-color: var(--lnb-line); } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: #737f78; } html[data-theme="light"] input:focus, html[data-theme="light"] select:focus, html[data-theme="light"] textarea:focus { border-color: var(--lnb-green); box-shadow: 0 0 0 3px var(--lnb-ring); } /* Nav bars — dark theme uses translucent dark, light theme switches to translucent white with a hairline shadow. */ html[data-theme="light"] .deck-nav, html[data-theme="light"] .lnb-nav, html[data-theme="light"] .top-nav, html[data-theme="light"] .top { background-color: rgba(255, 255, 255, 0.88); border-bottom-color: var(--lnb-line); color: var(--lnb-text); box-shadow: 0 1px 3px rgba(13, 31, 23, 0.04); } html[data-theme="light"] .lnb-nav .brand, html[data-theme="light"] .deck-nav .brand, html[data-theme="light"] .top-nav .brand { color: var(--lnb-text); } html[data-theme="light"] .lnb-nav .links a, html[data-theme="light"] .deck-nav .links a { color: var(--lnb-text-2); } /* Light-theme buttons — keep the green primary, but adjust contrast. */ html[data-theme="light"] .btn, html[data-theme="light"] .lnb-btn { color: #ffffff; } html[data-theme="light"] .btn.ghost, html[data-theme="light"] .lnb-btn.ghost { background-color: var(--lnb-surface); border-color: var(--lnb-line); color: var(--lnb-text); } /* Public marketing pages — many use radial-gradient overlays that look moody on dark but garish on light. Tone them down in light theme. */ html[data-theme="light"] body { background-image: none !important; } /* The brand "shimmer" headline effect uses three color stops; in light theme we swap them to darker tones so the moving gradient stays visible on white. */ html[data-theme="light"] .shine, html[data-theme="light"] .lnb-hero h1 { background: linear-gradient(110deg, var(--lnb-text), var(--lnb-green-2) 50%, var(--lnb-gold-2) 100%) !important; background-size: 220% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } /* Deck sections — dark theme paints them with radial-gradient and dark cards. Light theme keeps the structure but uses white surfaces so the existing deck markup still works. */ html[data-theme="light"] .deck-section, html[data-theme="light"] .deck.hero, html[data-theme="light"] section.deck { background-color: var(--lnb-bg); } html[data-theme="light"] .section-head h2, html[data-theme="light"] .deck-section h1, html[data-theme="light"] .deck-section h2, html[data-theme="light"] .deck-section h3 { color: var(--lnb-text); } html[data-theme="light"] .deck-section p, html[data-theme="light"] .section-head p { color: var(--lnb-text-2); } /* Cards inside decks (.card, .v-card, .pillar, .why-card, etc.) get white backgrounds + soft shadow elevation. */ html[data-theme="light"] .card, html[data-theme="light"] .v-card, html[data-theme="light"] .pillar, html[data-theme="light"] .why-card, html[data-theme="light"] .uof-card, html[data-theme="light"] .thesis-card, html[data-theme="light"] .unlock-card, html[data-theme="light"] .deal-card, html[data-theme="light"] .partner-card { background-color: var(--lnb-surface); background-image: none; border-color: var(--lnb-line); color: var(--lnb-text); box-shadow: var(--lnb-shadow-sm); } html[data-theme="light"] .card h3, html[data-theme="light"] .v-card h3, html[data-theme="light"] .pillar h3, html[data-theme="light"] .why-card h3, html[data-theme="light"] .deal-card h3, html[data-theme="light"] .thesis-card h3, html[data-theme="light"] .unlock-card h4 { color: var(--lnb-text); } html[data-theme="light"] .card p, html[data-theme="light"] .card li, html[data-theme="light"] .v-card p, html[data-theme="light"] .pillar p, html[data-theme="light"] .why-card p, html[data-theme="light"] .deal-card p, html[data-theme="light"] .thesis-card p, html[data-theme="light"] .unlock-card p { color: var(--lnb-text-2); } /* Brandon deck — the press-conference treatment uses dark teal/gold on the lockup, marquee, and signing chips. Those should keep their dramatic look even in light theme (athlete-signing aesthetic stays dark — like a press conference backdrop), but the SURROUNDING page chrome goes light. We intentionally do NOT lighten: - .signing-marquee (the scroll banner) - .lockup (the co-brand card) - .portrait (the photo card) - .press-card (the mock press release — already light by design) so the deck's hero retains its drama in light theme. */ html[data-theme="light"] .deal-card, html[data-theme="light"] .term-chip { background-color: var(--lnb-surface); background-image: none; border-color: var(--lnb-line); color: var(--lnb-text); box-shadow: var(--lnb-shadow-sm); } html[data-theme="light"] .term-chip .term-lab { color: var(--lnb-muted); } html[data-theme="light"] .term-chip .term-val { color: var(--lnb-text); } html[data-theme="light"] .term-chip.captain { border-color: var(--lnb-gold-2); background-color: #fff8e6; } html[data-theme="light"] .term-chip.captain .term-val { color: var(--lnb-gold-2); } /* Lead/footer disclaimer text in light theme needs lighter borders. */ html[data-theme="light"] .disclaimer { background-color: rgba(13, 31, 23, 0.03); border-color: rgba(13, 31, 23, 0.18); color: var(--lnb-muted); } /* NCNDA-specific touch-ups (a high-friction page where contrast bugs were reported). */ html[data-theme="light"] .agreement { background-color: var(--lnb-surface-2); border-color: var(--lnb-line); color: var(--lnb-text-2); } html[data-theme="light"] .fact span { color: var(--lnb-muted); } html[data-theme="light"] .fact b { color: var(--lnb-green-2); } html[data-theme="light"] .small { color: var(--lnb-muted); } html[data-theme="light"] .check { background-color: var(--lnb-surface); border-color: var(--lnb-line); } html[data-theme="light"] .check span { color: var(--lnb-text-2); } /* Lock-in CTA / lock-card backgrounds — keep dramatic gradient but land on a lighter accent in light theme. */ html[data-theme="light"] .lock-card, html[data-theme="light"] .cta-panel { background-image: linear-gradient(135deg, rgba(31, 143, 79, 0.10), rgba(176, 136, 32, 0.06)) !important; background-color: var(--lnb-surface); border-color: var(--lnb-gold-2); } html[data-theme="light"] .lock-card p, html[data-theme="light"] .cta-panel p { color: var(--lnb-text-2); } /* ================ Light-theme button hierarchy ================ * Several homepage button classes were authored for DARK hero sections * (white text on translucent white). On light surfaces they fail: * - .btn-outline-white → white text + ~invisible white border → vanishes * - .btn-secondary → transparent fill + invisible border → no shape * - .nav-cta → dark text on a green gradient → low contrast * - .btn-primary → the lighter gradient stop (#27a556) only hits * ~3.2:1 against white text → fails WCAG AA * We rebuild a clear primary/secondary hierarchy for light theme only. * Marketing-psychology intent: ONE obviously-dominant green CTA per view, * with secondary actions visibly subordinate (white chip, hairline border). * ============================================================== */ /* Primary CTAs — deep, AA-safe green gradient + white label + elevation so the eye lands on the single most important action. */ html[data-theme="light"] .btn-primary, html[data-theme="light"] .nav-cta { background-image: linear-gradient(135deg, var(--lnb-green-2), #178044); color: #ffffff; border-color: transparent; } html[data-theme="light"] .btn-primary { box-shadow: 0 6px 16px rgba(12, 95, 51, 0.18); } html[data-theme="light"] .btn-primary:hover, html[data-theme="light"] .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(12, 95, 51, 0.26); } /* Secondary / outline CTAs — re-skinned as clearly-subordinate white chips with a hairline border (instead of invisible white-on-white). */ html[data-theme="light"] .btn-secondary, html[data-theme="light"] .btn-outline-white { background-color: var(--lnb-surface); background-image: none; border: 1.5px solid var(--lnb-line); color: var(--lnb-text); box-shadow: var(--lnb-shadow-sm); } html[data-theme="light"] .btn-secondary:hover, html[data-theme="light"] .btn-outline-white:hover { border-color: var(--lnb-green); color: var(--lnb-green-2); } /* ================ Global interaction polish (both themes) ================ * Additive only — improves perceived quality + accessibility without * altering layout or the dark theme's established look. */ /* Keyboard focus ring — visible, brand-colored, and only on keyboard navigation (not mouse clicks). Critical for accessibility/IPO audits. */ a:focus-visible, button:focus-visible, .btn:focus-visible, .lnb-btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-white:focus-visible, .btn-outline-white:focus-visible, .nav-cta:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--lnb-green); outline-offset: 2px; border-radius: 6px; } /* Branded text selection. */ ::selection { background: var(--lnb-green); color: #ffffff; } /* Respect reduced-motion preference — disable transforms/animations for users who opt out (vestibular safety + a polish signal). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }