/* ============================================================ HOMEPAGE — LIGHT THEME FIX-UP (2026-08-12) New, self-contained file. Every rule below is scoped to html[data-theme="light"] — dark theme is completely untouched. Purpose: the flagship "shine" pass (homepage-shine.css) + a few older generic light-theme rules (homepage.css, nav-system.css) were written independently and now fight each other, producing dark-on-dark / white-on-white text once a visitor toggles light mode. This file is the tie-breaker + the missing overrides. Load this AFTER homepage-shine.css (and after homepage.css / nav-system.css) in index.html so cascade-order ties resolve in our favour — but every selector below is also written with enough specificity to win even if load order changes later, so it's safe either way. Method: live Playwright DOM sweep of localhost:8971/static/index.html with html[data-theme="light"], computing text/background contrast for every visible text node, then reading the matched CSS rules to find root cause. Verified again after these fixes (see report). ============================================================ */ /* ---------------------------------------------------------------- 1. NAVBAR — dropdown triggers ("Markets", "Shop", "Create", "Travel", "Community"). The navbar stays a DARK bar in light theme by design (styles.css:1890 — book-ends with the dark footer) and .nav-link already flips to light ink for that bar. .nav-group-trigger was missed: nav-system.css:397 sets it to #1F2430 (dark navy) assuming a WHITE bar, but it actually sits directly on the dark navbar. Result: #1F2430 on rgba(10,14,39,.92) = 1.02:1, invisible. FIX: match .nav-link's light ink. Do NOT touch .nav-acc-trigger or .nav-drawer-flat a — those live inside the mobile drawer, which IS white in light theme (nav-system.css:391), so their dark ink is already correct. Before: #1F2430 on #0A0E27(~92%) = 1.02:1 After: #E8E6F0 on same bg = 12.6:1 ---------------------------------------------------------------- */ html[data-theme="light"] .navbar .nav-group-trigger { color: #E8E6F0; } html[data-theme="light"] .navbar .nav-group-trigger:hover, html[data-theme="light"] .navbar .nav-group-trigger[aria-expanded="true"] { color: #C4B5FD; } /* ---------------------------------------------------------------- 2. ROADMAP / "COMING SOON" BENTO CARD (audit item #1). The base dark-theme rule (homepage-shine.css: ".capability-strip > li.bento-card { background: var(--hp-surface) }", specificity 0-2-1) ties in specificity with the light override in homepage.css (0-2-1) — whichever file loads last wins, and .bento-card--soon was losing. Pin it explicitly with a selector specific enough to win regardless of load order (adds the .bento-card--soon type+class = 0-2-2). Before: H3 #0A0E27 on #18181B = 1.07:1 (invisible) After: H3 #0A0E27 on #FFFFFF = 17.9:1 The "On the roadmap" amber badge (.module-status--coming) has its own light-theme colour already (homepage.css:288) — it was only unreadable because it composited against this dark card; fixing the card surface alone restores it to its intended ~4.8:1. */ html[data-theme="light"] li.bento-card--soon { background: #ffffff; border-color: #e4e4ee; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); } html[data-theme="light"] li.bento-card--soon:hover, html[data-theme="light"] li.bento-card--soon:focus-visible { background: #faf9ff; border-color: rgba(124, 58, 237, 0.4); } /* ---------------------------------------------------------------- 3. MUTED BODY TEXT — var(--hp-text-muted) (#A1A1AA) is tuned for the dark bento-card surface and is never redefined for light, so every bento-card description, the arrow glyph, the vision concept caption, and the sign-in helper note all render at 2.56-3.57:1 on their (correctly) light backgrounds. #595F6B is the same fix already proven elsewhere in this codebase (homepage.css:327, merchant-card-sub: "#8585a3 was 3.3:1 on white — under AA") — reused here for consistency. Before: #A1A1AA on #FFFFFF = 2.56:1 (bento copy/arrow), 2.75:1 (captions), #8585A3-equivalent 3.57:1 (signin-note) After: #595F6B on #FFFFFF = 6.4:1 ---------------------------------------------------------------- */ html[data-theme="light"] .capability-chip p, html[data-theme="light"] .capability-chip span:not(.bento-card-icon):not(.module-status), html[data-theme="light"] .bento-arrow, html[data-theme="light"] .vision-concept-caption, html[data-theme="light"] .signin-note { color: #595f6b; } /* .device-frame__caption carries an inline style="color:#9a9ab0" in index.html (two occurrences) — per this task's constraint we do not edit index.html, so only !important can win over an inline style. */ html[data-theme="light"] p.device-frame__caption { color: #595f6b !important; } /* ---------------------------------------------------------------- 4. "UNDER THE HOOD" CHIP STRIP — .tech-proof-strip li uses background: var(--hp-surface) unconditionally (dark), so on the now-light founder/mission section these render as dark pills. Not a hard contrast failure (light-grey text on a dark chip is still ~5:1) but a jarring, off-brand "muddy" dark patch on an otherwise clean white section — flip to the same light-chip language used throughout the rest of the page. ---------------------------------------------------------------- */ html[data-theme="light"] .tech-proof-strip li { background: #ffffff; border-color: #e4e4ee; color: #4b5563; } /* ---------------------------------------------------------------- 5. FOUNDER "PROOF STRIP" — this section is a permanent dark spotlight panel (homepage.css:546, background: var(--hp-bg-deep), never themed, by design) but the generic light-theme link colour (styles.css:1882, --link:#6D28D9) still reaches its .inline-cta ("Read our story →"), producing dark purple on near-black. Before: #6D28D9 on #0A0A0F = 2.78:1 After: #C4B5FD on #0A0A0F = 8.9:1 (matches the panel's own ink, .proof-strip-crown/.proof-strip-founder, which were already correct) ---------------------------------------------------------------- */ html[data-theme="light"] .proof-strip .inline-cta { color: #C4B5FD; } html[data-theme="light"] .proof-strip .inline-cta:hover, html[data-theme="light"] .proof-strip .inline-cta:focus-visible { color: #E8E6F0; } /* ---------------------------------------------------------------- 6. FREE-BETA PRICING BANNER — .beta-gradient-banner is a permanent purple-gradient band (homepage-shine.css, unthemed by design, same pattern as #5), but two generic light-theme rules reach INTO it: a) .beta-pricing-card is flattened to opaque #FFFFFF (homepage.css :408) while .beta-gradient-banner .inline-cta unconditionally forces #FAFAFA text (homepage-shine.css:165) — "See the full plan comparison →" renders WHITE ON WHITE. Before: 1.04:1 / After: restored translucent glass, 12.6:1 b) .beta-pricing-headline gets forced to dark navy ink (homepage.css:409-410) — currently "invisible" only in the sense that it would fail once (a) is fixed back to glass, so both are corrected together here. c) .tier-teaser cards get the same opaque-white treatment (homepage.css:671) — technically legible (dark-on-white) but a jarring, muddy white box floating in a purple band; restored to the same frosted-glass language as the pricing card. ---------------------------------------------------------------- d) .section-heading / .section-sub / .section-eyebrow ("Free during beta", the sub-line, and the "PRICING" eyebrow) — found via visual screenshot review (the automated contrast sweep's gradient-compositing heuristic couldn't see this one — it silently fell back to a light background guess, under which dark text looked fine on paper; only a real render caught it). These are forced dark navy/grey by the generic light-section rule (homepage.css:467, 470, 474) which outranks the banner's own unconditional white rule (homepage-shine.css:153-158) by specificity in light theme. Before: heading #0A0E27 / sub #4B5563 / eyebrow #5B21B6, all on the purple gradient — 1.3-2.9:1, near-invisible. After: restored to the banner's own white/near-white ink. ---------------------------------------------------------------- */ html[data-theme="light"] .beta-gradient-banner .section-heading, html[data-theme="light"] .beta-gradient-banner .pricing-preview-note, html[data-theme="light"] .beta-gradient-banner .pricing-preview-disclaimer { color: #FAFAFA; } html[data-theme="light"] .beta-gradient-banner .section-sub { color: rgba(255, 255, 255, 0.86); } html[data-theme="light"] .beta-gradient-banner .section-eyebrow { color: #FAFAFA; } html[data-theme="light"] .beta-gradient-banner .beta-pricing-card { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); box-shadow: none; } html[data-theme="light"] .beta-gradient-banner .beta-pricing-headline, html[data-theme="light"] .beta-gradient-banner .beta-pricing-headline strong { color: #FAFAFA; } html[data-theme="light"] .beta-gradient-banner .tier-teaser { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); box-shadow: none; } html[data-theme="light"] .beta-gradient-banner .tier-teaser--featured { border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45); } html[data-theme="light"] .beta-gradient-banner .tier-teaser-name, html[data-theme="light"] .beta-gradient-banner .tier-teaser-price { color: #FAFAFA; } html[data-theme="light"] .beta-gradient-banner .tier-teaser-price small { color: rgba(250, 250, 250, 0.78); } html[data-theme="light"] .beta-gradient-banner .tier-teaser-line { color: rgba(250, 250, 250, 0.88); } /* ---------------------------------------------------------------- 7. MOBILE "Chat to Lenny" GHOST CTA (audit item #2, phone-only, <=640px). .concierge-open-cta--ghost is a 6%-white tint with #E8E6F0 text, tuned to read against the dark concierge stage — on the light stage (#concierge-stage is #FFFFFF in light theme) that composites to near-white-on-white text. Before: #E8E6F0 on ~#FEFEFE = 1.23:1 After: #374151 on rgba(0,0,0,.04)-over-white = 8.4:1 (same light-ghost-button pattern as .btn-hero-secondary, styles.css :477, already proven elsewhere on this page) ---------------------------------------------------------------- */ @media (max-width: 640px) { html[data-theme="light"] .concierge-open-cta--ghost { background: rgba(0, 0, 0, 0.04); color: #374151; border-color: rgba(0, 0, 0, 0.14); } } /* ---------------------------------------------------------------- 8. BENTO CARD ICON — decorative (aria-hidden="true"), so not a text-contrast requirement, but var(--hp-accent) (#A78BFA) computes to a washed-out, off-brand grey on the light lavender icon chip. Pin to the same brand ink used for every other light-theme accent on this page (hero-eyebrow, section-eyebrow, lenny-tag, ... — homepage.css:474) for visual consistency. ---------------------------------------------------------------- */ html[data-theme="light"] .bento-card-icon { color: #6D28D9; }