/* ============================================================ fabm.app — Design Tokens Single source of truth. See DESIGN.md for full rationale. ============================================================ */ /* ===== Cross-document view transitions ===== Same-origin nav (e.g. /today -> /history, / -> /today) slides with native-style direction: forward = slide in from right, back = slide in from left. Direction is tagged at runtime by /nav.js. Mirrors the rules in /styles.css so transitions fire whether navigating from marketing or from app pages. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: slide-out-left 700ms cubic-bezier(0.32, 0.72, 0, 1) both; } ::view-transition-new(root) { animation: slide-in-right 700ms cubic-bezier(0.32, 0.72, 0, 1) both; } /* NOTE: NO space between `.nav-back` and `::view-transition-*`. The concatenated pseudo-element form is the spec-canonical selector — Safari does not reliably apply the descendant-combinator form to the view- transition pseudo-element tree. */ html.nav-back::view-transition-old(root) { animation: slide-out-right 700ms cubic-bezier(0.32, 0.72, 0, 1) both; } html.nav-back::view-transition-new(root) { animation: slide-in-left 700ms cubic-bezier(0.32, 0.72, 0, 1) both; } @keyframes slide-out-left { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-80px); opacity: 0; } } @keyframes slide-in-right { 0% { transform: translateX(100px); opacity: 0; } 25% { opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes slide-out-right { from { transform: translateX(0); opacity: 1; } to { transform: translateX(80px); opacity: 0; } } @keyframes slide-in-left { 0% { transform: translateX(-100px); opacity: 0; } 25% { opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } /* Swipe-triggered nav: the swipe itself IS the visual feedback, so suppress the View Transition slide animation. Inline script + nav.js add this class when navigation is triggered by a horizontal touch swipe. */ html.nav-skip-transition::view-transition-old(root), html.nav-skip-transition::view-transition-new(root) { /* Suppress the keyframe AND the browser's spec-default cross-fade. */ animation: none !important; opacity: 1 !important; mix-blend-mode: normal !important; } /* Belt-and-suspenders: also hide the OLD snapshot entirely so it can't briefly cross-fade over the new page when the transition is skipped. */ html.nav-skip-transition::view-transition-old(root) { display: none !important; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } :root { /* ── Color · Raw palette ─────────────────────────────────── */ --rose-100: #fbe4e5; /* fertile-bg */ --rose-300: #d88aa0; --rose-500: #c0506b; /* fertile status */ --rose-600: #b56576; /* primary brand */ --rose-900: #6b2a3a; /* fertile-ink */ --peach-400: #e29578; /* gradient end */ --sage-100: #d1fae5; /* dry-bg */ --sage-700: #047857; /* dry */ --sage-900: #064e3b; /* dry-ink */ --purple-100: #f5f0f8; /* foundation wash, lightest */ --purple-200: #e8ddef; --purple-300: #d5c6de; --purple-400: #c9b8d3; /* foundation peak saturation */ --purple-500: #987da8; /* foundation accent */ --purple-700: #725e7e; /* foundation ink */ --slate-100: #f3f4f6; /* unknown-bg */ --slate-500: #6b7280; /* unknown */ --slate-700: #374151; /* unknown-ink */ --red-700: #b91c1c; /* danger */ --red-800: #991b1b; /* danger:hover */ --cream-50: #fdf6f2; /* page bg */ --cream-100: #f6e1d3; /* page bg-2 highlight */ --cream-200: #efdfd5; /* hairline */ --cream-300: #e3cdbf; /* hairline strong */ --ink-900: #1f1419; /* primary text */ --ink-700: #4a3640; /* secondary text */ --ink-500: #8a7480; /* muted text */ --white: #ffffff; /* ── Color · Semantic aliases ────────────────────────────── */ --color-text: var(--ink-900); --color-text-secondary: var(--ink-700); --color-text-muted: var(--ink-500); --color-text-inverse: var(--white); --color-bg: var(--cream-50); --color-bg-elevated: var(--cream-100); --color-surface: var(--white); --color-border: var(--cream-200); --color-border-strong: var(--cream-300); --color-brand: var(--rose-600); --color-brand-2: var(--peach-400); --color-brand-ink: var(--white); --color-foundation: var(--purple-500); --color-foundation-ink: var(--purple-700); --color-danger: var(--red-700); --color-danger-hover: var(--red-800); /* ── Color · Cycle-status (semantic to the FABM domain) ──── */ --status-fertile: var(--rose-500); --status-fertile-bg: var(--rose-100); --status-fertile-ink: var(--rose-900); --status-dry: var(--sage-700); --status-dry-bg: var(--sage-100); --status-dry-ink: var(--sage-900); --status-unknown: var(--slate-500); --status-unknown-bg: var(--slate-100); --status-unknown-ink: var(--slate-700); /* ── Legacy aliases (kept until full sweep — DO NOT add new) */ --ink: var(--color-text); --ink-2: var(--color-text-secondary); --muted: var(--color-text-muted); --bg: var(--color-bg); --bg-2: var(--color-bg-elevated); --card: var(--color-surface); --line: var(--color-border); --line-2: var(--color-border-strong); --accent: var(--color-brand); --accent-2: var(--color-brand-2); --accent-ink: var(--color-brand-ink); --fertile: var(--status-fertile); --fertile-bg: var(--status-fertile-bg); --fertile-ink: var(--status-fertile-ink); --dry: var(--status-dry); --dry-bg: var(--status-dry-bg); --dry-ink: var(--status-dry-ink); --unknown: var(--status-unknown); --unknown-bg: var(--status-unknown-bg); --unknown-ink: var(--status-unknown-ink); --danger: var(--color-danger); /* ── Typography ──────────────────────────────────────────── */ --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI", Roboto, sans-serif; --font-size-xs: 12px; /* eyebrow / tag */ --font-size-sm: 13px; /* meta / fine print */ --font-size-base: 16px; /* body */ --font-size-md: 17px; --font-size-lg: 19px; /* section h2 */ --font-size-xl: 22px; /* card h3 strong */ --font-size-2xl: 28px; /* secondary h1 */ --font-size-hero: clamp(40px, 9vw, 60px); /* hero h1 / status */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 800; --letter-spacing-tight: -0.025em; --letter-spacing-eyebrow: 0.10em; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-normal: 1.5; /* ── Spacing scale (4px base) ────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --pad: var(--space-5); /* canonical page side padding */ /* ── Radii ───────────────────────────────────────────────── */ --radius-xs: 8px; /* checkbox cb */ --radius-sm: 12px; --radius-md: 16px; /* checkrow, button */ --radius: 20px; /* card (default) */ --radius-lg: 28px; /* hero bottom, dialog top */ --radius-pill: 999px; /* pills, status pill, badges */ /* ── Shadows / elevation ─────────────────────────────────── */ --shadow-1: 0 2px 8px rgba(31, 20, 25, 0.05), 0 1px 2px rgba(31, 20, 25, 0.03); --shadow-2: 0 8px 20px rgba(181, 101, 118, 0.18), 0 2px 6px rgba(181, 101, 118, 0.10); --shadow-3: 0 16px 48px rgba(181, 101, 118, 0.25), 0 4px 12px rgba(181, 101, 118, 0.15); --shadow-down-1: 0 -20px 60px rgba(31, 20, 25, 0.30); /* dialog from bottom */ --shadow: var(--shadow-1); /* legacy alias */ --shadow-hi: var(--shadow-2); /* legacy alias */ /* ── Tap targets / layout ────────────────────────────────── */ --tap-min: 44px; /* WCAG 2.5.5 minimum */ --tap: 52px; /* canonical comfortable tap */ --tabbar-h: 72px; /* ── Motion ──────────────────────────────────────────────── */ --duration-instant: 120ms; --duration-fast: 180ms; --duration-base: 220ms; --duration-medium: 320ms; --duration-slow: 600ms; --easing-standard: cubic-bezier(0.32, 0.72, 0, 1); /* gentle ease-out */ --easing-emphasized: cubic-bezier(0.4, 0, 0.2, 1); /* MD3 emphasized */ --easing-decel: cubic-bezier(0.12, 0.7, 0.2, 1); /* confetti */ /* ── Z-index layers ──────────────────────────────────────── */ --z-base: 1; --z-tabbar: 50; --z-toast: 60; --z-dialog: 100; --z-confetti: 200; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.45; color: var(--ink); background: var(--bg); background-image: radial-gradient(at 0% 0%, var(--bg-2) 0%, transparent 50%); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100dvh; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); } a { color: var(--accent); text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* Tap rows: inset focus ring so it isn't clipped by the parent qgroup's overflow */ .checkrow:focus-within { outline: none; box-shadow: inset 0 0 0 3px var(--accent); } /* ===== Hero ===== */ .hero { position: relative; padding-top: calc(env(safe-area-inset-top) + 6px); padding-bottom: 14px; /* Background stays edge-to-edge; text content aligns with .wrap's content column on desktop */ padding-inline: max(var(--pad), calc((100vw - 480px) / 2)); color: var(--accent-ink); background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); box-shadow: var(--shadow-hi); overflow: hidden; } .hero::after { content: ""; position: absolute; top: -40%; right: -20%; width: 70%; height: 140%; background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%); pointer-events: none; } .hero .brand { display: flex; align-items: center; margin: 0 0 4px; } .hero .brand img { height: 22px; width: auto; opacity: 0.92; } .hero .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; margin: 0 0 6px; } .hero h1, .hero .status-h { font-size: clamp(40px, 9vw, 56px); font-weight: 800; letter-spacing: -0.025em; margin: 0; line-height: 1.02; } .hero h1 { margin: 0 0 2px; } .hero .date { margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; opacity: 0.85; } .hero .status-detail { margin: 10px 0 0; font-size: 15px; opacity: 0.88; font-weight: 500; } .hero .status-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 16px; margin-top: 18px; border: 0; background: rgba(255, 255, 255, 0.96); color: #6e3a4a; border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.005em; cursor: pointer; text-align: left; box-shadow: 0 4px 14px rgba(31, 20, 25, 0.18), 0 1px 2px rgba(31, 20, 25, 0.10); transition: background 180ms ease, transform 120ms ease, box-shadow 220ms ease; } .hero .status-cta .cta-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } .hero .status-cta:hover { background: #fff; box-shadow: 0 6px 18px rgba(31, 20, 25, 0.22), 0 1px 3px rgba(31, 20, 25, 0.12); } .hero .status-cta:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(31, 20, 25, 0.16); } .hero .status-cta.is-hidden { display: none !important; } /* Generic utility — hides any element when no element-specific animation/layout overrides apply. */ #history-actions.is-hidden { display: none; } /* ===== Bottom-sheet dialog ===== */ dialog.sheet { border: 0; padding: 0; max-width: 520px; width: 100%; margin: auto auto 0 auto; background: var(--bg); color: var(--ink); border-radius: 28px 28px 0 0; box-shadow: 0 -20px 60px rgba(31, 20, 25, 0.30); overflow: visible; } dialog.sheet[open] { animation: sheet-up 360ms cubic-bezier(0.32, 0.72, 0, 1); } dialog.sheet::backdrop { background: rgba(31, 20, 25, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: sheet-fade 260ms ease; } @keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } } dialog.sheet form { padding: 28px 22px max(22px, env(safe-area-inset-bottom)); } dialog.sheet h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; } dialog.sheet .sheet-date { font-size: 12px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px; } dialog.sheet .sheet-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 14px; } dialog.sheet .sheet-actions .btn { margin-top: 0; } /* Drag-handle pull tab at top of sheet (visual cue) */ dialog.sheet::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; background: var(--line-2); border-radius: 999px; transform: translateX(-50%); } @media (min-width: 540px) { dialog.sheet { margin: auto; border-radius: 24px; box-shadow: 0 24px 80px rgba(31, 20, 25, 0.30); } dialog.sheet[open] { animation: sheet-pop 700ms cubic-bezier(0.32, 0.72, 0, 1); } @keyframes sheet-pop { from { transform: translateY(20px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } dialog.sheet::before { display: none; } } /* ===== Done modal (popup containing the original .done card) ===== The dialog itself is a transparent positioning wrapper, centered in the viewport. The .done card inside keeps its existing styling — same green gradient, same horizontal flex layout, same checkmark + streak + Add yesterday button — exactly as it rendered inline before. */ dialog.sheet--done { margin: auto; max-width: 420px; width: calc(100% - 32px); padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; /* Suppress the dialog's auto-focus outline (the blue ring Safari draws around showModal() targets). Focusable children keep their own rings. */ outline: none; } dialog.sheet--done:focus, dialog.sheet--done:focus-visible { outline: none; } /* The dialog auto-focuses its first focusable child (the Add yesterday button), which would paint the global :focus-visible rose ring around it. Suppress that on the modal's button — keyboard tab still works, it just doesn't ring on initial pop. */ .sheet--done .done-cta:focus, .sheet--done .done-cta:focus-visible { outline: none; } dialog.sheet--done[open] { animation: popup-in 280ms cubic-bezier(0.32, 0.72, 0, 1); } @keyframes popup-in { from { transform: translateY(8px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* Hide the drag-handle pull tab — this is a pop-up, not a draggable sheet. */ dialog.sheet--done::before { display: none !important; } /* Inside the modal, the .done card stays static (no slide-out transition when the dialog closes) and never collapses via .is-hidden. More generous padding + larger checkmark so the card reads as a deliberate moment rather than a sliver, especially when "Add yesterday" is hidden. */ .done.done--in-modal { margin: 0; padding: 32px 28px; gap: 22px; min-height: 144px; max-height: none; transition: none; } .done.done--in-modal .done-icon { flex: 0 0 72px; } .done.done--in-modal .done-icon .checkmark { width: 72px; height: 72px; } .done.done--in-modal .done-text { text-align: center; } .done.done--in-modal .done-streak { align-items: center; } .done.done--in-modal .done-streak .streak-n { font-size: 72px; } .done.done--in-modal .done-streak .streak-l { font-size: 15px; margin-top: 8px; } .sheet--done .done-cta { margin-top: 14px; } /* ===== Page wrap ===== */ .wrap { max-width: 520px; margin: 0 auto; padding: 12px var(--pad) 24px; } .wrap--flush { padding-top: 0; } /* ===== Headings ===== */ h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; } h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 28px 0 12px; } h3 { font-size: 16px; font-weight: 700; margin: 12px 0 6px; } p { margin: 0 0 12px; } .lead { color: var(--ink-2); font-size: 15px; } .fine { color: var(--muted); font-size: 13px; margin-top: 24px; line-height: 1.5; } .fine--center { text-align: center; } /* ===== Card ===== */ .card { background: var(--card); border-radius: var(--radius); padding: 20px; margin: 0 0 14px; box-shadow: var(--shadow); } /* ===== Form help text ===== */ .form-help { font-size: 13px; color: var(--muted); margin: 0 4px 10px; } /* ===== Tap-to-mark check rows (with Context Transition) ===== */ .checkrow, .qgroup { overflow: hidden; max-height: 120px; transform-origin: top center; /* Symmetric ease-in-out paces the motion evenly across the duration: gentle accel at start, gentle decel at end, no front-loaded snap. Reads as deliberate "unfolding" instead of "popping open". */ transition: max-height 620ms cubic-bezier(0.65, 0, 0.35, 1), opacity 460ms ease, transform 620ms cubic-bezier(0.65, 0, 0.35, 1), margin-top 620ms cubic-bezier(0.65, 0, 0.35, 1), margin-bottom 620ms cubic-bezier(0.65, 0, 0.35, 1), padding-top 620ms cubic-bezier(0.65, 0, 0.35, 1), padding-bottom 620ms cubic-bezier(0.65, 0, 0.35, 1), background 220ms ease, border-color 220ms ease; } .qgroup { max-height: 260px; padding: 0; background: none; box-shadow: none; } .checkrow.is-hidden, .qgroup.is-hidden { opacity: 0; max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; transform: translateY(-6px) scale(0.98); pointer-events: none; } .checkrow { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 6px; cursor: pointer; border: 2px solid transparent; user-select: none; -webkit-user-select: none; } .checkrow:active { transform: scale(0.99); } .checkrow input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .checkrow .cb { flex: 0 0 auto; position: relative; width: 28px; height: 28px; border-radius: 8px; border: 2.5px solid var(--line-2); background: var(--bg); transition: background 200ms ease, border-color 200ms ease, transform 160ms ease; } .checkrow .cb::after { content: ""; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: #fff; opacity: 0; transition: opacity 180ms ease; } .checkrow:has(input:checked) { background: linear-gradient(110deg, rgba(181,101,118,0.07), rgba(226,149,120,0.05)); border-color: rgba(181,101,118,0.22); } .checkrow:has(input:checked) .cb { background: var(--accent); border-color: var(--accent); transform: scale(1.04); } .checkrow:has(input:checked) .cb::after { content: "✓"; opacity: 1; font-size: 18px; line-height: 1; font-weight: 900; } .checkrow .q-text { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.3; } /* ===== "Day saved" reward card ===== */ .done { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px 22px; margin: 18px 0 6px; background: linear-gradient(135deg, var(--dry-bg) 0%, #e6f4eb 50%, #fae8de 100%); color: var(--dry-ink); border-radius: 22px; overflow: hidden; box-shadow: 0 8px 24px rgba(4, 120, 87, 0.14), 0 2px 6px rgba(4, 120, 87, 0.08); max-height: 200px; /* Matches the followup-drawer pacing (620ms ease-in-out) so the day-saved card unfolds with the same deliberate cadence as the rest of the form. */ transition: max-height 620ms cubic-bezier(0.65, 0, 0.35, 1), opacity 460ms ease, transform 620ms cubic-bezier(0.65, 0, 0.35, 1), margin 620ms cubic-bezier(0.65, 0, 0.35, 1), padding 620ms cubic-bezier(0.65, 0, 0.35, 1); } .done.is-hidden { opacity: 0; max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; transform: translateY(-8px) scale(0.96); pointer-events: none; } .done.is-celebrating { animation: done-pop 1100ms cubic-bezier(0.32, 0.72, 0, 1); } @keyframes done-pop { 0% { transform: translateY(0) scale(1); } 18% { transform: translateY(-6px) scale(1.04); } 40% { transform: translateY(-1px) scale(1.015); } 100% { transform: translateY(0) scale(1); } } /* Sustained shimmer sweep across the done card while celebrating */ .done.is-celebrating::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%); transform: translateX(-100%); animation: done-shimmer 1500ms 200ms ease-out; pointer-events: none; } @keyframes done-shimmer { to { transform: translateX(100%); } } /* Shockwave ring radiating from the checkmark */ .done-icon { position: relative; } .done.is-celebrating .done-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 3px solid var(--dry); opacity: 0; animation: shockwave 1100ms 380ms cubic-bezier(0.2, 0.6, 0.2, 1) both; pointer-events: none; } @keyframes shockwave { 0% { transform: scale(0.6); opacity: 0.6; } 100% { transform: scale(2.4); opacity: 0; } } /* Hero celebratory flash */ .hero.is-celebrating::after { animation: hero-flash 1400ms ease-out; } @keyframes hero-flash { 0% { background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%); } 20% { background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, transparent 70%); } 100% { background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%); } } /* Status H1 quick bounce */ .hero.is-celebrating .status-h { animation: status-bounce 800ms cubic-bezier(0.32, 0.72, 0, 1); } @keyframes status-bounce { 0% { transform: scale(1); } 25% { transform: scale(1.08); } 60% { transform: scale(0.99); } 100% { transform: scale(1); } } .done-icon { flex: 0 0 56px; color: var(--dry); filter: drop-shadow(0 2px 4px rgba(4, 120, 87, 0.18)); } .done-icon .checkmark { display: block; width: 56px; height: 56px; } .checkmark .check-bg { stroke-dasharray: 164; stroke-dashoffset: 164; } .checkmark .check-path { stroke-dasharray: 48; stroke-dashoffset: 48; } .done.is-celebrating .check-bg { animation: dash-circle 520ms 80ms cubic-bezier(0.32, 0.72, 0, 1) forwards; } .done.is-celebrating .check-path { animation: dash-check 360ms 480ms cubic-bezier(0.32, 0.72, 0, 1) forwards; } @keyframes dash-circle { to { stroke-dashoffset: 0; } } @keyframes dash-check { to { stroke-dashoffset: 0; } } /* Static state after celebration (and on page reload where day is already complete) */ .done:not(.is-celebrating) .check-bg, .done:not(.is-celebrating) .check-path { stroke-dashoffset: 0; } .done-text { flex: 1; min-width: 0; } /* Streak is the actual achievement; 'Day saved' was an app mechanism, not an achievement, so the H2 was removed. The number is the visual anchor. */ .done-streak { margin: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: 1; } .done-streak .streak-n { font-size: 64px; font-weight: 800; letter-spacing: -0.04em; color: var(--dry-ink); line-height: 0.9; } .done-streak .streak-l { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dry); margin-top: 6px; } /* ===== Confetti rain (falls from top of viewport) ===== */ .confetti-stage { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; pointer-events: none; overflow: hidden; z-index: var(--z-confetti); } .confetti { position: absolute; top: -32px; left: var(--start-x, 50%); width: 9px; height: 14px; border-radius: 2px; pointer-events: none; --start-x: 50%; --drift: 0; --r: 360deg; --d: 0ms; --dur: 2800ms; animation: confetti-fall var(--dur) cubic-bezier(0.32, 0.05, 0.5, 1) var(--d) both; will-change: transform, opacity; } .confetti.round { width: 10px; height: 10px; border-radius: 50%; } .confetti.streamer { width: 5px; height: 18px; } @keyframes confetti-fall { 0% { transform: translateY(0) translateX(0) rotate(0); opacity: 0; } 4% { opacity: 1; } 100% { transform: translateY(110vh) translateX(calc(var(--drift) * 1px)) rotate(var(--r)); opacity: 0.85; } } /* ===== Yes/No segmented control ===== */ .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; border: 0; } .seg legend { display: none; } .seg label { position: relative; min-height: var(--tap); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px; background: var(--bg); border: 2px solid transparent; border-radius: 16px; font-weight: 600; font-size: 16px; color: var(--ink-2); cursor: pointer; transition: transform 120ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease; user-select: none; } .seg label:active { transform: scale(0.97); } .seg input[type=radio] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .seg label:has(input:checked) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 4px 12px rgba(181, 101, 118, 0.28); } .seg .ico { width: 18px; height: 18px; display: inline-block; } /* ===== Single button style ===== Press-and-lift animation pattern shared with rrmacademy.org's donate button: a soft baseline shadow lifts on hover, then collapses + the button scales 97% on active. Reads as a small tactile "push" press. */ .btn, .primary { display: block; width: 100%; min-height: 52px; border: 0; border-radius: 18px; background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 600; text-align: center; padding: 14px 20px; margin-top: 10px; cursor: pointer; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10); transition: background 150ms ease, box-shadow 150ms ease, transform 100ms ease; } .btn:hover, .primary:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .btn:active, .primary:active { transform: scale(0.97); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } .btn:disabled, .primary:disabled { opacity: 0.55; cursor: not-allowed; } /* Dangerous-action trigger: dashed outline to read as "this needs intent", not a primary-weight commit. The final commit lives in a confirmation modal and uses .btn--danger-solid. */ .btn--danger { background: transparent; color: var(--danger); border: 2px dashed var(--danger); padding: 12px 20px; /* compensate for 2px border so total height matches */ } .btn--danger:hover { background: rgba(155, 28, 28, 0.06); } .btn--danger:active { background: rgba(155, 28, 28, 0.10); } /* Final commit button inside the delete confirmation modal. Solid red, only enabled after the user types the confirmation phrase. */ .btn--danger-solid { background: var(--danger); color: #fff; border: 0; } .btn--danger-solid:hover { background: #991b1b; } .btn--ghost { background: transparent; color: var(--accent); border: 1.5px solid var(--line-2); } .btn--ghost:hover { background: var(--bg); border-color: var(--accent); } /* Button with leading icon (square-plus etc). Inline-flex centers icon+label together so the pair stays visually balanced inside the button. */ .btn--with-icon { display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .btn--with-icon .btn-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } /* Confirmation phrase input inside the delete dialog */ .sheet .delete-phrase { display: block; width: 100%; margin: 6px 0 0; padding: 14px 16px; border: 1.5px solid var(--line-2); border-radius: 14px; font-family: inherit; font-size: 16px; /* >=16px stops iOS from zooming on focus */ background: var(--bg); color: var(--ink); -webkit-appearance: none; appearance: none; transition: border-color 180ms ease, background 180ms ease; } .sheet .delete-phrase:focus { outline: none; border-color: var(--danger); background: #fff; } .sheet .delete-phrase::placeholder { color: var(--muted); opacity: 0.7; } /* ===== History list — mark-based, no interpretation ===== The chart shows what the user marked; it never colors days by fertile/dry. Marks are ink-toned glyphs the user can read herself. ============================================================ */ .day-list { list-style: none; padding: 0; margin: 0 0 18px; background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; } .day { display: grid; grid-template-columns: minmax(112px, max-content) 1fr; align-items: baseline; gap: 18px; padding: 16px 18px; border-bottom: 1px solid var(--color-border); } .day:last-child { border-bottom: 0; } .day-date { font-weight: 600; font-size: 15px; color: var(--color-text); font-variant-numeric: tabular-nums; } .day-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 15px; color: var(--color-text-secondary); min-height: 22px; } /* Mark glyphs — pure data icons. Never colored by inferred status. */ .mark { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .mark::before { content: ""; display: inline-block; flex-shrink: 0; } /* "Saw mucus" mark mirrors the checkbox glyph from the Today form: rose square + white ✓. Reading History should feel like seeing the same checked box you tapped earlier. */ .mark-mucus::before { content: "✓"; width: 18px; height: 18px; border-radius: 5px; background: var(--color-brand); color: var(--color-brand-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; line-height: 1; } /* Bleed mark: solid rose-red dot, distinct from the mucus check glyph. */ .mark-bled::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--rose-500); display: inline-block; } .mark-no-mucus::before { width: 14px; height: 3px; border-radius: 2px; background: var(--color-text-muted); } .mark-checked::before { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-text-muted); box-sizing: border-box; } .mark-sex { color: var(--color-text); } .mark-sex svg { width: 14px; height: 14px; display: inline-block; } .mark-sex::before { display: none; } .mark-detail { font-size: 13px; color: var(--color-text-muted); white-space: nowrap; } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Legend card — explains the marks once at the top of History */ .legend { padding: 16px 18px; margin-bottom: 18px; } .legend-title { font-size: 12px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 12px; } .legend-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; color: var(--color-text); } .legend-list li { display: inline-flex; align-items: center; gap: 8px; } /* ===== Saving banner (consent off) ===== */ .saving-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 16px; margin-bottom: 16px; background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-size: 14px; color: var(--color-text); line-height: 1.4; } .saving-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-muted); flex-shrink: 0; } .saving-banner-text { flex: 1; min-width: 0; } .saving-banner-text strong { font-weight: 700; } .saving-banner-cta { border: 0; background: var(--color-brand); color: var(--color-brand-ink); font-weight: 600; font-size: 14px; padding: 10px 16px; border-radius: 999px; cursor: pointer; } .saving-banner-cta:hover { background: var(--rose-900); } .saving-banner.is-hidden { display: none !important; } /* ===== Saving opt-in card (History page) ===== */ .saving-empty { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 32px 24px 28px; text-align: center; margin-bottom: 16px; } .saving-empty[hidden] { display: none; } .saving-empty-mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-bg-elevated); color: var(--color-brand); margin: 0 auto 18px; } .saving-empty-mark svg { width: 28px; height: 28px; } .saving-empty h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--color-text); line-height: 1.2; } .saving-empty p { font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); margin: 0 auto 18px; max-width: 32em; } .saving-empty .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 22px; font-size: 16px; font-weight: 600; border-radius: var(--radius-md); border: 0; background: var(--color-brand); color: var(--color-brand-ink); cursor: pointer; } .saving-empty .btn:hover { background: var(--rose-900); } .saving-empty-fine { font-size: 13px; color: var(--color-text-muted); margin: 14px 0 0; } /* ===== Consent dialog (variant of sheet) ===== */ .consent-help { font-size: 13px; color: var(--color-text-muted); margin: 8px 0 0; } /* ===== Page hero (history / method / about) ===== */ .hero--page .status-detail { margin-top: 8px; } /* ===== Article / prose card ===== */ .prose { padding: 20px 22px; margin-bottom: 14px; } .prose h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--color-text); } .prose p { font-size: 16px; line-height: 1.55; color: var(--color-text-secondary); margin: 0 0 12px; } .prose p:last-child { margin-bottom: 0; } .prose a { color: var(--color-brand); font-weight: 600; } .prose ul, .prose ol { margin: 0 0 12px; padding-left: 22px; } .prose li { font-size: 16px; line-height: 1.55; color: var(--color-text-secondary); margin-bottom: 6px; } .rule-list { counter-reset: rule; padding-left: 0; list-style: none; } .rule-list li { position: relative; padding-left: 38px; margin-bottom: 12px; } .rule-list li::before { counter-increment: rule; content: counter(rule); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--color-brand); color: var(--color-brand-ink); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } /* ===== History page actions ===== */ .history-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; } /* ===== Done card — show "Add yesterday" inside ===== */ .done .done-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 16px 10px 14px; border: 0; background: rgba(255, 255, 255, 0.7); color: var(--rose-900); border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10); transition: background 150ms ease, box-shadow 150ms ease, transform 100ms ease; } .done .done-cta:hover { background: var(--white); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .done .done-cta:active { transform: scale(0.97); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } .done .done-cta .cta-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .done .done-cta.is-hidden { display: none !important; } /* ===== Method picker ===== */ .methods { list-style: none; padding: 0; margin: 0; } .method { background: var(--card); border-radius: var(--radius); padding: 20px; margin-bottom: 12px; box-shadow: var(--shadow); position: relative; } .method h2 { margin: 0 0 6px; font-size: 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .method p { font-size: 14px; color: var(--ink-2); margin: 0 0 14px; } .method.active { border: 2px solid var(--accent); } .method.active::before { content: "Active"; position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--bg-2); padding: 4px 10px; border-radius: 999px; } .method.disabled { opacity: 0.7; } .method .tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; background: var(--unknown-bg); color: var(--unknown-ink); padding: 3px 10px; border-radius: 999px; font-weight: 700; } /* ===== Bottom tab bar (icon-only) ===== */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tabbar); display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border-top: 1px solid var(--line); padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* Icons align with card content column on desktop */ padding-inline: max(10px, calc((100vw - 480px) / 2)); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); } .tabbar a { display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--muted); border-radius: 16px; min-height: 44px; transition: color 200ms ease, background 200ms ease, transform 160ms ease; } .tabbar a:active { transform: scale(0.94); } .tabbar a svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .tabbar a[aria-current="page"] { color: var(--accent); background: var(--bg-2); } .tabbar a[aria-current="page"] svg { stroke-width: 2; } .tab-label { /* hidden but kept in DOM for screen readers */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ===== Toast ===== */ .toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px); transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--accent-ink); padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,0.20); opacity: 0; pointer-events: none; transition: opacity 220ms ease, transform 220ms ease; z-index: var(--z-dialog); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ===== Motion ===== */ @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } [hidden] { display: none !important; } /* ===== Continuity Transition (shared elements persist + morph across pages) ===== */ .brand img { view-transition-name: brand; } .tabbar { view-transition-name: tabbar; } /* Status H1 + subtitle morph -- scoped to Today page only. Cross-document nav: status-h doesn't exist on history/method/about, and the subtitle text is unrelated across pages, so naming them globally caused broken/awkward cross-doc transitions. Naming the parent .hero is enough for the shared hero shell morph; do NOT also name the children. */ .hero--today .status-h { view-transition-name: status-h; } .hero--today .status-detail { view-transition-name: status-detail; } .hero { view-transition-name: hero; } ::view-transition-group(brand), ::view-transition-group(tabbar) { animation-duration: 320ms; } ::view-transition-group(status-h), ::view-transition-group(status-detail) { animation-duration: 380ms; animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ============================================================ Paused state — temporary, while app forms are disabled. Remove this block when the app resumes. ============================================================ */ .hero--paused { text-align: center; } .hero--paused .status-h { color: var(--color-text-inverse); } .hero--paused .status-detail { color: var(--color-text-inverse); opacity: 0.92; } .paused-card { text-align: left; padding: 24px 22px; } .paused-card h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--color-text); } .paused-card p { font-size: 16px; line-height: 1.55; color: var(--color-text-secondary); margin: 0 0 12px; } .paused-card p:last-child { margin-bottom: 0; } .paused-card .paused-meta { font-size: 14px; color: var(--color-text-muted); } .paused-card a { color: var(--color-brand); font-weight: 600; } body.paused .wrap { max-width: 520px; margin: 0 auto; padding: 24px var(--pad, 20px) 48px; } /* ===== Empty history state ===== */ .empty { text-align: center; padding: 32px 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .empty-text { font-size: 16px; color: var(--color-text-secondary); margin: 0; } .empty-cta { text-decoration: none; padding: 14px 22px; } /* Follow-finger swipe wrapper. nav.js wraps everything-before-the-tabbar in #swipe-stage on app pages so it can be translated as a unit. The preview is injected on first touchmove with the next page's content. */ #swipe-stage { position: relative; will-change: transform; } #swipe-preview { will-change: transform; }