/* ============================================================================= Pinnacle — site styles. RULES THIS FILE OBEYS, AND THE LINTER ENFORCES: · No raw colour, size, space, radius or z-index value. Only var(--token) from tokens.css (§3.8, §8.9). · Mobile-first. Every media query is min-width, and the only permitted widths are 480 / 768 / 1024 / 1280 — the four literals in §8.13, which are the sole exception to the rule above because custom properties are invalid inside a media query condition. · Cascade layers, not specificity wars. Forcing priority to beat WooCommerce is a bug — vendor CSS goes in the `vendor` layer instead (§8.14). · Logical properties over left/right. Native nesting one level deep, max. ========================================================================== */ @layer reset, vendor, base, layout, components, utilities; /* ============================================================================= RESET ========================================================================== */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { /* THIS IS WHAT PROTECTS THE NO-DARK-MODE DECISION (§8.2, §8.14). Without it, Chrome on Android can force-darken the page and re-render every product photo's colour — the one thing a flooring catalogue cannot allow. */ color-scheme: only light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* honoured against reduced-motion in tokens.css */ /* Reserves the scrollbar's own width whether or not it is currently scrollable, so locking scroll for a dialog (main.js, catalogue.js) never shifts the page a scrollbar-width sideways or leaves a second, inactive track visible behind the modal's own. Progressive: browsers without support keep the pre-existing (smaller) jump, not a broken layout. */ scrollbar-gutter: stable; } body { min-height: 100vh; -webkit-font-smoothing: antialiased; } img, picture, video, canvas { display: block; max-inline-size: 100%; block-size: auto; } /* SVG IS DELIBERATELY NOT IN THAT RULE. `block-size: auto` is a CSS declaration and therefore beats the `height` attribute — so every inline icon lost the size icons.php asked for and collapsed to a speck. Raster media needs `block-size: auto` to stay in proportion when `max-inline-size` clamps it; an inline SVG carries width AND height and must keep both. */ svg { display: block; max-inline-size: 100%; } input, button, textarea, select { font: inherit; color: inherit; } /* `::placeholder` IS A SEPARATE PSEUDO-ELEMENT, not matched by the rule above — it does not inherit its originating input's font by default in every engine, so without an explicit rule here every placeholder on the site (every `.field input`/`textarea` across every form) fell back to the browser's own UA-stylesheet font for placeholder text rather than --font-body, most visibly on WebKit/iOS. `font: inherit` pulls the input's own already-correct computed font (size, weight, family); colour is set separately since a placeholder still needs the --ink-500 meta colour (§8.2, §8.12), not the input's actual (inherited) text colour. Replaces the two narrower, colour-only versions of this rule that used to live on `.search-panel__field` and `.mobile-nav__search input` — same value, now one definition instead of three. */ /* SIZE IS PINNED, THE REST IS INHERITED, and the split is the whole point. `font: inherit` above pulls the input's computed size too — which on touch is --fs-input (16px), because iOS zooms the page when a focused input's text is under 16px and never zooms back (§8.3). That floor is about the text a visitor TYPES; it has nothing to do with the placeholder, which iOS does not measure. Inheriting it anyway made every placeholder on mobile render at 16px while the same field on a desktop pointer showed 12px. Overriding just the size keeps the family, weight and line-height coming from the input (which is what the rule above exists for) and puts the placeholder at the 12px UI baseline everywhere. Shrinking the INPUT to get the same look is the trap: it reads identically on a desktop browser and reintroduces the zoom bug on every real phone. */ input::placeholder, textarea::placeholder { font: inherit; font-size: var(--fs-small); color: var(--ink-500); } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul[class], ol[class] { list-style: none; padding-inline-start: 0; } :target { scroll-margin-block-start: var(--chrome-h); } } /* ============================================================================= BASE — element defaults ========================================================================== */ @layer base { :root { /* Fixed top chrome: header, plus the notice bar when it is present. Every anchor target uses this as scroll-margin, or in-page links land beneath the header (§8.13). Never exceeds 120px on mobile. */ --notice-h: 0px; --chrome-h: calc(var(--header-h) + var(--notice-h)); } body { background-color: var(--bg); color: var(--ink-700); font-family: var(--font-body); font-size: var(--fs-body); /* 12px base, 14px from --bp-lg (§8.3) */ font-weight: var(--fw-body); line-height: var(--lh-body); } /* ---- Image skeleton loading state (component states, §8.15) ---------- Every lazy-loaded image on the site (product cards, galleries, review avatars -- anywhere wp_get_attachment_image() was called with loading="lazy") shows a shimmering placeholder instead of blank space until it decodes, sized by its own width/height attributes so nothing shifts when the shimmer is replaced by the photo. The LCP image on each page is deliberately never loading="lazy" (§8.13), so it never carries this and never waits behind it. `.is-loaded` is added by main.js on the image's load/error event; an image that is already complete when the script runs (bfcache, an instant cache hit) gets the class immediately instead of shimmering forever. Progressive-only: with JS disabled the attribute selector still matches and the image simply keeps its placeholder background until the browser paints the photo over it. */ img[loading="lazy"]:not(.is-loaded) { background-image: linear-gradient( 100deg, var(--bg-tint) 30%, var(--bg-alt) 55%, var(--bg-tint) 80% ); background-size: 200% 100%; background-position: 200% 0; animation: pinnacle-skeleton var(--dur-shimmer) ease-in-out infinite; } @keyframes pinnacle-skeleton { to { background-position: -200% 0; } } /* NEVER PIN "wght" IN `font-variation-settings` — use `font-weight`. `font-variation-settings` is an INHERITED property and it OVERRIDES `font-weight` on the axis it names. A `"wght" 400` on `body` therefore cascades into every descendant and silently freezes the whole site at 400: every rule that asks for --fw-ui (500), --fw-subhead (600) or --fw-display (700) without ALSO restating the axis renders regular, and the stylesheet reads correct while the page does not. The product card is where it showed — the title is an

and got its weight from the h3 rule's own pin, while the price beside it asked for 600 through `font-weight` and drew at 400, which is why the price looked like a different face from the theme (§5.7). `font-weight` sets the same axis, is not inherited past what it should be, and needs no per-rule duplication. Variation settings below pin ONLY the axes `font-weight` cannot reach: Bricolage's `wdth` and `opsz` (§8.3). */ h1, h2, h3, h4 { color: var(--ink-900); line-height: var(--lh-heading); text-wrap: balance; } /* Bricolage is DISPLAY / H1 / H2 ONLY (§8.3). Three axes, ALL PINNED — the unpinned defaults do not match the specimen. `opsz` is an OPTICAL size axis: it is not a size, it tells the font which drawing to use at the size it is about to be rendered, thinning the strokes and tightening the spacing as it climbs. Pinning it to one value across both headings (it was 24 for everything) drew the H1 with the H2's letterforms. Each now carries roughly its own rendered size. */ h1, h2 { font-family: var(--font-display); font-weight: var(--fw-display); letter-spacing: -0.01em; } h1 { font-size: var(--fs-display); line-height: var(--lh-display); font-variation-settings: "wdth" 100, "opsz" 30; letter-spacing: -0.015em; } h2 { font-size: var(--fs-h2); font-variation-settings: "wdth" 100, "opsz" 20; } /* ---- The section-heading role (§8.3) ------------------------------------- A top-level section heading on a public page. It is an h2 semantically - the page has one h1 - but it takes --fs-section rather than --fs-h2, which is tuned for a heading inside a column of text and does not hold its own beside photography. It was briefly on --fs-display instead. That read as too loud: 32px is the h1 size, so on interior pages the section headings matched the page title outright, and a heading that repeats six or seven times down a page does not want the same weight as the one that names it. ONE RULE, NOT A DECLARATION PER COMPONENT. Six components had each grown their own copy of this (room tiles, home categories, before/after, the hub sections, destination sections, the blog featured title) while nine more peer headings never got one and silently fell through to --fs-h2. That is how the home page ended up rendering eight sibling section headings at two different sizes with no hierarchy to justify the split. Adding the copy to the other nine would have made fifteen copies of the same three lines, so the role is declared once here and the components keep only their margins. Only two declarations are needed: `h1, h2` above already supplies --font-display and --fw-display, so the per-component font-family and font-weight were restating what they already had. `opsz` is pinned to 25, between h2's 20 and h1's 30. It is an OPTICAL size axis, so it has to track the size the text is ACTUALLY rendered at, and --fs-section lands between the two. Left at the h2 default of 20 - which is what the six older per-component copies did, none of them setting the axis - the heading is drawn with letterforms meant for a smaller size, the same mismatch the h1/h2 comment above describes. The ladder now runs 20 · 25 · 30 against 23 · 27 · 32. */ .blog-featured__title, .category-cards__heading, .contact-close__heading, .contact-message__heading, .destination-section__heading, .faqs__heading, .home-appointment__heading, .home-before-after__title, .home-brands__heading, .home-categories__heading, .home-cities__heading, .home-faq__heading, .hub-section__title, .next-steps__heading, .process__heading, .projects-section__heading, .rail__heading, .room-tiles__heading { font-size: var(--fs-section); line-height: var(--lh-display); font-variation-settings: "wdth" 100, "opsz" 25; } /* H3 and below: Outfit. The irregularity is an asset at 44px and a liability at 17px in a spec box. */ h3 { font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-subhead); letter-spacing: -0.005em; } /* H4 is body-size by design, separated by weight AND colour (§8.9). Weight alone was not enough separation once the sizes tightened. */ h4 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: var(--fw-subhead); } /* SALE PRICES: WooCommerce renders them as original + current, and the reset that normally tames those ships in woocommerce-general.css, which is dequeued for a catalogue that doesn't sell (§8.17). Without it the UA default underlines every current price — a treatment that appears nowhere else in the system, on the one number a visitor is deciding on. Both elements are aria-hidden in the markup, with screen-reader-text carrying the spoken version, so this is purely visual (§5.3, §5.7). */ del { color: var(--ink-500); font-weight: var(--fw-body); } ins { text-decoration: none; background: none; color: inherit; } a { color: inherit; text-underline-offset: 0.2em; } /* Icons are solid marks filled with currentColor (icons.php), so they take their colour from whatever text they sit beside and need no colour rule of their own. `flex: none` keeps one from being squeezed to a sliver inside a tight CTA bar; the baseline nudge stops it riding high against 17px text. */ .pinnacle-icon { display: inline-block; flex: none; vertical-align: -0.125em; } /* …EXCEPT INSIDE AN ICON-ONLY CONTROL, WHERE THAT NUDGE IS THE BUG. * * `vertical-align: -0.125em` sits an icon on a text baseline, which is right * when it runs beside a label. But these buttons wrap their mark in a * — and that span is an inline box, so it builds a LINE BOX around the SVG: * the span ends up taller than the icon, the extra sits under it, and the * mark rides high inside a button that is itself perfectly centred. The * hamburger looked a couple of pixels off vertical against the header for * exactly this reason, and every other icon-only control had it too. * * Making the wrapper a grid removes the line box, so `place-items: center` * on the button actually centres the glyph rather than a text box containing * it. `line-height: 0` covers the case where the wrapper is missing and the * SVG is a direct child. */ .nav-trigger__icon, .mobile-nav__close > [aria-hidden], .mobile-nav__search button > [aria-hidden], .notice-bar__close > [aria-hidden], .primary-nav__caret > [aria-hidden], .rail__arrow > [aria-hidden], .search-toggle > [aria-hidden], .floating-cta__icon { display: grid; place-items: center; line-height: 0; } /* FOCUS RING (§8.6). :focus-visible, not :focus — the latter also rings a button clicked with a mouse and reads as a stuck state. This is the ONE sanctioned decorative use of --accent, exempt from the scarcity rule in §8.2, because accessibility outranks the aesthetic. AODA applies (§6.10): removing the outline without a replacement is a bug, not a style. */ :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--r-sm); } /* GREY, NOT THE ACCENT TINT: double-click or drag-select text and the highlight is a plain neutral fill, not a wash of the maple-red accent the catalogue reserves for the one primary action per viewport (§8.2). */ ::selection { background-color: var(--bg-alt); } /* The site-wide rule above leaves TEXT COLOUR alone, which is correct on --bg (a light fill under whatever ink colour the text already has) but breaks inside the estimator's dark card: --bg-alt is still a LIGHT grey, and --ink-on-dark text is white, so selecting it read as white-on- near-white — the exact bug this fixes. Same "neutral grey fill, not --accent" idiom as the rule above, just with both ends of its light/dark relationship flipped for a dark surface. */ .estimator ::selection { background-color: var(--ink-on-dark-muted); color: var(--ink-900); } hr { border: 0; border-block-start: 1px solid var(--line); } small { font-size: var(--fs-small); } } /* ============================================================================= LAYOUT ========================================================================== */ @layer layout { .container { inline-size: 100%; max-inline-size: var(--w-max); margin-inline: auto; padding-inline: var(--gutter-x); } /* Prose blocks — blog, city pages, FAQ — cap at ~60–70ch (§8.3, §8.4). */ .prose { max-inline-size: var(--w-prose); } .prose > * + * { margin-block-start: var(--s-6); } .prose h2 { margin-block-start: var(--s-10); } .prose h3 { margin-block-start: var(--s-8); } .prose ul, .prose ol { padding-inline-start: var(--s-6); } .prose li + li { margin-block-start: var(--s-2); } .prose a { color: var(--ink-900); text-decoration: underline; text-decoration-color: var(--line); } .prose a:hover { text-decoration-color: var(--ink-500); } /* NO PADDING HERE, DELIBERATELY (§8.18 #4). Every section owns its own complete block-start AND block-end rhythm now — see the comment on .destination-section for the rest of that story — so a page's closing space comes from whichever section happens to render last, not from a shared compensator here. A second bottom padding on the wrapper around a section that already supplies its own would stack into a double gap at the exact spot §8.4 exists to prevent. */ .site-main { display: block; } /* Adjacent major sections: a hairline, not empty page, is what says "new topic" (§8.4, §8.6). --line alone is 1.24:1 on --bg and disappears the way the breadcrumb separators did; mix it with --ink-500 so the rule stays in the token set and still reads. Recessed bands (--bg-alt) keep their fill and no longer paint their own block borders, so two rules never stack. Heroes are the first child, so this selector never fires on the hero itself — nothing should draw above the very first section on a page — but it fires normally on whatever comes right after one, the same as any other section-to-section boundary. */ /* SCOPED TO .site-main, not just the wrapper classes below — .home and .page are also what WordPress's own body_class() puts on for the front page and every static Page, and an unscoped selector matches BOTH the intended content wrapper and body's own direct children. That silently drew this hairline across
,
,