/* ═══════════════════════════════════════════════════════════════════════════ SummerScope — the site's stylesheet. Extracted from index.html/landing.html, which each carried their own copy and drifted apart. One file means a mobile fix or a colour change lands on every page at once. Two things shape everything below: 1. DARK IS THE DEFAULT. The tokens on bare :root are the dark palette, and :root[data-theme="light"] overrides them. It is deliberately NOT keyed to prefers-color-scheme: the site opens dark for everyone, and the nav toggle (persisted in localStorage) is the only thing that changes it. 2. MOBILE IS THE BASE. Every rule outside a media query targets a phone. Wider screens add to it in min-width blocks. The old sheet did the opposite — desktop first, with a single 680px block undoing it — which is why the phone layout kept regressing. ═══════════════════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* ── THE PALETTE ────────────────────────────────────────────────────────────── Third pass, and the first two failed for the same underlying reason: the GREYSCALE was carrying the brand hue. Navy-tinted greys read as a stock AI dashboard; warm-beige greys under a terracotta accent read as somebody else's product. Either way the neutrals were doing identity work, which is the one job they are bad at. So the greys here are genuinely neutral — hue 197°, chroma 0.004, which is below the level where a cast is visible on any calibrated screen — and a single accent carries the whole identity. That accent is deep teal at 197°: far from the navy of the first attempt (257°) and far from the terracotta of the second (46°). It also leaves the semantic green at 155° free to mean "free / open" without competing with the button colour — 42° of separation between "this is interactive" and "this program costs nothing". Both modes are generated perceptually in OKLCH, then verified as a set: body text lands 9–13:1 on dark and 13–17:1 on light (crisp, but short of the ~16:1-on-black point where light text starts to halo), secondary text clears 4.5:1, every accent and status colour clears 4.5:1 on every ground it sits on, ink clears 4.5:1 on the accent fill, each of the ten tag chips clears 4.5:1 against its own label AND stays visible against the card beneath it, and every pair of surfaces that share an edge is at least 2.5 ΔL apart. Change one value and re-check the whole set — these numbers hold each other up. ───────────────────────────────────────────────────────────────────────── */ :root{ color-scheme:dark; --bg:#151818; /* page ground — lifted off black to kill the halo */ --bg-2:#152324; /* nav + hero + footer band, the one tinted surface */ --card:#222525; --card-2:#2F3232; /* raised surface inside a card */ --text:#D6DADA; /* deliberately not #fff: 12.7:1 on the page, not 16 */ --muted:#A3A7A7; --faint:#868989; --accent:#5CC2C4; /* teal — the only thing in the file with real chroma */ --accent-2:#83D5D6; --accent-ink:#031A1B; /* text on an accent fill — 8.5:1 */ --border:#3B3E3E; --border-2:#505353; /* hover / focus border */ --tag-bg:#2F3232; --green:#76C392; --amber:#E5B46E; --red:#D8847D; --shadow:0 6px 24px rgba(0,0,0,.45); --shadow-lg:0 20px 50px rgba(0,0,0,.55); --scrim:rgba(8,10,10,.72); /* The band: nav, hero and footer. On dark it sits just above the page ground; on light it is a soft teal panel rather than a dark slab, so these are "ink on the band", not "ink on dark". */ --band-ink:var(--text); --band-muted:#A3A7A7; --band-faint:#868989; --band-line:rgba(255,255,255,.07); --band-fill:rgba(255,255,255,.05); --band-fill-2:rgba(255,255,255,.10); /* Tag palette. Ten saturated pills on one card is its own kind of noise, so each hue keeps its identity at a fraction of the chroma: the chip reads as a tinted grey and its label carries the colour. */ --t-indigo-bg:#33384C; --t-indigo-fg:#AEBBEF; --t-emerald-bg:#2A3F31; --t-emerald-fg:#97CDA9; --t-blue-bg:#293B4B; --t-blue-fg:#95C3EB; --t-violet-bg:#3C3549; --t-violet-fg:#C5B3E8; --t-yellow-bg:#403923; --t-yellow-fg:#D0BC86; --t-red-bg:#4A3230; --t-red-fg:#EAABA5; --t-fuchsia-bg:#443342; --t-fuchsia-fg:#DAADD5; --t-orange-bg:#483427; --t-orange-fg:#E4B290; --t-slate-bg:#353B3B; --t-slate-fg:#B7C0C0; --t-sky-bg:#243D47; --t-sky-fg:#88C9E2; --bar-upcoming:#8C7A44; --bar-rolling:#3F6E75; --bar-inactive:#444848; --notice-bg:#34291A; --notice-bd:#504330; --notice-fg:#E1BC88; --alert-bg:#392624; --alert-bd:#563E3C; --alert-fg:#F2AFA9; --warn-bg:#37271D; --warn-bd:#544033; --warn-fg:#ECB591; --good-bg:#1F3025; --good-bd:#364B3D; --good-fg:#99D2AC; --sw:238px; /* sidebar width */ --nh:56px; /* nav height */ --mnh:58px; /* mobile bottom bar height */ --gutter:1rem; --r:12px; /* standard corner */ --tap:44px; /* minimum touch target */ } /* Light is the same construction inverted: the same neutral grey scale read from the other end, the same teal at the lightness that clears 4.5:1 on white. The old light theme dropped a near-black navy slab behind the nav and hero; that slab was the single loudest thing on the page and it belonged to a palette that no longer exists. It is now a soft teal panel two steps off the page, which is enough to separate it without shouting. */ :root[data-theme="light"]{ color-scheme:light; --bg:#F1F5F5; --bg-2:#DBEEEE; --card:#FFFFFF; --card-2:#EFF3F3; --text:#1D2020; --muted:#5A5D5D; --faint:#717474; --accent:#007679; --accent-2:#005F63; --accent-ink:#FAFEFE; --border:#D9DDDD; --border-2:#C1C5C5; --tag-bg:#E7EFEF; --green:#117342; --amber:#976500; --red:#A14B46; --shadow:0 3px 16px rgba(20,32,32,.07); --shadow-lg:0 20px 48px rgba(20,32,32,.18); --scrim:rgba(18,28,28,.5); --band-ink:var(--text); --band-muted:#5A5D5D; --band-faint:#6C6F6F; --band-line:rgba(0,0,0,.10); --band-fill:rgba(0,0,0,.045); --band-fill-2:rgba(0,0,0,.09); --t-indigo-bg:#E6ECFF; --t-indigo-fg:#3F4989; --t-emerald-bg:#DEF3E4; --t-emerald-fg:#036035; --t-blue-bg:#DDF0FF; --t-blue-fg:#075485; --t-violet-bg:#F0E9FF; --t-violet-fg:#594080; --t-yellow-bg:#F5ECD7; --t-yellow-fg:#664C00; --t-red-bg:#FFE6E3; --t-red-fg:#803531; --t-fuchsia-bg:#F9E6F7; --t-fuchsia-fg:#6F386B; --t-orange-bg:#FEE8DA; --t-orange-fg:#7A3D02; --t-slate-bg:#E7EFEF; --t-slate-fg:#4A5252; --t-sky-bg:#D9F2FC; --t-sky-fg:#005A7B; --bar-upcoming:#B08A2E; --bar-rolling:#3C8792; --bar-inactive:#B4BCBC; --notice-bg:#FFF2E2; --notice-bd:#EBD6B9; --notice-fg:#704500; --alert-bg:#FFEEEC; --alert-bd:#F6CECA; --alert-fg:#803531; --warn-bg:#FFF0E4; --warn-bd:#F2D2BE; --warn-fg:#7A3D02; --good-bg:#E8FAED; --good-bd:#C3E2CC; --good-fg:#036035; } html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } body{ font-family:'DM Sans',system-ui,-apple-system,sans-serif; background:var(--bg);color:var(--text); font-size:15px;line-height:1.6; /* The bottom bar is fixed, so the page needs room to scroll past it. */ padding-bottom:calc(var(--mnh) + env(safe-area-inset-bottom)); overflow-x:hidden; -webkit-tap-highlight-color:transparent; } body.no-scroll{overflow:hidden} button,input,select,textarea{font-family:inherit;color:inherit} /* 16px is the threshold below which iOS Safari zooms the viewport on focus. */ input,select,textarea{font-size:16px} a{color:var(--accent)} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} /* The nav is sticky at the top and the bar is fixed at the bottom, so anything the browser scrolls to on its own — a Tab through the cards, a focused chip, an in-page anchor — lands underneath one of them. scroll-margin reserves the clearance so a focused control is always actually on screen. */ a,button,input,select,summary,[tabindex],.card,.ecard{ scroll-margin-top:calc(var(--nh) + .5rem); scroll-margin-bottom:calc(var(--mnh) + .75rem); } .skip-link{position:absolute;left:0;top:0;z-index:900;background:var(--accent);color:var(--accent-ink); padding:.6rem 1rem;border-radius:0 0 8px 0;font-weight:600;font-size:.85rem; transform:translateY(-200%);transition:transform .12s} .skip-link:focus{transform:translateY(0)} .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px} ::-webkit-scrollbar-thumb:hover{background:var(--border-2)} /* ── NAV ─────────────────────────────────────────────────────────────────── */ /* :not(.mobnav) matters. The phone bottom bar is also a