/* ============================================================ Deviceland — Design System ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h-stuck, 78px) + 26px); } body { margin: 0; background: var(--paper); color: var(--on-paper); font-family: var(--sans); font-size: 16px; line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } dl, dd, dt, h1, h2, h3, p { margin: 0; } :root { /* Ink is a warm espresso, not black. It is a text and control colour only — no section on this page uses it as a ground. A black band is the cheapest way to look expensive and the fastest way to look like everyone else. */ --ink: #241a13; --ink-2: #2e2219; --ink-3: #3a2c20; --ink-4: #4a382a; --on-ink: #fff9f5; /* Warmed, and the ladder spread out, so that an untouched Apple packshot on its mandatory white ground reads as a plate instead of a hole. Full derivation and the measured luminance table live on the same tokens in assets/css/tokens.css — this block is the homepage's copy and must not drift from it. */ --paper: #f8f2e8; --paper-2: #f2ebde; --paper-3: #eae1d0; /* oklch(99% .004 90) — a step lighter than paper, for the picks ground */ /* No longer used as a band. A white well on it is a 2.72-point step and so invisible; see the mat rule in assets/css/tokens.css. */ --bone: #fdfcf8; --on-paper: #14110e; /* House grade for the documentary photography. Measured, the two photo sets were living in different worlds: warm sat lum cool px studio/bento 39 75 83 2% documentary 8 32 49 24% A 34-point luminance drop and a halved saturation is what reads as "sophisticated, then suddenly not". This closes the gap to warm 21 / sat 47 / lum 57 / cool 15% — it does not erase it, because a workbench photographed under shop lighting should not pretend to be a seamless cove, and pushing it to 83% luminance would only look blown out. This is grading context, not merchandise. See the note in the README: never grade a photograph where the product's true colour is the thing being sold; always grade the room around it. */ --grade-real: brightness(1.18) contrast(0.93) saturate(0.82) sepia(0.34); /* Same family, for photographs that are already high-key. --grade-real lifts exposure 18%, which is right for a mid-key bench shot and destructive on a bright one. Measured share of pixels clipped to pure white: raw --grade-real --grade-real-hi owner portrait 4.3% 25.9% 10.8% bench technician 0% 18.9% 2.9% storefront 13.8% 52.6% 32.2% A quarter of a portrait blown to paper-white is not a grade, it is a deletion — and faces are the one subject where losing modelling is immediately legible as "cheap photo". This variant raises contrast instead of exposure, and measures higher local contrast than --grade-real does (sd 86 vs 83) while keeping the same warm cast that unifies the set. */ --grade-real-hi: contrast(1.1) saturate(0.9) sepia(0.22); /* Third tier, for the sunlit exterior. The storefront is a bright outdoor photograph at lum 173 — 40 points above anything shot indoors — and both of the grades above make it worse, not better: lum blown to pure white raw 173 13.8% --grade-real 197 52.6% <- over half the building --grade-real-hi 181 32.2% --grade-real-sun 169 7.0% Over half a photograph clipped to paper-white is not a warm cast, it is lost architecture — the brick, the awning edge and the window frames stop existing. The correction a bright exterior needs is negative: hold it DOWN, add a little contrast, and carry the same warm cast (warm +26 here against +27 for --grade-real, so it still reads as the same family). */ --grade-real-sun: brightness(0.93) contrast(1.04) saturate(0.9) sepia(0.22); /* The one chapter break. Warm sand carries the same structural job a dark band was doing — it separates — without borrowing gravity it hasn't earned. */ --sand: #e7dbc4; --sand-2: #dccdb0; --on-sand: #2a2018; /* Tailwind `bg-surface` in the reference. The category photographs carry a warm cream ground of their own (sampled: 251-255, 237-248, 209-227), so the tile colour has to sit just above the lightest of them or the scrim shows a seam where it lands. */ --surface: #fdfaf3; --surface-80: rgba(253, 250, 243, 0.8); /* Was #7d7365, which measured 4.36:1 on --paper and 4.46:1 on --surface — under the 4.5:1 AA floor on both. This token carries .tile-price, so the failing text was the price: "From $999" was the least legible thing on a retail tile. #756b5d is the smallest darkening that clears AA on the lighter of the two grounds (4.89:1 paper, 5.01:1 surface) and so keeps the warm grey reading the original was tuned for. */ /* Re-solved against the DARKEST ground it is used on rather than the lightest. #756b5d was already failing AA on --paper-3 (4.14) and --sand (3.82) — the footer and the whole service chapter — before the paper rungs moved. Same hue line, 4.51:1 on --sand, 5.55:1 on --paper. See assets/css/tokens.css for the full table. */ --muted-fg: #696053; /* Sampled from the official Deviceland lockup: #c95928 */ --ember: #c95928; --ember-lift: #e4713c; --ember-deep: #9c3f18; --on-ember: #fff9f5; /* Large saturated fields need more light and more chroma than a 40px mark: the logo value spread across a whole section reads as rust, not energy. */ --ember-field: #d9601f; --ember-field-2: #b8410f; --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --display: "Instrument Serif", "Times New Roman", Georgia, serif; /* Named for the band they belong to, not the value they used to hold: these are the hairlines on the sand chapter and the footer. */ --hair-dark: rgba(42, 32, 24, 0.15); --hair-dark-2: rgba(42, 32, 24, 0.28); --hair-light: rgba(20, 17, 14, 0.11); --hair-light-2: rgba(20, 17, 14, 0.22); --sh-1: 0 1px 2px rgba(20, 17, 14, 0.05), 0 8px 20px -12px rgba(20, 17, 14, 0.2); --sh-2: 0 2px 4px rgba(20, 17, 14, 0.04), 0 26px 50px -26px rgba(20, 17, 14, 0.26); --sh-3: 0 3px 6px rgba(20, 17, 14, 0.05), 0 50px 90px -44px rgba(20, 17, 14, 0.42); --sh-prod: 0 34px 44px -28px rgba(20, 17, 14, 0.55), 0 90px 120px -70px rgba(20, 17, 14, 0.4); /* max-w-[1480px] px-6 lg:px-10 — 1400px of content at desktop, which is what the reference's column arithmetic is built on. At 1400/40 the bento columns come out 27px narrow and nothing else lines up either. */ --shell: 1480px; --gut: 24px; /* One film-grain source for every saturated ground on the page. feTurbulence at baseFrequency 0.7 / 3 octaves, matching the reference build's film-grain layer. Held as a token because it is now used on the hero's copy panel, the Trade-In tile and the Visit chapter, and three copies of a 200-byte data URI is three chances for them to drift. Opacity is always set by the consumer, never here: grain reads far stronger on a saturated ground than on a light one, so the same texture wants ~5% on ember and ~2.5% on sand. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E"); --ease: cubic-bezier(0.16, 1, 0.32, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); /* Motion budget. Ding & Kyung (2025): moderate speed beats both fast and slow. Nothing on this page animates outside this band. */ --dur-micro: 150ms; --dur-ui: 250ms; --dur-reveal: 450ms; --dur-slow: 700ms; /* Two rows: the bar, and the folio of credentials beneath it. --head-h is the SUM, because that is what every `calc(var(--head-h) + N)` rule uses to clear the fixed header. See tokens.css for the full note — this block is the homepage's copy and must not drift from it. */ --bar-h: 74px; /* 0: the credential row was removed from the masthead (Oct 11). */ --folio-h: 0px; --head-h: calc(var(--bar-h) + var(--folio-h)); --head-h-stuck: 66px; /* Radius: SQUARED, 2px. Full reasoning lives on the same tokens in assets/css/tokens.css — including why --r-pill is redefined rather than renamed across its 50 call sites. THIS COPY IS WHY THE FIRST ATTEMPT DID NOT WORK. deviceland.css loads after tokens.css, so these values win on the homepage. Squaring tokens.css alone changed nothing visible: .btn resolved var(--r-pill) to the 999px defined right here and every button stayed a capsule. The block above already warns "this block is the homepage's copy and must not drift from it" — it drifted the moment only one copy was edited. Any future change to a token must be made in BOTH files. */ --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-xl: 4px; --r-pill: 2px; --r-tile: 3px; /* Elevation: four steps. The same audit found ten distinct box-shadows, nine of them used exactly once — ten unrelated "heights" with no logic, which is the difference between a design system and accumulated CSS. Each step is two shadows: a tight contact shadow for the object's own edge, and a wide diffuse one for the distance it sits above the paper. Warm-tinted rather than neutral black, because a cream ground reflects warm light. */ --e1: 0 1px 2px rgba(20, 17, 14, 0.05), 0 1px 1px rgba(20, 17, 14, 0.04); --e2: 0 2px 4px rgba(20, 17, 14, 0.05), 0 8px 18px -8px rgba(20, 17, 14, 0.18); --e3: 0 3px 6px rgba(20, 17, 14, 0.05), 0 20px 40px -18px rgba(20, 17, 14, 0.3); --e4: 0 6px 14px rgba(20, 17, 14, 0.06), 0 44px 80px -36px rgba(20, 17, 14, 0.42); /* On the ember ground the same steps need a warmer, deeper tint or they read as grey smudges rather than shadow. */ --e3-warm: 0 3px 6px rgba(60, 20, 0, 0.12), 0 20px 40px -18px rgba(60, 20, 0, 0.4); --e4-warm: 0 6px 14px rgba(60, 20, 0, 0.14), 0 44px 80px -36px rgba(60, 20, 0, 0.5); /* Ember grounds that carry small text now use the existing --ember-deep (#9c3f18), which measures 6.42:1 against white. The bright --ember tops out at 3.94:1, meaning NOTHING small could reach the 4.5:1 AA threshold on it at any opacity — the ground itself was the failure, not the text colour. --ember stays as the accent on light paper, where it has contrast to spare. */ --ember-deep-2: #7d310f; } @media (min-width: 1024px) { :root { --gut: 40px; } } ::selection { background: var(--ember); color: var(--on-ember); } :focus-visible { outline: 2px solid var(--ember-lift); outline-offset: 3px; border-radius: 4px; } /* ------------------------------------------------------------ Type primitives ------------------------------------------------------------ */ /* Instrument Serif is a single-weight display face: no synthetic bolding anywhere, and only a hair of negative tracking — it is already tightly fit. */ .display { font-family: var(--display); font-weight: 400; letter-spacing: -0.015em; line-height: 0.95; text-wrap: balance; } /* One rule for the whole page: the italic word is the ember word. Colour is a system, not a decoration — it lands in the same grammatical slot every time. */ .display em { font-style: italic; letter-spacing: -0.004em; color: var(--ember); } .band-ink .display em { color: var(--ember); } /* Negative leading is the editorial signal: at 1.0 a headline reads as a web page, at 0.86 it reads as a printed spread. Rank is carried by size ratio — h-xl : h-lg is 1.8 : 1, so the eye never has to guess what it is reading. */ .h-xl { font-size: clamp(3.1rem, 8.4vw, 7.5rem); line-height: 0.86; } /* text-[clamp(2.5rem,6vw,5.5rem)] leading-[0.95] tracking-[-0.025em] */ .h-lg { font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: 0.95; letter-spacing: -0.025em; } .h-md { font-size: clamp(2.05rem, 3.78vw, 3.4rem); line-height: 0.95; } .h-sm { font-size: clamp(1.5rem, 2.1vw, 2.05rem); line-height: 1; } /* text-[clamp(2.4rem,4.6vw,3.8rem)] leading-[0.96] — the picks heading */ .h-picks { font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 0.96; } .eyebrow { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.28em; line-height: 1; } .lede { font-size: 15px; line-height: 1.62; text-wrap: pretty; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Both "dimmer" tiers were below AA against the ground they actually sit on, and both carry .eyebrow — 11px uppercase with tracking, i.e. the hardest text on the page to read even at full contrast. Composited and measured against their real grounds: was now .on-ink-dimmer 3.82:1 -> 4.78:1 on --sand #e7dbc4 .on-ember-dimmer 3.72:1 -> 4.56:1 on --ember-deep #9c3f18 --ember-deep leaves so little headroom that 0.78 nearly collapses the dimmer tier into the dim one. Rather than ship two tiers that look identical, the dim tier is lifted to 0.92 so the rank stays visible and both ends clear the threshold. */ .on-ink-dim { color: rgba(42, 32, 24, 0.74); } .on-ink-dimmer { color: rgba(42, 32, 24, 0.68); } .on-paper-dim { color: rgba(22, 19, 15, 0.66); } .on-ember-dim { color: rgba(255, 249, 245, 0.92); } .on-ember-dimmer { color: rgba(255, 249, 245, 0.78); } .ember-text { color: var(--ember); } .band-ember .display em, .band-ember .ember-text { color: var(--on-ember); opacity: 0.82; } /* Ember on the value word only — one tinted word per headline, never two */ .tint { color: var(--ember); } /* ------------------------------------------------------------ Layout ------------------------------------------------------------ */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); } /* Anchor offset is owned by the scrollport, not by each target. One rule then covers sections, tiles, tables and widgets alike — including the ones added later, which is how anchors quietly rot behind a fixed header. */ section { position: relative; } /* Kept under the old name so every descendant rule stays where it was; only the ground changed. Sand does the separating that black used to do. */ .band-ink { background: var(--sand); color: var(--on-sand); } .band-ink-2 { background: var(--sand-2); color: var(--on-sand); } /* The Visit chapter gets the same depth stack as the hero's copy panel. The vignette rides on the section's own box-shadow rather than a pseudo-element, because box decoration paints below all content and so cannot cover the grid on top of it. The grain has to be a pseudo-element to carry its own opacity, and it is ::before rather than ::after: both it and .visit-grid are positioned at z-index auto, so paint order follows the DOM and ::after would sit on top of the copy. */ .band-ember { position: relative; box-shadow: inset 0 0 170px rgba(38, 12, 0, 0.4); background: linear-gradient( 152deg, var(--ember-deep) 0%, var(--ember-deep) 52%, var(--ember-deep-2) 100% ); color: var(--on-ember); } .band-ember::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; background-image: var(--grain); } /* Sand is a light ground at 71.6% luminance, and grain at ember strength on it reads as dirt rather than as film. 2.5% is the most it takes, with a correspondingly gentler vignette. */ .band-ink { position: relative; box-shadow: inset 0 0 150px rgba(60, 40, 18, 0.14); } .band-ink::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.025; background-image: var(--grain); } .band-paper { background: var(--paper); color: var(--on-paper); } .band-paper-2 { background: var(--paper-2); color: var(--on-paper); } .band-bone { background: var(--bone); color: var(--on-paper); } /* py-20 lg:py-32 */ .pad-y { padding-block: 80px; } @media (min-width: 1024px) { .pad-y { padding-block: 128px; } } /* Where two chapters share a ground colour the gap between them has nothing to read as, and 236px of flat paper looks unfinished rather than generous. A hairline turns the same space into a chapter rule. */ .band-paper + .band-paper, .band-paper-2 + .band-paper-2 { border-top: 1px solid var(--hair-light); } .band-ink + .band-ink { border-top: 1px solid var(--hair-dark); } /* fixed, not absolute. As an absolutely positioned element its containing block was not the viewport, so the offsets did not mean what they read as: measured, computed top was -60px while the element's actual rect.top was 36 — a 96px discrepancy, which put the focused link across the Deviceland lockup no matter what value was set here. Two attempts at tuning `top` therefore did nothing, because the number was never the problem. position: fixed makes the viewport the containing block unconditionally, so top means the distance from the top of the screen and the focused link lands below the header where it was always meant to. A skip link is viewport furniture anyway; fixed is the right position for it. */ .skip { position: fixed; left: 16px; top: -60px; z-index: 999; background: var(--on-ink); color: var(--ink); padding: 10px 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; transition: top 0.2s var(--ease); } /* Below the masthead, not on top of it. At 16px the focused link landed inside the 96px fixed header, directly across the Deviceland lockup — the one element on the page that should never be covered. This is the base rule rather than a per-layout override because the header is fixed at the top of every layout, so 16px was wrong on all of them. */ .skip:focus { top: calc(var(--head-h) + 12px); } /* ------------------------------------------------------------ Grain — perceived-craft layer ------------------------------------------------------------ */ /* Was z-index 900 with mix-blend-mode: multiply — i.e. a noise texture multiplying over EVERY element on the page, product photography included. Multiply darkens and dirties, so this was quietly grading the merchandise, which is the exact thing the grading rules in the README forbid. Apple never lays texture over product. It now sits behind the content (z-index 0, .page is z-index 1), so it still gives the paper its tooth and never touches a product. */ .grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } .page { position: relative; z-index: 1; } /* ------------------------------------------------------------ Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: 9px; height: 50px; padding-inline: 26px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap; transition: transform 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), color 0.35s var(--ease); } .btn svg { transition: transform 0.4s var(--ease); } .btn:hover svg { transform: translateX(3px); } .btn:active { transform: scale(0.985); } .btn-ember { background: linear-gradient(168deg, var(--ember-lift), var(--ember) 62%, var(--ember-deep)); color: var(--on-ember); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 10px 30px -12px rgba(201, 89, 40, 0.6); } .btn-ember:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 16px 40px -12px rgba(201, 89, 40, 0.72); transform: translateY(-1px); } .btn-outline { border: 1px solid var(--hair-light-2); color: var(--on-paper); } .btn-outline:hover { background: rgba(20, 17, 14, 0.05); border-color: rgba(20, 17, 14, 0.38); } .btn-ink { background: var(--ink); color: var(--on-ink); box-shadow: var(--sh-1); } .btn-ink:hover { transform: translateY(-1px); box-shadow: var(--sh-2); } /* The sand band is light, so the primary control on it is ink, same as everywhere else. One primary button, one appearance, whole page. */ .btn-light { background: var(--ink); color: var(--on-ink); box-shadow: var(--sh-1); } .btn-light:hover { transform: translateY(-1px); box-shadow: var(--sh-2); } .btn-ghost-ink { border: 1px solid var(--hair-dark-2); color: var(--on-sand); } .btn-ghost-ink:hover { background: rgba(42, 32, 24, 0.06); border-color: rgba(42, 32, 24, 0.4); } .btn-on-ember { background: var(--on-ember); color: var(--ember-field-2); box-shadow: var(--e3-warm); } .btn-on-ember:hover { transform: translateY(-1px); box-shadow: var(--e4-warm); } .btn-ghost-ember { border: 1px solid rgba(255, 249, 245, 0.42); color: var(--on-ember); } .btn-ghost-ember:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 249, 245, 0.75); } .link-quiet { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); } .link-quiet svg { transition: transform 0.4s var(--ease); } .link-quiet:hover { border-bottom-color: currentColor; } .link-quiet:hover svg { transform: translate(2px, -2px); } /* ------------------------------------------------------------ Header ------------------------------------------------------------ */ /* At rest the masthead has no surface of its own: it sits on the hero's paper so the opening view reads as one continuous field. It earns a surface only once it is floating over content. */ .masthead { position: fixed; inset-inline: 0; /* Cleared for WordPress's admin bar; see the note in chrome.css. The value is published by deviceland.js because the bar is fixed above 600px, absolute below it, and a different height on each. */ top: var(--dl-admin-offset, 0px); z-index: 800; background: transparent; } .masthead-inner { position: relative; display: flex; align-items: center; gap: 32px; height: var(--bar-h); transition: height var(--dur-reveal) var(--ease); } .masthead.is-stuck .masthead-inner { height: var(--head-h-stuck); } /* The condensed surface is its own layer. Because it is a sibling of the links rather than their background, it can scale and fade without ever nudging them — the single detail that separates a considered island from a jump. */ /* Scroll-only again, and turning it on at rest was a mistake. The pill has to contain the full lockup — monogram, DEVICELAND and the "DIGITAL SALES, SERVICE AND SMILES." tagline under it — which forces the bar to 96px, so at rest it read as a tall slab rather than a floating header. The condensed state is 78px with the wordmark alone and is the cleaner of the two, which is the opposite of what I assumed when I made the at-rest state visible. It is also not what the reference does. Humanity's header is `fixed top-0` with no bar at all at rest — just a `from-black/40 via-black/20 to-transparent` scrim — and becomes a FULL-WIDTH frosted bar on scroll, never a pill. So: transparent at rest, island on scroll. */ /* The floating pill is retired. This is a FULL-BLEED flush bar now. Two reasons, and the first is the house geometry: --r-pill is 2px, so an inset capsule renders as a floating 2px rectangle and the whole effect of an "island" depends on it reading as a capsule. Squaring the system removes the thing that made the shape work. The second is the folio. The credential row has to sit FLUSH beneath the bar as a full-width rule; an inset pill with 8px of transparent margin on every side cannot carry a flush rule under it, and the gaps let scrolled content show through between the two. The note this replaces observed that the reference itself does exactly this — "Humanity's header is fixed top-0 with no bar at all at rest ... and becomes a FULL-WIDTH frosted bar on scroll, never a pill." That was right, and the pill was the part I had added. Stickiness is kept deliberately. Dropping it would cost persistent nav and bag access on long shop pages, which on an e-commerce site is a real conversion cost rather than a styling preference. */ .island { position: absolute; inset: 0; z-index: -1; border-radius: 0; opacity: 0; background: rgba(248, 242, 232, 0.92); border-bottom: 1px solid rgba(20, 17, 14, 0.1); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); transition: opacity var(--dur-reveal) var(--ease); } /* No 100vw hack needed: .masthead-inner.shell drops its max-width further down, so inset:0 is already full width. The hack was also fragile — a later `@media (min-width:1024px) { .island { inset: 0 } }` reset `left` while leaving margin-left:-50vw applied, which put half the surface off the left edge of the screen on the product page. */ .island { left: 0; right: 0; width: auto; margin-left: 0; } .masthead.is-stuck .island { opacity: 1; } /* ------------------------------------------------------------ The folio — the credential row under the bar ------------------------------------------------------------ This is the signature device of the design and the highest-converting element on the page: it puts legitimacy, longevity and the live open state inside the buyer's FIRST horizontal scan, before any scrolling. Open-ended cells: a bottom rule and vertical dividers, no top border and no outer edges. Closing them into boxes was tried and reverted — open reads as a folio line in a catalogue, closed reads as a table. It collapses to zero on scroll. The credentials have done their job by the time someone is reading, and a permanent 40px band of small caps over the content would be chrome for its own sake. Because --head-h is bar + folio while --head-h-stuck is the bar alone, everything that clears the header follows this automatically. */ .folio { position: relative; z-index: 1; display: flex; align-items: stretch; /* The credentials sit on the right (owner, Oct 11). */ justify-content: flex-end; height: var(--folio-h); border-bottom: 1px solid var(--hair-light); /* Transparent, so the folio shares the masthead's ground. It was --surface (#fdfaf3) against the masthead's --paper (#f8f2e8): a two-point step that read as a seam splitting the header into two unrelated bars. */ background: transparent; overflow: hidden; transition: height var(--dur-reveal) var(--ease), opacity var(--dur-reveal) var(--ease); } .folio-cell { display: flex; align-items: center; gap: 9px; padding-inline: clamp(14px, 1.8vw, 26px); white-space: nowrap; font-size: 9.5px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-4); } .folio-cell + .folio-cell { border-left: 1px solid var(--hair-light); } /* The first and last cells take the page's own gutter, so the folio's text starts on the SAME vertical as the wordmark above it and the hero copy below it. Measured before this: the logo sat at 42px, the hero copy at 45px and the folio's first cell at 27px — three different left edges stacked on top of each other in the same 110px of page. */ .folio-cell:first-child { padding-left: clamp(26px, 3vw, 54px); } .folio-cell:last-child { padding-right: clamp(26px, 3vw, 54px); } /* pushed to the right edge, and it takes its divider with it */ .folio-cell.is-right { margin-left: auto; border-left: 1px solid var(--hair-light); } /* The only live element in the header. --ember when open; deviceland.js adds .is-shut when the shop is closed and the dot goes grey, because a lit pip at 11pm is worse than no pip. */ .folio-pip { width: 5px; height: 5px; border-radius: 50%; background: var(--ember); flex: 0 0 auto; } .folio-cell .is-shut .folio-pip, .folio-cell.is-shut .folio-pip { background: var(--muted-fg); } .masthead.is-stuck .folio { height: 0; opacity: 0; border-bottom-color: transparent; } /* Below 1024 the folio keeps only the two cells that earn their width: the authorization and the live hours. Five cells of tracked caps cannot fit a phone without either wrapping to two rows or scrolling sideways, and both look broken. */ @media (max-width: 1023px) { .folio-cell.is-optional { display: none; } } @media (max-width: 767px) { .folio { height: 34px; } .folio-cell { padding-inline: 14px; font-size: 9px; letter-spacing: 0.2em; } /* Only the authorization and the live hours survive here. Three nowrap cells measured wider than a 390px viewport, and because they cannot wrap the folio set the document's scrollWidth — which pushed the lede and the masthead icons off the side of the screen. The dateline is the one to drop: the band below carries the full street address. */ .folio-cell.is-optional-sm { display: none; } /* Belt and braces: if a translation ever makes these strings longer, the folio truncates itself rather than widening the document. */ .folio { max-width: 100%; } .folio-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; } } /* On phones the condensed surface goes full-bleed instead of floating. As an inset pill (8px top, 12px sides) it left a gap on every edge, and the masthead itself is transparent — so scrolled hero content showed THROUGH those gaps. In practice that meant the open-state pill appearing above the island as a sliced band, and the h1 cut in half by the island's lower edge. It reads as a rendering fault rather than a floating header. There is no room for a floating pill on a 390px screen anyway: the inset costs 24px of the 390 available, and the effect only reads at a width where the pill is visibly narrower than the page. */ /* ---- Phones get a plain bar, and that is the entire mechanism. ------------- Three separate attempts failed to stop the lockup appearing sliced on a real iPhone, and none of them reproduced in headless Chromium at the same viewport across a 15px scroll sweep from 0 to 420px on four viewport sizes. When geometry measures clean and the device still shows a defect, the defect is not in the geometry — so guessing at it again would be the fourth guess. What the desktop header actually does is stack four things iOS Safari is known to handle badly, all at once, and toggles them on the same frame the URL bar collapses: 1 a child at z-index:-1 inside position:fixed 2 a transform animating scale(.985) -> scale(1) on that child 3 backdrop-filter: blur(22px) saturate(1.6) on it 4 an animated HEIGHT on the flex row beside it And on short viewports there was a genuine, measurable bug feeding it: --head-h was overridden to 76px while --head-h-stuck stayed at its default 78px, so the header GREW by 2px on scroll rather than condensing, with a height transition running and the logo swapping from a 48px lockup to a 17px wordmark inside it. A header that animates taller while its contents shrink is exactly what "cuts off when I start scrolling" describes. So phones no longer get any of it. No island, no transform, no backdrop filter, no negative z-index, no height animation. A constant-height bar that turns opaque. It loses the frosted-glass condense — which was never legible at 415px — and it cannot fail. */ /* Phones keep the desktop island and the desktop logo condense. The ONE thing they do differently is hold the bar at a constant height. That distinction matters, because the previous pass deleted the island, the blur and the logo swap together — and the actual defect was none of those. It was that --head-h had been overridden to 76px for short viewports while --head-h-stuck stayed at its 78px default, so the header animated 2px TALLER on scroll, with `transition: height` running, while the logo shrank from a 48px lockup to a 17px wordmark inside it. Fixing the token pair removes the cause, so the effect can stay. */ @media (max-width: 767px) { /* Height is fixed across the condense. There is no height transition to catch mid-frame, and stuck and unstuck can no longer disagree about how tall the bar is — which is what produced a half-drawn lockup. Only the island's opacity and the logo asset change now. */ .masthead-inner, .masthead.is-stuck .masthead-inner { height: var(--bar-h); transition: none; } /* The pill is the content's own box, not a separate inset. ------------------------------------------------------------ Every previous attempt tuned two independent numbers — the island's inset from .masthead-inner, and the content's inset via .shell's gutter — and the clearance between them was whatever those two happened to leave. That is why it kept coming out wrong: 12px, then 10px, then 4px, each time re-derived by hand against a control count and asset widths that had already changed once. Now .masthead-inner IS the pill's outer bound: it is pulled in 4px from the viewport and the island simply fills it horizontally. Clearance on both sides then equals .shell's own padding — one number, symmetric by construction, and it tracks --gut automatically instead of being a coincidence between two rules. width: auto is required. .shell sets width: 100%, which with a margin would compute 100% of the parent and overflow by 8px rather than inset. */ .masthead-inner { width: auto; margin-inline: 0; } /* inset:0, not 6px. The inset made the bar read as a floating island, but the masthead is fixed, so those 6px were a slit across the whole screen with the page scrolling behind it. Flush on a phone. */ .island { inset: 0; } /* The masthead itself stays transparent so the island reads as floating rather than as a full-width bar with a pill drawn on it. */ .masthead.is-stuck { background: transparent; box-shadow: none; } /* The wordmark is now permanent on phones, not only when condensed. The lockup does not fit beside the controls at ANY phone width, and the old arithmetic missed it because it was done when the masthead had two controls. The comment below this block still reads "the call link plus menu button are 64px" — that was true before Account and Bag were added back for the real cart and account area. With four controls the actions column is ~157px, and nothing between 360px and 767px was re-measured. Measured at 375px, which is what the island was visibly overflowing: content box 375 - 48 (gutters) = 327px full lockup 452x104 scaled to 48h = 209px actions 37 + 3x38 + 3x2 gap = 157px row gap 32px total 398px -> 71px over Swapping to the wordmark and tightening the gap: 150 + 16 + 157 = 323px, inside 327px. This also makes the phone header identical at rest and when stuck, which is consistent with the fixed height already set above. */ .masthead-inner { gap: 16px; } .logo .logo-full, .masthead.is-stuck .logo .logo-full { display: none; } .logo .logo-word, .masthead.is-stuck .logo .logo-word { display: block; } /* Structural containment, because arithmetic alone kept being wrong. Two passes of measuring widths and tightening gaps both left the controls spilling past the island, because a measured sum only holds for the exact asset widths, font metrics and control count it was measured against — and the control count has already changed once. A flex row with a non-shrinkable logo will always overflow eventually. So the priority is declared instead of computed. The actions never shrink and never wrap; the logo yields first and clips its own overflow. If space runs out the wordmark loses a few pixels off its right edge, which is recoverable and nearly invisible, rather than the bag and menu buttons being pushed outside the pill, which is neither. */ .masthead-inner { flex-wrap: nowrap; } /* padding-right is set in the consolidated phone block near the end of this file, because .masthead.is-stuck .masthead-actions is declared after this point and would otherwise win on source order. */ .masthead-actions { flex: 0 0 auto; } .logo { flex: 0 1 auto; min-width: 0; overflow: hidden; } .logo .logo-img { max-width: 100%; } } /* The control-shrink media queries live AFTER the .icon-btn definition, near the bottom of this file. They were here originally and never took effect: .icon-btn's base rule is declared later in the source, and at equal specificity the later declaration wins whether or not the earlier one is inside a media query. Verified in the generated chrome.css, where the 36px and 34px rules both preceded the 38px base. */ /* The narrowest phones. The wordmark swap now happens at 767px above, so what is left here is the call button. iPhone SE 1 is 320px: content is 272px, and even with the wordmark and 34px controls the row needs 150 + 12 + 145 = 307px. The call button is the right thing to drop rather than shrinking type or the mark, because the call bar at the bottom of the viewport already carries "Call the shop" and never scrolls away — which is what the note beside .masthead-call has said all along. Without it: 150 + 12 + 106 = 268px inside 272px. Note for future edits: this is where adding a fifth control will break first. The header is width-bound on phones, not height-bound. */ /* The call button is hidden across all phone widths in the consolidated block near the end of this file, so only the gap tightens here. */ @media (max-width: 359px) { .masthead-inner { gap: 12px; } } /* Status bar clearance. The meta tag does not set viewport-fit=cover, so iOS should inset the safe area on its own — but a fixed bar at top:0 being drawn under the status bar is the most common cause of exactly this symptom, and the fallback is 0px, so on every device where it is unnecessary it costs nothing. */ .masthead { padding-top: env(safe-area-inset-top, 0px); } /* Logo and actions slide inboard so they clear the pill's radius. */ .logo, .masthead-actions { transition: padding var(--dur-reveal) var(--ease); } /* The actions still slide inboard to clear the pill radius. The logo does not: it becomes a fixed crop window, and padding on that window would eat into the wordmark rather than move it. */ .masthead.is-stuck .logo { margin-left: 16px; } .masthead.is-stuck .masthead-actions { padding-right: 12px; } /* Logo lockup */ .logo { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--on-paper); } .logo svg { height: 52px; width: auto; transition: height var(--dur-reveal) var(--ease); } .masthead.is-stuck .logo svg { height: 36px; } .logo .logo-mark { transition: transform 0.6s var(--ease); transform-origin: 26px 30px; } .logo:hover .logo-mark { transform: rotate(-6deg) scale(1.06); } /* One lockup, one asset, height animated. The reference swaps in a second PNG that was cropped without measuring its ink box, which amputates the bottom of the D/L monogram and leaves an "n" in the condensed state. Never crop a mark to fit a bar; scale the mark and let the bar follow it. */ /* Two states, two crops, both derived from the file's measured ink boxes (1012 x 248 source): D mark x 0-149 wordmark x 225-1008, y 62-154 (784 x 93) slogan x 225-1007, y 194-238 At rest the whole lockup shows at 52px. That is deliberately larger than the old 40px, because at 40px the slogan renders 7.3px tall and is a grey smudge — printing a tagline nobody can read is worse than not printing it. At 52px it comes out 9.4px and resolves. Scrolled, the lockup does not shrink; it changes crop. The D mark and the slogan leave and the wordmark alone is shown at 18px, which is 60% larger than the wordmark was inside the 30px full lockup while occupying less height in the bar. Shrinking a three-part lockup to fit a condensed bar makes all three parts illegible at once. Dropping two of them makes the third readable. */ /* Two assets rather than one image inside a crop window. The old approach positioned a single file inside a fixed overflow box using offsets hand-computed from a 1012x248 source. Swap the artwork and the maths silently breaks — which is exactly what happened when the authentic lockup went in: the window sliced the D off and the masthead read "EVICELAND". Both crops are now cut from the real file's MEASURED ink boxes by logosplit.mjs (lockup y 17-248, wordmark y 74-162) and toggled by display. Nothing to recompute, nothing to drift. The Apple Premier signature is deliberately cropped out of both. Apple's Channel Affiliate guidelines allow one Apple signature per surface and require it to sit secondary to the reseller's own identity; it already appears in the credentials card and the footer. */ .logo-img { display: block; width: auto; max-width: none; transition: height var(--dur-reveal) var(--ease); } /* The wordmark is the masthead logo now, at rest as well as scrolled, and the three-part lockup is retired from the header entirely. It was the full lockup — monogram, DEVICELAND, and "DIGITAL SALES, SERVICE AND SMILES." stacked under it — at 52px, which is what forced the bar to 96px and made the header read as a slab. Two rounds of complaint about header height were both really about this asset: the tagline is a third line of type in a bar that only needs one. Nothing is lost. The full lockup still appears at 48px in the footer, which is where a three-part identity has room to be read. Phones already forced the wordmark for width reasons (see the max-width:767px block above), so this makes every breakpoint agree rather than introducing a new state. */ .logo-full { display: none; height: 48px; } .logo-word { display: block; height: 20px; } @media (min-width: 1024px) { .logo-word { height: 22px; } } /* Scrolled: same asset, a shade smaller. The swap used to happen here; now only the size changes, so there is no asset switch mid-transition to catch half-drawn. */ .masthead.is-stuck .logo-full { display: none; } .masthead.is-stuck .logo-word { display: block; height: 18px; } .logo-invert { filter: none; } /* Apple channel signature. Apple's Identity Guidelines for Channel Affiliates require the signature to be rendered all-black or all-white with no tint, kept in a secondary position, and used once per surface. It is therefore absent from the masthead and appears only in the credentials card and the footer, at full density. The supplied file is 260x230 with the mark occupying x 6-259, y 110-219. The crop window is derived from that ink box, not guessed: at a 62px render width the scale is 62/260 = 0.2385, so the ink measures 60.3 x 26.0 and the window must be at least that wide or the final letterform is sliced. */ /* The signature is now a pre-trimmed asset, so there is no crop window and no offsets to get wrong. It used to be a 61x26 overflow box with the image pushed to top:-26.2px, left:-1.4px — numbers derived from a documented ink box of "x 6-259, y 110-219". The file actually measures x 3-257, y 112-217, so at a 62px render the ink landed at L -0.68px and the Apple glyph was sliced off its left edge in every section that showed it. Trimming the file to its real ink box (257x108, aspect 2.380) removes the entire mechanism. */ /* Width and padding are both derived from Apple's two stated signature limits, not chosen. Apple Identity Guidelines for Channel Affiliates (July 2019), Minimum Clear Space and Minimum Size, p.10: "For all Apple channel signatures, the minimum size is 8 mm in print and 35 pixels onscreen, measuring the height of the Apple logo." "The minimum clear space around the signature is equal to one-half the height of the Apple logo... Do not allow photos, typography, or other graphic elements to enter the minimum clear space area." The constraint is on the APPLE LOGO, not on the file. Measured on the ink of apple-premier-trim.png, the glyph occupies y 1-106 of 108 — 98.15% of the file height — so: rendered logo height = width x (108/257) x 0.9815 which at the previous width of 62px produced a 26.0px logo: the signature was shipping 26% under Apple's floor in the footer, the Receipts block and the PDP. Solving for 35px gives a minimum width of 84.85px, and the guidelines' own web figure — "a two-line Apple channel signature at the recommended size of 35 pixels high on website or email headers" — is the size to hit rather than exceed, so 86px it is (logo 35.5px). Clear space is half of that: 17.75px, taken to 18. box-sizing is declared rather than inherited because this rule is duplicated into chrome.css, which is generated without the `*` reset that sets border-box here — with padding load-bearing, the two sheets would otherwise disagree by 36px. */ .badge-apple { position: relative; display: block; box-sizing: content-box; width: 86px; padding: 18px; flex-shrink: 0; } .badge-apple img { display: block; width: 100%; height: auto; filter: brightness(0); } .badge-apple.is-reversed img { filter: brightness(0) invert(1); } /* .cert-badge is gone with the signature it positioned. Two Apple authorizations were being displayed inside a block that promotes the M5 Air by name and price, and the channel guidelines separate those two contexts explicitly (p.13): multiple authorizations belong on "your company's web page that describes your business capabilities... an About Us or Overview page", and "Do not display multiple authorizations on product promotions." The Receipts credential keeps both authorizations as text, which is the treatment the guidelines themselves prescribe wherever a signature does not fit the context — "refer to your Apple channel authorization in text". The one signature this page is allowed now sits in the footer, beside the Deviceland lockup, which is the only place on the page where a store identity is present for it to be secondary to. */ .foot .logo { color: var(--on-sand); } .nav { display: none; flex: 1; align-items: center; justify-content: center; gap: 4px; } @media (min-width: 1200px) { .nav { display: flex; } } .nav a { position: relative; padding: 8px 12px; font-size: 13px; font-weight: 450; color: rgba(20, 17, 14, 0.64); border-radius: var(--r-pill); transition: color 0.3s var(--ease); } /* The origin flips between states, so the rule wipes on from the left and retracts to the right rather than pulsing from one anchor. */ .nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; background: var(--ember); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-ui) var(--ease); } .nav a:hover { color: var(--on-paper); } .nav a.is-active { color: var(--on-paper); } .nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); transform-origin: left; } /* ------------------------------------------------------------ Persistent mobile action bar ------------------------------------------------------------ */ .callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 880; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair-light); border-top: 1px solid var(--hair-light); padding-bottom: env(safe-area-inset-bottom, 0px); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 -12px 30px -18px rgba(20, 17, 14, 0.35); /* This bar was setting a 397px MINIMUM WIDTH on the whole document. Grid items default to `min-width: auto`, which means they refuse to shrink below their min-content size. The two buttons here contain "Call the shop / Open until 6pm" and "20790 Hawthorne / Free lot · directions", so `1fr 1fr` was resolving to `198px 198px` — 397px including the gap — no matter how narrow the device was. The visible symptom was a vertical strip of cream down the right-hand edge, because the layout viewport was pinned at 397px while in-flow content sized to the real viewport. Its width was exactly the shortfall, which is why it was obvious on an SE and nearly invisible on a 12 Pro: 397 - 375 = 21px plainly visible 397 - 390 = 6px "a tiny vertical cream bar" minmax(0, 1fr) lets the tracks go below min-content, so the bar fits any width and the document floor disappears. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Hidden at rest, revealed once the page moves. Two reasons, and the first is a platform fact rather than a preference. iOS Safari overlays its bottom toolbar on top of fixed-bottom content while the URL bar is expanded, which is the state every page loads in — so the bar was sliced through its labels before the visitor did anything, and env(safe-area-inset-bottom) does not help because this is a toolbar, not a home-indicator inset. The toolbar collapses on first scroll. Appearing then is the only way to be full height on arrival. Second, it is redundant in the first viewport: the hero already shows (310) 357-4400 as a button. The bar earns its place the moment that button scrolls away, which is precisely when it now appears. */ transform: translateY(calc(100% + 14px)); transition: transform 420ms var(--ease); will-change: transform; } .callbar.is-in { transform: none; } /* Nothing to reveal for someone who has asked not to be animated: show it immediately and let the toolbar overlap resolve on its own. */ @media (prefers-reduced-motion: reduce) { .callbar { transition: none; } } /* Desktop has the address in the masthead, a call button in the masthead, and a visible hero CTA. The bar would be redundant chrome. */ @media (min-width: 1024px) { .callbar { display: none; } } /* 56px, comfortably past both the 24px WCAG 2.5.8 floor and the 44px Apple HIG recommendation, and past Material's 48dp. */ .callbar-btn { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 56px; padding: 8px 12px; background: rgba(248, 242, 232, 0.94); color: var(--on-paper); text-align: left; /* The grid track can now be narrower than this button's content, so the button has to be willing to be narrower too — otherwise it just overflows its own track and the 397px floor comes back one level down. */ min-width: 0; } .callbar-call { background: var(--ember-deep); color: var(--on-ember); } .callbar-btn:active { filter: brightness(0.94); } .callbar-btn svg { flex: 0 0 auto; } .callbar-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } /* The bold line is the label that matters — "Call the shop", "20790 Hawthorne" — so it truncates rather than wraps to two lines and pushes the bar taller. */ .callbar-txt b { font-size: 13.5px; font-weight: 600; letter-spacing: 0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .callbar-txt i { font-style: normal; font-size: 11px; letter-spacing: 0.04em; opacity: 0.78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The bar covers the last of the page, so give the footer room to clear it. */ @media (max-width: 1023px) { .foot { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } } /* Sits between the nav and the actions. Shown from 1024px, where there is room beside the collapsed nav; below that the callbar carries the address instead, which is stronger anyway because it is tappable for directions. */ .masthead-where { display: none; margin-left: auto; align-items: center; gap: 7px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; white-space: nowrap; color: rgba(20, 17, 14, 0.58); transition: color var(--dur-ui) var(--ease); } .masthead-where svg { color: var(--ember); flex-shrink: 0; } .masthead-where:hover { color: var(--on-paper); } @media (min-width: 1024px) { .masthead-where { display: inline-flex; } } /* The phone, kept but quieted. It was a bordered 38px pill — the same visual weight as the bag and the search icon beside it. On a page that sells online as well as by phone, the number should not out-shout the shopping controls. A rule under the digits instead of a box around them: still unmistakably a link, no longer a button. The number stays in the bar because this business genuinely converts on calls; only its volume changes. NOTE: an identical override was appended to chrome.css first and did nothing, because this rule lives in deviceland.css, which loads later and won. Same trap as the radius tokens — chrome.css and deviceland.css both describe this component, so a change has to be made where the winning copy lives. */ .masthead-call { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; color: var(--ink-3); transition: color var(--dur-ui) var(--ease); } .masthead-call svg { color: var(--ember-deep); } /* No underline. De-boxing it was right — it had the same weight as the bag — but replacing the box with a rule just swapped one piece of decoration for another, and in a masthead an underlined string reads as an unstyled default link. It also added a fourth horizontal line to a header that already has the folio's dividers and its bottom rule. The ember phone glyph is the affordance. Nothing else is needed. */ .masthead-call:hover { color: var(--ember-deep); } /* Phone-width masthead is logo + menu only; the callbar owns the phone number down there and owns it better, because it never scrolls away. */ @media (max-width: 599px) { .masthead-call span { display: none; } .masthead-call { padding: 0 11px; } } .masthead-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; } /* When the address is present it owns the auto margin, so the actions sit directly beside it instead of being pushed to the far edge. GATED TO >=1024px, and this was the bug behind every "hamburger outside the island" report. `~` matches on DOM order, not on display, and .masthead-where is display:none below 1024px — so on a phone this rule still applied, replaced `margin-left: auto` with a fixed 22px, and stopped the actions being right-aligned at all. Measured at 375px: .masthead-inner ran 4..371 with 24px padding, so the content box ended at 347, and .masthead-actions reported L232 R396 — 49px past it. Every island inset I tuned was downstream of that, which is why twelve attempts at the geometry never landed. */ @media (min-width: 1024px) { .masthead-where ~ .masthead-actions { margin-left: 22px; } } /* ------------------------------------------------------------ Phone masthead — every override in ONE place, declared last ------------------------------------------------------------ Placed here, after all the base masthead rules, on purpose. Three separate rules in this file have already been defeated by source order rather than by specificity — the icon-btn shrink queries, and the pair below — because they were written next to the other mobile rules near the top while their base declarations appear further down. At equal specificity the later declaration wins whether or not the earlier one sits in a media query. Anything that has to beat a base masthead rule belongs in this block. The geometry is now symmetric by construction rather than by arithmetic: .masthead-inner is the pill (inset 4px from the viewport), its own 24px padding is the clearance, and both the logo and the actions sit flush to that padding. Left inset and right inset are the same number, and it tracks --gut. Nothing here needs re-deriving when a control is added or an asset changes width. ------------------------------------------------------------ */ @media (max-width: 767px) { /* The call button goes, which is what the note beside .masthead-call has said all along: the call bar owns the phone number on a phone and owns it better, because it never scrolls away. It also buys ~45px, taking the row from 12px over to roughly 49px of slack at 375px — the difference between a layout that just fits and one that keeps fitting. */ .masthead-call { display: none; } /* Restores right-alignment that the sibling rule above was overriding. */ .masthead-where ~ .masthead-actions { margin-left: auto; } /* The 16px and 12px inboard nudges exist to clear the pill's radius on desktop, where the island is inset 24px inside the content box. On a phone the pill IS the content's box, so its padding is already the clearance and these only push the controls toward the cap they were meant to avoid. */ .masthead.is-stuck .logo { margin-left: 0; } .masthead.is-stuck .masthead-actions, .masthead-actions { padding-right: 0; } } /* Chrome components carry their own reset. ------------------------------------------------------------ Audited after the third time chrome.css silently lost something. The generator strips every bare element selector on purpose — that reset landing on Elessi's markup is what broke the product page early on — so all of these from the top of this file never reach a WooCommerce page: html scroll-padding-top body margin, background, colour, font, overflow-x img, svg display:block, max-width a color:inherit, text-decoration:none button the full control reset ul margin, padding, list-style h1-h3, p, dl, dd, dt margin: 0 Three of those matter to the chrome and were live defects, not risks: links in the masthead, nav sheet and footer were taking Elessi's link colour and underline; every footer list was showing bullets and a default indent; and footer paragraphs and definition lists were carrying UA margins. Scoping the same declarations to the components fixes them and, more usefully, means the next component added to chrome.css inherits a sane base instead of depending on a reset that will not be there. */ /* text-decoration only. NO color. ------------------------------------------------------------ `color: inherit` here was the same trap as the button reset: `.callbar a` is (0,1,1) and `.callbar-call { color: var(--on-ember) }` is (0,1,0), so the reset won and the call bar's label went from white to the dark colour it inherited from its parent. It was outranking .foot-col a, .nav a and every .btn-* variant sitting on an anchor for the same reason. Colour is declared by the components, which already do it — .nav a, .foot-col a, .callbar-call and .callbar-btn all set their own. The few plain links that relied on inheritance are given it explicitly below, so nothing depends on a blanket rule that can only be too strong or too weak. */ .masthead a, .nav-sheet a, .callbar a, .foot a { text-decoration: none; } /* Plain links with no colour of their own. Without these, Elessi's `a` rules reach them on a WooCommerce page, where chrome.css carries no element reset. */ .nav-sheet-nav a, .foot-legal a, .footnotes a, .foot-bar a { color: inherit; } .masthead ul, .nav-sheet ul, .callbar ul, .foot ul { margin: 0; padding: 0; list-style: none; } .foot p, .foot h1, .foot h2, .foot h3, .foot dl, .foot dd, .foot dt, .nav-sheet p { margin: 0; } .masthead svg, .nav-sheet svg, .callbar svg, .foot svg { display: block; max-width: 100%; } /* Chrome buttons carry their own reset. ------------------------------------------------------------ This file resets bare `button` near the top, and that was enough while the only consumer was the homepage. It is not enough for a WooCommerce page: chrome.css is generated from this file with every bare element selector stripped on purpose — that reset landing on Elessi's markup is what broke the product page once already — so `button` never made it across. The result was a menu toggle wearing Elessi's default button styling on the product page: an ember fill instead of a transparent hit area, and, more damagingly, Elessi's button padding, which widened it far beyond 38px and pushed it past the island and off the side of the screen. Same component, two appearances, and the overflow only on the page missing the reset. Declaring it on the components themselves means it survives extraction and both pages get one button. */ /* Deliberately does NOT set width or color. ------------------------------------------------------------ `.masthead button` is specificity (0,1,1) and `.icon-btn` is (0,1,0), so every property declared here outranks the component that follows. The first version of this reset included `width: auto` and `color: inherit`, and both won: width the menu toggle collapsed from 36px to 18px — the raw size of its own SVG — measured as #nav-toggle W18 against .icon-btn's 36. It hit only the hamburger because that is the one