/* ========================================================================== Our Memory Book — Design System Aesthetic: "Intimate Warmth" — literary elegance meets personal warmth ========================================================================== */ /* ---------- Fonts ---------- */ /* Font loading moved to in base.html for faster preconnect */ /* ---------- Design Tokens ---------- */ :root { /* Typography */ --font-display: 'Cormorant Garamond', 'Georgia', serif; --font-body: 'Outfit', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* The two steps below body (DESIGN.md §3 ▸ The Two-Steps-Below-Body Rule) */ --text-sm: 0.875rem; /* meta, captions, secondary UI copy */ --text-xs: 0.8rem; /* badges, timestamps, fine print */ /* Palette — warm, grounded, intimate */ --color-bg: #F8F5F0; --color-bg-warm: #F3EDE5; --color-bg-card: #FFFCF8; --color-bg-card-hover: #FFF9F2; --color-surface: #EDE8E0; --color-surface-alt: #E8E3DA; --color-text: #1A1614; --color-text-secondary: #5C524A; /* #6A5F54 keeps the warm tone but clears WCAG AA (4.5:1) at 12-14px against --color-bg-card */ --color-text-muted: #6A5F54; /* #B65B37 clears WCAG AA (4.52:1) against #FFFCF8 — verified 2026-04-28; deepened two steps from #B85C38 */ --color-primary: #B65B37; --color-primary-hover: #9E4D2E; /* 2026-08 critique fix — referenced 14x across CSS sources (link color, pricing badges, page CTAs) but never defined; links fell back to inherited ink (WCAG 1.4.1 failure). #9E4D2E clears WCAG AA: 5.78:1 on --color-bg-card (#FFFCF8), 5.43:1 on --color-bg (#F8F5F0) — verified via a relative-luminance script. */ --color-primary-deep: #9E4D2E; /* 2026-08 critique fix (Task 2) — dark-scoped text-safe alias for --color-primary. In light mode it's identical to --color-primary-deep (same 5.78:1 / 5.43:1 clearance already verified above); dark.css re-points it to a lifted terracotta that clears AA against both dark surfaces, where the raw --color-primary text/hover use case (e.g. .draft-discard:hover in components.css) only hit 3.66:1 / 3.22:1. */ --color-primary-text: var(--color-primary-deep); /* 2026-08 critique fix (Task 2 review fix) — dedicated hover variant for --color-primary-text. --color-primary-hover (#9E4D2E) is byte-identical to --color-primary-deep in light mode, so the 7 rest/hover pairs re-pointed to --color-primary-text lost their hover affordance (rest == hover). #8B4328 is a further-deepened step of the same hue: 7.00:1 on --color-bg-card, 6.59:1 on --color-bg — both clear AA, visibly darker than the rest color. Scoped to text/hover only — do not use for backgrounds (--color-primary-hover is unaffected and stays as-is for its many other, unrelated background/border uses). */ --color-primary-text-hover: #8B4328; --color-primary-light: #D4A574; --color-primary-glow: rgba(184, 92, 56, 0.12); --color-text-on-primary: #FFFCF8; --color-accent: #7D8471; --color-accent-light: #A8B09E; /* sage as TEXT: ≥4.5:1 on bg/card/surface — #5C6352 measures 5.74:1 on --color-bg (#F8F5F0), 6.11:1 on --color-bg-card (#FFFCF8), 5.37:1 on --color-surface (#F3EDE5); verified via a relative-luminance script (2026-09-04 audit P1, WCAG 1.4.3). --color-accent itself (3.57:1) stays fill/border-only (badges, borders, confirmation surfaces). */ --color-accent-text: #5C6352; --color-border: #DDD5CB; --color-border-light: #EAE4DC; /* The focus indicator is a PAIR: a border-colour change plus the decorative --shadow-glow ring. Only the border carries measurable contrast (the 12% glow measures ~1.16:1 against the field it sits on, and would need roughly 80% alpha to clear 3:1 on its own -- a solid terracotta slab on every input, and a direct contradiction of DESIGN.md's "3px terracotta at 12%" rule). So the border is what must clear WCAG 1.4.11, and it was doing so with about 6% headroom. --color-primary-deep measures ~5.5:1 on parchment where --color-primary measures ~4.4:1, which moves the indicator off the floor without touching the glow or shifting layout. Design critique 2026-09-08. */ --color-border-focus: var(--color-primary-deep); /* Decorative — sealed book, occasion gradients, export previews */ --color-leather-dark: #3D352F; --color-leather: #5C524A; --color-leather-spine: #4A423B; --color-clasp: #A0794F; --color-parchment: #F5F0E8; --color-parchment-warm: #FAF8F5; --color-ink-warm: #3D3428; --color-ink-soft: #4A4035; --color-ink-gold: #C4B598; --color-ink-muted: #8A7D6B; --color-ink-sage: #9A8E7F; --color-ink-deep: #6B5D4A; --color-storybook-gold: #C4A265; --color-storybook-ink: #3A2E1F; --color-storybook-muted: #9A8A6F; --color-storybook-border: #D5C9B1; --color-modern-ink: #2D2A26; --color-modern-card: #F5F2ED; --color-modern-green: #4A6741; --color-occasion-rose: #C87B6B; --color-occasion-rose-light: #F5E6E0; /* --color-occasion-sky removed 2026-05-18: cool-blue tokens violated the No Cool Surfaces rule and were unreferenced everywhere outside their own definition + dark override. Same discipline applied earlier to --color-info. Restore as a warm-neutral if a future occasion needs it. */ --color-occasion-stone: #9B9590; --color-occasion-stone-light: #E8E6E3; --color-occasion-cream: #E8E4D9; --color-occasion-sand: #F0E8DC; --color-memorial: #7A6F66; --color-memorial-hover: #6A6058; --color-memorial-light: #B5ADA5; --color-memorial-glow: rgba(122, 111, 102, 0.12); --color-memorial-bg: #F5F3F0; --color-success: #5E8B65; --color-error: #C0503E; --color-warning: #C49333; /* Warm slate-mauve, replaces cool-blue Notice Info per 2026-05-18 critique. Reads as quiet/informational; sits next to terracotta/walnut without cooling the palette. 4.72:1 on parchment-card (was 3.66:1 with the prior #5B7FA0 — both warmer AND higher contrast). */ --color-info: #7A6B66; /* Semantic state backgrounds */ --color-bg-success: #f0f7f1; --color-bg-error: #fdf2f0; --color-bg-warning: #fdf6ec; --color-bg-info: #F4F0EE; --color-bg-error-subtle: #fdf8f7; /* Badge backgrounds */ --color-badge-success: rgba(94, 139, 101, 0.12); --color-badge-warning: rgba(196, 147, 51, 0.12); --color-badge-warning-subtle: rgba(196, 147, 51, 0.06); --color-badge-warning-strong: rgba(196, 147, 51, 0.15); --color-badge-info: rgba(122, 107, 102, 0.12); --color-badge-error: rgba(192, 80, 62, 0.12); --color-badge-muted: rgba(138, 127, 118, 0.12); /* Badge text — darker than semantic colors to clear WCAG AA at 12px on tinted pill backgrounds. */ --color-badge-text-success: #406B47; --color-badge-text-warning: #8A6522; --color-badge-text-info: #4E433F; --color-badge-text-error: #8E3525; --color-badge-text-muted: #5C524A; --color-error-hover: #a8412f; --color-error-active: #a0403a; --color-success-hover: #4d7a54; /* Solid success FILL behind light text (approve button, success icon). --color-success (#5E8B65) is tuned as a tint/border and only hits 3.83:1 with --color-text-on-primary; this deeper green clears AA (4.86:1). Dark mode inherits it (dark.css does not re-point it) — #4d7a54 on the dark surface keeps light-text contrast. Audit 2026-06-22. */ --color-success-strong: #4d7a54; /* Status TEXT on a tinted/light surface (alerts, inline form errors, failed-state labels, moderation diff ins/del). The saturated --color-* brand values are tuned as fills/borders and fail WCAG AA (4.5:1) at body size as text on the light --color-bg-* tints (warning was 2.59:1, success 3.60, error 4.29). These darker variants clear AA on every light surface (tint, parchment, card: 4.55-8.44:1). Dark mode re-points them to the lighter status colors (which already clear AA on the dark surface) in dark.css. NEVER use --color-{success,error,warning,info} directly as text on a light bg — use these. Audit 2026-06-06. */ --color-text-on-bg-success: #406B47; --color-text-on-bg-error: #8E3525; --color-text-on-bg-warning: #8A6522; --color-text-on-bg-info: #4E433F; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; /* Page-shell width tiers. Two values cover every marketing surface so future pages don't keep inventing new widths. - Narrative: long-form prose, manifestos, founder pages, single- column reading. About, how-it-works, promise, faq, and the homepage's read-y bands all use this. Wraps a ~58-65ch reading column with breathing room on both sides. - Grid: 3-column dashboards and the homepage's wide visual bands. Pricing, help center, the homepage hero / promise strip / pricing teaser all use this. */ --width-narrative: 880px; --width-grid: 1100px; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; /* Shadows — warm-tinted */ --shadow-sm: 0 1px 3px rgba(26, 22, 20, 0.06); --shadow-md: 0 4px 12px rgba(26, 22, 20, 0.08); --shadow-lg: 0 8px 30px rgba(26, 22, 20, 0.10); --shadow-glow: 0 0 0 3px var(--color-primary-glow); /* Transitions */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* single easing voice — --ease-emphasis removed 2026-04-28 */ --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; } /* ---------- Reset & Base ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { font-family: var(--font-body); font-weight: 400; color: var(--color-text); background-color: var(--color-bg); line-height: 1.65; min-height: 100vh; display: flex; flex-direction: column; position: relative; } /* Subtle grain overlay for tactile depth */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; pointer-events: none; z-index: 1; } /* ---------- Typography ---------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; color: var(--color-text); letter-spacing: -0.01em; } h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 700; } h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); } h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); } /* Standardized heading scale */ .heading-hero { font-size: clamp(2.5rem, 6vw, 3.5rem); } .heading-page { font-size: clamp(2rem, 4vw, 2.8rem); } .heading-section { font-size: clamp(1.3rem, 3vw, 1.6rem); } /* Skip to content — screen reader / keyboard accessibility */ .skip-link { position: fixed; top: var(--space-sm); left: var(--space-md); padding: var(--space-sm) var(--space-md); background: var(--color-primary); color: var(--color-text-on-primary); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; z-index: 200; transform: translateY(-200%); transition: transform var(--duration-fast) var(--ease-out); } .skip-link:focus { transform: translateY(0); color: var(--color-text-on-primary); } /* Copy button success state */ .copy-btn { transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); min-width: 5.5rem; } .copy-btn--success { background: var(--color-success); color: var(--color-text-on-primary); border-color: var(--color-success); animation: copyPulse 0.3s var(--ease-out); } @keyframes copyPulse { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } } p { max-width: 60ch; } a { /* Use the deep terracotta for inline links so they clear WCAG AA (4.5:1) against parchment backgrounds. --color-primary at #B65B37 computes ~4.4:1 against #FFFCF8 — just under threshold. The deep variant #9E4D2E clears at ~5.5:1. Buttons keep --color-primary since they pair it with cream text on terracotta background (high contrast in the inverse direction). */ color: var(--color-primary-deep); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--color-primary-text-hover); } /* ---------- Reduced Motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* Preserve brief opacity fades for functional state feedback */ .btn, .messages .message, .theme-toggle, [data-theme] img { transition-duration: 150ms !important; transition-property: opacity, color, background-color !important; } } /* ---------- Layout ---------- */ .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 var(--space-lg); } main { flex: 1; padding: var(--space-2xl) 0; } /* ---------- Utilities ---------- */ .text-center { text-align: center; } .text-muted { color: var(--color-text-muted); } .text-sm { font-size: var(--text-sm); } .text-error { color: var(--color-error); } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mb-sm { margin-bottom: var(--space-sm); } .m-0 { margin: 0; } /* ========================================================================== Interior Pages — Component Library ========================================================================== */ /* ---------- Page Layout ---------- */ .page-header { max-width: 1100px; margin: 0 auto var(--space-xl); padding: 0 var(--space-lg); animation: fadeUp var(--duration-slow) var(--ease-out) both; position: relative; z-index: 10; } .page-header h1 { margin-bottom: var(--space-sm); overflow-wrap: break-word; word-break: break-word; } .page-header p { color: var(--color-text-secondary); font-size: 1.05rem; line-height: 1.7; } .page-header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); } .page-content { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-lg); animation: fadeUp var(--duration-slow) var(--ease-out) 100ms both; } /* Constrained form column within page-content — keeps content aligned under the nav while preventing forms from stretching to full width. */ .page-content-form { max-width: 680px; } .page-content-form h1 { margin-bottom: var(--space-xs); } .page-content-form .form-card-subtitle { text-align: left; margin-bottom: var(--space-lg); } .page-content-form .form-fieldset { margin-bottom: var(--space-xl); } .page-content-form .form-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border-light); } .page-content-form .form-footer a { font-size: var(--text-sm); color: var(--color-text-muted); } .page-actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; } /* ---------- Dashboard More Menu ---------- */ .dashboard-more { position: relative; } .dashboard-more > summary { cursor: pointer; list-style: none; min-height: 44px; display: inline-flex; align-items: center; } .dashboard-more > summary::-webkit-details-marker { display: none; } .dashboard-more__menu { position: absolute; top: calc(100% + var(--space-xs)); right: 0; z-index: 50; min-width: 180px; background: var(--color-bg-card); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-xs) 0; animation: fadeUp var(--duration-fast) var(--ease-out) both; } .dashboard-more__menu a { display: block; padding: var(--space-sm) var(--space-lg); font-size: 0.88rem; color: var(--color-text-secondary); text-decoration: none; transition: background var(--duration-fast) var(--ease-out); } .dashboard-more__menu a:hover, .dashboard-more__menu a:focus-visible { background: var(--color-primary-glow); color: var(--color-text); outline: none; } /* --color-primary-glow is a 12%-alpha tint: it reads as hover, not as focus, and measures nowhere near the 3:1 WCAG 1.4.11 asks of a focus indicator. The keyboard state gets a real ring on top of the tint. */ .dashboard-more__menu a:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; } .dashboard-more__locked { opacity: 0.65; } .dashboard-more__danger { color: var(--color-text-on-bg-error) !important; border-top: 1px solid var(--color-border-light); margin-top: var(--space-xs); padding-top: var(--space-sm); } .dashboard-more__danger:hover { background: rgba(192, 80, 62, 0.08) !important; } /* ---------- Book Sub-Navigation ---------- */ .book-nav { max-width: 1100px; margin: 0 auto var(--space-xl); padding: 0 var(--space-lg); } .book-nav__track { display: flex; gap: var(--space-xs); border-bottom: 1px solid var(--color-border-light); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .book-nav__track::-webkit-scrollbar { display: none; } .book-nav__item { display: inline-flex; align-items: center; padding: var(--space-sm) var(--space-md); font-family: var(--font-body); font-size: 0.88rem; font-weight: 500; color: var(--color-text-muted); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; min-height: 44px; transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .book-nav__item:hover { color: var(--color-text-secondary); } .book-nav__item--active { color: var(--color-primary-text); border-bottom-color: var(--color-primary); font-weight: 600; } .book-nav__item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } /* ---------- Dashboard Zones ---------- */ .dashboard-urgent { background: var(--color-bg-card); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-xl); margin-bottom: var(--space-xl); box-shadow: var(--shadow-sm); } .dashboard-urgent .stats-row { margin-bottom: var(--space-md); } .dashboard-primary { margin-bottom: var(--space-xl); } .dashboard-primary .share-link { margin-bottom: var(--space-md); } .dashboard-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; } /* Tools list: text-first, two-column. No card chrome — the Tools surface is a reference list of supporting actions, not a hero. WCAG 2.5.8 (44px target) is met via vertical padding on each row, not card padding. */ .dashboard-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-xl); margin-bottom: var(--space-xl); } @media (max-width: 540px) { .dashboard-tools { grid-template-columns: 1fr; } } .dashboard-tool { display: flex; flex-direction: column; gap: 2px; padding: var(--space-sm) 0; min-height: 44px; text-decoration: none; color: var(--color-text); border-radius: var(--radius-sm); transition: color var(--duration-fast) var(--ease-out); } .dashboard-tool:hover .dashboard-tool__label, .dashboard-tool:focus-visible .dashboard-tool__label { color: var(--color-primary-text); text-decoration: underline; text-underline-offset: 3px; } .dashboard-tool:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; } .dashboard-tool__label { font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; transition: color var(--duration-fast) var(--ease-out); } .dashboard-tool__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.4; } .dashboard-tool--locked { opacity: 0.6; } .dashboard-tool--locked:hover { opacity: 1; } /* Grouped section beneath the live tools — visually demoted but easy to find. */ .dashboard-tools__locked-group { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-border-light); } .dashboard-tools__locked-heading { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); margin: 0 0 var(--space-md); } .dashboard-tools__locked-icon { width: 14px; height: 14px; } .dashboard-tools--locked { margin-bottom: 0; } .page-section { margin-top: var(--space-xl); } .page-section:last-child { margin-bottom: var(--space-xl); } .page-section h2 { font-size: 1.3rem; margin-bottom: var(--space-md); color: var(--color-text); } /* ---------- Dashboard Callout ---------- */ .dashboard-callout { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg); border-radius: var(--radius-lg); margin-bottom: var(--space-xl); } /* Fallback rgba() declarations precede color-mix() for pre-2023 browsers. See CLAUDE.md "CSS browser support policy". */ .dashboard-callout--pending { background: var(--color-bg-warning); border: 1px solid rgba(196, 147, 51, 0.25); border: 1px solid color-mix(in srgb, var(--color-warning) 25%, transparent); } .dashboard-callout--share { background: var(--color-bg-info); border: 1px solid rgba(122, 107, 102, 0.25); border: 1px solid color-mix(in srgb, var(--color-info) 25%, transparent); } .dashboard-callout--calm { background: var(--color-bg-success); border: 1px solid rgba(94, 139, 101, 0.25); border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent); } .dashboard-callout__content { flex: 1; min-width: 0; } .dashboard-callout__title { font-family: var(--font-display); font-size: clamp(1.2rem, 2.5vw, 1.5rem); margin: 0; color: var(--color-text); } .dashboard-callout__subtitle { color: var(--color-text-muted); margin: var(--space-xs) 0 0; font-size: var(--text-sm); } .dashboard-callout .btn { flex-shrink: 0; } /* Variant: callout absorbs the contributor link + secondary actions inline. Used in the empty/sparse state to collapse "what next?" + "do it" into one card. */ .dashboard-callout--with-link { align-items: flex-start; } .dashboard-callout--with-link .dashboard-callout__content { display: flex; flex-direction: column; gap: var(--space-md); } .share-link--inline { margin-top: var(--space-xs); background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-xs); border: 1px solid color-mix(in srgb, var(--color-info) 18%, transparent); } .dashboard-callout__actions { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xs); } .callout-action { color: var(--color-text); font-size: 0.88rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--color-text) 30%, transparent); } .callout-action:hover, .callout-action:focus-visible { color: var(--color-primary-text); text-decoration-color: currentColor; } @media (max-width: 600px) { .dashboard-callout { flex-direction: column; align-items: stretch; text-align: center; } .dashboard-callout .btn { align-self: center; } .dashboard-callout--with-link { text-align: left; } .dashboard-callout--with-link .dashboard-callout__title { text-align: left; } .dashboard-callout__actions { justify-content: flex-start; } } /* ---------- Dashboard Meta Line ---------- */ .dashboard-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); margin-top: var(--space-xs); color: var(--color-text-muted); font-size: var(--text-sm); } .plan-badge--small { font-size: 0.7rem; padding: 0.12em 0.45em; } .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .status-dot--live { background: var(--color-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 20%, transparent); } /* ---------- Dashboard Tools Collapsible ---------- */ .dashboard-tools-section { margin-top: var(--space-xl); } .dashboard-tools-section__toggle { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; } .dashboard-tools-section__toggle::-webkit-details-marker { display: none; } .dashboard-tools-section__toggle::before { content: "\25B8"; font-size: var(--text-xs); color: var(--color-text-muted); transition: transform var(--duration-fast) var(--ease-out); } .dashboard-tools-section[open] > .dashboard-tools-section__toggle::before { transform: rotate(90deg); } .dashboard-tools-section__label { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.2; color: var(--color-text); letter-spacing: -0.01em; } /* ---------- Dashboard Admin Collapsible ---------- */ .dashboard-admin { margin-top: var(--space-xl); border-top: 1px solid var(--color-border-light); padding-top: var(--space-lg); } .dashboard-admin__toggle { font-family: var(--font-body); font-size: 0.88rem; color: var(--color-text-muted); cursor: pointer; padding: var(--space-sm) 0; list-style: none; } .dashboard-admin__toggle::-webkit-details-marker { display: none; } .dashboard-admin__toggle::before { content: "\25B8"; display: inline-block; margin-right: var(--space-xs); font-size: 0.7rem; color: var(--color-text-muted); transition: transform var(--duration-fast) var(--ease-out); } .dashboard-admin[open] > .dashboard-admin__toggle::before { transform: rotate(90deg); } /* ---------- Dashboard Meta — Published Status Pill ---------- */ .dashboard-meta__status { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0.18em 0.55em; border-radius: 100px; background: color-mix(in srgb, var(--color-success) 10%, transparent); color: color-mix(in srgb, var(--color-success) 75%, var(--color-text)); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .dashboard-meta__status .status-dot--live { width: 6px; height: 6px; box-shadow: none; } /* ---------- Stats Summary (used inside .dashboard-urgent) ---------- */ .stats-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); font-size: 0.95rem; } .stats-summary__item { color: var(--color-text-secondary); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } .stats-summary__item strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--color-text); margin-right: 0.25em; font-variant-numeric: tabular-nums; } .stats-summary__item:hover, .stats-summary__item:focus-visible { color: var(--color-primary-text); } .stats-summary__item--alert strong { color: var(--color-text-on-bg-warning); } .stats-summary__item--muted, .stats-summary__item--muted strong { color: var(--color-text-muted); } .stats-summary__sep { color: var(--color-border); font-size: var(--text-sm); user-select: none; } .stats-summary__all { margin-left: auto; font-size: var(--text-sm); color: var(--color-primary-text); text-decoration: none; } .stats-summary__all:hover, .stats-summary__all:focus-visible { color: var(--color-primary-text-hover); text-decoration: underline; } @media (max-width: 600px) { .stats-summary__all { margin-left: 0; flex-basis: 100%; } } /* ---------- Book Billing Status Card ---------- */ .book-billing-status { background: var(--color-bg-card); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: var(--space-lg); box-shadow: var(--shadow-sm); } .book-billing-status h2 { font-size: 1.1rem; margin: 0 0 var(--space-sm); color: var(--color-text); } .book-billing-status__plan { margin: 0; font-size: 1rem; color: var(--color-text); } .book-billing-status__plan strong { font-weight: 600; } .book-billing-status__mode { margin: var(--space-xs) 0 0; font-size: 0.88rem; color: var(--color-text-secondary); } .book-billing-status__toggle { margin: var(--space-md) 0 0; } /* ---------- Danger Zone ---------- */ .danger-zone { margin-top: var(--space-2xl); padding: var(--space-lg); border: 1px solid color-mix(in srgb, var(--color-error) 25%, var(--color-border-light)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-error) 3%, var(--color-bg-card)); } .danger-zone__heading { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-on-bg-error); margin: 0 0 var(--space-sm); } .danger-zone__desc { font-size: 0.92rem; color: var(--color-text-secondary); line-height: 1.6; margin: 0 0 var(--space-md); max-width: 60ch; } .danger-zone__action { margin: 0; } /* ---------- Header / Navigation ---------- Scope to body's direct-child

so HTML5 inner

elements (e.g. .pricing-page__header, an article's

) don't accidentally inherit the sticky-nav treatment. The previous `header { ... }` rule was matching every

on the page and any nested one stuck below the global nav at the same z-index, trapping the Use Cases dropdown menu beneath it on /pricing/. */ body > header { position: sticky; top: 0; z-index: 100; /* Was color-mix() + backdrop-filter glassmorphism; replaced with an opaque warm-tint so there's no banned decorative blur. 95% opacity keeps the sticky-header contrast without requiring backdrop-filter (which also has a render-cost on scroll). */ background: color-mix(in srgb, var(--color-bg) 96%, transparent); border-bottom: 1px solid var(--color-border-light); } body > header nav { max-width: 1100px; margin: 0 auto; padding: var(--space-md) var(--space-lg); display: flex; align-items: center; gap: var(--space-lg); } .nav-brand { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.02em; text-decoration: none; display: flex; align-items: center; gap: var(--space-sm); transition: opacity var(--duration-fast) var(--ease-out); } .nav-brand:hover { opacity: 0.8; color: var(--color-text); } .nav-brand-icon { width: 28px; height: 28px; object-fit: contain; } .nav-spacer { flex: 1; } .nav-links { display: flex; align-items: center; gap: var(--space-md); } .nav-links a { font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .nav-links a:hover { color: var(--color-text); background: var(--color-primary-glow); } .nav-links a.btn-primary { color: var(--color-text-on-primary); background: var(--color-primary); padding: 0.45rem 1rem; font-weight: 600; } .nav-links a.btn-primary:hover { color: var(--color-text-on-primary); background: var(--color-primary-hover); /* box-shadow intentionally omitted: the global .btn-primary:hover rule (components.css) owns it, tokenised via color-mix on --color-primary. */ } .nav-user { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 400; } .nav-separator { width: 1px; height: 20px; background: var(--color-border); } .nav-logout-form { display: inline; margin: 0; padding: 0; } .nav-logout-btn { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); background: none; border: none; cursor: pointer; transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } .nav-logout-btn:hover { color: var(--color-text); background: var(--color-primary-glow); } /* Quick-nav hint pill — desktop-only entry point to the Cmd+K palette. Hidden on touch / narrow viewports where keyboard shortcuts are irrelevant. */ .cmd-hint { display: none; align-items: center; gap: var(--space-xs); padding: 4px 8px 4px 8px; margin-right: var(--space-xs); background: transparent; border: 1px solid var(--color-border-light); border-radius: 99px; color: var(--color-text-muted); font-size: 0.78rem; line-height: 1; cursor: pointer; /* 44px minimum touch target — verified 2026-04-28 */ min-height: 44px; transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } .cmd-hint:hover, .cmd-hint:focus-visible { color: var(--color-text); border-color: var(--color-border); background: var(--color-bg-warm); } .cmd-hint__label { margin-right: 2px; } .cmd-hint__kbd { display: inline-flex; align-items: center; gap: 1px; padding: 2px 5px; background: var(--color-bg-warm); border: 1px solid var(--color-border-light); border-radius: 4px; font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); font-size: 0.7rem; color: var(--color-text-secondary); } @media (min-width: 769px) { .cmd-hint { display: inline-flex; } } /* Theme toggle — 44×44 minimum touch target met by min-width/min-height below */ .theme-toggle { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; padding: var(--space-xs); border-radius: var(--radius-sm); display: flex; align-items: center; min-width: 44px; /* 44×44 minimum touch target — verified 2026-04-28 */ min-height: 44px; justify-content: center; transition: color var(--duration-fast) var(--ease-out); } .theme-toggle:hover { color: var(--color-primary-text); } .nav-toggle { display: none; flex-direction: column; gap: 4px; padding: 12px; background: none; border: none; cursor: pointer; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--color-text); border-radius: 1px; transition: transform var(--duration-normal) var(--ease-out), opacity var(--duration-fast) var(--ease-out); } /* Mobile hamburger — a real