has no default browser margin, and one here would fight .compact/.spaced on specificity ties depending on source order.) */ .menu-item { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; } /* Universal item rhythm: shared by every page instead of being tuned per page. .compact = gap after a plain single-line item; .spaced = gap before an item that follows a description (or another spaced item). */ .compact { margin-bottom: 4mm; } .spaced { margin-top: 6mm; } .price { grid-column: 3; text-align: right; white-space: nowrap; } .description { grid-column: 1 / -1; margin: 0.6mm 0 0 8.75mm; color: var(--ink-muted); font-size: 15px; line-height: 1.33; } .description.single-line { margin-top: 0.7mm; } /* Featured/signature callout: a title + subtitle followed by one or more portion/price rows (e.g. a dish offered in two sizes). .signature-block subgrids .menu's columns so its own .portion-row children can subgrid again in turn. */ .signature-block { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; } .signature-title, .signature-subtitle { grid-column: 1 / -1; } .signature-title { margin: 0; } .portion-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; margin-top: 2mm; } /* Wine/spirit price table: a name + description with one or two right-aligned price columns, optionally preceded by a header row of size labels (e.g. "½" / "¾"). A dual-price header/row always supplies an empty placeholder cell for an omitted price, so it naturally lands in column 2 via normal placement; a .single-price row has no placeholder and needs its one real price pushed into column 3 explicitly to match. */ .price-table-header { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; font-size: 9pt; margin-bottom: 4mm; } /* Bottle sizes are fractions of a litre. ½ and ¾ have dedicated Unicode glyphs; 3/2 (magnum) does not, so it is written with a real fraction slash - 3⁄2 - which is the correct form but renders at full digit size. `font-variant-numeric: diagonal-fractions` would even them out, but IBM Plex Sans has no `frac` feature (measured: "3/2" is the same width with the property as without), so it is deliberately not set here. */ .price-table-header span { text-align: right; } .wine-item { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; } .wine-item.single-price .wine-price { grid-column: 3; } .wine-name { text-transform: uppercase; } .wine-price { text-align: right; white-space: nowrap; } /* Centered italic closing remark at the bottom of a page. */ .closing-note { margin-top: auto; padding-top: 6mm; text-align: center; font-family: Georgia, serif; font-style: italic; font-size: 10.5pt; line-height: 1.4; } /* Shifts a row right to sit under its parent dish/title, without moving its right-aligned price column (block width stays auto, so only the left edge moves). */ .indent { margin-left: 8.75mm; } .indent-lg { margin-left: 17mm; } /* Smaller red heading for a minor mid-page subsection (e.g. "Choice of Sauces"), plus a plain centered line beneath it. */ .sub-heading { margin: 11.2mm 0 2mm; color: var(--accent); font-family: var(--font-display, "Cinzel", Georgia, serif); font-size: 11pt; font-weight: 700; text-align: center; text-transform: uppercase; } /* Country label above each group of wines on the world-wines page. Unlike .section-title (a centered heading naming a whole page section) this is a left-aligned inline label, small and letterspaced, sitting directly above the first wine of its country. Sized in em off the row text so it tracks the shared .menu font-size rather than pinning its own value. */ .country-heading { grid-column: 1 / -1; margin: 0 0 1.2mm; color: var(--accent); font-family: var(--font-display, "Cinzel", Georgia, serif); font-size: 0.72em; font-weight: 700; line-height: 1; text-align: left; text-transform: uppercase; letter-spacing: 0.06em; } /* Every country after the first needs air above it - the wine row that precedes it ends with a description, the same situation .spaced handles between wines. */ .wine-item + .country-heading { margin-top: 6.4mm; } .plain-note { text-align: center; } /* Plain sans-serif label heading for small logistics notes (sides, sauce choices) - visually lighter than the serif section titles, used by some source pages for these footer-style blocks. */ .info-heading { margin: 4mm 0 1.5mm; color: var(--accent); font-family: var(--font-body, "IBM Plex Sans", Arial, sans-serif); font-weight: 400; text-align: center; } .info-heading.gap-before { margin-top: 12.8mm; } /* ---- Marked items --------------------------------------------------- A guest taps a row in the reader to mark it, and the whole item inverts: name, price, and any description together in one solid block. The block is drawn with a box-shadow spread rather than with padding, on purpose. Every row type above is a column subgrid of .menu, and padding on a subgrid item insets its tracks relative to the parent - so a padded marked row would drift out of column alignment with the unmarked rows above and below it. A spread paints outside the border box and changes no layout at all. These rules live here rather than in the reader's own stylesheet because the mark is drawn on the page's markup, using the page's own palette. */ .is-picked { border-radius: 1.2mm; background: var(--ink); color: var(--paper); box-shadow: 0 0 0 1.6mm var(--ink); } /* The description is inside the block with everything else, so its muted grey has to become a muted cream to stay legible. */ .is-picked .description { color: var(--ink-muted-inverted); } /* Arriving from the list. A guest who pressed a name in their selection has just been carried to another page, and the row they asked for could be anywhere down it - so the reader says which one it is rather than leaving them to re-find it in a column of forty. Drawn as a ring outside the row, in the same spread-not-padding way and for the same subgrid reason as the mark above. It has to read against a marked row, which is already solid ink, so the ring is the accent rather than the ink: the one colour on the page that neither state uses. The class is removed on a timer - see REVEAL_MS in menu-reader.js - because this is an answer to a question just asked, not a state the row is in. */ .is-revealed { border-radius: 1.2mm; box-shadow: 0 0 0 1.6mm var(--paper), 0 0 0 2.6mm var(--accent); } /* The mark's own block still has to be there underneath, so a revealed row that is also picked keeps the ink and takes the ring around it. */ .is-revealed.is-picked { box-shadow: 0 0 0 1.6mm var(--ink), 0 0 0 2.6mm var(--accent); } @media (prefers-reduced-motion: no-preference) { .menu-item, .wine-item, .signature-block { transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease; } } /* Rows carry no click handler of their own - the reader binds a single tap handler for the whole page - but they are the one thing a guest acts on, so they should say so wherever there is a real pointer to say it to. */ @media (hover: hover) and (pointer: fine) { .menu-item, .wine-item, .signature-block { cursor: pointer; } } /* Per-page spacing one-offs. These used to live in a stylesheet per page, loaded through a single swappable - which broke during a page turn, when two pages are on screen at once and only one of them could have its rules applied. Every selector below is used by exactly one page, so merging them here costs nothing and removes that whole failure mode along with a request per page. */ /* Oysters / For Sharing */ .menu-item.spaced.wide-gap { margin-top: 10mm; } /* Meat Aging Cabinet */ .menu-item.close-after { margin-top: 0.15mm; } .menu-item.spaced.small-gap { margin-top: 4.45mm; } .final-item { margin-top: 4.2mm; } .signature-block { margin-top: 5.72mm; } .signature-subtitle { margin: 0.78mm 0 0 8.8mm; } /* Scoped, unlike its siblings: .portion-row is also used by the fish and oysters pages, which take their left offset from .indent/.indent-lg instead. Only rows nested in a signature block want this treatment. */ .signature-block .portion-row { margin: 2.45mm 0 0 8.8mm; } .signature-block .portion-row.second { margin-top: 1.62mm; } @media print { @page { size: A4 portrait; margin: 0; } html, body { width: 210mm; background: #ffffff; } body { display: block; padding: 0; } .page { width: 210mm; min-height: 297mm; max-width: none; margin: 0; break-after: page; } }

for the page's first/only title, and