/* --------------------------------------------------------------------------- Ashgrain Bakehouse — brand layer. Register: warm, editorial, appetite-led. A food business sells atmosphere before it sells product, so this build gives images the most room and treats the menu as the second hero rather than a footnote. Deliberately different LAYOUT DNA from the other concepts, not just different colours: centred header, full-bleed hero, asymmetric editorial splits. Four sites off one pattern library have to look like four studios built them. --------------------------------------------------------------------------- */ :root { --bg: #fdfaf3; --bg-alt: #f4ebdb; --surface: #fffdf8; --ink: #2c1e12; --ink-soft: #5c483a; --ink-mute: #8d7663; --line: #e6d9c4; --accent: #b3502a; --accent-ink: #fffdf8; --accent-soft: #f7e5d9; --focus: #b3502a; --crust: #3d2a1a; --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif; --font-body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif; --display-weight: 600; --display-tracking: -0.015em; --display-leading: 1.02; --btn-radius: var(--radius-pill); --card-radius: 14px; --input-radius: 8px; --header-h: 66px; --container: 1240px; } /* The warm wash is scoped to the block that shows it rather than painted across . A page-wide radial gradient has to be re-rasterised over the ENTIRE document height, which at 2x on a 5,000px page stalls screenshot capture indefinitely. Confining it costs nothing visually and keeps captures fast. */ #story { background-image: radial-gradient(ellipse 90% 70% at 18% 0%, #fff6e6 0%, transparent 70%); } h1, h2, h3 { font-variation-settings: "SOFT" 30, "WONK" 1; } .eyebrow { color: var(--accent); letter-spacing: 0.2em; } /* --- Header: centred brandmark, nav split either side ---------------------- */ .site-header { --header-bg: #fdfaf3; } .site-header__inner { justify-content: center; position: relative; } .brandmark { font-size: var(--step-2); letter-spacing: -0.01em; } .brandmark small { letter-spacing: 0.28em; } .site-header .site-nav { position: absolute; inset-inline-start: 0; } .site-header__aside { position: absolute; inset-inline-end: 0; } @media (max-width: 860px) { .site-header__inner { justify-content: space-between; } .site-header .site-nav { position: static; } .site-header__aside { position: static; } } /* --- Hero: full-bleed art with the words sitting on it --------------------- */ .hero { --hero-size: clamp(2.6rem, 7.2vw, 5.2rem); --hero-py: 0; /* Sized in vw, never vh. Viewport-height units resolve against the expanded surface during a full-page screenshot, so a vh hero balloons to thousands of pixels and the capture hangs. vw is stable because the width never changes. Found the hard way — see scripts/capture.mjs. */ min-height: clamp(30rem, 52vw, 45rem); display: grid; align-items: end; isolation: isolate; } .hero > .hero__art { position: absolute; inset: 0; z-index: 0; } .hero__art svg { width: 100%; height: 100%; object-fit: cover; } .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(44 30 18 / 0.86) 0%, rgb(44 30 18 / 0.42) 45%, rgb(44 30 18 / 0.12) 100%); } .hero__inner { padding-block: clamp(2.5rem, 6vw, 4.5rem); color: #fdfaf3; } .hero h1 { color: #fffdf8; max-width: 16ch; } .hero .lede { color: #ede0cd; max-width: 46ch; } /* --- Open-now strip ------------------------------------------------------- */ .today-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-xs) var(--s-l); padding-block: var(--s-s); background: var(--crust); color: #f0e4d2; font-size: var(--step--1); text-align: center; } .today-strip strong { color: #fff; font-weight: 700; } .today-strip span { display: inline-flex; align-items: center; gap: 0.5em; } .today-strip .dot { width: 8px; height: 8px; border-radius: 50%; background: #7cc98a; flex: none; box-shadow: 0 0 0 3px rgb(124 201 138 / 0.22); } /* --- Editorial split ------------------------------------------------------ */ .editorial { display: grid; gap: var(--s-xl); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); } .editorial--flip > *:first-child { order: 2; } @media (max-width: 800px) { .editorial--flip > *:first-child { order: 0; } } .drop-cap::first-letter { float: inline-start; font-family: var(--font-display); font-size: 3.6em; line-height: 0.82; padding-inline-end: 0.08em; padding-block-start: 0.06em; color: var(--accent); } /* --- Menu ----------------------------------------------------------------- */ .menu-block { break-inside: avoid; } .menu-block h3 { display: flex; align-items: center; gap: var(--s-s); font-size: var(--step-2); margin-block-end: var(--s-xs); } .menu-block h3::after { content: ""; flex: 1; border-block-end: 1px solid var(--line); } .menu-item { display: grid; gap: 2px; padding-block: var(--s-xs); border-block-end: 1px dashed var(--line); } .menu-item:last-child { border-block-end: 0; } .menu-item__head { display: flex; align-items: baseline; gap: var(--s-xs); font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; } .menu-item__head::after { content: ""; flex: 1; order: 1; align-self: end; margin-block-end: 0.3em; border-block-end: 1px dotted var(--line); } .menu-item__price { order: 2; font-variant-numeric: tabular-nums; color: var(--accent); } .menu-item p { font-size: var(--step--1); color: var(--ink-mute); } .menu-item__tag { display: inline-block; margin-inline-start: 0.5em; padding: 0.15em 0.5em; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-family: var(--font-body); font-size: 0.62em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; } /* --- Bake schedule -------------------------------------------------------- */ .bake-clock { display: grid; gap: 0; list-style: none; padding: 0; border-inline-start: 2px solid var(--line); } .bake-clock li { position: relative; padding: var(--s-xs) 0 var(--s-xs) var(--s-m); } .bake-clock li::before { content: ""; position: absolute; inset-inline-start: -6px; inset-block-start: 1.55em; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } .bake-clock time { display: block; font-family: var(--font-body); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .bake-clock p { color: var(--ink-soft); } /* --- Gallery -------------------------------------------------------------- */ .scroller .media { border-radius: var(--card-radius); } /* --- Visit panel ---------------------------------------------------------- */ .visit-card { padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); } /* --- Footer --------------------------------------------------------------- */ .site-footer { --footer-bg: var(--crust); --footer-ink: #f0e4d2; } .site-footer .brandmark { font-size: var(--step-2); }