/* Theme Name: Lomond Theme URI: https://lomondfurniture.co.uk/ Author: Lomond Furniture & Homeware Description: Editorial retail theme for Lomond Furniture & Homeware. Brand tokens are sampled from the supplied logo, never approximated. Version: 0.1.0-staging Requires at least: 6.0 Tested up to: 7.0 Text Domain: lomond */ /* -------------------------------------------------------------------------- BRAND TOKENS — sampled from the supplied logo, never approximated. Re-sampled 2026-09-01 from the owner's updated transparent PNG (attachment #220). Values come from FULLY OPAQUE pixels only: including semi-transparent antialiased edges drags the mean darker and yields a colour that is in the file but not in the mark. Navy #00142E 62,865 px · 18.43:1 on white Taupe #655145 12,492 px · 7.46:1 on white The previous logo sampled at #091D36 / #81736D. The taupe change matters beyond aesthetics: the old value cleared AA for body text by a hair (4.56:1), so a darkened derivative had to carry copy. The new taupe is comfortably readable at 7.46:1 and is used directly. -------------------------------------------------------------------------- */ :root { --lf-navy: #00142E; --lf-navy-80: #1B2E45; --lf-navy-60: #44546A; --lf-taupe: #655145; /* 7.46:1 — safe for text */ --lf-taupe-deep: #4E3F35; --lf-taupe-mid: #8A7A6C; /* 4.60:1 — de-emphasised text only, still AA */ --lf-taupe-pale: #E2DAD2; --lf-taupe-wash: #F2EDE8; --lf-ivory: #FBF9F6; --lf-stone: #F5F2EE; /* Two warmer surfaces, used ONLY by the New Arrivals row and the Timeless strip. The rest of the page keeps ivory/stone; these exist so those two sections read as one warm editorial passage rather than as two more interchangeable panels. */ --lf-cream: #FAF7F1; --lf-cream-deep: #F2ECE3; /* Antique gold — DETAIL ONLY, and only in the Timeless strip. Never a background, never a heading, never body copy: navy stays the voice and gold is the punctuation. #8D6A3A is chosen over the lighter candidates because it is the only tone in the range that clears WCAG AA as TEXT on this palette — 4.61:1 on --lf-cream, where #98713E manages 4.11:1 and #A17C45 about 3.7:1. The eyebrow it carries is 11.5px, so it is small text and needs the full 4.5:1; a lighter gold would have meant either failing the check or restricting gold to decoration and leaving the eyebrow taupe. */ --lf-gold: #8D6A3A; /* The same antique gold, one step lighter, for use ON navy. #8D6A3A manages only 3.5:1 against --lf-navy and goes muddy; #A17C45 reaches 4.5:1 and still reads as the same accent beside it on the light panels. */ --lf-gold-on-navy:#A17C45; /* Brighter again, for gold sitting ON PHOTOGRAPHY. A scrim over a photograph is never as dark as a flat navy fill and it varies picture to picture, so the accent needs more lift than #A17C45 to stay legible — this reaches roughly 5.4:1 over the darkest part of the tile gradients. */ --lf-gold-light: #C9A063; /* A fourth gold, for a solid gold AREA sitting on the PAGE GROUND rather than on navy or on a photograph — currently only the merchandising tag's backing sheet. The two values either side of it were both tried against it and both fail for the opposite reason: #A17C45 is tuned to sit ON navy and goes muddy where it emerges onto cream, and #C9A063 is tuned for a thin mark over photography and reads sandy rather than gold when spread across a solid 3px band. Decorative only — nothing is ever set in it. */ --lf-gold-sheet: #B8904F; --lf-gold-line: rgba(141, 106, 58, .24); --lf-gold-rule: rgba(141, 106, 58, .5); --lf-white: #FFFFFF; --lf-charcoal: #2B2A28; --lf-line: #E7E1DA; --lf-line-strong: #D4CABF; /* Cool navy tints. The palette is deliberately warm everywhere else; these exist so SELECTION reads as a different kind of signal from decoration, and they are used nowhere but the bundle builder's chosen state, its saving chip and its total. */ --lf-navy-wash: #EEF2F7; --lf-navy-tint: #DEE6F0; --lf-navy-line: #B9C6D8; --lf-serif: "Cormorant Garamond", "Times New Roman", Times, serif; --lf-sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --lf-max: 1440px; --lf-gutter: clamp(1.25rem, 3vw, 3rem); --lf-ease: cubic-bezier(.22,.61,.36,1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--lf-white); color: var(--lf-charcoal); font-family: var(--lf-sans); font-size: 16px; line-height: 1.65; font-weight: 300; letter-spacing: .005em; /* * Horizontal overflow is a named QA failure; this is the structural guard. * `clip` rather than `hidden`: `overflow-x: hidden` silently turns * into a scroll container, and every `position: sticky` descendant then * sticks to a container that never scrolls — which is to say, not at all. * `clip` contains the overflow without creating that scroll container. */ overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, .lf-serif { font-family: var(--lf-serif); font-weight: 500; color: var(--lf-navy); letter-spacing: -.005em; line-height: 1.12; margin: 0 0 .5em; } h1 { font-size: clamp(2.4rem, 5vw, 4rem); } h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); } h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); } p { margin: 0 0 1.1em; } .lf-wrap { max-width: var(--lf-max); margin-inline: auto; padding-inline: var(--lf-gutter); } .lf-wrap--narrow { max-width: 860px; } .lf-eyebrow { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--lf-taupe); font-weight: 400; margin: 0 0 1rem; } /* --------------------------------------------------------------- buttons */ .lf-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: 0 1.9rem; font-family: var(--lf-sans); font-size: .82rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--lf-navy); background: var(--lf-navy); color: #fff; cursor: pointer; transition: background .3s var(--lf-ease), color .3s var(--lf-ease), border-color .3s var(--lf-ease); } .lf-btn:hover { background: var(--lf-navy-80); border-color: var(--lf-navy-80); } .lf-btn--ghost { background: transparent; color: var(--lf-navy); } .lf-btn--ghost:hover { background: var(--lf-navy); color: #fff; } .lf-btn--wide { width: 100%; } /* PROBLEM 8. The primary control was the same 48px as every secondary button on the page, so it dominated nothing. On the product page it is the one thing the column exists for: taller, wider tracking, and a hair more weight. The wishlist keeps its own height, so the two are no longer peers. */ .lf-pdp__buy .lf-btn--wide { min-height: 58px; font-size: .88rem; letter-spacing: .18em; } a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--lf-navy); outline-offset: 3px; } /* --------------------------------------------------------------- utility bar */ .lf-utility { background: var(--lf-navy); color: rgba(255,255,255,.86); font-size: .74rem; letter-spacing: .1em; } .lf-utility ul { display: flex; gap: 2.5rem; justify-content: center; align-items: center; list-style: none; margin: 0; padding: .6rem 0; flex-wrap: wrap; line-height: 1.35; } /* * The bar is one line from 1024 up. Below that the three claims stack, and the * ROW gap is what made the stack dominant: at 2.5rem between rows the bar * measured 98px on a tablet and 108px on a phone — 13% of a 844px viewport * spent before the shopper sees anything. The claims themselves are untouched; * only the space between them is. Column gap is preserved for the widths that * still fit two on a line. */ @media (max-width: 1023px) { .lf-utility ul { gap: .45rem 2rem; padding: .55rem 0; } } .lf-utility li { display: flex; align-items: center; gap: .5rem; } /* The utility icons inherit no size of their own and rendered far larger than the 12px text beside them, especially once the bar wrapped on mobile. */ .lf-utility svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.3; } /* --------------------------------------------------------------- header * TWO ROWS: an identity row (logo / utilities) over a navigation row. * * The single-row grid gave the nav a 928px centre column at every width from * 1440 up, and the eight labels need 965px. That 37px is the whole of the * "messy header" — three labels wrapped, and because every link was top-aligned * inside a stretched row, a wrapped label's first line sat 3px above the * single-line labels beside it. Shrinking the type until it fitted would have * treated the symptom. Giving the nav the container's full width removes the * constraint: the same labels now occupy about half the row, so nothing wraps, * the gaps can breathe, and every label sits on one baseline because every * label is one line. * ------------------------------------------------------------------------- */ .lf-header { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.96); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--lf-line); transition: box-shadow .3s var(--lf-ease); } /* * THE SCROLLED STATE CHANGES COLOUR, NEVER GEOMETRY. * * A `position: sticky` element still occupies its space in normal flow, so * shrinking the header on scroll shrinks the document with it. Measured on the * live page: condensing from 138px to 110px moved every section 28px up the * document and cut 28px off the body height — the page sliding under the reader * mid-scroll. The height is therefore constant at every scroll position, and * the "settled" cue is carried by the backdrop going fully opaque and the rule * beneath it strengthening. Both are paint-only. */ .lf-header.is-scrolled { background: #fff; border-bottom-color: var(--lf-line-strong); box-shadow: 0 1px 18px rgba(9, 29, 54, .05); } /* ---- row 1: brand · search · utilities ---- * Three zones sized by the grid, not by whatever is left over. The previous * `1fr auto` split put the logo against the left edge, the controls against the * right, and roughly a thousand pixels of nothing between them. The centre * column is now the site's search, which is the one thing a catalogue header * should never make a shopper hunt for. */ .lf-header__inner { display: grid; /* EQUAL outer columns, not `auto`. With `auto … auto` the centre column is centred between the logo and the utilities, and since those are 105px and 168px wide the field landed 31px left of the page's centre line — visibly out of step with the nav row underneath, which IS page-centred. Two `1fr` columns put the field's midpoint exactly on the nav's. */ grid-template-columns: 1fr minmax(320px, var(--lf-hsearch-max, 520px)) 1fr; align-items: center; gap: clamp(1.25rem, 3.5vw, 3.5rem); /* The row is sized by the logo plus a hairline of space, not by generous padding: 54px of logo inside a 64px row. */ padding-block: 5px; } /* `justify-self: start` is load-bearing. As a stretched grid item the logo link took the whole column — an invisible click target across most of the header. */ .lf-logo { display: flex; align-items: center; justify-self: start; } .lf-actions--utility { justify-self: end; } /* The supplied lockup is stacked (monogram over wordmark over descriptor, aspect ~1.95), so it is sized by HEIGHT; 54px renders ~105px wide, the confident end of the range without the descriptor line closing up. */ .lf-logo img { height: 54px; width: auto; max-width: 220px; } /* ---- the persistent search field ---- * A rectangle, not a pill: 2px of radius, a warm hairline and the site's own * ivory rather than a grey input fill. It has to read as somewhere to type at a * glance, which rules out a bare underline on white; and it must not read as a * marketplace, which rules out a filled capsule with a button on the end. */ .lf-hsearch { position: relative; display: flex; align-items: center; min-width: 0; height: 42px; background: var(--lf-ivory); border: 1px solid var(--lf-line); /* 9px. A 2px radius on a 42px box reads as an unstyled input; half the box height reads as a pill, and a pill in a furniture header reads as a search engine. 9px is the value where the corner is clearly deliberate and the field still reads as a rectangle — roughly a fifth of its height, the same relationship the site's other soft corners use. */ border-radius: 9px; /* No padding on the control itself: the button has to reach the border, so the field's own inset moves onto the icon and the input instead. */ padding: 0; transition: border-color .18s var(--lf-ease), background .18s var(--lf-ease), box-shadow .18s var(--lf-ease); } .lf-hsearch > svg { flex: none; align-self: center; width: 17px; height: 17px; margin: 0 11px 0 17px; stroke: var(--lf-navy); fill: none; stroke-width: 1.5; } .lf-hsearch__input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: none; padding: 0; margin: 0; font-family: var(--lf-sans); font-size: .875rem; letter-spacing: .01em; color: var(--lf-navy); -webkit-appearance: none; appearance: none; } .lf-hsearch__input::placeholder { color: var(--lf-taupe-mid); opacity: 1; } .lf-hsearch__input:focus { outline: none; } .lf-hsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; } /* THE BUTTON IS PART OF THE FIELD, not a control parked beside it. * * It was previously hidden until focused, on the reasoning that Enter already * submits. That is true and still true — but it assumes the shopper knows it, * and a furniture buyer is not necessarily a keyboard-shortcut user. The * primary action is now stated. * * Negative margins pull it over the field's own 1px border on three sides, so * the navy meets the field's outer edge with no hairline of ivory between them * and no gap where the two meet. Its right corners carry the field's 9px; its * left corners are square, which is what makes the pair read as one object. */ .lf-hsearch__submit { flex: none; width: 100px; align-self: stretch; margin: -1px -1px -1px 0; padding: 0; border: 0; border-radius: 0 9px 9px 0; background: var(--lf-navy); color: #fff; font-family: var(--lf-sans); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .18s var(--lf-ease); } .lf-hsearch__submit:hover { background: var(--lf-navy-80); } /* The ring sits outside the control, where it is legible against the header's white rather than against the button's own navy. */ .lf-hsearch__submit:focus-visible { outline: 2px solid var(--lf-navy); outline-offset: 3px; } .lf-hsearch:hover { border-color: var(--lf-line-strong); } /* Focus is carried by the FIELD, so the whole control responds as one object rather than sprouting a ring around the input inside it. Gold, because the palette reserves gold for the thing being acted on. */ .lf-hsearch:focus-within { border-color: var(--lf-navy); background: var(--lf-white); /* Navy, and a 3px wash of navy outside the hairline rather than a second border inside it. The halo keeps the field's own geometry — nothing moves on focus — and reads as the control waking up rather than as a browser glow. Deliberately not the gold used elsewhere for accent: this is the brand's voice colour saying "you are typing here". */ box-shadow: 0 0 0 3px rgba(0, 20, 46, .10); } /* The toggle only exists where the field cannot fit. Doubled class: the generic `.lf-actions button` rule below is (0,1,1) and would otherwise win on source order and put a second search entry point beside the first. */ .lf-actions .lf-actions__searchtoggle { display: none; } /* ---- row 2: primary navigation ---- A hairline above it, so the two rows read as one stack rather than as a bar with something underneath. The nav itself carries the wrap, so its links are measured against the container's full width, not against what is left over between the logo and the icons. */ .lf-header__navrow { border-top: 1px solid var(--lf-line); } .lf-nav > ul { display: flex; justify-content: center; align-items: stretch; gap: clamp(1.5rem, 3vw, 3.25rem); list-style: none; margin: 0; padding: 0; } .lf-nav a { display: flex; align-items: center; justify-content: center; /* 44px, not less. The composition wants 38-44 and this is the top of it, because the theme's own accessibility rule floors nav links at a 44px touch target (see REFINEMENTS / L-015) and quietly undercutting that to win a pixel would be trading a real rule for a cosmetic one. The row is therefore 45px: 44 plus its hairline. */ height: 44px; padding: 0; line-height: 1; /* One line, always. The row has roughly twice the width the labels need, so this can never truncate — it is here to make wrapping impossible rather than merely unlikely if a label is ever renamed. */ white-space: nowrap; font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; color: var(--lf-navy); position: relative; transition: color .25s var(--lf-ease); } /* The underline sits on the row's own baseline rather than on each link's box, so it is the same distance below every label. */ /* The hover rule is GOLD, not navy: it is the page's accent doing the one job the palette reserves for it — marking the thing you are pointing at — and it separates "hovered" from "current" without adding a second navy line. */ .lf-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: var(--lf-gold); transform: scaleX(0); transform-origin: center; transition: transform .18s var(--lf-ease); } .lf-nav a:hover::after, .lf-nav a:focus-visible::after, .lf-nav__item.is-open > a::after { transform: scaleX(1); } /* ---- utilities ---- One optical size, one stroke weight, one target size. The glyphs themselves were redrawn to a common grid (see `lomond_icon()`); this only has to keep them on it. */ /* A real gap between the controls. At `gap: 0` the three 42px targets abutted, so the glyphs were 23px apart with nothing between them and the group read as one crowded cluster rather than three separate things to click. */ .lf-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; } /* The target is 44px of whitespace around a 21px glyph — comfortably clickable without precision, and invisible as a control. No circle, no plate, no bordered box at rest. */ .lf-actions button, .lf-actions a { background: none; border: 0; padding: 0; color: var(--lf-navy); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; border-radius: 8px; position: relative; transition: color .18s var(--lf-ease), background-color .18s var(--lf-ease); } /* Colour carries the hover; the ground behind it is a 4% navy wash, which is enough to show WHICH target you are in without becoming a bubble on a background that is itself white. */ .lf-actions button:hover, .lf-actions a:hover { color: var(--lf-gold); background-color: rgba(0, 20, 46, .04); } /* The header heart says whether anything is saved, using the same gold the product card's own wishlist button already uses for its pressed state — one state, one colour, wherever it appears. The count is the source of truth: the script unhides it exactly when the list is non-empty. */ .lf-header__wish:has(.lf-header__wishcount:not([hidden])) svg { /* A WASH, not a fill. The product card's own wishlist button turns solid gold when pressed, but that is a 38px control with one job; at 21px in a row of line glyphs a solid gold heart becomes the loudest thing in the header and says a second time what the counter beside it already says. The outline stays navy so the glyph still reads as part of the set. */ fill: var(--lf-gold-line); } /* 21px at 1.6, up from 19 at 1.5. The set was drawn to one optical box, so a single size and a single stroke keep all three at identical visual weight — the increase is applied to the family, never to one glyph. */ .lf-actions svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; transition: fill .18s var(--lf-ease), stroke .18s var(--lf-ease); } /* The search control reads as a field on desktop and as a glyph where there is no room for the word. `clip` rather than `display:none` so the word stays in the accessible name at every width. */ .lf-burger { display: none; } /* Condensed once the page moves: the identity row gives up a little height and the nav row keeps all of its own, so the bar stays useful without dominating a scrolled page. The script republishes --lf-headh on every scroll, so the sticky filter toolbar that offsets against it follows automatically. */ .lf-header { transition: background .3s var(--lf-ease), border-color .3s var(--lf-ease), box-shadow .3s var(--lf-ease); } /* --------------------------------------------------------------- hero */ .lf-hero { background: var(--lf-stone); position: relative; overflow: hidden; } /* * PAIRED hero — a text panel beside the photograph, not text on top of it. * * The first attempt overlaid the headline on the image. Rendered, the words sat * directly across the coffee table's glass top and the supporting sentence was * illegible: measured worst-case contrast in the text area was 1.01:1. The fix * is not a heavier scrim, which would destroy the photograph we went to some * trouble to find. It is to stop putting text over the subject. * * The design direction allows either: "Overlay OR PAIR it with restrained * editorial copy." Pairing is the honest answer for photography whose subject * fills the frame. */ .lf-hero--image { background: var(--lf-navy); } .lf-hero--image .lf-hero__frame { /* Image first in the DOM, so column one is the photograph. It gets the larger share — the panel only needs enough width for the copy to set well. */ display: grid; grid-template-columns: 1.3fr 1fr; align-items: stretch; min-height: min(72vh, 680px); } .lf-hero--image .lf-hero__inner { display: flex; align-items: center; background: var(--lf-navy); padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem); max-width: none; margin: 0; } .lf-hero--image .lf-hero__copy { max-width: 30rem; } .lf-hero--image .lf-hero__bg { position: relative; overflow: hidden; } .lf-hero--image .lf-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 46%; } /* A whisper of navy at the seam so the panel and the photograph read as one composition rather than two boxes butted together. */ .lf-hero--image .lf-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,29,54,.55) 0%, rgba(9,29,54,.10) 14%, transparent 30%); } .lf-hero--image h1 { color: #fff; font-size: clamp(2.3rem, 3.4vw, 3.5rem); } .lf-hero--image p { color: rgba(255,255,255,.82); } .lf-hero--image .lf-eyebrow { color: var(--lf-taupe-mid); } .lf-hero--image .lf-btn { background: #fff; border-color: #fff; color: var(--lf-navy); } .lf-hero--image .lf-btn:hover { background: transparent; color: #fff; } .lf-hero--image .lf-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .lf-hero--image .lf-btn--ghost:hover { background: #fff; color: var(--lf-navy); } /* * THE TWO HERO BUTTONS, WHEN THEY WRAP. * * `.lf-hero__cta` had no rule at all: a plain block containing two inline-flex * anchors, so their separation was whatever the whitespace between the two tags * happened to collapse to. Side by side that is about 4px. Stacked it is ZERO — * measured at 390, 430 and 1024, where the two buttons meet edge to edge and * read as one 96px slab rather than as a primary action and a secondary one. * * 1024 IS AFFECTED TOO, and not obviously: the hero is a two-column grid there, * so the copy column is 363px and the buttons need 430px. They wrap on a * desktop-width screen. * * `row-gap` alone is the fix. `column-gap` is set to the 4px the inline * whitespace was already producing, because a flex container ignores that * whitespace and leaving it unset would close the side-by-side gap to nothing — * changing the desktop arrangement, which this is not allowed to do. * * `align-items: center` preserves the current behaviour rather than adopting * flex's default: `stretch` would make a wrapped label grow its neighbour to * match, which inline-flex on a line box does not do. Both buttons are 48px * today, so nothing moves. */ .lf-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 4px; /* row, column */ } @media (max-width: 860px) { /* Mobile is designed, not stacked: photograph first, then a full-width panel. The image keeps a landscape crop so the product stays recognisable. */ .lf-hero--image .lf-hero__frame { grid-template-columns: 1fr; min-height: 0; } .lf-hero--image .lf-hero__bg { aspect-ratio: 4 / 3; } .lf-hero--image .lf-hero__bg::after { background: none; } .lf-hero--image .lf-hero__inner { padding: clamp(2rem, 8vw, 3rem) var(--lf-gutter) clamp(2.5rem, 9vw, 3.5rem); } .lf-hero--image .lf-hero__copy { max-width: none; } } /* --------------------------------------------------------------- sections */ .lf-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); } .lf-section--stone { background: var(--lf-ivory); } .lf-section__head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(1.8rem, 3vw, 3rem); } .lf-section__head p { color: var(--lf-taupe-deep); margin: .4rem 0 0; max-width: 46ch; } .lf-link { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lf-navy); border-bottom: 1px solid var(--lf-line-strong); padding-bottom: .3rem; white-space: nowrap; transition: border-color .3s var(--lf-ease); } .lf-link:hover { border-color: var(--lf-navy); } /* -------------------------------------------------- shop by room (asymmetric) */ /* --------------------------------------------------------------- product cards */ /* Column tiers are sized for the eventual 175-product catalogue, not for the ten staging products. Row gap is larger than column gap so rows separate without the grid looking sparse horizontally. */ .lf-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: clamp(1rem, 1.6vw, 1.9rem); row-gap: clamp(2rem, 3vw, 3.2rem); } .lf-grid--3 { grid-template-columns: repeat(3, 1fr); } @media (min-width: 1600px) { .lf-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1240px) { .lf-grid { grid-template-columns: repeat(3, 1fr); } } .lf-card { display: flex; flex-direction: column; } .lf-card__media { position: relative; display: block; background: var(--lf-stone); /* 1:1 rather than 4:5. Supplier photography is predominantly landscape, and a portrait frame letterboxed almost every product — the item ended up occupying about half its own card. */ aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: .9rem; } .lf-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; /* `contain` always: a furniture proportion must never be cropped or stretched. Padding cut from 8% to 3% so the product actually fills its frame. */ object-fit: contain; padding: 3%; mix-blend-mode: multiply; transition: transform .7s var(--lf-ease), opacity .5s var(--lf-ease); } .lf-card__media img.is-alt { opacity: 0; } /* Hover-only behaviour is gated: on a touch device the state sticks after a tap and the card is left showing its secondary image (ANTI_PATTERNS, "sticky hover on touch"). */ @media (hover: hover) and (pointer: fine) { .lf-card:hover .lf-card__media img.is-primary { opacity: 0; } .lf-card:hover .lf-card__media img.is-alt { opacity: 1; } .lf-card:hover .lf-card__media img { transform: scale(1.03); } } .lf-card__media:focus-visible { outline: 2px solid var(--lf-navy); outline-offset: 3px; } .lf-card__range { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lf-taupe); margin: 0 0 .3rem; } .lf-card__title { font-family: var(--lf-serif); font-size: 1.14rem; line-height: 1.28; margin: 0 0 .3rem; color: var(--lf-navy); } .lf-card__title a:focus-visible { outline: 2px solid var(--lf-navy); outline-offset: 2px; } .lf-card__meta { font-size: .76rem; color: var(--lf-taupe); margin: 0 0 .55rem; } /* Price is the second thing read after the name, so it steps up in weight and size rather than sitting level with the metadata. */ .lf-card__price { font-size: 1.02rem; color: var(--lf-navy); font-weight: 400; letter-spacing: .01em; margin: 0; } .lf-card__price .from { font-size: .66rem; color: var(--lf-taupe); text-transform: uppercase; letter-spacing: .14em; margin-right: .3rem; font-weight: 400; } /* --------------------------------------------------------------- editorial feature */ /* --------------------------------------------------------------- brand story */ .lf-story { background: var(--lf-navy); color: rgba(255,255,255,.86); } .lf-story h2 { color: #fff; } .lf-story .lf-eyebrow { color: var(--lf-taupe-mid); } .lf-story .lf-btn { border-color: rgba(255,255,255,.5); background: transparent; color: #fff; } .lf-story .lf-btn:hover { background: #fff; color: var(--lf-navy); border-color: #fff; } /* --------------------------------------------------------------- service row */ .lf-service { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; border-top: 1px solid var(--lf-line); padding-top: 2.5rem; } .lf-service div { display: flex; gap: .9rem; align-items: flex-start; } .lf-service svg { width: 22px; height: 22px; stroke: var(--lf-taupe); fill: none; stroke-width: 1.2; flex: none; margin-top: 2px; } .lf-service strong { display: block; font-weight: 400; color: var(--lf-navy); font-size: .92rem; margin-bottom: .15rem; } .lf-service span { font-size: .82rem; color: var(--lf-taupe-deep); } /* ================================================ KLARNA, ON THE PRODUCT PAGE A fact about the price, set beside the price. Pale stone, one hairline, a small wordmark and two lines of 13px — noticeable at the moment of the decision without becoming the thing the page is about. NOT the pink advertising box the category is full of: the only pink is the wordmark chip itself, at 44x22, because that is Klarna's identifier and rendering it in Lomond's navy would be passing it off as ours. */ /* * PROBLEM 6: it read as a technical notification, not as merchandising. * * The content was right and the SIZE was wrong — 57px tall against a 48px * button, with a 13px lede. It is now a proper card: roughly half again the * height, a larger wordmark, a 15px lede in navy, and a chevron on the right * that gives it the shape of a retail finance panel rather than a system * message. The surface stays stone with a single hairline, so it gains * presence without becoming the pink advertising box the brief rules out. */ /* * PINK, BECAUSE THE APPROVED DESIGN IS PINK. * * Earlier passes made this stone-grey on the reasoning that a tinted panel * would read as a promotional box. The approved design settles it: finance is * MERCHANDISING on a furniture PDP, and the customer recognises the colour * before they read the words. The restraint is in the value of the tint — a 12% * wash of Klarna's own pink rather than the full brand colour — and in the fact * that nothing else on the page is pink. */ .lf-klarna { margin: 1.35rem 0 0; background: #FFF0F4; border: 1px solid #F7CEDC; /* 4px, not 8: the buying column's other surfaces (the confidence grid, the rewards panel, the swatches) all sit at 3-4px, and a rounder finance card reads as a SaaS notification pinned to a retail page. */ border-radius: 4px; } /* * THE WHOLE BAND IS THE CONTROL, so the chevron is part of the interaction * rather than an ornament beside it — and the target is the full 618x64 rather * than a 16px arrow. */ .lf-klarna__row { display: flex; align-items: center; width: 100%; gap: clamp(1rem, 1.9vw, 1.35rem); min-height: 64px; padding: .7rem clamp(1.15rem, 2.1vw, 1.5rem); background: none; border: 0; border-radius: inherit; font: inherit; color: inherit; text-align: left; cursor: pointer; } .lf-klarna__row:focus-visible { outline: 2px solid var(--lf-navy); outline-offset: 2px; } /* Klarna's own pink pill, at the size the wordmark stays a wordmark. */ .lf-klarna__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 38px; padding: 0 .55rem; background: #FFB3C7; border-radius: 4px; } .lf-klarna__wordmark { display: block; width: 100%; height: auto; } .lf-klarna__wordfallback { font-family: var(--lf-sans); font-size: .95rem; font-weight: 600; color: #17120F; letter-spacing: .005em; } .lf-klarna__copy { flex: 1 1 auto; display: flex; flex-direction: column; gap: .16rem; min-width: 0; } /* 15.5px semibold. The finance offer is a selling line, and it was previously set at the weight of body copy, which is what made a pink panel read as a pale notification. */ .lf-klarna__lede { font-family: var(--lf-sans); font-size: .97rem; font-weight: 600; line-height: 1.3; color: var(--lf-navy); letter-spacing: .005em; } /* The hedge, deliberately legible rather than small print: it is the honest part of the claim, not a disclaimer to be hidden. */ .lf-klarna__note { font-family: var(--lf-sans); font-size: .8rem; line-height: 1.35; color: #86677180; color: #7E626C; text-wrap: pretty; } .lf-klarna__more { flex: none; color: #B07C90; line-height: 0; transition: transform .3s var(--lf-ease); } .lf-klarna__more svg { width: 20px; height: 20px; display: block; } .lf-klarna__row[aria-expanded="true"] .lf-klarna__more { transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .lf-klarna__more { transition: none; } } .lf-klarna__detail { padding: 0 clamp(1.15rem, 2.1vw, 1.5rem) 1rem; /* The pill's width plus the row gap, so the paragraph starts under the copy rather than under the mark. */ padding-left: calc(clamp(1.15rem, 2.1vw, 1.5rem) + 88px + clamp(1rem, 1.9vw, 1.35rem)); } .lf-klarna__detail p { margin: 0; font-family: var(--lf-sans); font-size: .82rem; line-height: 1.5; color: #7E626C; text-wrap: pretty; } @media (max-width: 560px) { .lf-klarna__detail { padding-left: clamp(1.15rem, 2.1vw, 1.5rem); } } /* ---- the payment reassurance row, under the basket button */ .lf-paysafe { display: flex; align-items: center; flex-wrap: wrap; /* 10px between marks, 14px before them. The row was a 24px strip of .8rem grey under a 58px button and read as a caption on the button rather than as reassurance in its own right. */ gap: .5rem .875rem; margin: 1.1rem 0 0; font-family: var(--lf-sans); font-size: .875rem; line-height: 1.4; color: var(--lf-taupe-deep); } /* The real brand marks, from the Stripe gateway plugin's own licensed assets — no wordmark is redrawn and nothing is shown that the checkout cannot take. */ .lf-paysafe__marks { display: inline-flex; align-items: center; gap: .45rem; } .lf-klarna__badge { display: block; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 6px; } /* Fixed BOX, contained artwork. The scheme files do not share an aspect — Visa and Mastercard are 40x25-ish, Klarna's is a 32x32 square — so sizing by height alone put a square mark beside two landscape ones, and letting the box follow the file squashed the square one. A uniform box with `contain` keeps the row even and never distorts a brand mark, which is the one thing a licensed asset may not do. */ .lf-paysafe__mark { /* 44x28 rather than 38x24 — the marks have to be recognisable at reading distance, which is the entire job of the row. `contain` inside a uniform box keeps them even without distorting any of them. */ display: block; width: 44px; height: 28px; object-fit: contain; object-position: center; border: 1px solid var(--lf-line); border-radius: 3px; background: #fff; padding: 2px; } .lf-paysafe__lock { flex: none; line-height: 0; color: var(--lf-taupe-deep); } .lf-paysafe__lock svg { width: 16px; height: 16px; display: block; stroke: currentColor; fill: none; stroke-width: 1.5; } .lf-paysafe__label { color: var(--lf-navy); } /* The middot separated two runs of WORDS ("Secure checkout · Card · Klarna"). Now that the methods render as marks, it dangles between a sentence and a row of images, punctuating nothing. It comes back on its own if the marks ever fail to load, because that is the branch that still prints words. */ .lf-paysafe:has(.lf-paysafe__methods) .lf-paysafe__label::after { content: "·"; margin-left: .55rem; color: var(--lf-taupe-mid); } .lf-paysafe__methods { color: var(--lf-taupe); } /* ---- the product reference, under the title */ .lf-pdp__sku { margin: .5rem 0 0; font-family: var(--lf-sans); font-size: .78rem; letter-spacing: .06em; color: var(--lf-taupe-mid); } .lf-pdp__sku span { color: var(--lf-taupe-deep); letter-spacing: .04em; } @media (max-width: 560px) { .lf-klarna { gap: .7rem; padding: .7rem .8rem; } .lf-klarna__mark { min-width: 46px; font-size: .7rem; } .lf-klarna__lede { font-size: .84rem; } .lf-klarna__note { font-size: .76rem; } } /* --------------------------------------------------------------- signup THE "STAY IN TOUCH" BAND — a full-width surface carrying a contained grid. TWO ELEMENTS, TWO JOBS, AND THAT SEPARATION IS THE WHOLE LAYOUT. .lf-signup the SURFACE. Full width, edge to edge, no max-width and no padding. It is the beige, the two hairlines, and nothing else. .lf-signup__inner the CONTENT. A centred container on exactly the site's own measurements — `--lf-max` and `--lf-gutter`, the same two values `.lf-wrap` uses — so the photograph's left edge lands on the same vertical as the "Complete the room" heading below it, and the card's right edge on the same vertical as the last product card. WHAT THIS REPLACES. The grid used to be full-bleed too, so the photograph ran to the viewport edge and only the RIGHT edge was pulled back onto the page grid, by a `max()` inset. That made the band's content sit on a different grid from every other section on the page — the thing that read as drifting. The inset variable is gone with it; a container that is genuinely centred needs no arithmetic to find its own edges. The band takes no block padding: the columns supply their own, because the photograph still has to reach the top and bottom of the band. */ /* THE EDGES ARE WARM, NOT NEUTRAL. `--lf-line` is calibrated against white and reads as a grey scratch where beige meets the white product rails above and below. A warmer hairline makes the change of surface look decided. */ .lf-signup { background: var(--lf-taupe-wash); border-top: 1px solid #E4DCD2; border-bottom: 1px solid #E4DCD2; /* The photograph bleeds past this element's left edge on purpose (below). `clip` rather than `hidden` because `hidden` makes the band a scroll container, which would let a focused control inside it scroll the band sideways. Both are declared so a browser without `clip` still contains it. */ overflow: hidden; overflow: clip; } .lf-signup__inner { display: grid; /* 22 / 33 / 45 of the CONTAINER, plus the photograph's bleed on top of its column. The picture was 21% and then lost a further 42% of THAT to its own fades — about 164px of real photograph on a 1440 screen, which is what made it read as a strip. It is now 341px with a fade on one edge only: roughly double the effective picture, taken from the column AND from the page margin it now covers. Measured, not chosen: 25% broke the heading onto two lines and 22% squeezed the card until its action row wrapped and the band grew 70px. 21/32/47 is the split where the heading holds one line, the card's button and link hold one row, and the photograph still gains half as much again as it had. */ grid-template-columns: minmax(0, 21%) minmax(0, 32%) minmax(0, 47%); align-items: stretch; min-height: 320px; max-width: var(--lf-max); margin-inline: auto; padding-inline: var(--lf-gutter); } /* Two areas only, when there is no programme and no list to invite anyone to. */ .lf-signup--nopanel .lf-signup__inner { grid-template-columns: minmax(0, 22%) minmax(0, 1fr); } .lf-signup--novisual .lf-signup__inner { grid-template-columns: minmax(0, 38%) minmax(0, 62%); } .lf-signup--novisual.lf-signup--nopanel .lf-signup__inner { grid-template-columns: 1fr; } /* ---- the photograph A CSS CROP, NOT A NEW UPLOAD. `IMAGE_DERIVATIVE_POLICY.md` measured inodes, not disk, as the account's binding constraint, and one upload costs up to ten files. `transform-origin` is held to the same point as `object-position` so the zoom pulls in towards the focal point instead of drifting off it. */ /* * THE PHOTOGRAPH REACHES THE EDGE OF THE PAGE. * * The copy and the card stay on the site's centred grid — that is what makes * the band line up with everything above and below it. The photograph does not * want to be on that grid: it is the band's LEFT SIDE, and a picture that stops * 43px short of the window with beige either side of it reads as a rectangle * dropped into a section rather than as the section's own background. * * So it is pulled back out by exactly the distance the container is inset: * `(100vw - max)/2` above 1440px, where the container is centred, plus the * gutter at every width. `100vw` includes the scrollbar, so on a scrolling page * this over-reaches by a few pixels — which is why the band clips. Over-reaching * into a clip is flush; under-reaching would be a sliver of beige. */ .lf-signup__visual { position: relative; overflow: hidden; margin-left: calc(-1 * (max(0px, (100vw - var(--lf-max)) / 2) + var(--lf-gutter))); /* The band's own colour, not a tint: any flash before the photograph decodes is then invisible rather than a taupe rectangle. */ background: var(--lf-taupe-wash); } .lf-signup__visual img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; /* Less zoom than before: the column is half as wide again, so the same crop scale would have pushed the room out of frame and left only the vase. */ object-fit: cover; object-position: 72% 72%; transform: scale(1.42); transform-origin: 72% 72%; } /* * THE PHOTOGRAPH EMERGES FROM THE BAND — a mask, not an overlay. * * It used to be an overlay: a gradient from transparent to `--lf-taupe-wash` * painted over the right-hand edge. That works only while the thing behind the * photograph is EXACTLY that colour, and it did nothing at all for the left * edge, which since the content was brought onto the centred grid has been a * hard vertical cut against the beige. A mask fades the photograph to genuine * transparency instead, so whatever is behind it shows through — the band's own * background, at whatever value it happens to be, with no colour to keep in * step and no seam possible. * * ON THE WRAPPER, NOT THE IMAGE, AND THAT IS NOT A STYLE CHOICE. The `img` * carries `transform: scale(1.78)` for its crop. A mask is applied in the * element's own coordinate space and is transformed along with it, so a mask on * the image would be blown up by 1.78 about the crop's origin and its soft * edges would land far outside the visible box. The wrapper is untransformed * and clips, so masking it fades the clipped result exactly where it is seen. * * THE SUBJECT STAYS CRISP. The fade takes the outer ~20% at each vertical edge * and nothing is faded in between: about 58% of the photograph's width — the * vase, the flowers and the books — is untouched, at full opacity and full * sharpness. This is a dissolve at the boundary, not a vignette over the * picture. */ @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) { /* * ONE EDGE FADES, AND ONLY ONE. * * The previous mask tapered BOTH vertical edges — 20% off the left and 22% * off the right of a 284px column. Nearly half the photograph was being * dissolved, which is why it looked washed out and insubstantial: the fade * had become the treatment rather than the join. * * Three of the four edges no longer need anything. The left runs off the side * of the window. The top and bottom meet the band's own hairlines, which are * the section's edges rather than a boundary with the beige. That leaves the * right edge, where the photograph meets the copy, and that is the only place * a seam could show. * * 84% of the picture is therefore at FULL opacity and full colour — the vase, * the flowers, the books, the sideboard — and the last 16% carries the whole * transition. Two stops rather than one so it eases out instead of ramping * linearly, which is what stops a soft edge from reading as a gradient. */ .lf-signup__visual { -webkit-mask-image: linear-gradient(to right, #000 0%, #000 84%, rgba(0,0,0,.55) 93%, transparent 100%); mask-image: linear-gradient(to right, #000 0%, #000 84%, rgba(0,0,0,.55) 93%, transparent 100%); } } /* * THE FALLBACK, for a browser with no mask support: the old overlay, on the one * edge where a flat colour is guaranteed to match. Scoped behind `@supports not` * so the two can never both apply and fade the same edge twice. */ @supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) { .lf-signup__visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(242,237,232,0) 62%, var(--lf-taupe-wash) 100%); } } /* ---- the editorial copy */ /* * ASYMMETRIC PADDING, AND MEASURED RATHER THAN CHOSEN. * * With equal padding the copy started 37px from the edge of the photograph and * ended ~110px short of the card: crowded against the image on one side and * adrift from the card on the other. The left inset is therefore the larger of * the two — the photograph is a hard visual edge and needs more clearance than * a card that supplies its own. */ .lf-signup__editorial { display: flex; flex-direction: column; justify-content: center; /* The left inset is smaller than it was: it existed to hold the copy off a HARD photographic edge, and there is no longer one — the picture dissolves over its last 16%, which is clearance of its own. */ padding: clamp(2rem, 3vw, 2.75rem) clamp(1.5rem, 2.2vw, 2.3rem) clamp(2rem, 3vw, 2.75rem) clamp(1.75rem, 2.8vw, 2.75rem); } /* NOT `--lf-gold`. That token is calibrated against white and the near-white surfaces (#FBF9F6, #FAF7F1); on this band's #F2EDE8 it measures 4.24:1, and the eyebrow is 11.5px text, so it needs 4.5:1. #835F33 measures 4.95:1 on the band and 5.48:1 on the panel, and is the same hue a shade deeper. */ .lf-signup__eyebrow { color: #835F33; margin-bottom: 1.15rem; } /* SIZED TO HOLD "A little more inspiration." ON ONE LINE at 1440 in the 28% column, which is how the approved composition reads it. At 2.9rem it broke after "more" and the band gained a line it did not need. */ .lf-signup__title { margin: 0; font-size: clamp(1.7rem, 2.35vw, 2.15rem); line-height: 1.16; } .lf-signup__intro { margin: 1.3rem 0 0; color: var(--lf-taupe-deep); max-width: 31ch; font-size: .95rem; line-height: 1.78; } /* The short decorative rule under the copy. A `span`, not an `hr`: it separates nothing, so it has no business in the accessibility tree. */ /* THE RULE IS PLACED, NOT LEFT OVER. It sits far enough below the paragraph to read as the block's closing mark rather than as an underline that missed, it is shorter than before so it reads as a mark rather than as a divider, and it fades at its right-hand end so it stops rather than being cut off. */ .lf-signup__flourish { display: block; width: 46px; height: 1px; margin-top: 2.6rem; background: linear-gradient(to right, var(--lf-gold-sheet), rgba(184, 144, 79, 0)); } /* The fallback aside, used only when there is no panel at all. */ .lf-signup__editorial--aside { justify-content: center; } /* ---- the rewards panel's outer box lives here, its contents in rewards.css, because the box has to hold its shape on a page where `rewards.css` is not enqueued at all. */ /* THE CARD READS AS AN OBJECT ON THE BAND, not as a lighter patch of it. Four things do that work together, and none of them alone: surface a shade warmer and a shade lighter than --lf-ivory, so it lifts off #F2EDE8 without going clinical white border one warm hairline, slightly stronger than --lf-line, which is tuned for white and disappears against beige shadow two layers — a 1px contact shadow that seats the edge, and a wide soft one at low opacity that suggests height without casting a box radius 12px: enough to read as a card, well short of a pill */ .lf-rwband { margin: clamp(1.25rem, 1.95vw, 1.75rem) 0; padding: clamp(1.5rem, 2vw, 1.85rem) clamp(1.5rem, 2.3vw, 2.15rem); background: #FCFAF7; border: 1px solid #E5DDD3; border-radius: 12px; /* So `.lf-rwband__sep` can ask how wide THIS is, rather than how wide the window is. `inline-size` contains the inline axis only, so the card's height still follows its content. */ container-type: inline-size; /* The wide layer had a -30px spread, which cancelled almost all of it: at 2x the card had no perceptible lift at all. -24px and a little more opacity keeps it well under "floating" while making the edge sit ON the band. */ box-shadow: 0 1px 2px rgba(0, 20, 46, .045), 0 16px 36px -24px rgba(0, 20, 46, .24); display: flex; flex-direction: column; justify-content: center; } @media (max-width: 1180px) { /* TABLET: the photograph becomes a shallow full-width visual across the top and the two text areas sit side by side. It reduces; the panel does not. */ .lf-signup__inner, .lf-signup--nopanel .lf-signup__inner, .lf-signup--novisual .lf-signup__inner { grid-template-columns: minmax(0, 42%) minmax(0, 58%); } /* THE STRIP STAYS INSIDE THE CONTAINER, like everything else in the band. It was breaking out to the viewport edge, which meant the photograph sat on the page grid at desktop and off it at tablet — the same element obeying two different rules depending on the width, which is exactly the drift this container was introduced to remove. */ .lf-signup__visual { grid-column: 1 / -1; height: clamp(150px, 20vw, 200px); } /* A WIDE, SHORT BOX TAKES A HORIZONTAL SLICE, so the Y position is what chooses the subject, not the X. At 58% the slice ran through the lamp shade and the middle of the canvas — an arbitrary band of wall. 78% puts the sideboard top in it: the vase, the books and the lantern, which is the same still life the desktop column crops to. */ .lf-signup__visual img { transform: none; object-position: 56% 78%; } /* * STACKED, THE STRIP SPANS THE WINDOW AND ONLY ITS FOOT NEEDS A BLEND. * * It used to sit inside the container with beige either side, so both of its * vertical edges were exposed and both had to be tapered — which on a strip * only 120-200px tall meant most of its width was in a fade. Bleeding it to * both edges removes those two boundaries entirely rather than disguising * them, and leaves exactly one: the foot, where the copy begins. * * One gradient, no compositing, and 74% of the strip at full colour. */ .lf-signup__visual { margin-inline: calc(-1 * (max(0px, (100vw - var(--lf-max)) / 2) + var(--lf-gutter))); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,.5) 89%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,.5) 89%, transparent 100%); } .lf-signup__editorial { padding-inline: 0 clamp(1.25rem, 2.4vw, 2rem); } .lf-rwband { margin-block: clamp(1.25rem, 2.4vw, 2rem); } } @media (max-width: 860px) { /* MOBILE: one column, in DOM order — visual, copy, panel. */ .lf-signup__inner, .lf-signup--nopanel .lf-signup__inner, .lf-signup--novisual .lf-signup__inner { grid-template-columns: 1fr; min-height: 0; } .lf-signup__visual { height: clamp(120px, 30vw, 170px); } /* The container carries the gutter now. Repeating it here doubled it — 40px of inset on a 390px phone instead of the 20px the rest of the page uses. */ .lf-signup__editorial { padding: 1.85rem 0 0; } /* The eyebrow is a letterspaced label rather than body copy, but 11.5px is mean on a phone. It takes the same step up the panel's copy does. */ .lf-signup__eyebrow { font-size: .78rem; } .lf-signup__intro { max-width: 42ch; } .lf-signup__flourish { margin-top: 1.25rem; } .lf-rwband { margin: 1.5rem 0 2rem; padding: 1.5rem 1.35rem 1.6rem; } } /* --------------------------------------------------------------- footer */ .lf-footer { background: var(--lf-ivory); border-top: 1px solid var(--lf-line); padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; } /* Four columns, not five: the "About Lomond" column held three placeholders for pages nobody has planned, and it has gone. */ .lf-footer__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; } .lf-footer h3 { font-family: var(--lf-sans); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lf-navy); margin: 0 0 1.1rem; font-weight: 400; } .lf-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; } .lf-footer a { font-size: .88rem; color: var(--lf-taupe-deep); } .lf-footer a:hover { color: var(--lf-navy); } .lf-footer__brand p { font-size: .88rem; color: var(--lf-taupe-deep); max-width: 26ch; } .lf-footer__base { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--lf-line); display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; font-size: .78rem; color: var(--lf-taupe); } /* The agency credit sits quietly: same size as the copyright line, no accent colour, and it underlines only on interaction. */ .lf-footer__credit a { color: var(--lf-taupe-deep); border-bottom: 1px solid transparent; transition: border-color .25s var(--lf-ease); } .lf-footer__credit a:hover, .lf-footer__credit a:focus-visible { border-bottom-color: var(--lf-taupe); } @media (max-width: 640px) { .lf-footer__base { justify-content: flex-start; flex-direction: column; gap: .5rem; } } /* --------------------------------------------------------------- breadcrumb */ .lf-crumbs { font-size: .76rem; color: var(--lf-taupe); letter-spacing: .04em; padding-block: 1.25rem; } .lf-crumbs a { color: var(--lf-taupe-deep); } .lf-crumbs a:hover { color: var(--lf-navy); } .lf-crumbs span + span::before { content: "/"; margin: 0 .55rem; color: var(--lf-taupe-mid); } /* --------------------------------------------------------------- staging ribbon */ .lf-staging { background: #7A2E2E; color: #fff; text-align: center; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: .5rem 1rem; } /* --------------------------------------------------------------- responsive */ @media (max-width: 900px) { .lf-grid { grid-template-columns: repeat(2, 1fr); } .lf-footer__cols { grid-template-columns: 1fr 1fr 1fr; } .lf-service { grid-template-columns: 1fr 1fr; } } /* * THE NAV HANDS OVER TO THE BURGER AT 1100px, NOT 860px. * * Adding Mattresses and Home Office took the bar from six items to eight, and * eight no longer fit beside the logo and the icons below about 1180px: the * page overflowed by 56px at 1024 and 148px at 900. The two categories are not * the problem — being unreachable was — so the breakpoint moves instead, and * the band just above it is tightened so the bar is never merely surviving. */ /* * BELOW THE DESKTOP BREAKPOINT the field cannot sit beside the logo without * being crushed, so it is summoned instead of crowded: the toggle returns to * the utilities and the same form — not a second copy of it — drops to a * full-width row beneath the header when opened. Closed, it is `display: none`, * so the header is exactly as tall as it was before the field existed and there * is no ghost row of any kind. */ @media (max-width: 1099px) { .lf-header__inner { grid-template-columns: auto 1fr auto; } .lf-header__navrow { display: none; } .lf-burger { display: inline-flex; } /* Centred in its own column, not shunted up against the burger. */ .lf-logo { justify-self: center; } .lf-logo img { height: 46px; } .lf-actions .lf-actions__searchtoggle { display: inline-flex; } .lf-hsearch { display: none; } .lf-header.is-searching .lf-hsearch { display: flex; grid-column: 1 / -1; grid-row: 2; height: 44px; margin-top: 8px; } .lf-header.is-searching .lf-header__inner { padding-bottom: 10px; } } /* * NO TIGHTENING BAND. There used to be a 1100-1279px tier that dropped the nav * to 12.16px and 21.6px gaps. Measured on the live row after the nav took its * own full-width row, that tier had 330px of slack it did not need, so it was * shrinking the type for nothing and breaking the rhythm between 1279 and 1280. * One size, one tracking, one gap curve across the whole desktop range; the * narrowest desktop width still clears the labels by ~108px. */ @media (max-width: 860px) { .lf-hero__grid { grid-template-columns: 1fr; min-height: 0; } .lf-hero__media { order: -1; } .lf-hero__media img { aspect-ratio: 5 / 4; } .lf-section__head { flex-direction: column; align-items: flex-start; } } @media (max-width: 560px) { .lf-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } .lf-card__title { font-size: 1rem; } .lf-footer__cols { grid-template-columns: 1fr 1fr; } .lf-service { grid-template-columns: 1fr; } .lf-utility ul { gap: .4rem 1.2rem; font-size: .68rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ============================================================ PRODUCT PAGE */ /* * NO TRAILING PADDING ON THE PDP. * * `padding-block`'s second value used to be clamp(3rem, 6vw, 5rem) — 80px at * 1440 — and it predates the recommendation rails. Measured on the rendered * page it was 80 of the 107px between the last recommendation and the * newsletter, and worse than the size was the COLOUR: `main` is transparent, so * those 80px painted a white stripe between the ivory rail above them and the * cream newsletter below, which reads as a hole rather than as spacing. That is * the "large white gap". * * The closing space now belongs to the last rail — see `.lf-reco--close`, * which carries it (the tint that once went with it is gone; see that rule). * Safe unconditionally rather than behind `:has()`: if a page ever ended * without rails it would end at `.lf-pinfo`, which carries its own * clamp(2.5rem, 4vw, 3.5rem) of bottom padding. */ .lf-pdp { padding-block: clamp(1rem, 3vw, 2rem) 0; } /* THE SPLIT, MEASURED AGAINST THE APPROVED MOCKUP rather than chosen. The mockup's own columns measure 510 : 467 — a ratio of 1.09 — and this grid was already at 1.15, so the composition was close before this pass and the work was NOT in the ratio. It moves to 1.22 to give the photograph the extra weight the brief asks for, and the gap tightens so the purchase column loses nothing: at 1440 the gallery gains ~40px and the panel holds its width. */ /* * THE SPLIT AND THE GUTTER ARE THE MOCKUP'S, MEASURED. * * Taken off the approved design at its own scale and expressed as fractions of * the content width: gallery 49.8%, gutter 4.6%, purchase column 45.6%. That is * a 1.09 : 1 track ratio, not the 1.22 : 1 this carried — which rendered * 53.0 / 3.6 / 43.4 at a 1440 viewport, a gallery three points too wide and a * purchase column two points too narrow, closing the gutter to compensate. * * The purchase column is the one that suffers: it carries price, finance, * variants, the confidence grid, the CTA, the trust row and rewards, and every * point taken off it tightens all seven. * * `minmax(0, …)` on both tracks is load-bearing — without it a wide image or a * long unbroken product code pushes its own track past the fraction. */ .lf-pdp__grid { display: grid; grid-template-columns: minmax(0, 1.09fr) minmax(0, 1fr); gap: clamp(1.75rem, 4.6vw, 3.9rem); align-items: start; } .lf-gallery { position: sticky; top: 110px; align-self: start; } /* Set by the viewer when the column is taller than the space it would stick in — see `stickyFit()`. */ .lf-gallery--nostick { position: static; } /* 1:1 rather than 4:5. Supplier product photography is predominantly landscape, and a portrait frame left a third of the panel empty above and below it. */ /* * THE CROP BUG, and why it was not a cropping rule. * * This was `aspect-ratio: 4/3` with `display: grid; place-items: center` and an * image at `width:100%; height:100%`. `place-items: center` stops the item * stretching, so the grid row is sized BY the image — which makes the image's * own `height: 100%` circular. It resolved to auto, the image took its natural * square shape at 686px wide inside a 514px-tall frame, and `overflow: hidden` * quietly removed 86px from the top and bottom of every tall product. Nothing * in the stylesheet said "crop"; `contain` was set and did nothing, because the * element it was containing was already larger than the frame. * * The frame is now absolutely positioned, so no percentage height depends on a * box that depends on it, and the ratio comes from the product's own measured * subject rather than from a fixed 4:3. */ .lf-gallery__main { position: relative; overflow: hidden; aspect-ratio: var(--lf-gal-ar, 1); background: #FBFAF8; border: 1px solid var(--lf-line); cursor: zoom-in; } .lf-gallery__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4.5%; mix-blend-mode: multiply; } /* A rail, not a wrapping block: six images must not push the buying controls down a second row. */ .lf-gallery__thumbs { display: flex; gap: .55rem; margin-top: .7rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: .2rem; /* * `overflow-x: auto` alone does not contain this strip. * * A flex or grid item defaults to `min-width: auto`, which refuses to shrink * below its content — so seven 74px thumbnails pushed the whole PAGE 117px * wide at 390px instead of scrolling inside their own row. The overflow * declaration was already correct; it simply never got the chance to apply. */ min-width: 0; /* A deliberate swipe, and it settles on a thumbnail rather than mid-image. */ scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .lf-gallery__thumbs button { scroll-snap-align: start; flex: 0 0 auto; } /* Same reason: the gallery column must be allowed to be narrower than its widest child. */ .lf-gallery { min-width: 0; } .lf-gallery__thumbs button { /* Padding in PERCENT resolves against the containing block's width, not the button's own. At 6% of a ~660px row that was ~40px each side on a 72px button, collapsing the image to zero width — six blank boxes. */ width: 74px; height: 92px; padding: 6px; background: var(--lf-stone); border: 1px solid var(--lf-line); cursor: pointer; transition: border-color .25s var(--lf-ease); display: grid; place-items: center; } .lf-gallery__thumbs button:hover { border-color: var(--lf-taupe); } .lf-gallery__thumbs button[aria-current="true"] { border-color: var(--lf-navy); } .lf-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .lf-pdp__title { font-size: clamp(1.9rem, 3vw, 2.6rem); margin: .4rem 0 .8rem; } /* 1.5rem read as a large body figure rather than as the price. */ .lf-pdp__price { font-size: clamp(1.65rem, 2.1vw, 1.85rem); color: var(--lf-navy); font-family: var(--lf-sans); font-weight: 400; letter-spacing: -.005em; margin: 0 0 .45rem; } .lf-pdp__price .from { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lf-taupe); margin-right: .4rem; } .lf-pdp__vat { font-size: .78rem; color: var(--lf-taupe); margin: 0 0 1.4rem; } .lf-pdp__summary { color: var(--lf-taupe-deep); font-size: 1rem; margin-bottom: 1.6rem; } .lf-pdp__pack { display: inline-block; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; background: var(--lf-taupe-wash); color: var(--lf-taupe-deep); padding: .45rem .8rem; margin-bottom: 1.2rem; } .lf-pdp__buy { border-top: 1px solid var(--lf-line); padding-top: 1.6rem; margin-top: .5rem; } .lf-pdp__note { font-size: .78rem; color: var(--lf-taupe); margin-top: .9rem; } /* * PROBLEM 10, and the first attempt at it missed. * * It targeted `.lf-buyline`, which does not exist — the delivery and * change-of-mind lines carry `.lf-buydel`, and the rule matched nothing. Worth * recording rather than quietly correcting: a CSS selector that matches nothing * fails silently, looks plausible in a diff, and is only caught by rendering the * page and finding the thing unchanged. * * The two lines and the policy links now sit together on one quiet surface * under a hairline, so they close the buying panel instead of trailing off it. */ .lf-pdp__buy .lf-buydel { margin: 0; } .lf-pdp__buy .lf-buydel + .lf-buydel { margin-top: .55rem; } .lf-pdp__buy .lf-buydel:first-of-type { margin-top: clamp(1.1rem, 2vw, 1.4rem); padding-top: clamp(1rem, 1.8vw, 1.3rem); border-top: 1px solid var(--lf-line); } /* Variation selector — deliberately not WooCommerce's default