/* ============================================================================ Quvex — shared site stylesheet (quvex.app) Derived from the Quvex Design System (tokens/colors.css, tokens/typography.css, brand/marketing/website.html). Dark-only by design — the discretion-correct default. One accent voice for text/links/icons (AccentText #82A9D8); the primary CTA carries the app's readable accent gradient — AccentGradientReadable, a darkened-start SteelLight→SteelDeep sweep under a white label (BRAND.md). Noto Sans, four bundled weights. Flat elevation: tone, not shadows. No emoji, no imagery. ========================================================================== */ :root { color-scheme: dark; --font-sans: "Noto Sans", "Noto Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* ---- Charcoal ladder (Color.kt) ---- */ --bg: #1A1A1A; --surface: #212121; --surface-card: #2B2B2B; --surface-row: #323232; --sheet: #242424; /* = app SheetSurface — the transient overlay rung (snackbar/sheet), one step above --bg */ --divider: #323232; --hairline: rgba(255,255,255,0.055); /* = app Hairline 0x0EFFFFFF (Color.kt:187) — an alpha-white edge always reads LIT on any surface; the old opaque #262626 read as a recessed dark line on #2B2B2B cards, inverting the app's depth-by-edge language (QuvexCard.kt) */ --text-primary: #F2F3F5; /* = app TextPrimary (Color.kt:197) — raw white retired app-wide for halation; on web pure white now survives ONLY as the CTA label --on-grad (mirrors the app G2 OnSteel whitelist, BRAND.md:40,46-48) */ --text-muted: #A8A8A8; /* ---- The one saturated colour + the app's readable CTA gradient (BRAND.md) ---- */ --accent: #82A9D8; /* = app AccentText (ui/theme/Color.kt:76) — the on-dark accent for text/links/icons. The mark/wordmark SVGs keep light launcher-mark steel exactly as the app launcher mark does; never retint assets/. */ --on-steel: #10202E; /* near-black label on the light-steel fills (.skip, .tag-accent) */ /* Mirrors the app's AccentGradientReadable (ui/theme/Color.kt): AccentReadableStart — SteelLight #6FA3D6 lerped 0.60 toward SteelDeep in Oklab, resolved #406FA6 — → SteelDeep #224E86, white label; same TL→BR diagonal as the app brush. WebTokenParityTest pins the start. */ --on-grad: #FFFFFF; /* white — the OnSteel label on the readable gradient (Color.kt:40) */ --accent-grad: linear-gradient(135deg, #406FA6 0%, #224E86 100%); --warm: #D6B88F; /* sanctioned warmth only */ /* ---- Phase accent tints (never alarm colours) ---- */ --accent-menstruation: #D79793; --accent-follicular: #8FB89B; --accent-ovulation: #D9B877; --accent-luteal: #C094B8; /* ---- Functional status tints (muted, board pages only) ---- */ --ok: #9fe3b0; --warn: #e7c98a; --err: #f0a6a6; /* ---- Type scale (marketing register) ---- */ --body-medium-size: 0.875rem; /* app UI-density: nav, buttons, chips, board rows */ --body-web: 1.0625rem; /* landing reading paragraphs (looser than UI density) */ --body-small-size: 0.75rem; --fineprint: #8A8A8A; /* quiet but AA-legible on --bg (≥4.5:1) — was #575757 (2.4:1) */ /* ---- Motion: the app's M3 easing family + shared durations (Motion.kt:55-66). Every transition below routes through these, and the prefers-reduced-motion block flattens them all to none. ---- */ --dur-fast: .12s; /* R1 press ≈100ms */ --dur-base: .15s; /* = app DurationFast */ --dur-standard: .25s; /* = app DurationStandard */ --ease-out: cubic-bezier(0.2, 0, 0, 1); /* = app EasingStandard — the default web ease */ --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1); /* = app EasingEmphasized (decelerate on enter) */ --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15); /* = app EasingEmphasizedAccelerate (accelerate on exit) */ /* ---- Icon sizes (= app IconSmall/IconMedium, Spacing.kt:86-93) — the two-token grid that cures the 15/16/17/19/20 creep ---- */ --icon-small: 16px; --icon-medium: 20px; /* DP-50: raw second-layer values hoisted (control edge, prose/lifted ink, err edge, hover ring) + radius scale */ --control-border:#747474; --text-prose:#C9C9CC; --text-lifted:#CFCFCF; --err-border:#5a3a34; --accent-ring:rgba(130,169,216,0.22); --radius-card:16px; --radius-feature:18px; --radius-field:12px; } /* fontface:GENERATED:start -- build_web_fonts.py, DO NOT EDIT BY HAND */ /* 16 script slices (4 weights x latin/greek/cyrillic/devanagari), woff2, font-display:swap. A page downloads only the slices its content needs (unicode-range). Regenerate with tools/fonts-subset/build_web_fonts.py. */ @font-face { font-family:"Noto Sans"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/noto-sans-latin-regular.f9230cdc.woff2") format("woff2"); unicode-range:U+0000-025F, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2190-2199, U+2212; } @font-face { font-family:"Noto Sans"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/noto-sans-greek-regular.b9f60dbd.woff2") format("woff2"); unicode-range:U+0370-03FF; } @font-face { font-family:"Noto Sans"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/noto-sans-cyrillic-regular.d1e04a7e.woff2") format("woff2"); unicode-range:U+0400-04FF; } @font-face { font-family:"Noto Sans"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/noto-sans-devanagari-regular.ba172141.woff2") format("woff2"); unicode-range:U+0900-097F, U+200C-200D; } @font-face { font-family:"Noto Sans"; font-weight:500; font-style:normal; font-display:swap; src:url("../fonts/noto-sans-latin-medium.935a63d2.woff2") format("woff2"); unicode-range:U+0000-025F, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2190-2199, U+2212; } @font-face { font-family:"Noto Sans"; font-weight:500; font-style:normal; font-display:swap; src:url("../fonts/noto-sans-greek-medium.f789fb74.woff2") format("woff2"); unicode-range:U+0370-03FF; } @font-face { font-family:"Noto Sans"; font-weight:500; font-style:normal; font-display:swap; src:url("../fonts/noto-sans-cyrillic-medium.3c15572d.woff2") format("woff2"); unicode-range:U+0400-04FF; } @font-face { font-family:"Noto Sans"; font-weight:500; font-style:normal; font-display:swap; src:url("../fonts/noto-sans-devanagari-medium.dd2234ea.woff2") format("woff2"); unicode-range:U+0900-097F, U+200C-200D; } @font-face { font-family:"Noto Sans"; font-weight:600; font-style:normal; font-display:swap; src:url("../fonts/noto-sans-latin-semibold.94d6ef04.woff2") format("woff2"); unicode-range:U+0000-025F, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2190-2199, U+2212; } @font-face { font-family:"Noto Sans"; font-weight:600; font-style:normal; font-display:swap; src:url("../fonts/noto-sans-greek-semibold.7002b27f.woff2") format("woff2"); unicode-range:U+0370-03FF; } @font-face { font-family:"Noto Sans"; font-weight:600; font-style:normal; font-display:swap; src:url("../fonts/noto-sans-cyrillic-semibold.1bacf5d0.woff2") format("woff2"); unicode-range:U+0400-04FF; } @font-face { font-family:"Noto Sans"; font-weight:600; font-style:normal; font-display:swap; src:url("../fonts/noto-sans-devanagari-semibold.9f6965b0.woff2") format("woff2"); unicode-range:U+0900-097F, U+200C-200D; } @font-face { font-family:"Noto Sans"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/noto-sans-latin-bold.5066b292.woff2") format("woff2"); unicode-range:U+0000-025F, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-214F, U+2190-2199, U+2212; } @font-face { font-family:"Noto Sans"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/noto-sans-greek-bold.e81acce7.woff2") format("woff2"); unicode-range:U+0370-03FF; } @font-face { font-family:"Noto Sans"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/noto-sans-cyrillic-bold.0bd95a32.woff2") format("woff2"); unicode-range:U+0400-04FF; } @font-face { font-family:"Noto Sans"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/noto-sans-devanagari-bold.8dc917fa.woff2") format("woff2"); unicode-range:U+0900-097F, U+200C-200D; } /* Metric-matched fallback: local('Arial'), overrides COMPUTED from Noto's metrics (capsize/fontaine) so the swap is reflow-free (~0 CLS). Inserted after "Noto Sans" in --font-sans. */ @font-face { font-family:"Noto Sans Fallback"; src:local("Arial"); size-adjust:106.02%; ascent-override:100.83%; descent-override:27.64%; line-gap-override:0.00%; } /* fontface:GENERATED:end */ /* ---- Icon face: Material Symbols Outlined, self-hosted subset (Apache-2.0, see fonts/NOTICE.txt). Pinned to opsz 24 / weight 400 / FILL 0 / GRAD 0 and subset to the glyphs the site uses, so pages load NO font from Google's CDN (no visitor-IP leak — consistent with the privacy policy). font-display is "block" so the ligature name never flashes as text before the icon font paints. ---- */ @font-face { font-family:"Material Symbols Outlined"; font-style:normal; font-weight:400; font-display:block; src:url("../fonts/material_symbols_subset.woff2") format("woff2"); } .material-symbols-outlined { font-family:"Material Symbols Outlined"; font-weight:normal; font-style:normal; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-feature-settings:"liga"; font-feature-settings:"liga"; -webkit-font-smoothing:antialiased; } /* ---- Base ---- */ * { box-sizing: border-box; } html { font-size: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text-primary); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } .container { max-width: 1120px; margin: 0 auto; padding: 0 32px; } .container.narrow { max-width: 824px; } /* skip link / focus */ .skip { position:absolute; left:-9999px; top:0; background:var(--accent); color:var(--on-steel); padding:10px 16px; border-radius:0 0 12px 0; z-index:50; } .skip:focus { left:0; } a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .nav .links a:focus-visible, .foot .links a:focus-visible, .prose a:focus-visible, .foot-note a:focus-visible, .link-btn:focus-visible, .meta a:focus-visible { border-radius: 6px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ---- Header ---- */ header.site { position: sticky; top: 0; z-index: 20; background: rgba(26,26,26,0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); } .nav { display: flex; align-items: center; gap: 28px; min-height: 4.25rem; } .nav .brand img { height: 26px; display: block; } .nav .links { display: flex; gap: 24px; margin-left: auto; font-size: var(--body-medium-size); color: var(--text-muted); } .nav .links a { transition: color var(--dur-base) var(--ease-out); } .nav .links a:hover, .nav .links a[aria-current="page"] { color: var(--text-primary); } .nav .btn.primary { margin-left: 8px; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 2.75rem; padding: 0 18px; border: 0; border-radius: 999px; font-family: var(--font-sans); font-size: var(--body-medium-size); font-weight: 500; cursor: pointer; transition: filter var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .btn .material-symbols-outlined { font-size: var(--icon-medium); } .btn.primary { background: var(--accent-grad); color: var(--on-grad); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); } .btn.primary:hover { filter: brightness(1.06); } .btn.ghost { border: 1px solid var(--control-border); background: none; color: var(--text-primary); } .btn.ghost:hover { background: var(--surface-row); } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: .55; cursor: default; } /* ---- Section headings / page hero ---- */ .eyebrow { font-size: var(--body-medium-size); text-transform: uppercase; letter-spacing: .08em; line-height: 1.4; color: var(--warm); font-weight: 600; } h3 { line-height: 1.28; } h2.display { font-size: 2.5rem; letter-spacing: -0.022em; font-weight: 700; margin: 12px 0 0; } .lead { font-size: 1.1875rem; line-height: 1.5; color: var(--text-muted); max-width: 620px; margin: 14px 0 0; } .page-hero { padding: 52px 0 8px; } .page-hero h1 { font-size: 2.5rem; line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; margin: 12px 0 0; } .page-hero .lead { margin-top: 14px; } .page-hero .sub { color: var(--text-muted); font-size: var(--body-medium-size); line-height: 1.48; margin: 12px 0 0; max-width: 540px; } /* ---- Cards / pills / badges (flat: fill + a hairline edge, no shadow — depth by tone) ---- */ .card { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--surface-row); color: var(--text-muted); font-size: var(--body-small-size); } .badge { display: inline-flex; height: 22px; align-items: center; padding: 0 9px; border-radius: 999px; background: var(--surface-row); color: var(--text-muted); font-size: 12px; } .tag-accent { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--warm); background: rgba(214,184,143,.14); border: 1px solid rgba(214,184,143,.34); padding: 3px 8px; border-radius: 999px; } /* ---- Forms ---- */ input, select, textarea { width: 100%; padding: 12px 14px; background: var(--surface); color: var(--text-primary); border: 1px solid var(--control-border); border-radius: var(--radius-field); font: inherit; } input, select { height: 40px; padding: 0 14px; } select { width: auto; } textarea { resize: vertical; } label { font-weight: 600; } .hint { color: var(--text-muted); font-weight: 400; font-size: .875rem; } /* ---- Board & utility pieces ---- */ /* Tabular figures so counts, scores, the composer counter and relative times hold width as digits change — no jitter (Type.kt tnum law, doctrine §5.2) */ .quality button, .votes button, [data-up], [data-down], [data-q-up], [data-q-down], .count, .count-line, .score, .msg-when, .progress .lbl { font-variant-numeric: tabular-nums; } .state { color: var(--text-muted); text-align: center; padding: 36px 0; font-size: var(--body-web); } #toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 4px); background: var(--sheet); border: 1px solid rgba(255,255,255,0.055); border-radius: var(--radius-field); padding: 10px 16px; max-width: 90vw; display: block; opacity: 0; pointer-events: none; z-index: 30; font-size: var(--body-medium-size); transition: opacity var(--dur-base) var(--ease-exit), transform var(--dur-base) var(--ease-exit); } #toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; transition: opacity var(--dur-standard) var(--ease-enter), transform var(--dur-standard) var(--ease-enter); } #toast.err { border-color: var(--err-border); color: var(--err); } /* Long-form prose (legal pages, board footers) */ .prose { font-size: var(--body-web); line-height: 1.6; } .prose p, .prose li { color: var(--text-prose); max-width: 70ch; } /* = app ProseBody (Color.kt:198) — long-form body ink; DP-43 (WD-10): cap measure ~66-75ch for legal prose readability */ .prose h2 { font-size: 1.375rem; margin: 34px 0 8px; color: var(--text-primary); letter-spacing: -0.2px; } .prose a { color: var(--accent); } .prose code { background: var(--surface); border: 1px solid var(--divider); border-radius: 6px; padding: 1px 6px; } .prose ul { padding-left: 22px; } .meta-line { color: var(--text-muted); font-size: .875rem; } /* ---- Footer ---- */ footer.site { border-top: 1px solid var(--hairline); padding: 40px 0 56px; margin-top: 64px; } .foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .foot img { height: 24px; } .foot .links { display: flex; gap: 22px; margin-left: auto; font-size: var(--body-small-size); color: var(--text-muted); flex-wrap: wrap; } .foot .links a { transition: color var(--dur-base) var(--ease-out); } .foot .links a:hover { color: var(--text-primary); } .fineprint { font-size: var(--body-small-size); color: var(--fineprint); margin-top: 22px; max-width: 560px; line-height: 1.5; } /* ---- Responsive / motion ---- */ @media (max-width: 900px) { .container { padding: 0 22px; } /* DP-42 (WD-9 finding 20): below 900px the nav row wraps and the links become a horizontally scrollable second line under brand+CTA — replaces the display:none cliff that hid boards/legal from mobile except via the footer. Zero markup change. */ .nav { flex-wrap: wrap; } .nav .links { order: 3; flex-basis: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 12px; gap: 18px; } .nav .links::-webkit-scrollbar { display: none; } .page-hero h1 { font-size: 2rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* R13: replace movement with cross-fades. Kill keyframe motion everywhere, but keep the comprehension-aiding colour/opacity fades — only strip the TRANSFORM channel from the transform-carrying transitions that live in site.css (.btn, #toast). Inline page transforms (.feat/.board/vote chips) get the same treatment in their own