/* ============================================================ ๐Ÿ”ด A MEDIA QUERY ADDS NO SPECIFICITY. READ THIS BEFORE EDITING. ============================================================ This file is long, and rules for the same element are scattered through it. `@media (max-width: 430px) { .skin-home .orderbar-word { display: none } }` LOSES to a plain `.skin-home .orderbar-word { display: inline-flex }` written further down, because the two have identical specificity and the later one wins on order. The media query buys nothing. This has bitten five times now: slice 15 (the wordmark reappearing on a 320px bar), slice 24 (the whole brand link), and three times in slice 28 alone. CLAUDE.md carries the rule; it is repeated HERE because this is the file where it keeps happening and the moment it matters is while editing, not while reading the handbook. SO: when a media query needs to override a base rule for an element declared in this file, put it AFTER that base rule โ€” near the end is safest โ€” and say in the comment which rule it is beating. Several blocks below do exactly that and explain why. ============================================================ */ /* ============================================================ PART 1 โ€” REAL, BOUND FOR THE REPO (port into home.css) No mockup content is styled here. Everything below ships. ============================================================ */ /* 1.1 hero pair is ORDER NOW + SEE MENU โ€” no new CSS needed, SEE MENU reuses .e1-btn--ghost. Kept here as a note so the port is explicit. */ /* ============================================================ ADD-ONS in the item sheet (Part 1, real). Three groups: EXTRAS (provisional *), ADD ONS (board prices real, rest *), REMOVE (the existing free mechanic, untouched). ============================================================ */ .skin-home .isheet-mods { margin: 14px 0 0; } .skin-home .isheet-mods-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: calc(0.82rem * var(--type-scale)); letter-spacing: calc(1px + var(--type-tracking)); text-transform: uppercase; color: var(--patty); } .skin-home .isheet-mods-sub { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0; text-transform: none; /* โš ๏ธ NO OPACITY HERE. --patty is 5.60:1 on cream and passes 4.5:1 by 1.1. `opacity: 0.85` USED TO SIT ON THIS RULE and blended it toward the cream behind it: axe measured the effective foreground as #8d603d = 4.13:1 at 11.52px, a real 1.4.3 failure on the item sheet (S139). THE COLOUR WAS NEVER WRONG - it is the law's own token, and computed style still reports rgb(123,74,42). Only PAINT was wrong, which is why a probe matching on computed colour found nothing and axe found it twice: opacity is a compositing effect, not a computed colour. A guard that greps stylesheets for off-law hex literals cannot see this class at all. */ color: var(--patty); } /* ONE ROW PER OPTION โ€” pills retired 2026-08-16 (Director's call, slice 1a). Nine options in nine different pill widths wrapped into a ragged staircase: measured, 9 distinct widths and 9 distinct price right-edges, five visual rows at 1280. Pills cannot be made clean at that count, so this is a LIST. Name left, price on ONE right-hand rail, the WHOLE ROW is the tap target, 48px tall, and the checkbox on the left says selected without relying on colour alone. Class names changed with the shape: they are rows, not chips. */ .skin-home .isheet-opts { list-style: none; margin: 0; padding: 0; display: block; } .skin-home .isheet-opts > li + li { border-top: 1px solid rgba(20, 16, 14, 0.16); } .skin-home .isheet-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 10px; background: transparent; border: 0; border-radius: 8px; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--outline); text-align: left; cursor: pointer; } /* the marker is a BOX, not a glyph: drawn, so no pictogram is typed and the state survives a font swap from the type wheel */ .skin-home .isheet-opt { position: relative; } .skin-home .isheet-opt::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; border: var(--key-soft) solid var(--outline); border-radius: 6px; background: transparent; } .skin-home .isheet-opt.is-on { background: var(--outline); color: var(--butter); } .skin-home .isheet-opt.is-on::before { background: var(--cheese-gold); /* the cheese sticker, filled = chosen */ } /* THE TICK IS GEOMETRY, and that is the point: an adversarial pass found the first cut marked selection with COLOUR ALONE (fill and inversion), which this project's own law forbids and which vanishes in forced-colors mode and in greyscale. A drawn corner survives both โ€” it is a shape, not a hue, and not a glyph either, so the no-typed-pictogram rule holds. */ .skin-home .isheet-opt::after { content: ""; position: absolute; left: 17px; top: 50%; width: 5px; height: 10px; border: solid transparent; border-width: 0 3px 3px 0; transform: translateY(-62%) rotate(45deg); pointer-events: none; } .skin-home .isheet-opt.is-on::after { border-color: var(--outline); } /* black on gold, the sticker pairing */ .skin-home .isheet-opt-label { flex: 1 1 auto; min-width: 0; } /* THE RAIL, and it is the LABEL that builds it: `flex: 1 1 auto` on the label pushes every price against the row's uniform right padding, so all nine end on the same pixel. tabular-nums keeps the digits from shuffling as the figures change; min-width is only a floor for a price short enough to look stranded, and on today's board nothing is that short โ€” stated plainly because an earlier comment credited min-width for the whole rail, which would send the next reader to change the wrong line. */ .skin-home .isheet-opt-price { flex: 0 0 auto; min-width: 5.5ch; text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 0.82rem; } .skin-home .isheet-opt.is-on .isheet-opt-price { color: var(--cheese-gold); } .skin-home .isheet-prov-note { margin: 10px 0 0; font-family: var(--font-body); font-size: 0.78rem; line-height: 1.5; color: var(--patty); } /* THE STEPPER AND ADD TO CART ARE ONE PAIR (slice 1d, 2026-08-16). Measured before: the stepper was 52px against a 72.8px button at 390 and 54.4 at 1280 โ€” a leftover beside a finished control. It now takes the same sticker construction as the button (the --key keyline, the --lift hard offset) and `align-items: stretch` makes the two heights EQUAL BY CONSTRUCTION rather than by a number that can drift when the label wraps. */ .skin-home .isheet-cta { display: flex; align-items: stretch; gap: 12px; } .skin-home .isheet-qty { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; padding: 2px 6px; background: var(--butter); border: var(--key) solid var(--outline); border-radius: 999px; box-shadow: var(--lift) var(--lift) 0 var(--outline); } .skin-home .isheet-qty-btn { width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--outline); cursor: pointer; } .skin-home .isheet-qty-btn:hover { background: rgba(0, 0, 0, 0.08); } /* MINUS AND PLUS ARE DRAWN, NOT TYPED, from one 15x3 stroke โ€” a glyph pair never balances (a typeset minus reads lighter than its plus at the same size), and drawing them makes "equal optical weight" a measurable fact. The buttons keep their aria-labels, so nothing is lost by the marks being decorative. */ .skin-home .isheet-qty-mark { position: relative; display: block; width: 15px; height: 15px; } .skin-home .isheet-qty-mark::before, .skin-home .isheet-qty-mark::after { content: ""; position: absolute; background: currentColor; border-radius: 1px; } .skin-home .isheet-qty-mark::before { left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; } /* the upright is present in both marks and merely invisible on the minus, so the two mark boxes measure identically */ .skin-home .isheet-qty-mark::after { top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; opacity: 0; } .skin-home .isheet-qty-btn--plus .isheet-qty-mark::after { opacity: 1; } .skin-home .isheet-qty-n { min-width: 24px; text-align: center; font-family: var(--font-display); font-size: calc(1.1rem * var(--type-scale)); color: var(--outline); } /* NO PADDING OVERRIDE. The first cut shrank this to 12px 18px to buy room in the side-by-side row, which made the drawer's Add to Cart the only sticker button on the site smaller than all the others (48.4 against the shared 15px 28px = 54.4). Stacking already bought the room; the button keeps the site's measure and the STEPPER stretches to IT, which is the direction the ruling actually asked for. min-width:0 is the blowout guard from CLAUDE.md โ€” a flex item that cannot shrink pushes its container open. */ .skin-home .isheet-order { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; } /* THE PAIR STACKS ON PHONES, and the measurement is why: side by side, the button keeps only ~140px at 320 and "ADD TO CART ยท $9.00" broke across FOUR lines (measured 103.6px tall at 320, two lines at 390) โ€” and because the row stretches, the stepper grew to match, which is the opposite of deliberate. Stacked, the button gets the full width and one line, the stepper keeps its natural height, and both keep the same sticker construction so they still read as one pair. Breakpoint borrowed from the sheet itself: 700 is where it becomes a bottom drawer. */ @media (max-width: 699px) { .skin-home .isheet-cta { flex-wrap: wrap; align-items: center; gap: 14px; } .skin-home .isheet-qty { order: 1; } /* NO white-space: nowrap. It was in the first cut and it bought nothing โ€” measured, the label is ONE line at 320 without it โ€” while creating the exact failure CLAUDE.md documents: with a longer price the nowrap button pushed 14px PAST its container at 320, where wrapping stayed inside it. Wrapping is the safe way to fail. */ .skin-home .isheet-order { order: 2; flex: 1 1 100%; } } /* FORCED COLORS: the state has to survive the user's own palette. Backgrounds and fills are replaced wholesale in that mode, so the gold box and the inverted row both stop saying anything โ€” the tick and the stepper's drawn strokes are re-stated here in system colours so the drawer keeps working for someone running Windows high contrast. */ @media (forced-colors: active) { .skin-home .isheet-opt::after { border-color: transparent; } .skin-home .isheet-opt.is-on::after { border-color: CanvasText; } .skin-home .isheet-opt.is-on::before { background: Highlight; } .skin-home .isheet-qty-mark::before, .skin-home .isheet-qty-mark::after { background: CanvasText; } } /* additions on a cart line print gold-side, removals stay as they are */ .skin-home .cart-line-add { color: var(--patty); } /* 1.3 nav links beside the wordmark (Menu, Catering) */ /* THE CIRCULAR MASK IS GONE (2026-08-16). It existed because the OLD badge PNG's circle was clipped flat at the canvas edge and a border-radius hid the damage. The regenerated badge (badge-mark-96-v2.png, from Mark's keyed master) has clean transparent margins, so the mask had nothing left to hide and could only shave real art. Same class of cleanup as the earlier scaffolding strips; this one lived in a file those sweeps missed. */ .skin-home .e1-top { display: flex; align-items: center; gap: 14px; } .skin-home .e1-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .skin-home .e1-navlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-family: var(--font-display); font-weight: 400; font-size: calc(1rem * var(--type-scale)); letter-spacing: calc(1px + var(--type-tracking)); text-transform: uppercase; color: #FFF8EC; border-radius: 8px; } .skin-home .e1-navlink:hover { color: var(--cheese-gold); } /* THE COMPACT LINK SIZE NOW REACHES 619, not 480 (slice 24). It is what makes the one-row header hold from 560: the four links measure 325.77px compact in the fallback state against 391.44px at full size, and that 66px is most of what the row was short of. Still well over the 12px minimum-font floor block 54 enforces. */ @media (max-width: 619px) { .skin-home .e1-navlink { padding: 0 9px; font-size: 0.9rem; } } /* 1.2 the second order button, after the neighborhood section. The itself is OrderNowLink in the repo โ€” one component, one seam. */ .skin-home .e1-orderrow { padding: 26px 0 64px; display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; } .skin-home .e1-orderrow-line { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: calc(1.4rem * var(--type-scale)); letter-spacing: calc(1px + var(--type-tracking)); text-transform: uppercase; color: #FFF8EC; } /* 1.4 AS SEEN ON @SMASHTIMEBX โ€” real shop photos, sticker frames */ .skin-home .igstrip { padding: 64px 0 10px; } .skin-home .igstrip-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; } .skin-home .igstrip-handle { font-family: var(--font-display); font-weight: 400; font-size: calc(clamp(1.6rem, 5vw, 2.4rem) * var(--type-scale)); letter-spacing: calc(1px + var(--type-tracking)); text-transform: uppercase; color: var(--cheese-gold); text-decoration: none; } .skin-home .igstrip-handle:hover { color: var(--butter); } .skin-home .igstrip-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 760px) { .skin-home .igstrip-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } } .skin-home .igstrip-tile { margin: 0; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.04); aspect-ratio: 1; } .skin-home .igstrip-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .skin-home .igstrip-cap { margin: 22px 0 0; text-align: center; font-family: var(--font-body); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9C948A; } .skin-home .igstrip-cap a { color: var(--cheese-gold); text-decoration: none; } .skin-home .igstrip-cap a:hover { color: var(--butter); } /* 1.5 the sticky order bar. Dark ground so the single red sticker is the only ORDER at squint distance; hidden on phones, the mobilebar owns that. */ .skin-home .orderbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: rgba(16, 12, 10, 0.96); border-bottom: 3px solid var(--outline); transform: translateY(-102%); /* A TRANSFORM DOES NOT REMOVE ANYTHING FROM THE TAB ORDER. Slid away, this bar's links were still focusable, so a keyboard user could tab into a nav that is not on screen. visibility does what transform only appears to do; it is delayed out so the slide still animates, and switched on instantly coming back. */ visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s; } .skin-home .orderbar.is-on { transform: translateY(0); visibility: visible; transition: transform 0.22s ease, visibility 0s; } @media (prefers-reduced-motion: reduce) { .skin-home .orderbar { transition: none; } } /* ============================================================ THE BAR IS A THREE-TRACK GRID, AND THE NAV OWNS THE MIDDLE ONE (slice 15 item 7 โ€” replaces the slice-5 flex row) ============================================================ TWO THINGS CARLOS SEES, both fixed here. (a) THE NAV SAT HARD LEFT. It was a flex row โ€” wordmark, nav, then ORDER NOW pushed right with margin-left:auto โ€” so every pixel of extra window width piled up on ONE side of the nav. Measured, gap to the left of the nav vs gap to its right: 620px 123.19 / 189.61 (loaded) 900px 123.19 / 469.61 1280px 213.19 / 759.61 1280px 246.78 / 635.78 (fallback face) `1fr auto 1fr` makes the nav's track the middle of the BAR, so it is centred against the bar itself rather than against whatever the wordmark and the button happen to measure โ€” which is why it holds in both font states without a second set of numbers. (b) THE BAR RESHAPED AS HE RESIZED. Below 620 it dropped the wordmark AND ORDER NOW, so a window drag past that point changed WHAT was in the bar, not just how it sat. From 431 up the composition is now fixed โ€” SMASHTIME, the four links, ORDER NOW โ€” and only the ARRANGEMENT changes: one row when the row fits, two rows when it does not. THE ONE-ROW THRESHOLD IS MEASURED, IN THE FALLBACK FACE, WHICH IS THE WIDER ONE: wordmark 118.34 four nav links 399.25 ORDER NOW 151.19 two 18px gaps 36.00 the wrap's gutters 40.00 ------------------------------ asymmetric minimum 744.78 centred minimum 777.63 (both side tracks size to the wider of the wordmark and the button: 2 x 151.19) Chosen 781px, 3.37px of slack over the centred minimum. The extra ~33px over the asymmetric layout is what a genuinely centred nav costs, and it is worth it: the alternative centres the nav BETWEEN its neighbours, which is 16.4px off the bar's true centre in the fallback face โ€” a fudge a guard could only wave through. AND THAT SAME MEASUREMENT IS WHY 620 WAS WRONG. It came from a loaded-font sum of 585.73, and at 620 with no webfont the Catering link overlapped ORDER NOW by 106.73px (86.78 at 640, 26.78 at 700). Nothing ran off the screen, so the slice-11 "nothing is clipped" guard passed over it for two slices. Block 58.4 asserts the overlap directly. */ .skin-home .orderbar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding-top: 9px; padding-bottom: 9px; } .skin-home .orderbar-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px; min-width: 0; justify-self: center; } .skin-home .orderbar-order { justify-self: end; flex: 0 0 auto; } .skin-home .orderbar-word { font-family: var(--font-display); font-weight: 400; font-size: calc(1.15rem * var(--type-scale)); letter-spacing: calc(1px + var(--type-tracking)); text-transform: uppercase; color: #FFF8EC; } .skin-home .orderbar-word b { font-weight: 400; color: var(--sign-red); } /* THE BADGE JOINS THE STICKY BAR (Carlos, slice 24: "logo, menu catering and order now all in one row"). It is sized HERE and not by the img attributes, because the skin opens with all:unset and that cancels width/height on - the standing trap in CLAUDE.md. 34px, matching the shrunk top-of-page badge rather than the old 44: the bar is a 59px strip and the brand is the least urgent thing on it. */ .skin-home .orderbar-badge { display: block; width: 34px; height: 34px; flex: 0 0 auto; } .skin-home .orderbar-word { gap: 9px; } .skin-home .orderbar-wordmark { display: inline-flex; align-items: center; } .skin-home .orderbar-tag { font-family: var(--font-body); font-size: 0.85rem; color: #CFC7BA; margin-left: auto; } .skin-home .orderbar .e1-btn { min-height: 40px; padding: 8px 20px; font-size: calc(0.95rem * var(--type-scale)); } /* 431 TO 780 โ€” ONE ROW, WITH THE WORDMARK TEXT SHED (slice 28). It used to FOLD here: the wordmark and the button took the top row and the nav took the one below. Carlos's complaint was exactly that - "menu and catering is still under smashtime rather than next to it" - so the bar sheds instead of folding, and what it sheds was chosen by measurement. THE NUMBER: with the badge, the wordmark, four links and ORDER NOW the row needs 780px in the FALLBACK face. One row holds at 780 with 0.8px of slack and breaks at 760 - a real width limit, not a layout fault. The wordmark TEXT is 118.8px of that in the same face, which is more than the row is ever short by in this band, and it is the one part whose job the badge already does: the badge is still a link home and still says SmashTime. The compact nav size comes up to 900 here for the same reason it reached 619 in slice 24 - four links at full size want 391.44px in the fallback face against 325.77px compact, and that 66px is most of what the row is short of. */ @media (max-width: 900px) { .skin-home .orderbar-nav .e1-navlink { padding: 0 9px; font-size: 0.9rem; } } @media (max-width: 780px) { .skin-home .orderbar-wordmark { display: none; } .skin-home .orderbar-inner { column-gap: 12px; } } /* AND ORDER NOW SHEDS AT 589, not 430. The first cut of this ladder kept it to 431 on the assumption that the row could hold badge + four links + button that far down; the measurement said otherwise and the grid showed it by SQUASHING rather than wrapping - at 431 the tracks came out 20.2 / 260.2 / 86.6px, with the 34px badge crushed to 20.2 and the 152.5px button to 86.6. Nothing overflowed and nothing wrapped, so nothing looked broken to a test that only asked about rows: it just quietly made everything smaller than it is supposed to be. Measured need in the fallback face: badge 34 + 12 + nav 331.8 + 12 + button 152.5 = 542.3, plus the 40px of wrap padding = 582.3. */ /* ORDER NOW SHEDS AT 619, NOT 589 โ€” moved for CENTRING (Carlos, slice 29: "can we just center that?"). At 590 in the fallback face the button's min-content is 105.36px, wider than its fair share of a 1fr track there, so the outer tracks came out 88.875 / 105.359 and the nav sat 8.24px off true centre. At 620 the share is 124.1px, the tracks can be equal, and the nav centres to 0.01px. AND THE GRID IS LEFT ALONE. The first cut of this rung replaced the base `1fr auto 1fr` with `auto 1fr`, which is what put the nav hard left from 470 down. Hiding the button empties its track; the track still holds the nav in the middle of the BAR, which is what slice 15 established centring means here. */ @media (max-width: 619px) { .skin-home .orderbar-order { display: none; } } /* THE COMPACT LINK SIZE STARTS AT 469 because the badge plus four links no longer fits the bar below that width. โš ๏ธ THE NUMBERS THAT USED TO BE IN THIS COMMENT WERE WRONG, and the way they were wrong is worth more than the numbers were. It claimed "at 0.8rem the four measure 266.3"; measured 2026-08-22 they are 202.7 with the webfont loaded and 261.8 with it blocked. 63.6px off, and it read as though it described the loaded case while having been taken from the fallback face. A layout number written in prose beside the rule it describes goes stale silently - so this comment now carries the MECHANISM and no arithmetic. THE SIZE WENT UP ON 2026-08-22 (C5). At 0.8rem the four nav words rendered at 12.8px against the bottom bar's 16.8px - 76% of it - and Carlos could not read them on his phone. Parity with the bottom bar is the target. ONE RUNG, NOT A LADDER. 1.05rem is full parity and it fits from 360 up. At 320 with fonts blocked, 1.05rem is indistinguishable from exactly fitting, and exactly fitting is not a margin - so the narrow rung takes 1.0rem, which is still a 25% increase on what was there. The narrowest device does not get to cap the size on the common one. THE MECHANISM IS FLEX-SHRINK AGAINST A FITTED TRACK. The links are flex items in a nowrap row: once their natural width exceeds the track they all shrink proportionally, so the SUM of their boxes pins to the track width while the TEXT inside keeps growing. A container that has stopped changing reports no overflow while the overflow moves inside it - measure the glyphs, not the boxes. This is the flex form of this project's "a grid does not only wrap or overflow, it squashes" rule. (It is NOT min-width: that was checked, and the 44px floor never binds at these sizes.) LETTER-SPACING TO ZERO buys the width the size costs. The tracking was inherited from the display face and bought nothing at this scale. */ @media (max-width: 469px) { .skin-home .orderbar-nav .e1-navlink { padding: 0 3px; font-size: 1.05rem; letter-spacing: 0; min-width: 44px; justify-content: center; } .skin-home .orderbar-inner { column-gap: 10px; } .skin-home .orderbar-nav { gap: 2px; flex-wrap: nowrap; } } /* THE NARROW RUNG - iPhone SE and anything below 360. See the mechanism above: 1.05rem is indistinguishable from exactly fitting here with fonts blocked, and exactly fitting is not a margin. */ @media (max-width: 359px) { .skin-home .orderbar-nav .e1-navlink { font-size: 1rem; } } /* THE BADGE LEAVES THE BAR BELOW 470 โ€” and the reason is the gutter, not the width. A 20px gutter plus a 44px tap box plus a 10px gap starts the first nav link at 74px, and block 54 fails the whole surface family for it: the slice 11 item 5 ruling is that text on a skin surface begins on the 20px gutter. Slice 24 hit this exact number from the other direction and took the badge off for the same reason; putting it back on a phone was my addition, not Carlos's ask. It also frees the 54px the four links need: they measure 266.3px in the fallback face against 280px of usable width at 320, so with the brand column gone they fit at every phone width instead of only above 340. Nothing becomes unreachable: the masthead one scroll up carries the badge and .mobilebar pins CALL, DIRECTIONS and ORDER to the bottom of the same screen. */ /* BELOW 470 THE NAV IS CENTRED TOO โ€” CARLOS RULED, 2026-08-18: "on phone when scrolling down can you just center this like just move it alittle bit to the right lol the menu gallery thing." SLICE 29 REPORTED THIS AS AN OPEN CONFLICT rather than deciding it, and this is the ruling landing. Both rules were real: slice 11 fixed a 20px gutter for every text surface on this site, and at 320 the nav measures 208.7px of 280px usable, so centring starts the first link at 55.64px instead of 20. He has picked centring for THIS STRIP, so the gutter ruling now carries one named exception - written here and in block 54 beside the expectation it changes, so nobody later reads it as a guard that rotted. EVERYTHING ELSE STILL BEGINS ON 20px: the menu, the footer, the legal pages, every other skin surface. This is the sticky bar's nav on a phone, and nothing more. */ @media (max-width: 469px) { .skin-home .orderbar-nav { justify-self: start; justify-content: center; width: 100%; } } @media (max-width: 469px) { /* 6px, NOT the base 9. The old fold block carried this and it went out with the fold: a 44px link inside 9px padding plus the 3px border is a 65px bar, and block 48's phone ceiling is 64 - the strip is taken twice on a phone because .mobilebar owns 63px at the other end of the same screen. */ .skin-home .orderbar-inner { grid-template-columns: 1fr; grid-template-areas: "nav"; padding-top: 6px; padding-bottom: 6px; } } /* (The phone rungs moved up: ORDER NOW now sheds at 589 and the compact link size starts at 469, both derived from the fallback measurements above. The badge's own rung is at 340, declared later in this file where it can win.) */ /* 1.3 catering: the through-link under the call button */ .skin-home .cater-formlink { display: inline-block; margin-top: 14px; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--outline); text-decoration: underline; text-underline-offset: 3px; } /* ============================================================ THE LOGO GOES HOME (slice 7B, 2026-08-16) ============================================================ The masthead badge + wordmark was a bare + on three surfaces โ€” the home hero, the checkout and the sticky bar โ€” so the one control every customer already expects to be a link was not one anywhere. It is an anchor on all of them now. The layout is unchanged on purpose: .e1-top and .orderbar-inner were flex rows whose first two children were the badge and the wordmark, and the anchor now holds that pair with the SAME 11px gap between them, so the row measures exactly as it did. The nav keeps its margin-left:auto. TAP FLOOR: min-height 44px. The badge is already 44px so the home masthead clears it on its own, but the sticky bar's wordmark is text alone and would otherwise land around 18px โ€” the same 44px floor the nav links carry. No focus rule needed: `.skin-home a:focus-visible` (home.css) already paints the gold ring on every anchor in the skin, and these are anchors now. */ .skin-home .e1-homelink { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; text-decoration: none; color: #FFF8EC; } .skin-home .orderbar-word { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; } /* RESTATED AFTER the rule above, and this is not belt-and-braces: the phone block that drops the wordmark lives EARLIER in this file, so at equal specificity the display:inline-flex above would have won and put the wordmark back on a 320px bar the measurement proved has no room for it. Same cascade trap as any late override of a media query. Moved 619 -> 430 with the rest of slice 15 item 7; if this number and the one in the phone block ever disagree, the wordmark comes back on a bar that cannot hold it, which is exactly the bug this restatement exists to prevent. */ @media (max-width: 430px) { /* THE WORDMARK TEXT, not the link (slice 28). The link carries the badge now and stays - it is the only way home on a scrolled phone. Slice 24 hid the whole link because the badge pushed the nav off the 20px gutter; that was with the brand in its own grid column and the nav centred after it. The nav is left-aligned in the column beside it now, and the badge itself sits ON the gutter, so the thing that failed then cannot happen here - block 72.1 measures the gutter at every phone width. */ .skin-home .orderbar-wordmark { display: none; } } /* THE BRAND LINK IS HIDDEN BELOW 470, DECLARED HERE so it beats the base `.orderbar-word { display: inline-flex }` further up - a media query adds no specificity, so an earlier display:none loses to a later plain rule. That trap has now cost this slice twice. */ @media (max-width: 469px) { .skin-home .orderbar-word { display: none; } } /* ============================================================ COLLAPSIBLE EXTRAS AND ADD ONS (slice 8, 2026-08-16) ============================================================ Native
/. The summary row IS the control โ€” full width and 44px tall โ€” so a thumb aimed anywhere along it toggles the group, not just at the words. THE ARROW IS A DRAWN SHAPE THAT TURNS, deliberately, and not a swapped colour or a different glyph. Two right-angle borders rotated 45deg point down; open turns them to -135deg, a real 180deg. That matters twice: colour alone is not a state signal, and in forced-colors mode backgrounds and fills are replaced wholesale while a BORDER keeps its geometry โ€” so the arrow still says open or closed for someone running Windows high contrast, where a background-image chevron would simply vanish. */ .skin-home details.isheet-mods { margin: 14px 0 0; } .skin-home .isheet-mods-sum { display: flex; align-items: center; gap: 10px; min-height: 44px; /* the tap floor */ padding: 4px 2px; cursor: pointer; list-style: none; /* kill the UA triangle... */ border-radius: 8px; } .skin-home .isheet-mods-sum::-webkit-details-marker { display: none; } /* ...and its webkit twin */ .skin-home .isheet-mods-sum .isheet-mods-h { margin: 0; } .skin-home .isheet-mods-count { margin-left: auto; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; color: var(--patty); /* 5.6:1 on the cream โ€” body-legal */ white-space: nowrap; } .skin-home .isheet-mods-arrow { flex: 0 0 auto; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--patty); border-bottom: 2px solid var(--patty); transform: rotate(45deg); /* points DOWN when closed */ transform-origin: 60% 60%; transition: transform 0.18s ease; } .skin-home details.isheet-mods[open] .isheet-mods-arrow { transform: rotate(-135deg); } @media (prefers-reduced-motion: reduce) { .skin-home .isheet-mods-arrow { transition: none; } } /* is not an ,