/* ================================================================ Theracharts — Light Theme Overrides Loaded via on every page. The per-page inline :root block keeps the default dark tokens; this file layers light-mode overrides on top. Activation: (set by js/theme-toggle.js and the FOUC-prevention bootstrap snippet in each page's ). ================================================================ */ /* ============================================================ 2026-05-05 — Linear-style brand pivot. Color is information, not decoration. Black/white dominant. --accent (indigo) reserved for primary CTA buttons ONLY. Functional status tokens for green/red/yellow/blue used only when communicating state (success, error, warning, info). Magenta + gradient tokens deliberately removed. ============================================================ */ :root { /* ---- Workhorse palette — neutral near-black, minimal blue cast ---- #08090a is the same near-black Linear uses; reads as pure dark without the indigo undertone of the previous #0b0d13 navy. 2026-05-06 dark/light fix: !important was added long ago to beat stale per-page :root blocks that redefined these tokens. The same !important blocked :root[data-theme="light"] from overriding (light mode block had NO !important). Sweep removed the per-page redefinitions, so !important is no longer needed — specificity (0,2,0) on :root[data-theme="light"] correctly wins over :root (0,1,0). */ --bg: #08090a; --bg-secondary: #0e0f12; --bg-tertiary: #131418; --surface: #131418; --surface-hover: #1c1d22; --text: #fafafa; --text-secondary: #a1a1aa; --text-tertiary: #71717a; --border: #25262a; --border-light: #1c1d22; /* ---- Accent ---- 2026-05-06: BW lock. Variant C of the brand color decision. --accent now resolves to text color, so every .tc-btn-primary, .tc-color-accent, .tc-bg-accent etc. renders BW automatically without touching the call sites. Indigo retained ONLY inside product mockups (chart trend lines, alerts) where color carries clinical meaning, not decoration. The variable name stays so we don't have to scrub 200+ utility class references — semantically, "accent" now means "text emphasis" not "chromatic emphasis". --accent-alt left as a soft outline for hover/focus rings on form controls. */ --accent: var(--text); --accent-hover: var(--text-secondary); --accent-alt: var(--text-secondary); /* ---- Functional status tokens (use only when communicating state) ---- Green = success/progress. Red = error/destructive. Amber = warning. Blue = info/neutral status. Emoji or icon should pair with color so colorblind users still parse the meaning. */ --status-success: #10b981; --status-warning: #f59e0b; --status-error: #ef4444; --status-info: #3b82f6; /* ---- Translucent overlay token ---- Used inside SVG product mockups for badge backgrounds, hover-state fills, and similar "subtle depth on top of a surface" treatments. Flips per theme: 12% white in dark mode (subtle white-tint over dark surface), 6% black in light mode (subtle ink-tint over light surface). Exposed via SVG fill="var(--overlay-translucent)" (modern browsers accept var() in SVG paint attributes). */ --overlay-translucent: rgba(255, 255, 255, 0.12); /* ---- Chrome tokens (nav/dropdown/utility-bar) ---- */ --nav-bg: rgba(8, 9, 10, 0.95); --mobile-nav-bg: rgba(8, 9, 10, 1); --dropdown-bg: rgba(19, 20, 24, 0.96); --dropdown-hover: rgba(255, 255, 255, 0.06); --utility-bar-bg: #050505; --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); } /* ---- Light theme: redefine every token ---- :root[data-theme="light"] is specificity (0,2,0) — beats plain :root (0,1,0) regardless of source order, so this wins even though per-page inline :root blocks come later in the cascade. */ :root[data-theme="light"] { --bg: #ffffff; --bg-secondary: #f6f7fa; --bg-tertiary: #eceef3; --surface: #ffffff; --surface-hover: #f1f2f6; --text: #08090a; --text-secondary: #434854; --text-tertiary: #6c707c; --border: #dcdfe6; --border-light: #e8eaf0; /* Light mode also locks BW — see dark-mode --accent comment for rationale. var() refs resolve at use-time so this picks up the light-mode --text correctly. */ --accent: var(--text); --accent-hover: var(--text-secondary); --accent-light: rgba(11, 13, 19, 0.06); --accent-alt: var(--text-secondary); --success: #047857; --warning: #c2410c; --error: #b91c1c; /* Translucent overlay flips to a dark-ink tint for light mode so SVG mockup overlays read on white surfaces. See dark-mode definition for full rationale. */ --overlay-translucent: rgba(11, 13, 19, 0.06); --nav-bg: rgba(255, 255, 255, 0.92); --mobile-nav-bg: #ffffff; --dropdown-bg: rgba(255, 255, 255, 0.98); --dropdown-hover: rgba(15, 23, 42, 0.05); --utility-bar-bg: #f6f7fa; --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.10); --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08); /* 2026-05-06: --accent-magenta and --gradient-brand removed for the Linear pivot. The light-mode :root block kept them while the Linear pivot was experimental; now that we're committed to no decorative gradients anywhere, they're dead tokens. */ color-scheme: light; } /* Meta theme-color update — browsers read the meta tag from HTML, but we can't edit it from CSS. Handled in js/theme-toggle.js. */ /* ================================================================ Per-selector overrides for hardcoded rgba/hex values that live in per-page inline CSS. Specificity (0,2,0) beats (0,1,0) so these win without !important. ================================================================ */ /* Nav chrome */ [data-theme="light"] .tc-nav { background: var(--nav-bg); border-bottom-color: var(--border); } /* Nav brand mark — transparent delta, no tile. Two marks (white for dark mode, near-black for light mode) swap on data-theme so the mark sits directly on the nav background instead of a baked-in opaque square. The tiled/opaque icon is kept only for favicon / home-screen / manifest contexts that require it. Locked 2026-05-20 — supersedes the filter:invert tile hack. */ .tc-nav-logo .tc-nav-mark { display: block; width: 36px; height: 36px; } .tc-nav-logo .tc-nav-mark--light { display: none; } [data-theme="light"] .tc-nav-logo .tc-nav-mark--dark { display: none; } [data-theme="light"] .tc-nav-logo .tc-nav-mark--light { display: block; } [data-theme="light"] .tc-nav-dropdown-menu { background: var(--dropdown-bg); border-color: var(--border); box-shadow: var(--shadow-lg); } [data-theme="light"] .tc-nav-dropdown-menu a:hover { background: var(--dropdown-hover); color: var(--text); } /* Mobile menu background */ @media (max-width: 768px) { [data-theme="light"] .tc-nav-links, [data-theme="light"] .tc-nav-actions { background: var(--mobile-nav-bg); border-bottom-color: var(--border); } } /* Utility bar */ [data-theme="light"] .tc-utility-bar { background: var(--utility-bar-bg); border-bottom-color: var(--border-light); } /* ================================================================ Readability touch-ups for elements whose inline styles assumed a dark background. ================================================================ */ /* Generic white-on-dark text that needs to invert in light mode */ [data-theme="light"] body { background: var(--bg); color: var(--text); } /* Hero and section backgrounds that use semi-transparent white/black overlays often become invisible in light mode — soften them. */ [data-theme="light"] .tc-hero-gradient, [data-theme="light"] .tc-section-dark { background: var(--bg-secondary); color: var(--text); } /* Images / SVG illustrations with no explicit theme — usually fine, but diagrams authored for dark backgrounds can be locked via .tc-lock-dark (add this class to any element that should stay dark even in light mode). */ .tc-lock-dark, .tc-lock-dark * { --bg: #08090a; --bg-secondary: #0e0f12; --bg-tertiary: #131418; --surface: #131418; --text: #f4f5f8; --text-secondary: #a8acb8; --text-tertiary: #7a7e8b; --border: #2b2f38; color-scheme: dark; } .tc-lock-dark { background: var(--bg); color: var(--text); } /* Code blocks and syntax-highlight surfaces inside blog posts */ [data-theme="light"] pre, [data-theme="light"] code { background: var(--bg-secondary); color: var(--text); border-color: var(--border); } /* Toast / dropdown dark-mode defaults in shared widgets */ [data-theme="light"] .tc-sticky-cta { box-shadow: var(--shadow-lg); } /* Theme toggle button color hint (dark icon in light mode, etc.) */ .tc-theme-toggle { color: var(--text-tertiary); } .tc-theme-toggle:hover { color: var(--text-secondary); } /* ================================================================ 2026-05-06 Linear pivot — keyboard focus indicator. The previous indigo accent doubled as a focus ring (browsers picked it up when no explicit outline was set). After the BW lock, the default browser focus ring is inconsistent — Chrome shows thin blue, Firefox shows thin black, Safari shows nothing. Adding a global :focus-visible rule guarantees keyboard users see a clear, salient indicator on every interactive element. 2px solid + 2px offset is the WCAG-recommended minimum for focus visibility. :focus-visible (not :focus) so mouse clicks don't trigger the ring on buttons; only keyboard tabbing + screen-reader navigation does. ================================================================ */ :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 2px; } /* Buttons and CTAs already have a visible BW background — a 2px text-color ring on top would clash. Swap to the inverted color (var(--bg)) so the ring "punches through" the button background and remains visible. */ .tc-btn-primary:focus-visible, a.tc-btn-primary:focus-visible, button.tc-btn-primary:focus-visible { outline-color: var(--bg); outline-offset: 2px; box-shadow: 0 0 0 4px var(--text); } /* ================================================================ 2026-05-06 Linear pivot final lock: BW button foreground invert. The per-page inline `.tc-btn-primary { background: var(--accent); color: var(--text); }` rules across all 84 HTML pages would render white-on-white in dark mode after --accent flipped to var(--text). Anchor/button-element selectors (specificity 0,1,1) beat the bare class (0,1,0) without !important and without 84 file edits. Color is var(--bg) so it inverts correctly per theme: dark mode → white button, near-black text; light mode → near-black button, white text. ================================================================ */ /* (Removed) The override block that previously lived here used !important to force the BW lock on .tc-btn-primary / .tc-nav-cta / etc. The proper fix is to update the per-page inline rules so the button styles itself correctly at the source — see the 2026-05-06 sweep that flipped `color: var(--text)` to `color: var(--bg)` in every per-page btn-primary declaration, plus the same swap in site/dist/js/sticky-cta.js. With the per-page rules correct, no override is needed. */ /* ================================================================ 2026-05-06 Linear pivot, second pass: emphasis = italic. .tc-gradient-text was originally a chromatic gradient hook on emphasized hero/headline words. The 2026-05-05 pivot neutralized it to plain white text. The 2026-05-06 final lock turns it into italic — the editorial / clinical-literature register that says "this word matters" without spending the chromatic budget. Same class name kept so the ~12 existing `word.` call sites pick up the new treatment automatically without HTML edits. .tc-accent now also resolves to text color (no chromatic shift) thanks to --accent: var(--text), so the paired `tc-accent tc-gradient-text` still renders correctly: italic, same color as the rest of the headline. ================================================================ */ .tc-gradient-text { color: var(--text); background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; font-style: italic; /* Italic Inter renders slightly tighter than upright; nudge the tracking back out so the emphasized word doesn't crowd its neighbors at large display sizes. */ letter-spacing: -0.02em; } /* Generic emphasis treatment for fresh markup. Use word inside a headline to italicize without changing weight or color. .tc-gradient-text is the legacy hook for older markup; is the preferred path going forward. */ h1 em, h2 em, .tc-hero-h1 em, .tc-section-h2 em { font-style: italic; font-weight: inherit; color: inherit; letter-spacing: -0.02em; } /* ================================================================ Decorative indigo desaturation overrides (Linear pivot). The site has many places that inline-style indigo as a decorative accent (eyebrows, section labels, trust-item icons, hero-eyebrow borders, etc.). Linear-style restraint says these become white or light gray. The --accent variable is now reserved for primary CTA buttons; we override the common decorative-indigo selectors to use --text-secondary instead. ================================================================ */ .tc-hero-eyebrow, .tc-section-label, .tc-demo-card-label, .tc-demo-q-label, .tc-demo-trend-label, .tc-trust-item, .tc-trust-item svg.lucide, .tc-mag-tag { color: var(--text-tertiary) !important; /* Linear-style: Inter uppercase, modest size, wide tracking — restrained. Override per-page inline styles that originally used JetBrains Mono. */ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; font-size: 11px !important; } .tc-trust-item svg.lucide { stroke: var(--text-tertiary) !important; } /* Status-color utility classes — opt-in for genuine state communication. Example: Improving — for actual clinical/UI status. Don't sprinkle these for visual flavor. */ .tc-status-success { color: var(--status-success); } .tc-status-warning { color: var(--status-warning); } .tc-status-error { color: var(--status-error); } .tc-status-info { color: var(--status-info); } /* ================================================================ Decorative effects from wow.css disabled for the Linear pivot. Aurora glow (radial purple blobs behind hero) and dot-grid background are atmospheric decoration — they don't communicate anything and they fight the restrained palette. Hidden via theme.css so we can re-enable instantly by removing this block. ================================================================ */ .tc-aurora, .tc-aurora::before, .tc-aurora::after, .tc-dot-grid { display: none !important; } /* ================================================================ 2026-05-06 — Linear-style typography pivot. One typeface (Inter) for everything. Hierarchy via weight + size + tracking, not via font-family swaps. Mono dropped entirely from non-code surfaces (Linear uses mono only in actual code blocks). h3+ inherit body Inter; h1/h2 use Inter Bold/ExtraBold with tight tracking. ================================================================ */ h1, h2 { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 600; letter-spacing: -0.04em; } h1 { letter-spacing: -0.045em; } /* Wordmark — Inter Bold, sentence case "Theracharts" (single typographic register, no case contrast, no display sans). */ .tc-wordmark { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 600; letter-spacing: -0.025em; color: var(--text); display: inline-block; line-height: 1; } .tc-nav-logo .tc-wordmark { font-size: 22px; } .tc-footer-logo .tc-wordmark { font-size: 26px; color: var(--text); } @media (max-width: 720px) { .tc-nav-logo .tc-wordmark { font-size: 18px; } } /* Former mono utility classes — now Inter. Class names retained so existing HTML doesn't need to change; visual treatment shifts to Inter weight + uppercase + tracking instead of mono letterforms. */ .tc-mono { font-family: 'Inter', -apple-system, sans-serif; letter-spacing: -0.01em; } .tc-stat { font-family: 'Inter', -apple-system, sans-serif; font-weight: 700; letter-spacing: -0.03em; font-feature-settings: "tnum" 1; } .tc-badge-mono { font-family: 'Inter', -apple-system, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } /* ================================================================ Mobile nav fix — !important required because the per-page inline