/* Hallmark · tokens · Beachside Gyros * ══════════════════════════════════════════════════════════════════════════ * 2026-08-08 — DIRECTION B: CERAMIC / CYCLADIC * * Replaces the roadside/brutalist build. That version separated everything * with 3px ink outlines and hard offset shadows, which is neo-brutalism — an * aesthetic that reads playful and young no matter what is inside it. On a * menu of $14 Philly bombs it looked like a kids' activity sheet. * * The depth model is the whole change: * · NO OUTLINES. Not on cards, not on tags, not on buttons. * · NO SHADOWS. Not soft, not hard. Nothing floats. * · Separation comes from FLAT BLOCKS OF COLOUR and generous space. * A tiled wall has no borders — the tiles simply meet. * * ONE documented exception, added 2026-08-09, covering the whole lower half of * the HOME PAGE and nothing else: * · the menu card — .picks--board / .breadth / .commune * · the find-us block — .here / .voice / .plaque * Both are set as printed cards to mockups Marcus supplied, and hairline * dividers and frames are that form's entire grammar — without them the menu * card is three lists adrift on plaster and the plaque is a shopping list. * Do NOT "restore" the rule by stripping them; the reasoning is written at the * top of each CSS block. The ban still holds everywhere else on the site, and * these two blocks are not a precedent for boxing anything new. * * The pattern is used TWICE per page as a full-width band (leading the * masthead, above the footer) and nowhere else at that scale. A second run * under the masthead bar was tried on 2026-08-09 to frame it and was cut the * same day — "it's too much" — so two is the ceiling, not a starting point. * In the sketch it ran as a repeating band down the whole page and immediately * read souvenir-shop; restraint is what keeps it sophisticated. * * Palette is Cycladic: whitewashed plaster, a pale glazed-tile field, deep * Aegean, and terracotta held back for small warm marks. * ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Colour ─────────────────────────────────────────── */ /* Whitewashed plaster — warm, not blue-white, not pure #fff. */ --color-paper: oklch(97.4% 0.006 95); /* The glazed-tile field. Menu panels and alternating bands sit on this. */ --color-paper-2: oklch(94.2% 0.012 232); --color-paper-3: oklch(89.5% 0.020 234); --color-surface: oklch(99.2% 0.003 95); --color-surface-2: oklch(96.4% 0.008 230); --color-ink: oklch(23% 0.032 250); --color-ink-2: oklch(34% 0.030 250); --color-muted: oklch(49% 0.024 246); --color-rule: oklch(87% 0.016 232); --color-rule-soft: oklch(92% 0.010 232); /* Aegean — brand, actions, prices. */ --color-accent: oklch(46% 0.130 245); --color-accent-2: oklch(37% 0.120 247); --color-accent-ink: oklch(98.5% 0.004 95); --color-accent-pale:oklch(80% 0.070 240); --color-accent-wash:oklch(92% 0.040 238); /* The dark ground — hero, tzatziki band, story/catering bands, footer. History, because this value has moved twice and the reasoning matters: · 27% L / 0.075 C — read cheap. A mid-luminance saturated navy is the most common section band on the web and it dulled the food photos. · 17.5% L / 0.028 C — near-black. Fixed "cheap", but Marcus looked at it on 2026-08-09 and called it black rather than blue, which it was. · 24% L / 0.062 C — HERE NOW. Unmistakably navy, but a full step darker and a third less saturated than the version that read cheap. If a future band ever looks dull against this, the fix is the photograph or the accent, not another trip around this loop. */ --color-deep: oklch(24% 0.062 256); /* One step up, for a dark band that must not merge with a dark band above. UNUSED since the tzatziki rebuild on 2026-08-09 — kept because the moment two dark sections ever meet again, this is the answer. */ --color-deep-2: oklch(30% 0.055 252); /* Warm marks only: never a surface, never a button. */ --color-terra: oklch(56% 0.120 42); --color-olive: oklch(50% 0.080 132); --color-focus: oklch(56% 0.170 245); --color-open: oklch(48% 0.110 150); /* on photographs */ --color-onphoto: oklch(98.5% 0.004 95); --color-onphoto-2: oklch(93.5% 0.010 228); /* was 88% — read as washed-out on the scrim */ /* Aegean-tinted scrim, so photos sit inside the palette rather than beside it */ --color-scrim: oklch(24% 0.070 248 / 0.86); /* print */ --color-print-paper: oklch(100% 0 0); --color-print-ink: oklch(0% 0 0); /* ── Type ───────────────────────────────────────────── */ /* Set in TITLE CASE, never all-caps — caps was half of what made the previous build shout, and a display face this size makes it worse. */ /* Gorditas Bold is the lettering on the truck. The painted wordmark is warm, rounded and hand-lettered with flared terminals; Gorditas has the same quirk in its joints without tipping into cartoon. Chosen by Marcus from a live eight-way comparison rendered in the real hero (`concepts-type.html`). THREE faces were rejected getting here. Do not walk back into any of them: · Kaushan Script — a brush SCRIPT. A different species from the painted caps it sat under; every heading disagreed with the logo above it. · Titan One — right species, wrong proportion. "too bold and blocky and short." Squat and uniformly heavy. · Fugaz One — right proportion, wrong posture. It is DRAWN leaning, and Marcus does not want the headings to read italic. The brief that survived all three: upright, tall, medium weight, real character. Not blocky, not thin, not short, not basic. Anything that fails one of those six fails, however well it scores on the others. GORDITAS SHIPS 400 AND 700 — THE DISPLAY FACE MUST BE SET AT 700. Every earlier display face here was single-weight, so the stylesheet said `font-weight: 400` beside `var(--font-display)` throughout. At 400 Gorditas goes weedy and loses the wordmark match. Use --weight-display, not a literal, so the next face swap cannot silently reintroduce this. Two families carry the whole site. Prata is gone: it only existed to give page mastheads a voice that would not argue with a script wordmark, and that argument no longer exists now the headline face IS the logo face. HELD BACK, deliberately, where the display face costs legibility. These use --font-body and must stay there: · the street address (people read it to drive there) · every numeral (no tabular figures in the display face, so prices, the 4.9 rating and the callboard times all jitter and fail to scan) · small uppercase labels (WHERE / WHEN / PAGES — at 12px the flared terminals close up and turn to mush) Do not "fix" them. */ --font-display: "Gorditas", Georgia, serif; --weight-display: 700; /* Work Sans — a humanist workhorse, warmer and more open than the Libre Franklin it replaced. Chosen by Marcus from a live six-way comparison (`concepts-body.html`) that judged each candidate on the work this face actually does: menu rows, prices, the address, hours and the small caps labels. A paragraph of body copy tells you nothing about a body face. It carries far more of the site than the display face does — 25 call sites to the display face's 10 — including every numeral, because the display face has no tabular figures. Weights 400/500/600/700/800 are all in use; do not trim the Google Fonts request to fewer. */ --font-body: "Work Sans", ui-sans-serif, system-ui, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1.0625rem; --text-md: 1.25rem; --text-lg: 1.5rem; --text-xl: 1.95rem; --text-2xl: 2.5rem; --text-3xl: 3.2rem; /* 4.1rem. Pulled to 3.8 once to stop Titan One shouting through sheer mass; Gorditas is lighter and more open and carries the larger size fine. */ --text-display: clamp(2.3rem, 3.2vw + 1rem, 4.1rem); --text-display-s: clamp(1.7rem, 1.9vw + 0.85rem, 2.6rem); /* Neutral. The brush script needed air, Titan One needed pulling in, Fugaz One was already condensed — Gorditas is drawn at a comfortable width and wants neither. Its flared terminals close up if tracked negative. */ --track-display: 0em; --track-caps: 0.14em; /* ── Space — 4pt ────────────────────────────────────── */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4.5rem; --space-3xl: 7rem; --page-gutter: clamp(1.25rem, 4vw, 4.5rem); --measure: 62ch; --shell: 1180px; /* ── Ornament ─────────────────────────────────────────── The Greek key, defined once. Applied as a MASK so its colour always comes from a token — never hardcode a hex into the data URI. Used at two scales and only two: · full-width band — page level: leading the masthead, above the footer · 75px segment — section level: under a section heading It runs at 20px tall, except the masthead band, which runs at 18px on Marcus's instruction — scoped to `.mast` via --mast-key-size. 18px is the floor: below it a meander stops reading as a key and becomes texture, which is what killed the dashed band it replaced. */ --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='20'%3E%3Cpath d='M2.5 17.5V2.5H22.5V13.75H8.75V8.125H16.25' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E"); --meander-size: 25px 20px; /* ── Line ───────────────────────────────────────────── */ --rule-hair: 1px; --rule-thin: 2px; /* ── Radius — ZERO. Tiles are square. ───────────────── */ --radius-sm: 0; --radius-md: 0; /* ── Depth ─────────────────────────────────────────── There is no shadow scale. Deliberate. If something needs to separate, change its ground colour. Reintroducing shadows here undoes the direction. Legacy aliases resolve to nothing so any stale reference fails safe. */ --shadow-1: none; --shadow-2: none; --shadow-3: none; --shadow-bar: none; /* ── Motion ─────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-instant: 120ms; --dur-short: 200ms; --dur-medium: 340ms; /* ── Depth order ────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-bar: 200; --z-overlay: 300; --z-skip: 400; }