/* Ascent — production UI styles */ :root { /* issue #297 — v2 "Modernist" redesign, full color/radius/shadow/heat/font token replace (supersedes issue #206 "Alpenglow" the same way that pass superseded every direction before it — see docs/architecture.md Build Log and .claude/rules/design-system.md, the binding spec for this pass). Tokens the spec doesn't define (spacing scale, rem-based type scale, motion durations/easing, icon sizes, chip box-model, tracking) keep their pre-#297 name/value unchanged — listed at the bottom of this block, same convention #206 used. This is a Phase 1 (#297) token + base-component pass only — individual page layouts are Phases 2-5 (#298-#301), not touched here. */ --color-bg: #F3F2F2; --color-surface: #EAE9E9; --color-surface-raised: #F8F4F4; /* --color-border/--color-border-strong/--color-divider are aliases of the same 2px-rule divider color per design-tokens.css — kept as three names so every existing --color-border call site (there were ~5) keeps working without a rename; --color-border-strong is a fully-opaque version for rules that need to sit on top of a divider-colored border without the translucency compounding (e.g. a hover state layered over a divider). */ --color-border: color-mix(in srgb, #201E1D 40%, transparent); --color-border-strong: #201E1D; --color-divider: color-mix(in srgb, #201E1D 40%, transparent); --color-text: #201E1D; /* design-system.md §2 spec's literal formula (color-mix 60%) only clears ~4.12-4.24:1 against --color-surface/--color-bg — short of WCAG AA's 4.5:1 for normal text, caught live by the E2E a11y suite's axe scan on .auth-subtitle/.daily-todo-empty/.template-card-desc. Bumped to 64% (verified via relative-luminance calculation: 4.64:1 on --color-surface, 4.80:1 on --color-bg — comfortably passing both) — dark theme's own 60% value already clears 6.1-6.4:1 and is untouched. */ --color-text-muted: color-mix(in srgb, #201E1D 64%, transparent); /* --color-text-faint has no exact spec value in design-system.md's token table (only bg/surface/text/text-muted/divider/accent/neutral are spec'd) — judgment call: same color-mix idiom as --color-text-muted, one step further toward transparent, preserving the pre-#297 "faint" role (e.g. .phase-index-adjacent tertiary text) rather than dropping it. */ --color-text-faint: color-mix(in srgb, #201E1D 45%, transparent); /* v3 (issue #416 Phase 5 — #430) — accent ramp retinted from v2 Modernist's red/orange (#EC3013-family) to design-system.md §2's green "hacker" accent, same hue as --v3-accent (hsl(146 88% 38%)). This is the base --color-accent-* scale every not-yet-individually-migrated component still reads directly (danger, warning, P0/P1 priority, and every badge/border/text call site Phases 1-4 didn't touch), found live as the single biggest remaining "still red" gap in this pass (screenshot report: roadmap badge, stat number, phase-card left border, P0 chip, all still red on the dashboard). Every step re-verified with a real relative-luminance contrast calculation, same discipline as the #297 comment this replaces — see that calculation's results inline below. */ --color-accent: #0CB656; --color-accent-100: #ECFEF4; --color-accent-200: #D4F7E3; --color-accent-300: #ABEDC8; --color-accent-400: #70DB9F; --color-accent-500: #0CB656; /* Live-verified (relative-luminance calc): base --color-accent (#0CB656) clears only 2.68:1 against white — same category of failure #297 documented for the old red base, and per design-system.md §2 still "fine for icons, large numerals, UI chrome" (non-text/large-graphic uses), just not real body-text-size text or a text-hosting solid fill. --color-accent-600 (#067436) is the darkened step that clears 5.90:1 against white — the fill any text-hosting control (.btn-primary, .seg-item's active fill, .kpi-tile-hero) must read instead of the base token, exactly the existing established pattern each of those call sites already documents in its own comment. */ --color-accent-600: #067436; /* solid fill for text-hosting controls + hover step; 5.90:1 with white */ --color-accent-700: #034E24; /* accent as paragraph-size text; 9.91:1 on white */ --color-accent-800: #05612D; /* text on accent-100 tints; 7.28:1 */ --color-accent-900: #03451F; /* Neutral ramp (full --color-neutral-100...900 per design-tokens.css) */ --color-neutral-100: #F8F4F4; --color-neutral-200: #EAE7E7; --color-neutral-300: #D7D3D3; --color-neutral-400: #BAB6B6; --color-neutral-500: #9B9797; --color-neutral-600: #7D7979; --color-neutral-700: #605D5D; --color-neutral-800: #444141; --color-neutral-900: #2D2B2B; /* Semantic roles collapse into the mono scheme per design-system.md §2: danger reuses the accent ramp; success/warning use neutral ink + tags, not new hues. --color-warning/-bg used to have a separate darkened "-ink" text variant (--color-warning-ink) under Alpenglow — that's gone now: --color-warning already IS a text-safe accent-700 value, so every old --color-warning-ink call site was repointed straight to --color-warning instead of keeping a now-redundant alias token. */ --color-danger: var(--color-accent-700); --color-danger-bg: var(--color-accent-100); --color-success: var(--color-neutral-800); --color-success-bg: var(--color-neutral-200); --color-warning: var(--color-accent-700); --color-warning-bg: var(--color-accent-100); /* Priority mapping — issue #462, a direct product-owner override of design-system.md §2's original "P0 = accent tint, P1 = lighter accent tint or outline, P2 = neutral tint" mapping (same status as issue #435's Archivo-over-Sora override: a deliberate, explicit decision to diverge from that spec's default, not a bug). Real live feedback: P0/P1's green borders sitting next to P2/P3's grey ones on the phase-card list read as visually inconsistent, like a rendering glitch, not an intentional priority signal — "why are some borders green and some grey." All four tiers now read as *shades of the same green accent ramp*, descending in intensity from P0 (most vivid/prominent) to P3 (most muted/pale), so the whole set reads as one coherent color story. Live-verified contrast (relative-luminance calc, this file's usual discipline) for the two newly-added ink shades against every surface they can realistically sit on: light-theme --color-accent-700 (P2-ink, reused from P1) clears 8.87:1 on --color-bg, 8.18:1 on --color-surface; --color-accent-600 (P3-ink) clears 5.28:1 on --color-bg, 4.87:1 on --color-surface — both comfortably passing WCAG AA for the 9px badge text and small .priority-tag text this pairs with (the same use cases the previous grey P2/P3 tokens covered). Never drop P3-ink below --color-accent-600 in light theme — the next step down, the base --color-accent (500) itself, clears only 2.68:1 on white and fails AA outright (documented on --color-accent's own comment above). */ --color-p0: var(--color-accent); --color-p0-ink: var(--color-accent-800); --color-p0-bg: var(--color-accent-100); --color-p1: var(--color-accent-400); --color-p1-ink: var(--color-accent-700); --color-p1-bg: var(--color-accent-100); --color-p2: var(--color-accent-300); --color-p2-ink: var(--color-accent-700); --color-p2-bg: var(--color-accent-100); --color-p3: var(--color-accent-200); --color-p3-ink: var(--color-accent-600); --color-p3-bg: var(--color-accent-100); /* Text on solid accent fills (buttons, filled badges) — replaces --color-ink-on-gold. */ --color-ink-on-accent: #F3F2F2; /* issue #435 — design-system.md §3's v3 redesign added --font-heading-v3/ --font-body-v3 (Sora/Outfit) below, used explicitly by ~10 landing/auth call sites via a `var(--font-heading-v3, var(--font-display))` fallback chain. An app-wide switch of these *base* tokens to Sora/Outfit was tried in this same PR and explicitly rejected after a direct side-by-side comparison — the product owner prefers the existing Archivo look app-wide and asked to keep it. Base tokens stay on Archivo; the -v3 tokens remain available for any call site that wants to opt in explicitly, but nothing should read them by default going forward. */ --font-body: "Archivo", system-ui, sans-serif; --font-heading: "Archivo", system-ui, sans-serif; /* --font-display is kept as an alias (not removed) so the ~8 existing call sites using this name don't all need a mechanical rename in this CSS-only pass — it now resolves to Archivo like everything else, closing the "no separate display font" gap design-system.md §1 calls for, with zero risk of missing a call site. New code should read --font-heading directly. */ --font-display: var(--font-heading); /* --font-mono — judgment call: design-system.md doesn't explicitly forbid monospace for code/numeric contexts (tabular phase indices, the AI-import JSON paste area, feedback report reference codes), only that heading/body text must be Archivo. Dropped the old custom 'Geist Mono' webfont (no additional font family beyond Archivo should be loaded per §1) in favor of a system monospace stack — visually neutral, zero extra network cost, and unaffected by the CSP font-src change below since it needs no Google Fonts request. */ --font-mono: ui-monospace, "SF Mono", Consolas, monospace; /* Type scale (rem) — unrelated to this pass's token scope, unchanged, except --text-2xl/-3xl/-4xl below (issue #482 A1): those three are page-heading sizes and are now fluid clamp() pairs so 360px→1920px needs no breakpoint jump, instead of a single fixed size. Token names are unchanged — only the values became clamp() — so every existing call site keeps working as-is. */ /* issue #496 follow-up (live report) — Text size (settings.js's Preferences tab) used to scale the whole app, not just text: it set `font-size` on ``, and every spacing/icon/radius token in this file happens to also be `rem`-based, so "Largest" inflated gaps, icon tiles, and card padding right along with the type scale — real, reported bloat on the onboarding roadmap grid (icon boxes, badge-to-heading gaps, and dead space all growing together, not just the text). `--text-scale` is now the only thing `data-text-size` touches (see the `html[data-text-size=...]` rule below) — every `--text-*` token is wrapped in `calc(... * var(--text-scale))` so only font-size responds to the preference; `--space-*`/`--radius-*`/icon-size tokens are untouched regardless of text size. */ --text-scale: 1; --text-xs: calc(0.75rem * var(--text-scale)); --text-sm: calc(0.875rem * var(--text-scale)); --text-base: calc(1rem * var(--text-scale)); --text-lg: calc(1.25rem * var(--text-scale)); --text-xl: calc(1.5625rem * var(--text-scale)); --text-2xl: calc(clamp(1.5rem, 1.3rem + 1vw, 1.953rem) * var(--text-scale)); --text-3xl: calc(clamp(1.75rem, 1.4rem + 1.75vw, 2.441rem) * var(--text-scale)); --text-4xl: calc(clamp(2rem, 1.5rem + 2.5vw, 3.052rem) * var(--text-scale)); /* Responsive layout primitives (issue #482 A1) — the one shared place that decides content width and minimum tap-target size, so every page/component folds the same way instead of each setting its own ad hoc breakpoint. */ --content-max: 1080px; --tap-min: 48px; /* issue #492 — width reserved down the dashboard phase list's left gutter for the progress spine (track + one dot per phase). */ --phase-spine-gutter: clamp(26px, 3vw, 34px); /* issue #503 follow-up — real, reported bug: `.dashboard-header`'s own left/right padding is what insets its children (`.roadmap-summary-card`/`.next-up-card`/`.roadmap-filters-card`) from the page edge; `.daily-todo-panel` and `.dashboard-content` are siblings of that header, not children of it, so they never got the same inset and rendered visibly wider (their own card border sitting right at `.app-content`'s edge instead of matching the others). One shared token, read by all three, so a future breakpoint retune can't silently drift them out of sync again — see each selector's own `max-width: 768px`/`480px`/`375px` override below for the matching narrower values. */ --dashboard-gutter-x: 20px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Archivo's heaviest weight, used for headings per design-system.md §3. */ --font-weight-extrabold: 800; --leading-tight: 1.2; --leading-snug: 1.3; --leading-normal: 1.5; --leading-loose: 1.7; --tracking-tight: -0.03em; --tracking-snug: -0.01em; --tracking-caps: 0.07em; /* Spacing scale — unrelated to this pass's token scope, unchanged. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* App shell topbar height — unrelated to this pass's token scope, unchanged. */ --topbar-h: 56px; /* Bottom tab bar height (issue #484) — plus env(safe-area-inset-bottom), applied directly on .bottom-nav/.app-content rather than folded into this token, since the safe-area inset is device-dependent. */ --bottom-nav-h: 56px; /* Icon size scale — unrelated to this pass's token scope, unchanged. */ --icon-size-xs: 16px; --icon-size-sm: 20px; --icon-size-md: 24px; --icon-size-lg: 32px; /* Shared "metadata chip" box-model scale — height/padding unrelated to this pass's token scope, unchanged. --chip-radius is explicitly in scope: design-system.md §4/§5 calls for "no rounded... chips", zeroed alongside --radius-*/--radius-full below. */ --chip-height: 22px; --chip-padding-x: 9px; /* v3 (issue #416 Phase 5 — #430) — design-system.md §4's three-step radius scale, the exact opposite of v2 Modernist's "radius 0 everywhere" rule quoted below. Every remaining component that still reads --radius-sm/md/lg/full/--chip-radius directly (i.e. every surface Phases 1-4 didn't individually touch, since those phases migrated call sites onto a parallel --v3-* namespace rather than retuning these base tokens) now gets the v3 look automatically — this was the single biggest source of "still looks like the old UI" drift going into Phase 5's compliance sweep. --v3-radius-sm/md/lg above stay as the canonical values; these alias them so both namespaces resolve to one scale. --radius-full is restored to a real pill radius (was zeroed for v2's "avatars/toggle tracks go square too" rule, itself retired by v3 §8's "avatars: --radius-lg rounded square, not v2's hard square" — genuinely pill-shaped elements, e.g. toggle-track thumbs, segmented-control selection, still want a full pill, not a square). */ --radius-sm: var(--v3-radius-sm); --radius-md: var(--v3-radius-md); --radius-lg: var(--v3-radius-lg); --radius-full: 9999px; --chip-radius: var(--v3-radius-md); /* Shadow scale — design-system.md §4: "Elevation only for overlays (dialog, dropdown, command palette, toasts) via --shadow-sm/md/lg. Flat surfaces otherwise." --shadow-sm/md/lg are the spec's exact values. --shadow-xs/-xl have no spec equivalent (spec only defines 3 tiers) — kept defined (reduce risk of a dangling var()), derived from the same neutral-ink shadow family as -sm/-md/-lg rather than left at their old values. --shadow-brand had zero call sites at the time of this pass (grepped and confirmed) — no colored/gold shadow is allowed on a flat surface per §4/§9's checklist, so rather than delete the token outright (a future accent-emphasis use might want a shadow keyed to the accent color specifically, e.g. a hovering "you can drop this here" affordance) it's redefined as a low-opacity accent-tinted shadow, not a neutral one — documented here since it's a deliberate exception to "flat surfaces otherwise," to be used only if a genuine future need arises, not reintroduced as a default button/card shadow. */ --shadow-xs: 0 1px 2px color-mix(in srgb, var(--color-neutral-900) 8%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-neutral-900) 4%, transparent); --shadow-sm: 0 1px 2px color-mix(in srgb, #2D2B2B 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2D2B2B 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2D2B2B 22%, transparent); --shadow-xl: 0 24px 48px color-mix(in srgb, var(--color-neutral-900) 20%, transparent), 0 8px 16px color-mix(in srgb, var(--color-neutral-900) 10%, transparent); --shadow-brand: 0 8px 24px color-mix(in srgb, var(--color-accent) 20%, transparent); /* Motion (durations/easing) — unrelated to this pass's token scope, unchanged; design-system.md §7 reuses --duration-fast/base and --ease-out for the 120-200ms opacity/transform hover/press rule. */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-decelerate: cubic-bezier(0, 0, 0, 1); --ease-accelerate: cubic-bezier(0.3, 0, 1, 1); --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-instant: 80ms; --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 360ms; --duration-enter: 480ms; /* issue #499 (D3) — motion pass: standardize the last few remaining ad hoc literal durations (route fade 420ms, sheet slide 280ms) onto named tokens per the issue's exact spec. --duration-tick reuses --ease-standard (already what .check-pop reads) — only the name is new, so the "row tick spring" gets a self-documenting token instead of a bare --duration-fast reference that doesn't say what it's for. */ --duration-route: 180ms; --duration-tick: 160ms; --duration-sheet: 220ms; --stagger-base: 40ms; /* v3 "developer portfolio" redesign (issue #416, Phase 4 — #428): design-system.md §5 "5-step green ramp replacing v2's red ramp — needs new stops, not a hue-rotate." Floor is --v3-surface-elevated (neutral, "no activity"), each step progressively more saturated green, hottest step anchored to --v3-accent itself. HSL components (not hex) to match every other --v3-* token's alpha-compositing pattern. */ --v3-heat-0: var(--v3-surface-elevated); --v3-heat-1: 146 55% 85%; --v3-heat-2: 146 65% 68%; --v3-heat-3: 146 75% 50%; --v3-heat-4: var(--v3-accent); /* Old bare --neutral-* scale (no "color-" prefix) — a genuinely distinct, pre-existing, theme-INVARIANT scale (issue #6 Phase 1.3), separate from the new theme-flipping --color-neutral-* ramp above. Confirmed via grep before deciding to keep it: only --neutral-900 currently has a live call site (.tooltip-bubble's fixed-dark-in-both-themes background), but the whole scale is kept, unchanged, per this task's own "if genuinely still needed for something unrelated to the redesign, keep it" instruction — out of scope for the #297 color redesign, not deleted. */ --neutral-50: #f8fafc; --neutral-100: #f1f5f9; --neutral-200: #e2e8f0; --neutral-400: #94a3b8; --neutral-500: #64748b; --neutral-700: #334155; --neutral-900: #0f172a; /* DELETED (do not reintroduce, issue #297): --color-brand-gold, --color-brand-rose, --gradient-alpenglow, --color-brand-gold-ink, --color-warning-ink, --color-brand-rose-ink, --color-ink-on-gold, old --accent-50/400/500 (orange set), bg-grid-glow / text-gradient-brand classes. --color-p3/--color-p3-ink were also removed here at the time, then reinstated in issue #301 (Phase 5) as their own token pair — see the priority-mapping comment above `:root`'s --color-p0 block for why. */ /* ============================================================ v3 "developer portfolio" redesign (issue #416, Phase 1 — #420). design-system.md §2/§4/§5 tokens: HSL-*components* (not full color values), so alpha compositing (e.g. hsl(var(--v3-divider) / 0.6)) works the same way the portfolio source does. Kept as a separate `--v3-*` layer rather than overwriting --color-bg/--color-accent/etc above — this phase only restyles .btn-primary/.btn-secondary/.field-input/ .tag-chip/.card (the "primitives" this issue scopes), not every one of the ~40 v2-token call sites elsewhere in this file. Those get migrated surface-by-surface in Phases 2-5, per design-system.md's own phased rollout note — do not delete the --color-* block above until every phase lands. Dark-theme values for the theme-flipping tokens below live in `:root[data-theme='dark']`. */ /* issue #440 — --v3-bg/--v3-surface/--v3-surface-elevated used to be a pure white/cool-blue-white HSL triple with no relation to this app's actual warm-neutral --color-bg/--color-surface/--color-surface-raised hex values. Harder to notice in light theme (white vs. off-white reads similar), but the same mismatch is stark in dark theme (see that block's own comment) — retuned to the exact HSL-component equivalent of the real tokens so every live glass surface (not just the opaque fallback paths #435 already fixed) renders the correct, consistent hue. */ --v3-bg: 0 4% 95%; --v3-text: 220 20% 8%; --v3-accent: 146 88% 38%; --v3-accent-muted: 146 92% 30%; --v3-accent-glow-alpha: 0.28; --v3-surface: 0 2% 92%; --v3-surface-elevated: 0 22% 96%; --v3-divider: 220 12% 90%; --v3-text-muted: 220 10% 44%; --v3-gradient-start: 146 88% 38%; --v3-gradient-end: 160 80% 35%; /* design-system.md §2 — light-mode-only text-safe accent variant; base --v3-accent measures ~2.8:1 on --v3-bg, short of the 4.5:1 body-text floor. This starting value (~6.5:1 on white) still needs a real contrast-tool re-check per §9's review checklist before any phase ships paragraph-size accent text with it — flagged here, not silently trusted. */ --v3-accent-ink: 146 92% 22%; /* Theme-invariant — declared once here, read by both themes. */ --v3-radius-sm: 0.5rem; --v3-radius-md: 0.75rem; --v3-radius-lg: 1rem; --v3-shadow-glow: 0 20px 50px -30px hsl(var(--v3-accent) / 0.6); --v3-shadow-glow-lg: 0 30px 80px -40px hsl(var(--v3-accent) / 0.55); --font-heading-v3: "Sora", var(--font-heading); --font-body-v3: "Outfit", var(--font-body); --font-mono-v3: "JetBrains Mono", var(--font-mono); } :root[data-theme='dark'] { --color-bg: #141312; --color-surface: #1E1C1B; --color-surface-raised: #252221; --color-border: color-mix(in srgb, #F1EFED 32%, transparent); --color-border-strong: #F1EFED; --color-divider: color-mix(in srgb, #F1EFED 32%, transparent); --color-text: #F1EFED; --color-text-muted: color-mix(in srgb, #F1EFED 60%, transparent); --color-text-faint: color-mix(in srgb, #F1EFED 45%, transparent); /* v3 (issue #416 Phase 5 — #430) — dark-theme half of the green retint above, same hue as --v3-accent's dark value (hsl(145 92% 55%)). Live- verified: base --color-accent (#23F67B) on --color-bg (#141312) clears 12.85:1 — dark theme's existing --color-ink-on-accent (near-black, below) already reads fine directly against the base accent, so no darkened-fill workaround is needed here the way light theme's --color-accent-600 is (dark theme's own --color-accent-600 stays a *lighter* hover step, per the pre-existing "hover steps LIGHTER on dark ground" convention this replaces). */ --color-accent: #23F67B; --color-accent-100: #0D2617; --color-accent-200: #103720; --color-accent-300: #124929; --color-accent-400: #14713B; --color-accent-500: #23F67B; --color-accent-600: #47F590; /* hover steps LIGHTER on dark ground; 13.30:1 with dark ink */ --color-accent-700: #8CF2B7; /* accent as text; 14.68:1 on --color-bg */ --color-accent-800: #8CF2B7; --color-accent-900: #BEF4D4; --color-neutral-100: #1E1C1B; --color-neutral-200: #2B2827; --color-neutral-300: #3A3634; --color-neutral-400: #4A4643; --color-neutral-500: #6B6663; --color-neutral-600: #8C8783; --color-neutral-700: #ADA8A4; --color-neutral-800: #D7D3D3; --color-neutral-900: #EAE7E7; --color-danger: var(--color-accent-700); --color-danger-bg: var(--color-accent-100); --color-success: var(--color-neutral-800); --color-success-bg: var(--color-neutral-200); --color-warning: var(--color-accent-700); --color-warning-bg: var(--color-accent-100); /* issue #462 — dark-theme half of the light block's P2/P3 override above (see that comment for the full rationale). Dark theme's accent ramp runs the opposite direction from light's (100 is near-black, 900 is palest — see --color-accent's own dark-theme comment), so "descending intensity toward P3" here means stepping *down* toward the ramp's darker end (300 → 200), the same direction P1 already uses relative to P0 (400, darker/more muted than the vivid 500 base). Live-verified: P2-ink (--color-accent-700, reused from P1) clears 13.70:1 on --color-bg, 12.53:1 on --color-surface; P3-ink (--color-accent-600) clears 13.02:1 on --color-bg, 11.91:1 on --color-surface — both far past WCAG AA, dark theme's accent ramp stays highly legible at every step unlike light theme's tighter margin at the low end. */ --color-p0: var(--color-accent); --color-p0-ink: var(--color-accent-800); --color-p0-bg: var(--color-accent-100); --color-p1: var(--color-accent-400); --color-p1-ink: var(--color-accent-700); --color-p1-bg: var(--color-accent-100); --color-p2: var(--color-accent-300); --color-p2-ink: var(--color-accent-700); --color-p2-bg: var(--color-accent-100); --color-p3: var(--color-accent-200); --color-p3-ink: var(--color-accent-600); --color-p3-bg: var(--color-accent-100); --color-ink-on-accent: #141312; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.18); --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 3px 10px rgba(0,0,0,.55); --shadow-lg: 0 12px 32px rgba(0,0,0,.65); --shadow-xl: 0 24px 48px rgba(0,0,0,.7), 0 8px 16px rgba(0,0,0,.4); --shadow-brand: 0 8px 24px color-mix(in srgb, var(--color-accent) 24%, transparent); /* v3 redesign (issue #416, Phase 1 — #420) — dark-theme HSL-component tokens. See the light `:root` block's matching comment above --v3-bg for why this is a separate `--v3-*` layer, not an overwrite of --color-* above. --v3-radius-*/--v3-shadow-glow*/--font-*-v3 are theme-invariant, declared once in the light block only. issue #440 — --v3-bg/--v3-surface/--v3-surface-elevated were a cool blue-gray (hue 220) with no relation to this app's actual warm-neutral --color-bg/--color-surface/--color-surface-raised (#141312/#1E1C1B/ #252221) — real, reported bug: every *live* glass surface reading these tokens directly (`.app-topbar`, `.app-sidebar`, `.card`, etc. — not just the opaque `@supports`/`[data-scrolling]` fallback paths #435 already fixed) rendered a visibly lighter, cooler-toned band at all times, not only during scroll, most obvious on the always-sticky/always-blurred topbar. Retuned to the exact HSL-component equivalent of the real hex values so every reader — live and fallback alike — resolves to one consistent color. */ --v3-bg: 30 5% 7%; --v3-text: 0 0% 98%; --v3-accent: 145 92% 55%; --v3-accent-muted: 145 92% 45%; --v3-accent-glow-alpha: 0.38; --v3-surface: 20 5% 11%; --v3-surface-elevated: 15 6% 14%; --v3-divider: 220 12% 22%; --v3-text-muted: 220 12% 70%; --v3-gradient-start: 145 92% 55%; --v3-gradient-end: 165 80% 46%; /* design-system.md §2 — dark theme's base --v3-accent already clears ~13:1 on --v3-bg, no separate text-safe ink variant needed. */ --v3-accent-ink: 145 92% 55%; /* v3 redesign (issue #416, Phase 4 — #428) — dark-theme heat-ramp middle stops. --v3-heat-0/-4 flip automatically via --v3-surface-elevated/ --v3-accent above; only the two middle stops need their own dark values (a straight light-mode carry-forward reads too washed-out against the near-black --v3-bg). */ --v3-heat-1: 145 30% 22%; --v3-heat-2: 145 55% 32%; --v3-heat-3: 145 75% 42%; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; } html, body { min-height: 100%; } /* Text size preference (issue #495, revised by issue #496 follow-up) — sets `--text-scale` (:root's default `1`) rather than root `font-size`. Every `--text-*` token reads `--text-scale` directly (see the `:root` block above), so only font-size responds to this preference now — `--space-*`, `--radius-*`, icon-size tokens, and anything else `rem`-based that isn't a `--text-*` token stays fixed regardless of text size. Applied synchronously before first paint by themeBootstrap.js to avoid a layout flash on reload. */ html[data-text-size='large'] { --text-scale: 1.125; } html[data-text-size='largest'] { --text-scale: 1.25; } body { font-family: var(--font-body); /* issue #206 §5 follow-up — was a page-wide radial gold/rose glow behind every single screen (dashboard, onboarding, progress, settings); found live to read as a large, high-frequency gradient fill, the same category of thing the earlier "no gradients anywhere, solid colors only" user decision already removed from the brand mark/progress ring/template-card border (see `--gradient-alpenglow`'s own comment below — it has zero remaining call sites app-wide) — this was simply a spot that decision's original sweep had missed, since it targeted component-level gradient fills, not this page-wide ambient background. Solid `--color-bg` now, matching the token's own documented "warm neutral, not pure white/black" role. */ background: var(--color-bg); color: var(--color-text); line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background-color 200ms ease, color 200ms ease; } .app-shell { min-height: 100vh; min-height: 100dvh; } /* issue #6 Phase 9 — off-screen until focused (Tab from the page's very top), then pinned to the top-left corner above everything else. `top: -100%` rather than `display: none`/`visibility: hidden` so it stays in the keyboard tab order — a hidden-but-still-focusable link is the whole point of a skip link. */ .skip-link { position: fixed; top: -100%; left: 12px; z-index: 999; background: var(--color-text); color: var(--color-bg); padding: 10px 18px; border-radius: var(--radius-md); font-weight: 700; font-size: var(--text-base); text-decoration: none; transition: top var(--duration-fast) var(--ease-out); } .skip-link:focus { top: 12px; } .skip-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Animations */ /* Issue #102 follow-up — this used to be `... both`, which per the `animation-fill-mode: forwards` half of `both` keeps the `to` keyframe's declared properties applied forever after the animation completes, not just during it. `transform: translateY(0)` is a visual no-op at rest, but a *declared* `transform` (any value, even an identity one) still establishes a new containing block for every `position: fixed` descendant — which silently broke any fixed-position element anywhere inside `.app-shell-2.dashboard.fade-in` (e.g. a `position: fixed` dropdown menu, reported live: it rendered positioned relative to this div's full scrollable content height instead of the viewport, landing thousands of pixels off-screen). `.fade-in` is only ever applied once on initial mount of a fresh page-level container (`authShell.js`, `onboarding.js`, `dashboard.js` — never toggled on/off an existing node), so there is nothing to "snap back" to once the animation ends; dropping the fill-mode lets the element fall back to its normal cascade (`transform: none`) the instant the animation finishes, which is visually identical to `translateY(0)` and removes the phantom containing block. Never add `forwards`/`both` back to this rule without confirming nothing depends on the `to` keyframe's values persisting — if you need that, apply the equivalent resting styles as a normal (non-animation) rule instead, so a plain `transform: none` there can never be confused with a "some transform is set" state. */ /* issue #499 (D3) — route fade retuned from a literal 420ms to the --duration-route token (180ms), per the motion pass's exact spec and its "no animation longer than 250ms except the sheet" testing requirement. */ .fade-in { animation: fade-in var(--duration-route) var(--ease-out); } @keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes slide-panel { from { transform: translateX(100%); } to { transform: translateX(0); } } /* Brand */ .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; transition: opacity 0.15s ease; } a.brand:hover { opacity: 0.85; } a.brand:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: var(--radius-md); } /* intentional: fixed white glyph on solid accent fill, same in both themes (issue #116) — design-system.md §1's "triangle glyph, flat accent fill" brand mark. issue #298 — radius0'd (was a stray 12px rounded-square left over from Phase 1's token pass, since this file is component-level, not a token) and the glow shadow removed entirely (§2: "No glows, no drop-shadows on flat surfaces" — this was a leftover fixed gold-tinted rgba() glow from the pre-#297 Alpenglow direction). */ /* Requested directly: the triangle glyph switches from white to black on the green fill — this is now the app's one official brand mark (also drives the favicon/PWA icons via scripts/generate-brand-assets.mjs, which rasterizes public/favicon.svg — that file's own fill needs the same black-on-green update, done alongside this, to stay in sync). */ .brand-mark { width: 40px; height: 40px; background: var(--color-accent); color: #000; font-weight: 900; font-size: 20px; display: grid; place-items: center; } /* issue #298 — design-system.md §1: "wordmark ASCENT in Archivo 800 uppercase +0.05em". Was missing the uppercase/tracking transform since Phase 1. */ .brand-name { font-weight: 800; font-size: var(--text-xl); text-transform: uppercase; letter-spacing: 0.05em; } .brand-tagline { font-size: 12px; color: var(--color-text-muted); font-weight: 600; } /* ============================================================ ZeBeyond-inspired design language (issue #155) — eyebrow labels, gradient headline text, two-tone tag chips, icon tiles, floating pill nav, grouped icon buttons, and a decorative grid+glow background layer. See the "Visual design language" section of .claude/rules/ui-styling.md for the reference this replaces and which call sites use which class. ============================================================ */ /* Uppercase, letter-spaced kicker label ("CASE STUDIES", "WHY CHOOSE US" in the reference) — generalizes the ad hoc uppercase-label pattern already used piecemeal by .current-roadmap-badge/.toolbar-label/ .panel-kicker into one reusable class. */ /* v3 (issue #416 Phase 3) — recolored from the v2 red/orange --color-accent-700 to the v3 green accent (design-system.md §3's kicker spec), both themes. authMarketingPanel.js's always-dark panel keeps its own fixed-literal override (.auth-marketing-eyebrow, below) regardless of this change. */ .eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--v3-accent-ink, hsl(var(--v3-accent))); } /* v3 (issue #416 Phase 3) — design-system.md §2/§4 explicitly re-enables gradients for headline text ("Gradients are back and encouraged"), reversing the Alpenglow-era "no gradients, solid only" decision this class used to follow (see the removed comment this replaces). One accent phrase inside an otherwise plain-color heading only — never a fully gradient- filled heading, since that can't be evaluated by contrast tooling against a single foreground color. */ .text-gradient-brand { background: linear-gradient(135deg, hsl(var(--v3-gradient-start)), hsl(var(--v3-gradient-end))); -webkit-background-clip: text; background-clip: text; color: transparent; } @supports not (background-clip: text) { .text-gradient-brand { color: var(--v3-accent-ink, var(--color-accent-700)); } } /* v3 (issue #416 Phase 3) — design-system.md §3's hero-kicker dot, "un-retired": a small glowing accent dot paired with an .eyebrow label. */ .eyebrow-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--v3-accent)); box-shadow: 0 0 8px hsl(var(--v3-accent) / 0.8); flex-shrink: 0; } /* Two-tone tag-chip pair (the "EPOP CONCEPT" + "AUTOMOTIVE" chip pattern) — built on the same --chip-height/--chip-padding-x/--chip-radius scale .badge/.resource-count already use, so a tag chip is pixel-identical in height to every other small pill in the app; only the neutral/accent color pairing is new. */ .tag-chip { display: inline-flex; align-items: center; height: var(--chip-height); padding: 0 var(--chip-padding-x); /* v3 (issue #416 Phase 1 — #420): design-system.md §5 "chips: --radius-md, glass fill, 1px divider border" — was --radius-full/flat surface. */ border-radius: var(--v3-radius-md); font-size: var(--text-base); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); white-space: nowrap; /* issue #455 — flat content surfaces must stay close to --color-bg's own brightness, not --color-surface-raised (meaningfully lighter in dark theme); see .phase-card's own comment for the full history. */ background: hsl(var(--v3-surface)); border: 1px solid var(--color-divider); color: var(--color-text-muted); } .tag-chip-accent { background: hsl(var(--v3-accent) / 0.12); border-color: hsl(var(--v3-accent) / 0.4); color: var(--v3-accent-ink, var(--color-accent-700)); } /* v3 (issue #416 Phase 1 — #420) — the shared glass-card primitive design-system.md §4 calls for (".card and any elevated panel"). No generic .card class existed before this phase — every card-like surface in the app (`.phase-card`, `.template-card`, `.kpi-tile`, etc.) is its own bespoke class. Built here per this issue's scope ("base primitives"), not yet wired into any of those existing surfaces — that migration is Phase 2+'s per-page work, same "built, not yet adopted" precedent as `.tabs` (issue #125, `.claude/rules/ui-styling.md`). Reach for `.card` on any genuinely new card surface in the meantime rather than inventing a fresh one-off class. */ .card { position: relative; border-radius: var(--v3-radius-lg); /* issue #455 — flat content surfaces must stay close to --color-bg's own brightness, not --color-surface-raised; see .phase-card's own comment. */ background: hsl(var(--v3-surface)); border: 1px solid var(--color-divider); transition: transform var(--duration-slow, 300ms) var(--ease-out), box-shadow var(--duration-slow, 300ms) var(--ease-out); } /* Hairline gradient border (mask-composite technique, portfolio's `.card::before` verbatim) — a 1px gradient ring drawn as a pseudo-element rather than a real `border`, so the base 1px divider border above still renders underneath it. */ .card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, hsl(var(--v3-gradient-start) / 0.4), hsl(var(--v3-gradient-end) / 0.05)); /* intentional: mask-composite technique — #000 is an opaque-alpha marker for the mask layer, not a rendered color (issue #416 Phase 1). */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .card:hover { transform: translateY(-4px); border-color: hsl(var(--v3-accent) / 0.4); } /* Small rounded-square icon container for card headers (the icon-topped case-study-card pattern) — wraps a createIcon()/createDecorativeIcon() node, replacing a bare inline icon with no visual container. */ .icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--color-surface-raised); border: 1px solid var(--color-border); color: var(--color-accent-700); } /* issue #155 v2 Phase C — landing-scoped recolor; falls back to mint in light theme. */ :root[data-theme='dark'] .icon-tile { color: var(--color-accent-700); } /* issue #297 — design-system.md §5 explicitly merges .btn-cta into .btn-primary ("`.btn-cta` is merged into `.btn-primary`"). landing.js's 3 call sites now read className: 'btn-primary'/'btn-primary btn-lg' directly — no separate CTA class/shape survives this phase. */ /* Bordered pill container that visually groups adjacent icon-only buttons (the reference's search/mail/sign-in icon cluster) — a shared wrapper, not a change to the icon buttons themselves. */ /* Issue #444 — this container was described as a "pill" in the comment above but rendered at --chip-radius (12px, a rounded rect), while every other chip/badge-shaped element in the app (.badge, .filter-chip, .resource-count, .sync-pill next to it in this same row, etc.) uses the fully-rounded --radius-full capsule shape — a real, live-reported "topbar controls don't match the rest of the app's shape language" bug. --radius-full here, and on the child buttons/.sync-pill below, makes this container an actual pill, matching the rest of the app instead of being the one rounded-rect outlier next to it. */ .icon-btn-group { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface-raised); } /* Every real call site (topbar's search/avatar-menu buttons) already resets its own border/background for its unstyled-until-hover look (.app-topbar-command-btn, .app-topbar-avatar-btn); this is a defensive reset for any future child that doesn't. */ .icon-btn-group > * { border: none; background: transparent; } /* issue #297 — design-system.md §2 explicitly bans this class by name ("No glows, no bg-grid-glow"), not just gradient color washes generally — the previous repeating-linear-gradient grid-line texture (a structural, not color, gradient) is removed outright rather than retuned. Kept as a named no-op class (matching every existing JS call site in landing.js/ authMarketingPanel.js, same "keep the name, drop the effect" treatment already used for .text-gradient-brand above) so this stays a CSS-only pass with zero JS diffs — the wrapping section is now a plain flat surface with no decorative layer at all, matching §1's "flat, architectural" identity. */ .bg-grid-glow { position: absolute; inset: 0; pointer-events: none; } /* Theme toggle */ .theme-toggle { font-size: 17px; line-height: 1; } /* Buttons (issue #206 §3.1 — Alpenglow redesign). Base rule is variant-agnostic layout only; each variant below sets its own bg/text/ border/hover/shadow. issue #297 — text-decoration: none moved here (was only ever set on the now-removed .btn-cta) so every .btn variant used on an (landing.js's "Start for free"/"Sign in" links use .btn-primary/.btn-ghost/.btn-secondary, not just the old CTA class) is covered by construction instead of needing its own per-variant override. */ /* issue #338 — `justify-content: center` restored to the base rule, reversing issue #309's flush-left change: the product owner explicitly requested centered button labels after seeing the sign-in screen (see design-system.md §4, updated in the same PR to state the new rule). Any trailing icon that previously relied on `margin-left: auto` to push itself right against a flush-left label now just centers alongside the label text as part of the same centered group — checked every `.btn`-classed call site, none currently set `margin-left: auto` on a child, so no follow-up change was needed there. `.btn-icon` (below) already centers its single icon child; this rule now agrees with it instead of deliberately diverging, since a square icon-only button was never covered by the old flush-left rule to begin with. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: 10px var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; text-decoration: none; font: inherit; font-weight: var(--font-weight-bold); font-size: var(--text-base); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } /* Primary — filled accent, fixed ground-colored text in both themes (see --color-ink-on-accent's own comment above for the cross-theme contrast writeup this token exists to solve). issue #297: also the target of the .btn-cta merge above — every former .btn-cta call site (landing.js) now renders through this rule directly. Fill reads --color-accent-600, not the base --color-accent — see that token's own comment for the axe-caught contrast fix this is (dark theme's base --color-accent already passes with dark ground-text at 5.88:1 and is intentionally left as-is via that token's own light/dark values; only light theme needed the darkened fill). */ /* v3 (issue #416 Phase 1 — #420): design-system.md §5 ".btn-primary — gradient fill, --radius-lg, --shadow-glow resting -> --shadow-glow-lg + lift on hover." Text is literal black in both themes, matching the portfolio source (its gradient is always light green) — per §5, verify this still passes contrast against the lightest gradient stop before this class ships on a phase-owned surface; not yet re-checked here. */ .btn-primary { background: linear-gradient(135deg, hsl(var(--v3-gradient-start)), hsl(var(--v3-gradient-end))); /* intentional: fixed black, same in both themes — the portfolio source's gradient is always light green regardless of theme (issue #416 Phase 1). */ color: #000; border-color: transparent; box-shadow: var(--v3-shadow-glow); } .btn-primary:hover:not(:disabled) { box-shadow: var(--v3-shadow-glow-lg); transform: translateY(-2px); } .btn-primary:disabled:hover { box-shadow: var(--v3-shadow-glow); transform: none; } /* Secondary — glass surface, per design-system.md §5. */ .btn-secondary { /* issue #455 — stay close to --color-bg brightness; see .phase-card. */ background: hsl(var(--v3-surface)); color: var(--color-text); border-color: var(--color-divider); } .btn-secondary:hover:not(:disabled) { border-color: hsl(var(--v3-accent) / 0.4); color: var(--v3-accent-ink, var(--color-accent)); transform: translateY(-2px); } /* Ghost/tertiary — transparent until hovered. */ .btn-ghost { background: transparent; border-color: transparent; color: var(--color-text-muted); } .btn-ghost:hover:not(:disabled) { background: var(--color-surface-raised); } /* Danger — filled, same lift treatment as primary. `--color-danger` is `--color-accent-700` (design-system.md's "danger reuses the accent ramp" rule) — a dark red in light theme, a light pink in dark theme (it's tuned for use as *text*, not a button fill). `color: var(--color-text)` here measured 2.32:1 light / 1.32:1 dark against that fill — both catastrophic contrast failures, found via a real relative-luminance check (issue #301 follow-up). `--color-ink-on-accent` (the same text token `.btn-primary` already uses against the base `--color-accent` fill) clears 6.41:1 light / 12.23:1 dark instead. */ .btn-danger { background: var(--color-danger); color: var(--color-ink-on-accent); border-color: var(--color-danger); box-shadow: var(--shadow-sm); } .btn-danger:hover:not(:disabled) { box-shadow: var(--shadow-md); transform: translateY(-1px); } .btn-danger:disabled:hover { box-shadow: none; transform: none; } /* Danger, text-only variant (e.g. an inline "Delete" affordance that isn't a full filled button). */ .btn-danger-text { background: transparent; border-color: transparent; color: var(--color-danger); } .btn-danger-text:hover:not(:disabled) { background: var(--color-danger-bg); } /* Issue #6 Phase 5.3 — page-agnostic submit-button loading spinner (setButtonLoading(), src/ui/utils/buttonLoading.js). Same sizing/animation as the pre-existing .save-badge .spin (dashboard.js), promoted to a standalone class so any button can use it, not just the save badge. */ .btn-spinner { width: 12px; height: 12px; border-radius: 50%; /* intentional: neutral gray track works against any --color-surface value in either theme; the spinning edge is currentColor (issue #116) */ border: 2px solid rgba(127, 127, 127, 0.3); border-top-color: currentColor; animation: spin 1s linear infinite; flex-shrink: 0; } .btn-block { width: 100%; } .btn-sm { min-height: 34px; padding: 6px 12px; font-size: var(--text-base); } .btn-lg { min-height: 48px; padding: 12px 24px; font-size: var(--text-base); } /* Re-centers explicitly (issue #309) — `.btn`'s own base rule no longer centers, but a square icon-only button has no text "label" for the flush-left rule to apply to; its icon should stay centered in the box. */ .btn-icon { width: 36px; height: 36px; padding: 0; font-size: 22px; line-height: 1; justify-content: center; } .link { color: var(--color-accent-700); font-weight: 700; text-decoration: none; } /* issue #155 v2 Phase D3 (full completion pass) — the app's generic inline-link class; straight text swap. */ :root[data-theme='dark'] .link { color: var(--color-accent-700); } .link:hover { text-decoration: underline; } /* Form fields */ .field { display: grid; gap: 6px; } .field-label { font-size: var(--text-base); font-weight: 700; color: var(--color-text); opacity: 0.85; } /* v3 (issue #416 Phase 1 — #420): design-system.md §5 ".input — glass fill, 1px divider border, --radius-md, accent caret, accent-glow ring on focus." */ .field-input { width: 100%; padding: var(--space-3); border-radius: var(--v3-radius-md); border: 1px solid var(--color-divider); /* issue #455 — stay close to --color-bg brightness; see .phase-card. */ background: hsl(var(--v3-surface)); color: var(--color-text); font: inherit; font-size: var(--text-base); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } /* §6 — accent-glow ring on focus, in addition to (not instead of) the :focus-visible outline every other focusable element already has. */ .field-input:focus { outline: none; border-color: hsl(var(--v3-accent)); box-shadow: 0 0 0 3px hsl(var(--v3-accent) / 0.15); } .field-input.compact { padding: var(--space-2) 10px; font-size: var(--text-base); } /* issue #297 — design-system.md §5's "flat surface fill, 1px divider border, accent caret, accent border on focus" input spec. .field-input (above) is this app's one input base class (no separate .input exists app-wide) and already satisfied every part of that spec except the caret color. */ .field-input, .search-input, .import-paste-area { caret-color: var(--color-accent); } /* Segmented control (design-system.md §5) — for exclusive-choice groups (priority filter, theme picker; settings.js's Text size row, issue #495, this control's first real call site). `border-radius` + `overflow: hidden` on the `.seg` container (not on each `.seg-item`) rounds the group's outer corners while clipping every inner item to a plain rectangle — the standard segmented-control technique, and simpler than rounding only the first/last item's outer corners by hand. */ .seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .seg-item { padding: var(--space-2) var(--space-4); background: var(--color-surface); color: var(--color-text); border: none; font: inherit; font-weight: var(--font-weight-bold); font-size: var(--text-base); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .seg-item + .seg-item { border-left: 1px solid var(--color-border); } /* --color-accent-600, not the base --color-accent — same axe-caught contrast fix as .btn-primary above, since this is also body-size text on a solid accent fill. */ .seg-item[aria-selected='true'], .seg-item.active { background: var(--color-accent-600); color: var(--color-ink-on-accent); } .seg-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } .form-message { min-height: 20px; font-size: var(--text-base); font-weight: 600; color: var(--color-text-muted); } .form-message.error { color: var(--color-danger); } .form-message.success { color: var(--color-success); } /* Issue #444 — inside a `.modal-card`'s translucent/blurred glass background (unlike the opaque page backgrounds every other `.form-message` call site sits on), `--color-text-muted`'s contrast against whatever page content is blurred underneath is close enough to the 4.5:1 AA floor that ordinary render variance (scroll position, which dashboard content happens to be behind the modal) can tip it under — reproduced locally as a real, non-sampler-false-positive axe failure (measured 4.48:1), independent of any other change in this PR. Full-contrast `--color-text` inside a modal is comfortably clear of this regardless of what's rendered behind it. */ .modal-card .form-message { color: var(--color-text); } /* Issue #121 item 1 — deliberately not .form-message.error: a Playwright locator scoped to that class needs to match exactly one element (summaryMsg's "N things need fixing" line), never this callout too. */ .import-corruption-hint { font-size: var(--text-base); font-weight: 600; color: var(--color-danger); margin: 0; } .form-error { color: var(--color-danger); font-size: var(--text-base); font-weight: 600; min-height: 18px; } .field-error { color: var(--color-danger); font-size: var(--text-base); font-weight: 600; min-height: 16px; } /* Password field with show/hide toggle */ .field-input-wrap { position: relative; display: grid; } .field-input-wrap .field-input { padding-right: 52px; } .password-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 4px 6px; cursor: pointer; color: var(--color-text-muted); font-size: var(--text-base); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--v3-radius-sm); line-height: 1; } .password-toggle:hover { color: var(--color-text); } .password-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* issue #155 v2 Phase D3 (full completion pass) — straight outline swap. */ :root[data-theme='dark'] .password-toggle:focus-visible { outline-color: var(--color-accent); } /* Issue #6 Phase 5.3 — inline ✓/✕ blur validation icon, shares .field-input-wrap with the password-toggle button above but must not overlap it — .has-toggle shifts the icon left and gives the input extra right padding to clear both. */ /* issue #136 Phase 2 follow-up — was text-based ('✓'/'✕' glyphs, sized via font-size); now holds a createIcon() svg, so it needs inline-flex centering instead of relying on line-height/font-size for alignment. */ .field-validation-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; pointer-events: none; } .field-validation-icon.valid { color: var(--color-accent-700); } .field-validation-icon.invalid { color: var(--color-danger); } /* issue #155 v2 Phase D3 (full completion pass) — straight icon-color swap. */ :root[data-theme='dark'] .field-validation-icon.valid { color: var(--color-accent-700); } .field-input-wrap.has-toggle .field-validation-icon { right: 46px; } .field-input-wrap.has-toggle .field-input { padding-right: 84px; } /* Password strength meter — 4 segment bar below the password field */ .strength-meter { display: flex; gap: 4px; margin-top: 4px; } .strength-segment { flex: 1; height: 3px; border-radius: 2px; background: var(--color-border); transition: background var(--duration-base) var(--ease-standard); } .strength-segment.weak { background: var(--color-danger); } .strength-segment.fair { background: var(--color-warning); } .strength-segment.strong { background: var(--color-success); } .field-label-row { display: flex; justify-content: space-between; align-items: center; } .forgot-link { background: none; border: none; padding: 0; font-size: 12px; font-weight: 600; color: var(--color-text-muted); cursor: pointer; line-height: 1; } .forgot-link:hover { color: var(--color-accent-700); text-decoration: underline; } .forgot-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; } .forgot-link:disabled { opacity: 0.5; cursor: not-allowed; } /* issue #155 v2 Phase D3 (full completion pass) — straight text/outline swap. */ :root[data-theme='dark'] .forgot-link:hover { color: var(--color-accent-700); } :root[data-theme='dark'] .forgot-link:focus-visible { outline-color: var(--color-accent); } .reset-success-msg { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-base); color: var(--color-text); line-height: 1.5; } /* v3 (issue #416 Phase 5 — #430) — reads --color-accent-600, not the base --color-accent: the checkmark glyph is body-text-size content hosted on a solid fill, the same "text-hosting fill needs the darkened step" pattern .btn-primary/.seg-item already document (--color-ink-on-accent clears only 2.68:1 on the base green in light theme; 5.90:1 on --color-accent-600). Dark theme's own --color-ink-on-accent is already dark ink, which reads fine straight against the (bright) base accent, so no fill change needed there. */ .reset-success-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent-600); color: var(--color-ink-on-accent); font-size: 13px; font-weight: 900; } :root[data-theme='dark'] .reset-success-icon { background: var(--color-accent); } /* Auth pages — issue #6 Phase 5.1: .auth-page is a two-column split (marketing panel + form) above the ≤1024px breakpoint tier, single-column (today's original centered-card layout) at/below it — see the responsive override at the bottom of this file, grouped with the other ≤1024px rules rather than a new breakpoint. */ .auth-page { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(360px, 1fr) min(440px, 100%); position: relative; } /* .auth-page-right carries the exact rules .auth-page itself used to have pre-Phase-5 (centers the card in its own column) — renamed, not rewritten. */ .auth-page-right { display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); position: relative; min-width: 0; } /* issue #206 §5 follow-up — was two radial gold/rose glows covering the entire auth-page right column; removed for the same "ambient gradient background reads as a high-frequency fill" reason as `body`'s own fix above. `.auth-page-bg` is now solid `--color-bg`, effectively a no-op layer (it exists mainly so `.auth-page-right`'s content can sit at a z-index above it without a separate background rule) — left in place rather than deleted in case a future non-gradient background treatment (a subtle pattern, etc.) wants this same fixed full-bleed layer again. `position: absolute`, not `fixed` — real bug, found live: `.auth-page-bg` is a DOM descendant of `.auth-page-right` (the right column only), but `position: fixed` ignores DOM nesting entirely and sizes `inset: 0` against the full viewport, not its parent. On a wide two-column sign-in page this painted the light `--color-bg` fill across the *entire* page — including over the always-dark `.auth-marketing` panel on the left, whose own fixed-white text (`.auth-marketing-headline` etc.) then read as barely-visible pale text on light cream instead of white-on-near-black. `pointer-events: none` hid this from click/hit-testing (`elementFromPoint`) the whole time, which is why it wasn't caught visually in normal use — nothing was ever clickable through it, only visually broken. `position: absolute` correctly scopes `inset: 0` to `.auth-page-right` (already `position: relative`, immediately above), matching what this layer was always meant to cover. */ .auth-page-bg { position: absolute; inset: 0; background: var(--color-bg); pointer-events: none; z-index: 0; } /* Left marketing panel (issue #6 Phase 5, redesigned in a follow-up after user feedback: the first cut looked sparse/empty on wide monitors — content pinned to the top-left of a huge flat-gradient column, plain emoji icons read as placeholder rather than finished). Fixed near-black background regardless of the site's own light/dark theme — this panel is intentionally always-dark, matching the ZeBeyond direction's near-black marketing surface (issue #155) rather than the previous solid brand-teal gradient fill. issue #206 §5 follow-up removed the two radial teal/cyan glows this comment used to describe (a leftover from the pre-Alpenglow ZeBeyond/lime pass, never retuned to gold/rose) — solid near-black now, same "no ambient background gradient anywhere in the app" decision as `body`/`.auth-page-bg` above; the diagonal-line texture below is unchanged. */ /* intentional: fixed literal, not a token, since this panel never reads the site's own light/dark theme tokens — same reasoning as the rest of this always-dark panel, issue #116. */ .auth-marketing { background: #0a0a0a; display: flex; flex-direction: column; align-items: center; padding: max(40px, env(safe-area-inset-top)) 56px max(40px, env(safe-area-inset-bottom)) max(56px, env(safe-area-inset-left)); position: relative; overflow: hidden; } /* intentional: fixed accent color on this panel's own fixed-dark background regardless of site theme (issue #116) — mirrors .eyebrow's layout (imported via the shared class) but can't read the theme-flipping --color-accent token here, same reasoning as every other fixed color on this panel. v3 (issue #416 Phase 3) — retuned from the v2 red/orange Modernist accent (#FF563C) to the dark-theme --v3-accent value (#23f67b, matching :root[data-theme='dark']'s --v3-accent at 145 92% 55%): this panel is always-dark regardless of site theme, so it always uses the dark-theme v3 accent value directly, same as before. */ .auth-marketing-eyebrow { color: #23f67b; margin: 0 0 var(--space-4); } /* intentional: flat, low-opacity fixed-white fill on this panel's own always-dark background regardless of site theme (issue #116) — flattened from a repeating-linear-gradient texture per design-system.md §2's "no gradients anywhere" rule (issue #406). */ .auth-marketing-bg-pattern { position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.03); pointer-events: none; } /* v3 (issue #416 Phase 5 — #430) — same decorative floating-orb treatment as `.landing-orb` (design-system.md §7), reused verbatim on this always-dark panel rather than reading the theme-flipping --v3-accent token, since the panel never changes with site theme (same reasoning as every other fixed color on it, see the comment above .auth-marketing-eyebrow). Disabled under prefers-reduced-motion by the same global `float`/`floatSlow` keyframe rule `.landing-orb` already relies on — no separate override needed here. */ .auth-marketing-orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0; } .auth-marketing-orb-1 { width: 260px; height: 260px; top: -50px; right: -60px; background: rgba(35, 246, 123, 0.22); /* intentional: fixed accent-green glow on this panel's always-dark background regardless of site theme (issue #116) */ animation: float 6s ease-in-out infinite; } .auth-marketing-orb-2 { width: 200px; height: 200px; bottom: 60px; left: -50px; background: rgba(38, 217, 113, 0.18); /* intentional: same always-dark-panel reasoning as -orb-1 above */ animation: floatSlow 10s ease-in-out infinite; } .auth-marketing-inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; max-width: 480px; } /* intentional: scoped override — .brand-name/.brand-tagline normally inherit --color-text (dark text), unreadable on this always-dark panel regardless of site theme (issue #116). */ .auth-marketing .brand-name, .auth-marketing .brand-tagline { color: #fff; } .auth-marketing .brand-tagline { opacity: 0.75; } .auth-marketing-brand { margin-bottom: 56px; } /* Vertically centers the headline/subhead/features block in whatever room is left between the brand mark (top) and the stat line (bottom), instead of the whole panel just center-aligning one small flex item — this is what actually fixes the "too much empty space" complaint on tall/wide viewports, not a smaller panel. */ .auth-marketing-content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; } /* intentional: every color below is a fixed white/white-alpha value against .auth-marketing's always-dark panel, not a theme token — the panel itself never changes with site theme (issue #116). */ .auth-marketing-headline { margin: 0; color: #fff; font-family: var(--font-display); font-size: clamp(32px, 3.2vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; } .auth-marketing-subhead { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: var(--text-base); line-height: var(--leading-loose); max-width: 40ch; } .auth-marketing-values { display: grid; gap: 22px; list-style: none; padding: 0; margin: 8px 0 0; } .auth-marketing-value { display: flex; gap: 16px; align-items: flex-start; } /* intentional: fixed white-alpha/accent-alpha, same always-dark panel as above (issue #116) — v3 (issue #416 Phase 5 — #430): icon-tile glass treatment (rounded, accent-tinted, subtle glow) replacing the flat white-alpha square, the same "still looks like the old UI" gap flagged live on this panel. */ .auth-marketing-value-icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--v3-radius-md); background: rgba(35, 246, 123, 0.14); border: 1px solid rgba(35, 246, 123, 0.3); box-shadow: 0 8px 20px -12px rgba(35, 246, 123, 0.6); color: #fff; } /* intentional: fixed white/white-alpha, same always-dark panel as above (issue #116) */ .auth-marketing-value-title { display: block; color: #fff; font-weight: 800; font-size: var(--text-base); margin-bottom: 2px; } .auth-marketing-value-text { display: block; color: rgba(255, 255, 255, 0.72); font-size: var(--text-base); line-height: var(--leading-normal); } /* intentional: fixed white-alpha divider/text, same always-dark panel as above (issue #116) */ .auth-marketing-stat { position: relative; z-index: 1; margin: 32px 0 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.72); font-size: var(--text-base); font-weight: 600; } .auth-page-inner { width: min(440px, 100%); position: relative; z-index: 1; display: grid; gap: 20px; } .auth-top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* Sign-out button added to the onboarding page's top row alongside the theme toggle — this page had no sign-out affordance anywhere before. */ .onboarding-top-actions { display: flex; align-items: center; gap: 8px; } .auth-brand { justify-self: start; } /* v3 (issue #416 Phase 3) — design-system.md §4 glass-surface treatment, matching .card's own recipe (surface/85 + blur-md + hairline border + accent-tinted shadow). Kept as its own class rather than switching to .card directly since this card also needs overflow: hidden for its head/body/foot padding structure, which .card's ::before hairline-border pseudo-element assumes isn't clipped. */ .auth-card-lg { position: relative; /* issue #455 — stay close to --color-bg brightness; see .phase-card. */ background: hsl(var(--v3-surface)); border: 1px solid var(--color-divider); border-radius: var(--v3-radius-lg); overflow: hidden; } .auth-card-head { padding: 28px 28px 0; } /* Issue #496 (C4) — full-width Sign in/Sign up switch, reusing the shared .seg/.seg-item classes (design-system.md §5) with a block layout override so both segments split the card's width evenly instead of the default inline-content sizing every other .seg use (priority filter, theme picker) relies on. */ .auth-mode-switch { display: flex; width: 100%; margin-bottom: 20px; } .auth-mode-switch .seg-item { flex: 1; text-align: center; } .auth-mode-switch-hidden { display: none; } .auth-title { font-family: var(--font-heading-v3, var(--font-display)); font-size: clamp(26px, 4vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .auth-subtitle { margin-top: 8px; color: var(--color-text-muted); font-size: var(--text-base); font-family: var(--font-body-v3, var(--font-body)); } .auth-card-body { padding: 24px 28px; display: grid; gap: 16px; } .auth-card-foot { padding: 0 28px 24px; font-size: var(--text-base); color: var(--color-text-muted); text-align: center; } .auth-form { display: grid; gap: 14px; } .remember-row { display: flex; align-items: center; gap: 8px; cursor: pointer; } .remember-checkbox { width: 15px; height: 15px; accent-color: var(--color-accent); cursor: pointer; flex-shrink: 0; } /* issue #155 v2 Phase D3 (full completion pass) — native checkbox accent-color, no text-contrast implication. */ :root[data-theme='dark'] .remember-checkbox { accent-color: var(--color-accent); } .remember-label { font-size: var(--text-base); color: var(--color-text-muted); font-weight: 600; user-select: none; } .auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--color-text-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .auth-divider::before, .auth-divider::after { content: ''; height: 1px; background: var(--color-border); } .auth-footnote { text-align: center; color: var(--color-text-muted); font-size: 12px; font-weight: 600; } /* Issue #496 (C4) — auth-page inputs are taller than the app-wide .field-input default (16px text already comes from --text-base, the type-scale floor, but a bare padding-driven height reads cramped at this card's larger scale). Scoped to .auth-form specifically, not a global .field-input change — every other form in the app keeps its existing height. */ .auth-form .field-input { min-height: 52px; } /* Onboarding template picker */ .onboarding-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); position: relative; } /* Issue #493 — widened from 880px. `.template-grid`'s card minmax grew 220px -> 290px to match the issue's design reference, and 880px was tuned for the old, narrower card: 3 columns of 290px + 2x16px gaps need >=902px, which 880px doesn't clear, so the grid silently dropped to 2-up at 1280px (real, caught via a live screenshot comparison — the issue's own testing requirement calls for 3-up at 1280px). 960px clears it with headroom while staying under --content-max (1080px, A1's own page-width cap). */ .onboarding-inner { width: min(960px, 100%); position: relative; z-index: 1; display: grid; gap: 28px; } .onboarding-head { text-align: center; display: grid; gap: 8px; justify-items: center; } .onboarding-back { justify-self: start; } .template-grid-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .template-grid-title { font-size: var(--text-lg); font-weight: 800; margin: 0; } .template-grid-meta { font-size: var(--text-base); color: var(--color-text-muted); } .template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: stretch; gap: 16px; } /* Issue #493 — "Create your own roadmap" is a full-width band above the card grid, not a grid cell. Rather than moving it out of the DOM (which would break every existing test/click-flow keyed on it being the grid's first `.template-card`), it stays the grid's first `[role="listitem"]` and this modifier just makes its own grid cell span every column. */ .template-grid > .template-full-band { grid-column: 1 / -1; } /* issue #206 §3.2 — clickable card (the whole card picks a template via the nested .template-card-pick button), so it gets the hover-lift treatment. Base surface swapped from --surface-glass to --color-surface per the spec's explicit "Base: var(--color-surface) bg" instruction — this drops the backdrop-filter glass effect this card family previously had. */ /* v3 (issue #416 Phase 3) — design-system.md §4 glass card grid ("cards are visually separate objects now, not cells in one ruled grid"). */ .template-card { height: 100%; /* issue #455 — stay close to --color-bg brightness; see .phase-card. */ background: hsl(var(--v3-surface)); border: 1px solid var(--color-divider); border-radius: var(--v3-radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); text-align: left; cursor: pointer; transition: transform var(--duration-slow, 300ms) var(--ease-out), box-shadow var(--duration-slow, 300ms) var(--ease-out), border-color var(--duration-slow, 300ms) var(--ease-out); font-family: inherit; color: var(--color-text); width: 100%; position: relative; } .template-card:hover, .template-card:has(.template-card-pick:focus-visible) { transform: translateY(-4px); border-color: hsl(var(--v3-accent) / 0.4); } .template-card.is-disabled { cursor: not-allowed; opacity: 0.6; transform: none; pointer-events: none; } .template-card.picking { opacity: 0.85; } /* `store.switchRoadmap()` (onClick, buildCard()/buildCustomCard(), onboarding.js) is a real Firebase round-trip whenever the template isn't already cached this session — the faint opacity dim above was the only feedback during that wait, which read as unresponsive lag rather than "loading" on anything slower than an instant local network (real, reported bug). This overlay (buildPickingOverlay(), onboarding.js) covers the whole card with a spinner + "Opening…" for the duration of the click. */ .template-card-picking-overlay { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; gap: 8px; background: var(--surface-glass); backdrop-filter: blur(2px); border-radius: var(--radius-lg); font-size: var(--text-base); font-weight: 700; color: var(--color-accent-700); } /* issue #155 v2 Phase D3 (full completion pass) — plain text on a glass overlay. */ :root[data-theme='dark'] .template-card-picking-overlay { color: var(--color-accent-700); } .template-card.picking .template-card-picking-overlay { display: flex; } .template-card-picking-overlay .btn-spinner { width: 16px; height: 16px; border-width: 2px; } /* issue #493 — the "pick this roadmap" primary control is a real