/* ========================================================= DebateIt — shared UI primitives Source of truth for colors, typography, and component styles used across landing, high-school, debate-ai, learn. Mirrors the main app (app/index.html) aesthetic so every page reads as the same product. ========================================================= */ /* No decorative italics site-wide. The Crimson Pro/Fraunces italic flourishes (red emphasis words, italic nav, slanted pull-quotes) read as inconsistent against the upright brand face. Emphasis is weight + color, not slant. Neutralizes bare / defaults; explicit per-page italic rules were converted to upright in the same pass. (2026-06-15) */ em, i { font-style: normal; } /* ── Tokens — three canonical themes: GREY (dark, default) / CRIMSON (red on black) / LIGHT (warm off-white). Source of truth lives here; landing.html mirrors the same palette so every page reads as one product. Selectors support both conventions: landing uses `[data-theme="X"]` on , the older /app + /high-school code uses `body.X-theme`. Keeping both lets us migrate page-by-page without breaking either side. 2026-05-10: dropped the bare `body` selector from this default block. It was unconditionally setting GREY tokens on every , which shadowed `[data-theme="light"]` / `[data-theme="crimson"]` set on (body's own scope wins inside body's subtree). Result: light theme was rendering dark backdrops with light-theme text colors — nearly-black `.tier-name` on a `#111` bg on /pricing, etc. The legacy `body.crimson-theme` / `body.light-theme` selectors below still work; they each set their OWN tokens explicitly. */ :root, [data-theme="grey"]{ --bg:#111; --bg-card:rgba(255,255,255,.03); --bg-elev:rgba(20,20,24,.55); /* Opaque elevation for dropdowns/sheets that float over page content. --bg-elev is translucent by design (topbar frosted glass), but a descendant of the blurred topbar can't backdrop-blur the page behind it (ancestor backdrop root), so menus using --bg-elev let text bleed through. Menus use this solid token instead. (2026-07-19) */ --bg-elev-solid:#17171b; --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.18); --text:#fff; --text-dim:rgba(255,255,255,.68); --text-ghost:rgba(255,255,255,.38); --accent:#ef4444; --accent-hover:#f87171; --accent-soft:rgba(239,68,68,.08); --accent-border:rgba(239,68,68,.25); --accent-glow:rgba(200,30,30,.35); --accent-glow2:rgba(80,20,20,.25); /* Radius scale bumped up to feel less boxy. Old values felt sharp-cornered on cards / form rows; new values lean toward "soft / circular" without going full pill. Pages that want a rounder vibe should use --radius-lg or --radius-xl. */ --radius-sm:10px; --radius:14px; --radius-lg:22px; --radius-xl:30px; --radius-pill:999px; --shadow-sm:0 2px 10px rgba(0,0,0,.2); --shadow:0 6px 18px rgba(0,0,0,.35); --shadow-lg:0 20px 60px rgba(0,0,0,.45); --ease:cubic-bezier(.2,.65,.3,.9); } [data-theme="light"], body.light-theme{ /* Warm off-white instead of pure white so it doesn't glare on retina displays; deeper red (#dc2626) reads as a confident link/CTA on light backgrounds rather than looking radioactive. Mirrors the landing-page light theme exactly. */ --bg:#fafaf7; --bg-card:rgba(0,0,0,.03); --bg-elev:rgba(255,255,255,.8); --bg-elev-solid:#ffffff; --border:rgba(0,0,0,.08); --border-strong:rgba(0,0,0,.18); --text:#1a1a1f; --text-dim:rgba(0,0,0,.68); --text-ghost:rgba(0,0,0,.42); --accent:#dc2626; --accent-hover:#b91c1c; --accent-soft:rgba(220,38,38,.08); --accent-border:rgba(220,38,38,.25); --accent-glow:rgba(220,38,38,.18); --accent-glow2:rgba(220,38,38,.10); } [data-theme="crimson"], body.crimson-theme{ --bg:#000; --bg-card:rgba(255,40,40,.03); --bg-elev:rgba(30,10,10,.55); --bg-elev-solid:#1a0a0a; --border:rgba(239,68,68,.12); --border-strong:rgba(239,68,68,.28); --text:#fff; --text-dim:rgba(255,255,255,.68); --text-ghost:rgba(239,68,68,.42); --accent:#ef4444; --accent-hover:#f87171; --accent-soft:rgba(239,68,68,.08); --accent-border:rgba(239,68,68,.3); --accent-glow:rgba(239,68,68,.4); --accent-glow2:rgba(239,68,68,.2); } /* ── Base ─────────────────────────────────────────────────── */ *{box-sizing:border-box} /* html background tracks the theme so the cross-page fade (page-transition.js drops body to opacity:0) never flashes white between a dark and a light page. (2026-06-15) */ html{scroll-behavior:smooth;background:var(--bg);transition:background .4s} body{ margin:0; /* Crimson Pro is the house face site-wide. Fraunces + Georgia stay as the serif fallback chain. (switched from Geist 2026-06-15) */ font-family:'Crimson Pro','Fraunces',Georgia,"Times New Roman",serif; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; background:var(--bg);color:var(--text); font-size:16px;line-height:1.55; transition:background .4s,color .4s; } a{color:inherit} ::selection{background:var(--accent);color:#fff} /* ── Beta strip (fixed, top of every page) ───────────────── */ .ui-beta-strip{ position:fixed;top:0;left:0;right:0;z-index:10000; padding:6px 36px 6px 14px;text-align:center; font-size:.72rem;color:#fff;font-weight:600;letter-spacing:.02em; /* Fully opaque — earlier alpha of `dd` let hero content bleed through when it scrolled under */ background:#ef4444; border-bottom:1px solid #00000040; font-family:'Crimson Pro','Inter',system-ui,sans-serif;line-height:1.4; box-shadow:0 2px 8px rgba(0,0,0,.35); } .ui-beta-strip a{color:#fff;text-decoration:underline;font-weight:800} .ui-beta-strip-dismiss{ position:absolute;right:8px;top:50%;transform:translateY(-50%); background:transparent;border:none;color:#fff;opacity:.7; cursor:pointer;font-size:1rem;line-height:1;padding:4px 6px; } .ui-beta-strip-dismiss:hover{opacity:1} body.has-beta-strip{padding-top:32px} /* ── Neural constellation canvas (fixed bg) ──────────────── */ .ui-neural-canvas{ position:fixed;top:0;left:0;width:100vw;height:100vh; /* z-index:0 so the constellation sits BEHIND content (which defaults to z-index:auto/0 but later in DOM, or explicitly z-index:1 in some pages). Was at 1, putting the canvas on top of cards/text on the Manage page and elsewhere. */ z-index:0;pointer-events:none;opacity:.45; transition:opacity 1s ease; } body.crimson-theme .ui-neural-canvas{opacity:.8} body.light-theme .ui-neural-canvas{opacity:.35} /* ── Top bar ─────────────────────────────────────────────── */ .ui-topbar{ position:fixed;top:32px;left:0;right:0;z-index:1000; padding:0 32px;height:52px; display:flex;align-items:center;justify-content:space-between; background:color-mix(in srgb,var(--bg) 92%,transparent); border-bottom:1px solid var(--border); /* 2026-05-27 perf: backdrop-filter dropped 16px -> 10px and the bg color-mix bumped 88% -> 92% so the slight visual loss from the smaller blur is compensated by a more opaque background. Chrome's gaussian-blur cost scales roughly with radius squared and the topbar's backdrop is re-rasterized every scroll frame. Visually indistinguishable on retina; meaningfully cheaper. */ backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); /* Transform is not transitioned on purpose. The banner offset uses transform so it snaps to position on first paint instead of sliding in from y=0. The other listed properties retain their existing transitions. */ transition:top .2s ease,background .4s,border-color .4s; } body:not(.has-beta-strip) .ui-topbar{top:0} /* Push the fixed topbar down by the founding-cohort banner height so the banner is actually visible (cohort-banner.js inserts an