/* ============================================================================= QUEERING ANCs — STRUCTURE / COMPONENT LAYER Capital Stonewall Democrats ----------------------------------------------------------------------------- Brand-agnostic: references tokens (theme.css) only, never a raw brand value. A superset of the original styles.css — every existing class name & behavior is preserved; states are refined and new civic/learning components are added. ============================================================================ */ /* ---------------------------------------------------------------------------- 0 · RESET & BASE ---------------------------------------------------------------------------- */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* Q124 — the [hidden] attribute always wins. A component class that sets display (e.g. .pulse-band's inline-flex) otherwise overrides the UA [hidden]{display:none} and renders an EMPTY pill — the errant hero bubble. Elements are always revealed by REMOVING the attribute, never by overriding display. */ [hidden]{display:none !important} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-ui); font-size:var(--fs-body); line-height:var(--lh-body); font-weight:var(--fw-regular); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg{max-width:100%} hr{border:0;border-top:1px solid var(--line);margin:var(--space-7) 0} ::selection{background:var(--accent);color:var(--paper)} /* Consistent keyboard focus everywhere. Components override with their own ring where a tighter fit looks better, but nothing is ever focus-invisible. */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:var(--focus-ring); outline-offset:var(--focus-offset); border-radius:var(--r-xs); } :where(a,button,input,select,textarea,summary):focus:not(:focus-visible){outline:none} /* Skip link for keyboard / screen-reader users */ .skip-link{ position:absolute;left:var(--space-4);top:-60px;z-index:50; background:var(--ink);color:var(--on-dark); padding:10px 16px;border-radius:var(--r-sm);font-weight:600;font-size:14px;text-decoration:none; transition:top var(--dur-fast) var(--ease); } .skip-link:focus{top:var(--space-4)} /* ---------------------------------------------------------------------------- 1 · LAYOUT · MASTHEAD · BRANDMARK ---------------------------------------------------------------------------- */ /* ACCEPTANCE-ADDENDUM §2.14 — the marketing content axis uses a 40px gutter (24 ≤560). Override --gutter on the marketing subtree only; app pages (no body.mktg) keep the base --gutter. Every marketing element that reads var(--gutter) (.wrap/.lwrap, hero-in, lnav-in, section-pad) picks this up, so all marketing gutters match. */ body.mktg{--gutter:40px} @media(max-width:560px){body.mktg{--gutter:24px}} /* Mobile touch target — consent/opt-in checkboxes + radios on marketing forms were browser-default (~13px), too small to tap on a phone. Bump to a 20px box (toward WCAG 2.5.8) with a token accent. App forms unchanged. */ body.mktg input[type="checkbox"],body.mktg input[type="radio"]{width:20px;height:20px;min-width:20px;min-height:20px;flex:none;accent-color:var(--accent);cursor:pointer} /* Mobile touch target (app tier) — the marketing rule above was scoped body.mktg only, so real checkboxes/ radios on tool surfaces (voter-tool header toggle, CRM standardized checkboxes, canvass dispositions, sheet bodies) stayed browser-default ~13px on a phone — below the §2.5 / 2.5.8 floor. Same 20px box + token accent, scoped to the app shell + the sheet so the field is tappable one-handed. Custom-styled chips use hidden inputs + a styled span and are untouched (they already meet 44px). */ html.has-tool-rail input[type="checkbox"],html.has-tool-rail input[type="radio"], .sheet__body input[type="checkbox"],.sheet__body input[type="radio"]{width:20px;height:20px;min-width:20px;min-height:20px;flex:none;accent-color:var(--accent);cursor:pointer} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) var(--space-11)} .wrap.wide{max-width:var(--maxw-wide)} /* Q197 — the wide container. Pages write class="wrap wrap-wide" (one class), but the rule above is `.wrap.wide` (two classes) — so `wrap-wide` matched nothing and every wide page silently fell back to 720px (the "wrong/ skinny width"). Define it globally, ONE source, so the chrome frame is consistent everywhere it's used. */ .wrap-wide{max-width:var(--maxw-wide)} /* Q615 — APP SHELL. The logged-in Campaign Copilot (/learn/ + demo) and the Admin console (/admin/) are a full-viewport APP, not the marketing site: a full-height anchored left rail + an independently-scrolling main pane, no marketing masthead. This is the SHARED foundation (spec docs/APP_SHELL_SPEC.md) — each surface adds its own rail colour (portal pink in portal.css; admin ink in admin.css). `.is-app` is set once the app is entered (portal: when signed in / demo; admin: always). Before it, the container is a plain document-flow block (the sign-in doorway keeps its centred column). */ .appshell{min-height:100dvh} .appshell.is-app{height:100dvh;display:grid;grid-template-columns:[rail] var(--rail-w) [main] 1fr;overflow:clip} .appshell__rail{display:none} .appshell.is-app .appshell__rail{display:flex;flex-direction:column;height:100dvh;overflow:hidden} .appshell__main{min-width:0} .appshell.is-app .appshell__main{height:100dvh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch} /* Q625 — clamp the PAGE in app mode so the BODY physically cannot scroll (the shell was "pulling up" at the bottom because the document itself still scrolled). body.app-mode is set by setAppMode(on); the plain body rule is the universal fallback, and html:has(body.app-mode) clamps the root where :has is supported. Only .appshell__main scrolls now. ≤760 reverts to normal document flow (the rail becomes a drawer/dock). Q731 — overflow:CLIP, not hidden: `hidden` still lets the browser scroll the document PROGRAMMATICALLY (a focus/scrollIntoView on a control deep in the pane scrolled the whole shell up ~1269px off-screen, with no scrollbar to return → the "profile toggle blanks the page" bug). `clip` is not a scroll container, so focus-scroll can only move .appshell__main (the one legitimate scroller). Belt-and-suspenders scroll pin in portal.js setAppMode. */ html:has(body.app-mode){height:100dvh;overflow:clip} body.app-mode{height:100dvh;overflow:clip} /* Mobile (≤760): the rail collapses to each surface's drawer/dock; the page returns to normal document flow. */ @media (max-width:760px){ .appshell.is-app{display:block;height:auto;overflow:visible} .appshell.is-app .appshell__rail{display:none} .appshell.is-app .appshell__main{height:auto;overflow-y:visible} html:has(body.app-mode){height:auto;overflow:visible} body.app-mode{height:auto;overflow:visible} } /* ─── Mobile native feel ─────────────────────────────────────────────────────── viewport-fit=cover (in every page's viewport meta) enables the safe-area insets the journey-dock already codes, so the fixed bottom dock sits cleanly above the iOS home indicator. These add the rest of the "real app, not a webpage" polish: */ /* no grey tap-flash on any control (the #1 tell that it's a browser, not an app) */ a,button,label,summary,select,input,textarea,[role="button"],.dock-tab{-webkit-tap-highlight-color:transparent} /* the app scroller (document flow on ≤760) doesn't rubber-band-chain into the URL bar or pull-to-refresh */ body.app-mode{overscroll-behavior-y:contain} /* the fixed dock never gets selected/long-press-magnified while thumbing through the app */ .journey-dock,.dock-tab{-webkit-touch-callout:none;user-select:none} /* iOS zooms the whole page when you focus an input under 16px — force 16px on mobile form fields so tapping a search/field never yanks the layout (checkboxes/radios excluded — sized separately above). */ @media(max-width:760px){ input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px} } .masthead{ display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:26px 0 16px;border-bottom:1px solid var(--line);margin-bottom:34px; } .wordmark{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:19px;letter-spacing:-.01em;color:var(--ink);text-decoration:none} /* Q213 — the wordmark is an to home; pin EVERY link state to the ink brand color with no underline, so it never falls back to the UA purple/underlined visited-link look on any page. */ a.wordmark,a.wordmark:link,a.wordmark:visited,a.wordmark:hover,a.wordmark:focus,a.wordmark:active{color:var(--ink);text-decoration:none} .org{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500} .logo{display:block;height:30px;width:auto} /* Wordmark lockup container — the chosen logo mark drops in beside/above it */ .brandmark{display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px;text-decoration:none;color:var(--ink)} .brandmark .wordmark{line-height:1} .brandmark.inline{flex-direction:row;align-items:center;gap:11px} /* ---------------------------------------------------------------------------- 2 · THE SPARK — our connective mark (queer + civic, reused everywhere) An asterisk: the mark of annotation and expansiveness. It's the footnote of democracy (the hyper-local office everyone overlooks — "*this matters") and the "*" of trans* / LGBTQ+ that means "and everyone." In the lockup it connects the verb to the office — Queering * ANCs — and it recurs as bullets, dividers, the seal's heart, badge marks, and the level-up burst. Sized by font-size, colored by `color`. Monochrome by default; the pride variant carries six rainbow spokes for hero + celebratory moments only. ---------------------------------------------------------------------------- */ .spark{position:relative;display:inline-block;width:1em;height:1em;flex:none;color:var(--accent);vertical-align:-0.13em; background:linear-gradient(currentColor,currentColor) center/15% 100% no-repeat} .spark::before,.spark::after{content:"";position:absolute;inset:0;background:linear-gradient(currentColor,currentColor) center/15% 100% no-repeat} .spark::before{transform:rotate(60deg)} .spark::after{transform:rotate(120deg)} .spark--ink{color:var(--ink)} .spark--pink{color:var(--pink)} .spark--paper{color:var(--paper)} /* pride spark — six rainbow spokes, for the logo / seal / celebration only */ .spark--pride{background:linear-gradient(180deg,var(--pride-1) 0 50%,var(--pride-4) 50% 100%) center/15% 100% no-repeat} .spark--pride::before{background:linear-gradient(180deg,var(--pride-2) 0 50%,var(--pride-5) 50% 100%) center/15% 100% no-repeat} .spark--pride::after{background:linear-gradient(180deg,var(--pride-3) 0 50%,var(--pride-6) 50% 100%) center/15% 100% no-repeat} /* spark divider — connective tissue between sections */ .sparkrule{display:flex;align-items:center;gap:15px;color:var(--line)} .sparkrule::before,.sparkrule::after{content:"";flex:1;height:1px;background:currentColor} .sparkrule .spark{font-size:17px;color:var(--accent)} /* spark bullet list */ .sparklist{list-style:none;margin:14px 0 0;padding:0} .sparklist li{display:flex;gap:11px;align-items:baseline;padding:8px 0;color:var(--ink-2);font-size:16px} .sparklist li .spark{font-size:14px;color:var(--accent)} @keyframes sparkburst{0%{transform:scale(.3) rotate(-45deg);opacity:0}55%{transform:scale(1.3) rotate(15deg);opacity:1}100%{transform:scale(1) rotate(0)}} .stagebadge.is-levelup .spark{animation:sparkburst .6s var(--ease-spring)} /* ---------------------------------------------------------------------------- Design System v1.3 — shared micro-components (Q579) §22 states (empty · loading · saved · celebration) · §23 onboarding head · §24 switch. Canonical, reusable, on-token. Every animation is collapsed by the global prefers-reduced-motion rule further down — the celebration then falls back to a STATIC spark (the state change itself is the feedback), and the saved beat just appears. Nothing here uses raw hex; the switch mirrors the shipped §24 spec. ---------------------------------------------------------------------------- */ @keyframes sparkPop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}} /* §22 — Empty = the invitation: a warm sentence + the single starting action (never a scary $0). */ .state-empty{display:flex;flex-direction:column;gap:10px;align-items:flex-start;color:var(--muted);font-size:15px} /* §22 — Loading/sync = a quiet status whisper (pair with aria-live="polite" in markup). */ .state-loading{color:var(--muted);font-size:14px} /* §22 — Saved = a green check disc + one sentence (sparkPop on entry). */ .state-saved{display:inline-flex;align-items:center;gap:9px;color:var(--ok);font-weight:600;font-size:14px} .state-saved__disc{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--ok-soft);flex:none} .state-saved__disc svg{width:13px;height:13px;stroke:var(--ok);fill:none;stroke-width:2.6} @media (prefers-reduced-motion:no-preference){.state-saved{animation:sparkPop .45s var(--ease-spring)}} /* §22 — Celebration = a pride spark burst + a human line; reduced-motion → a STATIC spark. */ .state-celebration{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center} .state-celebration .spark{font-size:34px} .state-celebration__line{font-weight:700;color:var(--ink)} @media (prefers-reduced-motion:no-preference){.state-celebration .spark{animation:sparkburst .6s var(--ease-spring)}} /* §23 — Onboarding head = a pride spark on white (onboarding IS a pride-on-white moment, rule 5). */ .onboard-spark{font-size:30px} /* §24 — Switch = 40×24 pill, 2px ink border; off --line-strong, on --accent; 16px white knob. */ .switch{flex:0 0 auto;width:40px;height:24px;border-radius:var(--r-pill);border:2px solid var(--ink);background:var(--line-strong);position:relative;cursor:pointer;padding:0;transition:background .15s} /* Q606 — expand the switch tap target to ≥44px (WCAG 2.5.5) without changing the 40×24 visual: a transparent centered overlay catches the tap around the small pill. */ .switch::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px} .switch[aria-checked="true"]{background:var(--accent)} .switch__knob{position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:transform .15s} .switch[aria-checked="true"] .switch__knob{transform:translateX(16px)} .switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* ---------------------------------------------------------------------------- 3 · TYPE ---------------------------------------------------------------------------- */ .eyebrow{ font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase; color:var(--muted);font-weight:var(--fw-semibold);margin:0 0 14px; } .eyebrow.accent{color:var(--accent)} .eyebrow.pink{color:var(--secondary-strong)} /* Q61 — the daily quote (three quiet placements). Tokens only; no animation (reduced-motion safe). */ .daily-quote{margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--seat-line,#D9D5CC)} .daily-quote .dq-frame{margin:0 0 8px} .daily-quote .dq-q{margin:0;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-d3,1.25rem);line-height:1.3;color:var(--ink);border:0;padding:0;quotes:none} .daily-quote .dq-cite{margin:10px 0 0;font-size:13px;color:var(--muted);font-style:normal} .daily-quote .dq-cite cite{font-style:normal} .daily-quote .dq-src{margin-left:6px;white-space:nowrap} .daily-quote .dq-attr{margin-left:6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);opacity:.85} h1.display{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-d1);line-height:var(--lh-d1);letter-spacing:var(--ls-d1);margin:0 0 18px} h2.display{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-d2);line-height:var(--lh-d2);letter-spacing:var(--ls-d2);margin:0 0 12px} h3.display{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-d3);line-height:var(--lh-d3);letter-spacing:var(--ls-d3);margin:0 0 10px} .display .mark{background:linear-gradient(180deg,transparent 58%,var(--highlight) 58% 92%,transparent 92%);padding:0 .04em} .sub{font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--ink-2);max-width:48ch;margin:0 0 22px} .body{font-size:var(--fs-body);color:var(--muted);max-width:52ch;margin:0 0 30px} .body b{color:var(--ink-2);font-weight:var(--fw-semibold)} a.link{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-soft);padding-bottom:1px;font-weight:500;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)} a.link:hover{border-bottom-color:var(--accent)} a.link:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-bottom-color:transparent} /* Q463 in-content quiz front-door CTA — a calm, spaced nudge line (the anchor carries a.link styling) */ .quiz-nudge{margin:var(--space-4) 0;font-weight:500} /* Placeholder for imagery you'll drop in later (striped, with a monospace note) */ .ph{ background:repeating-linear-gradient(45deg,var(--surface-sunken) 0 11px,var(--surface-2) 11px 22px); border:1.5px dashed var(--line-strong);border-radius:var(--r); display:grid;place-items:center;text-align:center; color:var(--muted);font-family:var(--font-num);font-size:12px;letter-spacing:.03em; min-height:180px;padding:18px; } /* ---------------------------------------------------------------------------- 4 · STEPLINE (top-of-quiz progress) ---------------------------------------------------------------------------- */ .stepline{display:flex;align-items:center;gap:14px;margin-bottom:30px;color:var(--muted)} .stepline .n{font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.04em;white-space:nowrap} .stepline .track{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:var(--r-pill)} .stepline .track i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);transition:width var(--dur) var(--ease)} /* ---------------------------------------------------------------------------- 5 · FORMS ---------------------------------------------------------------------------- */ fieldset{border:0;margin:0;padding:0} legend{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-d3);line-height:var(--lh-d3);letter-spacing:var(--ls-d3);padding:0;margin-bottom:8px} .qhelp{font-size:14.5px;color:var(--muted);margin:0 0 22px;max-width:50ch} .field{display:block;margin:20px 0 0} .field .flabel{font-size:13px;font-weight:var(--fw-semibold);color:var(--ink-2);margin-bottom:7px;letter-spacing:.01em} .field .fhelp{font-size:12.5px;color:var(--muted);margin-top:6px} input[type=text],input[type=email],input[type=search],input[type=tel],input[type=url],input[type=number],input[type=date],select,textarea{ width:100%;font:inherit;font-size:16px;padding:12px 13px; background:var(--surface);color:var(--ink); border:1px solid var(--line-strong);border-radius:var(--r-sm); transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease); } textarea{min-height:108px;resize:vertical;line-height:1.5} input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--ink-2)} input[type=text]:focus,input[type=email]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=url]:focus,select:focus,textarea:focus{ outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent); } input::placeholder,textarea::placeholder{color:var(--muted)} input:disabled,select:disabled,textarea:disabled{background:var(--surface-sunken);color:var(--muted);cursor:not-allowed;border-style:dashed} [aria-invalid="true"],input.invalid,select.invalid{border-color:var(--bad)!important} [aria-invalid="true"]:focus,input.invalid:focus{box-shadow:0 0 0 3px var(--bad-soft)!important} select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 18px) 51%,calc(100% - 13px) 51%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px} /* ---------------------------------------------------------------------------- 6 · BUTTONS (hard "stamp" shadow is the signature. Full state matrix.) ---------------------------------------------------------------------------- */ .btn,.btn-outline{ font:inherit;font-size:15px;font-weight:var(--fw-semibold);letter-spacing:.01em;cursor:pointer; border:2px solid var(--ink);padding:12px 22px;border-radius:var(--r-sm);text-decoration:none; display:inline-flex;align-items:center;justify-content:center;gap:9px; box-shadow:0 0 0 transparent; transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease); } .btn{background:var(--accent);color:var(--on-accent)} .btn-outline{background:var(--surface);color:var(--ink)} .btn:hover,.btn-outline:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-pop)} .btn:active,.btn-outline:active{transform:translate(0,0);box-shadow:var(--shadow-pop-sm)} .btn:focus-visible,.btn-outline:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .btn:disabled,.btn-outline:disabled,.btn[aria-disabled="true"],.btn-outline[aria-disabled="true"]{opacity:.32;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none} /* Q177 — base size + stroke for the .arr glyph so it's NEVER unbounded. Without this, an .arr used outside .btn/.hub-tile (e.g. the "Canvassing safety tips" .link) had no width/height and defaulted to a giant black fill. Container rules (.btn .arr, .hub-tile .arr) override the size where they need to. */ .arr{width:1em;height:1em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;vertical-align:-.125em} .btn .arr,.btn-outline .arr{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform var(--dur-fast) var(--ease)} .btn:hover .arr,.btn-outline:hover .arr{transform:translateX(3px)} /* Variants (additive — markup opts in; primary/.btn behavior unchanged) */ .btn.secondary{background:var(--secondary-strong);color:#fff} .btn.dark{background:var(--ink);color:var(--on-dark)} .btn-outline.accent{color:var(--accent);border-color:var(--accent)} .btn-outline.accent:hover{box-shadow:var(--shadow-pop-accent)} .btn.block,.btn-outline.block{width:100%} .btn.sm,.btn-outline.sm{padding:8px 15px;font-size:13.5px} .btn.lg,.btn-outline.lg{padding:15px 28px;font-size:16.5px} /* ============================================================================ Broad-daylight reskin — MARKETING buttons (body.mktg only). Pills, --r-pill, ≥52px, Inter 600. No print-stamp: elevation is quiet blur. The app keeps the stamp buttons above (this scope never touches portal/tool/admin surfaces). ========================================================================== */ body.mktg .btn,body.mktg .btn-outline{ border-radius:var(--r-pill);border-width:1px;min-height:52px;padding:0 26px; font-weight:var(--fw-semibold);box-shadow:none; transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease); } body.mktg .btn{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} body.mktg .btn:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent);transform:none;box-shadow:none} body.mktg .btn:active{transform:none;box-shadow:none} body.mktg .btn-outline{background:var(--surface);color:var(--ink);border-color:var(--line-strong)} body.mktg .btn-outline:hover{background:var(--surface);color:var(--ink);border-color:var(--muted);transform:none;box-shadow:none} body.mktg .btn-outline:active{transform:none;box-shadow:none} body.mktg .btn-outline.accent{color:var(--accent);border-color:var(--accent)} body.mktg .btn-outline.accent:hover{border-color:var(--accent-strong);box-shadow:none} body.mktg .btn.sm,body.mktg .btn-outline.sm{min-height:44px;padding:0 18px;font-size:13.5px} body.mktg .btn.lg,body.mktg .btn-outline.lg{min-height:54px;padding:0 30px;font-size:16px} /* On the cobalt punch band: a white pill with --accent text (reskin §3). */ body.mktg .punch .punch-btn{background:var(--surface);color:var(--accent);border-color:var(--surface)} body.mktg .punch .punch-btn:hover{background:var(--surface);color:var(--accent-strong);border-color:var(--surface);box-shadow:none} /* On the deep-pink band: a ghost pill, 1.5px white border. */ body.mktg .punch--host .punch-btn{background:transparent;color:var(--on-secondary);border:1.5px solid rgba(255,255,255,.9)} body.mktg .punch--host .punch-btn:hover{background:rgba(255,255,255,.1);color:var(--on-secondary);border-color:#fff;box-shadow:none} /* Quiet text button */ .btn-quiet{background:none;border:none;color:var(--muted);font:inherit;font-size:15px;font-weight:500;cursor:pointer;padding:8px 2px;border-radius:var(--r-xs);transition:color var(--dur-fast) var(--ease)} .btn-quiet:hover{color:var(--ink)} .btn-quiet:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .btn-quiet:disabled{opacity:.35;cursor:not-allowed} /* ---------------------------------------------------------------------------- 7 · QUIZ CONTROLS ---------------------------------------------------------------------------- */ /* Multi/single option rows */ .opts{margin:0} .opt{display:flex;align-items:center;gap:14px;padding:15px 4px;cursor:pointer;border-top:1px solid var(--line);transition:padding-left var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)} .opt:last-of-type{border-bottom:1px solid var(--line)} .opt:hover{padding-left:8px;background:var(--surface-2)} .opt input{position:absolute;opacity:0;width:0;height:0} .opt .mark{width:16px;height:16px;flex:none;border:1.5px solid var(--line-strong);border-radius:3px;display:grid;place-items:center;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)} .opt .mark:after{content:"";width:8px;height:8px;border-radius:1px;background:var(--accent);transform:scale(0);transition:transform var(--dur-fast) var(--ease-spring)} .opt input:checked ~ .mark{border-color:var(--accent)} .opt input:checked ~ .mark:after{transform:scale(1)} .opt .lab{font-size:16.5px;color:var(--ink-2)} .opt input:checked ~ .lab{color:var(--ink);font-weight:500} .opt:has(input:checked){box-shadow:inset 3px 0 0 var(--accent);background:var(--accent-soft)} .opt input:focus-visible ~ .mark{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .opt input:disabled ~ .lab{color:var(--muted)} .opt:has(input:disabled){cursor:not-allowed;background:none;box-shadow:none} /* Radio rendering: round mark */ .opt.radio .mark{border-radius:50%} .opt.radio .mark:after{border-radius:50%} /* 1–5 scale (Likert) */ .scale{display:flex;gap:8px;margin:18px 0 10px} .scale .pip{flex:1} .scale .pip input{position:absolute;opacity:0;width:0;height:0} .scale .pip .face{display:flex;align-items:center;justify-content:center;height:46px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);font-weight:var(--fw-semibold);color:var(--ink-2);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)} .scale .pip .face:hover{border-color:var(--accent);color:var(--accent)} .scale .pip input:checked ~ .face{border-color:var(--accent);background:var(--accent);color:var(--on-accent)} .scale .pip input:checked ~ .face{transform:translateY(-2px)} .scale .pip input:focus-visible ~ .face{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .scale-ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)} /* "Well" — compact mini-scale matrix rows */ .well{margin:14px 0 0} .well-row{padding:16px 0;border-top:1px solid var(--line)} .well-row:last-child{border-bottom:1px solid var(--line)} .well-q{font-size:15.5px;color:var(--ink);margin:0 0 10px;font-weight:500} .well-opts{display:flex;gap:8px} .well-opts label{flex:1} .well-opts input{position:absolute;opacity:0;width:0;height:0} .well-opts .face{display:block;text-align:center;padding:9px 6px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);font-size:13.5px;color:var(--ink-2);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)} .well-opts .face:hover{border-color:var(--accent);color:var(--accent)} .well-opts input:checked ~ .face{border-color:var(--accent);color:var(--accent);font-weight:var(--fw-semibold);background:var(--accent-soft)} .well-opts input:focus-visible ~ .face{outline:var(--focus-ring);outline-offset:var(--focus-offset)} /* Rank / reorder list */ .rank{list-style:none;margin:18px 0 0;padding:0} .rank li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);transition:background var(--dur-fast) var(--ease)} .rank li:last-child{border-bottom:1px solid var(--line)} .rank li:hover{background:var(--surface-2)} .rank .rnk{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:17px;color:var(--accent);min-width:22px;font-variant-numeric:tabular-nums} .rank .rlab{flex:1;font-size:16px;color:var(--ink)} .rank .mv{border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink-2);width:30px;height:30px;border-radius:var(--r-sm);cursor:pointer;display:grid;place-items:center;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)} .rank .mv:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} .rank .mv:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .rank .mv:disabled{opacity:.3;cursor:not-allowed} .rank .mv svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2} /* SMD finder (look up your district) */ .smd-find{display:flex;gap:10px;align-items:flex-end;margin:20px 0 0;flex-wrap:wrap} .smd-find .field{flex:1;min-width:200px;margin:0} .smd-out{margin:14px 0 0;font-size:15px;line-height:1.5} .smd-out.ok{padding-left:14px;border-left:2px solid var(--accent);color:var(--ink-2)} .smd-out.warn{padding-left:14px;border-left:2px solid var(--line-strong);color:var(--muted)} .smd-out b{color:var(--ink);font-weight:var(--fw-semibold)} /* Q440 — inline field error (host finder etc.): token-only, no ad-hoc inline hex. */ .field-err{color:var(--secondary-strong);font-size:13px;margin:2px 0 0} .field-err.resolving{color:var(--ink-2)} /* Q478 — the host kit's day-of detail is collapsed into canonical chevron-disclosures (details.disclosure); this is just the lead-in line that introduces that stack, keeping the page lean under the top actions. */ .host-more-lead{margin:28px 0 8px;font-weight:var(--fw-semibold);color:var(--ink-2)} /* Platform builder (numbered planks) */ .platform{list-style:none;margin:14px 0 0;padding:0;counter-reset:plat} .platform li{display:flex;gap:14px;padding:11px 0;border-top:1px solid var(--line);align-items:baseline} .platform li:before{counter-increment:plat;content:counter(plat);font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--accent);min-width:18px;font-variant-numeric:tabular-nums} .platform .ptxt{color:var(--ink-2);font-size:16px} /* Care / human-voice note (trans-blue keyline = the "we've got you" voice) */ .care{font-size:15px;color:var(--ink-2);line-height:1.55;margin:0 0 10px;padding-left:14px;border-left:2px solid var(--trans-blue);max-width:54ch} /* Multi-select hint + confirm */ .multihint{font-size:13px;color:var(--muted);margin:0 0 14px} /* A10: optional free-text under a multi-select ("Something else") */ .ft-field{display:block;margin:16px 0 0} .ft-label{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin:0 0 6px} .ft-field textarea{width:100%;font:inherit;font-size:16px;padding:11px 13px;border:2px solid var(--seat-line,#D9D5CC);border-radius:9px;background:#fff;resize:vertical} .ft-field textarea:focus{border-color:var(--ink);outline:2px solid var(--accent);outline-offset:1px} /* A2: inline text button (Change location) */ button.linkbtn{background:none;border:0;padding:0;color:var(--accent);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer} button.linkbtn:hover{color:var(--ink)} .confirm{margin-top:18px;padding-left:16px;border-left:2px solid var(--accent)} /* ---------------------------------------------------------------------------- 8 · ACTIONS BAR ---------------------------------------------------------------------------- */ .actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:34px} /* Q212 — the quiz's primary Start CTA, pulled ABOVE THE FOLD: sits right under the intro sub (not 34px down) and left-aligns as the clear primary action; the ANC facts + eligibility note follow below it. */ .actions.intro-cta{margin-top:14px;margin-bottom:26px;justify-content:flex-start} .actions .grow{display:flex;gap:12px;flex-wrap:wrap} /* ---------------------------------------------------------------------------- 9 · RESULTS ---------------------------------------------------------------------------- */ .result-head{margin-bottom:34px} .lead{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:52ch;margin:0} .flag{font-size:14.5px;color:var(--muted);margin:14px 0 0;padding-left:14px;border-left:2px solid var(--line-strong);max-width:52ch} .section{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)} .section > .eyebrow{margin-bottom:18px} .score{display:flex;align-items:flex-end;gap:16px;margin-bottom:14px} .score .num{font-family:var(--font-display);font-weight:var(--fw-display);font-size:64px;line-height:.86;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--accent)} .score .den{font-size:15px;color:var(--muted);padding-bottom:7px} .bar{height:3px;background:var(--line);position:relative;overflow:hidden;margin:2px 0 12px;border-radius:var(--r-pill)} .bar i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);transition:width var(--dur-slow) var(--ease)} .bar.tall{height:6px} .bar.spectrum-fill i{background:linear-gradient(90deg,var(--spectrum-1),var(--spectrum-4))} /* Q275 — optional "how this was scored" breakdown on the quiz result */ .score-how{margin:16px 0 0;border:2px solid var(--line);border-radius:var(--r-lg);background:var(--surface-sunken);padding:0 16px} .score-how>summary{cursor:pointer;padding:12px 0;font-weight:var(--fw-semibold);font-size:14px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px} .score-how>summary::-webkit-details-marker{display:none} .score-how>summary::after{content:"+";color:var(--muted);font-weight:var(--fw-semibold)} .score-how[open]>summary::after{content:"\2013"} .score-how-intro{font-size:14px;color:var(--ink-2);margin:0 0 12px} .score-how-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:11px} .shrow{display:grid;grid-template-columns:minmax(110px,1.1fr) 2fr auto;align-items:center;gap:12px;font-size:14px} .shk{color:var(--ink-2)} .shbar{height:6px;background:var(--line);border-radius:var(--r-pill);position:relative;overflow:hidden} .shbar i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:var(--r-pill)} .shv{font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap} .shv b{color:var(--ink)} @media(max-width:560px){.shrow{grid-template-columns:1fr auto}.shbar{display:none}} .pairs{display:grid;grid-template-columns:1fr 1fr;gap:30px 36px} .pair .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:var(--fw-semibold);margin-bottom:8px} .pair .v{font-size:16px;color:var(--ink-2);line-height:1.5} .count{display:flex;gap:22px;margin:2px 0 4px} .count .u b{font-family:var(--font-display);font-weight:var(--fw-display);font-size:32px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .count .u span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px;display:block} .dates{list-style:none;margin:0;padding:0} .dates li{display:flex;gap:16px;padding:9px 0;border-top:1px solid var(--line);font-size:15px} .dates .d{font-variant-numeric:tabular-nums;color:var(--muted);min-width:118px} .dates li.key .ev{color:var(--ink);font-weight:var(--fw-semibold)} .dates li.key{box-shadow:inset 3px 0 0 var(--accent);padding-left:12px;margin-left:-12px} /* Q241 — "here's your team" accompaniment beat at the result screen */ .teamlist{list-style:none;margin:0;padding:0} .teamlist li{position:relative;padding:9px 0 9px 30px;border-top:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--ink-2)} .teamlist li::before{content:"";position:absolute;left:4px;top:15px;width:11px;height:7px;border-left:3px solid var(--accent);border-bottom:3px solid var(--accent);transform:rotate(-45deg)} .cta-form{margin-top:14px;max-width:420px} .nextsteps{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 6px} .nextsteps a{justify-content:center;text-align:center} /* ---------------------------------------------------------------------------- 10 · STATUS PILLS / TAGS (module status, approval state — text + soft bg + matching ink, all AA) ---------------------------------------------------------------------------- */ .pill{ display:inline-flex;align-items:center;gap:6px; font-size:12px;font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;line-height:1; padding:5px 10px;border-radius:var(--r-pill);border:1.5px solid;white-space:nowrap; } /* No leading dot by design — a clean tag, not an "AI pill". */ .pill.is-done{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-border)} .pill.is-progress{color:var(--accent-strong);background:var(--accent-soft);border-color:var(--info-border)} .pill.is-locked{color:var(--muted);background:var(--surface-sunken);border-color:var(--line-strong)} .pill.is-new{color:var(--secondary-strong);background:var(--secondary-soft);border-color:var(--secondary-border)} .pill.is-review{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-border)} .pill.is-approved{color:var(--on-accent);background:var(--accent);border-color:var(--ink)} /* ---------------------------------------------------------------------------- 11 · CALLOUTS / ALERTS ---------------------------------------------------------------------------- */ .callout{position:relative;padding:16px 18px;border:1.5px solid var(--border);border-radius:var(--r);background:var(--surface);margin:18px 0} .callout__title{font-weight:var(--fw-semibold);color:var(--ink);margin:0 0 4px;font-size:15px} .callout p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55} .callout p + p{margin-top:8px} .callout--info{background:var(--info-soft);border-color:var(--info-border);box-shadow:inset 3px 0 0 var(--accent)} .callout--ok{background:var(--ok-soft);border-color:var(--ok-border);box-shadow:inset 3px 0 0 var(--ok)} .callout--warn{background:var(--warn-soft);border-color:var(--warn-border);box-shadow:inset 3px 0 0 var(--warn)} .callout--bad{background:var(--bad-soft);border-color:var(--bad-border);box-shadow:inset 3px 0 0 var(--bad)} /* Pride callout: the bold human-voice moment — a confident dark statement card */ .callout--pride{background:var(--surface-ink);border-color:var(--ink);color:var(--on-dark)} .callout--pride .callout__title{color:#fff} .callout--pride p{color:var(--on-dark-muted)} .callout--pride .stars{margin-bottom:14px} /* ---------------------------------------------------------------------------- 12 · IN-MODULE FEEDBACK BOX (right / wrong answer reveal) ---------------------------------------------------------------------------- */ .feedback{border-radius:var(--r);padding:16px 18px;margin:16px 0;border:1.5px solid var(--border);background:var(--surface)} .feedback__label{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:var(--fw-bold);margin-bottom:6px} .feedback__label .ic{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff} .feedback__label .ic svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4} .feedback p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.55} .feedback--correct{background:var(--ok-soft);border-color:var(--ok-border);box-shadow:inset 3px 0 0 var(--ok)} .feedback--correct .feedback__label{color:var(--ok)} .feedback--correct .ic{background:var(--ok)} .feedback--incorrect{background:var(--bad-soft);border-color:var(--bad-border);box-shadow:inset 3px 0 0 var(--bad)} .feedback--incorrect .feedback__label{color:var(--bad)} .feedback--incorrect .ic{background:var(--bad)} /* ---------------------------------------------------------------------------- 13 · LEARNING PORTAL — module grid + cards + progress ring + nav ---------------------------------------------------------------------------- */ .navlinks{display:flex;align-items:center;gap:8px;flex-wrap:nowrap} /* Q119 — desktop: ONE line, never wrap the ES toggle (the commissioner bug); the 760px block re-wraps for mobile */ .navlinks a{font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;padding:7px 11px;border-radius:var(--r-sm);white-space:nowrap;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)} .navlinks a:hover{background:var(--surface-2);color:var(--ink)} .navlinks a[aria-current],.navlinks a.active{color:var(--accent);background:var(--accent-soft)} .navlinks a:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} /* Q119 — SHARED HEADER discipline (HOMEPAGE_NOMINATE_FIXES §6). Two variants only: public + portal. The canonical public header keeps its nav on ONE line on desktop — the ES toggle never wraps (the "For Sitting Commissioners" bug) — and collapses to a clean full-width row on mobile. */ .site-header{align-items:center} .site-header .wordmark{white-space:nowrap} .site-nav{display:flex;align-items:center;gap:8px;flex-wrap:nowrap} /* Q817 — FIXPACK FIX 1: the ONE-HEADER-ROW law for every app tool screen below a tab root. A 44×44 borderless ‹ back + the screen title (Bricolage 19px, ink) on the SAME line, vertically centered; an optional muted 13px meta line under it for list context ("Stevie's Voters · SMD 2G04") — never a link, never above the title. Replaces lone-chevron rows + breadcrumb trails app-wide. Tokens only. */ .app-hdr{display:flex;align-items:center;gap:var(--space-1);margin:0 0 var(--space-2)} .app-hdr__back{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-10px;font-size:28px;line-height:1;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer} .app-hdr__back:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r)} .app-hdr__t{margin:0;font-family:var(--font-display);font-weight:700;font-size:var(--fs-d4);line-height:var(--lh-d4);color:var(--ink)} .app-hdr__meta{margin:2px 0 var(--space-4);font-size:var(--fs-caption);color:var(--muted)} .app-hdr + .app-hdr__meta{margin-top:0} /* Canvass "Nearest to me" (opt-in geolocation) — the you-are-here map dot. Styled here (not inline in canvass.js) so the marker colour stays a token, never a standalone brand hex. */ .cv-you{stroke:var(--accent,#2238FF);fill:var(--accent,#2238FF)} /* Q824 — the "Add to Home Screen" install nudge (pwa-install.js). Dismissible; floats above the mobile dock when one is present. Marketing-safe elevation (--shadow-soft-lg, not the app-only print-stamp). */ .pwa-nudge{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:70;max-width:520px;margin:0 auto;display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-soft-lg);padding:12px 14px;font-size:14px;line-height:1.35;color:var(--ink)} .pwa-nudge--dock{bottom:calc(84px + env(safe-area-inset-bottom))} .pwa-nudge__spark{flex:0 0 auto;width:22px;height:22px;font-size:22px} .pwa-nudge__body{flex:1;min-width:0} .pwa-nudge__go{flex:0 0 auto} .pwa-nudge__x{flex:0 0 auto;width:32px;height:32px;background:none;border:0;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center} .pwa-nudge__x:hover{color:var(--ink)} .pwa-nudge__x:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-radius:var(--r-sm)} /* Q600 — the mobile nav-toggle (hamburger). Hidden on desktop (links sit inline); revealed ≤560 (below). */ /* Q815 — a tighter, rounder toggle: 40×40 (was an oversized 44 boxy square that dwarfed the wordmark), radius --r to match the button language, a firmer --line-strong edge (the --line ghost border read as unintentional), 24px glyph. */ .nav-toggle{display:none;position:relative;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;background:none;border:1.5px solid var(--line-strong);border-radius:var(--r);color:var(--ink-2);cursor:pointer} /* Q815 — the 40px visual keeps a ≥44px tap target via a transparent centered overlay (WCAG 2.5.5), the same pattern the canonical .switch uses (test-a11y-harden-q606) — smaller box, no loss of hit area. */ .nav-toggle::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px} .nav-toggle:hover{background:var(--surface-2);color:var(--ink)} .nav-toggle:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .nav-toggle svg{width:24px;height:24px} .site-nav-link{font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;padding:9px 11px;border-radius:var(--r-sm);white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)} .site-nav-link:hover{background:var(--surface-2);color:var(--ink)} .site-nav-link[aria-current]{color:var(--accent);background:var(--accent-soft)} /* Q206 — the Support link is the pink pill in the shared header too (matches the homepage's .support-pill), so the exact same nav renders on every page. Mirrors landing.css's .lnav-links a.support-pill. */ .site-nav .support-pill{padding:7px 15px;border-radius:var(--r-pill);background:var(--secondary-soft);color:var(--secondary-strong);font-size:14px;font-weight:600;border:1.5px solid transparent} .site-nav .support-pill:hover{background:var(--secondary-hover);color:var(--secondary-strong);border-color:var(--secondary-strong)} .site-nav .support-pill:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .site-nav-link:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .site-nav .site-nav-cta{white-space:nowrap} .site-nav .langtoggle{flex:none;min-height:44px} /* ============================================================================ Broad-daylight reskin — the PUBLIC marketing header only (data-nav="public"). 76px, white, 1px --line bottom; nav links --ink-2 500 → --ink; the CTA is a primary cobalt pill and Donate/outline controls are hairline pills (≥44px in nav). Scoped so the portal/tool app chrome is untouched. ========================================================================== */ .site-header[data-nav="public"]{ min-height:76px;margin-bottom:0; position:sticky;top:0;z-index:20;box-sizing:border-box; } /* Full-bleed white banner + hairline: the header sits inside the page column (.wrap/.lwrap max-width), so its own background is capped. This pseudo paints the surface + bottom hairline across the FULL viewport (100vw, centered) behind the nav, while the nav content stays aligned to the column. */ .site-header[data-nav="public"]::before{ content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw; background:var(--surface);border-bottom:1px solid var(--line);z-index:-1; } .site-header[data-nav="public"] .site-nav-link{color:var(--ink-2);font-weight:500;border-radius:var(--r-pill)} .site-header[data-nav="public"] .site-nav-link:hover{background:transparent;color:var(--ink)} /* the primary nav CTA (Campaign Copilot) — cobalt pill, ≥44px */ .site-header[data-nav="public"] .site-nav-cta{ height:44px;padding:0 22px;display:inline-flex;align-items:center; background:var(--accent);color:var(--on-accent);border:0; border-radius:var(--r-pill);font-weight:600;font-size:14.5px;text-decoration:none; box-shadow:none;transition:background var(--dur-fast) var(--ease); } .site-header[data-nav="public"] .site-nav-cta:hover{background:var(--accent-strong);color:var(--on-accent);box-shadow:none} .site-header[data-nav="public"] .site-nav-cta:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} /* Donate — outline hairline pill (was the pink support-pill), calm on white */ .site-header[data-nav="public"] .support-pill{ height:44px;padding:0 20px;display:inline-flex;align-items:center; background:var(--surface);color:var(--ink);border:1px solid var(--line-strong); border-radius:var(--r-pill);font-weight:600;font-size:14.5px; transition:border-color var(--dur-fast) var(--ease); } .site-header[data-nav="public"] .support-pill:hover{background:var(--surface);color:var(--ink);border-color:var(--muted)} .site-header[data-nav="public"] .langtoggle{border-radius:var(--r-pill)} .modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;margin:22px 0} .module-card{ position:relative;display:flex;flex-direction:column;gap:12px; background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg); padding:22px;text-decoration:none;color:inherit;box-shadow:var(--shadow-soft); transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease); } a.module-card:hover,button.module-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft-lg);border-color:var(--ink)} .module-card:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .module-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px} .module-card__n{font-family:var(--font-num);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums} .module-card__title{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:20px;letter-spacing:-.015em;line-height:1.15;margin:0;color:var(--ink)} .module-card__desc{font-size:14.5px;color:var(--muted);margin:0;line-height:1.5} .module-card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line)} .module-card__foot .meta{font-size:12.5px;color:var(--muted)} .module-card.is-done{border-color:var(--ok-border)} .module-card.is-active{border-color:var(--ink);box-shadow:var(--shadow-pop)} .module-card.is-locked{opacity:.62;box-shadow:none;cursor:not-allowed} .module-card.is-locked:hover{transform:none;box-shadow:none;border-color:var(--border)} /* Donut progress ring — set --p (0–100) inline:
*/ .ring{ --p:0;--size:46px; width:var(--size);height:var(--size);flex:none;border-radius:50%;position:relative; display:grid;place-items:center;font-family:var(--font-num);font-size:12px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums; background: radial-gradient(closest-side,var(--surface) 0 70%,transparent 71% 100%), conic-gradient(var(--accent) calc(var(--p)*1%),var(--surface-sunken) 0); } .ring.is-done{background:radial-gradient(closest-side,var(--surface) 0 70%,transparent 71% 100%),conic-gradient(var(--ok) 100%,var(--ok) 0)} .ring.lg{--size:64px;font-size:13px} /* ---------------------------------------------------------------------------- 14 · ACHIEVEMENT BADGE (downloadable completion coin) Self-contained block — renders standalone for export/print. ---------------------------------------------------------------------------- */ .badge{ position:relative;width:212px;height:212px;border-radius:50%; background:var(--surface);border:2px solid var(--ink);box-shadow:var(--shadow-pop); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px; text-align:center;padding:30px 26px;overflow:hidden; } /* discrete spectrum ring band inside the coin */ .badge::before{ content:"";position:absolute;inset:9px;border-radius:50%;z-index:0; background:conic-gradient( var(--spectrum-1) 0 20%,var(--spectrum-2) 20% 40%,var(--spectrum-3) 40% 60%, var(--spectrum-4) 60% 80%,var(--spectrum-5) 80% 100%); -webkit-mask:radial-gradient(closest-side,transparent 0 85%,#000 86%); mask:radial-gradient(closest-side,transparent 0 85%,#000 86%); } .badge > *{position:relative;z-index:1} /* Q107 BRAND SAFETY — the compact mark holds the pride SPARK, never the "QA" 2-letter monogram (too close to "QAnon") */ .badge .monogram{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--on-dark);display:grid;place-items:center} .badge .b-kicker{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:var(--fw-bold)} .badge .b-title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:21px;line-height:1.04;letter-spacing:-.02em;color:var(--ink);max-width:9ch} .badge .b-status{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:var(--fw-bold);color:var(--ok)} .badge.locked{filter:grayscale(1);opacity:.5} .badge.lg{width:264px;height:264px} /* ---------------------------------------------------------------------------- 15 · APPROVED SEAL (official stamp — used on certificate / approvals) ---------------------------------------------------------------------------- */ .seal{ position:relative;width:150px;height:150px;border-radius:50%;border:2px solid var(--ink); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center; box-shadow:var(--shadow-pop-sm); background: radial-gradient(closest-side,var(--surface) 0 78%,transparent 79% 100%), conic-gradient( var(--spectrum-1) 0 20%,var(--spectrum-2) 20% 40%,var(--spectrum-3) 40% 60%, var(--spectrum-4) 60% 80%,var(--spectrum-5) 80% 100%); } .seal::before{content:"";position:absolute;inset:15px;border:1.5px solid var(--ink);border-radius:50%;opacity:.32} .seal .s-top,.seal .s-bottom{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:var(--fw-bold);max-width:13ch;line-height:1.3} .seal .s-main{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:19px;letter-spacing:-.01em;color:var(--ink);line-height:1} .seal .s-bar{height:3px;width:30px;border-radius:var(--r-pill);background:var(--accent)} .seal.sm{width:108px;height:108px} .seal.sm .s-main{font-size:14px} /* ---------------------------------------------------------------------------- 16 · CERTIFICATE (printable completion document) ---------------------------------------------------------------------------- */ .certificate{ position:relative;background:var(--surface);border:2px solid var(--ink);box-shadow:var(--shadow-pop); max-width:880px;margin:0 auto;padding:clamp(28px,5vw,56px);overflow:hidden; } .certificate::before{content:"";position:absolute;inset:13px;border:1px solid var(--line-strong);pointer-events:none} .certificate > *{position:relative} .cert-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:30px} .cert-org{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:var(--fw-bold)} .cert-eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:var(--fw-bold);margin:0 0 14px} .cert-name{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(28px,5.6vw,52px);line-height:1.02;letter-spacing:-.025em;margin:0 0 16px;color:var(--ink);overflow-wrap:anywhere;word-break:break-word;max-width:100%} .cert-body{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:54ch;margin:0 0 36px} .cert-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line)} .cert-sigs{display:flex;gap:40px;flex-wrap:wrap} .cert-sig{min-width:170px} .cert-sig .line{height:1.5px;background:var(--ink);margin-bottom:8px} .cert-sig .who{font-size:13px;color:var(--ink);font-weight:var(--fw-semibold)} .cert-sig .role{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px} .cert-seal{flex:none} /* ---------------------------------------------------------------------------- 17 · ADMIN TABLES ---------------------------------------------------------------------------- */ .table-wrap{width:100%;overflow-x:auto;border:1.5px solid var(--border);border-radius:var(--r);background:var(--surface)} .table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px} .table thead th{ text-align:left;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:var(--fw-bold); padding:13px 16px;border-bottom:2px solid var(--ink);white-space:nowrap;background:var(--surface-2); } .table tbody td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle} .table tbody tr:last-child td{border-bottom:0} .table tbody tr{transition:background var(--dur-fast) var(--ease)} .table tbody tr:hover{background:var(--surface-2)} .table .num{font-family:var(--font-num);font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)} .table .who{font-weight:var(--fw-semibold);color:var(--ink)} .table th.num{text-align:right} .table-sort{background:none;border:0;font:inherit;font-weight:var(--fw-bold);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;padding:0;display:inline-flex;gap:5px;align-items:center} .table-sort:hover,.table-sort[aria-sort]{color:var(--ink)} .table-sort:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} /* ---------------------------------------------------------------------------- 17.5 · CANDIDATE DASHBOARD (private "my journey" progress portal) Cute via microcopy + color + gentle motion — never emoji. Honors prefers-reduced-motion (the global rule collapses these animations). ---------------------------------------------------------------------------- */ /* — Signature tracker (25 "Qualifies" · 50 "Challenge-proof") ------------- */ .tracker{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-soft)} .tracker__head{display:flex;align-items:center;justify-content:space-between;gap:16px 22px;flex-wrap:wrap;margin-bottom:8px} .tracker__lead{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .tracker__count{display:flex;align-items:flex-end;gap:11px} .tracker__count .num{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(46px,8vw,62px);line-height:.82;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--tracker-fill);transition:color var(--dur) var(--ease)} .tracker__count .den{font-size:15px;color:var(--muted);padding-bottom:7px} .tracker.is-goal .tracker__count .num{color:var(--tracker-goal)} .tracker__update{display:flex;gap:8px;align-items:center} .tracker__update input{width:88px;text-align:center;font-variant-numeric:tabular-nums} .tracker__track{position:relative;padding-top:38px;margin-top:14px} .tracker__track .bar{height:12px;border-radius:var(--r-pill);background:var(--surface-sunken)} .tracker__track .bar i{border-radius:var(--r-pill);background:var(--tracker-fill)} .tracker.is-goal .tracker__track .bar i{background:var(--tracker-goal)} .tracker__mark{position:absolute;top:0;bottom:0;left:var(--at,50%);width:0;pointer-events:none} .tracker__mark .stem{position:absolute;top:30px;bottom:0;left:50%;width:2px;transform:translateX(-50%);background:var(--milestone);opacity:.5;border-radius:2px} .tracker__mark .chip{position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;line-height:1.15;white-space:nowrap} .tracker__mark .chip b{font-family:var(--font-num);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)} .tracker__mark .chip span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:1px} .tracker__mark--end .chip{left:auto;right:0;transform:none;align-items:flex-end} .tracker__mark--end .stem{left:auto;right:0;transform:none} .tracker__mark.is-reached .stem{background:var(--ok);opacity:1} .tracker__mark.is-reached .chip b{color:var(--ok)} .tracker__cap{font-size:15px;color:var(--ink-2);line-height:1.55;margin:18px 0 0;max-width:62ch} .tracker__cap b{color:var(--ink);font-weight:600} /* the journey ladder is now .stepper (v1.1) — revive the level-up pop on the current node */ .stepper.is-levelup li.is-current .node{animation:levelpop .6s var(--ease-spring)} /* compact inline stage badge (dashboard header) */ .stagebadge{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 10px;border:1.5px solid var(--border);border-radius:var(--r-pill);background:var(--surface);font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap} .stagebadge .n{font-family:var(--font-num);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;padding-left:9px;margin-left:3px;border-left:1px solid var(--line)} .stagebadge.is-levelup{animation:levelpop .6s var(--ease-spring);border-color:var(--levelup)} @keyframes levelpop{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}} @keyframes ringpulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}} /* — Reflection / check-in ------------------------------------------------- */ .checkin{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:22px} .checkin__prompt{font-size:16px;color:var(--ink);font-weight:500;margin:0 0 12px;line-height:1.45} .checkin__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px} .checkin__streak{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:600} .checkin__saved{display:none;align-items:center;gap:8px;font-size:14px;color:var(--ok);font-weight:600;margin:14px 0 0} .checkin__saved svg{width:16px;height:16px;stroke:var(--ok);fill:none;stroke-width:2.4;flex:none} .checkin.is-saved .checkin__saved{display:inline-flex} .checkin.is-saved .checkin__foot{display:none} .checkin .scale-ends{margin-top:2px} /* "Your why" — re-surfaced reflection */ .why{position:relative;background:var(--surface-2);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:24px 24px 24px 28px;overflow:hidden} .why::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent)} .why__eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 12px} .why__quote{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(19px,2.5vw,25px);line-height:1.28;letter-spacing:-.015em;color:var(--ink);margin:0} .why__foot{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:13px;color:var(--muted)} /* — "My journey" dashboard layout ----------------------------------------- */ .journey{display:grid;gap:18px} .journey__head{display:flex;align-items:center;justify-content:space-between;gap:14px 18px;flex-wrap:wrap} .journey__head .greet{font-family:var(--font-display);font-weight:var(--fw-display);font-size:clamp(22px,3vw,28px);letter-spacing:-.02em;margin:0;color:var(--ink)} .journey__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .stat{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:9px} .stat__n{font-family:var(--font-display);font-weight:var(--fw-display);font-size:36px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)} .stat__n .d{font-size:17px;color:var(--muted);font-weight:var(--fw-semibold)} .stat__l{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700} .stat .bar{margin-top:3px} .journey__bottom{display:grid;grid-template-columns:1.5fr 1fr;gap:18px} .nextstep{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:2px solid var(--ink);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-pop)} .nextstep .eyebrow{margin:0} .nextstep__title{font-family:var(--font-display);font-weight:var(--fw-display);font-size:21px;line-height:1.15;letter-spacing:-.015em;color:var(--ink);margin:0} .nextstep__why{font-size:14px;color:var(--muted);margin:0;line-height:1.5} .nextstep .btn{margin-top:auto;align-self:flex-start} @media(max-width:760px){ .journey__stats{grid-template-columns:1fr} .journey__bottom{grid-template-columns:1fr} } /* ---------------------------------------------------------------------------- 17.6 · SUPPORT / DONATE BAND (calm, warm — never a pop-up or nag) Amount chips reuse the selectable-control language; Give = primary button. ---------------------------------------------------------------------------- */ /* Q248 — the donate box shares the ONE .card frame (see landing.css); only its grid layout lives here. */ .support{display:grid;grid-template-columns:1.05fr .95fr;gap:30px 44px;align-items:center} .support__copy h2.display{margin:0 0 12px} .support__copy .sub{margin:0;max-width:44ch} .support__form{display:flex;flex-direction:column;gap:18px} .amounts{display:flex;flex-wrap:wrap;gap:10px} .amount{position:relative} .amount input{position:absolute;opacity:0;width:0;height:0} .amount .face{display:flex;align-items:center;justify-content:center;min-width:70px;padding:13px 19px; border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface); font-weight:var(--fw-semibold);font-size:16px;color:var(--ink-2);cursor:pointer;font-variant-numeric:tabular-nums; transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)} .amount .face:hover{border-color:var(--accent);color:var(--accent)} .amount input:checked ~ .face{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-strong);font-weight:var(--fw-bold);transform:translateY(-1px)} .amount input:focus-visible ~ .face{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .amount--other .face{min-width:84px} /* monthly toggle (switch) */ .toggle{display:inline-flex;align-items:center;gap:11px;cursor:pointer;font-size:15px;font-weight:var(--fw-medium);color:var(--ink-2);user-select:none} .toggle input{position:absolute;opacity:0;width:0;height:0} .toggle .track{position:relative;width:44px;height:26px;flex:none;border-radius:var(--r-pill);background:var(--surface-sunken);border:1.5px solid var(--line-strong);transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)} .toggle .knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(18,16,22,.25);transition:transform var(--dur-fast) var(--ease-spring)} .toggle input:checked ~ .track{background:var(--accent);border-color:var(--accent)} .toggle input:checked ~ .track .knob{transform:translateX(18px)} .toggle input:focus-visible ~ .track{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .support__actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .support .reassure{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);line-height:1.45;margin:0;max-width:46ch} .support .reassure svg{width:13px;height:13px;stroke:var(--muted);fill:none;stroke-width:1.7;flex:none} /* quiet "Support" link (footer / nav) */ .support-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:var(--fw-semibold);color:var(--ink-2);text-decoration:none;padding:6px 13px;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)} .support-link::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none} .support-link:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} .support-link:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} @media(max-width:760px){.support{grid-template-columns:1fr;gap:24px}} /* ---------------------------------------------------------------------------- 18 · FOOTER ---------------------------------------------------------------------------- */ footer{margin-top:54px;padding-top:24px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.6} footer .foot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:18px} footer a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--dur-fast) var(--ease)} footer a:hover{border-bottom-color:var(--ink-2)} footer a:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} /* ---------------------------------------------------------------------------- 19 · UTILITIES ---------------------------------------------------------------------------- */ .hidden{display:none} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap} /* Skip link — visible only on keyboard focus. Unified class across all pages (S8). */ .skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 var(--r-sm) 0;font-size:14px;font-weight:var(--fw-semibold);text-decoration:none} .skip:focus{left:0} .skip:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)} .stack-2{display:flex;flex-direction:column;gap:var(--space-2)} .stack-4{display:flex;flex-direction:column;gap:var(--space-4)} .row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap} .panel{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:var(--space-6)} .panel-pop{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);padding:var(--space-6);box-shadow:var(--shadow-pop)} /* Inverted (dark) section — high-contrast brand moment */ .invert{background:var(--surface-ink);color:var(--on-dark);border-radius:var(--r-lg);padding:var(--space-8)} .invert .eyebrow{color:var(--trans-blue)} .invert h1.display,.invert h2.display,.invert h3.display{color:var(--on-dark)} .invert .sub,.invert .body{color:var(--on-dark-muted)} .invert a.link{color:var(--trans-blue);border-bottom-color:transparent} .invert .btn-outline{background:transparent;color:var(--on-dark);border-color:var(--on-dark)} /* ---------------------------------------------------------------------------- 20 · RESPONSIVE ---------------------------------------------------------------------------- */ @media(max-width:760px){ .masthead{flex-direction:column;align-items:flex-start;gap:6px} .mast-right{width:100%;justify-content:space-between;gap:var(--space-2)} /* Q108 P0-1 — the login-screen action row goes full width + wraps instead of overflowing */ .site-header{align-items:flex-start} /* Q119/Q219 — mobile: the shared header stacks. The wordmark sits on its own line (masthead is column above) and the whole nav drops full-width beneath it. 44px tap targets are inherited from the base .site-nav-link / .langtoggle rules. */ .navlinks{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:var(--space-2)} /* Q242 — the shared header's three nav links sit on ONE line beneath the wordmark (Q219 wrapped them onto 2–3 lines). nowrap here + the condensed padding/gap/font in the 560 block below fit one row at 360–390px. */ .site-nav{width:100%;justify-content:flex-start;flex-wrap:nowrap;gap:6px} .cert-foot{flex-direction:column;align-items:flex-start} } @media(max-width:560px){ /* Q600 — the four links don't fit one row ≤560, so instead of wrapping to two rows (Q392) they COLLAPSE behind the nav-toggle (hamburger). The header bar is ONE row (wordmark + toggle); the menu drops full-width below only when the toggle is open (.masthead.nav-open). No animation → reduced-motion safe. 44px targets. */ .masthead{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between} .nav-toggle{display:inline-flex} .site-nav{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:4px;margin-top:8px} .masthead.nav-open .site-nav{display:flex} .site-nav-link{font-size:12.5px;padding:9px 10px} .site-nav .site-nav-cta{font-size:12.5px;padding:9px 11px;text-align:center} .site-nav .support-pill{font-size:12.5px;padding:9px 12px;text-align:center} .pairs{grid-template-columns:1fr;gap:24px} .nextsteps{grid-template-columns:1fr} .modules{grid-template-columns:1fr} .actions{flex-direction:column-reverse;align-items:stretch} .actions .grow{justify-content:stretch} .actions .grow .btn,.actions .grow .btn-outline{flex:1} .scale{gap:6px} .scale .pip .face{height:42px} } /* ---------------------------------------------------------------------------- 21 · MOTION PREFERENCES ---------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } } /* ---------------------------------------------------------------------------- 22 · PRINT (certificate is the print target) ---------------------------------------------------------------------------- */ @media print{ @page{size:landscape;margin:14mm} body{background:#fff;color:#000} .no-print{display:none!important} .certificate{box-shadow:none;border:2px solid #000;max-width:100%;margin:0;page-break-inside:avoid} .certificate::before{border-color:var(--neutral-rule)} .seal,.badge{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact} .spectrum,.seal,.badge::before{-webkit-print-color-adjust:exact;print-color-adjust:exact} } /* --- re-added during reconciliation (emitted by app.js, were dropped in the design pass) --- */ .rank .moves{display:flex;gap:6px} .nextsteps-note{font-size:13.5px;color:var(--muted);margin:4px 0 0} /* ============================================================================= 23 · DESIGN SYSTEM v1.1 — net-new components ========================================================================== */ /* 23.0 · INPUT GAP FIX (Audit #2 C-1, the "weird sizes"). Native number/date/etc. were unstyled — they omitted the base field rule. Bind them to the same look. :where() keeps zero specificity so component width rules (.logadd input, etc.) win. */ input:where([type=number],[type=date],[type=month],[type=week],[type=time],[type=datetime-local],[type=password]){ width:100%;font:inherit;font-size:16px;padding:12px 13px;min-height:46px; background:var(--surface);color:var(--ink); border:1px solid var(--line-strong);border-radius:var(--r-sm); transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease); } input:where([type=number],[type=date],[type=month],[type=week],[type=time],[type=datetime-local],[type=password]):hover:not(:disabled){border-color:var(--ink-2)} input:where([type=number],[type=date],[type=month],[type=week],[type=time],[type=datetime-local],[type=password]):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)} .no-spin{appearance:textfield;-moz-appearance:textfield} .no-spin::-webkit-outer-spin-button,.no-spin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* 23.0b · small-button target size (Audit #2 S-1) — align field+button rows at one height */ .btn.sm,.btn-outline.sm,.btn-quiet.sm{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:6px} /* 23.1 · STEPPER — the journey ladder (role=progressbar on
    , aria-current on
  1. ). */ .stepper{list-style:none;display:flex;margin:0;padding:0} .stepper li{flex:1 1 0;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-width:0;padding-top:2px} .stepper li + li::before{content:"";position:absolute;top:13px;right:50%;width:100%;height:2px;background:var(--line-strong);z-index:0} .stepper .node{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);display:grid;place-items:center;color:var(--muted)} .stepper .node svg{width:15px;height:15px;stroke:currentColor;stroke-width:3;fill:none} .stepper .node .dot{width:8px;height:8px;border-radius:50%;background:currentColor} .stepper .lbl{font-size:12.5px;line-height:1.25;color:var(--muted)} .stepper li.is-done .node{background:var(--accent);border-color:var(--accent);color:#fff} .stepper li.is-done + li::before{background:var(--accent)} .stepper li.is-current .node{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)} .stepper li.is-current .lbl{color:var(--ink);font-weight:var(--fw-semibold)} .stepper--stacked,.stepper.is-stacked{flex-direction:column;align-items:stretch} .stepper--stacked li,.stepper.is-stacked li{flex-direction:row;justify-content:flex-start;text-align:left;gap:12px;padding:8px 0;min-height:44px} .stepper--stacked li + li::before,.stepper.is-stacked li + li::before{top:-6px;right:auto;left:13px;width:2px;height:100%} .stepper--stacked .node,.stepper.is-stacked .node{flex:none} .stepper--stacked .lbl,.stepper.is-stacked .lbl{flex:1} @media(max-width:560px){ .stepper{flex-direction:column;align-items:stretch} .stepper li{flex-direction:row;justify-content:flex-start;text-align:left;gap:12px;padding:8px 0;min-height:44px} .stepper li + li::before{top:-6px;right:auto;left:13px;width:2px;height:100%} .stepper .node{flex:none} .stepper .lbl{flex:1} } /* 23.2 · DROPZONE — photo / logo upload tile. */ .dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center; border:2px dashed var(--line-strong);border-radius:var(--r);background:var(--surface-sunken);padding:24px 18px;cursor:pointer;min-height:128px; transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)} .dropzone:hover,.dropzone.is-dragover{border-color:var(--accent);background:var(--accent-soft)} .dropzone:focus-within{outline:var(--focus-ring);outline-offset:2px} .dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer} .dropzone__icon{width:28px;height:28px;color:var(--muted)} .dropzone__title{font-weight:var(--fw-semibold);font-size:14.5px;color:var(--ink)} .dropzone__hint{font-size:12.5px;color:var(--muted);line-height:1.4;max-width:36ch} .dropzone.is-filled{border-style:solid;border-color:var(--line-strong);padding:14px} .dropzone__preview{width:96px;height:96px;border-radius:var(--r-sm);object-fit:cover} .dropzone--logo{min-height:104px} .dropzone--logo .dropzone__preview{width:auto;max-width:160px;max-height:72px;border-radius:0} /* 23.3 · LOGADD / LOGLIST / DAYCOUNT — add-as-you-go signatures. */ .logadd{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end} .logadd .field{margin:0} .logadd input[type=number]{width:96px} .loglist{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:0} .loglist li{display:flex;gap:12px;align-items:baseline;font-size:13px;padding:6px 0;border-bottom:1px solid var(--line)} .loglist .n{font-weight:700;color:var(--accent);min-width:38px} .loglist .when{color:var(--muted)} .loglist .note{color:var(--ink-2)} .daycount{display:inline-flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--ink-2); background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--r-pill);padding:4px 11px} .daycount b{font-size:14px;color:var(--accent);font-weight:700} .daycount.is-soon b{color:var(--secondary-strong)} .daycount.is-past{opacity:.65} .daycount.is-past b{color:var(--muted)} /* 23.4 · TIMELINE — the tracker's mini date axis (start → reach-50 → file-by → Aug 5). */ .timeline{margin-top:16px} .timeline__track{position:relative;height:6px;border-radius:3px;background:var(--line-strong);margin:8px 7px 0} .timeline__done{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:var(--accent)} .timeline__proj{position:absolute;top:50%;height:0;border-top:2px dashed var(--accent);opacity:.55;transform:translateY(-50%)} .timeline__pt{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line-strong);background:var(--ink)} .timeline__pt.is-today{background:var(--ink)} .timeline__pt.is-goal{background:var(--accent)} .timeline__pt.is-file{background:var(--secondary-strong)} .timeline__pt.is-proj{background:var(--ok)} .timeline__ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:8px} .timeline__legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px} .timeline__legend span{font-size:12px;color:var(--ink-2);display:inline-flex;align-items:center;gap:5px} .timeline__legend span::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;background:var(--ink)} .timeline__legend .is-goal::before{background:var(--accent)} .timeline__legend .is-file::before{background:var(--secondary-strong)} .timeline__legend .is-proj::before{background:var(--ok)} /* 23.5 · (SEGMENT removed — the Public/Private control belongs to the post-launch Explore directory; not shipping a component that isn't wired into any UI. Re-add with Explore.) */ .block{display:block;width:100%} /* 23.6 · SEATMAP — the empty-seat data-viz (tiles are