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 tone toggle in the bar drops its two words and keeps its two icons: the logo, the toggle and the menu button share one short row, and a sun and a moon read as a pair without being labelled. The language switcher is not addressed here at all any more — below 760px it is in the drawer, and the rule that dresses it there is the one that applies. */ @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; } } /* ── 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 kitchen's marks: Ribbon / Status ───────────────────────────────── qr_menu.dish_status, printed by includes/templates/saigon.tlp.php into the dish name's own line. Four states, and a dish may carry more than one. The four faces are kuro's, to the hex. They are the platform's marks rather than this design's ornament — the same dish shows the same green BELIEBT whichever theme the restaurant is running, and a guest who learned the mark on one menu should not have to learn it again on another. What is this theme's is the shape: the design cuts its chips (.order-link, .quick-dock a) rather than rounding them, and sets their labels in the condensed face, so these are cut and set the same way. Kuro's skew is not borrowed — nothing else on a saigon card leans. The mark is two plates rather than one, and that is where its depth comes from: the lower plate is the same cut shape in a darker tone, offset down and to the right, and the upper one takes a hairline of light along the edge facing the source. Offset plus edge light, no blur and no box-shadow — at 12px a soft shadow reads as a smudge. The construction is kuro's, borrowed for the same reason the four faces are: a mark a guest learned on one of this platform's menus should not sit flat on another. Both plates are pseudo-elements rather than the element's own background: the clip has to take the plates and leave the type alone, and an element cannot clip its background without clipping its own text with it. The glyph and the word are lifted above both. */ .dish-badges { display: inline-flex; flex-wrap: wrap; /* Room for the lift: a mark's lower plate reaches --badge-lift to the right of its own box, and at the old 5px it touched the mark beside it. */ gap: 8px; margin-left: 8px; vertical-align: middle; } .dish-badge { --badge-face: #555; --badge-deep: #333; --badge-ink: #fffdf7; --badge-lift: 3px; position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 8px; color: var(--badge-ink); font-family: var(--condensed); font-size: 12px; font-weight: 500; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } /* The lower plate. */ .dish-badge::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--badge-deep); clip-path: polygon(5px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); transform: translate(var(--badge-lift), var(--badge-lift)); } /* The upper plate, with the light along the edge that faces the source. Kuro puts that light in a border-top and border-left, which it can because its mark is a rounded rectangle. This one is cut: its left edge is the diagonal of the clip path, and a border-left would be clipped away along almost its whole length. So the light is painted into the background instead — a hard-stopped gradient, 1px of white over 1px of half that, which follows the top edge and is cut by the polygon exactly where the plate itself is. */ .dish-badge::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0 1px, rgba(255, 255, 255, 0.16) 1px 2px, transparent 2px), var(--badge-face); clip-path: polygon(5px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); } /* The glyph and the word ride over both plates. */ .dish-badge > span { position: relative; z-index: 2; } .dish-badge-icon { display: inline-grid; width: 11px; place-items: center; font-size: 11px; line-height: 1; } /* ── The four states ────────────────────────────────────────────────────── Each face carries its own ink rather than a shared white, because two of them are not dark enough for one: #e8a221 and white is 2.1:1, and CHEF-TIPP is 12px tracked caps. The amber and the green take the design's own near- black; the red and the blue keep the light label they can hold. */ .dish-badge--beliebt { --badge-face: #1fa363; --badge-deep: #10613a; --badge-ink: #08130f; } .dish-badge--angebot { --badge-face: #f4643a; --badge-deep: #b03516; --badge-ink: #fffdf7; } .dish-badge--neu { --badge-face: #3b82f6; --badge-deep: #1d4ed8; --badge-ink: #fffdf7; } .dish-badge--chef-tipp { --badge-face: #e8a221; --badge-deep: #96620b; --badge-ink: #08130f; } /* The name is a 25px condensed line and the marks are 12px boxes sitting on it, so the line box grows and the title's own leading no longer describes it. The lower plate then hangs --badge-lift below that box and is absolutely placed, so it takes no height of its own and would land on the description under it. Only a card that carries a mark pays for either. */ .dish-title:has(.dish-badges) { line-height: 1.25; padding-bottom: 4px; } @media (max-width: 640px) { .dish-badges { gap: 6px; } .dish-badge { --badge-lift: 2px; padding: 1px 7px 1px 6px; font-size: 11px; letter-spacing: 0.06em; } .dish-badge-icon { width: 10px; font-size: 10px; } } /* ── 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. The desktop end of the clamp came down from 24px. On a wide screen the vw term is out of play and the cap is the whole rule, so every photoless card carried the restaurant's name at 24px against a 25px dish name — two lines of nearly the same size in the same card, and the eye went to the wrong one. 17px puts it a clear step below the name it sits under and still reads as the texture it is meant to be. The floor is untouched: the phone was already at 15px and is not what changed. */ .dish-card.has-no-photo::after { right: auto; left: 16px; bottom: 12px; max-width: calc(100% - 150px); font-size: clamp(15px, 1.6vw, 17px); 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 language switcher, 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 options sharing the row so none of them reads as the default. The tone toggle stays in the bar — it changes what the reader is looking at, and a control for that should not be behind a menu button. */ @media (max-width: 760px) { #topbarPanel > .language-switcher { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; /* The bar caps this at 260px so a restaurant with eighteen packs cannot push the rest of the row out. The drawer has no row to protect. */ max-width: none; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(23, 35, 31, 0.12); } html[data-theme="dark"] #topbarPanel > .language-switcher { border-top-color: rgba(255, 245, 229, 0.12); } /* A restaurant can have two language packs or eighteen, so the options take equal shares of the row down to a floor and wrap past it, rather than each being sized to its own two letters. */ #topbarPanel > .language-switcher .language-option { flex: 1 1 60px; justify-content: center; font-size: 15px; /* min-height rather than more padding: the button's own box came out 34px tall here, and a two-letter target that small is one a thumb misses. 44px is the size a finger is measured at. */ min-height: 44px; padding: 11px 10px; } } /* ── 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; } } /* ── Zusatzstoffe ───────────────────────────────────────────────────────── The second coded list a German menu has to declare. On the card it is part of the one superscript run (.dish-codes) — the reader has the legend under the grid to tell a 1 from an A, and two notations in six characters of type would be noise. In the side panel, where each code carries its name, the two groups are headed and the additive chip is drawn quieter: it is the lesser of the two declarations. */ .chip--additive { border-style: dotted; color: rgba(255, 253, 247, 0.68); } /* The heading over each group in the side panel. flex-basis: 100% because the panel's chip row is a wrapping flex line — without it "Allergene" would sit on the same line as the chips it names and read as one of them. */ .selected-allergens-label { flex: 0 0 100%; margin-top: 6px; color: rgba(255, 253, 247, 0.5); font-family: var(--condensed); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; } .selected-allergens-label:first-child { margin-top: 0; }