/* ============================================================ DIE SCHRIFT DES HAUSES — selbst ausgeliefert, vom eigenen Host. ⚠️ WARUM DAS HIER OBEN STEHT UND NICHT IN site.css: `tokens.css` ist laut seinem eigenen Kopf die EINZIGE Quelle der visuellen Sprache. Eine Schriftdeklaration in der Regeldatei wäre die erste Ausnahme davon. ⛔ `format("woff2")` UND NICHT `format("woff2")` — HIER STAND DAS FALSCHE, UND DER KOPF HAT ES VERTEIDIGT. Der alte Satz stimmte in seiner Beobachtung und zog den falschen Schluss: die Dateien SIND echte Variable Fonts (`fvar` im Tabellenverzeichnis nachgesehen), aber das ist nicht die Frage. Die Frage ist, ob der Browser die FORMATANGABE kennt — und `woff2-variations` war ein Vorschlag, der nie in die Spezifikation kam. Wer sie nicht kennt, verwirft die GANZE `@font-face`-Regel: still, ohne Konsolenmeldung, und die Seite fällt auf Georgia zurück. `app/Site/Theme.php:89-98` schreibt genau das seit langem auf und liefert für die Gastseite korrekt `format('woff2')` aus. Diese Datei und `panel-ui.css` trugen weiter den alten String; der Test dafür (`ThemeMarktTest:117-127`) liest nur die Ausgabe der Enum, also lagen beide ausserhalb der Prüfung. Zwei widersprechende Fassungen desselben Wissens in einem Repository, und die falsche stand in der Datei mit der Begründung. ⚠️ `font-weight: 100 900` BLEIBT: die Achsen stehen in der Datei und werden von dort gelesen, nicht hier angekündigt. ⚠️ `font-display: swap`: der Gast liest die Karte sofort in der Systemschrift und bekommt die richtige nachgereicht. Ein unsichtbarer Text, der auf eine Schrift wartet, ist auf einem Telefon im Funkloch eine leere Seite. ============================================================ */ @font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ============================================================ Design tokens — THE single source of the visual language. Change the look of the whole site by editing THIS FILE ONLY. The template ships with a deliberately neutral, cuisine-free palette: warm paper · deep slate-teal · muted brass. It reads as "good restaurant" without claiming a country, so it works for Greek, Turkish, Italian or German kitchens until you give it a face. HOW TO REBRAND (2 minutes): 1. change the 10 --c-* raw values below 2. set `brand_color` in data/seed_settings.php to the same value as --c-accent (it feeds , which CSS cannot reach) Nothing else in the codebase carries a colour. ============================================================ */ :root { /* ---- raw palette (edit these) ---- */ --c-paper: #F0EBE3; /* page background — warm paper */ --c-ivory: #FBF9F5; /* cards / raised surfaces */ --c-ink: #22262B; /* body text */ --c-accent: #2F4858; /* primary: buttons, links-on-accent, brand */ --c-accent-2:#22333F; /* primary, pressed/darker */ --c-brass: #9A7B4F; /* secondary accent: rules, ornaments, eyebrows */ --c-teal: #2C6E6B; /* links */ --c-stone: #D4CCC1; /* borders */ --c-stone-2:#E6DFD6; /* soft borders / dividers */ --c-muted: #6A6660; /* secondary text */ /* RAW, like every other `--c-` value, so the night palette can lighten them instead of replacing them. They used to be defined here under their SEMANTIC names and overridden per theme under the same names — which left the dark block no way to derive from them (a custom property cannot reference itself) and therefore no choice but to hardcode. */ --c-enamel: #2F6B4F; /* "yes": vegan/vegetarian marks, and OPEN TODAY in the hours list */ --c-wine: #7A2E2E; /* the tint on placeholder tiles, mixed with --brass */ /* THESE FOUR WERE READ AND NEVER DEFINED — here and in the engine this was ported from. Measured in a browser: the vegan badge rendered with a transparent background and body colour, the placeholder monogram lost its tint, and `.hours-list li.hours-open` — the row telling a guest the restaurant is open RIGHT NOW — had no highlight at all. `color-mix()` with an undefined custom property resolves to nothing, and no assertion that reads HTML can see it. A theme overrides all of these per restaurant; these are the values a page falls back to before brand.css arrives. */ /* ---- semantic (leave alone) ---- */ --bg: var(--c-paper); --surface: var(--c-ivory); --text: var(--c-ink); --muted: var(--c-muted); --line: var(--c-stone); --line-soft: var(--c-stone-2); --accent: var(--c-accent); --accent-strong: var(--c-accent-2); --gold: var(--c-brass); /* historical name: the ornament/eyebrow colour */ --link: var(--c-teal); --enamel: var(--c-enamel); --wine: var(--c-wine); /* WHAT GOES ON TOP OF THE ACCENT. `.btn--primary` and `.announce` pinned `color:#fff`, which is right on a dark brand colour and wrong the moment the palette lightens — in night mode the accent becomes a pale blue and white-on-pale measured 2.56:1. */ --on-accent: #FFFFFF; --c-text: var(--c-ink); /* legacy alias still read by the menu legend */ --c-line: var(--c-stone); /* legacy alias still read by the menu legend */ /* THE SAME GOLD, DARK ENOUGH TO BE READ. `--gold` is 3.33:1 on the paper — correct for a rule, an underline or a border, where 3:1 is the bar, and NOT correct for text. It was being used for both. The accent word («Trattoria», «Ταβέρνα») is the one element the design system calls what distinguishes this restaurant from every other, and it was set at 11.8px in a colour a guest with ordinary eyes in ordinary daylight cannot comfortably read. It is MIXED FROM THE THEME'S OWN BRASS rather than written as a hex, because `--gold` is already per-theme (`--c-brass` differs on Abend and Tafel) and a fixed literal here would have made the accent word the one element on the page that stops following the theme. Measured after the change: 5.22:1 on Abend paper, 4.60:1 on Tafel paper. */ /* * MIXED IN OKLAB, NOT sRGB. An sRGB mix travels through the wrong middle: a brass and a * near-black meet in a muddy olive that is neither, and the darker the target the worse it * gets. Oklab is perceptually even, so the midpoint looks like the midpoint. Same two * colours, a cleaner line between them — and the fallback for an engine that does not know * the space is to ignore the declaration, so the raw brass shows through rather than nothing. */ --gold-ink: color-mix(in oklab, var(--c-brass) 72%, #1B1409); /* ---- text and scrims over photos ---- Used by the photo heroes, the atmosphere band and the footer so that those blocks follow the palette instead of carrying their own hardcoded hex. */ --dark-plate: #1B1F24; /* fallback behind photo heroes */ --on-dark: #FBF9F5; --on-dark-soft: rgba(251, 249, 245, .93); --on-dark-accent: #E3C89B; /* eyebrows on dark */ --scrim-90: rgba(20, 24, 28, .90); --scrim-86: rgba(20, 24, 28, .86); --scrim-74: rgba(20, 24, 28, .74); --scrim-64: rgba(20, 24, 28, .64); --scrim-42: rgba(20, 24, 28, .42); --scrim-24: rgba(20, 24, 28, .24); --scrim-22: rgba(20, 24, 28, .22); --scrim-08: rgba(20, 24, 28, .08); --scrim-04: rgba(20, 24, 28, .04); /* ---- footer (dark block) ---- */ --footer-bg: #191D21; --footer-text: #E7E3DC; --footer-muted: #B8B2A9; --footer-dim: #97918A; --footer-open: #8FC79E; /* "open on holidays" highlight */ /* ---- misc surfaces ---- */ --plate: #F7F2E9; /* logo plate behind the brand mark */ /* ---- type ---- ⛔ HIER STAND «System stacks only», UND DIE BEGRÜNDUNG WAR RICHTIG UND DIE FOLGERUNG FALSCH. Der Satz lautete: keine Webfont-Anfrage, keine Google Fonts, DSGVO-sicher. Das Problem an Google Fonts ist der DRITTE, der die IP des Gastes zu sehen bekommt — nicht die Tatsache, dass es eine Schrift ist. Eine Datei vom EIGENEN Host wirft niemanden ins Ausland; sie ist derselbe Abruf wie das Foto darüber. Was die Folgerung gekostet hat: die Seite, die das Restaurant VERKAUFT, sah auf jedem Rechner anders aus. Auf einem Mac Iowan Old Style, auf Windows Palatino, sonst Georgia — drei verschiedene Häuser, und keines davon hatte jemand entworfen. ⛔ UND DIE SCHRIFTEN LAGEN SEIT MONATEN DANEBEN. `public/assets/fonts/` enthält genau die Dateien, die dieser Kommentar sich wünscht, und keine Regel hat sie je angefordert. DIESELBE PAARUNG WIE IM PANEL, und das ist der ganze Punkt: Fraunces auf den Überschriften, Archivo im Text. Wer im Panel arbeitet und dann auf die eigene Seite schaut, soll ein Produkt sehen und nicht zwei. Die Systemstapel bleiben als Rückfall stehen — fällt eine Datei aus, steht die Seite, sie steht nur anders. */ --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* ---- metrics ---- */ --wrap: 1080px; --wrap-narrow: 720px; /* ============================================================ THE 2026 LAYER — a scale, a shape language, and a motion language. WHAT WAS HERE BEFORE: a colour system and nothing else. Measured across site.css there were 39 distinct pixel values in padding/margin/gap and 32 discrete font sizes, twelve of them inside a single three-pixel band (.8, .82, .84, .85, .86, .88, .9, .92, .93, .95, .96, .98rem). Nothing distinguished those twelve; they were twelve independent decisions taken on twelve different afternoons. That is the difference between a careful stylesheet and a design system, and it is what makes the twentieth restaurant cheap. FLUID, NOT STEPPED. Every step below is a clamp, so the page breathes between 360px and 1440px instead of jumping at four breakpoints. This is the current way and it is also the cheap way: one token instead of a token plus three media queries. ============================================================ */ /* Space — a 1.5 ratio, fluid. `--s-4` is the paragraph rhythm, `--s-7` the band padding. */ --s-1: clamp(4px, .4vw, 6px); --s-2: clamp(8px, .7vw, 10px); --s-3: clamp(12px, 1vw, 14px); --s-4: clamp(16px, 1.4vw, 20px); --s-5: clamp(22px, 2vw, 28px); --s-6: clamp(30px, 3vw, 40px); --s-7: clamp(40px, 5vw, 64px); --s-8: clamp(56px, 7vw, 96px); /* Type — a 1.25 ratio at the small end, opening to 1.33 for display sizes. */ --fs-0: .82rem; --fs-1: .92rem; --fs-2: 1rem; --fs-3: 1.14rem; --fs-4: clamp(1.25rem, 1.6vw, 1.42rem); --fs-5: clamp(1.5rem, 2.6vw, 1.9rem); --fs-6: clamp(1.9rem, 4vw, 2.6rem); --fs-7: clamp(2.4rem, 5.4vw, 3.8rem); /* * SHAPE. `999px` was on sixteen selectors — buttons, badges, chips, the status pill, the * social rings, the WhatsApp button. The fully-rounded pill is the friendly-SaaS vocabulary * of 2019; premium hospitality work in 2026 is squarer, and the difference between a site * that looks bought and one that looks made is mostly this. * * The pill SURVIVES where the shape carries meaning — a tag, a filter chip, a state badge * read as pills because that is what a pill is for. It leaves the buttons. */ --r-btn: 8px; --r-tag: 999px; /* * MOTION. One duration was used for everything. Two now, and the slow one is only for * things that move a long way; a 280ms colour change feels sluggish and a 280ms panel feels * hurried. The curve is unchanged — it was already right. */ --t-fast: .16s cubic-bezier(.22, .61, .36, 1); /* * ⚠️ EINE DRITTE DAUER, UND NUR EINE. `--t-fast` ist Rückmeldung (ein Knopf antwortet), * `--t` ist Übergang (etwas wechselt den Zustand). Was hier fehlte, ist das ANKOMMEN: * ein Abschnitt, der beim Hereinscrollen erscheint, braucht länger als ein Hover, sonst * wirkt er nicht ruhig, sondern nervös. Die Kurve läuft spät aus (0.44 → 1), damit die * Bewegung am Ende weich steht statt zu stoppen. */ --t-reveal: .58s cubic-bezier(.16, .84, .44, 1); /* * RUNDUNG — EINE LEITER STATT DREIER EINZELFÄLLE. * * ⛔ `--r-md` WURDE BENUTZT UND WAR NIE DEFINIERT. `site.css` Zeile 1327 setzt * `border-radius: var(--r-md)` auf die «wann»-Zeile der Bestellseite. Eine ungültige * `var()` macht die Eigenschaft beim Rechnen ungültig, also fällt `border-radius` auf * seinen Anfangswert zurück: NULL. Das Band mit den zwei Abholfeldern stand mit scharfen * Ecken zwischen lauter gerundeten Karten, und keine Zeile im Stylesheet sagte das — * dasselbe stille Muster wie bei `--wine` und `--enamel`, die genauso gelesen und nie * gesetzt wurden (siehe der Kommentar weiter oben). * * ⚠️ GEMESSEN, NICHT GERATEN: `grep -o 'var(--[a-z0-9-]*' site.css` gegen die hier und in * site.css definierten Namen gehalten liefert genau drei Unbekannte — `--card`, * `--r-md` und `--hero-photo`. Die letzte ist Absicht (das Layout schreibt sie als * Style-Attribut je Restaurant), die beiden anderen waren Defekte. * * ⚠️ WARUM FÜNF STUFEN UND NICHT DREI. Im Blatt standen ausserdem 6px (`.codes`), 11px * (`.orderline__foto`), 12px (`.dishcard__photo`) und 13px (`.mdish__photo`) als rohe * Zahlen — vier Entscheidungen an vier Nachmittagen, die alle dasselbe meinen. Die * Leiter deckt sie ab; die alten Regeln werden hier NICHT umgeschrieben (das wäre eine * optische Änderung an zwanzig laufenden Websites für nichts), aber jede neue Regel * nimmt eine Sprosse statt einer neuen Zahl. */ --r-xs: 6px; --r-sm: 10px; --r-md: 13px; --r: 16px; --r-xl: 22px; /* * SCHATTEN — DIESELBE LEITER, DAMIT «HÖHER» EINE BEDEUTUNG HAT. * * Zwei Stufen reichten für eine Seite mit Karten auf Papier. Ein Laden hat mehr Ebenen: * die Karte liegt auf dem Grund, der Bildstreifen liegt auf der Karte, die klebende Leiste * liegt über allem. Ohne Zwischenstufe wird das entweder flach (alles `--shadow-sm`) oder * schwer (alles `--shadow`), und beides liest sich wie ein Versehen. * * ⚠️ ALLE VIER AUS DERSELBEN TINTE (`--c-ink` als rgba), nur Weite und Deckkraft wachsen. * Ein Schatten, der die Farbe wechselt, ist kein Schatten mehr, sondern ein Leuchten. */ --shadow-xs: 0 1px 2px rgba(34, 38, 43, .06); --shadow-sm: 0 3px 14px rgba(34, 38, 43, .07); --shadow-md: 0 8px 26px rgba(34, 38, 43, .09); --shadow: 0 12px 44px rgba(34, 38, 43, .10); --shadow-xl: 0 24px 70px rgba(34, 38, 43, .16); --t: .28s cubic-bezier(.22, .61, .36, 1); } /* Dark mode is opt-in and page-scoped: it applies ONLY when data-theme="dark" is set explicitly (which, per the layout, happens only on the Speisekarte page). It does NOT follow the OS colour scheme, so every other page always stays in the light palette. */ :root[data-theme="dark"] { /* The ground and the ink are the platform's, and rightly so: a night palette has to be legible before it is characterful, and no restaurant should be able to choose an unreadable background. */ --bg: #14181C; --surface: #1D2227; --text: #E8E4DD; --muted: #A9A49C; --line: #333A41; --line-soft: #262C32; --plate: #232A31; --c-text: #E8E4DD; --c-line: #333A41; /* * BUT THE COLOURS STAY THE RESTAURANT'S. * * These five were hardcoded — one blue, one gold, one teal, one green, one clay, the same * for every customer on the platform. And this palette is the DEFAULT on the Speisekarte, * which is the page a guest reaches from the QR code on the table. So the one page most * likely to be seen on a phone in a restaurant was the one page where that restaurant * looked exactly like every other restaurant we host. * * Mixed rather than replaced: the theme's own brass and the restaurant's own accent, * lightened enough to carry on a dark ground. `--c-accent` is the per-restaurant knob * written by `brandCss()`, so this follows a colour change with no deploy. */ --accent: color-mix(in oklab, var(--c-accent) 42%, #E6F0F6); --accent-strong: color-mix(in oklab, var(--c-accent-2) 38%, #E9F2F7); --gold: color-mix(in oklab, var(--c-brass) 58%, #F5E6C6); --gold-ink: color-mix(in oklab, var(--c-brass) 52%, #F8ECD6); --link: color-mix(in oklab, var(--c-teal) 46%, #DEF4F1); --enamel: color-mix(in oklab, var(--c-enamel) 44%, #CDEBDA); --wine: color-mix(in oklab, var(--c-wine) 52%, #F0CFC6); /* Light ink on a light accent — the pair that was 2.56:1 before this existed. */ --on-accent: #12161A; /* * UND DIE SCHATTEN, WEIL EIN SCHATTEN AUF SCHWARZ KEINER IST. * * Die Tagesfassung ist `rgba(34, 38, 43, …)` — die Tinte des Textes, sehr dünn. Auf dem * Nachtgrund #14181C liegt sie fast auf demselben Wert wie der Untergrund: die Karte * verliert ihre Kante, und was am Tag «liegt auf» heisst, heisst nachts gar nichts. Also * echtes Schwarz und kräftiger — dieselbe Leiter, dieselben Weiten, nur die Deckkraft * verdoppelt. Die Rundungen bleiben, wie sie sind: Geometrie hat keine Tageszeit. */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, .30); --shadow-sm: 0 3px 14px rgba(0, 0, 0, .34); --shadow-md: 0 8px 26px rgba(0, 0, 0, .40); --shadow: 0 12px 44px rgba(0, 0, 0, .46); --shadow-xl: 0 24px 70px rgba(0, 0, 0, .56); }