/* ============================================================ RISERVA — style.css 1. Custom properties (palette, type, spacing) 2. Reset 3. Base typography 4. Layout helpers + logo mark 5. Header (desktop) 6. Sticky behaviour 7. Mobile hamburger + overlay menu 8. Sections 8a masthead · 8b food/set/dessert menus · 8c set toggle 8d wine (cellar) · 8e functions 9. Motion / footer 10. Responsive breakpoints ============================================================ */ /* ------------------------------------------------------------ 1. CUSTOM PROPERTIES — the single source of truth. One palette across the whole site: cream ground, brass and sand golds, ink text. No tonal inversion anywhere. Every colour pair is measured — the ratios are noted inline. ------------------------------------------------------------ */ :root { /* Palette — values chosen against WCAG AA (see README / audit) */ --cream: #F7F5EF; /* page background */ --linen: #EFE9DC; /* one warm step deeper — arrival bands only */ --brass: #876A2B; /* gold accent + text on cream — 4.67:1 AA */ --sand: #7C6926; /* readable muted TEXT on cream — 4.93:1 AA */ --sand-soft: #C4AC7C; /* DECORATIVE gold — on CREAM/WHITE only (arrows, masthead tagline, form hairline, status dot). Warm- on-warm against --linen, so never use it there. */ --ink: #2A2622; /* body text on cream — 13.77:1 AAA */ /* One palette: cream / brass / sand / ink. The old dark wine-list tokens were deleted — the wine list is cream like the rest of the site. */ /* Derived neutral (mixed from the palette — no new hex) */ --muted: color-mix(in srgb, var(--ink) 68%, var(--cream)); /* descriptor text — 5.07:1 AA on cream */ /* Type families */ --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Jost", system-ui, sans-serif; /* Fluid type scale — clamp(min, preferred, max) */ --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.13rem); --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.6rem); --step-2: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); --step-3: clamp(2.5rem, 2rem + 2.6vw, 4rem); --step-4: clamp(3.5rem, 2.5rem + 5vw, 6.5rem); /* Spacing scale — 4px base */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem; --sp-32: 8rem; /* Widths */ --measure: 68ch; --layout: 1080px; /* Motif */ --rule: 1px solid var(--brass); /* Header height (offsets anchor scrolling) */ --header-h: 4.5rem; } /* ------------------------------------------------------------ 2. RESET ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; } img, picture, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } :target { scroll-margin-top: var(--header-h); } /* SVG defs — invisible but referenceable by . NOT display:none (that breaks in some engines). */ .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* Keyboard focus — a brass ring on every focusable element. (Form inputs override this with their own brass underline; see .field …:focus-visible.) The ring inherits the ground-aware --brass, so it is deep gold on cream and brand gold inside the cellar. */ :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; } /* Body scroll-lock while the wine dialog is open (pins position exactly). */ body.scroll-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } /* Screen-reader-only — present in the a11y tree, invisible on screen. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Skip link — off-screen until focused, then pinned top-left. */ .skip-link { position: fixed; left: var(--sp-4); top: -6rem; z-index: 300; background: var(--ink); color: var(--cream); padding: var(--sp-3) var(--sp-6); font-family: var(--font-body); font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; transition: top 0.2s ease; } .skip-link:focus-visible { top: var(--sp-4); outline-offset: 2px; } /* ------------------------------------------------------------ 3. BASE TYPOGRAPHY ------------------------------------------------------------ */ body { font-family: var(--font-body); font-weight: 300; font-size: var(--step-0); color: var(--ink); background: var(--cream); } h1, h2, h3 { font-family: var(--font-display); font-weight: 300; line-height: 1.1; } /* ------------------------------------------------------------ 4. LAYOUT HELPERS + LOGO MARK ------------------------------------------------------------ */ .section { max-width: var(--layout); margin-inline: auto; padding: var(--sp-24) var(--sp-6); } .rule-short { border: 0; border-top: var(--rule); width: 60px; margin: var(--sp-6) auto 0; } /* The arch logo (currentColor inherits the local text colour). Sized by height only; width follows the viewBox aspect ratio. */ /* width:auto on a viewBox-less , so ~ reaches it. */ transform: translateY(100%); transition: transform 0.3s ease; } .site-header[data-stuck="true"] ~ .reserve-bar { transform: translateY(0); } /* Reserve room under the copyright so the fixed bar never covers it (bar height + the iPhone home-indicator inset). */ .site-footer { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }