/* ────────────────────────────────────────────────────────── Feliz — base stylesheet Asian-minimalism: warm off-white, generous space, hairline dividers, single restrained accent. No shadows. ────────────────────────────────────────────────────────── */ /* v0.9.306 A11Y-2 — WCAG SC 2.3.3 / 2.2.2: honour the OS-level reduced-motion preference. Strips animation + transition + smooth-scroll across the whole SPA for users who set it (vestibular sensitivity, motion-sickness, AT). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* v0.9.306 A11Y-2 — WCAG SC 2.4.7: every focusable element gets a visible keyboard-focus ring. :focus-visible (not :focus) so mouse-clicks don't paint the ring; keyboard navigation does. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* THEME-1-FINISH-REGISTRY (2026-06-13) — finish engine per docs/briefs/THEME_FINISH_ENGINE_SPEC_2026-06-13.md. The two v0.9.362 presets become a six-finish registry: a finish is a curated token bundle ONLY — layout/type/spacing/icons never change per finish. Six finishes locked by Jayy (mock: _MOCK_theme_finishes_v1.html): nacht (factory default), dag (factory), gauge / linen / volt / pulse (premium). Old ids map forward: lime-night→volt, blue-day→dag. :root carries the structural tokens AND the nacht (default) appearance bundle, so first paint before the boot script lands on brand navy. Each finish gets its own :root[data-theme-preset=""] block below. JS additionally stamps data-theme-mode="dark|light" on so component-level mode overrides (further down + strength.html) apply to every dark/light finish without per-finish selector duplication. */ :root { /* Brand Nacht appearance tokens — "Sassu Ice" (COLOR_SYSTEM_RESEARCH 2026-08-05 §3). The accent moved from a pastel (#A8D8EA, C≈0.07) to an electric cyan on the same hue family (H≈195, C≈0.16): the pastel read as a haze against the near-black canvas, which was the "no vibrance" complaint. --on-accent stays near-black because the accent keeps a high lightness (L≈75%) and white text fails on it — same luminance rule the strength-bridge enforced inline at v0.9.185. */ --bg: #03040A; --surface: #0A0F1A; --ink: #F0F2F5; --ink-2: #ACB3C1; --muted: #6B7280; --line: #1E2533; --line-2: #151B26; --accent: #2AF0EA; --accent-2: #A0F7F4; --on-accent: #03040A; --temptation-line: #f59e0b; /* THEME-2 brand-surface tokens — finish-INVARIANT. Brand front-door surfaces (landing) render Deep Navy + Ice in every finish per APP_BRAND_MEDIA_UX_SPEC §0; these never get per-finish overrides. */ --brand-navy: #080C14; --brand-ink: #DCE8F0; --brand-ice: #A8D8EA; --brand-dim: #7A8AA0; /* BRAND-HORSE-HEAD plate + glyph — finish-INVARIANT navy disc behind the horse silhouette, and the canonical ice-blue silhouette itself. Both are brand-moment literals (the horse mark is a brand-moment artifact on its own fixed palette, identical to the auth-lockup brand treatment — no finish recolouring), same precedent as --brand-navy (lives in the :root token block, which css-hex-lint exempts). */ --horse-plate: #0E1320; --horse-glyph: #A8D8EA; --danger: #FF1744; /* v0.9.911 NUTRITION-PANTRY-METER-CLEANUP — semantic amber warning, used for the negative-stock clip border on pantry meters; lives in the :root token block (css-hex-lint exempt) so var(--warning) resolves everywhere. */ --warning: #D97706; /* v0.9.314 STRENGTH-BADGE-RED-RECOLOR — iOS-system-red notification dot. Preset-agnostic: the tabbar surface is dark in both presets, so the badge red is constant (no per-preset override). */ --badge-bg: #FF3B30; --on-badge: #FFFFFF; --ok: #00E676; /* v0.9.255 — semantic DOMAIN colours, independent of the preset --accent. COLOR-3: re-valued onto the chroma-capped Sassu Ice domain hues (training green H145, nutrition amber H55, mood lavender H300). Training left the blue family because the new signature --accent is cyan H195 — a blue domain hue sat close enough to read as "the accent, dimmed". Mood previously borrowed var(--accent) outright, which is exactly the collision the one-domain-hue-per-screen rule exists to stop; it now owns a hue. These hexes are the sRGB fallback — the @supports block below restates all three in oklch() for browsers that have it. */ --training: #67BB6B; --on-training: #0E1726; --nutrition: #E78A45; --mood: #AE96DA; /* NUTRITION-HYDRATION-CARD-AND-INTAKE-WATER-GOAL — water = semantic blue, deliberately distinct from the amber --nutrition macro accent. Every finish restates this (SASSU-DESIGN-GOLF-A fix #2) — a theme-invariant blue was one of the three colours that stayed put while the rest of the app re-skinned. */ --hydration: #4EA8DE; /* Low-but-valid progress (<60% of a goal). Deliberately NOT --danger: an unfinished ring is not a failure, and the alarm red next to the #FF3B30 badge was the loudest false-signal on the start screen. Muted, in-family per finish so it recedes rather than shouts. */ --progress-low: #5F7896; /* v0.9.326 A11Y-12 S38 — nutrition macro tokens lifted for dark bg. COLOR-3: the macro triad is now one harmonised set — equal lightness, chroma capped ~0.13, separated by hue alone — instead of three neons at three different lightnesses. --mac-p completes the set; the protein bar used to reach for the generic --ok, which is 0.21 chroma and the single loudest colour on the Nutrition screen. */ --mac-p: #57BC80; --mac-c: #E1A035; --mac-f: #E37F65; --fiber: #4DB6AC; --protein-2: #3DDC84; --favorite: #FF8F00; --on-danger: #FFFFFF; /* v0.9.328 — dark lift instead of dark darken. */ --surface-muted: rgba(255, 255, 255, 0.04); /* v0.9.368 STRENGTH-EDIT-MODE-MULTI-EXERCISE-GROUPING — subtle accent tint used for the "selected" row highlight in Edit mode. The 2026-06-01 contrast addendum: a full --accent fill made labels disappear in the prior pair-only flow, so the selected-row state lives at ~20% accent alpha on dark and ~14% on light. Label keeps --ink/--text legible. */ --accent-subtle: rgba(42, 240, 234, 0.20); /* Group palette — group_id (1..N) → color_token + on-color_token. Eight slots cycle on group_id. None equals --accent so the group channel reads separately from the active-state accent. Tokens hold on both presets; on-group-N inverts because the swatch is used at high saturation on chip+row-bar. Visual lock: _MOCK_strength_edit_mode_ grouping_v1.html (2026-06-02). */ --group-1: #00E5FF; --on-group-1: #001517; --group-2: #FFB300; --on-group-2: #1A0C00; --group-3: #B388FF; --on-group-3: #0E0420; --group-4: #FF7A6B; --on-group-4: #2A0904; --group-5: #1DE9B6; --on-group-5: #002115; --group-6: #76FF03; --on-group-6: #0A1C00; --group-7: #FF4081; --on-group-7: #33000F; --group-8: #536DFE; --on-group-8: #001033; /* v0.9.347 SETTINGS-IOS-STYLE-RESTYLE — iOS-Dark grouped-list tokens. systemGroupedBackground (#000) sits BELOW the card in luminance — the inverse of the light pattern (light has the screen grey + card white). */ --surface-bg: #05070D; --surface-card: #111827; --divider: #232B3A; --toggle-track-off: #29323F; --toggle-thumb-off: #FFFFFF; --section-label: #9CA3AF; color-scheme: dark; --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* SHAPE SCALE — the ONLY four corner radii in the app. Before SASSU-DESIGN-GOLF-A there were 34 distinct radius declarations including 19 raw px literals (2,3,5,7,9,11,13,18,20,99,999,9999px) and both 999px AND 9999px for the same pill; a per-component free-for-all is the single loudest "generated, not designed" tell. The three scalar values are the three that were already dominant (4px / 8px / 12px), so the large majority of components render pixel-identical to before — this is a consolidation, not a redesign. All three sit on the 4px grid. --radius-sm input, swatch, tight inner element --radius-md button, chip-with-corners, list row, small tile --radius-lg card, panel, sheet, modal, dialog --radius-pill anything whose radius should equal half its height Percentage radii (50% circle, 22% brand-plate squircle) stay percentages on purpose: they scale with the element, which no fixed token can do. */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* MOTION — one signature for the whole app (SASSU-DESIGN-GOLF-D). Before this there were 33 duration variants and 8 easing curves, so no two surfaces moved alike and the app read as assembled rather than designed. Motion is finish-INVARIANT: these live only here, never in a preset override, because how fast a sheet opens is not a colour choice. --dur-fast status/feedback — hover, focus, chip, small state flip --dur-base transitions — sheet, overlay, tab, bar, height/opacity --dur-slow one-shot choreography — entrance, celebration, flash The two below are PERIODS, not transition speeds: a spinner's revolution and a pulse's breath are functional rates, so they are carved out of the two-speed rule rather than crushed into it (a 200ms spinner is a strobe). --dur-loop one revolution / one tick-smoothing cycle --dur-pulse one breath of a looping pulse Easing collapses to a single decelerate curve. `linear` survives as the only second curve because constant rate is a requirement, not a taste: rotation and progress fills stutter under any eased curve. */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 500ms; --dur-loop: 800ms; --dur-pulse: 1600ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* M3 type scale (roles) — one fixed size + line-height per role so the nutrition surface normalises to a system instead of raw px 10-32. */ --text-label: 11px; --lh-label: 1.3; --text-body-sm: 12px; --lh-body-sm: 1.4; --text-body: 14px; --lh-body: 1.45; --text-title: 16px; --lh-title: 1.3; --text-headline: 24px; --lh-headline: 1.25; /* Overlay scrim — pure black alpha, NOT a tinted grey. A tinted scrim desaturates the white cards showing through it, which is why the Dag hub read washed-out (_AUDIT_hub_dag.png). Black alpha only darkens. */ --scrim: rgba(0, 0, 0, 0.5); /* HAIRLINE + GLOW (COLOR-2-GLOW-ELEVATION, research §2/§3) — the two primitives the elevation ladder below is built from. A hairline is a 1px light-on-dark (or ink-on-light) edge that says "this is a separate plane"; a glow is a large-blur, low-opacity accent bloom that says "this plane is live". Glows are derived from --accent so every preset gets its own signature bloom for free. They are deliberately expensive to spend: OLED burn, battery and gradient banding all scale with glowing area, so glow belongs on interactive / active / PR moments only, never as ambient decoration. */ --hairline: rgba(255, 255, 255, 0.06); --hairline-strong: rgba(255, 255, 255, 0.12); --glow-soft: 0 0 16px color-mix(in srgb, var(--accent) 20%, transparent); --glow-hard: 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent); /* ELEVATION LADDER — three rungs plus one upward-cast rung, per finish. Before SASSU-DESIGN-GOLF-A there were 53 ad-hoc box-shadow variants of which exactly ONE ever reached the screen, so there was no readable depth order at all. Assignment is semantic, not decorative: --elev-1 resting card / row / chip --elev-2 raised transient: popover, dropdown, FAB, drag-lift --elev-3 modal / dialog / fullscreen overlay panel --elev-up bottom-docked surfaces that rise from the edge (sheet, tabbar) The neutral drop-shadow is retired as the elevation language: it read as generic-default chrome and barely registered on a near-black canvas. Depth is now hairline-at-rest, hairline+glow once a plane is raised, so the ladder is legible on both finishes without any grey haze. */ --elev-1: 0 0 0 1px var(--hairline); --elev-2: 0 0 0 1px var(--hairline), var(--glow-soft); --elev-3: 0 0 0 1px var(--hairline-strong), var(--glow-soft); --elev-up: 0 -1px 0 0 var(--hairline), var(--glow-soft); /* FOCUS / SELECTION RINGS — zero-blur spread rings. Deliberately separate from the elevation ladder: a ring is an outline substitute (it never shifts layout the way border-width does), not a depth cue. The ring itself stays crisp; the glow rides behind it so focus reads at a glance without thickening the outline. */ --ring-focus: 0 0 0 3px var(--accent-subtle), var(--glow-soft); --ring-accent: 0 0 0 2px var(--accent), var(--glow-soft); /* Inset twin — for cells that must not paint outside their own box, so it stays glow-free by definition. */ --ring-accent-inset: inset 0 0 0 2px var(--accent); /* "You are here" double ring: surface gap, then accent halo. The single strongest positional signal in the app, so it carries the hard glow. */ --ring-current: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent), var(--glow-hard); /* NAV-CHAT-TAB-HUB-KEBAB-AND-20PCT-SMALLER — bottom-nav shrunk ~20% (was 96px) so the menu is less present, especially on small phones. safe-area inset is added separately (padding-bottom: --safe-bottom) so the home-indicator gap is untouched. */ --tabbar-h: 86px; --safe-bottom: env(safe-area-inset-bottom, 0px); /* v0.9.309 — A11Y-4 S6: iPhone 14+ notch + Dynamic Island. Auth wordmark/Sign-in form was overlapping the camera cutout. */ --safe-top: env(safe-area-inset-top, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* v0.9.375 CARDIO-MAP-LEAFLET-THEMABLE — per-tenant map theming tokens (spec §4.2). Live polyline tracks --accent (preset-aware); current- position marker stays a constant dark slate so it reads on the lime accent without re-mapping per preset. Planned-route overlay (dashed) uses a soft slate-blue so it doesn't compete with the live polyline. --cardio-tile-filter is empty by default; a tenant override sets e.g. `sepia(0.3) hue-rotate(220deg)` to brand-shift the OSM raster tiles without touching JS. The PwaMapProvider reads these via getComputedStyle on the map root every call, so a runtime theme swap recolours the next stroke automatically. */ --cardio-polyline: var(--accent); --cardio-marker: #1A1A2E; --cardio-planned: #5B8DEF; --on-planned: #FFFFFF; --cardio-tile-filter: none; /* DAY-CYCLE-REFINEMENTS (v0.9.466) — SLEEP phase rows render against a deliberately darker background so the "night band" reads as a separator between EVENING and MORNING. Dark preset leans into the night metaphor; light preset gets a soft cool-gray tint. */ --day-cycle-sleep-bg: #070A12; /* DAY-CYCLE-FULL-TOOL-AND-WIDGET-VISUAL-POLISH (v0.9.484) — per-phase thin left-bar accents that segment the EVENING / SLEEP / MORNING cards. Dusk indigo / deep slate / warm amber — the temperature gradient nudges the visual story of the day. Slippage pill palette stays monotone within each kind: late = soft indigo bg + indigo fg, early = soft green bg + green fg. Nacht preset (default :root). css-hex-lint exempt — all hex sits inside the :root token block. */ --day-cycle-evening-accent: #6E7BFF; --day-cycle-sleep-accent: #3F4859; --day-cycle-morning-accent: #F4A946; --slip-late-bg: rgba(110, 123, 255, 0.18); --slip-late-fg: #BFC6FF; --slip-early-bg: rgba(0, 230, 118, 0.18); --slip-early-fg: #5EE19A; /* MOOD-ANALYTICS-RAINBOW-AND-POLISH (v0.9.474) — semantic mood encoding palette, mirrors public/assets/js/calendar/_helpers.js MOOD_COLOR_STOPS. Drives the scatter X-axis rainbow background and the dot fills. The six stops map to mood scores 1, 3, 5, 6, 8, 10 along the X axis (red → orange → yellow → green → blue). Background opacity is preset-aware: nacht reads punchier on the dark surface, dag stays muted-pastel against the light surface. */ --mood-rainbow-1: #DC3C3C; --mood-rainbow-3: #EB8C28; --mood-rainbow-5: #E6C81E; --mood-rainbow-6: #B4D21E; --mood-rainbow-8: #3CB950; /* COLOR-3 — stop 9 exists to route the scale AROUND sRGB's dead zone, not to add a new semantic step. An SVG always interpolates in sRGB (there is no oklch option on that element), and the 8→10 leap is the one long hue arc in this scale: green H146 → blue H256. Straight-line sRGB across that arc dips through a desaturated slate around the midpoint, so moods 8.5–9.5 rendered greyer than moods on either side of them — the scale visibly lost saturation exactly where it should read "good". This stop is the OKLCH midpoint of 8 and 10, which keeps chroma up through the turn; with it in place the two short sRGB segments track the perceptual path closely enough that the dip is gone. */ --mood-rainbow-9: #069FA6; --mood-rainbow-10: #3282E6; --mood-rainbow-bg-opacity: 0.32; /* Oranje accent tokens — Rep Max notes in the DAW sequencer + Dag-theme override. */ --accent-orange: #FB923C; --accent-orange-light: #4A2E10; /* NUTRITION-STREAK-DOTS-GOAL-COLOR — "logged but missed kcal goal" color for the 7-day consistency dots. Nacht's accent is lime, so the missed state uses a calm blue so the eye separates achieved vs missed at a glance. The Dag override below switches to black (blue IS Dag's accent). */ --goal-missed: #5B8DEF; /* SEQUENCER-V2-DAW-OVERHAUL (v0.9.526) — teal loop-brace token. No existing Feliz hue mapped cleanly to "loop range marker"; teal reads on both Dag and Nacht surfaces. allow-hex */ --loop: #2dd4bf; } /* THEME-1-FINISH-REGISTRY — the six finish token blocks. Canon rows (bg / surface / accent / on-accent / ink / dim) come straight from the spec table; every extra app token is derived inside the finish's family with the SAME derivation logic across finishes (line = bg lifted, surface-bg below surface in luminance, accent-2 = accent lifted, accent-subtle = accent at 20% dark / 12-14% light). Dark finishes inherit the dark semantic tokens (training/nutrition/macros/groups/ day-cycle/mood) from the :root nacht bundle; light finishes restate the light semantic set. */ /* nacht — explicit block mirrors the :root default so a stamped data-theme-preset="nacht" is self-describing. */ :root[data-theme-preset="nacht"] { --bg: #03040A; --surface: #0A0F1A; --ink: #F0F2F5; --ink-2: #ACB3C1; --muted: #6B7280; --line: #1E2533; --line-2: #151B26; --accent: #2AF0EA; --accent-2: #A0F7F4; --on-accent: #03040A; --accent-subtle: rgba(42, 240, 234, 0.20); --surface-bg: #05070D; --surface-card: #111827; --divider: #232B3A; --toggle-track-off: #29323F; --section-label: #9CA3AF; --day-cycle-sleep-bg: #070A12; --hydration: #4EA8DE; --progress-low: #5F7896; color-scheme: dark; } /* dag — Brand Dag (factory, light), "Sassu Ice" values (research §3). The near-black navy accent (#16263F) is retired: it had zero chroma, so filled buttons dissolved into the dark text around them. Its replacement is a deep teal on the Nacht hue family — deliberately deeper and less saturated than the Nacht cyan, which would read as neon on white. Old stored id blue-day maps here in JS. */ :root[data-theme-preset="dag"] { --bg: #F1F5F9; --surface: #FFFFFF; --ink: #0F172A; --scrim: rgba(0, 0, 0, 0.34); /* Light finish: the hairline flips from white-on-dark to ink-on-light and is carried a touch heavier, because a 1px edge has to survive against a near-white page. The ladder itself (--elev-*) is inherited from :root — it is expressed purely in terms of these two tokens plus the accent glow, so a preset only ever restates the hairline. */ --hairline: rgba(15, 23, 42, 0.08); --hairline-strong: rgba(15, 23, 42, 0.14); --ink-2: #475569; --muted: #64748B; --line: #CBD5E1; --line-2: #E2E8F0; --accent: #006E7D; --accent-2: #00A8B5; --on-accent: #F0F9FF; --ok: #00C853; /* COLOR-3 — light-finish domain hues: same hue family as the dark preset, dropped in lightness so they stay legible ON white rather than glowing off it (the §3 "Dag = dieper, minder verzadigd" rule). --on-training stays white because the green keeps the same L as the blue it replaced. */ --training: #38853E; --on-training: #FFFFFF; --nutrition: #B3621E; --mood: #725B9A; --mac-p: #249057; --mac-c: #B37903; --mac-f: #BE563D; --fiber: #26A69A; --protein-2: #00C853; --favorite: #FF6D00; --surface-muted: rgba(15, 23, 42, 0.04); --accent-subtle: rgba(0, 110, 125, 0.12); /* v0.9.368 group palette — light-tuned hues, same slot semantics. */ --group-1: #00B8D4; --on-group-1: #001517; --group-2: #FF8F00; --on-group-2: #1A0C00; --group-3: #7C4DFF; --on-group-3: #FFFFFF; --group-4: #FF5252; --on-group-4: #FFFFFF; --group-5: #00BFA5; --on-group-5: #002115; --group-6: #64DD17; --on-group-6: #0A1C00; --group-7: #F50057; --on-group-7: #FFFFFF; --group-8: #304FFE; --on-group-8: #FFFFFF; --surface-bg: #E2E8F0; --surface-card: #FFFFFF; --divider: #CBD5E1; --toggle-track-off: #E2E8F0; --toggle-thumb-off: #FFFFFF; --section-label: #64748B; color-scheme: light; --cardio-polyline: var(--accent); --cardio-marker: #1A1A2E; --cardio-planned: #5B8DEF; --on-planned: #FFFFFF; --cardio-tile-filter: none; --day-cycle-sleep-bg: #DDE4EC; --day-cycle-evening-accent: #5B6BFF; --day-cycle-sleep-accent: #6B7280; --day-cycle-morning-accent: #E6A042; --slip-late-bg: rgba(91, 107, 255, 0.14); --slip-late-fg: #3D4BCC; --slip-early-bg: rgba(0, 200, 83, 0.14); --slip-early-fg: #00A347; --mood-rainbow-bg-opacity: 0.18; --accent-orange: #D97706; --accent-orange-light: #FFE8D6; /* Soft blue, deliberately outside the teal accent family so the streak "missed" state never reads as an accent highlight. */ --goal-missed: #5B8DEF; /* Deeper than the dark-finish blue — the dark value is used as TEXT on a white card and fails contrast there. */ --hydration: #1D7FC0; --progress-low: #7A8A9C; } /* gauge — premium, dark, amber instrument-cluster accent. */ :root[data-theme-preset="gauge"] { --bg: #101113; --surface: #191B1E; --ink: #E6E4E0; --ink-2: #7E7C76; --muted: #5F5E59; --line: #2B2D31; --line-2: #232529; --accent: #FFB454; --accent-2: #FFC679; --on-accent: #1A1107; --accent-subtle: rgba(255, 180, 84, 0.20); --surface-bg: #0A0B0D; --surface-card: #1D2024; --divider: #34373C; --toggle-track-off: #34373C; --section-label: #8C8B85; --day-cycle-sleep-bg: #141518; /* Cooled-down against the warm amber cluster — water must still read as water, but desaturated so it doesn't fight the accent. */ --hydration: #6BADC9; --progress-low: #857C6E; color-scheme: dark; } /* linen — premium, light, warm paper + soft umber accent. */ :root[data-theme-preset="linen"] { --bg: #F7F4EE; --surface: #FFFFFF; --ink: #262219; --scrim: rgba(0, 0, 0, 0.34); /* Warm light finish — same inherited ladder, hairline tinted into umber. */ --hairline: rgba(38, 34, 25, 0.08); --hairline-strong: rgba(38, 34, 25, 0.14); --ink-2: #8A8273; --muted: #9C9484; --line: #E6E1D6; --line-2: #EFEBE2; --accent: #4A4438; --accent-2: #5C5547; --on-accent: #F7F4EE; --ok: #00C853; /* COLOR-3 — light-finish domain hues: same hue family as the dark preset, dropped in lightness so they stay legible ON white rather than glowing off it (the §3 "Dag = dieper, minder verzadigd" rule). --on-training stays white because the green keeps the same L as the blue it replaced. */ --training: #38853E; --on-training: #FFFFFF; --nutrition: #B3621E; --mood: #725B9A; --mac-p: #249057; --mac-c: #B37903; --mac-f: #BE563D; --fiber: #26A69A; --protein-2: #00C853; --favorite: #FF6D00; --surface-muted: rgba(38, 34, 25, 0.04); --accent-subtle: rgba(74, 68, 56, 0.12); --group-1: #00B8D4; --on-group-1: #001517; --group-2: #FF8F00; --on-group-2: #1A0C00; --group-3: #7C4DFF; --on-group-3: #FFFFFF; --group-4: #FF5252; --on-group-4: #FFFFFF; --group-5: #00BFA5; --on-group-5: #002115; --group-6: #64DD17; --on-group-6: #0A1C00; --group-7: #F50057; --on-group-7: #FFFFFF; --group-8: #304FFE; --on-group-8: #FFFFFF; --surface-bg: #F1EDE4; --surface-card: #FFFFFF; --divider: #D8D2C4; --toggle-track-off: #E6E1D4; --toggle-thumb-off: #FFFFFF; --section-label: #8A8273; color-scheme: light; --cardio-polyline: var(--accent); --cardio-marker: #1A1A2E; --cardio-planned: #5B8DEF; --on-planned: #FFFFFF; --cardio-tile-filter: none; --day-cycle-sleep-bg: #ECE7DC; --day-cycle-evening-accent: #5B6BFF; --day-cycle-sleep-accent: #6B7280; --day-cycle-morning-accent: #E6A042; --slip-late-bg: rgba(91, 107, 255, 0.14); --slip-late-fg: #3D4BCC; --slip-early-bg: rgba(0, 200, 83, 0.14); --slip-early-fg: #00A347; --mood-rainbow-bg-opacity: 0.18; --accent-orange: #D97706; --accent-orange-light: #FFE8D6; --goal-missed: #5B8DEF; /* Teal-leaning blue so water reads cool against warm paper without going saccharine; both deep enough for text on the white card. */ --hydration: #2E7E96; --progress-low: #9A9080; } /* volt — premium, dark, lime. Pixel-identical to the retired "Lime Night" preset so existing users mapped lime-night→volt see ZERO change. */ :root[data-theme-preset="volt"] { --bg: #121212; --surface: #1E1E1E; --ink: #E8E8E8; --ink-2: #B0B0B0; --muted: #666666; --line: #333333; --line-2: #2A2A2A; --accent: #ADFF00; --accent-2: #C5FF33; --on-accent: #0A0A0A; --accent-subtle: rgba(173, 255, 0, 0.20); --surface-bg: #000000; --surface-card: #1C1C1E; --divider: #38383A; --toggle-track-off: #39393D; --section-label: #8E8E93; --day-cycle-sleep-bg: #131A22; --hydration: #56B0E4; --progress-low: #757A70; color-scheme: dark; } /* pulse — premium, dark, hot pink. */ :root[data-theme-preset="pulse"] { --bg: #120A10; --surface: #1E1119; --ink: #F4E9EF; --ink-2: #937A88; --muted: #6B5663; --line: #32202B; --line-2: #281822; --accent: #FF3B81; --accent-2: #FF619A; --on-accent: #14060C; --accent-subtle: rgba(255, 59, 129, 0.20); --surface-bg: #0A0509; --surface-card: #231521; --divider: #3C2834; --toggle-track-off: #3C2834; --section-label: #9C8492; --day-cycle-sleep-bg: #160D14; --hydration: #4FA5D6; --progress-low: #8A7280; color-scheme: dark; } /* ── COLOR-3-DATAVIZ-OKLCH — the perceptual layer ────────────────────── Every domain hex above is a gamut-clipped rendering of the oklch() value restated here. Two reasons this is a separate @supports block rather than oklch() written straight into the token rows: 1. A custom property accepts any token sequence, so `--training: oklch(…)` would PARSE in a browser without oklch support and only fail later, at the var() use site — where the declaration is dropped entirely and the element loses its colour rather than falling back. Declaring hex first and overriding here is the only ordering where an old browser degrades to a colour instead of to nothing. 2. It keeps the authored intent (L, C, H) readable next to the fallback, so the next chroma-cap audit reads the numbers it is auditing. Chroma is capped at ~0.14 by design: the accent (C 0.16) must stay the most saturated thing on any screen, or the "vibrance only in data" rule inverts and the domain colours start competing with the signature. */ @supports (color: oklch(50% 0.1 200)) { :root { --training: oklch(72% 0.14 145); --nutrition: oklch(72% 0.14 55); --mood: oklch(72% 0.10 300); --mac-p: oklch(72% 0.13 155); --mac-c: oklch(75% 0.14 75); --mac-f: oklch(70% 0.13 35); } :root[data-theme-preset="dag"], :root[data-theme-preset="linen"] { --training: oklch(55% 0.13 145); --nutrition: oklch(58% 0.13 55); --mood: oklch(52% 0.10 300); --mac-p: oklch(58% 0.13 155); --mac-c: oklch(62% 0.13 75); --mac-f: oklch(58% 0.14 35); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-y: none; } body { font-weight: 400; letter-spacing: 0.005em; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); } a:hover { border-bottom-color: var(--ink); } /* ───────── Boot splash ───────── */ .boot { /* v0.9.309 — A11Y-4 S7: svh ladder (vh → svh → dvh). iOS Safari shrinks the layout viewport when the URL bar collapses, pushing buttons off-screen if min-height tracks vh. svh is the small-viewport fallback for engines that don't grok dvh. */ min-height: 100vh; min-height: 100svh; min-height: 100dvh; display: grid; place-items: center; } /* APP-BOOT-SPLASH-HORSE-ONLY-NO-WORDMARK — the boot splash is nameless: the ice-blue horse silhouette inside an indeterminate ring on the navy brand plate, no letters. Brand-moment tokens (--horse-plate / --horse-glyph) are finish-invariant by design, so the splash reads identically in Dag and Nacht. Under prefers-reduced-motion the ring stops turning but stays. */ .boot { background: var(--horse-plate); } .boot__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); } .boot__ring { position: relative; width: 128px; height: 128px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--horse-glyph) 22%, transparent); display: grid; place-items: center; } .boot__ring::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--horse-glyph); border-right-color: var(--horse-glyph); animation: boot-ring-spin 1.4s linear infinite; } .boot__horse { width: 72px; height: 72px; background-color: var(--horse-glyph); -webkit-mask: url('/assets/img/brand/horse-head-alpha-512.png') center / contain no-repeat; mask: url('/assets/img/brand/horse-head-alpha-512.png') center / contain no-repeat; } @supports not ((-webkit-mask: url('x')) or (mask: url('x'))) { .boot__horse { background-image: url('/assets/img/brand/horse-head-512.png'); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent; -webkit-mask: none; mask: none; } } @keyframes boot-ring-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .boot__ring::before { animation: none; } } /* APP-BOOT-SPLASH-HOLD-UNTIL-READY — the same .boot markup, lifted out of #app by liftBootSplash() so render()'s innerHTML swap can't destroy it. It then covers the app shell while the landing tab mounts and fetches. z-index sits above the whole in-app scale (top of that scale is 9400) but below the LOGO-SPLASH-3D overlay at 99999, which must still play on top. No new visual design: the opaque navy brand plate + the horse-and-ring already in .boot. */ .boot--overlay { position: fixed; inset: 0; z-index: 9500; background: var(--horse-plate); opacity: 1; transition: opacity var(--dur-slow) var(--ease-standard); } .boot--overlay.boot--out { opacity: 0; pointer-events: none; } /* LOGO-SPLASH-3D — fullscreen brand-moment overlay on cold start. The IIFE in public/index.html toggles #splash[hidden] off, plays the mp4, then adds .splash--out for the fade-out before removing the element. The navy plate reuses --horse-plate (the finish-invariant brand-moment token) so it matches the video's own black-navy background — no bare hex, css-hex-lint clean. */ #splash { position: fixed; inset: 0; z-index: 99999; /* above app shell, above iframes, above modals */ background: var(--horse-plate); display: flex; align-items: center; justify-content: center; overflow: hidden; opacity: 1; transition: opacity var(--dur-slow) var(--ease-standard); /* iOS safe-area: cover the notch + home-indicator */ padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } #splash[hidden] { display: none; } #splash-video { width: 100%; height: 100%; object-fit: contain; /* preserve the video's portrait 720×1280 framing without cropping */ display: block; background: var(--horse-plate); } .splash--out { opacity: 0; } /* NAV-TAB-SMOOTH-CONTENT-FADE — content-only tab crossfade. The freshly rendered shell starts at .tab-enter (faded out, lifted 12px) and settles to .tab-enter-active over 280ms; app.js strips both classes on transitionend so no transform lingers. Replaces the v0.9.652 solid var(--bg) overlay band, which read as a flash. .nav-transition below is retained as a no-op (no JS creates or animates it anymore) to avoid dangling references. */ .nav-transition { position: fixed; inset: 0; opacity: 0; pointer-events: none; } .tab-enter { opacity: 0; transform: translateY(-12px); will-change: opacity, transform; } .tab-enter-active { opacity: 1; transform: translateY(0); transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); } @media (prefers-reduced-motion: reduce) { .tab-enter { transform: none; } .tab-enter-active { transform: none; /* 60ms is deliberate and stays: under reduce the tab cross-fade must be near-instant. Only the curve joins the app signature. */ transition: opacity 60ms var(--ease-standard); } } /* ───────── App shell layout ───────── */ .app-shell { /* v0.9.309 — A11Y-4 S7: svh ladder, same rationale as .boot above. */ min-height: 100vh; min-height: 100svh; min-height: 100dvh; display: flex; flex-direction: column; } .app-main { flex: 1 1 auto; /* v0.9.309 — A11Y-4 S6: safe-area-aware horizontal padding so chrome doesn't sit under the rounded-corner clip on landscape notched devices. */ padding-left: var(--safe-left); padding-right: var(--safe-right); padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--space-5)); max-width: 720px; width: 100%; margin: 0 auto; /* NAV-SWIPE-TABS-WITH-PEEK-DURING-GESTURE — allow native vertical scroll but let the JS controller intercept horizontal drags (gesture-direction detection in the first 12px). The controller toggles the inline transform. */ touch-action: pan-y; } /* NAV-SWIPE-TABS-WITH-PEEK-DURING-GESTURE — the peek overlay holds the incoming tab's identity pane sliding in from the edge while the outgoing .app-main is translated in real time. Positioned (via inline rect) over the live app-main; clipped so the off-screen pane only shows the part that has slid in. */ .tab-swipe-peek { position: fixed; overflow: hidden; z-index: 5; pointer-events: none; background: var(--bg); } .tab-swipe-pane { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); will-change: transform; } .tab-swipe-pane__id { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); opacity: 0.85; } .tab-swipe-pane__icon { width: 64px; height: 64px; object-fit: contain; } .tab-swipe-pane__label { font-size: 1.05rem; font-weight: 600; color: var(--text, var(--ink)); letter-spacing: 0.01em; } /* Auth layout (no tab bar) */ .app-shell--auth .app-main { padding-bottom: var(--space-5); } /* ───────── Top bar ───────── */ .topbar { /* NAV-CHAT-LAUNCH-MOVE-TO-TOPBAR-RIGHT (v0.9.696) — anchor the absolutely positioned chat-launch chip to the topbar. */ position: relative; display: flex; align-items: center; justify-content: space-between; /* v0.9.309 — A11Y-4 S6: pad top by the device's safe-area inset so the Strength/Calendar/Settings topbar clears the iPhone 14+ Dynamic Island. */ padding: calc(var(--space-5) + var(--safe-top)) calc(var(--space-5) + var(--safe-right)) var(--space-3) calc(var(--space-5) + var(--safe-left)); border-bottom: 1px solid var(--line); } /* COACH-MODE-TABBAR-SHELL-SIX-TABS — de modus-hint. Eén token, afgeleid van --accent + --surface, dus Dag en Nacht krijgen allebei automatisch de juiste tint zonder een tweede kleurenset (het is bewust GEEN apart thema — concept §1). Alleen de header kleurt; de rest van de app blijft identiek. */ :root { --coach-tint: color-mix(in srgb, var(--accent) 12%, var(--surface)); } body.coach-mode .topbar { background: var(--coach-tint); } .topbar__title { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); } /* CHAT-LAUNCH-VISIBLE-ON-ALL-SURFACES-NO-OVERLAP — reserve the pill's footprint (pill width + gap) at the title's right edge so a long title can't run under the floating pill. Only when the pill is actually shown. */ body.chat-launch-on .topbar__title { padding-right: 92px; } .topbar__action { background: none; border: none; padding: var(--space-2) var(--space-3); font-size: 13px; letter-spacing: 0.05em; color: var(--muted); cursor: pointer; } .topbar__action:hover { color: var(--ink); } /* CHAT-LAUNCH-VISIBLE-ON-ALL-SURFACES-NO-OVERLAP (v0.9.701) — the chat-launch pill is now a GLOBAL fixed element appended to (ensureGlobalChatLaunch in app.js), not a topbar child. A topbar-scoped pill was invisible on the Gym + Cardio tabs, which hide .topbar entirely and paint their iframes over it. Fixed to the top-right of the viewport above all chrome; hidden by default and revealed only on real authed tabs via body.chat-launch-on. Finish-invariant navy brand-moment chip (--horse-plate, brand-moment exemption covers this token) carrying the horse-head silhouette at 24px. */ .topbar__chat-launch { position: fixed; top: max(env(safe-area-inset-top), 12px); right: var(--space-4); z-index: 1000; display: none; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 10px; border-radius: var(--radius-pill); background: var(--horse-plate); color: #FFFFFF; /* allow-hex: brand-moment — white-on-navy chip (precedent: nav__item--chat / horse-head); finish-invariant by design */ border: 0; cursor: pointer; } /* Shown only on real authed tabs (render() sets chat-launch-on); absent on /chat, auth screens, and pre-app gates so the pill never floats over them. */ body.chat-launch-on .topbar__chat-launch { display: inline-flex; } /* Belt-and-suspenders: /chat owns its own topbar (hamburger + close), so the pill stays hidden there even if chat-launch-on lingered. */ body.is-chat .topbar__chat-launch { display: none; } /* CHAT-LAUNCH-HIDE-IN-TRAINER-SHEET-MODE — a coach genuinely acting-as a client (body.acting-as-client, set in render() via the strict impersonation guard) is coaching, not chatting with Sassu, so the pill is noise on the in-program strength sheet/day view. fz-strength-in-program is the iframe→host bridge from STRENGTH-PERIODIZATION-TILE-CARD-VIEW-ONLY (set only on the sheet/day-overview, absent on the program-overview card list + every other tab). Covers coach.sassu.fit automatically — it serves the same app shell + app.js, so the same render() sets both classes there. Own-data sheet (no acting-as) and card view keep the pill. */ body.acting-as-client.fz-strength-in-program .topbar__chat-launch { display: none; } /* CHAT-LAUNCH-HIDE-IN-SHEET-MODE-GENERAL — hide chat-launch pill when ANY full-screen sheet is open (Strength/Nutrition/Diary). The pill overlaps sheet content and competes with sheet CTAs; user is in a different task. */ body.fz-strength-in-program .topbar__chat-launch, body.fz-nutrition-sheet-open .topbar__chat-launch, body.fz-diary-sheet-open .topbar__chat-launch { display: none; } /* COACH-STRENGTH-EDIT-MODAL-OVER-COACH-CHROME — the coach-mode "Coaching:" bar (#fzCoachBar, injected by coach/index.php at z-index max-int) floats above the ENTIRE Strength iframe in the parent stacking context, so it overlaps the in-iframe edit modal (.mo) / rename modal (.ren-o), whose backdrop dims the rows but whose content/buttons sit behind the bar. strength.html is sealed, so strength-bridge.js mirrors the open state onto the host body as [data-strength-modal-open]; while set we hide the bar. visibility (not display) → no layout shift; modal closes → attribute drops → bar pops back. Harmless on app.sassu.fit (no #fzCoachBar there). */ body[data-strength-modal-open] #fzCoachBar { visibility: hidden; pointer-events: none; } .topbar__chat-launch:active { transform: scale(0.96); } .topbar__chat-launch__label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .brand-horse-head--launch { width: 24px; height: 24px; } /* ───────── Bottom tab bar ───────── */ .tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--tabbar-h) + var(--safe-bottom)); /* v0.9.309 — A11Y-4 S6: respect landscape side insets so tabs don't fall under the rounded-corner clip; bottom inset stays as before. */ padding-bottom: var(--safe-bottom); padding-left: var(--safe-left); padding-right: var(--safe-right); background: var(--surface); border-top: 1px solid var(--line); display: flex; z-index: 50; } .tabbar__btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; /* NAV-CHAT-TAB-HUB-KEBAB-AND-20PCT-SMALLER — ~20% less vertical padding; the button still fills the (86px) bar via flex so the tap hitbox stays ≥44px. NAV-CHAT-TAB-POLISH-LABEL-SIZE-COLOR-AND-10PCT-UP — ~10% up: padding + font. */ padding: 7px 2px; cursor: pointer; color: var(--muted); font-size: 9px; letter-spacing: 0.02em; text-transform: uppercase; position: relative; overflow: hidden; } .tabbar__btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ICON-WIRE-SHARED-INFRA-AND-NAV (v0.9.702) — central icon primitive. The brand line-art webp is rendered as a CSS mask filled with currentColor, so the icon inherits the parent text colour (--ink on body, --accent in a primary button, --chat-on-accent on the chat chip) and recolours automatically with the theme finish — no per-surface tint overrides. Kept ABOVE .tabbar__icon so the locked bottom-nav keeps its own 22px/display:block sizing for fz-icon tab glyphs. */ .fz-icon { display: inline-block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--icon-url) center / contain no-repeat; mask: var(--icon-url) center / contain no-repeat; vertical-align: middle; flex: 0 0 auto; } .tabbar__icon { /* NAV-CHAT-TAB-POLISH-LABEL-SIZE-COLOR-AND-10PCT-UP — 20px (was 18px) line-art glyph size for the inline-SVG nav tabs (hub kebab, challenges). */ width: 20px; height: 20px; display: block; opacity: 0.7; } /* ICON-NAV-BIGGER-AND-CLEARER (v0.9.707) — bump the bottom-nav line-art glyphs from the 22px tabbar default to 28px so the silhouet reads clearly in the 64px strip; contrast(1.05) firms up the alpha-mask edges. Nav-scoped (.tabbar__btn) only: the topbar chat-launch pill and Voeding meal-row icons keep the 24px default. The 64px tabbar centres icon+label with room to spare, so padding is left as the existing balanced baseline (label stays clear of the icon). */ .tabbar__btn .fz-icon { /* NAV-CHAT-TAB-POLISH-LABEL-SIZE-COLOR-AND-10PCT-UP — 25px (was 22px). */ width: 25px; height: 25px; filter: contrast(1.05); } /* NAV-ICONS-DROP-OPACITY-FADE-USE-UNDERLINE-INDICATOR (v0.9.812) — opacity/ grayscale-fading op inactieve iconen voelde voor Jayy vervaagd op ALLE tabs (zelfs de active bleef matig vanwege de mix). Vervangen door: alle icons full-color, active = lichte 1.06 zoom + 24×3px accent-pill onder de tile. De label-laag (bold actief / muted inactief) blijft de tekstuele indicator zoals 'ie altijd was. */ .tabbar__btn__photo { /* NAV-CHAT-TAB-POLISH-LABEL-SIZE-COLOR-AND-10PCT-UP — 57px (was 51px), ~10% up; the scale() transforms below stay so the effective footprint moves in step. */ width: 57px; height: 57px; object-fit: contain; border-radius: var(--radius-md); display: block; user-select: none; -webkit-user-drag: none; opacity: 1; /* NAV-TABBAR-ICONS-GRAYSCALE-WHEN-INACTIVE (v0.9.847) — inactive nav-icons desatureren zodat alleen het actieve tab-icon in kleur staat → gratis visuele hiërarchie. Active-variant zet filter terug op none. */ filter: grayscale(100%); transition: transform var(--dur-fast) var(--ease-standard), filter var(--dur-fast) var(--ease-standard); /* shrink photo-style nav-icons to match HUB emblem footprint (visueel ~gelijk; photographic PNG zonder whitespace-padding oogt groter dan flat emblem) */ transform: scale(0.8); transform-origin: center bottom; } .tabbar__btn[aria-current="page"] .tabbar__btn__photo { transform: scale(0.85); filter: none; } /* NAV-TABBAR-REMOVE-STRIPE-INDICATORS — boven/onder actieve-tab streepjes weg. Sinds v0.9.847 (grayscale-inactive) is kleur het active-signaal; de oude ::before (top-streep boven icoon) + ::after (bottom-streep onder label) zijn redundant. Color-on-active + bold-label (hieronder) blijven — kleur + bold is robuust genoeg voor a11y (kleurenblindheid ziet nog het bold-verschil). */ .tabbar__btn[aria-current="page"] { color: var(--ink); font-weight: 600; } .tabbar__btn[aria-current="page"] .tabbar__icon { opacity: 1; } .tabbar__btn[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; } .tabbar__btn[aria-disabled="true"]:active, .tabbar__btn[aria-disabled="true"]:hover { background: none; } /* BRICKS-TAB-DISABLED-VISUAL (v0.9.542) — visible-but-disabled tabs. State-driven (not key-hardcoded): any tab in the coming-soon set — Bricks always, Cardio for the nutrition-only beta cohort — gets the same dimmed look. opacity is token-friendly (no hex literal — passes css-hex-lint). When the user is ON the coming-soon tab the dimming eases up so the active indicator is still legible. */ .tabbar__btn--coming-soon { opacity: 0.4; } .tabbar__btn--coming-soon[aria-current="page"] { opacity: 0.6; } /* NAV-DEACTIVATED-TAB-REAL-ICON-BLACK-WITH-WHITE-QUESTION-MARK — a globally- deactivated tab keeps its REAL nav icon but renders it fully black, with a white '?' badge overlaid top-right. brightness(0) collapses ANY colored PNG/ SVG/mask glyph to solid black regardless of original colors; grayscale(100%) first neutralises hue so brightness(0) lands cleanly. The button is the positioning context for the ::after badge. Label treatment is untouched. */ .tabbar__btn--deactivated { position: relative; } .tabbar__btn--deactivated .tabbar__icon, .tabbar__btn--deactivated .fz-icon, .tabbar__btn--deactivated .tabbar__btn__photo { filter: grayscale(100%) brightness(0); opacity: 1; } .tabbar__btn--deactivated::after { content: "?"; position: absolute; top: 2px; right: 4px; font-size: 11px; font-weight: 700; color: #ffffff; /* allow-hex: white-on-black '?' badge — contrast-locked, not theme-tinted */ background: rgba(0, 0, 0, 0.55); border-radius: 50%; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; line-height: 1; pointer-events: none; } /* NAV-CHAT-TAB-POLISH-LABEL-SIZE-COLOR-AND-10PCT-UP — the Chat tab is now a PLAIN photo nav-tab: identical button markup, img box and label node as Dagboek/Gym/Cardio/Voeding. The old v0.9.687 navy-chip erfenis (separate tile background, extra margin/padding, white label, overflow-clipped label) is fully neutralised — no background, no border-radius, no colour override — so the shared .tabbar__btn geometry paints it. NAV-CHAT-ICON-GRAYSCALE-LIKE- THE-REST removed the last distinction: chat had a `filter: none` exemption justified by "the bottom-nav disappears on /chat so the tab is never active", which stopped being true once /chat became a full tab root. Chat now has ZERO exemptions — grey when inactive, colour when active, like every other tab. Do not reintroduce one. The .tabbar__btn--chat class still exists as the badge mount point (app.js paintChatBadge), not as a style hook. */ /* NAV-SETTINGS-TAB-CONVERT-TO-MIJ-HUB-MENU (v0.9.816) — the rightmost 'Me' tab shows the user's avatar (photo) or an accent-circle initial fallback, in the same 64×64 box as the photo nav-icons so the bar stays aligned. The shared .tabbar__btn[aria-current="page"]::after accent-pill already lights it on the /settings* surface; we add the same active scale-up the photo tiles get. */ .tabbar__btn__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--line-2); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: var(--accent); user-select: none; -webkit-user-drag: none; /* NAV-TABBAR-ICONS-GRAYSCALE-WHEN-INACTIVE (v0.9.847) — HUB-emblem/avatar volgt dezelfde grayscale-when-inactive regel als de photo-icons. */ filter: grayscale(100%); transition: transform var(--dur-fast) var(--ease-standard), filter var(--dur-fast) var(--ease-standard); } .tabbar__btn--hub[aria-current="page"] .tabbar__btn__avatar { transform: scale(1.06); filter: none; } /* Emblem fallback: contain + padding so the silver-chrome 3D highlight keeps breathing room instead of being full-bleed cropped like a photo avatar. */ .tabbar__btn__avatar--emblem { object-fit: contain; padding: 4px; background: transparent; } /* NAV-HUB-KEBAB-SIZE-AND-LABEL-ALIGN — the hub kebab (iconKebab, inline SVG with class .tabbar__icon) rendered at the 20px default, so its icon block was far shorter than the 57px photo-img box of the other tabs → the 'HUB' label floated ABOVE the DAGBOEK/GYM/CARDIO/VOEDING/CHAT baseline. Give the kebab the SAME layout box (57px) and the SAME scale-transform the photo icons carry, so: (a) the 57px layout height puts the label on the shared baseline, and (b) the identical scale keeps the rendered bounding box in step with the photos (transform is visual-only, so it doesn't disturb the baseline). The 24-unit kebab viewBox now fills a 57px box, so the three dots read at the same visual weight as the photo glyphs (~60%+ of box height) instead of a tiny glyph lost in whitespace. Muted-when-inactive stays via the inherited opacity (0.7); active lifts it to full ink + the shared scale-up, matching the hub. */ .tabbar__btn--hub .tabbar__icon { width: 57px; height: 57px; /* flex-shrink:0 — unlike the photo (a replaced element whose intrinsic size resists column-flex shrink), a bare shrinks a couple px when the column is tight, which pulled the 'HUB' label ~2px above the shared baseline. Pin it so the layout box stays exactly 57px like the photos. */ flex: 0 0 auto; transform: scale(0.8); transform-origin: center bottom; } .tabbar__btn--hub[aria-current="page"] .tabbar__icon { transform: scale(0.85); opacity: 1; } /* COACH-MODE-NAV-ICONS-INSTALL — the chat tab's inline-SVG scale exception is gone with the SVG itself: chat now renders nav-chat.png through the shared .tabbar__btn__photo box, so it carries the same 57px + scale(0.8) footprint as every other photo tab. Only the hub kebab still needs its own icon sizing. */ /* Hub bottom-sheet (the 'Me' menu). Overlay + slide-in sheet mirror the nutrition .mo-* primitives; rows reuse the settings .set-row vocabulary so they read as familiar settings rows. */ .hub-overlay { position: fixed; inset: 0; background: rgba(20, 20, 30, 0.5); z-index: 220; display: flex; align-items: flex-end; opacity: 0; transition: opacity var(--dur-base) var(--ease-standard); } .hub-overlay.hub-sheet--open { opacity: 1; } .hub-sheet { background: var(--bg); width: 100%; max-width: 720px; margin: 0 auto; max-height: 85vh; border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); display: flex; flex-direction: column; transform: translateY(100%); transition: transform var(--dur-base) var(--ease-standard); padding-bottom: var(--safe-bottom); overflow-y: auto; } .hub-sheet.hub-sheet--open { transform: translateY(0); } .hub-grip { width: 40px; height: 4px; background: var(--line); border-radius: var(--radius-sm); margin: 8px auto; flex: 0 0 auto; cursor: pointer; } .hub-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 12px 16px 16px; } .hub-menu-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 12px; background: var(--line-2); border: 1px solid var(--line); border-radius: var(--radius-lg); min-height: 96px; cursor: pointer; position: relative; /* anchor for .hub-menu-btn__badge */ transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); } .hub-menu-btn:active { transform: scale(0.97); background: var(--line); } /* HUB-CHALLENGES-COUNT-BADGE — accent count-pill of open challenges. */ .hub-menu-btn__badge { position: absolute; top: 8px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } @media (prefers-reduced-motion: no-preference) { .hub-menu-btn__badge { animation: hub-menu-badge-in var(--dur-base) var(--ease-standard); } @keyframes hub-menu-badge-in { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } } .hub-menu-btn__icon { width: 28px; height: 28px; flex-shrink: 0; color: var(--accent); } .hub-menu-btn__icon svg { width: 28px; height: 28px; } .hub-menu-btn__label { font-size: 14px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.25; } /* Odd final button (e.g. non-coach user with 5 buttons) spans full width. */ .hub-menu-grid > .hub-menu-btn:nth-child(odd):last-child { grid-column: 1 / -1; } /* HUB-LOW-VISION-TILE — accessibility promotion. Solid-accent tile with an oversized eye so a low-vision user can find the toggle at a glance. Normal grid width (Jayy 2026-08-07: full-width was too big — "hij past er gewoon rustig in"); the accent fill + big eye carry the findability instead. --on-accent gives the required contrast on the accent fill. */ .hub-menu-btn--a11y { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .hub-menu-btn--a11y:active { background: var(--accent); filter: brightness(0.94); } .hub-menu-btn--a11y .hub-menu-btn__icon, .hub-menu-btn--a11y .hub-menu-btn__icon svg { width: 44px; height: 44px; } /* DIARY-METRICS-SELF-IMPORT-ENTRY — measurement-import sheet body. Rides the shared .hub-overlay / .hub-sheet / .hub-grip chrome; only the content is new. */ .mi-sheet { padding: 4px 16px 20px; display: flex; flex-direction: column; gap: 12px; } .mi-sheet__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); } .mi-sheet__hint { margin: 0; font-size: 14px; line-height: 1.4; color: var(--muted); } .mi-pick { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--radius-md); } .mi-pick__label { font-size: 14px; font-weight: 600; color: var(--text); } .mi-pick__input { font-size: 14px; color: var(--text); } .mi-sheet__status { margin: 0; font-size: 14px; color: var(--muted); min-height: 1em; } .mi-sheet__status--error { color: var(--danger); } .mi-summary { display: flex; flex-direction: column; gap: 6px; } .mi-summary__row { display: flex; gap: 12px; justify-content: space-between; font-size: 14px; } .mi-summary__label { color: var(--muted); flex: 0 0 auto; } .mi-summary__value { color: var(--text); text-align: right; } .mi-summary__warn { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); } .mi-submit { margin-top: 4px; padding: 12px; border: 0; border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: 700; cursor: pointer; } .mi-submit:disabled { opacity: 0.45; cursor: default; } .hub-menu-btn--a11y .hub-menu-btn__icon { color: var(--on-accent); } .hub-menu-btn--a11y .hub-menu-btn__icon svg { stroke-width: 2; } .hub-menu-btn--a11y .hub-menu-btn__label { color: var(--on-accent); font-size: 15px; font-weight: 700; } /* When low-vision mode is ON the whole hub-menu-btn set already stands out (the accent fill is now the "on" state); still keep the eye oversized regardless of state so the disable-tap is as easy to hit as the enable-tap. */ /* v0.9.320 A11Y-8 S23 — slide the tabbar off-screen while the on-screen keyboard is up. body.kb-open is toggled by the VisualViewport listener in app.js boot. Uses translateY(100%) so the existing transition (if any) and safe-bottom padding both come along; restores instantly when the keyboard dismisses. */ body.kb-open .tabbar { transform: translateY(100%); transition: transform var(--dur-base) var(--ease-standard); pointer-events: none; } /* v0.9.313 STRENGTH-BADGE-AND-COUNTFIX — countdown pill above the STRENGTH tabbar icon. Variant B (countdown): drops as the user logs exercises in today's session, hides at 0. v0.9.314 STRENGTH-BADGE-RED-RECOLOR: painted in iOS-system-red (#FF3B30) per Jayy — matches the universal notification-dot convention used by Instagram/Facebook/WhatsApp, so the visual language now pre-loads off the broader app ecosystem instead of brand accent. Painted/ removed by paintStrengthBadge() in app.js. Position anchors to the icon strip (top-right of the icon area), not the button bounds, so the active-tab top accent bar doesn't compete with it. */ .tabbar__btn { position: relative; } /* (already set above; defensive — keeps absolute child contained even if the rule above is overridden by future refactors) */ .tabbar__badge { position: absolute; top: 4px; /* Half a tab width — 22px icon → ~12px right of icon centerline. Tab width varies (flex:1), so right is anchored as a fraction of the button. With 6 tabs on a 390px viewport that's ~65px/btn → 25% of btn width = ~16px right inset; clamps prevent extremes on narrow/wide. */ right: clamp(14px, 22%, 22px); min-width: 16px; height: 16px; /* Geometric centering of the inner digit: inline-flex + line-height:1 + tabular-nums prevents the baseline-vs-geometric mismatch that left "7" visibly upper-left of the circle center (v0.9.317 → v0.9.318 fix). */ display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--badge-bg); color: var(--on-badge); font-size: 10px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; text-align: center; letter-spacing: 0; text-transform: none; box-shadow: var(--elev-1); pointer-events: none; opacity: 0; animation: tabbarBadgeFadeIn var(--dur-base) var(--ease-standard) forwards; } @keyframes tabbarBadgeFadeIn { to { opacity: 1; } } /* COACH-SHARED-RECIPE-UNSEEN-BADGE — numberless dot variant. Used on the Nutrition tab when there is no restock number to show but the client has an unseen coach-shared recipe. A small accent circle rather than a red count. */ .tabbar__badge.tabbar__badge--dot { min-width: 10px; width: 10px; height: 10px; padding: 0; background: var(--accent); box-shadow: var(--elev-1); } /* COACH-SHARED-RECIPE-UNSEEN-BADGE — dot on the "Mijn recepten" add-submenu tile while unseen coach-shares exist. Absolute accent circle, top-right. */ .nut-addmenu__tile { position: relative; } .nut-addmenu__tile-dot { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--accent); box-shadow: var(--elev-1); pointer-events: none; } /* COACH-SHARED-RECIPE-UNSEEN-BADGE — brief highlight flash on a just-shared recipe row when the client opens My-recipes. Accent-tinted background that fades out over ~2.5s to say "this one is new from your trainer", then the row settles to its normal state and the dot clears permanently. */ .nut-recipe-shared-flash { animation: nutRecipeSharedFlash 2500ms var(--ease-standard) 1; } @keyframes nutRecipeSharedFlash { 0% { background: var(--accent); color: var(--on-accent); } 70% { background: var(--accent); color: var(--on-accent); } 100% { background: transparent; color: inherit; } } @media (prefers-reduced-motion: reduce) { /* Static, non-animated fade: hold a subtle accent tint briefly then rely on JS removing the class. No motion, still communicates "new". */ .nut-recipe-shared-flash { animation: none; background: var(--accent-subtle); } } /* v0.9.342 REST-TIMER-REWORK — tabbar STRENGTH-badge completion pulse. Fires once when fzRestTimer transitions to finished (chime/vibration moment). Single scale-pulse so a peripheral glance catches the rest completion. */ .tabbar__badge.tabbar__badge--pulse { animation: tabbarBadgePulse var(--dur-slow) var(--ease-standard) 1; } @keyframes tabbarBadgePulse { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } } /* v0.9.342 REST-TIMER-REWORK — cross-tab thin strip + minimal text line. Singleton element appended to by app.js fzMountRestStrip(). Shown only when a rest timer is active AND the inline pill in the Strength iframe is NOT visible (drawer closed, scrolled away, or different tab). Position: fixed top, accent-tinted progress bar + small body line. Tap navigates to /strength (the bridge restores pill into view on next tick). */ .fz-rt-strip { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--surface); border-bottom: 1px solid var(--line-2); padding-top: var(--safe-top); display: none; cursor: pointer; -webkit-tap-highlight-color: transparent; box-shadow: var(--elev-1); } .fz-rt-strip.is-on { display: block; } .fz-rt-strip__bar { height: 5px; background: var(--line-2); position: relative; overflow: hidden; } .fz-rt-strip__fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; width: 0%; transition: width var(--dur-loop) linear; } .fz-rt-strip__body { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 6px 14px 8px; letter-spacing: 0.01em; line-height: 1; } .fz-rt-strip.is-pulse .fz-rt-strip__fill { width: 100% !important; animation: fzRtStripPulse var(--dur-pulse) var(--ease-standard) 1; } @keyframes fzRtStripPulse { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } } /* Shift the shell down when the strip is visible so the topbar doesn't sit underneath it. The strip height is fluid (5px bar + ~24px text + safe-top) — use 36px + safe-top as the offset; close enough for the minimal mode Jayy locked. */ body:has(.fz-rt-strip.is-on) .app-shell { padding-top: calc(36px + var(--safe-top)); } /* MOBILE-COMPAT-HAS-SELECTOR-FALLBACK (F2) — plain-selector twin for engines without :has() (Chromium <105 / Samsung Internet <20 / Firefox <121). JS toggles body.fz-rt-on in lockstep with .fz-rt-strip.is-on (app.js). Identical declarations to the :has() rule above — do NOT diverge. */ body.fz-rt-on .app-shell { padding-top: calc(36px + var(--safe-top)); } /* ───────── Auth screens ───────── */ .auth { /* v0.9.309 — A11Y-4 S6+S7: notch-aware vertical padding (--safe-top so the "sassu" wordmark clears the Dynamic Island) + svh ladder so the Sign-in button stays above the iOS Safari URL bar. */ min-height: 100vh; min-height: 100svh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--space-7) + var(--safe-top)) calc(var(--space-5) + var(--safe-right)) calc(var(--space-7) + var(--safe-bottom)) calc(var(--space-5) + var(--safe-left)); max-width: 440px; margin: 0 auto; } /* THEME-2 — auth-screen brand lockup: emblem above the W2 wordmark. The wordmark renders via the CSS-mask alpha technique: the element paints background var(--ink) clipped to the letterform alpha, so it recolors per finish with a single asset (NEVER the emblem at this size — wordmark letterforms only, per APP_BRAND_MEDIA spec). The 'sassu' text stays in the DOM (transparent) so AT still announces the brand. */ .auth__brandwrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin-bottom: var(--space-7); } .auth__brandwrap--lg { gap: var(--space-5); } .auth__emblem { width: 40px; height: 40px; object-fit: contain; /* The emblem asset carries its navy plate (no alpha master exists yet); rounding it makes the plate read as a deliberate brand badge on light finishes instead of a raw square. */ border-radius: 22%; } .auth__brandwrap--lg .auth__emblem { width: 96px; height: 96px; } .auth__brand { /* Source alpha PNG is 900×120 (7.5:1); 180×24 keeps the ratio. */ width: 180px; height: 24px; overflow: hidden; color: transparent; user-select: none; background: var(--ink); -webkit-mask: url('/assets/img/brand/wordmark-alpha.png') center / contain no-repeat; mask: url('/assets/img/brand/wordmark-alpha.png') center / contain no-repeat; } /* SETTINGS-TOP-WORDMARK-LOGO — Sassu wordmark at the top of /settings. Same alpha-mask recolor trick as .auth__brand so the wordmark tints to the theme --ink token in both Dag and Nacht. Modest header accent, not a hero. Source alpha PNG is 900×120 (7.5:1); 150×20 keeps the ratio. */ .set-brand { display: flex; justify-content: center; margin: var(--space-2) 0 var(--space-5); } .set-brand__wordmark { width: 150px; height: 20px; overflow: hidden; color: transparent; user-select: none; background: var(--ink); -webkit-mask: url('/assets/img/brand/wordmark-alpha.png') center / contain no-repeat; mask: url('/assets/img/brand/wordmark-alpha.png') center / contain no-repeat; } /* BETA-TESTER-IDENTITY-AND-ADMIN-CLARITY */ .set-beta-pill { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 4px 0 12px 16px; padding: 4px 10px 4px 8px; background: var(--accent-subtle); color: var(--ink); border: 1px solid var(--divider); border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .set-beta-pill__dot { width: 8px; height: 8px; color: var(--accent); } .set-beta-pill__label { line-height: 1; } .set-beta-chip { display: inline-block; margin-left: 8px; padding: 2px 8px; background: var(--accent-subtle); color: var(--accent); border-radius: var(--radius-md); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; } .premium-card__beta-note { margin: 8px 0 12px; padding: 10px 12px; background: var(--accent-subtle); border-left: 3px solid var(--accent); border-radius: var(--radius-md); } .premium-card__beta-note__body { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink); } .fz-admin-panel__link { margin-top: 12px; } .fz-admin-panel__link-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; } .fz-admin-panel__link-input { flex: 1; min-width: 0; font-family: monospace; font-size: 12px; padding: 8px 10px; } .fz-admin-invites__pending-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--divider); } .fz-admin-invites__pending-row:last-child { border-bottom: 0; } .fz-admin-invites__pending-meta { flex-basis: 100%; font-size: 11px; color: var(--muted); opacity: 0.7; } .auth__title { font-size: 22px; font-weight: 400; margin: 0 0 var(--space-2); letter-spacing: -0.005em; } .auth__sub { font-size: 14px; color: var(--muted); margin: 0 0 var(--space-6); } .auth__footer { margin-top: var(--space-6); text-align: center; font-size: 13px; color: var(--muted); } .auth__footer a { color: var(--ink); border-bottom: 1px solid var(--line); } /* BRAIN-CONSENT-REGISTRATION-OPTIN — default-unchecked research consent row on the signup + claim forms, and the one-time existing-user prompt overlay. */ .auth__consent { display: flex; gap: 10px; align-items: flex-start; margin: var(--space-4) 0 var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2, var(--surface)); cursor: pointer; } .auth__consent-box { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); } .auth__consent-text { font-size: 13px; line-height: 1.45; color: var(--ink); } .fz-consent-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: color-mix(in srgb, var(--ink) 45%, transparent); } .fz-consent-sheet { width: 100%; max-width: 360px; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--card, var(--surface)); box-shadow: var(--elev-3); } .fz-consent-sheet__title { margin: 0 0 var(--space-2); font-size: 19px; } .fz-consent-sheet__body { margin: 0 0 var(--space-4); color: var(--muted); font-size: 14px; line-height: 1.5; } .fz-consent-sheet__actions { display: flex; gap: var(--space-3); } .fz-consent-sheet__actions .btn { flex: 1; } /* v0.9.319 — A11Y-7 S14: first-run landing at `/`. Two equal-weight CTAs + trust line. No form, no inputs — pure orient-and-route. Inherits .auth's notch-aware ladder so the headline clears the Dynamic Island and the CTAs stay above the iOS Safari URL bar. */ .auth--landing { justify-content: center; text-align: center; } /* THEME-2 — the unauthenticated landing is a BRAND surface: Deep Navy + void-horizon background in EVERY finish (scoped --brand-* token overrides, per APP_BRAND_MEDIA_UX_SPEC §0 — navy never leaks into working screens because the class only exists on the landing shell). The webp (14 KB) is a CSS background-image, so the browser loads it on demand after first paint; background-color paints instantly beneath it. Static image — nothing animated, no reduced-motion pairing needed. */ .app-shell--landing { --bg: var(--brand-navy); --surface: var(--brand-navy); --ink: var(--brand-ink); --ink-2: var(--brand-dim); --muted: var(--brand-dim); --accent: var(--brand-ice); --accent-2: var(--brand-ice); --on-accent: var(--brand-navy); --line: rgba(168, 216, 234, 0.18); background-color: var(--brand-navy); background-image: url('/assets/img/brand/bg-void-horizon-1280.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--ink); } .auth__hero { margin-bottom: var(--space-7); } .auth__hero-headline { font-size: 26px; font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; margin: 0; color: var(--ink); } .auth__hero-sub { font-size: 15px; line-height: 1.5; margin: var(--space-3) 0 0; color: var(--muted); } .auth__cta-stack { display: flex; flex-direction: column; gap: var(--space-3); } .auth__trust { margin: var(--space-6) 0 0; font-size: 12px; color: var(--muted); text-align: center; } /* REGISTER-REQUEST-ACCESS-NO-CODE-PATH — the 'brievenbus': a quiet tertiary * text link for code-less visitors, so an empty invite field is never a dead * end. Muted + centred; not an accent control (no --on-accent needed). */ .auth__request-access { margin: calc(var(--space-3) * -1) 0 var(--space-5); font-size: 13px; color: var(--muted); text-align: center; } .auth__request-access a { color: var(--muted); border-bottom: 1px solid var(--line); cursor: pointer; } /* INVITE-LOCALE-FIRST (v0.9.657) — bilingual hint above the NL/EN picker * buttons. Self-labels in both languages by design (user has not chosen yet), * so it stays muted and centred and is never run through t(). */ .auth__locale-hint { margin: 0 0 var(--space-6); font-size: 13px; color: var(--muted); text-align: center; } /* Track A2 — "Sign in with Google". Empty until the server reports it's * configured, so .auth__google-wrap collapses to nothing when hidden. */ .auth__google-wrap:empty { display: none; } /* Beta Terms-of-Service gate (v0.9.169) — mandatory accept checkbox. */ .form-check { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 14px; line-height: 1.45; color: var(--ink); margin: var(--space-5) 0 var(--space-6); cursor: pointer; } .form-check input[type="checkbox"] { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--accent); } /* Legal links in Settings (v0.9.170) — stacked, tappable rows. v0.9.508 SETTINGS-PADDING-AND-PROFILE-KERNING-V2 — horizontal padding was 2px so the rows bled to the card's left edge. Aligned with the standard .set-row inset (var(--space-4) = 16px) + min-height 44px for tap target. */ .set-legal { display: flex; flex-direction: column; } .set-legal a { padding: 12px var(--space-4); min-height: 44px; display: flex; align-items: center; color: var(--ink); border-bottom: 1px solid var(--line); text-decoration: none; font-size: 15px; } .set-legal a:last-child { border-bottom: 0; } .auth__divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .auth__google { display: flex; justify-content: center; } /* ───────── Form primitives ───────── */ .form-group { margin-bottom: var(--space-4); } .form-label { display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-2); } /* v0.9.329 — A11Y-11B S33: hairline underline stays (minimal Sassu), but the whole field gains a soft background tint on :focus-visible so the active tap target is unambiguous. Horizontal padding lifted from 0 → 12px so the tint reads as the whole field, not just under the caret. border-radius applied to the top corners so the tint clips against the underline cleanly. */ .form-input { display: block; width: 100%; padding: 14px 12px; background: transparent; border: 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink); outline: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .form-input:focus, .form-input:focus-visible { background: var(--surface-muted); border-bottom-color: var(--ink); } .form-input::placeholder { color: var(--muted); } .form-input[aria-invalid="true"] { border-bottom-color: var(--danger); } /* v0.9.311 — A11Y-6 S18: password reveal toggle. The wrap is the positioning context for the absolutely-placed eye button; the input keeps its full-width baseline, the button rides flush-right inside the field's own padding box so it never overlaps the typed characters at common screen widths. 44×44 hit-area meets WCAG SC 2.5.5 + 2.5.8. */ .form-input-wrap { position: relative; display: block; } .form-input-wrap .form-input { padding-right: 44px; } .form-input__reveal { position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; color: var(--muted); cursor: pointer; border-radius: var(--radius-md); } .form-input__reveal:hover, .form-input__reveal:focus-visible { color: var(--ink); outline: none; } .form-input__reveal[aria-pressed="true"] { color: var(--ink); } .form-input__reveal svg { width: 22px; height: 22px; } /* v0.9.311 — A11Y-6 S19: ToS gate PDF tiles. Two equal-weight tiles stacked above the consent checkbox, replacing the inline "View ToS · Privacy" link pair. Each tile is a full-width tap target with the PDF name + a chevron; the visual weight makes "this is a document you should open" obvious. */ .tos-tiles { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0 var(--space-5); } .tos-tile { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: transparent; color: var(--ink); text-decoration: none; font-size: 14px; min-height: 44px; } .tos-tile:hover, .tos-tile:focus-visible { border-color: var(--ink); outline: none; } .tos-tile__label { display: flex; flex-direction: column; gap: 2px; } .tos-tile__name { font-weight: 500; } .tos-tile__meta { font-size: 11px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; } .tos-tile__chev { flex: 0 0 auto; color: var(--muted); } .tos-tile__chev svg { width: 18px; height: 18px; display: block; } .btn { display: inline-block; width: 100%; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); padding: 16px 20px; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); border-radius: 0; } .btn:hover { background: var(--ink-2); border-color: var(--ink-2); } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--bg); } .btn--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn--accent:hover { background: var(--accent-2); border-color: var(--accent-2); } /* Ghost-danger — destructive secondary action. Never a filled slab; calm red outline that reads as destructive without shouting. Disabled = subdued muted outline (transparent bg), not a grey slab. */ .btn--dangerghost { background: transparent; color: var(--danger); border-color: var(--danger); } .btn--dangerghost:hover { background: var(--danger); color: var(--on-danger); border-color: var(--danger); } .btn--dangerghost:disabled { opacity: 1; background: transparent; color: var(--muted); border-color: var(--line); cursor: not-allowed; } /* COACH-CLAIM-PAGE-ADD-SIGN-IN-WITH-EXISTING-ACCOUNT-OPTION (v0.9.511) — outline peer for the primary .btn. Used as the "Sign in with existing account" CTA below the divider on /claim. Token-driven so both dag + nacht inherit; same vertical rhythm as .btn (44px+ tap target via the inherited padding). */ .btn--secondary { background: transparent; color: var(--ink); border-color: var(--line); } .btn--secondary:hover { background: var(--surface-muted); border-color: var(--ink); color: var(--ink); } .btn-row { display: flex; gap: var(--space-3); } .form-error { background: transparent; border-left: 2px solid var(--danger); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4); font-size: 13px; color: var(--danger); } .form-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; color: var(--muted); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; } .form-divider::before, .form-divider::after { content: ""; flex: 1 1 0; height: 1px; background: var(--line); } /* ───────── Generic page ───────── */ .page { padding: var(--space-5); } .page__title { font-size: 28px; font-weight: 300; margin: 0 0 var(--space-2); letter-spacing: -0.01em; } .page__lede { font-size: 14px; color: var(--muted); margin: 0 0 var(--space-6); } .placeholder { border: 1px dashed var(--line); padding: var(--space-7) var(--space-5); text-align: center; color: var(--muted); } .placeholder strong { display: block; color: var(--ink-2); margin-bottom: var(--space-2); font-weight: 500; font-size: 15px; } /* ───────── Settings (v0.9.160 UX pass) ───────── */ /* v0.9.347 SETTINGS-IOS-STYLE-RESTYLE — the Settings screen paints --surface-bg (slightly tinted neutral in light, near-black in dark) so the cards visually pop. Horizontal padding tightens because the per-card inner padding now provides the gutter. v0.9.490 SETTINGS-PADDING-BLEED — top reduced from --space-5 (24px) to --space-3 (12px) so the Profile header sits close to the tab nav; bottom reduced from --space-7 (48px) to --space-4 (16px) because .app-main already adds calc(--tabbar-h + --safe-bottom + --space-5) bottom clearance, the extra 48px was double-padding that left the danger Restore row sitting in dead space. The 16px breathing room before the parent nav- clearance kicks in gives the last section a calm trailing margin. */ .set { padding: var(--space-3) var(--space-4) var(--space-4); background: var(--surface-bg); min-height: 100%; } /* Profile header */ .set-profile { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); margin-bottom: var(--space-5); border-bottom: 0; background: var(--surface-card); border-radius: var(--radius-lg); } .set-avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; font-weight: 600; letter-spacing: 0.02em; flex: 0 0 auto; } /* v0.9.508 SETTINGS-PADDING-AND-PROFILE-KERNING-V2 — .set-id is a ; v0.9.490 added margin-top to the email but spans are inline by default, so the rule had no effect and the name + email rendered on a SINGLE line. Flex-column forces the children onto separate lines so the email reads as the secondary label below the display_name. */ .set-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .set-id__name { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .set-id__email { font-size: 13px; color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .set-signout { background: none; border: 0; padding: var(--space-2); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); cursor: pointer; flex: 0 0 auto; } .set-signout:hover { color: var(--danger); } /* Groups — v0.9.347 SETTINGS-IOS-STYLE-RESTYLE: the wrapper itself is now fill-less; a child .set-card holds the rows in a rounded fill. The uppercase section label (.set-group__title) sits ABOVE the card. */ .set-group { padding: 0; border-bottom: 0; margin-bottom: var(--space-5); } .set-group:last-child { margin-bottom: 0; } .set-group__title { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--section-label); margin: 0 0 var(--space-2); padding: 0 var(--space-4); font-weight: 500; } /* Sub-label inside a card (e.g. "Accent" / "Theme" inside Appearance). v0.9.323 — A11Y-11A picker decouple needed two labelled rows in one group. Inside a card: pad to the card inset and use --section-label colour. */ .set-group__hint { font-size: 13px; color: var(--section-label); margin: 0; padding: var(--space-3) var(--space-4) var(--space-2); } .set-card > .set-group__hint:first-child { padding-top: var(--space-4); } .set-group__hint--gap { margin-top: 0; } /* SETTINGS-ACCORDION-AND-SECTION-REORG (v0.9.670) — each .set-group becomes a collapsible accordion. The h2.set-group__title stays the heading but wraps a full-width