/* ==========================================================================
OZE'S RESTAURANT — DESIGN TOKENS
Single source of truth for colour, type, space, radii, shadow, motion, z.
Authored by Art Direction. Do not hard-code a value that exists here.
Vanilla CSS. No build step. No preprocessor. No @font-face of our own.
==========================================================================
FONT LOADING — put EXACTLY this in of every page, before this file:
That is ONE stylesheet request and the ONLY external request the site makes.
Families: Cormorant Garamond (display), Jost (UI/body), Poiret One (deco caps).
Range syntax (300..600 / 300..500) pulls the variable font = one file each.
Do not add weights. Do not add a fourth family.
ARCH CLIP-PATH — paste this once, first thing inside , hidden:
Note: in objectBoundingBox units the cap is an ELLIPSE fitted to the box.
That is what you want for wide/landscape arches. For a true circular cap of
radius = width/2 (the logo's own geometry) use the .u-arch border-radius
technique instead — see utilities at the bottom of this file.
========================================================================== */
:root {
/* ---------------------------------------------------------------------
1. RAW PALETTE — primitives. Never reference these in component CSS;
reference the semantic roles in section 2 instead.
Greens from the collateral. Golds sampled from Final-Logo.svg.
--------------------------------------------------------------------- */
--green-950: #041A16; /* deepest ground — footer, "enjoy", menu teaser */
--green-900: #062A23; /* page background */
--green-800: #0B3B31; /* brand green — card, tote, storefront, poster */
--green-700: #12463C; /* raised surfaces / cards */
--gold-100: #EFDAAC; /* brightest foil highlight */
--gold-200: #ECD5A8; /* headline gold */
--gold-300: #E5C99C; /* body gold */
--gold-400: #D9B387; /* mid foil */
--gold-500: #D1A479; /* primary gold — links, rules, focus */
--gold-700: #A17754; /* deep foil / shadow side. HAIRLINES ONLY. */
/* NEVER text on green: 3.87:1 against green-900. */
--cream: #F5EFE3; /* light-section paper */
--marble: #EDEAE4; /* light-section ground (from the card mockup) */
--linen: #E9E2D4; /* warm off-white — body text on dark */
--brass: #B9A98C; /* aged foil — muted text on dark */
--ink-700: #3E534B; /* muted text on light */
/* Phase 2 (ART-DIRECTION-V2 §4). The graded photo ground and the three
photography-adjacent hues. Ratios measured, not estimated. */
--paper-warm: #EFEAE0; /* what --filter-warm-plate grades a cold white */
/* speckle TO. ~2 dE from --marble. green-950 on */
/* it 15.04:1 (AAA); green-800 on it 10.40:1. */
--nazar-500: #2F6BE0; /* the client's real neon blue. */
/* 3.16:1 on --green-900, 2.58:1 on --green-950. */
/* DECORATIVE AND GLOW ONLY. NEVER TEXT, never a */
/* control border, never a UI fill, at any size. */
--sage-300: #7FC79B; /* 7.74:1 on --green-900 (AAA) — open indicator */
--clay-400: #C98C7A; /* 5.51:1 on --green-900 (AA) — closed indicator */
/* ---------------------------------------------------------------------
2. SEMANTIC COLOUR ROLES — DARK (default: the whole page except the
"drink" band). Every ratio below is measured, not estimated.
--------------------------------------------------------------------- */
--c-bg: var(--green-900); /* page ground */
--c-bg-deep: var(--green-950); /* deepest sections + footer */
--c-surface: var(--green-800); /* panels, typographic tiles */
--c-surface-raised: var(--green-700); /* cards, hovered panels */
--c-heading: var(--gold-200); /* 10.75:1 on --c-bg */
--c-text: var(--linen); /* 11.95:1 on --c-bg — body copy */
--c-text-muted: var(--brass); /* 6.69:1 on --c-bg — meta, notes */
--c-accent: var(--gold-500); /* 6.82:1 on --c-bg — links, CTA */
--c-accent-hover: var(--gold-200); /* 10.75:1 on --c-bg */
--c-on-accent: var(--green-950); /* 7.98:1 on --c-accent */
--c-border: rgb(209 164 121 / 0.22); /* gold-500 @22% — hairline */
--c-border-strong: rgb(209 164 121 / 0.42); /* gold-500 @42% — hover */
--c-focus: var(--gold-100); /* 11.22:1 on --c-bg */
/* Phase 2 — photography + the live status pill (V2 §4). */
--c-photo-plate: var(--paper-warm); /* holds a plate's shape pre-decode */
--c-nazar: var(--nazar-500); /* DECORATIVE ONLY — see §1 */
--c-status-open: var(--sage-300); /* 7.74:1 on --c-bg */
--c-status-closed: var(--clay-400); /* 5.51:1 on --c-bg */
--c-veil: rgb(4 26 22 / 0.72); /* over photography */
--c-veil-strong: rgb(4 26 22 / 0.86);
/* ---------------------------------------------------------------------
3. TYPE
--------------------------------------------------------------------- */
--ff-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
--ff-ui: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
--ff-deco: "Poiret One", "Cormorant Garamond", Georgia, serif;
--fw-light: 300;
--fw-book: 400;
--fw-mid: 500;
--fw-semi: 600;
/* Fluid scale, locked between 360px and 1440px viewport. */
--fs-display: clamp(2.5rem, 1rem + 6.667vw, 7rem); /* 40 → 112 */
--fs-h1: clamp(2.125rem, 1.333rem + 3.519vw, 4.5rem); /* 34 → 72 */
--fs-h2: clamp(1.625rem, 1.25rem + 1.667vw, 2.75rem); /* 26 → 44 */
--fs-h3: clamp(1.25rem, 1.083rem + 0.7407vw, 1.75rem); /* 20 → 28 */
--fs-lead: clamp(1.125rem, 1rem + 0.5556vw, 1.5rem); /* 18 → 24 */
--fs-body: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem); /* 16 → 18 */
--fs-price: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem); /* 16 → 18 */
--fs-sm: clamp(0.875rem, 0.8542rem + 0.09259vw, 0.9375rem); /* 14 → 15 */
--fs-nav: clamp(0.875rem, 0.8542rem + 0.09259vw, 0.9375rem); /* 14 → 15 */
--fs-xs: clamp(0.75rem, 0.7292rem + 0.09259vw, 0.8125rem); /* 12 → 13 */
--fs-eyebrow: clamp(0.6875rem, 0.6458rem + 0.1852vw, 0.8125rem); /* 11 → 13 */
--fs-stat: clamp(2.75rem, 1.5rem + 5.556vw, 5.5rem); /* 44 → 88 */
--lh-display: 0.94;
--lh-tight: 1.06;
--lh-heading: 1.16;
--lh-lead: 1.5;
--lh-body: 1.68;
--lh-ui: 1.4;
--ls-display: -0.02em;
--ls-h1: -0.015em;
--ls-h2: -0.005em;
--ls-body: 0em;
--ls-ui: 0.01em;
--ls-eyebrow: 0.25em; /* mirrors "RESTAURANT" on the collateral */
--ls-marquee: 0.32em; /* the Turkish-word marquee strip only */
--ls-deco: 0.28em; /* header wordmark, section numerals */
--measure: 68ch; /* long-form paragraphs */
--measure-tight: 46ch; /* centred statement copy */
/* ---------------------------------------------------------------------
4. SPACE — base unit 4px. Static steps + fluid section rhythm.
--------------------------------------------------------------------- */
--sp-1: 0.25rem; /* 4 */
--sp-2: 0.5rem; /* 8 */
--sp-3: 0.75rem; /* 12 */
--sp-4: 1rem; /* 16 */
--sp-5: 1.5rem; /* 24 */
--sp-6: 2rem; /* 32 */
--sp-7: 3rem; /* 48 */
--sp-8: 4rem; /* 64 */
--sp-9: 6rem; /* 96 */
--sp-10: 8rem; /* 128 */
--sp-11: 10rem; /* 160 */
/* Retuned in phase 2. These were set when the page had five sections and no
photography, where 176px of air read as editorial confidence. The page now
carries twelve content-rich sections, and at 176px top AND bottom that was
~4,200px of padding — nearly five screens of nothing, on a page already
12.6 screens tall. The rhythm below still breathes; it just stops being
the loudest thing on the page. */
--sp-section: clamp(3.25rem, 2.15rem + 3.4vw, 6.5rem); /* 52 → 104 */
--sp-section-lg: clamp(4.25rem, 2.9rem + 4.2vw, 8.5rem); /* 68 → 136 */
--sp-stack: clamp(1.5rem, 1.15rem + 1.6vw, 2.75rem); /* 24 → 44 */
/* ---------------------------------------------------------------------
5. LAYOUT
--------------------------------------------------------------------- */
--w-content: 1240px; /* standard content max-width */
--w-wide: 1440px; /* gallery / full-bleed inner max-width */
--w-narrow: 760px; /* centred statement blocks */
--gutter: clamp(1.25rem, 0.3333rem + 4.074vw, 4rem); /* 20 → 64 */
--grid-gap: clamp(1rem, 0.5rem + 2.222vw, 2.5rem);/* 16 → 40 */
/* Aspect ratios. `450 / 253` and `16 / 9` are 0.05% apart and are NOT the
same value — do not merge them or a CLS audit flags it (CRAFT-FLOOR §E). */
--ar-plate: 4 / 5; /* every .oz-plate — the lit window */
--ar-band: 16 / 10; /* wide arch / full-bleed bands */
--ar-tile: 1 / 1; /* the Instagram exception, and only that */
--header-h: 80px;
--header-h-slim: 64px; /* after scroll condense */
/* ---------------------------------------------------------------------
6. RADII — the arch is the brand's only real shape.
--------------------------------------------------------------------- */
--r-hair: 2px; /* inputs, tags */
--r-sm: 4px;
--r-pill: 999px; /* CTA buttons */
/* Arch: oversized radii are clamped by the UA to width/2, giving the
logo's true circular cap. Requires height >= width/2. */
--r-arch: 50rem 50rem 0 0;
--r-arch-soft: 50rem 50rem 0.5rem 0.5rem;
/* Shallow wide dome for the full-bleed light band's top edge. */
--r-band-arch: 50% 50% 0 0 / clamp(2rem, 7vw, 8rem) clamp(2rem, 7vw, 8rem) 0 0;
/* ---------------------------------------------------------------------
7. LINE & FOIL — every rule in the identity is 1px.
--------------------------------------------------------------------- */
--hairline: 1px;
--rule: var(--hairline) solid var(--c-border);
--rule-strong: var(--hairline) solid var(--c-border-strong);
/* Decorative foil: the logo's own gradient. Edges, rules, icon fills.
Do NOT use it on text — its darkest stop is 3.87:1 on green-900. */
--grad-foil: linear-gradient(135deg,
#A17754 0%, #D1A479 22%, #EFDAAC 50%, #D9B387 74%, #A17754 100%);
/* Text-safe foil: same read, darkest stop lifted to gold-500 = 6.82:1.
This is the ONLY gradient allowed on type. */
--grad-foil-text: linear-gradient(105deg,
#D1A479 0%, #ECD5A8 34%, #EFDAAC 50%, #D9B387 70%, #D1A479 100%);
/* Sweep uses a 3x-wide track so background-position can travel. */
--grad-foil-sweep: linear-gradient(105deg,
#D1A479 0%, #D1A479 30%, #EFDAAC 44%, #FFF6DF 50%, #EFDAAC 56%,
#D9B387 70%, #D1A479 100%);
--grad-veil-bottom: linear-gradient(to top,
rgb(4 26 22 / 0.92) 0%, rgb(4 26 22 / 0.55) 38%, rgb(4 26 22 / 0) 78%);
/* --- PHOTOGRAPHY GRADES (V2 §1) -------------------------------------
TWO treatments, never a third and never a blanket filter across all 21
photographs. Light-ground shots get the warm grade (they become the
brand's own paper, seen through a window); already-dark shots get the
hue-lock. Driven off `tone` in data/gallery.js. See css/components.css. */
--warm-amt: 1; /* strength multiplier: 1 = full, 0.45 = lite */
--filter-warm-plate: sepia(0.14) saturate(1.06) hue-rotate(-6deg)
contrast(1.03) brightness(1.02);
/* Lite: for frames already sitting on warm wood, which take the full
grade into muddiness. A strength variant, NOT a third treatment. */
--filter-warm-plate-lite: sepia(0.06) saturate(1.03) hue-rotate(-3deg)
contrast(1.02) brightness(1.01);
--filter-dark-bleed: saturate(0.9) contrast(1.06) brightness(0.94);
--bleed-tint: 0.22; /* per-instance override: 0.10 for the coffee shots,
0.14 for the one neon tile that must survive */
/* The foot: a lit window dissolves into the wall instead of ending on a
hard cut. 0.55 at its darkest — a window, not a fade-out. */
--grad-plate-foot: linear-gradient(to top,
rgb(4 26 22 / 0.55) 0%, rgb(4 26 22 / 0.16) 46%, rgb(4 26 22 / 0) 100%);
/* The marquee has no beginning: words arrive out of the dark and return. */
--mask-marquee-fade: linear-gradient(to right,
transparent 0%, #000 12%, #000 88%, transparent 100%);
/* Candle-light ambience. Layer behind dark sections, never above text. */
--glow-candle: radial-gradient(60% 48% at 50% 42%,
rgb(209 164 121 / 0.16) 0%,
rgb(209 164 121 / 0.06) 42%,
rgb(209 164 121 / 0) 72%);
/* ---------------------------------------------------------------------
8. SHADOW & GLOW — on a dark ground, elevation reads as glow, not drop.
--------------------------------------------------------------------- */
--shadow-lift: 0 24px 60px -28px rgb(2 12 10 / 0.85);
--shadow-deep: 0 40px 110px -40px rgb(2 12 10 / 0.95);
--shadow-paper: 0 18px 44px -22px rgb(11 59 49 / 0.28); /* light sections */
--glow-gold: 0 0 40px -6px rgb(209 164 121 / 0.34);
--glow-gold-soft: 0 0 72px -10px rgb(209 164 121 / 0.22);
--inset-hairline: inset 0 0 0 1px var(--c-border);
/* Anchored to the neon sign in the ONE tile it appears in (V2 §1.4).
Exactly the way --glow-candle is anchored to the menu-teaser flame. */
--glow-nazar: radial-gradient(42% 34% at 50% 40%,
rgb(47 107 224 / 0.22) 0%,
rgb(47 107 224 / 0.08) 46%,
rgb(47 107 224 / 0) 74%);
/* ---------------------------------------------------------------------
9. MOTION — long, soft, no overshoot. Nothing bounces.
--------------------------------------------------------------------- */
--ease-brand: cubic-bezier(0.16, 1, 0.3, 1); /* default for everything */
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
/* Retimed in phase 2. Phase 1 ran roughly 3x too slow: a paragraph taking
950ms to arrive reads as sluggish, not luxurious. UI motion stays under
300ms; only the hero's one authored moment is allowed to be long. */
--dur-instant: 100ms; /* press feedback */
--dur-fast: 160ms; /* hover, colour */
--dur-base: 220ms; /* buttons, links, small state changes */
--dur-slow: 320ms; /* header condense, panels */
--dur-slower: 420ms; /* stagger rise — the workhorse reveal */
--dur-reveal: 560ms; /* arch unmask */
--dur-draw: 1200ms; /* hero line-draw — the authored moment */
--dur-sweep: 900ms; /* foil sweep */
--dur-ambient: 22s; /* candle drift — ambient, not a reveal */
--stagger: 70ms; /* 30-80ms is the correct band */
--stagger-arch: 120ms;
--stagger-leader: 90ms;
--stagger-draw: 90ms;
/* Page transition — a hand-off, not a performance. Entry only; nothing
here may delay first paint or delay a navigation (V2 §2.4). */
--dur-page-in: 260ms;
--dur-page-out: 160ms;
/* The marquee is a horizon, not a ticker. CSS animation, linear, never
rAF (CRAFT-FLOOR §D4). */
--dur-marquee: 46s;
/* Strong ease-in-out for things moving or morphing ON screen. Never
ease-in on anything: it delays the exact moment the eye is watching. */
--ease-move: cubic-bezier(0.77, 0, 0.175, 1);
/* --------------------------------------------------------------------
10. Z-INDEX
-------------------------------------------------------------------- */
--z-below: -1;
--z-base: 0;
--z-raised: 10;
--z-sticky: 100;
--z-nav: 110;
--z-drawer: 800;
--z-overlay: 900;
--z-top: 1000;
}
/* ==========================================================================
LIGHT SCOPE — the sparse light sections only (the "drink" band, and any
paper surface). Put class="theme-light" on the . It re-points the
same semantic tokens; component CSS never has to change.
========================================================================== */
.theme-light,
[data-theme="light"] {
--c-bg: var(--cream);
--c-bg-deep: var(--marble);
--c-surface: var(--marble);
--c-surface-raised: #FFFFFF;
--c-heading: var(--green-950); /* 15.75:1 on --cream */
--c-text: var(--green-800); /* 10.89:1 on --cream */
--c-text-muted: var(--ink-700); /* 7.21:1 on --cream */
--c-accent: var(--green-800); /* 10.89:1 on --cream — links */
--c-accent-hover: var(--green-950); /* 15.75:1 on --cream */
--c-on-accent: var(--cream); /* 10.89:1 on --c-accent */
--c-border: rgb(161 119 84 / 0.34);
--c-border-strong: rgb(161 119 84 / 0.62);
--c-focus: var(--green-950); /* gold focus is invisible on paper */
--c-veil: rgb(237 234 228 / 0.72);
--c-veil-strong: rgb(237 234 228 / 0.9);
--shadow-lift: var(--shadow-paper);
--shadow-deep: 0 32px 80px -34px rgb(11 59 49 / 0.34);
}
/* On paper, gold-700 (#A17754) is 3.47:1 — LARGE TEXT ONLY (>=24px, or
>=19px at weight 600). Never body copy. Hairlines and display flourish only.
Foil-on-text does not survive a light ground, so it collapses to solid ink. */
.theme-light .u-foil,
[data-theme="light"] .u-foil {
background-image: none;
color: var(--c-heading);
-webkit-text-fill-color: currentColor;
}
/* ==========================================================================
UTILITIES — deliberately few. Everything else belongs in component CSS.
========================================================================== */
/* --- Foil text ---------------------------------------------------------- */
.u-foil {
background-image: var(--grad-foil-text);
background-size: 100% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
.u-foil { color: var(--c-heading); -webkit-text-fill-color: currentColor; }
}
/* Foil sweep: a specular highlight travelling across the letterforms.
Add .is-swept from JS on reveal; it also fires on hover/focus for links. */
.u-foil--sweep {
background-image: var(--grad-foil-sweep);
background-size: 300% 100%;
background-position: 100% 0;
transition: background-position var(--dur-sweep) var(--ease-brand);
}
.u-foil--sweep.is-swept,
.u-foil--sweep:hover,
.u-foil--sweep:focus-visible { background-position: 0 0; }
/* A hairline rule carrying the foil gradient. Height stays 1px. Always. */
.u-foil-rule {
height: var(--hairline);
border: 0;
margin: 0;
background-image: var(--grad-foil);
opacity: 0.55;
}
/* --- Arch --------------------------------------------------------------- */
/* True circular cap of radius = width/2. The element MUST be at least as tall
as half its width or the cap flattens. Wrap the ![]()
; never clip it direct. */
.u-arch {
border-radius: var(--r-arch);
overflow: hidden;
position: relative;
isolation: isolate;
}
.u-arch > img,
.u-arch > picture > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Hairline arch outline — the framing device. The bottom edge stays open,
exactly like the mark. */
.u-arch-line {
border: var(--rule);
border-bottom: 0;
border-radius: var(--r-arch);
}
/* SVG-mask arch — use when the element is wider than 2:1 and the elliptical
cap is the intent. Requires the #ozArch from the header comment. */
.u-arch--svg {
border-radius: 0;
clip-path: url(#ozArch);
}
/* The full-bleed light band whose top edge is a shallow dome. */
.u-band-arch { border-radius: var(--r-band-arch); }
/* --- Type helpers -------------------------------------------------------- */
.u-eyebrow {
font-family: var(--ff-deco);
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
line-height: var(--lh-ui);
color: var(--c-text-muted);
}
.u-measure { max-width: var(--measure); }
.u-measure-tight { max-width: var(--measure-tight); }
/* --- Ambience ------------------------------------------------------------ */
/* Decorative candle glow behind dark sections. Must sit under content and
must never be the only thing carrying meaning. */
.u-glow {
position: absolute;
inset: -20%;
z-index: var(--z-below);
pointer-events: none;
background-image: var(--glow-candle);
animation: oz-candle var(--dur-ambient) var(--ease-in-out) infinite alternate;
}
@keyframes oz-candle {
from { transform: translate3d(-2%, 1%, 0) scale(1); opacity: 0.9; }
to { transform: translate3d(2%, -1.5%, 0) scale(1.06); opacity: 1; }
}
/* --- Focus & a11y -------------------------------------------------------- */
:where(a, button, [tabindex], input, select, textarea, summary):focus-visible {
outline: 2px solid var(--c-focus);
outline-offset: 3px;
border-radius: var(--r-sm);
}
.u-sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.u-skip-link {
position: absolute;
left: var(--gutter);
top: -4rem;
z-index: var(--z-top);
padding: var(--sp-3) var(--sp-5);
background: var(--green-950);
color: var(--gold-200);
font-family: var(--ff-ui);
font-size: var(--fs-sm);
border: var(--rule-strong);
border-radius: var(--r-pill);
transition: top var(--dur-fast) var(--ease-brand);
}
.u-skip-link:focus { top: var(--sp-4); }
/* ==========================================================================
REDUCED MOTION — non-negotiable. Zero every duration token, then belt-and-
braces kill anything that slipped through with a literal value.
========================================================================== */
/* Reduced motion means FEWER AND GENTLER, not none. Phase 1 clamped every
duration to 1ms, which also threw away the transitions that make a state
change comprehensible. The correct behaviour: colour and opacity still
ease, and everything that MOVES — travel, scale, parallax, clip reveals,
the marquee, the ambient drift — is removed outright. */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-instant: 100ms;
--dur-fast: 140ms;
--dur-base: 160ms;
--dur-slow: 200ms;
--dur-slower: 200ms;
--dur-reveal: 200ms;
--dur-draw: 0ms;
--dur-sweep: 0ms;
--dur-ambient: 0ms;
--stagger: 0ms;
--stagger-arch: 0ms;
--stagger-leader: 0ms;
--stagger-draw: 0ms;
--dur-page-in: 0ms;
--dur-page-out: 0ms;
--dur-marquee: 0s;
}
html { scroll-behavior: auto; }
/* Drop every keyframe animation, and narrow transitions to the properties
that do not imply movement. Anything whose start-state is a transform or
a clip-path now snaps straight to its end state, which JS applies on load. */
*, *::before, *::after {
animation-name: none !important;
animation-delay: 0ms !important;
transition-property:
opacity, color, background-color, border-color, fill, stroke !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
.u-glow { animation: none; transform: none; opacity: 0.55; }
.u-foil--sweep { background-position: 50% 0; }
}