/* ============================================================ Forkato - Design System OKLCH dark mode, amber-tinted neutrals ============================================================ */ /* --- Reset ------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img, svg { display: block; max-width: 100%; } button { cursor: pointer; font: inherit; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } input, textarea, select { font: inherit; } /* --- Tokens ------------------------------------------------ */ :root { /* Surface */ --c-base: oklch(0.13 0.008 70); --c-bg: oklch(0.13 0.008 70); /* alias - many rules use var(--c-bg) */ --c-surface: oklch(0.17 0.012 70); --c-surface-hi: oklch(0.21 0.014 70); --c-surface-max: oklch(0.26 0.016 70); /* Accent - warm amber */ --c-accent: oklch(0.76 0.155 70); --c-accent-hover: oklch(0.83 0.12 70); --c-accent-subtle:oklch(0.24 0.04 70); --c-accent-fg: oklch(0.16 0.02 70); /* Text */ --c-text: oklch(0.93 0.01 70); --c-text-2: oklch(0.68 0.01 70); --c-text-3: oklch(0.48 0.008 70); /* Borders */ --c-border: oklch(0.24 0.012 70); --c-border-hi: oklch(0.32 0.016 70); /* Semantic */ --c-success: oklch(0.72 0.14 152); --c-error: oklch(0.68 0.19 25); --c-warning: oklch(0.80 0.14 80); /* Spacing - 4pt. Token name ≈ 2x the pixel value. --s-10 was missing and several rules were silently resolving to 0 where it was used (pantry counts, rp-teaser gap, etc). */ --s-2: 4px; --s-4: 8px; --s-6: 12px; --s-8: 16px; --s-10: 20px; --s-12: 24px; --s-16: 32px; --s-24: 48px; --s-32: 64px; --s-48: 96px; /* Typography */ --f-display: 'Bricolage Grotesque', system-ui, sans-serif; --f-body: 'Figtree', system-ui, sans-serif; --t-xs: 0.75rem; --t-sm: 0.875rem; --t-base: 1rem; --t-lg: 1.25rem; --t-xl: 1.563rem; --t-2xl: 1.953rem; --t-3xl: 2.441rem; --t-4xl: 3.052rem; --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.6; /* Radius */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 9999px; /* Motion */ --ease-out: cubic-bezier(0.25, 1, 0.5, 1); --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-normal: 220ms; --dur-slow: 400ms; /* Shadows (dark mode: mostly elevation via surface lightness) */ --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.5); --shadow-md: 0 4px 16px oklch(0 0 0 / 0.4); --shadow-lg: 0 12px 40px oklch(0 0 0 / 0.5); } /* ── Light-mode overrides ───────────────────────────────────────── * * Everything below is scoped to [data-theme='light'] on . The * dark tokens above stay the defaults so any surface that hasn't been * opted into theming keeps working. Amber accent stays identical in * both modes; only neutrals + semantic colors shift. * * `:root[data-theme='light']` lets a signed-in user or a localStorage * preference force light even if the OS wants dark. The * `prefers-color-scheme: light` media query further down applies the * same overrides to visitors who have no Forkato preference set. */ :root[data-theme='light'] { /* Surface - warm cream base, pure white cards, muted card-hover. */ --c-base: oklch(0.98 0.005 70); /* #faf8f4 */ --c-bg: oklch(0.98 0.005 70); /* alias - see dark block above */ --c-surface: oklch(1 0 0); /* #ffffff */ --c-surface-hi: oklch(0.94 0.006 70); /* #f2ede6 */ --c-surface-max: oklch(0.90 0.007 70); /* Accent - same amber in both modes. Foreground on a filled amber button is white in light mode so it still reads. */ --c-accent: oklch(0.72 0.15 70); --c-accent-hover: oklch(0.66 0.16 70); --c-accent-subtle: oklch(0.94 0.04 70); --c-accent-fg: oklch(1 0 0); /* Text - dark warm brown instead of cream. */ --c-text: oklch(0.17 0.012 70); --c-text-2: oklch(0.34 0.008 70); --c-text-3: oklch(0.54 0.007 70); /* Borders - soft warm grey. */ --c-border: oklch(0.88 0.006 70); --c-border-hi: oklch(0.80 0.008 70); /* Semantic - slightly darker so they stay legible on light bg. */ --c-success: oklch(0.55 0.14 152); --c-error: oklch(0.58 0.22 25); --c-warning: oklch(0.65 0.16 80); /* Shadows - light mode needs actual cast shadows, not elevation via lightness shifts. Subtle warm black. */ --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06); --shadow-md: 0 3px 10px oklch(0 0 0 / 0.08); --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.12); } /* Default to light when the OS asks for light AND the user hasn't explicitly opted in. A user who has set data-theme (via the nav toggle or their saved preference) always overrides this. */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']):not([data-theme='light']) { --c-base: oklch(0.98 0.005 70); --c-bg: oklch(0.98 0.005 70); --c-surface: oklch(1 0 0); --c-surface-hi: oklch(0.94 0.006 70); --c-surface-max: oklch(0.90 0.007 70); --c-accent: oklch(0.72 0.15 70); --c-accent-hover: oklch(0.66 0.16 70); --c-accent-subtle: oklch(0.94 0.04 70); --c-accent-fg: oklch(1 0 0); --c-text: oklch(0.17 0.012 70); --c-text-2: oklch(0.34 0.008 70); --c-text-3: oklch(0.54 0.007 70); --c-border: oklch(0.88 0.006 70); --c-border-hi: oklch(0.80 0.008 70); --c-success: oklch(0.55 0.14 152); --c-error: oklch(0.58 0.22 25); --c-warning: oklch(0.65 0.16 80); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06); --shadow-md: 0 3px 10px oklch(0 0 0 / 0.08); --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.12); } } /* --- Base -------------------------------------------------- */ html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; } body { font-family: var(--f-body); font-weight: 400; font-size: var(--t-base); line-height: 1.65; color: var(--c-text); background: var(--c-base); min-height: 100vh; } ::selection { background: oklch(0.76 0.155 70 / 0.3); color: var(--c-text); } /* --- Typography -------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 650; line-height: var(--lh-tight); color: var(--c-text); letter-spacing: -0.02em; } h1 { font-size: var(--t-4xl); } h2 { font-size: var(--t-2xl); } h3 { font-size: var(--t-xl); } h4 { font-size: var(--t-lg); } .text-sm { font-size: var(--t-sm); } .text-xs { font-size: var(--t-xs); } .text-lg { font-size: var(--t-lg); } .text-muted { color: var(--c-text-3); } .text-secondary { color: var(--c-text-2); } .text-accent { color: var(--c-accent); } /* --- Links ------------------------------------------------- */ a:not(.btn):not(.nav__brand):not(.recipe-card) { color: var(--c-accent); transition: color var(--dur-fast) var(--ease-out); } a:not(.btn):not(.nav__brand):not(.recipe-card):hover { color: var(--c-accent-hover); } /* --- Nav --------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 200; /* Derive the translucent bar from the active --c-base so light mode gets a warm cream frost + dark mode keeps the original near-black. 88% opacity + backdrop-filter gives the subtle glass effect without obscuring content beneath. */ background: color-mix(in oklch, var(--c-base) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--c-border); padding: var(--s-6) var(--s-12); display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); } .nav__brand { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 700; color: var(--c-text); letter-spacing: -0.02em; display: flex; align-items: center; gap: var(--s-4); } .nav__brand-mark { width: 28px; height: 28px; background: var(--c-accent); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: var(--c-accent-fg); font-weight: 800; font-size: var(--t-sm); font-family: var(--f-display); } .nav__brand-icon { width: 28px; height: 28px; border-radius: var(--r-sm); object-fit: contain; } .nav__actions { display: flex; align-items: center; gap: var(--s-4); } /* --- Buttons ----------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4); padding: var(--s-4) var(--s-8); border: 1px solid transparent; border-radius: var(--r-md); font-family: var(--f-body); font-size: var(--t-sm); font-weight: 500; line-height: 1.4; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); white-space: nowrap; } .btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .btn--primary { background: var(--c-accent); color: var(--c-accent-fg); } .btn--primary:hover { background: var(--c-accent-hover); } .btn--primary:active { background: oklch(0.70 0.16 70); } .btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .btn--ghost { background: transparent; color: var(--c-text-2); border-color: var(--c-border); } .btn--ghost:hover { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-hi); } .btn--ghost:active { background: var(--c-surface-hi); } .btn--danger { background: transparent; color: var(--c-error); /* Derive the red border + hover tint from the active --c-error so light mode reads as a softer red wash instead of the hardcoded dark oklch that rendered nearly-black on white. */ border-color: color-mix(in oklch, var(--c-error) 38%, var(--c-border)); } .btn--danger:hover { background: color-mix(in oklch, var(--c-error) 12%, transparent); } .btn--danger:active { background: oklch(0.22 0.07 25); } .btn--text { background: transparent; color: var(--c-text-2); padding: var(--s-2) var(--s-4); border: none; } .btn--text:hover { color: var(--c-text); } .btn--sm { padding: var(--s-2) var(--s-4); font-size: var(--t-xs); } .btn--lg { padding: var(--s-6) var(--s-12); font-size: var(--t-base); border-radius: var(--r-lg); } .btn--icon { width: 36px; height: 36px; padding: 0; border-radius: var(--r-md); font-size: var(--t-lg); } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } /* --- Inputs ------------------------------------------------ */ .input { width: 100%; padding: var(--s-6) var(--s-8); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-text); font-size: var(--t-base); line-height: 1.5; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .input::placeholder { color: var(--c-text-3); } .input:focus { outline: none; border-color: var(--c-accent); background: var(--c-surface-hi); } textarea.input { resize: vertical; min-height: 140px; } .input--lg { padding: var(--s-8) var(--s-12); font-size: var(--t-lg); border-radius: var(--r-lg); } .label { display: block; font-size: var(--t-sm); font-weight: 500; color: var(--c-text-2); margin-bottom: var(--s-4); } .form-hint { font-size: var(--t-xs); color: var(--c-text-3); margin-top: var(--s-2); } .field { margin-bottom: var(--s-12); } /* --- Alert ------------------------------------------------- */ .alert { padding: var(--s-6) var(--s-8); border-radius: var(--r-md); font-size: var(--t-sm); line-height: 1.5; } .alert--error { background: oklch(0.18 0.05 25); color: oklch(0.85 0.12 25); } .alert--success { background: oklch(0.18 0.04 152); color: oklch(0.82 0.10 152); } /* --- Tags -------------------------------------------------- */ .tag { display: inline-flex; align-items: center; padding: var(--s-2) var(--s-6); background: var(--c-accent-subtle); color: var(--c-accent); border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 500; line-height: 1.4; } .tag--platform { background: var(--c-surface-hi); color: var(--c-text-2); text-transform: capitalize; } /* --- Dropdown ---------------------------------------------- */ .dropdown { position: relative; } .dropdown__trigger { cursor: pointer; } .dropdown__menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); min-width: 160px; background: var(--c-surface-hi); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-2); z-index: 100; box-shadow: var(--shadow-lg); } .dropdown--open .dropdown__menu { display: block; } .dropdown__item { display: flex; align-items: center; gap: var(--s-4); width: 100%; padding: var(--s-4) var(--s-6); border: none; background: none; color: var(--c-text-2); font-size: var(--t-sm); border-radius: var(--r-sm); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .dropdown__item:hover { background: var(--c-surface-max); color: var(--c-text); } .dropdown__item--danger { color: var(--c-error); } .dropdown__item--danger:hover { background: color-mix(in oklch, var(--c-error) 14%, transparent); color: var(--c-error); } .dropdown__divider { height: 1px; margin: var(--s-2) calc(-1 * var(--s-2)); background: var(--c-border); } /* --- Search Bar -------------------------------------------- */ .search-bar { position: relative; } .search-bar__icon { position: absolute; left: var(--s-8); top: 50%; transform: translateY(-50%); color: var(--c-text-3); pointer-events: none; font-size: var(--t-lg); } .search-bar .input { padding-left: 44px; } /* --- Tabs -------------------------------------------------- */ .tabs { display: flex; gap: var(--s-2); border-bottom: 1px solid var(--c-border); margin-bottom: var(--s-12); } .tab { padding: var(--s-4) var(--s-8); border: none; background: transparent; color: var(--c-text-3); font-size: var(--t-sm); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .tab:hover { color: var(--c-text-2); } .tab--active { color: var(--c-accent); border-bottom-color: var(--c-accent); } /* --- View Toggle ------------------------------------------- */ .view-toggle { display: flex; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; } .view-toggle__btn { padding: var(--s-2) var(--s-4); border: none; background: transparent; color: var(--c-text-3); font-size: var(--t-sm); transition: all var(--dur-fast) var(--ease-out); display: flex; align-items: center; } .view-toggle__btn--active { background: var(--c-surface-hi); color: var(--c-text); } .view-toggle__btn:hover:not(.view-toggle__btn--active) { color: var(--c-text-2); } /* ============================================================ RECIPE CARDS ============================================================ */ .recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-12); } .recipe-card { position: relative; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; aspect-ratio: 3 / 2; background: var(--c-surface); transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out); } .recipe-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); } .recipe-card:hover .recipe-card__img { transform: scale(1.035); } .recipe-card__img { transition: transform 420ms cubic-bezier(.2,.7,.25,1); } /* Description excerpt is hidden in grid view, shown in list view */ .recipe-card__excerpt { display: none; font-size: var(--t-xs); color: oklch(0.78 0.008 70); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .recipe-grid:not(.recipe-grid--list) .recipe-card__excerpt { display: none; } .recipe-grid--list .recipe-card__excerpt { display: -webkit-box; } .recipe-card:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } .recipe-card__img { width: 100%; height: 100%; object-fit: cover; } .recipe-card__scrim { position: absolute; inset: 0; background: linear-gradient( to top, oklch(0.05 0.005 70 / 0.88) 0%, oklch(0.05 0.005 70 / 0.35) 45%, transparent 70% ); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s-8); gap: var(--s-2); } .recipe-card__title { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 600; color: oklch(0.96 0.005 70); line-height: var(--lh-snug); letter-spacing: -0.01em; } .recipe-card__meta { font-size: var(--t-xs); color: oklch(0.72 0.01 70); display: flex; align-items: center; gap: var(--s-6); } .recipe-card__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); } .recipe-card__tags .tag { background: oklch(1 0 0 / 0.12); color: oklch(0.90 0.01 70); font-size: 0.65rem; } /* No-image card */ .recipe-card--noimg { display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s-12); background: linear-gradient( 135deg, var(--c-surface) 0%, var(--c-surface-hi) 100% ); } .recipe-card--noimg::before { content: ''; position: absolute; top: var(--s-8); right: var(--s-8); width: 48px; height: 48px; border-radius: var(--r-lg); background: var(--c-accent-subtle); opacity: 0.5; } .recipe-card--noimg .recipe-card__title { color: var(--c-text); } .recipe-card--noimg .recipe-card__meta { color: var(--c-text-3); } .recipe-card--noimg .recipe-card__tags .tag { background: var(--c-accent-subtle); color: var(--c-accent); } /* ─── List view variant ───────────────────────────────────────── Horizontal row: fixed-width thumbnail on the left, info stacked on the right. Card is a consistent height regardless of content. */ .recipe-grid--list { grid-template-columns: 1fr; gap: var(--s-4); } .recipe-grid--list .recipe-card { aspect-ratio: unset; display: grid; grid-template-columns: 120px minmax(0, 1fr); height: 112px; border-radius: var(--r-md); overflow: hidden; /* Both of these are required to stop the card overflowing its parent grid track when a long unbreakable title/description pushes min-content wider: - min-width:0 overrides CSS Grid's default min-width:auto on grid items - width:100% and max-width:100% clamp the card to the container width */ width: 100%; max-width: 100%; min-width: 0; } /* Thumbnail spans the full height; object-fit crops cleanly. */ .recipe-grid--list .recipe-card__img, .recipe-grid--list .recipe-card__placeholder { width: 120px; height: 112px; object-fit: cover; } /* Platform badge (TikTok F / Facebook F / etc) stays pinned to the thumbnail corner - the card itself is position:relative so the absolutely-positioned badge lands on the thumbnail since the image occupies the first grid column at top-left. */ .recipe-grid--list .recipe-card__platform { top: 8px; left: 8px; right: auto; } .recipe-grid--list .recipe-card__scrim { position: static; background: none; /* Extra right padding so content never collides with the + quick-add button when it fades in on hover. */ padding: var(--s-6) 44px var(--s-6) var(--s-8); justify-content: center; gap: 2px; min-width: 0; /* allow title/excerpt to ellipsize in the flex item */ overflow: hidden; } .recipe-grid--list .recipe-card__meta, .recipe-grid--list .recipe-card__tags { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .recipe-grid--list .recipe-card__tags { flex-wrap: nowrap; } .recipe-grid--list .recipe-card__title { color: var(--c-text); font-size: var(--t-base); line-height: 1.2; /* Clamp to a single line so card height stays fixed. */ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .recipe-grid--list .recipe-card__meta { color: var(--c-text-3); } .recipe-grid--list .recipe-card__excerpt { -webkit-line-clamp: 1; font-size: var(--t-xs); color: var(--c-text-3); margin-top: 2px; } .recipe-grid--list .recipe-card__tags { margin-top: 2px; } .recipe-grid--list .recipe-card__tags .tag { background: var(--c-accent-subtle); color: var(--c-accent); } /* AI badge in list view: small pill tucked right under the title. */ .recipe-grid--list .recipe-card__scrim .badge--ai, .recipe-grid--list .recipe-card__scrim .badge--ai-partial { margin-top: 2px; } /* No-image variant: placeholder still fills the 120px thumbnail column. */ .recipe-grid--list .recipe-card--noimg { grid-template-columns: 120px 1fr; padding: 0; height: 112px; } .recipe-grid--list .recipe-card--noimg::before { display: none; } /* Shrink on narrow screens - keep the horizontal row but reduce gaps. */ @media (max-width: 480px) { .recipe-grid--list .recipe-card { grid-template-columns: 96px 1fr; height: 100px; } .recipe-grid--list .recipe-card__img, .recipe-grid--list .recipe-card__placeholder { width: 96px; height: 100px; } .recipe-grid--list .recipe-card--noimg { grid-template-columns: 96px 1fr; height: 100px; } .recipe-grid--list .recipe-card__excerpt { display: none; } } /* ============================================================ RECIPE DETAIL ============================================================ */ .recipe-detail { max-width: 960px; } .recipe-detail__hero { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--r-xl); margin-bottom: var(--s-16); } /* Editorial gradient hero for recipes without a photo: category emoji sits center-behind, title overlaid in display font. The hero inherits the warm Forkato palette and stays on-brand. */ .recipe-hero-fallback { position: relative; width: 100%; aspect-ratio: 16 / 8; border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--s-12); display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); isolation: isolate; } .recipe-hero-fallback__emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(7rem, 18vw, 14rem); opacity: 0.18; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.4)); z-index: 0; pointer-events: none; } .recipe-hero-fallback__overlay { position: relative; z-index: 1; max-width: 22ch; text-align: center; } .recipe-hero-fallback__eyebrow { font-family: var(--f-body); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-accent); margin-bottom: var(--s-4); } .recipe-hero-fallback__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.02; letter-spacing: -0.025em; color: var(--c-text); margin: 0; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.45); } .recipe-detail__header { margin-bottom: var(--s-12); } .recipe-detail__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-8); flex-wrap: wrap; } .recipe-detail__jump { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: var(--t-xs); color: var(--c-text-2); border: 1px solid var(--c-border); border-radius: var(--r-full); text-decoration: none; transition: color 150ms ease, border-color 150ms ease, background 150ms ease; } .recipe-detail__jump:hover { color: var(--c-accent); border-color: var(--c-accent); background: color-mix(in oklch, var(--c-accent) 8%, transparent); } .recipe-detail__confidence { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-4); padding: 3px 10px; font-size: var(--t-xs); font-weight: 500; border-radius: var(--r-full); letter-spacing: 0.02em; } .recipe-detail__confidence--ai { background: color-mix(in oklch, var(--c-accent) 18%, transparent); color: var(--c-accent); border: 1px solid color-mix(in oklch, var(--c-accent) 60%, transparent); } .recipe-detail__confidence--partial { background: var(--c-surface-hi); color: var(--c-text-2); border: 1px solid var(--c-border-hi, var(--c-text-3)); } .recipe-detail__title { font-size: var(--t-3xl); margin-bottom: var(--s-4); } .recipe-detail__desc { color: var(--c-text-2); font-size: var(--t-lg); line-height: var(--lh-normal); max-width: 65ch; } /* Meta pills: distinct bordered badges with amber icon chip, not plain text */ .recipe-detail__meta { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-bottom: var(--s-12); } .recipe-detail__meta-item { display: inline-flex; align-items: center; gap: var(--s-4); padding: 6px 14px 6px 6px; font-size: var(--t-sm); color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-full); font-weight: 500; } .recipe-detail__meta-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--c-accent-subtle); color: var(--c-accent); display: flex; align-items: center; justify-content: center; } .recipe-detail__source { display: inline-flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-12); } .recipe-detail__tags { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-16); } .recipe-detail__body { display: grid; grid-template-columns: 280px 1fr; gap: var(--s-16); align-items: start; } @media (max-width: 768px) { .recipe-detail__body { grid-template-columns: 1fr; gap: var(--s-12); } } /* Ingredients - two-column layout on desktop for longer lists */ .ingredients { position: sticky; top: 80px; } .ingredients__list { list-style: none; padding: 0; margin: 0; } /* Single-column ingredients list. Standard recipe-app layout: one ingredient per row, amount column vertically aligned. */ .ingredients__list--two-col { /* No-op - kept as a historical hook; list stays single column */ } .ingredients__title, .steps__title { font-family: var(--f-display); font-size: var(--t-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-3); margin-bottom: var(--s-8); } .ingredients__list li { padding: var(--s-4) 0; border-bottom: 1px solid var(--c-border); font-size: var(--t-base); line-height: var(--lh-snug); color: var(--c-text); } .ingredients__list li:last-child { border-bottom: none; } /* Amount + unit in amber, fixed minimum width so amounts align as a column. Inside a flex .ingredient-item LI, flex-shrink: 0 keeps long names from squeezing the amount back into a wrap. */ .ingredients__amount { display: inline-flex; flex-shrink: 0; min-width: 80px; color: var(--c-accent); font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .ingredients__amount { min-width: 64px; } } .ingredients__amount--empty { min-width: 80px; } @media (max-width: 640px) { .ingredients__amount--empty { min-width: 64px; } } /* The ingredient name fills the remainder of the row and wraps cleanly */ .ingredients__name { flex: 1 1 auto; min-width: 0; line-height: 1.45; color: var(--c-text); } /* Steps */ .steps__list { counter-reset: step; } .steps__list li { counter-increment: step; display: grid; grid-template-columns: 52px 1fr; gap: var(--s-12); padding: var(--s-12) 0; border-bottom: 1px solid var(--c-border); font-size: var(--t-lg); line-height: 1.6; color: var(--c-text); align-items: start; } .steps__list li:last-child { border-bottom: none; } .steps__list li::before { content: counter(step); width: 48px; height: 48px; border-radius: var(--r-full); background: color-mix(in oklch, var(--c-accent) 18%, transparent); color: var(--c-accent); border: 1px solid color-mix(in oklch, var(--c-accent) 35%, transparent); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 700; font-size: var(--t-xl); flex-shrink: 0; } /* ============================================================ IMPORT PAGE ============================================================ */ .import-page { max-width: 640px; margin: 0 auto; padding: var(--s-24) var(--s-12); } .import-page__title { font-size: var(--t-2xl); margin-bottom: var(--s-4); } .import-page__subtitle { color: var(--c-text-2); margin-bottom: var(--s-16); max-width: 50ch; } .import-page .tab-content { display: none; } .import-page .tab-content--active { display: block; } .import-progress { display: flex; align-items: center; gap: var(--s-6); padding: var(--s-8); background: var(--c-surface); border-radius: var(--r-md); color: var(--c-text-2); font-size: var(--t-sm); } /* Spinner */ .spinner { width: 18px; height: 18px; border: 2px solid var(--c-border); border-top-color: var(--c-accent); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ EMPTY STATE ============================================================ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--s-32) var(--s-12); } .empty-state__icon { font-size: 4rem; color: var(--c-text-3); opacity: 0.3; margin-bottom: var(--s-12); } .empty-state__title { font-family: var(--f-display); font-size: var(--t-xl); font-weight: 600; color: var(--c-text-2); margin-bottom: var(--s-4); } .empty-state__desc { color: var(--c-text-3); margin-bottom: var(--s-12); max-width: 36ch; } /* ============================================================ LOGIN ============================================================ */ .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--s-12); } .login-form { width: 100%; max-width: 380px; } .login-brand { margin-bottom: var(--s-24); } .login-brand__mark { width: 44px; height: 44px; background: var(--c-accent); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--c-accent-fg); font-weight: 800; font-size: var(--t-lg); font-family: var(--f-display); margin-bottom: var(--s-12); } .login-brand__title { font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 700; letter-spacing: -0.03em; margin-bottom: var(--s-4); } .login-brand__subtitle { color: var(--c-text-3); font-size: var(--t-sm); } .pw-strength { height: 4px; background: var(--c-border); border-radius: var(--r-full); margin-top: var(--s-4); overflow: hidden; } .pw-strength__bar { height: 100%; width: 0; border-radius: var(--r-full); transition: width 0.2s, background 0.2s; } /* ============================================================ ADMIN ============================================================ */ .admin-layout { padding: var(--s-12); max-width: 1280px; margin: 0 auto; } /* Rate-limit-off dev banner. Rendered when RATE_LIMIT_DISABLED=true in .env. Deliberately loud so it's impossible to miss - this should never ship enabled to production. */ .adm-ratelimit-banner { display: flex; align-items: center; gap: var(--s-8); padding: var(--s-8) var(--s-10); margin: 0 0 var(--s-10); background: color-mix(in oklch, var(--c-warning) 14%, var(--c-surface)); border: 1px solid var(--c-warning); border-radius: var(--r-md); color: var(--c-text); } .adm-ratelimit-banner__mark { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--c-warning); color: var(--c-accent-fg); font-size: 20px; font-weight: 700; } .adm-ratelimit-banner__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .adm-ratelimit-banner__title { font-family: var(--f-display); font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-warning); } .adm-ratelimit-banner__desc { font-size: var(--t-sm); line-height: 1.5; color: var(--c-text-2); } .adm-ratelimit-banner code { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 0.88em; padding: 1px 6px; border-radius: var(--r-sm); background: rgba(0,0,0,0.3); color: var(--c-text); } .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-6); margin-bottom: var(--s-16); } .stat-block { background: var(--c-surface); /* Subtle border so cards read on the near-white light-mode base. In dark mode the border resolves to a darker surface-hi shade and largely disappears, which is fine. */ border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--s-12); } .stat-block__label { font-size: var(--t-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-3); margin-bottom: var(--s-4); } .stat-block__value { font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; } .stat-block--accent .stat-block__value, .stat-block__value.stat-block--accent { color: var(--c-accent); } /* Tables */ .data-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); font-variant-numeric: tabular-nums; } .data-table th { text-align: left; padding: var(--s-6) var(--s-8); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-3); border-bottom: 1px solid var(--c-border); } .data-table td { padding: var(--s-6) var(--s-8); border-bottom: 1px solid var(--c-border); color: var(--c-text-2); vertical-align: middle; } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: var(--c-surface); } .data-table .text-right { text-align: right; } .data-table .text-nowrap { white-space: nowrap; } .data-panel { background: var(--c-surface); /* Border added for light-mode readability (see .stat-block note). */ border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s-12); } /* Notification preferences rows - one per channel, each with a native checkbox that the JS treats as the source of truth. */ .notif-row { display: flex; align-items: flex-start; gap: var(--s-6); padding: var(--s-6) 0; cursor: pointer; } .notif-row + .notif-row { border-top: 1px solid var(--c-border); } .notif-row input { margin-top: 4px; flex: 0 0 auto; accent-color: var(--c-accent); width: 18px; height: 18px; } .notif-row__body { display: flex; flex-direction: column; gap: 2px; } .notif-row__title { color: var(--c-text); font-size: var(--t-sm); font-weight: 600; } .notif-row__sub { color: var(--c-text-3); font-size: var(--t-xs); line-height: 1.4; } /* Grocery store preferences - profile panel */ .store-add-row { display: flex; gap: var(--s-4); margin-bottom: var(--s-6); } .store-add-row .input { flex: 1; } .store-search-results { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--s-6); } .store-search-head { padding: var(--s-4) var(--s-6); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-3); font-weight: 700; } .store-search-row { display: flex; align-items: center; gap: var(--s-4); width: 100%; padding: var(--s-4) var(--s-6); background: transparent; border: none; border-bottom: 1px solid var(--c-border); color: var(--c-text); text-align: left; cursor: pointer; } .store-search-row:last-child { border-bottom: none; } .store-search-row:hover { background: var(--c-surface); } .store-search-row__main { flex: 1; font-size: var(--t-sm); font-weight: 600; } .store-search-row__sub { color: var(--c-text-3); font-size: var(--t-xs); } .store-search-row__plus { color: var(--c-accent); font-weight: 700; font-size: var(--t-lg); } /* Store location picker (step 2 of the preferred-store flow). Fixed overlay + centered card on desktop, full-width sheet on mobile. */ .store-picker { position: fixed; inset: 0; z-index: 120; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: var(--s-8); } .store-picker.hidden { display: none; } .store-picker__sheet { width: 100%; max-width: 540px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: 0 32px 60px rgba(0,0,0,0.45); overflow: hidden; } .store-picker__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-8) var(--s-10); border-bottom: 1px solid var(--c-border); } .store-picker__title { font-family: var(--f-display); font-size: var(--t-lg); color: var(--c-text); margin: 0; } .store-picker__sub { color: var(--c-text-2); font-size: var(--t-xs); margin: 2px 0 0; } .store-picker__body { padding: var(--s-8) var(--s-10); display: flex; flex-direction: column; gap: var(--s-6); } .store-picker__row { display: flex; gap: var(--s-4); } .store-picker__row .input { flex: 1; } .store-picker__results { display: flex; flex-direction: column; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; max-height: 320px; overflow-y: auto; } .store-picker__results:empty { border: 0; } .store-picker__foot { display: flex; gap: var(--s-4); justify-content: space-between; padding-top: var(--s-4); border-top: 1px solid var(--c-border); flex-wrap: wrap; } .store-picker__manual { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-8); } @media (max-width: 520px) { .store-picker { padding: 0; align-items: flex-end; } .store-picker__sheet { max-width: none; border-radius: var(--r-lg) var(--r-lg) 0 0; } } /* Barcode scanner modal (shared by pantry + shopping list). Full-viewport black background with a centered video preview and an amber targeting frame. */ .bc-scanner { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; } .bc-scanner__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); } .bc-scanner__panel { position: relative; width: min(540px, 100%); max-height: 92vh; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 80px rgba(0,0,0,0.5); } .bc-scanner__head { display: flex; align-items: flex-start; gap: var(--s-6); padding: var(--s-8) var(--s-10); border-bottom: 1px solid var(--c-border); } .bc-scanner__title { font-family: var(--f-display); font-size: var(--t-lg); color: var(--c-text); margin: 0; } .bc-scanner__subtitle { color: var(--c-text-2); font-size: var(--t-xs); margin: 2px 0 0; } .bc-scanner__head > div:first-child { flex: 1; } .bc-scanner__close { background: transparent; border: 0; color: var(--c-text-2); font-size: 28px; line-height: 1; padding: 0 4px; cursor: pointer; } .bc-scanner__count { background: var(--c-accent); color: var(--c-bg); font-size: var(--t-xs); font-weight: 700; padding: 4px 10px; border-radius: var(--r-full); align-self: center; } .bc-scanner__video-wrap { position: relative; background: #000; /* Explicit fallback height in case aspect-ratio isn't honored. */ min-height: 300px; aspect-ratio: 4 / 3; overflow: hidden; } .bc-scanner__video { /* Absolutely positioned so width/height 100% always resolve, even if the parent's aspect-ratio isn't yet computed. Without this, the