/* === variables === */
/* === CSS VARIABLES ===
Single source of truth for every colour used in CSS *and* JS.
Loaded on every page that needs the brand/canvas palette — currently
the public site (via application.html.erb) and the backstage floor-plan
editor (via edit_floor_plan.html.erb). Kept in its own file so admin
pages can pull just the variables without inheriting the public site's
body/section rules from application.css.
JS reads brand and canvas tokens via getComputedStyle — see
app/javascript/colors.js. Mailer/PWA-manifest colours stay inline
because email clients and the manifest parser don't support
CSS custom properties.
How this is organised:
• Brand palette — the warm-pink + burgundy world the public site lives in.
• Brand RGB triplets — same brand colours expressed as channel triplets so we
can vary opacity inline (`rgb(var(--rgb-burgundy) / 0.4)`)
without minting a new token per alpha step.
• Derived translucents — alpha levels that recur often enough to deserve a name
(borders, scrollbars, popup overlays, base shadow).
• Floor-plan canvas — Konva fills/strokes for the booking + editor canvases.
Read in JS through colors.js.
• Admin / neutral — non-branded greys used by the Administrate panel and the
backstage floor-plan editor — kept distinct so the pink
tint of the public theme doesn't bleed into admin tools. */
:root {
/* Light-only site: opt out of the browser's automatic dark-mode inversion
(Samsung Internet / Chrome "Auto Dark Theme") so the warm-pink palette
below is never force-darkened. Backs up the
in the layouts. */
color-scheme: only light;
/* — Brand palette (NEUTRAL core defaults) —
Grayscale placeholders. An instance overrides these via /brand/theme.css
(see instances//public/theme.css), linked after the core bundle. */
--color-bg: #f5f5f5; /* page background */
--color-pink: #ebebeb; /* primary surface */
--color-surface: #e0e0e0; /* raised surface, slightly darker */
--color-burgundy: #444444; /* accent (text, CTAs, borders) */
--color-burgundy-light: #666666; /* hover variant of accent */
--color-text: #1a1a1a; /* body text */
--color-text-muted: #666666; /* secondary text, captions */
--color-white: #ffffff; /* pure white (menu card surface, table fill) */
/* — Brand RGB triplets (use as `rgb(var(--rgb-X) / )`) —
These avoid an explosion of `--color-burgundy-12`, `--color-burgundy-40`, … tokens.
Neutral defaults; overridden per instance via theme.css. */
--rgb-burgundy: 68 68 68; /* #444444 */
--rgb-pink: 235 235 235; /* #ebebeb */
--rgb-bg: 245 245 245; /* #f5f5f5 */
--rgb-text: 26 26 26; /* #1a1a1a */
--rgb-white: 255 255 255;
--rgb-black: 0 0 0;
/* — Derived translucents (recurring alpha levels worth naming) — */
--color-border: rgb(var(--rgb-burgundy) / 0.12); /* hairline on pink panels */
--color-scrollbar: rgb(var(--rgb-burgundy) / 0.4); /* scrollbar thumb on light bg */
--color-scrollbar-hover: rgb(var(--rgb-burgundy) / 0.7);
--color-scrollbar-dark: rgb(var(--rgb-pink) / 0.45); /* scrollbar thumb on dark sections */
--color-scrollbar-dark-hover: rgb(var(--rgb-pink) / 0.75);
--color-popup-backdrop: rgb(var(--rgb-text) / 0.62); /* modal/overlay scrim */
--color-overlay-deep: rgba(8, 3, 3, 0.93); /* near-black secret-menu overlay */
--shadow-soft: rgb(var(--rgb-black) / 0.1); /* default section/panel shadow tone */
/* — Floor-plan canvas (Konva, public booking + admin editor) —
Mirrored into JS via app/javascript/colors.js; edit values here. */
--color-canvas-bg: #e7dcdb; /* WebGL clear, slightly darker than --color-bg */
--color-cloth-bg: #fffdfb; /* cloth-texture fill, slightly brighter than --color-bg */
--color-table-fill: #3fb15f; /* available / bookable — green */
--color-table-fill-disabled: #b8b8b8; /* unavailable for booking — gray */
--color-table-fill-selected: #ffd21f; /* table chosen for booking — yellow */
--color-table-fill-editor: #fff7e0; /* table fill in the admin editor (warmer to read against the white canvas) */
--color-table-stroke: #1f7a3d; /* available outline — dark green */
--color-table-stroke-disabled: #6e6e6e; /* unavailable outline — dark gray */
--color-table-label-disabled: #3d3d3d; /* unavailable label */
--color-table-fill-taken: #d93b3b; /* taken — red */
--color-table-stroke-taken: #8f1d1d; /* taken outline — dark red */
--color-table-label-taken: #ffffff; /* taken label — light for contrast on red */
--color-table-border-editor: #d8c97a; /* editor banner border (companion to --color-table-fill-editor) */
--canvas-bg-opacity: 0.8; /* alpha for floor-plan background image (booking + editor) */
/* — Admin / neutral greys (Administrate + floor-plan editor) —
Kept separate from the brand greys so the admin chrome stays neutral. */
--color-surface-neutral: #fafafa; /* admin canvas / surface */
--color-border-neutral: #cccccc; /* admin input/canvas border */
--color-admin-hint: #6b7280; /* Administrate field hint */
--color-admin-label: #9ca3af; /* Administrate group label */
--font-mono: "Courier New", Courier, monospace;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-serif: "CormorantGaramond", Georgia, serif;
--nav-height: 56px;
--section-padding: clamp(3rem, 8vw, 6rem);
--content-max-width: 960px;
}
/* === tokens === */
/* UKOI brand palette. Overrides the neutral core defaults in
app/assets/stylesheets/variables.css. Loaded first in the instance bundle so
the design partials (and the core token-driven CSS) resolve to brand colours.
Folded in from the Phase-4 interim /brand/theme.css. */
:root {
--color-bg: #faf5f4; /* page background, warm off-white */
--menu-card-paper: #f9ece8; /* static menu paper/surround, warm blush (matches the lunch card). Baked into the kitchen/bar card SVG by bin/menu_web_backgrounds and backs the kitchen/bar + cocktails sections */
--color-pink: #fce8e6; /* primary pink surface */
--color-surface: #f5e3e1; /* raised pink surface, slightly darker */
--color-burgundy: #a52216; /* brand accent (text, CTAs, borders) */
--color-burgundy-light: #c94535; /* hover variant of brand */
--rgb-burgundy: 165 34 22; /* #a52216 */
--rgb-pink: 252 232 230; /* #fce8e6 */
--rgb-bg: 250 245 244; /* #faf5f4 */
}
/* === fonts === */
/* UKOI brand typography. TTFs live in instances/ukoi/fonts/ (Propshaft asset
path); url() is rewritten to the fingerprinted path when instance.css is
served. Core (no instance) has no @font-face, so --font-serif falls back to
Georgia. */
@font-face {
font-family: 'CormorantGaramond';
src: url("/assets/CormorantGaramond-VariableFont_wght-cd2ab63e.ttf") format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'CormorantGaramond';
src: url("/assets/CormorantGaramond-Italic-VariableFont_wght-bebd4704.ttf") format('truetype');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
/* The print cards' typefaces. The names match the TTF basenames, because
MenuPrint::RunCanvas derives a run's font-family from the very file Prawn
measured it with — so the browser lays each run out in the print font. */
@font-face {
font-family: 'InstrumentSerif';
src: url("/assets/InstrumentSerif-Regular-c830b3a5.ttf") format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'InstrumentSerif';
src: url("/assets/InstrumentSerif-Italic-8858a89b.ttf") format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'InstrumentSans';
src: url("/assets/InstrumentSans-Regular-c43605fb.ttf") format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url("/assets/Poppins-Regular-79840ffb.ttf") format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* === base === */
/*
* Public-site stylesheet entry point.
*
* Component styles live in partials/_*.css and are loaded as separate
* stylesheets from app/views/layouts/application.html.erb. This file
* keeps the token-driven html/body base and a couple of cross-cutting
* utilities. @font-face (brand typography) is instance-supplied — see
* instances//stylesheets/fonts.css — so core --font-serif falls back
* to Georgia. CSS variables live in variables.css (loaded separately so
* admin pages can pull them in without inheriting these rules).
*/
html {
scroll-behavior: smooth;
font-size: 20px;
/* Auto-hide scrollbar: the thumb is transparent at rest and only appears
while scrolling (the .is-scrolling class is toggled in javascript/index.js).
Restores the previous unobtrusive smooth-scroll feel. */
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
html.is-scrolling { scrollbar-color: var(--color-scrollbar) transparent; }
html.is-scrolling.scrollbar--on-dark { scrollbar-color: var(--color-scrollbar-dark) transparent; }
html::-webkit-scrollbar { width: 5px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 99px;
transition: background 0.4s ease;
}
html.is-scrolling::-webkit-scrollbar-thumb { background: var(--color-scrollbar); }
html.is-scrolling::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-hover); }
html.is-scrolling.scrollbar--on-dark::-webkit-scrollbar-thumb { background: var(--color-scrollbar-dark); }
html.is-scrolling.scrollbar--on-dark::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-dark-hover); }
body {
margin: 0;
padding: 0;
background-color: var(--color-bg);
font-family: var(--font-serif);
font-weight: 700;
letter-spacing: 0.03em;
color: var(--color-text);
}
/* Subtle dot grid using brand burgundy — applied via .pattern-bg utility class. */
.pattern-bg::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle, var(--color-burgundy) 1px, transparent 1px);
background-size: 22px 22px;
opacity: 0.06;
pointer-events: none;
z-index: 0;
}
.noscript-menu {
padding: 2rem;
font-family: var(--font-serif);
max-width: var(--content-max-width);
margin: 0 auto;
}
/* === sr_only === */
/* Visually hide content while keeping it in the accessibility tree. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* === section_shared === */
.site-section {
padding: var(--section-padding) clamp(1rem, 5vw, 3rem);
max-width: var(--content-max-width);
margin: 0 auto;
}
.site-section--full-width {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.section-heading {
font-family: var(--font-serif);
font-size: clamp(1.3rem, 3vw, 1.7rem);
font-weight: 700;
color: var(--color-burgundy);
letter-spacing: 0.10em;
margin: 0 0 2rem;
text-transform: uppercase;
}
#booking .section-heading {
margin-bottom: 1rem;
}
/* Three sites paint the same 2.5rem burgundy underline. On an instance with
Locomotive Scroll, the section-heading underline animates in via .is-inview
(see instances//stylesheets/scroll_layout.css); core shows it at full
width. margin-top matches the animated variant so layout is identical. */
.section-heading::after,
.coming-soon__heading::after,
.popup__title::after {
content: "";
display: block;
width: 2.5rem;
height: 3px;
background: var(--color-burgundy);
opacity: 0.45;
}
.section-heading::after { margin-top: 0.6rem; }
.section-subheading {
font-family: var(--font-serif);
font-size: 0.9rem;
font-weight: 700;
color: var(--color-text);
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 2rem 0 0.5rem;
}
.section-body {
font-size: 1rem;
line-height: 1.7;
color: var(--color-text);
margin: 0 0 1rem;
}
/* === nav === */
[data-controller="nav"] {
height: var(--nav-height);
}
#site-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: var(--nav-height);
background: var(--color-pink);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
padding: 0 clamp(1rem, 4vw, 2.5rem);
gap: 2rem;
}
.nav__logo {
display: flex;
align-items: center;
text-decoration: none;
flex-shrink: 0;
}
.nav__logo img {
display: block;
height: 22px;
width: auto;
}
/* Text wordmark shown on the neutral core (no instance logo). */
.nav__logo-text {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-burgundy);
}
.nav__links {
display: flex;
gap: 1.5rem;
flex: 1;
}
.nav__links a {
font-family: var(--font-serif);
font-size: 17px;
color: var(--color-text);
text-decoration: none;
letter-spacing: 0.03em;
transition: color 0.2s;
}
.nav__links a:hover {
color: var(--color-burgundy);
}
.nav__lang {
display: flex;
gap: 8px;
flex-shrink: 0;
}
/* Minimal nav (error pages): no section links, so push the language switch
to the far right since there's no flex:1 .nav__links spacer. */
.nav--minimal .nav__lang {
margin-left: auto;
}
.lang-switch__btn {
color: var(--color-text-muted);
font-family: var(--font-serif);
font-size: 17px;
font-weight: 700;
letter-spacing: 0.5px;
text-decoration: none;
opacity: 0.7;
transition: opacity 0.2s;
}
.lang-switch__btn:hover {
opacity: 1;
}
.lang-switch__btn--active {
color: var(--color-burgundy);
opacity: 1;
font-weight: 700;
}
/* Old #lang-switch removed from canvas area */
#lang-switch {
display: none;
}
/* Mobile menu button (three dots). */
.nav__menu-btn {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
margin-left: auto;
flex-shrink: 0;
}
.nav__menu-dot {
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--color-burgundy);
}
/* Side drawer overlay. */
.nav__overlay {
position: fixed;
inset: 0;
background: rgb(var(--rgb-text) / 0.4);
z-index: 150;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.nav__overlay--open {
opacity: 1;
pointer-events: auto;
}
/* Side drawer. */
.nav__drawer {
position: fixed;
top: 0;
right: 0;
width: 260px;
height: 100%;
background: var(--color-pink);
border-left: 1px solid var(--color-border);
z-index: 200;
transform: translateX(100%);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
padding: var(--nav-height) 2rem 2rem;
gap: 2rem;
}
.nav__drawer--open {
transform: translateX(0);
}
.nav__drawer-links {
display: flex;
flex-direction: column;
gap: 0;
}
.nav__drawer-links a {
font-family: var(--font-serif);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text);
text-decoration: none;
padding: 1rem 0;
border-bottom: 1px solid var(--color-border);
transition: color 0.2s;
}
.nav__drawer-links a:first-child {
border-top: 1px solid var(--color-border);
}
.nav__drawer-links a:hover {
color: var(--color-burgundy);
}
.nav__drawer-lang {
display: flex;
gap: 1rem;
}
@media (max-width: 768px) {
.nav__links,
.nav__lang {
display: none;
}
.nav__menu-btn {
display: flex;
}
}
/* === hero === */
#hero {
/* Pinning (position: sticky + full-viewport min-height) is instance design —
see instances//stylesheets/scroll_layout.css. Core flows normally. */
min-height: 60vh;
background-color: var(--color-pink);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: calc(var(--section-padding) - 30px) clamp(1rem, 5vw, 3rem) calc(var(--section-padding) + 30px);
overflow: hidden;
}
.hero__brand-mark {
width: 200px;
height: 200px;
animation: fadeUp 0.9s ease both;
}
.hero__brand-mark img {
width: 100%;
height: 100%;
}
.hero__name {
margin: 0 0 1rem;
position: relative;
z-index: 1;
animation: fadeUp 0.9s 0.15s ease both;
}
.hero__name img {
display: block;
width: clamp(180px, 40vw, 340px);
height: auto;
}
/* Text wordmark shown on the neutral core (no instance logo). */
.hero__name-text {
display: block;
font-family: var(--font-serif);
font-size: clamp(2.5rem, 8vw, 5rem);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-burgundy);
line-height: 1;
}
.hero__tagline {
font-family: var(--font-serif);
font-size: clamp(1rem, 2.5vw, 1.2rem);
color: var(--color-text-muted);
margin: 0 0 2.5rem;
max-width: 480px;
line-height: 1.6;
position: relative;
z-index: 1;
animation: fadeUp 0.9s 0.3s ease both;
}
.hero__scroll-hint {
position: absolute;
bottom: 5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-decoration: none;
animation: scrollBounce 2.2s 1.2s ease-in-out infinite;
}
.hero__scroll-hint span {
font-family: var(--font-serif);
font-size: 13px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--color-burgundy);
opacity: 0.5;
}
.hero__scroll-hint svg {
width: 16px;
height: 16px;
stroke: var(--color-burgundy);
opacity: 0.45;
}
/* === animations === */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
from { left: -80%; }
to { left: 120%; }
}
@keyframes scrollBounce {
0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
50% { transform: translateX(-50%) translateY(7px); opacity: 0.9; }
}
@keyframes revealIn {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
/* === menu_type_switcher === */
.menu__type-switcher {
display: flex;
gap: 0.75rem;
justify-content: safe center;
padding: 1rem 0;
z-index: 10;
}
.menu__type-btn {
display: inline-block;
padding: 0.45rem 1.25rem;
border: 1.5px solid var(--color-burgundy);
border-radius: 99px;
background: transparent;
color: var(--color-burgundy);
font-family: inherit;
font-size: 0.85rem;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.menu__type-btn:hover,
.menu__type-btn--active {
background: var(--color-burgundy);
color: var(--color-pink);
}
/* Canvas: overlay at top */
#menu-canvas .menu__type-switcher {
position: absolute;
top: 0.25rem;
left: 0;
right: 0;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
touch-action: pan-x;
/* Inline padding so first/last buttons aren't flush against viewport edges */
padding-inline: 1rem;
/* Snap each button to centre when scrolling stops */
scroll-snap-type: x mandatory;
scroll-padding-inline: 1rem;
/* Hide scrollbar across browsers */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* legacy Edge / IE */
}
#menu-canvas .menu__type-switcher::-webkit-scrollbar {
display: none; /* WebKit / Blink */
}
#menu-canvas .menu__type-btn {
/* Keep buttons from being shrunk by the flex container */
flex: 0 0 auto;
scroll-snap-align: center;
}
/* Static section: pin the switcher absolutely at the top of the section
so its position stays consistent across layout types. Without this it
sat at .site-section's padding-top in kitchen/bar (multi-column flow,
column-span: all) but at y=0 in cocktails (height:100% site-section
with padding 0), causing a visible jump when switching types. */
#menu-static .menu__type-switcher {
position: absolute;
top: 0;
left: 0;
right: 0;
}
/* === menu_static === */
/* The static (non-touch) menu. Its pinning (display:contents wrapper +
position:sticky full-viewport container) is instance design — see
instances//stylesheets/scroll_layout.css. Core flows normally: a plain
white menu block in the document, scrolled through natively. */
.menu-section--static {
background: var(--color-white);
}
.menu-section--static .site-section {
width: 100%;
box-sizing: border-box;
overflow: hidden;
columns: 3;
column-fill: balance;
column-gap: clamp(0.25rem, 3vw, 3rem);
margin: 0;
max-width: none;
padding: 0 clamp(0.25rem, 1vw, 0.75rem);
padding-top: clamp(1.25rem, 3vw, 2.25rem);
padding-bottom: clamp(1.5rem, 4vw, 3rem);
}
.menu-section--static .menu__static-category {
break-inside: avoid;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: clamp(0.25rem, 1.25vw, 1.25rem);
row-gap: 0;
}
.menu-section--static .menu__static-category-name {
grid-column: 1 / -1;
}
/* Hide the top "Menu" section heading — categories speak for themselves */
.menu-section--static .site-section > .section-heading {
display: none;
}
/* Hide all type-scoped elements by default; the inline JS in
_menu_section.html.erb sets `.is-active` on those whose type matches
the section's data-active-type. */
.menu-section--static .menu__static-group { display: none; }
.menu-section--static .menu__static-group.is-active { display: contents; }
.menu__static-logo {
break-inside: avoid;
text-align: center;
margin-bottom: clamp(0.25rem, 2vw, 2rem);
}
.menu__static-logo--top .menu__static-logo-wordmark {
width: 80%;
height: auto;
margin: 0 auto;
display: block;
}
.menu__static-logo--top .menu__static-logo-cat-top {
width: 55%;
height: auto;
margin: clamp(0.5rem, 2vw, 1.5rem) auto 0;
display: block;
}
.menu__static-menu-end {
break-inside: avoid;
margin-top: 2rem;
}
.menu__static-logo-tag {
display: flex;
align-items: center;
gap: 0.5rem;
border: 1px solid var(--color-burgundy);
margin-bottom: 0.5rem;
}
.menu__static-logo .menu__static-logo-cat {
width: clamp(1rem, 4vw, 4rem);
height: auto;
flex-shrink: 0;
}
.menu__static-logo-info {
font-family: var(--font-serif);
font-size: clamp(0.15rem, 0.55vw, 0.6rem);
font-weight: 100;
color: var(--color-burgundy);
line-height: 1;
letter-spacing: 0;
white-space: pre-line;
text-align: left;
margin: 0;
}
.menu__static-logo-tag-text {
display: flex;
flex-direction: column;
gap: 0.15rem;
flex: 1 1 auto;
min-width: 0;
}
.menu__static-allergens-note {
font-family: var(--font-serif);
font-size: clamp(0.15rem, 0.55vw, 0.6rem);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-burgundy);
line-height: 1;
}
.menu__static-logo-tag--legend {
align-items: stretch;
gap: 0;
padding: 0;
}
.menu__static-logo-tag--legend .menu__static-logo-tag-col {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(0.15rem, 0.6vw, 0.3rem) clamp(0.25rem, 1vw, 1rem);
min-width: 0;
}
.menu__static-logo-tag--legend .menu__static-logo-tag-col + .menu__static-logo-tag-col {
border-left: 1px solid var(--color-burgundy);
}
.menu__static-diet-legend {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(0.2rem, 0.75vw, 0.75rem);
font-family: var(--font-serif);
font-size: clamp(0.15rem, 0.55vw, 0.6rem);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-burgundy);
line-height: 1;
}
.menu__static-diet-legend li {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
}
.menu__static-diet-legend-icon {
width: clamp(0.4rem, 0.9vw, 0.85rem);
height: clamp(0.4rem, 0.9vw, 0.85rem);
display: block;
}
.menu__static-logo > img {
width: 100%;
height: auto;
}
.menu__static-logo-name {
font-family: var(--font-serif);
font-size: clamp(0.8rem, 3.8vw, 3.5rem);
font-weight: 700;
text-transform: uppercase;
color: var(--color-burgundy);
text-align: center;
margin: 0;
}
.menu__static-logo-subtitle {
font-family: var(--font-serif);
font-size: clamp(0.2rem, 1vw, 0.875rem);
font-weight: 700;
color: var(--color-burgundy);
letter-spacing: 0.02em;
}
/* Each category block — aligns to top of its grid cell */
.menu__static-category {
align-self: start;
}
/* Category name: large bold centered uppercase — like WOK / GRILL / OVEN in PDF */
.menu__static-category-name {
font-family: var(--font-serif);
font-size: clamp(0.64rem, 3.04vw, 2.08rem);
font-weight: 700;
text-transform: uppercase;
color: var(--color-burgundy);
text-align: center;
margin: 0;
padding-bottom: clamp(0.1rem, 0.75vw, 0.5rem);
}
/* Dish row */
.menu__static-dish {
padding: clamp(0.02rem, 0.1vw, 0.1rem) 0;
}
.menu__static-dish:last-child {
padding-bottom: clamp(0.1rem, 0.75vw, 0.75rem);
}
/* Name left, price right — both on baseline */
.menu__static-dish-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: clamp(0.1rem, 0.75vw, 0.75rem);
margin-bottom: 0;
}
.menu__static-dish-name {
font-family: var(--font-serif);
font-size: clamp(0.2rem, 1vw, 0.8rem);
font-weight: 700;
color: var(--color-burgundy);
letter-spacing: 0.02em;
flex: 1 1 auto;
min-width: 0;
/* Names are stored natural-case (the DB is the source of truth for casing);
the web menu renders them UPPERCASE by design. The canvas menu does the
same via texture.js (CSS can't restyle canvas-painted text). */
text-transform: uppercase;
}
/* Serving sizes: parenthetical after dish name, slightly muted, same font */
.menu__static-dish-serving-sizes {
font-weight: 400;
opacity: 0.7;
margin-left: 0.15em;
}
/* Diet icons sit between name and price, baseline-aligned */
.menu__static-dish-header .dish-diet-icons {
display: inline-flex;
align-items: center;
gap: 0.15rem;
flex-shrink: 0;
}
.menu__static-dish-header .dish-diet-icons__icon {
width: clamp(0.4rem, 0.9vw, 0.85rem);
height: clamp(0.4rem, 0.9vw, 0.85rem);
display: block;
}
.menu__static-dish-price {
font-family: var(--font-serif);
font-size: clamp(0.2rem, 1vw, 0.875rem);
font-weight: 400;
color: var(--color-burgundy);
white-space: nowrap;
flex-shrink: 0;
}
.menu__static-dish-description {
font-family: var(--font-serif);
font-size: clamp(0.15rem, 0.8vw, 0.75rem);
color: var(--color-burgundy);
line-height: 1.5;
margin: 0;
font-weight: 400;
}
/* === print_card === */
/* The printed card, mirrored on screen. The