/* ============================================================ Homestyle Recipe Book -- Design System Aesthetic: warm kitchen -- cream & terracotta by day, charcoal & ember by night ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap'); /* ── Design tokens ───────────────────────────────────────── */ :root { color-scheme: light; /* Raw palette -- theme-independent, referenced by both mappings below. */ --cream: #FDF8F1; --cream-warm: #F5EDE1; --paper: #FFFFFF; --ink: #2B2320; --ink-soft: #6B5D54; --terracotta: #C1583A; --terracotta-deep: #A8452B; --terracotta-light: #E8896B; --herb: #3F6B3A; --herb-deep: #355C31; --herb-light: #8FBF7F; --charcoal: #1A1512; --charcoal-card: #241D18; --bone: #F2E8DC; --bone-soft: #B0A093; /* Semantic tokens -- light mapping (the default). */ --bg-page: var(--cream); --bg-card: var(--paper); --bg-subtle: var(--cream-warm); --text-primary: var(--ink); --text-muted: var(--ink-soft); --accent: var(--terracotta-deep); --accent-strong: var(--terracotta); --accent-on: var(--paper); --success: var(--herb-deep); --border-dim: #E6DACB; --border-mid: #D6C6B2; --shadow-card: 0 1px 3px rgba(43, 35, 32, .08), 0 8px 24px rgba(43, 35, 32, .06); --focus-ring: 0 0 0 3px rgba(168, 69, 43, .35); --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --header-h: 64px; --max-w: 1180px; --max-w-prose: 68ch; --section-py: 72px; } /* Explicit user choice, set on by the inline head script or theme.js. */ :root[data-theme='dark'] { color-scheme: dark; --bg-page: var(--charcoal); --bg-card: var(--charcoal-card); --bg-subtle: #1F1915; --text-primary: var(--bone); --text-muted: var(--bone-soft); --accent: var(--terracotta-light); --accent-strong: var(--terracotta-light); --accent-on: var(--charcoal); --success: var(--herb-light); --border-dim: #332A23; --border-mid: #463A30; --shadow-card: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3); --focus-ring: 0 0 0 3px rgba(232, 137, 107, .4); } /* JS-off / no-preference fallback. :not([data-theme='light']) is what lets an explicit light choice beat a dark OS setting -- a plain :root here would not. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg-page: var(--charcoal); --bg-card: var(--charcoal-card); --bg-subtle: #1F1915; --text-primary: var(--bone); --text-muted: var(--bone-soft); --accent: var(--terracotta-light); --accent-strong: var(--terracotta-light); --accent-on: var(--charcoal); --success: var(--herb-light); --border-dim: #332A23; --border-mid: #463A30; --shadow-card: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3); --focus-ring: 0 0 0 3px rgba(232, 137, 107, .4); } } /* ── Reset ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-body); background: var(--bg-page); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } img, svg { display: block; max-width: 100%; } ul, ol { list-style: none; } input, select, textarea { font: inherit; color: inherit; } table { border-collapse: collapse; width: 100%; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; color: var(--text-primary); } /* Only fires once .theme-ready appears (added after load by theme.js), so the very first paint of the stored theme never animates in from the wrong one. */ html.theme-ready, html.theme-ready * { transition: background-color .2s ease, border-color .2s ease, color .2s ease; } @media (prefers-reduced-motion: reduce) { html.theme-ready, html.theme-ready * { transition: none !important; } html { scroll-behavior: auto; } } /* ── Accessibility utilities ────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: var(--accent-on); padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; } .skip-link:focus { left: 0; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } .no-js .js-only { display: none; } /* Default visible -- headless Chrome does not reliably fire IntersectionObserver, so JS adds .reveal--pre immediately before observing rather than the CSS hiding by default. A screenshot can never come back blank because of this. */ .reveal { opacity: 1; transform: none; } .reveal--pre { opacity: 0; transform: translateY(12px); } html.theme-ready .reveal { transition: opacity .5s ease, transform .5s ease; } @media (prefers-reduced-motion: reduce) { .reveal--pre { opacity: 1; transform: none; } } /* ── Layout primitives ──────────────────────────────────── */ .header-inner, .footer-inner, main > section, main > .recipe, main > .breadcrumb, main > .category-page, main > .related-recipes { max-width: var(--max-w); margin-inline: auto; padding-inline: 24px; } main { display: block; } section { padding-block: var(--section-py); } .button { display: inline-flex; align-items: center; gap: .5rem; background: var(--accent); color: var(--accent-on); padding: .75rem 1.5rem; border-radius: var(--radius-md); font-weight: 600; } /* Darkening on hover (not --accent-strong, which is lighter and would drop the white-on-accent text below AA contrast) keeps the button legible in every state, not just at rest. */ .button:hover { filter: brightness(0.92); } .icon { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .icon-btn { display: grid; padding: .5rem; border-radius: var(--radius-sm); } .icon-btn .icon { width: 1.3em; height: 1.3em; } /* The button shows only the icon for the theme you'd switch TO. */ .icon-sun { display: none; } :root[data-theme='dark'] .icon-sun { display: block; } :root[data-theme='dark'] .icon-moon { display: none; } .tag, .card-category { color: var(--accent); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; } .tag { background: var(--bg-subtle); border-radius: 999px; padding: .3rem .8rem; display: inline-block; } .tag-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; } /* ── Header / navigation ────────────────────────────────── */ #site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: var(--bg-page); border-bottom: 1px solid var(--border-dim); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 1rem; } .header-brand { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; } .brand-icon { width: 26px; height: 26px; stroke: var(--accent); fill: none; stroke-width: 1.6; } .header-nav ul { display: flex; gap: 1.75rem; } .nav-link { font-weight: 500; padding: .25rem 0; border-bottom: 2px solid transparent; } .nav-link:hover { color: var(--accent); } .nav-link[aria-current='page'] { color: var(--accent); border-bottom-color: var(--accent); } .header-right { display: flex; align-items: center; gap: .5rem; } /* Compact two-line clock in the header. Tabular figures stop the digits from shifting width as they tick, which reads as jitter at this size. */ .header-clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; margin-right: .5rem; padding-right: .9rem; border-right: 1px solid var(--border-dim); } .header-clock-time { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .9rem; color: var(--accent); letter-spacing: .02em; } .header-clock-date { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; } /* The header row gets crowded before the nav collapses at 780px -- the clock is the least essential element in it, so it goes first. */ @media (max-width: 1024px) { .header-clock { display: none; } } .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; } .hamburger span { width: 22px; height: 2px; background: var(--text-primary); border-radius: 1px; transition: transform .2s ease, opacity .2s ease; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav-overlay { position: fixed; inset: var(--header-h) 0 0 0; z-index: 90; background: var(--bg-page); transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; } .mobile-nav-overlay.open { transform: translateX(0); } .mobile-nav-overlay ul { display: flex; flex-direction: column; padding: 24px; gap: 1.25rem; } .mnav-link { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; } body.nav-overlay-open { overflow: hidden; } @media (max-width: 780px) { .header-nav { display: none; } .hamburger { display: flex; } } /* ── Hero ────────────────────────────────────────────────── */ .hero { text-align: center; padding-top: 96px; } .hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 1rem; } .hero p { max-width: var(--max-w-prose); margin: 0 auto 2rem; font-size: 1.15rem; color: var(--text-muted); } /* ── Card grid & recipe card ─────────────────────────────── */ h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 1.75rem; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.75rem; } .card { background: var(--bg-card); border: 1px solid var(--border-dim); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; } /* The img width/height attributes (needed to prevent layout shift before the image loads) make both dimensions non-auto, which disables aspect-ratio entirely unless height is explicitly reset to auto here. */ .card-media picture, .card-media img { aspect-ratio: 3 / 2; width: 100%; height: auto; object-fit: cover; background: var(--bg-subtle); } .card-body { padding: 1.25rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .card-title { font-size: 1.2rem; } .card-title a:hover { color: var(--accent); } .card-tagline { color: var(--text-muted); font-size: .95rem; flex: 1; } .card-meta { display: flex; gap: 1rem; font-size: .85rem; color: var(--text-muted); margin-top: auto; } .card-meta span { display: flex; align-items: center; gap: .35rem; } .card[hidden] { display: none; } /* ── Categories ─────────────────────────────────────────── */ .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; } .category-tile { background: var(--bg-subtle); border-radius: var(--radius-lg); padding: 1.75rem; display: block; border: 1px solid var(--border-dim); } .category-tile:hover { border-color: var(--accent); } .category-tile h3 { margin-bottom: .5rem; } .category-tile p { color: var(--text-muted); margin-bottom: 1rem; } .category-count { font-size: .85rem; font-weight: 600; color: var(--accent); } .category-page h1 { margin-bottom: .5rem; } .category-page > p { color: var(--text-muted); margin-bottom: 1rem; max-width: var(--max-w-prose); } .category-page > h2 { margin-top: 2rem; margin-bottom: .5rem; } .category-search-link { margin-bottom: 2rem; font-size: .9rem; } /* ── Filter bar ──────────────────────────────────────────── */ .filter-bar { margin-bottom: 2rem; display: flex; flex-direction: column; gap: 1rem; } .filter-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; } .search-input { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 220px; background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: var(--radius-md); padding: .6rem 1rem; } .search-input .icon { color: var(--text-muted); } .search-input input { flex: 1; background: none; border: none; } .search-input input::placeholder { color: var(--text-muted); } #category-select, #sort-select { background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: var(--radius-md); padding: .6rem 1rem; } .filter-chips { gap: .6rem; } .chip { border: 1px solid var(--border-mid); border-radius: 999px; padding: .4rem 1rem; font-size: .9rem; background: var(--bg-card); } .chip[aria-pressed='true'] { background: var(--accent); color: var(--accent-on); border-color: var(--accent); } #filter-status { color: var(--text-muted); font-size: .9rem; } #empty-state { text-align: center; padding: 3rem 0; color: var(--text-muted); } #empty-state button { margin-top: 1rem; text-decoration: underline; } /* ── Kitchen wisdom ──────────────────────────────────────── */ .kitchen-wisdom { text-align: center; max-width: var(--max-w-prose); margin: 0 auto; padding-inline: 24px; } .kitchen-wisdom blockquote { font-family: var(--font-display); font-size: 1.4rem; font-style: italic; margin-bottom: .75rem; } .kitchen-wisdom > p { color: var(--text-muted); font-size: .9rem; } /* ── Breadcrumb ──────────────────────────────────────────── */ .breadcrumb { padding-top: 2rem; padding-bottom: 0; } .breadcrumb ol { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .9rem; color: var(--text-muted); } .breadcrumb li:not(:last-child)::after { content: '/'; margin-left: .5rem; } .breadcrumb a:hover { color: var(--accent); } /* ── Recipe page ─────────────────────────────────────────── */ .recipe { padding-top: 1.5rem; } .recipe-header h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: .5rem 0; } .recipe-tagline { color: var(--text-muted); font-size: 1.1rem; max-width: var(--max-w-prose); } .recipe-hero { margin: 2rem 0; border-radius: var(--radius-lg); overflow: hidden; } .recipe-hero picture, .recipe-hero img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--bg-subtle); } .recipe-hero figcaption { padding: .75rem 0; color: var(--text-muted); font-size: .9rem; } .recipe-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.25rem; background: var(--bg-subtle); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 2rem; } .meta-item { display: flex; flex-direction: column; gap: .3rem; } .meta-label { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; } .servings-control { display: flex; align-items: center; gap: .5rem; font-weight: 600; } .servings-control button { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--border-mid); display: grid; place-items: center; } .recipe-description { max-width: var(--max-w-prose); margin-bottom: 2.5rem; color: var(--text-muted); } .recipe-body { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; margin-bottom: 3rem; } .ingredient-group:not(:last-child) { margin-bottom: 1.5rem; } .ingredient-group h4 { font-size: 1rem; margin-bottom: .5rem; color: var(--accent); } .ingredient-list li { padding: .5rem 0; border-bottom: 1px solid var(--border-dim); display: flex; align-items: baseline; gap: .5rem; } .step-list { display: flex; flex-direction: column; gap: 1.5rem; counter-reset: step; } .step-list > li { counter-increment: step; position: relative; padding-left: 2.5rem; } .step-list > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--accent); color: var(--accent-on); display: grid; place-items: center; font-weight: 700; font-size: .9rem; } .step-row { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; } .step-check { margin-top: .3rem; accent-color: var(--accent); width: 1.1rem; height: 1.1rem; } .step-row:has(.step-check:checked) .step-text { color: var(--text-muted); text-decoration: line-through; } .step-timer { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--accent); margin-top: .4rem; margin-left: 1.7rem; } .step-tip { font-size: .9rem; color: var(--text-muted); margin-top: .4rem; margin-left: 1.7rem; font-style: italic; } .recipe-notes ul { list-style: disc; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .4rem; color: var(--text-muted); } .recipe-notes { margin-bottom: 2.5rem; } .nutrition { margin-bottom: 1.5rem; } .nutrition table { background: var(--bg-card); border-radius: var(--radius-md); overflow: hidden; } .nutrition caption { text-align: left; padding: 1rem 1.25rem 0; color: var(--text-muted); font-size: .85rem; } .nutrition th, .nutrition td { padding: .6rem 1.25rem; border-bottom: 1px solid var(--border-dim); text-align: left; } .nutrition tfoot td { color: var(--text-muted); font-size: .8rem; border-bottom: none; } .attribution { font-size: .8rem; color: var(--text-muted); margin-bottom: 2rem; } .attribution a { text-decoration: underline; } .related-recipes { padding-block: var(--section-py); } @media (max-width: 860px) { .recipe-body { grid-template-columns: 1fr; gap: 2rem; } } /* ── Forms (submit-recipe.html) ─────────────────────────── */ .recipe-form fieldset { border: 1px solid var(--border-dim); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; } .recipe-form legend { font-family: var(--font-display); font-weight: 700; padding: 0 .5rem; } .form-field { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: .4rem; } .form-field label { font-weight: 500; font-size: .9rem; } .form-field input, .form-field select, .form-field textarea { background: var(--bg-card); border: 1px solid var(--border-mid); border-radius: var(--radius-sm); padding: .6rem .8rem; } .radio-row, .checkbox-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; } .form-actions { display: flex; gap: 1rem; } .form-actions button[type='reset'] { color: var(--text-muted); text-decoration: underline; } /* ── Footer ──────────────────────────────────────────────── */ footer { border-top: 1px solid var(--border-dim); padding-block: 3rem 2rem; background: var(--bg-subtle); } .footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; } .footer-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; } .footer-tagline { color: var(--text-muted); margin-top: .4rem; } .footer-col h3 { font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .75rem; color: var(--text-muted); } .footer-col ul { display: flex; flex-direction: column; gap: .5rem; } .footer-col a:hover { color: var(--accent); } .footer-legal { max-width: var(--max-w); margin-inline: auto; padding-inline: 24px; font-size: .85rem; color: var(--text-muted); } /* Tabular figures keep the digits from shifting width as they change every second -- without it a clock visibly jitters left-right as it ticks. */ .footer-col-clock { background: var(--bg-card); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 1rem 1.25rem; } .site-clock-time { font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 700; color: var(--accent); letter-spacing: .02em; } .site-clock-date { color: var(--text-muted); font-size: .85rem; margin-top: .3rem; } @media (max-width: 700px) { .footer-inner { grid-template-columns: 1fr; } } /* ── Credits page ────────────────────────────────────────── */ .category-page section { margin-bottom: 2rem; } .category-page section h2 { font-size: 1.1rem; margin-bottom: .75rem; } .credit-list { display: flex; flex-direction: column; gap: .6rem; } .credit-row { padding: .75rem 1rem; background: var(--bg-card); border-radius: var(--radius-md); border: 1px solid var(--border-dim); font-size: .9rem; color: var(--text-muted); } .credit-row a { text-decoration: underline; color: var(--text-primary); } /* ── 404 page ────────────────────────────────────────────── */ .not-found { text-align: center; padding-block: 96px; } .not-found h1 { font-size: clamp(2.5rem, 6vw, 4rem); } /* ── Touch targets ───────────────────────────────────────── */ /* (pointer: coarse) targets actual touch input rather than guessing from viewport width -- a touch laptop or a wide tablet in landscape still needs these bumped, and neither would match a narrow max-width query. */ @media (pointer: coarse) { .servings-control button { width: 40px; height: 40px; } .chip { padding: .6rem 1.1rem; } .icon-btn { padding: .65rem; } .icon-btn .icon { width: 1.4em; height: 1.4em; } .hamburger { width: 44px; height: 44px; } }