/* ============================================================ landing-light.css, the family-7 page's LIGHT THEME. PREVIEW ONLY, gated behind the temporary .lp-theme toggle (see css/landing.css and js/landing.js) which only shows for html[data-lp-family="7"] (options 7/8/9). Ameer asked to see it on Option 8, and 8 IS 7 (see css/landing-hero3.css), so this converts the whole shared page rather than duplicating a second copy for 8 alone. WHAT DOES NOT NEED TO BE HERE. Anything already reading a theme-aware token (--ink, --box, --box-stroke, --glass-2, --icon, var(--accent), the whole .cblock/.canvas-head/.ctool family the Build Dashboard showcase reuses) recolors itself the moment html[data-theme="light"] is set, same as it does in the app. This file only touches values this page wrote as literal rgba(255,255,255,X)/#fff, because those are the only ones that do not know a light theme exists. THE ONE NEW COLOUR: a warm off-white page floor, #f5f4f3, standing in for the dark page's #141519. It is not invented: it is close to the actual base tone bg-trace.css's own light gradients already paint (many of their stops are rgba(245,244,244)/(246,243,242)/(243,238,244)), so the flat sections between chapters match the photoreal ones without a seam. MODULE BACKGROUNDS: bg-trace.css already has dark AND light gradients for all three modules; the light ones just never had .l7-chapter or .lp-mod (the Build Dashboard showcase's class) in their selector list, so a chapter's ::before/::after (landing-grain.css) and the showcase box both fell back to plain white. That hook is added directly to bg-trace.css, not duplicated here, same as the dark hook is not duplicated here. ============================================================ */ html[data-theme="light"][data-lp-family="7"]{ --l7-fall:#f5f4f3; } /* ---- header / nav (shared chrome, only lit while family 7 is on screen) */ html[data-theme="light"][data-lp-family="7"] .lp-signin{color:#3f3f46} html[data-theme="light"][data-lp-family="7"] .lp-signin:hover{color:#18181b;background:color-mix(in srgb, #000 5%, transparent)} html[data-theme="light"][data-lp-family="7"] .lp-btn--ghost{ background:color-mix(in srgb, #000 5%, transparent); border-color:color-mix(in srgb, #000 15%, transparent); color:#18181b} html[data-theme="light"][data-lp-family="7"] .lp-btn--ghost:hover{ background:color-mix(in srgb, #000 9%, transparent); border-color:color-mix(in srgb, #000 24%, transparent)} /* the option switcher is back on the page (Ameer, 2 Sep), so it shares the theme toggle's light treatment again: both are scaffolding, and both have to stop being white-on-white the moment the ground turns light */ html[data-theme="light"][data-lp-family="7"] .lp-opt, html[data-theme="light"][data-lp-family="7"] .lp-theme{ background:color-mix(in srgb, #000 4%, transparent); border-color:color-mix(in srgb, #000 11%, transparent)} html[data-theme="light"][data-lp-family="7"] .lp-opt:hover, html[data-theme="light"][data-lp-family="7"] .lp-theme:hover{ background:color-mix(in srgb, #000 7%, transparent)} html[data-theme="light"][data-lp-family="7"] .lp-opt__k{color:#71717a} html[data-theme="light"][data-lp-family="7"] .lp-opt::after{color:#18181b} html[data-theme="light"][data-lp-family="7"] .lp-opt__c, html[data-theme="light"][data-lp-family="7"] .lp-theme{color:#52525b} /* ---- the hero: copy over the ambient (--bg is already the light investigation gradient once data-theme="light" is set; bg-trace.css owns that, nothing to touch here) ---- */ html[data-theme="light"][data-lp-family="7"] .lp-h1{color:#18181b;text-shadow:none} html[data-theme="light"][data-lp-family="7"] .lp-sub{color:#52525b} /* the flow canvas's own caption ("Raw data" / "Entities" / ...), missed by the first pass because it lives in landing.css, not landing-full.css */ html[data-theme="light"][data-lp-family="7"] .lp-stagerail{color:rgba(24,24,27,.7)} /* THE WELL that guards the copy from the canvas, inverted to light. AUDIT, 29 Aug: this named .lp-hero--2 ALONE, and the fold actually on screen is Option 9's, which is .lp-hero--alt. landing.css draws the well for all three folds in one rule; the light override answered only one of them, so the page kept the DARK well - a rgba(18,20,27,.72) ellipse - and it read as a grey smudge sitting behind the headline. All three folds are named here now, exactly as landing.css names all three. */ html[data-theme="light"][data-lp-family="7"] .lp-hero--2::before, html[data-theme="light"][data-lp-family="7"] .lp-hero--alt::before, html[data-theme="light"][data-lp-family="7"] .lp-hero--o3::before{ background:radial-gradient(ellipse 40% 44% at 50% 46%, rgba(255,252,248,.82) 0%, rgba(255,252,248,.5) 46%, rgba(255,252,248,0) 76%)} /* THE FLOOR easing the hero into the brand strip below it, same smoothstep curve as the dark version, arriving at the light page floor instead. AUDIT, 29 Aug: THE BLACK BAND. Same miss as the well above, and this was the loud one. landing.css lands this fade on --alt, --o3 and --2 together; the light override named --2 only, so Option 9's fold kept the dark smoothstep and the bottom 38vh of a LIGHT hero faded to #141519. Measured off the rendered page it fell from luminance 235 at the top of the fold to 29 at the bottom, then jumped back to 244 at the logo strip: a black band across the hero with a hard edge under it. All three folds named. */ html[data-theme="light"][data-lp-family="7"] .lp-hero--2::after, html[data-theme="light"][data-lp-family="7"] .lp-hero--alt::after, html[data-theme="light"][data-lp-family="7"] .lp-hero--o3::after{ background:linear-gradient(180deg, rgba(245,244,243,0) 0%, rgba(245,244,243,.043) 12.5%, rgba(245,244,243,.156) 25%, rgba(245,244,243,.32) 37.5%, rgba(245,244,243,.5) 50%, rgba(245,244,243,.68) 62.5%, rgba(245,244,243,.844) 75%, rgba(245,244,243,.957) 87.5%, rgba(245,244,243,1) 100%)} /* the grain on .lp-bg is stated flat in landing.css; the investigation-light amount bg-trace.css solved for .screen is .21, not .23 */ html[data-theme="light"] .lp-bg::after{opacity:.21} /* THE THREE LIGHTS (Option 8/9's hero3). The base --bg is now a bright warm peach (~0.85 luminance), so the same 15-20% mixes measured against the dark ground nearly disappear, especially the orange one sitting on an already-orange-leaning base. Pushed up so the three still read as a deliberate mark rather than a fade. */ html[data-theme="light"][data-lp-option="8"] .lp-bg, html[data-theme="light"][data-lp-option="9"] .lp-bg{ background-image: radial-gradient(ellipse 52% 46% at 4% 60%, color-mix(in srgb, var(--orange-60) 30%, transparent) 0%, transparent 70%), radial-gradient(ellipse 50% 44% at 96% 60%, color-mix(in srgb, var(--cyan-60) 26%, transparent) 0%, transparent 70%), radial-gradient(ellipse 66% 40% at 50% 74%, color-mix(in srgb, var(--purple-60) 30%, transparent) 0%, transparent 72%), var(--bg)} /* ============================================================ THE PAGE FLOOR: every flat/simple section between the photoreal chapters, #141519 replaced by the warm off-white ============================================================ */ html[data-theme="light"][data-lp-family="7"] .l7-logos, html[data-theme="light"][data-lp-family="7"] .l7-sep, html[data-theme="light"][data-lp-family="7"] .l7-value{background:var(--l7-fall)} html[data-theme="light"][data-lp-family="7"] .l7-chapter{background:var(--l7-fall)} html[data-theme="light"][data-lp-family="7"] .l7-ceo{ background: radial-gradient(ellipse 62% 62% at 50% 44%, color-mix(in srgb, #000 3%, transparent) 0%, transparent 72%), var(--l7-fall)} html[data-theme="light"][data-lp-family="7"] .l7-says{ background:linear-gradient(180deg, var(--l7-fall) 0%, #efeeec 22%, #efeeec 78%, var(--l7-fall) 100%)} html[data-theme="light"][data-lp-family="7"] .l7-end{ background: radial-gradient(ellipse 52% 46% at 20% 62%, color-mix(in srgb, var(--orange-50) 20%, transparent) 0%, transparent 72%), radial-gradient(ellipse 50% 44% at 80% 62%, color-mix(in srgb, var(--cyan-50) 18%, transparent) 0%, transparent 72%), radial-gradient(ellipse 60% 56% at 50% 70%, color-mix(in srgb, var(--purple-50) 22%, transparent) 0%, transparent 70%), var(--l7-fall)} /* the module gradient + grain layered by landing-grain.css on .l7-chapter's ::before/::after picks up the light stack automatically once bg-trace.css carries the .l7-chapter hook; only the per-module grain AMOUNT differs between themes (measured in bg-trace.css's own note) */ html[data-theme="light"][data-lp-family="7"] .l7-chapter::after{opacity:.21} html[data-theme="light"][data-lp-family="7"] .l7-chapter[data-module="chat"]::after{opacity:.20} html[data-theme="light"][data-lp-family="7"] .l7-chapter[data-module="dashboard"]::after{opacity:.46} /* ============================================================ TYPE: white -> ink, muted whites -> the zinc ramp ============================================================ */ html[data-theme="light"][data-lp-family="7"] .l7-h, html[data-theme="light"][data-lp-family="7"] .l7-h3, html[data-theme="light"][data-lp-family="7"] .l7-h4, html[data-theme="light"][data-lp-family="7"] .l7-stat__v, html[data-theme="light"][data-lp-family="7"] .l7-sep__lbl, html[data-theme="light"][data-lp-family="7"] .l7-val__t, html[data-theme="light"][data-lp-family="7"] .l7-say__t, html[data-theme="light"][data-lp-family="7"] .l7-say__n, html[data-theme="light"][data-lp-family="7"] .l7-by__n, html[data-theme="light"][data-lp-family="7"] .l7-quote, html[data-theme="light"][data-lp-family="7"] .l7-cta__h{color:#18181b} html[data-theme="light"][data-lp-family="7"] .l7-sub, html[data-theme="light"][data-lp-family="7"] .l7-p, html[data-theme="light"][data-lp-family="7"] .l7-list li, html[data-theme="light"][data-lp-family="7"] .l7-val__p, html[data-theme="light"][data-lp-family="7"] .l7-say__q, html[data-theme="light"][data-lp-family="7"] .l7-cta__p{color:#52525b} html[data-theme="light"][data-lp-family="7"] .l7-p--s, html[data-theme="light"][data-lp-family="7"] .l7-stat__k, html[data-theme="light"][data-lp-family="7"] .l7-eyebrow, html[data-theme="light"][data-lp-family="7"] .l7-logos__k, html[data-theme="light"][data-lp-family="7"] .l7-by__r, html[data-theme="light"][data-lp-family="7"] .l7-say__c{color:#71717a} html[data-theme="light"][data-lp-family="7"] .l7-eyebrow svg, html[data-theme="light"][data-lp-family="7"] .l7-by__ph{color:#a1a1aa} html[data-theme="light"][data-lp-family="7"] .l7-logo{color:#52525b} html[data-theme="light"][data-lp-family="7"] .l7-logo:hover{color:#18181b} /* ---- the separator: rule, disc rim, plain disc ---- */ html[data-theme="light"][data-lp-family="7"] .l7-sep__rule{ background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.12) 22%, rgba(0,0,0,.12) 78%, rgba(0,0,0,0))} html[data-theme="light"][data-lp-family="7"] .l7-sep__disc{ box-shadow:0 0 0 1px color-mix(in srgb, #000 10%, transparent), 0 0 0 10px color-mix(in srgb, var(--accent) 7%, transparent), 0 18px 40px -12px color-mix(in srgb, var(--accent) 42%, transparent)} html[data-theme="light"][data-lp-family="7"] .l7-sep--plain .l7-sep__disc{ color:#3f3f46; box-shadow:0 0 0 1px color-mix(in srgb, #000 10%, transparent), 0 0 0 10px color-mix(in srgb, #000 3%, transparent), 0 14px 36px -16px rgba(0,0,0,.16)} html[data-theme="light"][data-lp-family="7"] .l7-sep--plain .l7-sep__ring{border-color:rgba(0,0,0,.3)} /* ============================================================ THE PLACEHOLDER SCREEN (.l7-shot): a light UI skeleton instead of a dark one, to match the rest of a light page ============================================================ */ html[data-theme="light"][data-lp-family="7"] .l7-shot{ background:linear-gradient(155deg, color-mix(in srgb, var(--accent) 6%, transparent) 0%, color-mix(in srgb, #000 3%, transparent) 100%), #ffffff; border-color:color-mix(in srgb, #000 10%, transparent); box-shadow:0 26px 60px -32px rgba(24,24,27,.22), inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent)} html[data-theme="light"][data-lp-family="7"] .l7-shot__bar{border-bottom-color:color-mix(in srgb, #000 10%, transparent)} html[data-theme="light"][data-lp-family="7"] .l7-shot__bar i{background:color-mix(in srgb, #000 20%, transparent)} html[data-theme="light"][data-lp-family="7"] .l7-shot__pill{background:color-mix(in srgb, #000 14%, transparent)} html[data-theme="light"][data-lp-family="7"] .l7-shot__rail span{background:color-mix(in srgb, #000 16%, transparent)} /* THE "ANSWER" BODY WAS NEARLY INVISIBLE (Ameer's audit, 27 Aug): its content is the sparsest of the three placeholder bodies (a couple of thin bars plus two big empty grid tiles and three chip pills), so the ambient glow behind it dominated the card instead of the content. Dark gets away with #fff at these same low percentages because a few-percent-white bump against near-black is still legible; the equivalent #000 tint against a near-white/peach card was reading as almost nothing. Bumped well past a literal light-recipe mirror of the dark values so this body reads as clearly as the other two (.l7-shot__field / .l7-shot__steps) do. */ html[data-theme="light"][data-lp-family="7"] .l7-shot__b{background:color-mix(in srgb, #000 16%, transparent)} html[data-theme="light"][data-lp-family="7"] .l7-shot__b--w{background:color-mix(in srgb, #000 28%, transparent)} html[data-theme="light"][data-lp-family="7"] .l7-shot__grid span{ background:color-mix(in srgb, #000 10%, transparent); border-color:color-mix(in srgb, #000 16%, transparent)} html[data-theme="light"][data-lp-family="7"] .l7-shot__field{ background:color-mix(in srgb, #000 6%, transparent); border-color:color-mix(in srgb, #000 12%, transparent)} html[data-theme="light"][data-lp-family="7"] .l7-shot__field i{background:color-mix(in srgb, #000 18%, transparent)} html[data-theme="light"][data-lp-family="7"] .l7-shot__steps i{border-color:color-mix(in srgb, #000 22%, transparent)} html[data-theme="light"][data-lp-family="7"] .l7-shot__steps b{background:color-mix(in srgb, #000 16%, transparent)} html[data-theme="light"][data-lp-family="7"] .l7-shot__chips i{ background:color-mix(in srgb, #000 14%, transparent); border-color:color-mix(in srgb, #000 18%, transparent)} html[data-theme="light"][data-lp-family="7"] .l7-shot__tag{ background:color-mix(in srgb, #fff 85%, transparent); border-color:color-mix(in srgb, #000 9%, transparent); color:#52525b} html[data-theme="light"][data-lp-family="7"] .l7-shot__tag svg{color:#a1a1aa} /* ============================================================ THE ASKING (.aq / .aq-glass and everything in the three scenes): the glass fill inverts to mostly-opaque white, text and hairlines invert to ink and black-based lines ============================================================ */ html[data-theme="light"][data-lp-family="7"] .aq{ background:linear-gradient(158deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.58) 68%); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(0,0,0,.08)} html[data-theme="light"][data-lp-family="7"] .aq-glass{ background:linear-gradient(158deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.62) 62%); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(0,0,0,.07)} html[data-theme="light"][data-lp-family="7"] .aq-kpi__k, html[data-theme="light"][data-lp-family="7"] .aq-out__k{color:#52525b} html[data-theme="light"][data-lp-family="7"] .aq-kpi__v, html[data-theme="light"][data-lp-family="7"] .aq-out__v, html[data-theme="light"][data-lp-family="7"] .aq-ins__v, html[data-theme="light"][data-lp-family="7"] .aq-q, html[data-theme="light"][data-lp-family="7"] .aq-step__t{color:#18181b} html[data-theme="light"][data-lp-family="7"] .aq-ins__t{color:#27272a} html[data-theme="light"][data-lp-family="7"] .aq-ins__s{color:#71717a} html[data-theme="light"][data-lp-family="7"] .aq-ent{background:rgba(0,0,0,.05);color:#27272a} html[data-theme="light"][data-lp-family="7"] .aq-ent-line{background:rgba(0,0,0,.12)} /* the join under Scene 2's two tables: the same two tiers the rest of this file uses, a quiet label and the identifier in it a step darker */ html[data-theme="light"][data-lp-family="7"] .aq-schema__k{color:#71717a} html[data-theme="light"][data-lp-family="7"] .aq-schema__k u{color:#27272a} html[data-theme="light"][data-lp-family="7"] .aq-coach{background:rgba(0,0,0,.05);color:#27272a} html[data-theme="light"][data-lp-family="7"] .aq-send{background:rgba(0,0,0,.06)} html[data-theme="light"][data-lp-family="7"] .aq-send::before{background:rgba(0,0,0,.4)} html[data-theme="light"][data-lp-family="7"] .aq-step__ring{border-color:rgba(0,0,0,.18)} html[data-theme="light"][data-lp-family="7"] .aq-cell{background:rgba(0,0,0,.06)} html[data-theme="light"][data-lp-family="7"] .aq-cell:nth-child(6n+1){background:rgba(0,0,0,.1)} html[data-theme="light"][data-lp-family="7"] .aq-ins__bar{background:rgba(0,0,0,.08)} html[data-theme="light"][data-lp-family="7"] .aq-dw__list span{color:#27272a} html[data-theme="light"][data-lp-family="7"] .aq-dw__list b{color:#18181b} html[data-theme="light"][data-lp-family="7"] .aq-dw__list i{background:rgba(0,0,0,.28)} /* ============================================================ DATA INTELLIGENCE band: documents, core, ask + reading ============================================================ */ html[data-theme="light"][data-lp-family="7"] .di7-doc{ background:linear-gradient(158deg, #ffffff 0%, color-mix(in srgb, var(--accent) 32%, transparent) 100%); border-color:color-mix(in srgb, #000 12%, transparent); box-shadow:0 20px 40px -24px rgba(24,24,27,.24)} html[data-theme="light"][data-lp-family="7"] .di7-doc::after{ background:repeating-linear-gradient(180deg, color-mix(in srgb, #000 12%, transparent) 0 3px, transparent 3px 10px)} html[data-theme="light"][data-lp-family="7"] .di7-ask{ background:color-mix(in srgb, #fff 78%, transparent); border-color:color-mix(in srgb, #000 10%, transparent); color:#18181b} html[data-theme="light"][data-lp-family="7"] .di7-kpi{ background:linear-gradient(150deg, #ffffff 0%, color-mix(in srgb, var(--accent) 26%, transparent) 100%); border-color:color-mix(in srgb, #000 10%, transparent); box-shadow:0 22px 46px -28px rgba(24,24,27,.2), inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent)} html[data-theme="light"][data-lp-family="7"] .di7-kpi__k{color:#52525b} html[data-theme="light"][data-lp-family="7"] .di7-kpi__v{color:#18181b} html[data-theme="light"][data-lp-family="7"] .di7-kpi__bar{background:color-mix(in srgb, #000 8%, transparent)} html[data-theme="light"][data-lp-family="7"] .di7-kpi__s{color:#71717a} html[data-theme="light"][data-lp-family="7"] .di7-steps li{border-top-color:color-mix(in srgb, #000 10%, transparent)} html[data-theme="light"][data-lp-family="7"] .di7-steps__t{color:#27272a} /* ============================================================ BUILD DASHBOARD showcase box: the frame around the reused product chrome (.cblock/.canvas-head/.ctool already theme themselves) ============================================================ */ html[data-theme="light"][data-lp-family="7"] .l7-stage{ border-color:color-mix(in srgb, #000 12%, transparent); box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent)} /* ============================================================ THE FOUNDER ============================================================ */ html[data-theme="light"][data-lp-family="7"] .l7-ceo__rule{background:rgba(0,0,0,.14)} html[data-theme="light"][data-lp-family="7"] .l7-by__ph{ background:linear-gradient(150deg, color-mix(in srgb, #000 5%, transparent) 0%, color-mix(in srgb, #000 2%, transparent) 100%); border-color:color-mix(in srgb, #000 10%, transparent)} /* ============================================================ THE BENEFITS ============================================================ */ html[data-theme="light"][data-lp-family="7"] .l7-val{ background:linear-gradient(168deg, #ffffff 0%, #faf9f8 100%); border-color:color-mix(in srgb, #000 8%, transparent); box-shadow:0 1px 2px rgba(24,24,27,.04), 0 10px 26px -18px rgba(24,24,27,.16)} html[data-theme="light"][data-lp-family="7"] .l7-val:hover{ border-color:color-mix(in srgb, #000 15%, transparent); background:linear-gradient(168deg, #ffffff 0%, color-mix(in srgb, var(--accent) 6%, #fff) 100%)} html[data-theme="light"][data-lp-family="7"] .l7-val__ic{ background:color-mix(in srgb, #000 5%, transparent); border-color:color-mix(in srgb, #000 9%, transparent)} /* ============================================================ WHAT PEOPLE SAY ============================================================ */ html[data-theme="light"][data-lp-family="7"] .l7-say{ background:linear-gradient(168deg, #ffffff 0%, #faf9f8 68%); border-color:color-mix(in srgb, #000 8%, transparent); box-shadow:0 1px 2px rgba(24,24,27,.04), 0 10px 26px -18px rgba(24,24,27,.14)} html[data-theme="light"][data-lp-family="7"] .l7-say__mark{background:color-mix(in srgb, #000 5%, transparent)} html[data-theme="light"][data-lp-family="7"] .l7-say__mark::after{color:#71717a} html[data-theme="light"][data-lp-family="7"] .l7-say.is-lead .l7-say__mark{background:color-mix(in srgb, #000 7%, transparent)} html[data-theme="light"][data-lp-family="7"] .l7-say.is-lead .l7-say__mark::after{color:#3f3f46} html[data-theme="light"][data-lp-family="7"] .l7-say__av{ background:color-mix(in srgb, #000 5%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, #000 10%, transparent)} html[data-theme="light"][data-lp-family="7"] .l7-say.is-lead{ background:#ffffff; border-color:color-mix(in srgb, #000 11%, transparent); box-shadow:0 2px 4px rgba(24,24,27,.04), 0 16px 38px -22px rgba(24,24,27,.18)} html[data-theme="light"][data-lp-family="7"] .l7-say.is-lead .l7-say__q{color:#3f3f46} /* ============================================================ THE CLOSING CALL + FOOTER ============================================================ */ html[data-theme="light"][data-lp-family="7"] .l7-foot::before{ background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.1) 18%, rgba(0,0,0,.1) 82%, rgba(0,0,0,0))} html[data-theme="light"][data-lp-family="7"] .l7-foot__xpin{color:#71717a} html[data-theme="light"][data-lp-family="7"] .l7-foot__xpin:hover{color:#18181b} html[data-theme="light"][data-lp-family="7"] .l7-foot__links a{color:#52525b} html[data-theme="light"][data-lp-family="7"] .l7-foot__links a:hover{color:#18181b} html[data-theme="light"][data-lp-family="7"] .l7-foot__s{ background:color-mix(in srgb, #000 4%, transparent); border-color:color-mix(in srgb, #000 8%, transparent); color:#52525b} html[data-theme="light"][data-lp-family="7"] .l7-foot__s:hover{ color:#18181b;border-color:color-mix(in srgb, #000 16%, transparent)} html[data-theme="light"][data-lp-family="7"] .l7-foot__bar{color:#a1a1aa} html[data-theme="light"][data-lp-family="7"] .l7-foot__bar::before{background:rgba(0,0,0,.08)} /* ============================================================ THE THREE SCENES (js/landing-scenes.js, markup from landing-full.js) - AUDIT PASS. The first pass covered .aq/.aq-glass and the text/fill tiers most instances use, but missed every literal rgba(255,255,255,X) living on a MORE SPECIFIC selector (a state class, a child element, a chapter's own scene chrome) which cascade order lets win over the generic .aq-glass rule. Found by parsing every rule in landing-full.css and diffing its selector's classes against what this file already touches - these are the ones that had NOTHING here at all, so they were still drawing a literal white glass/text baked for the dark ground. Same recipe as the rest of the file: glass highlights invert dark->light by flipping white to black at a similar felt weight, text drops onto the same #18181b/ #52525b/#71717a/#a1a1aa tiers used everywhere else on this page. */ /* ---- composer catching light on focus/arm, the citation "seal" reveal --- */ html[data-theme="light"][data-lp-family="7"] .aq-sweep{ background:linear-gradient(102deg, transparent 34%, rgba(0,0,0,.06) 47%, rgba(0,0,0,.11) 50%, rgba(0,0,0,.06) 53%, transparent 66%)} html[data-theme="light"][data-lp-family="7"] .aq-comp.is-armed, html[data-theme="light"][data-lp-family="7"] #aqDash .aq-comp.is-armed{ box-shadow:inset 0 1px 0 rgba(0,0,0,.10), inset 0 0 0 1px rgba(0,0,0,.08)} html[data-theme="light"][data-lp-family="7"] .aq-rec.is-sealed{ box-shadow:inset 0 1px 0 rgba(0,0,0,.07), inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent)} html[data-theme="light"][data-lp-family="7"] .aq-rec__hd{border-bottom-color:rgba(0,0,0,.08)} html[data-theme="light"][data-lp-family="7"] .aq-rec__n{color:#a1a1aa} html[data-theme="light"][data-lp-family="7"] .aq-rec__k{color:#52525b} html[data-theme="light"][data-lp-family="7"] .aq-rec__v{color:#18181b} /* ---- Build Dashboard's own scene: the conversation panel (.dbs), the ------ pinned widget card (.dbw) and the drag cursor (.aqd-cur) --------------- */ html[data-theme="light"][data-lp-family="7"] .dbs{ background:linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.014) 40%, rgba(0,0,0,.008) 100%); box-shadow:inset 0 1px 0 rgba(0,0,0,.06), inset 0 0 0 1px rgba(0,0,0,.05), 0 50px 110px -60px rgba(0,0,0,.22)} html[data-theme="light"][data-lp-family="7"] .dbs__seam{ background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.10) 14%, rgba(0,0,0,.10) 86%, transparent 100%)} html[data-theme="light"][data-lp-family="7"] .dbs__hd::after{ background:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 10%, rgba(0,0,0,.08) 90%, transparent 100%)} html[data-theme="light"][data-lp-family="7"] .dbs__hdt, html[data-theme="light"][data-lp-family="7"] .dbs__name{color:#18181b} html[data-theme="light"][data-lp-family="7"] .dbs__src{ background:rgba(0,0,0,.05); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); color:#52525b} html[data-theme="light"][data-lp-family="7"] .dbs__save{ color:#71717a;background:rgba(0,0,0,.05); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)} html[data-theme="light"][data-lp-family="7"] .dbs__q{ background:rgba(0,0,0,.055); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); color:#18181b} html[data-theme="light"][data-lp-family="7"] .dbs__ans{ background:rgba(0,0,0,.04); box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)} html[data-theme="light"][data-lp-family="7"] .dbs__ans em{color:#52525b} html[data-theme="light"][data-lp-family="7"] .dbs__empty__t{color:#a1a1aa} html[data-theme="light"][data-lp-family="7"] .dbw{ --risk-low:rgba(21,60,84,.20); --risk-high:rgba(21,60,84,.52); background: linear-gradient(158deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 46%, rgba(255,255,255,.68) 100%), linear-gradient(180deg, rgba(6,182,212,.05), rgba(6,182,212,.03)); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(0,0,0,.08), 0 12px 28px -18px rgba(0,0,0,.18)} html[data-theme="light"][data-lp-family="7"] .aq-o--dbw.is-lifted .dbw{ background: linear-gradient(158deg, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.95)); box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0,0,0,.1), 0 28px 52px -20px rgba(0,0,0,.24), 0 6px 14px -8px rgba(0,0,0,.14)} html[data-theme="light"][data-lp-family="7"] .dbw__t{color:#18181b} html[data-theme="light"][data-lp-family="7"] .dbw__m{color:#a1a1aa} html[data-theme="light"][data-lp-family="7"] .dbw__ft{color:#71717a;border-top-color:rgba(0,0,0,.08)} html[data-theme="light"][data-lp-family="7"] .dbw__leg span{color:#52525b} html[data-theme="light"][data-lp-family="7"] .dbw__leg b{color:#18181b} html[data-theme="light"][data-lp-family="7"] .dbw__v{color:#18181b} html[data-theme="light"][data-lp-family="7"] .dbw__v em{color:#a1a1aa} html[data-theme="light"][data-lp-family="7"] .dbw__rk span{color:#3f3f46} html[data-theme="light"][data-lp-family="7"] .dbw__rk b{color:#a1a1aa} html[data-theme="light"][data-lp-family="7"] .dbw__rk u{color:#18181b} html[data-theme="light"][data-lp-family="7"] #aqDash .aq-comp{ background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.025) 100%); box-shadow:inset 0 1px 0 rgba(0,0,0,.09), inset 0 0 0 1px rgba(0,0,0,.06)} html[data-theme="light"][data-lp-family="7"] .aqd-ph{color:#a1a1aa} html[data-theme="light"][data-lp-family="7"] .aqd-cur{ border-color:rgba(0,0,0,.55); box-shadow:0 0 0 1px rgba(255,255,255,.7)} html[data-theme="light"][data-lp-family="7"] .aqd-cur i{ background:#18181b; box-shadow:0 0 10px 2px rgba(0,0,0,.25)} /* ---- the "three concepts" coach points folded into the dashboard film --- */ html[data-theme="light"][data-lp-family="7"] .db-pt__ic{color:#52525b} html[data-theme="light"][data-lp-family="7"] .db-pt__t{color:#18181b} html[data-theme="light"][data-lp-family="7"] .db-pt__p{color:#71717a} html[data-theme="light"][data-lp-family="7"] .db-pts[data-db-pts="a"] .db-pt, html[data-theme="light"][data-lp-family="7"] .db-pts[data-db-pts="c"] .db-pt{ border-top-color:color-mix(in srgb, #000 11%, transparent)} html[data-theme="light"][data-lp-family="7"] .db-pts[data-db-pts="b"] .db-pt__t{color:#27272a} /* ============================================================ AUDIT PASS 2 (29 Aug) - the rest of what the light page was missing. HOW THIS WAS FOUND, so the next pass does not start from scratch: the page was rendered headless in light, scroll-stitched at a real 1440x900 viewport (a full-height capture is useless here, it stretches every 100vh fold), and then two sweeps were run over the RESULT rather than over the CSS. 1. every element and pseudo-element was asked for its computed background and box-shadow, and anything painting a dark ink at a weight you can see was reported. That is what caught the hero, and the three below. 2. every text node was measured against the pixels actually behind it, which is the only way to score type sitting on a gradient. The static half - grepping each landing-*.css for literal white and diffing its class families against the ones this file already names - is what caught .di1-*: that band was built after the first light pass and nothing here had ever mentioned it. ============================================================ */ /* ---- THE DATA INTELLIGENCE BAND (.di1-*, the chat chapter) -------------- Built after the first light pass, so every surface in it was still the dark recipe: white glass at 5-26% over a rgba(22,16,32) ground. On the light page the ground vanished and the white glass turned the five document pages into pale grey ghosts with no edge and no content - the band read as a smudge where dark reads as five legible pages. Same conversion as the rest of this file: the white glass becomes a black tint at a similar felt weight, the paper itself becomes actual paper, and the insides go dark enough to be read on it. */ html[data-theme="light"][data-lp-family="7"] .di1-doc{ background: linear-gradient(160deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 50%, rgba(255,255,255,.82) 100%), linear-gradient(180deg, rgba(24,24,27,.04), rgba(24,24,27,.02)); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(0,0,0,.10), 0 16px 30px -20px rgba(24,24,27,.28)} html[data-theme="light"][data-lp-family="7"] .di1-doc__fold{ background:linear-gradient(225deg, rgba(0,0,0,.09) 0%, rgba(0,0,0,.09) 50%, transparent 50%)} html[data-theme="light"][data-lp-family="7"] .di1-doc__fold::after{ background:linear-gradient(90deg,transparent,rgba(0,0,0,.14))} /* the insides: ruled lines, a spreadsheet grid, a small chart, a slide */ html[data-theme="light"][data-lp-family="7"] .di1-lines i{background:rgba(0,0,0,.24)} html[data-theme="light"][data-lp-family="7"] .di1-grid i{background:rgba(0,0,0,.13)} html[data-theme="light"][data-lp-family="7"] .di1-grid i:nth-child(4n+1){background:rgba(0,0,0,.22)} html[data-theme="light"][data-lp-family="7"] .di1-bars i{background:rgba(0,0,0,.22)} html[data-theme="light"][data-lp-family="7"] .di1-slide{ background:rgba(0,0,0,.045); box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)} html[data-theme="light"][data-lp-family="7"] .di1-slide b{ background:linear-gradient(160deg,rgba(0,0,0,.12),rgba(0,0,0,.05))} /* THE INK EACH PAGE IS FILED UNDER. The dark set is pastel-on-black (mint, slate, amber at 50-72%); on paper those are invisible. Same hues, taken to the step that holds against white, and still nothing semantic. */ html[data-theme="light"][data-lp-family="7"] .di1-doc--sheet{--ink:rgba(5,150,105,.78)} html[data-theme="light"][data-lp-family="7"] .di1-doc--doc{--ink:rgba(71,85,105,.72)} html[data-theme="light"][data-lp-family="7"] .di1-doc--deck{--ink:rgba(180,120,10,.78)} html[data-theme="light"][data-lp-family="7"] .di1-doc--note{--ink:rgba(71,85,105,.55)} /* the core: its count sat at white 50% over a bright ground */ html[data-theme="light"][data-lp-family="7"] .di1-core__count{color:#52525b} /* the composer, which is the product's own shape at this scale */ html[data-theme="light"][data-lp-family="7"] .di1-ask{ background:linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.62) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(0,0,0,.08)} html[data-theme="light"][data-lp-family="7"] .di1-ask.is-armed{ box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(0,0,0,.14)} html[data-theme="light"][data-lp-family="7"] .di1-ask__q{color:#18181b} html[data-theme="light"][data-lp-family="7"] .di1-ask__go{background:rgba(0,0,0,.08)} html[data-theme="light"][data-lp-family="7"] .di1-ask__go::before{background:rgba(0,0,0,.45)} /* the reading */ html[data-theme="light"][data-lp-family="7"] .di1-kpi{ background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, #fff) 0%, rgba(255,255,255,.88) 62%); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent)} html[data-theme="light"][data-lp-family="7"] .di1-kpi__k{color:#52525b} html[data-theme="light"][data-lp-family="7"] .di1-kpi__v{color:#18181b} html[data-theme="light"][data-lp-family="7"] .di1-kpi__bar{background:rgba(0,0,0,.09)} html[data-theme="light"][data-lp-family="7"] .di1-kpi__s{color:#52525b} /* ---- TWO SURFACES THE FIRST SCENE PASS LEFT DARK ------------------------ .dbs itself was converted, but the conversation pane INSIDE it kept a rgba(8,12,16,.12) fill, so a dark rectangle sat in the left third of an otherwise light panel. And .aq-coach had its fill and text converted but not its drop shadow, which is a near-opaque black at a 32px blur: a small chip casting a heavy dark cloud onto a white ground. */ html[data-theme="light"][data-lp-family="7"] .dbs__conv{background:rgba(24,24,27,.035)} html[data-theme="light"][data-lp-family="7"] .aq-coach{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8), 0 16px 32px -20px rgba(24,24,27,.3)} /* ============================================================ READABILITY. Every text node on the page was scored against the pixels actually rendered behind it; these are the ones that came back under WCAG AA (4.5:1 for body, 3:1 for large type). The dark page passes at these same weights because a muted white on near-black keeps far more separation than the mirrored muted grey does on near-white - which is exactly why a light theme cannot be a straight inversion of the tiers. Everything moves along the zinc ramp this file already uses. Nothing new is invented, and the size/weight/case hierarchy that separates these tiers is untouched, so only the value changes. ============================================================ */ /* was #a1a1aa on the page floor: 2.33:1. The dark page runs this at 4.25:1, so light was the outlier, not the target. */ html[data-theme="light"][data-lp-family="7"] .l7-foot__bar{color:#52525b} /* was #c4c4c8: 1.58:1, the worst score on the page. #71717a still landed at 4.40:1, so it goes one more step; at 10.5px uppercase mono with wide tracking it stays well under the body copy in the hierarchy anyway. */ /* the muted tier, sitting at 4.20 - 4.44:1 wherever it carried small text. One step down the ramp clears it everywhere at once. */ html[data-theme="light"][data-lp-family="7"] .l7-eyebrow, html[data-theme="light"][data-lp-family="7"] .l7-stat__k, html[data-theme="light"][data-lp-family="7"] .l7-logos__k, html[data-theme="light"][data-lp-family="7"] .l7-foot__xpin, html[data-theme="light"][data-lp-family="7"] .db-pt__p{color:#52525b} /* "3 of 3" on the reasoning card, #a1a1aa on white: 2.46:1 */ html[data-theme="light"][data-lp-family="7"] .aq-rec__n{color:#71717a} /* ---- ACCENT USED AS TEXT ------------------------------------------------ The 50 step is the brand colour and it is correct on a dark ground, where it is the lightest thing in the sentence. On paper it is the DARKEST thing in the sentence and the same value now has to carry contrast instead of glow: orange 50 on the page floor measures 2.45:1, purple 50 measures 3.61:1. tokens.css already made this exact move for light mode further up the file, promoting the key colours from the 40 step to the 60 step because "the 40 steps wash out on a light chip"; this is the same promotion one step later, and only where the accent is TYPE. Fills, glows, meters and the buttons keep the 50 step and are untouched. */ html[data-theme="light"][data-lp-family="7"] .l7-h em, html[data-theme="light"][data-lp-family="7"] .l7-cta__h em, html[data-theme="light"][data-lp-family="7"] .aq-rec__hd b, html[data-theme="light"][data-lp-family="7"] .di7-steps__n{color:var(--accent-hover)} /* ---- ZINC 400 IS NOT A TEXT COLOUR ON THIS PAGE ------------------------- The scenes were scanned again with each one frozen at the moment it actually plays, rather than at whatever frame the page happened to be on, and the same value kept coming back: #a1a1aa, which is the right weight for an ICON or a placeholder glyph, is 1.9 - 2.5:1 as TYPE against every ground on this page. It reads on the dark page because there it is the bright thing; here it is the pale thing on a pale ground. So it stays where it is decoration (.l7-by__ph, .l7-shot__tag svg) and moves one step down wherever it is words. The composer placeholder goes two steps, because it alone sits on a tinted fill rather than on paper. */ html[data-theme="light"][data-lp-family="7"] .dbw__m, html[data-theme="light"][data-lp-family="7"] .dbw__v em, html[data-theme="light"][data-lp-family="7"] .dbw__rk b{color:#71717a} html[data-theme="light"][data-lp-family="7"] .aqd-ph{color:#52525b} /* the empty-canvas line is the one of these sitting on the cyan module tint rather than on paper, and #71717a only reached 3.80:1 against it */ html[data-theme="light"][data-lp-family="7"] .dbs__empty__t{color:#52525b} /* ============================================================ ICONS. Every svg on the page was asked what colour it actually paints with, and the ones still painting LIGHT on a light ground are here. The discs and chips around them had all been converted; the glyphs inside them had not, because they take their colour from a `color` further up and that property was never in the first pass. ============================================================ */ /* THE BENEFIT BADGES, and this was the visible one: the disc had been converted to a 5% black wash but the mark inside it was still rgba(255,255,255,.6), so six white glyphs sat on six white cards. The value is not picked, it is inherited: landing-full.css says this mark takes "the same quiet white the quote mark in the customers wall uses (.l7-say__mark::after), so the two quiet marks on the page are the same mark". That rule holds in light too, and this file already put that quote mark at #71717a, so the badge takes the same. Still not orange, for the same reason it is not orange in dark: on this page orange means the thing is clickable, and a badge on a benefits card is not. */ html[data-theme="light"][data-lp-family="7"] .l7-val__ic{color:#71717a} /* THE SECTION EYEBROWS. The glyph sits one step quieter than its own label in dark (white .38 against the label's .5) and that relationship is the point, so it moves with the label rather than staying put: the label went to #52525b in the readability pass, which leaves the mark one step behind it. It was two steps behind, at #a1a1aa, and read as a smudge next to type it is supposed to belong to. */ html[data-theme="light"][data-lp-family="7"] .l7-eyebrow svg{color:#71717a} /* THE ACCENT MARKS IN THE SCENES. These three carry var(--accent-bright), the 40 step, which is the correct choice on a dark ground where it is the brightest thing available. On paper the 40 step is the palest thing in the frame: orange 40 and cyan 40 both sit around 0.7 luminance against a 0.93 ground, so the mark disappears into the card it is marking. Same promotion this file already makes for accent used as type, and the same one tokens.css makes for the key colours in light mode. Fills and glows are untouched: this is only where the accent draws a LINE. */ html[data-theme="light"][data-lp-family="7"] .aq-ent__ic, html[data-theme="light"][data-lp-family="7"] .aq-coach__ic{color:var(--accent-hover)} /* ---- THE STICKY HEADER PLATE, on paper --------------------------------- Same plate as the dark page (css/landing.css) and the same job: sample what is passing under the bar and deepen it a step. On a light ground "deepen" means a warm white wash, not a dark one; the dark fill would read as a black bar laid across a light page, which is the one thing the plate is built to avoid. The blur and saturate carry over unchanged. */ html[data-theme="light"][data-lp-family="7"] .lp-head::before{ background:rgba(255,252,248,.62)} html[data-theme="light"][data-lp-family="7"] .lp-head::after{ background:rgba(0,0,0,.09)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ html[data-theme="light"][data-lp-family="7"] .lp-head::before{ background:rgba(250,248,246,.94)} }