/* ============================================================ FFB Brand Accent Light Mode — Optional Toggle ------------------------------------------------------------ Dark mode remains the production default. This stylesheet only activates when the element carries the attribute data-theme="light" (set by theme-toggle.js based on the user's localStorage preference). ------------------------------------------------------------ Goal: translate the existing FFB dark theme (deep navy + amber/yellow-orange) into a daytime palette on an off-white body, keeping the same accent so toggling reads as the same brand "lights on". ============================================================ */ html[data-theme="light"] { /* === Remap the page-level CSS variables used across pages === */ --bg: #F7FBFF; /* primary off-white body */ --bg2: #EDF4FB; /* alt band */ --bg3: #FFFFFF; /* card / preview surface */ --bg4: #F4F9FF; /* nested surface */ /* Keep amber tokens exactly as production dark theme */ --amber: #1897FF; --amber2: #1479FF; --amber3: rgba(24,151,255,0.12); --amber4: rgba(24,151,255,0.08); /* Ink-on-light */ --text: #071124; /* deep navy primary text */ --muted: #475569; --muted2: #475569; /* Borders & cards translate to navy-tinted neutrals */ --border: rgba(7,17,36,0.10); --border2: rgba(7,17,36,0.18); --card: rgba(7,17,36,0.04); /* hosting-comparison.php-specific tokens (it redefines its own) */ --panel: #FFFFFF; --panel2: #F4F9FF; --line: rgba(7,17,36,0.10); color-scheme: light; } /* ============================================================ THEME TOGGLE BUTTON The button is rendered by theme-toggle.js into the nav of each FFB page. Styles work in both modes. ============================================================ */ .ffb-theme-toggle { appearance: none; border: 1px solid var(--border2); background: rgba(255,255,255,0.04); color: #f0f4ff; font: 600 12px/1 'DM Sans', system-ui, sans-serif; letter-spacing: 0.02em; padding: 8px 12px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } .ffb-theme-toggle:hover { border-color: rgba(24,151,255,0.5); color: var(--amber, #1897FF); } .ffb-theme-toggle:focus-visible { outline: 2px solid var(--amber, #1897FF); outline-offset: 2px; } .ffb-theme-toggle .ffb-tt-knob { width: 26px; height: 14px; border-radius: 999px; background: rgba(24,151,255,0.18); border: 1px solid rgba(24,151,255,0.35); position: relative; flex: 0 0 auto; } .ffb-theme-toggle .ffb-tt-knob::after { content: ""; position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; border-radius: 50%; background: #1897FF; box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: transform .2s ease, background .2s ease; } html[data-theme="light"] .ffb-theme-toggle { background: #FFFFFF; border-color: rgba(7,17,36,0.14); color: #071124; } html[data-theme="light"] .ffb-theme-toggle:hover { border-color: rgba(24,151,255,0.55); color: #0D63F4; } html[data-theme="light"] .ffb-theme-toggle .ffb-tt-knob { background: rgba(24,151,255,0.18); border-color: rgba(24,151,255,0.4); } html[data-theme="light"] .ffb-theme-toggle .ffb-tt-knob::after { transform: translateX(12px); background: #1897FF; } .ffb-theme-toggle .ffb-tt-label-light { display: none; } .ffb-theme-toggle .ffb-tt-label-dark { display: inline; } html[data-theme="light"] .ffb-theme-toggle .ffb-tt-label-light { display: inline; } html[data-theme="light"] .ffb-theme-toggle .ffb-tt-label-dark { display: none; } /* For the homepage / view.php / hosting-comparison.php whose nav uses a flex .nav-right or .nav, place the toggle nicely. */ .nav .ffb-theme-toggle, .nav-right .ffb-theme-toggle { margin-right: 4px; } @media (max-width: 520px) { .ffb-theme-toggle .ffb-tt-label-light, .ffb-theme-toggle .ffb-tt-label-dark { display: none !important; } } /* ============================================================ LIGHT MODE — SURFACE OVERRIDES These selectors only apply when html[data-theme="light"]. They surgically translate the hardcoded dark surfaces to the brand-accent light palette without ever touching the production dark theme rules. ============================================================ */ /* Body baseline */ html[data-theme="light"] body { background: var(--bg) !important; color: var(--text) !important; } /* --- Hardcoded dark navy backgrounds → off-white --- */ html[data-theme="light"] [style*="background:#06142F"], html[data-theme="light"] [style*="background-color:#06142F"] { background: var(--bg) !important; } /* --- Nav (homepage + ai-builder + view.php + hosting) --- */ html[data-theme="light"] .nav { background: rgba(246,247,251,0.88) !important; border-bottom-color: rgba(7,17,36,0.10) !important; } html[data-theme="light"] .nav-link { color: #475569 !important; } html[data-theme="light"] .nav-link:hover { color: #071124 !important; } html[data-theme="light"] .nav-cta { color: #071124 !important; box-shadow: 0 2px 4px rgba(24,151,255,.22), 0 8px 22px rgba(24,151,255,.18); } html[data-theme="light"] .nav-badge { color: #0D63F4 !important; background: rgba(24,151,255,0.10) !important; border-color: rgba(24,151,255,0.32) !important; } /* --- Hero / sections that use rgba(255,255,255,*) tints --- */ html[data-theme="light"] .hero, html[data-theme="light"] .cta-section, html[data-theme="light"] .proof-section, html[data-theme="light"] .inside-section, html[data-theme="light"] .preview-section, html[data-theme="light"] .how-section, html[data-theme="light"] .compare-section, html[data-theme="light"] .upgrade-section, html[data-theme="light"] section { background-color: transparent; } html[data-theme="light"] .inside-section, html[data-theme="light"] .compare-section, html[data-theme="light"] .how-section { background: var(--bg2) !important; border-top: 1px solid rgba(7,17,36,0.08) !important; border-bottom: 1px solid rgba(7,17,36,0.08) !important; } /* The Hero panel + Upgrade card on the homepage stay DARK on purpose — they are product moments, mirroring the mockup. */ /* --- Generic cards / surfaces tinted off white-rgba --- */ html[data-theme="light"] .proof-stat, html[data-theme="light"] .preset-chip, html[data-theme="light"] .step, html[data-theme="light"] .inside-card, html[data-theme="light"] .proof-card, html[data-theme="light"] .preview-section-card { background: var(--bg3) !important; border-color: rgba(7,17,36,0.10) !important; color: var(--text) !important; } html[data-theme="light"] .step h3, html[data-theme="light"] .step p, html[data-theme="light"] .inside-card .ic-name, html[data-theme="light"] .inside-card .ic-desc, html[data-theme="light"] .proof-card .proof-text, html[data-theme="light"] .proof-card .proof-author, html[data-theme="light"] .proof-card .proof-role { color: var(--text) !important; } html[data-theme="light"] .step p, html[data-theme="light"] .inside-card .ic-desc, html[data-theme="light"] .proof-card .proof-text, html[data-theme="light"] .proof-card .proof-role, html[data-theme="light"] .pc-name, html[data-theme="light"] .proof-label { color: var(--muted) !important; } html[data-theme="light"] .hero-sub, html[data-theme="light"] .hero-note, html[data-theme="light"] .section-sub, html[data-theme="light"] .cta-section p { color: var(--muted) !important; } html[data-theme="light"] .preview-label, html[data-theme="light"] .cta-note { color: var(--muted2) !important; } /* Hero text accent stays amber via --amber; em element stays amber */ /* --- Preview card on homepage --- */ html[data-theme="light"] .preview-card { background: var(--bg3) !important; border-color: rgba(7,17,36,0.10) !important; box-shadow: 0 30px 70px rgba(7,17,36,.12), 0 10px 30px rgba(7,17,36,.06); } html[data-theme="light"] .preview-bar { background: var(--bg4) !important; border-bottom-color: rgba(7,17,36,0.08) !important; } html[data-theme="light"] .preview-url { background: var(--bg2) !important; color: var(--muted) !important; } html[data-theme="light"] .psc-line { background: rgba(7,17,36,0.07) !important; } html[data-theme="light"] .psc-line.amber { background: rgba(24,151,255,0.22) !important; } /* --- Steps numbered bullets keep amber + navy text ink --- */ html[data-theme="light"] .step-num { color: #071124 !important; } /* --- Hosting comparison table --- */ html[data-theme="light"] .hosting-section, html[data-theme="light"] .hc-wrap, html[data-theme="light"] .comparison-section { background: var(--bg) !important; } html[data-theme="light"] table tr th { background: #EDF4FB !important; color: #071124 !important; border-color: rgba(7,17,36,0.10) !important; } html[data-theme="light"] table tr td { background: #FFFFFF !important; color: #475569 !important; border-color: rgba(7,17,36,0.08) !important; } html[data-theme="light"] table tr td:first-child { color: #071124 !important; } /* --- view.php result page surfaces --- */ html[data-theme="light"] .summary-card, html[data-theme="light"] .opt-card, html[data-theme="light"] .leadmagnet-section, html[data-theme="light"] .email-card, html[data-theme="light"] .hook-card, html[data-theme="light"] .checklist-card, html[data-theme="light"] .dfy-upsell, html[data-theme="light"] .sc-copy, html[data-theme="light"] .score-card { background: var(--bg3) !important; border-color: rgba(7,17,36,0.10) !important; color: var(--text) !important; } html[data-theme="light"] .summary-kicker { color: #0D63F4 !important; } html[data-theme="light"] .sc-copy { color: var(--text) !important; } html[data-theme="light"] .sc-copy:hover { color: #0D63F4 !important; border-color: rgba(24,151,255,0.55) !important; } /* --- credits.php pricing cards --- .pack cards use hardcoded dark gradients; surface them to the light palette so they match every other card on the site. */ html[data-theme="light"] .pack { background: #FFFFFF !important; border-color: rgba(7,17,36,0.10) !important; box-shadow: 0 12px 40px rgba(7,17,36,0.07), 0 2px 8px rgba(7,17,36,0.04) !important; color: var(--text) !important; } html[data-theme="light"] .pack.popular { border-color: rgba(24,151,255,0.40) !important; box-shadow: 0 16px 48px rgba(24,151,255,0.10), 0 4px 12px rgba(7,17,36,0.06) !important; } html[data-theme="light"] .pack h2 { color: var(--text) !important; } html[data-theme="light"] .pack .desc { color: var(--muted) !important; } /* "best for" use-case chip inside each card */ html[data-theme="light"] .pack .best { background: rgba(7,17,36,0.04) !important; border-color: rgba(7,17,36,0.08) !important; color: var(--muted) !important; } /* Credit count — darken amber for white bg legibility */ html[data-theme="light"] .pack .credits { color: #0D63F4 !important; } html[data-theme="light"] .pack .credits span { color: var(--muted) !important; } /* Price — darken green for white bg */ html[data-theme="light"] .pack .price { color: #0D63F4 !important; } /* "Best value" badge */ html[data-theme="light"] .pack .badge { background: rgba(24,151,255,0.10) !important; border-color: rgba(24,151,255,0.28) !important; color: #0D63F4 !important; } /* Kicker pill ("AI BUILDER CREDITS") */ html[data-theme="light"] .kicker { color: #0D63F4 !important; background: rgba(24,151,255,0.08) !important; border-color: rgba(24,151,255,0.22) !important; } /* Signed-in / balance status box */ html[data-theme="light"] .status { background: rgba(24,151,255,0.08) !important; border-color: rgba(24,151,255,0.28) !important; color: #0D63F4 !important; } /* Email look-up input + container */ html[data-theme="light"] .email-box { background: transparent !important; } html[data-theme="light"] .email-box input { background: #FFFFFF !important; border-color: rgba(7,17,36,0.14) !important; color: var(--text) !important; } /* Bottom disclaimer note */ html[data-theme="light"] .note { color: var(--muted) !important; } /* ============================================================ credit-success.php — post-purchase confirmation / error card Scoped via [data-ffb-page] because .box / .error are generic names reused on other pages (theme-preview, view.php). ============================================================ */ html[data-theme="light"] [data-ffb-page="credit-success"] .box { background: #FFFFFF !important; border-color: rgba(7,17,36,0.10) !important; box-shadow: 0 16px 48px rgba(7,17,36,0.08), 0 2px 8px rgba(7,17,36,0.04) !important; } html[data-theme="light"] [data-ffb-page="credit-success"] h1 { color: var(--text) !important; } html[data-theme="light"] [data-ffb-page="credit-success"] p { color: var(--muted) !important; } html[data-theme="light"] [data-ffb-page="credit-success"] .balance { background: rgba(24,151,255,0.08) !important; border-color: rgba(24,151,255,0.22) !important; color: #0D63F4 !important; } html[data-theme="light"] [data-ffb-page="credit-success"] .balance strong { color: #0D63F4 !important; } html[data-theme="light"] [data-ffb-page="credit-success"] .btn.secondary { background: transparent !important; border-color: rgba(7,17,36,0.14) !important; color: var(--muted) !important; } html[data-theme="light"] [data-ffb-page="credit-success"] .error { background: rgba(239,68,68,0.07) !important; border-color: rgba(239,68,68,0.22) !important; color: #b91c1c !important; } /* ============================================================ payment-success.php — download-ready / pending card Card surfaces already remap via --bg2; the breakage is hardcoded-light text on the now-light card + a hardcoded-dark error box. Scoped because .box / .error-box are generic. ============================================================ */ html[data-theme="light"] [data-ffb-page="payment-success"] .box { background: #FFFFFF !important; border-color: rgba(7,17,36,0.10) !important; box-shadow: 0 16px 48px rgba(7,17,36,0.08), 0 2px 8px rgba(7,17,36,0.04) !important; } html[data-theme="light"] [data-ffb-page="payment-success"] .file-list li { color: var(--text) !important; } html[data-theme="light"] [data-ffb-page="payment-success"] .error-box { background: #FFFFFF !important; border-color: rgba(239,68,68,0.30) !important; box-shadow: 0 16px 48px rgba(7,17,36,0.08) !important; } html[data-theme="light"] [data-ffb-page="payment-success"] .error-box h2 { color: var(--text) !important; } html[data-theme="light"] [data-ffb-page="payment-success"] .error-box p { color: var(--muted) !important; } /* ============================================================ setup-guide.php — step cards Card surfaces remap via --bg2; the breakage is hardcoded-light body text on the now-light cards. Scoped via [data-ffb-page] because .file-table / .note-box could collide elsewhere. ============================================================ */ html[data-theme="light"] [data-ffb-page="setup-guide"] .step-card { background: #FFFFFF !important; border-color: rgba(7,17,36,0.10) !important; box-shadow: 0 12px 40px rgba(7,17,36,0.06) !important; } html[data-theme="light"] [data-ffb-page="setup-guide"] .page-hero p, html[data-theme="light"] [data-ffb-page="setup-guide"] .step-card p, html[data-theme="light"] [data-ffb-page="setup-guide"] .step-list li, html[data-theme="light"] [data-ffb-page="setup-guide"] .file-table td { color: var(--muted) !important; } html[data-theme="light"] [data-ffb-page="setup-guide"] .file-table td:first-child { color: #0D63F4 !important; } html[data-theme="light"] [data-ffb-page="setup-guide"] .file-table th { color: var(--muted) !important; border-bottom-color: rgba(7,17,36,0.10) !important; } html[data-theme="light"] [data-ffb-page="setup-guide"] .note-box { background: rgba(24,151,255,0.08) !important; border-color: rgba(24,151,255,0.20) !important; color: #0D63F4 !important; } html[data-theme="light"] [data-ffb-page="setup-guide"] code { background: rgba(7,17,36,0.06) !important; color: var(--text) !important; } /* --- Anything still relying on rgba(255,255,255,X) borders/bg inside the light shell gets a soft navy translation. --- */ html[data-theme="light"] :where(.preset-chip, .step, .inside-card, .proof-card, .summary-card, .opt-card, .leadmagnet-section, .email-card, .hook-card, .checklist-card, .dfy-upsell)[style] { /* keep inline styles if any */ } /* === Footer — light/white to match the mockup === */ html[data-theme="light"] .footer, html[data-theme="light"] footer { background: #FFFFFF !important; border-top: 1px solid rgba(7,17,36,0.10) !important; color: #64748B !important; } html[data-theme="light"] .footer a, html[data-theme="light"] footer a { color: #475569 !important; } html[data-theme="light"] .footer a:hover, html[data-theme="light"] footer a:hover { color: #1897FF !important; } /* ============================================================ LIGHT MODE — hero AI-builder panel + upgrade card + builder stage These were dark "product panels" in the old design. The new light mockup makes them LIGHT cards (white surface, navy text, blue accents). Surface them to light so there are no dark boxes. ============================================================ */ html[data-theme="light"] .hero-panel, html[data-theme="light"] .upgrade-card, html[data-theme="light"] .builder-stage { background: linear-gradient(180deg,#FFFFFF,#F8FBFF) !important; border-color: rgba(7,17,36,0.10) !important; box-shadow: 0 28px 70px rgba(15,23,42,.12) !important; color: #071124 !important; } html[data-theme="light"] .hero-panel *, html[data-theme="light"] .upgrade-card *, html[data-theme="light"] .builder-stage * { /* root variable lookups inside these panels at LIGHT values */ --text: #071124; --muted: #475569; --muted2: #64748B; --bg: #F7FBFF; --bg2: #EDF4FB; --bg3: #FFFFFF; --border: rgba(7,17,36,0.10); --border2: rgba(7,17,36,0.16); } /* faint-white-on-dark inner rows -> light surfaces */ html[data-theme="light"] .asset-row { background: #F4F9FF !important; border-color: rgba(7,17,36,0.08) !important; } html[data-theme="light"] .hero-panel .panel-title, html[data-theme="light"] .hero-panel .asset-main, html[data-theme="light"] .upgrade-card .uc-row, html[data-theme="light"] .upgrade-card h3, html[data-theme="light"] .upgrade-card .uc-price, html[data-theme="light"] .upgrade-card .uc-cta { color: #071124 !important; } html[data-theme="light"] .hero-panel .asset-sub, html[data-theme="light"] .hero-panel .asset-tag, html[data-theme="light"] .upgrade-card .uc-note, html[data-theme="light"] .upgrade-card .uc-currency, html[data-theme="light"] .upgrade-card .uc-once, html[data-theme="light"] .mini-metric span { color: #475569 !important; } /* keep the Building/Ready status tags blue (not muted navy) */ html[data-theme="light"] .asset-row.is-ready .asset-tag, html[data-theme="light"] .asset-row.is-building .asset-tag { color: #1897FF !important; } html[data-theme="light"] .hero-panel .panel-kicker, html[data-theme="light"] .mini-metric strong { color: #1897FF !important; } /* ============================================================ LIGHT MODE — AI-builder form (.builder-stage) surfaces The desktop builder form uses hard-coded navy gradients on .card / .preset / inputs. Surface them to light. ============================================================ */ html[data-theme="light"] .builder-stage .card { background: #FFFFFF !important; border-color: rgba(7,17,36,0.10) !important; box-shadow: 0 12px 40px rgba(15,23,42,.06) !important; color: #071124 !important; } html[data-theme="light"] .builder-stage .card-head { background: linear-gradient(135deg,rgba(24,151,255,.06),transparent) !important; } html[data-theme="light"] .builder-stage .card-head h2 { color: #071124 !important; } html[data-theme="light"] .builder-stage .card-head p { color: #475569 !important; } html[data-theme="light"] .builder-stage .preset { background: #F4F9FF !important; border-color: rgba(7,17,36,0.10) !important; } html[data-theme="light"] .builder-stage .preset-name { color: #071124 !important; } html[data-theme="light"] .builder-stage .preset.selected { background: rgba(24,151,255,.10) !important; border-color: rgba(24,151,255,.70) !important; } html[data-theme="light"] .builder-stage .preset.selected .preset-name { color: #1897FF !important; } html[data-theme="light"] .builder-stage .steps-bar { background: #F7FBFF !important; } /* Form fields → light (applies in light mode site-wide) */ html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select, html[data-theme="light"] .gate-input { background: #FFFFFF !important; border-color: rgba(7,17,36,0.14) !important; color: #071124 !important; } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder, html[data-theme="light"] .gate-input::placeholder { color: #94A3B8 !important; } html[data-theme="light"] .builder-stage label { color: #475569 !important; } /* The floating-card on the hero (the OPTIONAL SHORTCUT pill) was authored as a LIGHT card inside the dark theme — keep it light in both modes. No override needed. */ /* On the homepage the BLUEPRINT preview card stays LIGHT in light mode but the production dark CSS sets dark inner backgrounds. Restore inner light values explicitly. */ html[data-theme="light"] .preview-section-card { background: #F4F9FF !important; color: var(--text) !important; } html[data-theme="light"] .preview-section-card .psc-title { color: var(--text) !important; } html[data-theme="light"] .psc-cyan, html[data-theme="light"] .psc-amber, html[data-theme="light"] .psc-emerald, html[data-theme="light"] .psc-violet, html[data-theme="light"] .psc-rose { /* badges keep their accent colors */ } /* === Soft transition when toggling === */ html[data-theme="light"] body, html[data-theme="light"] .nav, html[data-theme="light"] .preview-card, html[data-theme="light"] .step, html[data-theme="light"] .inside-card, html[data-theme="light"] .proof-card { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; }