:root{ /* Ledger-green ramp: deep ink-green base with warm paper-ivory text -- the look of a bound annual report, not a SaaS dashboard. One emerald accent carries the whole brand (single-accent discipline); old gold is reserved for the "your analysis" semantic only. Lightness steps match the old navy ramp, so the verified contrast ratios carry over. */ --bg:#0b100d; --panel:#111813; --panel2:#161f19; --panel3:#1d2921; --border:#2a382e; /* One step brighter than the original ramp (user feedback: text was hard to read on the dark ground). Brightening light-on-dark text only raises contrast, so the old AA-verified floor still holds. */ --text:#ffffff; --muted:#e6e4dd; --muted-dim:#cbc9c1; --accent:#d9b356; --accent-soft:#d9b3561f; /* Text color for anything sitting ON the gold gradient -- gold is a light surface, so it takes dark ink, not white (white-on-gold fails contrast). */ --on-grad:#221a0b; --analysis:#d4a13f; --analysis-soft:#d4a13f1f; --green:#3fbf7f; --red:#e0684f; --amber:#d4a13f; /* Alias names that .lynchCat consumes. They were REFERENCED but never declared anywhere in this project, so `border:1px solid var(--line)` was invalid at computed-value time and fell back to `border-style:none` -- the six Peter Lynch cards have been rendering with NO border at all, in both themes, and the .on severity border-colors could never show. Kept as pure aliases of tokens that already exist rather than four new colours, so each theme resolves them from its own block and neither palette gains a value it did not already have. */ --line:var(--border); --good:var(--green); --warn:var(--amber); --bad:var(--red); --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; /* Owned here (the base tokens file) rather than in landing.css, which only ever consumed these -- the app itself gets the same premium typographic and gradient treatment the landing page always had, instead of falling back to a generic system font the moment you actually log in. */ /* Gold mix on every clickable surface (buttons, active tabs, nav pills, landing CTAs all consume this one token): deep bronze into bright gold, the black-and-gold "private bank" read. Anything on this surface uses --on-grad dark ink, never white. */ --grad:linear-gradient(135deg,#987d3c 0%,#d9b356 48%,#face63 100%); --grad-soft:linear-gradient(135deg,var(--accent-soft) 0%,var(--accent-soft) 100%); --display-font:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif; /* Promoted from .landing so the app can use the same serif for editorial numerals -- the running numbers in the report are typography, not UI chrome, and must match the landing's 01/02/03 treatment. */ --serif:'Fraunces',Georgia,'Times New Roman',serif; /* Elevation scale: three tiers rather than one flat shadow everywhere, so depth actually communicates hierarchy (a resting card vs. a hovered one vs. a floating overlay) instead of every surface looking the same. */ --shadow-sm:0 1px 2px rgba(0,0,0,.10); --shadow-md:0 8px 24px rgba(0,0,0,.16); --shadow-lg:0 16px 48px rgba(0,0,0,.28); --shadow-glow:0 0 0 1px var(--accent-soft),0 8px 28px -8px #a87d4155; } /* Two theme states: dark is the default design; an explicit user choice of data-theme="light" on (persisted in localStorage via theme.js) switches to the light reading theme. Light is PARCHMENT, not white. The neutrals used to sit in the green family (hue ~81deg) while the accent is gold (hue ~40deg) -- a warm accent on cool ground, which is why the page read as both flat and faintly "off": the two families fought instead of supporting each other. Every neutral below is rotated into the accent's own hue band (38-43deg) at the SAME channel spread the green ramp used, so the chroma budget is unchanged. This is a hue move, not a saturation move -- the target is the off-white a broadsheet or an annual report is printed on, not cream. Lightness is deliberately almost untouched (CIE L*: --bg 94.8 -> 93.5, --panel 98.9 -> 98.0), so every ratio verified against the old ramp carries over; --bg simply stops throwing back full-page glare. The --bg / --panel gap WIDENS (dL* 4.1 -> 4.5), which matters because below 700px the cards go full-bleed and that gap plus --border is the only thing separating them -- so --border is a deliberate step stronger too (dL* to --panel 15.8 -> 17.4). Verified: --text on --bg 14.8:1, --muted on --panel 7.2:1 (was 6.8:1), --muted-dim on --panel3 4.8:1 (was 4.5:1 and failing). */ /* Neutrals follow Claude's warm-gray ramp (sampled from its design tokens: gray-10 #fcfcfb, gray-30 #f6f6f4, gray-50 #f0efec, gray-80 #e7e6e1). The previous warm ramp had the right HUE but far too much CHROMA -- --panel measured 62% saturation and --bg 36%, against roughly 11-14% across Claude's whole light ramp. That is the entire difference between "warm paper" and "beige": hue says which direction, saturation says how far, and this ramp had gone about four times too far. Surfaces now sit at 10-14% and the inks fall to ~3%, which is Claude's other move -- its neutrals DESATURATE as they darken, so text reads as near-black rather than as brown. The gold accent is untouched and still works, because these greys sit at 45-60deg, the same warm family as the 40deg gold, just drained of chroma. */ :root[data-theme="light"]{ --bg:#f0efec; --panel:#fcfcfb; --panel2:#f6f6f4; --panel3:#e7e6e1; --border:#dbdad2; --text:#000000; --muted:#2b2a27; --muted-dim:#3d3b37; --accent:#d4a017; --accent-soft:#d4a01714; --analysis:#d4a017; --analysis-soft:#d4a0171a; /* Status colours are DARKENED for paper, not merely re-hued: at their dark-theme brightness they failed AA as small text on a light ground (--green 4.1:1 and --red 4.1:1 on --panel2, and --amber was never declared in this block at all -- it fell through to the dark #d4a13f and ran at 2.2:1). These clear 4.5:1 on --panel, --panel2 AND --panel3. Hue is held: green stays ~152deg, red ~10deg, amber moves to ~32deg so "caution" stays distinct from the 40deg gold accent beside it. Kept as 6-digit hex on purpose -- .rangeBarTrack concatenates an alpha pair onto var(--red)/var(--green), which only parses against #rrggbb. */ --green:#16714a; --red:#ac402c; --amber:#8c5314; /* Same gold mix as dark, one step deeper so the chips still read as "lit" against bright cream surroundings. */ --grad:linear-gradient(135deg,#997311 0%,#d4a017 48%,#fabd1b 100%); --on-grad:#221a0b; /* Identical geometry, identical alphas -- only the shadow's own hue moves out of the old green-grey into the warm neutral family. The leftover emerald in --shadow-glow (a survivor of the pre-gold brand, still ringing the DCF headline stat in green on a gold theme) becomes the theme's own gold at a LOWER alpha than before (33 -> 26): nothing here glows harder than it already did. */ --shadow-sm:0 1px 2px rgba(46,36,20,.06); --shadow-md:0 8px 24px rgba(46,36,20,.08); --shadow-lg:0 16px 48px rgba(46,36,20,.14); --shadow-glow:0 0 0 1px var(--accent-soft),0 8px 28px -8px #96703a26; } /* The landing's ivory display color must track the theme too, or serif headlines vanish on light paper. Warmed with the rest of the light ramp -- it was the last green-cast ink left, and it sets the biggest type on the page. Same lightness, so contrast on --bg is unchanged (14.4:1). */ :root[data-theme="light"] .landing{--ivory:#1f1b14;} /* Theme toggle: a quiet segmented control, not a novelty sun/moon switch. */ .themeToggle{display:inline-flex;gap:2px;background:var(--panel2);border:1px solid var(--border); border-radius:999px;padding:3px;} .themeToggle button{background:none;border:none;color:var(--muted);font-family:inherit;font-size:10.5px; font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px; cursor:pointer;transition:background .12s ease,color .12s ease;} .themeToggle button:hover{color:var(--text);} .themeToggle button.active{background:var(--accent);color:var(--on-grad);} /* Same visual language as the theme toggle -- a quiet segmented control. */ .langToggle{display:inline-flex;gap:2px;background:var(--panel2);border:1px solid var(--border); border-radius:999px;padding:3px;} .langToggle button{background:none;border:none;color:var(--muted);font-family:inherit;font-size:10.5px; font-weight:700;letter-spacing:.02em;padding:4px 10px;border-radius:999px; cursor:pointer;transition:background .12s ease,color .12s ease;} .langToggle button:hover{color:var(--text);} .langToggle button.active{background:var(--accent);color:var(--on-grad);} *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter','Segoe UI',system-ui,Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;} /* Every heading, site-wide, renders upper case (by request) -- a transform, not literal caps in the markup, so DOM text/screen readers/copy-paste and the Chinese i18n strings (case-less, unaffected either way) stay in their natural case. A couple of headings below explicitly override this back to none where a title is meant to read as a normal sentence. */ h1,h2,h3,h4{text-transform:uppercase;} /* A faint, fixed radial wash behind everything -- purely atmospheric, low enough contrast to never compete with content, but it's the difference between "flat charcoal rectangle" and a surface with actual depth. Fixed (not absolute) so it doesn't reflow or repeat as the page scrolls. */ body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(900px 500px at 15% -10%, #a87d4114, transparent 60%), radial-gradient(700px 420px at 100% 0%, #d4a13f0f, transparent 55%);} header{padding:16px 24px;border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;} /* How far the investor has scrolled down the current page/section -- a tab being open doesn't prove its content was actually read; scrolling to the bottom is the closer proxy, and this makes that visible instead of implicit. */ #scrollProgressBar{position:fixed;top:0;left:0;right:0;height:3px;z-index:30;pointer-events:none;background:transparent;} #scrollProgressFill{height:100%;width:0%;background:var(--accent);transition:width .1s linear;} .scrollProgressPct{position:fixed;top:10px;right:16px;z-index:30;background:var(--panel);border:1px solid var(--border); color:var(--text);font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px; box-shadow:0 2px 10px rgba(0,0,0,.18);pointer-events:none;font-variant-numeric:tabular-nums;} header h1{font-family:var(--display-font);font-size:19px;margin:0;font-weight:800;letter-spacing:-.02em;} header .sub{color:var(--muted);font-size:12px;margin-top:2px;} main{padding:24px 24px 64px;max-width:940px;margin:0 auto;} /* ---- page nav: Live Data / Deep-Dive Report / Checklist ---- */ .pageNav{display:flex;gap:4px;background:var(--panel);border:1px solid var(--border); border-radius:var(--radius-md);padding:4px;margin-bottom:var(--space-4); position:sticky;top:72px;z-index:15;box-shadow:var(--shadow-md);} .pageTab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px; padding:10px 12px;border-radius:var(--radius-sm);text-decoration:none; font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap; transition:background .12s ease,color .12s ease;} .pageTab:hover{color:var(--text);background:var(--panel2);} .pageTab.active{background:var(--grad);color:var(--on-grad);} .pageTab.active:hover{background:var(--grad);color:var(--on-grad);} .tabBadge{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:20px; background:var(--panel2);color:var(--muted);border:1px solid var(--border); font-variant-numeric:tabular-nums;} .pageTab.active .tabBadge{background:rgba(0,0,0,.16);color:var(--on-grad);border-color:transparent;} .tabBadge:empty{display:none;} @media(max-width:640px){ .pageNav{position:static;} .pageTab{font-size:12px;padding:9px 6px;} } .view[hidden]{display:none;} /* ---- section grouping: separates "live data" from "your analysis" ---- */ .section-eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--display-font);font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin:var(--space-6) 0 var(--space-3); background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 11px rgba(201,154,53,.22));} .section-eyebrow:first-child{margin-top:0;} .section-eyebrow::before{content:'';width:16px;height:3px;border-radius:2px;background:var(--accent);flex:none;} .section-eyebrow.analysis::before{background:var(--analysis);} .section-eyebrow .eyebrow-note{font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted-dim);font-size:11px;-webkit-text-fill-color:var(--muted-dim);} /* Phone: the title and its note fought for one row, so the title broke across two lines with the note squeezed beside it. Stack them instead. */ @media(max-width:640px){ .section-eyebrow{flex-wrap:wrap;gap:4px 10px;font-size:16px;} .section-eyebrow .eyebrow-note{flex-basis:100%;padding-left:26px;} } .card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:var(--space-4);box-shadow:var(--shadow-sm);transition:box-shadow .18s ease,border-color .18s ease;} .card:hover{box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--border) 60%,var(--accent));} /* Card titles in gold. Deliberately NOT applied to every heading -- the collapsible titles stay ivory because their field labels below are already gold, and two golds stacked would compete instead of ranking. The rule is: gold marks where a block STARTS, neutral carries content. */ .card h2{font-family:var(--display-font);margin:0 0 4px;font-size:16px;font-weight:800;letter-spacing:-.015em; color:var(--accent);text-shadow:0 0 16px rgba(201,154,53,.13);} .card h2 + .muted{margin-top:0;margin-bottom:var(--space-4);} /* A settings card whose contents stay folded until asked for. The carries the card's own h2, so a collapsed card is visually identical to a normal one -- only the chevron says it opens. */ /* Hide the body explicitly rather than trusting the browser's built-in closed-
behaviour. Some embedded/older engines render the children of a closed
anyway, which for THIS card would mean three password boxes sitting open exactly when they should not be. */ .settingsDisclosure:not([open]) > *:not(summary){display:none;} .settingsDisclosure > summary{list-style:none;cursor:pointer;display:flex;align-items:center; justify-content:space-between;gap:10px;} .settingsDisclosure > summary::-webkit-details-marker{display:none;} .settingsDisclosure > summary h2{margin:0;} /* Chevron drawn in CSS rather than an icon font, and rotated on open so the control states which way it is going. */ .settingsDisclosure > summary::after{content:'';width:8px;height:8px;flex:none; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease,border-color .18s ease;} .settingsDisclosure[open] > summary::after{transform:rotate(225deg) translate(-2px,-2px);} .settingsDisclosure > summary:hover h2{filter:brightness(1.15);} .settingsDisclosure > summary:hover::after{border-color:var(--accent);} .settingsDisclosure > summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;} .card h3{margin:0 0 var(--space-2);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;} .row{display:flex;gap:12px;flex-wrap:wrap;align-items:end;} .field{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);} label{font-weight:600;} input,select,textarea{background:var(--panel2);border:1px solid var(--border);color:var(--text);padding:9px 11px;border-radius:var(--radius-sm);font-size:13px;font-family:inherit;transition:border-color .12s ease;} input,select{min-width:120px;} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);} input:read-only{color:var(--muted);} /* Keyboard-only focus ring, site-wide: default browser outlines get lost against this dark theme, and several custom controls (chips, tabs, the prose-view divs) have no visible focus state at all otherwise. :focus-visible skips mouse clicks. */ a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;} textarea{width:100%;min-height:76px;resize:vertical;line-height:1.65;} .ddProse{min-height:220px;overflow-y:hidden;} .ddAutoGrow{overflow-y:hidden;} /* Rendered read view sits over the raw-markdown textarea -- click to edit swaps back to it. */ /* Long-form reading surface: slightly larger type, looser leading, and a capped measure -- an investor reads thousands of words here, and 90+ character lines at 13px are what makes that tiring. */ .ddProseView{display:none;width:100%;min-height:220px;background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;font-size:14px;line-height:1.7;max-width:76ch;white-space:pre-wrap;cursor:text;} .ddProseView:hover{border-color:var(--muted-dim);} .ddProseView strong{color:var(--accent);font-weight:800;} .ddProseView.empty{color:var(--muted-dim);} /* .btn works on