holding the address, a , the phone, a and the mail — which spaces the three by line boxes and the address's own wrapped lines by the same amount, so nothing read as a row. The icons are 24x24 Material glyphs authored for this theme, because the platform's own set has a phone but no pin and no envelope. */ .footer-contact { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } /* A fixed first column rather than an inline mark: the address wraps to two lines and its second line has to start under the first, not under the icon. */ .footer-contact li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; color: rgba(255, 253, 247, 0.76); font-size: 15px; line-height: 1.55; } /* Both shapes, because js/svg.js replaces the with an inline after load and the is what is on screen until it does. The takes the row's colour through fill; an cannot be filled, so it is tinted — and the footer is the one band that stays dark in both settings, so one filter serves both. The nudge down is optical: a 16px glyph centred in its own box sits above the x-height of the line beside it. */ .footer-contact .footer-contact-icon, .footer-contact svg.footer-contact-icon { width: 16px; height: 16px; margin-top: 4px; fill: currentColor; opacity: 0.75; } .footer-contact img.footer-contact-icon { filter: brightness(0) invert(1) opacity(0.62); } .footer-contact a { color: inherit; text-decoration: none; transition: color 0.2s ease; } .footer-contact a:hover, .footer-contact a:focus-visible { color: var(--turmeric); } /* ── The social marks, together ─────────────────────────────────────────── They were laid out on a grid — auto-fit 118px tracks in the contact block, three equal columns across the whole footer column — which was right when each one was a word in a pill. They are 40px squares now, so the tracks just pushed them apart: three marks spread over 240px of footer with nothing between them. A flex row instead. Each takes its own width and the gap is the gap. */ .social-row { display: flex; flex-wrap: wrap; gap: 10px; width: auto; } .footer-social { display: flex; gap: 10px; width: auto; } /* ── The dock's marks before js/svg.js catches up ───────────────────────── The design already styles the swapped shape — .quick-dock svg, 17px and fill: currentColor — but the swap happens on load, and until it does the is what is on the plate. An cannot be filled, so it is tinted: brightness(0) flattens the artwork to black and invert lifts it to the near-white the labels are set in. The order plate is the exception in the dark setting — its label is painted #062d17 there, so its mark is left black to match. One rule each, and both stop mattering the moment the inline arrives and takes currentColor. */ .quick-dock a img { display: block; width: 17px; height: 17px; flex: 0 0 auto; object-fit: contain; filter: brightness(0) invert(1); } html[data-theme="dark"] .quick-dock a:nth-child(2) img { filter: brightness(0); } /* ── The order plate: white ink, and a green that can carry it ──────────── Asked for on the cart mark. It could not be white on its own: the mark takes fill: currentColor from the link, and the label beside it is printed by .quick-dock a::after with color: inherit — so mark and word are one colour by construction, and a white cart next to a near-black "Online Bestellen" would read as a mistake rather than as a choice. So the whole plate takes white. Measured on #22cf63, though, white is a contrast ratio of 2.03 — the weakest thing on the rail by a wide margin, against 7.29 for the near-black it replaces, and that is why the design put dark ink here in the first place. The green goes down instead. #0f7a40 is the same hue at a depth white can sit on: 5.4 against the white, which clears the 4.5 a label needs and the 3.0 a 17px mark needs. It is still unmistakably the "order" green next to the teal, the red and the gold. Both rules are restated because the design sets this plate twice — once for the light setting and once inside html[data-theme="dark"]. */ .quick-dock a:nth-child(2), html[data-theme="dark"] .quick-dock a:nth-child(2) { background: #0f7a40; color: #fffdf7; } /* The pre-swap follows: white like every other plate now, so the exception added for this one goes with it. */ html[data-theme="dark"] .quick-dock a:nth-child(2) img, .quick-dock a:nth-child(2) img { filter: brightness(0) invert(1); } /* The gold reservation plate keeps its dark ink in BOTH settings. The design sets `color: #14231f` on it, but html[data-theme="dark"] .quick-dock a paints every plate near-white and outranks that — so on the dark setting the one plate whose background is a pale gold was getting white text. Measured: 1.73 against the 9.1 it has in the light setting, which is the weakest thing on the rail and the reason this plate looked washed out. The mark goes with it: fill is currentColor once js/svg.js has swapped the , and the filter below covers the moment before that. */ html[data-theme="dark"] .quick-dock a:nth-child(4) { color: #14231f; } html[data-theme="dark"] .quick-dock a:nth-child(4) img { filter: brightness(0); } /* ── The reservation plate: white ink, and a gold that can carry it ─────── Asked for. It could not be white on the gold the design uses: measured, #fffdf7 on #f2b84b is a contrast ratio of 1.73 — the weakest thing on the rail — which is exactly why the design put near-black ink on this one plate and why I put it back a moment ago. So the plate goes down in tone rather than the ink going back to black. #9a6412 is the same amber at a depth white sits on: 5.0 against the white, clearing the 4.5 a label needs. It is a deeper, more bronze gold than the turmeric elsewhere — that is the cost of white ink here, and it is the only way to have both. Placed after the nth-child(4) rules above so it wins in both settings; the mark follows the ink because fill is currentColor once js/svg.js has swapped it, and the filter covers the moment before that. */ .quick-dock a:nth-child(4), html[data-theme="dark"] .quick-dock a:nth-child(4) { background: #9a6412; color: #fffdf7; } .quick-dock a:nth-child(4) img, html[data-theme="dark"] .quick-dock a:nth-child(4) img { filter: brightness(0) invert(1); } /* ══ Mobile header: a compact bar and a drawer ════════════════════════════ The bar used to keep all three of its parts on a phone: the logo, then the language and tone switchers on a full-width second row, then the six nav links on a third that scrolled sideways. Three rows of chrome over a menu, and the top third of every screen gone before the first dish. Now: logo left, one button right, and everything else in a panel that slides in from the right. */ /* display: contents so the wrapper is invisible to the topbar's grid — .main-nav and .top-actions stay its own children and the desktop bar is exactly as it was. Only below the breakpoint does the wrapper become a box of its own. */ .topbar-panel { display: contents; } .nav-toggle { display: none; position: relative; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(23, 35, 31, 0.16); background: transparent; color: inherit; cursor: pointer; } html[data-theme="dark"] .nav-toggle { border-color: rgba(255, 245, 229, 0.18); } /* Three bars from one element: the span is the middle one and its two pseudo-elements are the others. They fold into a cross when the drawer is open, so the button says what it will do next. */ .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { position: absolute; left: 50%; width: 20px; height: 2px; background: currentColor; transition: transform 0.26s ease, opacity 0.18s ease; } .nav-toggle span { top: 50%; transform: translate(-50%, -50%); } .nav-toggle span::before, .nav-toggle span::after { content: ""; left: 0; } .nav-toggle span::before { transform: translateY(-6px); } .nav-toggle span::after { transform: translateY(6px); } .topbar.is-open .nav-toggle span { background: transparent; } .topbar.is-open .nav-toggle span::before { transform: rotate(45deg); } .topbar.is-open .nav-toggle span::after { transform: rotate(-45deg); } .nav-scrim { display: none; } @media (max-width: 760px) { /* Two items now — the logo and the button — so the bar is one row and as short as its tallest child. transform: none is not cosmetic. The bar is centred with left: 50% and a -50% translate, and a transformed element becomes the containing block for position: fixed inside it — so the drawer below was being pinned to the BAR rather than to the window: 42px tall, 11px from the top, sitting just off its right edge. Pinned with left/right instead, the bar looks the same and the drawer gets the viewport back. */ .topbar { left: 10px; right: 10px; width: auto; transform: none; /* backdrop-filter has to go with the transform, and for the same reason: like filter, it makes the element a containing block for position: fixed descendants. With it left in, the drawer measured 320x102 pinned 11px from the top — the bar's own box — instead of the full height of the window. The bar loses its blur on a phone and takes a more opaque plate below to make up for it. */ backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 253, 247, 0.96); grid-template-columns: auto auto; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 10px; } .brand-logo { height: 32px; max-width: 140px; } .nav-toggle { display: block; } /* The drawer. position: fixed rather than absolute — it is pinned to the window, not to a bar that is itself 10px from the top, and it has to cover the full height whatever the bar does. */ .topbar-panel { display: block; position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(320px, 84vw); padding: 74px 22px 28px; overflow-y: auto; overscroll-behavior: contain; background: var(--rice); box-shadow: -18px 0 48px rgba(23, 35, 31, 0.22); transform: translateX(102%); visibility: hidden; transition: transform 0.32s cubic-bezier(.2, .8, .2, 1), visibility 0s linear 0.32s; } /* visibility, not display: a display switch cannot be transitioned, and without it the panel would still take clicks while it sits off-screen. */ .topbar.is-open .topbar-panel { transform: translateX(0); visibility: visible; transition: transform 0.32s cubic-bezier(.2, .8, .2, 1), visibility 0s; } html[data-theme="dark"] .topbar-panel { background: #12211c; } /* The links stack and take the panel's width, so the whole row is the target rather than the word in it. */ .topbar-panel .main-nav { display: grid; gap: 2px; width: 100%; } .topbar-panel .main-nav a { display: block; padding: 13px 2px; border-bottom: 1px solid rgba(23, 35, 31, 0.1); font-size: 17px; white-space: normal; } html[data-theme="dark"] .topbar-panel .main-nav a { border-bottom-color: rgba(255, 245, 229, 0.1); } /* The order link keeps being the loud one, but as a full-width block: in the bar it is a chip beside other words, and here there are no other words on its line to be a chip against. */ .topbar-panel .main-nav a.nav-shop { margin-top: 10px; border-bottom: 0; text-align: center; } /* The switchers used to live in here. They are back in the bar — nothing in them navigates, and putting a language toggle behind a menu button means opening the drawer to change the language and opening it again to see what changed. Their drawer rules are gone with them. */ /* pointer-events rather than the hidden attribute or display: none — the plate has to fade, and neither of those can be transitioned. Closed it is invisible AND untouchable, so it never eats a tap meant for the page. */ .nav-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(9, 18, 15, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.32s ease; } .topbar.is-open .nav-scrim { opacity: 1; pointer-events: auto; } } /* The dark bar's plate, matched to the light one above: same reason, same breakpoint — no blur on a phone, so the colour carries the whole thing. */ @media (max-width: 760px) { html[data-theme="dark"] .topbar { background: rgba(16, 23, 20, 0.96); } } /* ── The drawer's links: left, and the full width of the panel ──────────── .main-nav is a centred flex row in the bar, and at 1060px it becomes a left-packed scrolling one. Neither is what a drawer wants: the links were sitting in a column as wide as the longest word, centred in the panel, so every one of them started a hundred pixels in from the edge they should be aligned to. Restated rather than inherited — the whole point is that this element is a different thing here than it is in the bar. */ @media (max-width: 760px) { .topbar-panel .main-nav { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: stretch; gap: 2px; width: 100%; padding-top: 0; overflow: visible; text-align: left; } .topbar-panel .main-nav a { width: 100%; padding: 13px 0; text-align: left; } /* The order link keeps the design's angled chip, and the chip now runs the width of the panel. Centred inside it, because a shape that wide with the word at one end reads as a mis-set button rather than a wide one. */ .topbar-panel .main-nav a.nav-shop { margin-top: 12px; padding: 13px 14px; text-align: center; } /* Two toggles in the bar, hard against the button. The tone switcher keeps its words: they are what tell a reader which of the two is on, and the two suns-and-moons alone do not. */ .topbar { grid-template-columns: auto minmax(0, 1fr) auto; } .top-actions { grid-column: auto; order: 0; display: flex; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; padding-top: 0; overflow: visible; } } /* Below 520px the bar has to give something up, and it is the two words on the tone toggle rather than either control: the sun and the moon still say which is which once the pair is read as a pair, and losing a whole switcher would cost a reader something they cannot get back without the drawer. */ @media (max-width: 520px) { .top-actions .tone-option { font-size: 0; gap: 0; padding-left: 9px; padding-right: 9px; } .top-actions .tone-option svg { margin: 0; } .top-actions .language-option { padding-left: 7px; padding-right: 7px; } } /* ── The mobile bar: flex, not grid ─────────────────────────────────────── Three things in a row, and grid kept finding a fourth. The drawer and its scrim are children of the bar and position: fixed, so they are out of flow — but the grid still handed them a static position, and whatever the exact interaction, the measured result was a phantom second row of 22px and a bar 90px tall instead of 56. Explicit grid-row: 1 on all five did not clear it. A flex row cannot produce a row nobody asked for. The three in-flow items space themselves across it; the two fixed ones are ignored, which is what they should have been all along. */ @media (max-width: 760px) { .topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .topbar > .brand { flex: 0 1 auto; min-width: 0; } /* The switchers take what is left between the logo and the button, and sit against the button rather than floating in the middle of it. */ /* order, because the DOM order is brand, button, drawer, switchers — the button has to be next to the panel it controls in the markup for aria-controls to read naturally, and last on screen. */ .topbar > .top-actions { order: 2; flex: 0 1 auto; min-width: 0; justify-content: flex-end; margin-left: auto; } .topbar > .nav-toggle { order: 3; flex: 0 0 auto; } } /* ── The card watermark: smaller, and against the left edge ─────────────── clamp(24px, 4vw, 44px) anchored to the right corner put the restaurant's name across the middle of every photoless card at nearly the size of the dish name, and on a phone the 4vw kept it large while the card got small — so it ran under the price, the ⓘ and the Bestellen chip all at once. It is a watermark: something the eye should register as texture and never stop on. Left, small, and out of the way of the row of controls at the bottom right, which is the one part of the card that has to stay readable. max-width keeps a long name from running under those controls anyway, and the card's own overflow: hidden takes what is left. */ .dish-card.has-no-photo::after { right: auto; left: 16px; bottom: 12px; max-width: calc(100% - 150px); font-size: clamp(15px, 2.2vw, 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── The legend as a printed menu sets it: "A. Glutenhaltig" ────────────── The code was a bordered chip, which is the right shape where a code has to be picked out of a running line — on a dish, among the name and the price. In a list of twenty-nine, one to a line, the boxes became the thing the eye counted and the words became what sat next to them. A code and a full stop instead, in the same gold, with the names still on a shared left edge: the first column is auto-width, so it grows to fit "15." and every name below starts at the same place whatever its code. */ /* A FIXED first column, not auto. Each is its own grid, so an auto track is sized by that row's own code — "A." and "15." then start their names in different places and the list loses the straight left edge that makes it scannable. Measured before the fix: names began at 401, 404, 405 and 406. 28px is what "15." needs at this size. */ .menu-legend-col li { grid-template-columns: 28px minmax(0, 1fr); gap: 6px; align-items: baseline; } .legend-code { display: inline; min-width: 0; height: auto; padding: 0; border: 0; background: none; font-size: 16px; letter-spacing: 0.02em; text-transform: none; } .legend-code::after { content: "."; } /* ── The legend as running text, not a table ────────────────────────────── Twenty-nine entries in two columns, one to a line, made a block as tall as the menu above it — a reader looking up a single letter had to scan a fourteen-row column to find it, and everyone else scrolled past a screenful of list. Set as prose instead: each group is one full-width paragraph, the entries separated by commas, the codes picked out in gold so a letter can still be found at a glance. Same twenty-nine facts in four lines instead of fifteen. The two groups stack rather than sitting side by side: a paragraph that wraps wants the width, and a 340px column would put three words on a line. */ .menu-legend-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; } .menu-legend-col ul { color: rgba(255, 253, 247, 0.76); font-size: 16px; line-height: 1.75; } /* display: inline, so the items flow into one another and wrap as text does. The grid the rows used to be is gone with it — a grid item cannot be part of a line. */ .menu-legend-col li { display: inline; padding: 0; font-size: inherit; line-height: inherit; } /* The separator is drawn rather than typed: a comma in the markup would be a comma after the last entry too, and the loop that prints these has no idea which one that is. */ .menu-legend-col li:not(:last-child)::after { content: ", "; } /* The space belongs to the full stop, not to the markup: index.tpl prints AGlutenhaltig with nothing between them, so without it the code and the word would run together. */ .legend-code::after { content: ". "; } .legend-code { white-space: nowrap; } /* ── The tone toggle, once js/saigon.js has moved it into the drawer ────── It is a direct child of #topbarPanel there, not of .top-actions, so the drawer's own rules have to dress it: full width, under a rule that separates it from the links, and with its two halves sharing the row so neither reads as the default. The language switcher stays in the bar. It is one tap and its state is the two letters themselves; the tone toggle is the one that wanted the room. */ @media (max-width: 760px) { #topbarPanel > .tone-switcher { display: flex; width: 100%; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(23, 35, 31, 0.12); } html[data-theme="dark"] #topbarPanel > .tone-switcher { border-top-color: rgba(255, 245, 229, 0.12); } #topbarPanel > .tone-switcher .tone-option { flex: 1 1 0; justify-content: center; /* The words come back here. They were dropped in the bar because the bar had no room for them; the drawer does, and "Light" / "Dark" is what tells a reader which of the two they are on. */ font-size: 15px; gap: 7px; padding: 11px 10px; } #topbarPanel > .tone-switcher .tone-option svg { margin: 0; } } /* ── The search toggle: white, and big enough to read as a lens ─────────── It was color: var(--rice) at 22px. --rice swaps with --ink between the two settings, so on the dark one it resolved to #18241f — a near-black glyph on the menu section's dark jade plate. Measured: rgb(24,36,31) in dark against rgb(255,253,247) in light, from one rule, because the token flips and the plate under it does not. Fixed white for both, and up to 30px: ⌕ is drawn small inside its em box, so it reads a size or two below whatever it is set at — at 22px in a 54px button it was a mark you had to look for. */ .search-toggle { color: #fffdf7; font-size: 30px; line-height: 1; } .search-toggle:hover, .search-toggle:focus-visible { color: var(--turmeric); } /* ── The allergen panel is a desktop thing ──────────────────────────────── It is the design's reader: a plate beside the grid that shows whichever dish was last tapped, with its allergens spelled out. Beside the grid it costs nothing, because the column would otherwise be empty. Below 900px there is no beside. The showcase has already collapsed to one column, so the panel becomes a full-width block sitting between the category buttons and the first dish — a screenful of one dish's details before a reader has chosen a dish. And it is not carrying anything they cannot get: every card prints its own allergen codes, and tapping ⓘ opens the dialog with the names in full. display: none rather than removing it from the markup: js/saigon.js writes into it on every card selection, and a null there would need a guard at each of those points for no gain. Writing into a hidden element costs nothing. */ @media (max-width: 900px) { .menu-orbit { display: none; } }