/* Nikki Home - shared stylesheet for every page. Extracted from index.html so the landing page, the recipe index and the video page share one copy instead of three that drift apart. */ /* --------------------------------------------------------------- TRATTORIA Nikki chose Design A, so the site wears it. The token NAMES are unchanged on purpose - every rule below and all of site.js refers to them - only the values move. That turns a re-skin into a palette swap rather than a rewrite, and keeps the recipe modal, cook mode, filters, the CMS and the newsletter exactly as they were. The accent is #8F6237 rather than the concept's #9C6B3C. The lighter gold measures 4.07:1 on bone, and the section labels it colours are small caps - that fails AA. This one is 4.70:1 on bone and 4.99:1 on paper, same hue, and passes. --------------------------------------------------------------- */ :root { --ivory: #FBF8F2; /* paper */ --stone: #DED4C4; /* rules */ --frame: #A08D72; /* the hairline around photographs. Deliberately darker than --stone and NOT seasonal: it is a picture frame, and a frame you can barely see is not doing its job. */ --warm-grey: #6E6257; /* body 5.58:1 on paper */ --charcoal: #2A211A; /* ink 14.89:1 on paper */ --accent: #8F6237; /* gold 4.99:1 on paper */ --cream: #F6F1E7; /* bone */ --espresso: #1E1813; /* dark bands */ --serif: 'Bodoni Moda', Georgia, serif; --sans: 'Jost', sans-serif; } /* ---- Seasonal themes (set on ) ---- */ /* The seasons warm the paper; they no longer repaint the brand. These used to override --accent too, which meant the gold the design was built and contrast-checked around (#8F6237, 4.99:1) was being replaced at runtime - in August by #E0B449, a pale yellow that measures about 1.9:1 on bone and made every section label almost unreadable. --stone had drifted pale enough that the hairline frames had all but vanished as well. Seasons move the paper and the rules a little. The gold stays put. */ html[data-season="spring"] { --cream: #F4F2E9; --stone: #D9D6C4; } html[data-season="summer"] { --cream: #F8F3E6; --stone: #E0D5C0; } html[data-season="autumn"] { --cream: #F5EEE3; --stone: #DCCFBB; } html[data-season="winter"] { --cream: #F3F1EC; --stone: #D8D3C8; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Smooth scrolling is one of the classic vestibular triggers, so it is offered rather than imposed - every in-page anchor animated a full-page glide even for people who had asked the operating system for no motion. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Visible to a screen reader, invisible on screen. Used for form labels the design carries as placeholder text. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Bodoni Moda is a Didone with an optical-size axis. Left on auto, a 57px heading selects opsz 57, where the hairlines are at their thinnest and start breaking up on screen. Pinning the axis low keeps enough weight in the thin strokes at display sizes. font-variation-settings inherits, and Jost simply ignores an axis it doesn't have. */ body { font-optical-sizing: none; font-variation-settings: 'opsz' 30; font-family: var(--sans); background-color: var(--ivory); color: var(--charcoal); line-height: 1.6; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } /* ---------- Navigation ---------- Scoped to #navbar, not bare nav. The sticky bar along the bottom of a phone is a