stacked with the panel's 10px gap and put 32px between two lines that belong together. */ .note { font-size: 13px; color: var(--muted); line-height: 1.45; margin: 0; } /* Full-contrast ink for the offer. Muted is right for the Etsy handover note below it, which is reassurance; it is wrong for the one line on the page actively offering money off. */ #offer { color: var(--ink); } /* Two unrelated facts - a shipping threshold and a coupon - so they get their own lines. Run together they read as "10% off your shipping". */ .offer-line { display: block; } .offer-line + .offer-line { margin-top: 5px; } /* The two offers carry the weight. Inside the coupon line the how-to is a bare text node beside .offer-deal, so it simply does not inherit the bold. */ .offer-deal { font-weight: 600; } /* Every coupon line, marked as if with a highlighter in the banner's yellow, so the instruction to type the code at Etsy cannot be missed (D-206). Inline, so the color hugs the words; `clone` gives every wrapped line its own padded, rounded mark instead of one box split across lines. The band sits slightly inside the line box, leaving air above and below the way a real highlighter stroke does. */ .offer-mark { color: var(--campaign-ink); background: linear-gradient(transparent 6%, var(--campaign) 6%, var(--campaign) 94%, transparent 94%); padding: 1px 4px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* The copy button after a coupon code. The icon sits in the text like a character; the button's padding gives it a thumb-sized target without pushing the line apart. */ .offer-copy { display: inline-flex; align-items: center; justify-content: center; margin: -6px 0 -6px 2px; padding: 6px; border: 0; background: transparent; color: inherit; vertical-align: middle; cursor: pointer; border-radius: 4px; } .offer-copy svg { width: 15px; height: 15px; display: block; } .offer-copy:hover { background: rgba(0, 0, 0, 0.08); } .offer-copy:focus-visible { outline: 2px solid currentColor; outline-offset: 0; } /* The campaign banner: one line above the masthead, shown by offer.js on every page while a code from a link is live (D-206). No close button: it is one slim line, and it is the reason they came. */ .offer-banner { margin: 0; padding: 10px var(--gutter); background: var(--campaign); color: var(--campaign-ink); font-weight: 600; font-size: 15px; line-height: 1.35; text-align: center; } /* Only the docked mobile layout uses this; the desktop panel shows the real #checkout-note instead. */ .note-echo { display: none; order: 6; } /* ---------- size slider ---------- */ /* A real slider: drag along a rail that snaps to the sizes that actually exist. The whole track is the control, so a tap anywhere on it jumps to the nearest size, and the numbered chip on the current size is the thumb. */ .sizes { --track-h: 44px; /* Half a detent, which is the only inset the end detents need to sit fully on the track. It was half the TRACK height while a focus ring surrounded the control and the end detents had to sit at the centers of that ring's end caps; the ring is gone (see `.track:focus-visible` below), so that reserve was buying nothing and costing about 36px of usable track. */ --pad: 12px; display: flex; flex-direction: column; gap: 8px; padding-top: 22px; padding-bottom: 8px; } .track { --t: 0; /* current position, 0 to 1 */ position: relative; height: var(--track-h); cursor: pointer; touch-action: none; /* the drag is ours; the page must not scroll under it */ outline: none; } /* No outline. A ring around a 44px track is a large piece of furniture that appears on touch as well as on the keyboard - WebKit treats the focus() on pointerdown as focus-visible - and it boxes in a control whose whole width is already the target. The rail itself carries the state instead: it thickens from 4px to 6px and darkens from --line to --rail-on. Growing from the center, so the line does not appear to jump. This is a deliberate departure from the outline used everywhere else on the page; it is the only control whose focus affordance would be bigger than most of the things around it. */ .track:focus-visible { outline: none; } .rail, .fill { position: absolute; top: 20px; height: 4px; border-radius: 2px; transition: top 140ms, height 140ms, background-color 140ms; } .rail { left: var(--pad); right: var(--pad); background: var(--line); } .track:focus-visible .rail, .track.dragging .rail { background: var(--rail-on); } .track:focus-visible .rail, .track:focus-visible .fill, .track.dragging .rail, .track.dragging .fill { top: 19px; height: 6px; border-radius: 3px; } .fill { left: var(--pad); width: calc(var(--t) * (100% - 2 * var(--pad))); background: var(--brand); /* Width eases on a selection; the focus thickening is its own, faster beat. Both have to be named here, because this shorthand replaces the one on the shared `.rail, .fill` rule above. */ transition: width 300ms cubic-bezier(0.22, 0.61, 0.36, 1), top 140ms, height 140ms; } .detents { position: absolute; inset: 0; pointer-events: none; } /* Every detent carries its slot count, at every width. The number used to appear only under 960px, so the same control counted 1-2-3 on a phone and showed bare dots on a desktop; the count is the thing being chosen, and which screen you are on has no bearing on that. The chip is also the position indicator - see the thumb note below. */ .detent { position: absolute; top: 10px; width: 24px; height: 24px; margin-left: -12px; left: calc(var(--pad) + var(--p) * (100% - 2 * var(--pad))); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #ffffff; border: 2px solid var(--line); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); /* The element is an for brevity, which would italicize the count it carries. It is a chip, not an emphasis. */ font-style: normal; transition: border-color 200ms, background-color 200ms, color 200ms; } .detent .dn { display: block; line-height: 1; } /* Passed sizes read as traveled, not as chosen: the rail's color on the border, the page's on the face. Only the current one inverts. */ .detent[data-on="true"] { background: #ffffff; border-color: var(--brand); color: var(--brand); } .detent[data-cur="true"] { background: var(--brand); border-color: var(--brand); color: #ffffff; } /* There is no separate thumb. A 26px disc centered on a 24px chip covers the digit it is pointing at, so the filled chip IS the thumb - as it already was on a phone. The markup no longer carries the element. The rail's fill still shows travel, and `--t` still drives it. */ .track.dragging .fill { transition: top 140ms, height 140ms; } /* no width easing: it tracks the finger */ .labels { position: relative; height: 34px; font-size: 12px; line-height: 1.25; text-align: center; color: var(--muted); } /* The labels are elements with real hrefs to the sibling size pages, so a crawler (and a visitor without JavaScript) can reach every size. app.js intercepts the click for the in-page swap. They are focusable, which reverses D-035's "nine more tab stops would be duplicates" — that was the right call for spans, but these are genuine destinations and a keyboard user should be able to reach them. The slider still answers the arrow keys. */ .labels a { color: inherit; text-decoration: none; position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); left: calc(var(--pad) + var(--p) * (100% - 2 * var(--pad))); /* Clickable, and not selectable: a click that follows a text drag should still pick the size rather than leave a highlight behind. */ cursor: pointer; user-select: none; padding: 2px 6px; /* No negative margin to "cancel" that padding. This box is absolutely positioned and shrink-to-fit, so `margin-left: -6px` moves it left and `margin-right: -6px` pulls nothing back: every label sat 6px - half its own side padding - to the left of the detent it names. Measured at 1440px before the fix: "Single" centered on 53.5, its chip on 59.5. The padding alone is symmetric, so translateX(-50%) centers the text on the stop. */ border-radius: 4px; transition: color 120ms, background-color 120ms; } .labels a:hover { color: var(--ink); background: var(--line); } .labels a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Every label centers on its own detent, the ends included. They used to align to their end instead, which kept them inside the track but left the first and last labels visibly off the chip they name - and a label that points at the wrong stop is worse than one that overhangs by a few pixels into the gutter. `data-edge` stays: `fitLabels` still uses it to keep the ends. */ .labels a[data-on="true"] { color: var(--ink); font-weight: 600; } /* When the labels would collide, only the ends survive (see fitLabels). */ .labels[data-fit="ends"] a:not([data-edge]) { display: none; } /* ---------- description and footer ---------- */ .about { display: flex; flex-direction: column; gap: 12px; padding-top: 32px; } .about .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; font-size: 15px; line-height: 1.5; } /* Until the listing description is carried in the manifest this column is empty. An empty grid child still takes a row and a gap, which reads as a hole under the heading, so drop it and let the facts have the width. */ .about #about-body:empty { display: none; } .about .cols:has(#about-body:empty) { grid-template-columns: minmax(0, 1fr); max-width: 680px; } /* The facts are paragraphs, so their default block margins stack on top of the flex gap and space them about four times further apart than intended. */ /* Both columns space their paragraphs the same way and start on the same line. A default paragraph margin on the first one pushes that column down relative to the other. */ .about .cols > div { display: flex; flex-direction: column; gap: 10px; } .about .cols p { margin: 0; } .disclaimer { padding-top: 10px; font-size: 11px; color: var(--muted); } #color-caveat:not(:empty) { color: var(--ink); } /* Two spans of very different length; equal columns keep them from sitting at the edges with a hole between. */ footer span { flex: 1 1 0; min-width: 0; } /* Its own row under the two columns, because it belongs to the whole page rather than sitting beside one column of it. */ .copyright { flex: 1 0 100%; order: 1; font-size: 12px; } /* ---------- breadcrumb ---------- */ /* Wayfinding: one line that answers "where am I" and "where can I go". The trail stops before the current page and ends on a separator - the beneath it is the last crumb. Everything here stays muted so it does not compete with that heading. Tracking is slightly POSITIVE. Small type reads tighter than it is, so it wants the opposite of the negative tracking a display heading wants - one fixed letter-spacing across a type scale is wrong at one end of it. Sized in em/rem rather than px so the row grows with a reader's own text size instead of staying put while the text around it grows. */ .crumbs { order: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5em; padding-block: 0.75rem 0; font-size: 13px; line-height: 1.4; letter-spacing: 0.01em; color: var(--muted); } /* The catalog is the root of the trail, so its own crumb list is empty. Without this it would still claim the vertical space. */ .crumbs:empty { display: none; } .crumbs a { color: var(--muted); /* Hit area, not visual size: 10px of padding pulled back by an equal negative margin turns an 18px line of text into a 38px touch target and moves nothing on the page. */ padding-block: 10px; margin-block: -10px; transition: color 120ms ease-out; } .crumbs a:hover { color: var(--brand); } /* Feedback on the press itself, not on release. */ .crumbs a:active { color: var(--brand-hover); } .crumbs .home { padding-inline: 2px; } .crumbs .home svg { width: 15px; height: 15px; fill: currentColor; display: block; } .crumbs .sep { opacity: 0.45; } /* ---------- the "which one do you have" test ---------- */ /* Only a group page configures it; empty everywhere else, and an empty container must not claim the vertical space. */ #identify:empty { display: none; } #identify { margin-block: 1.75rem 0; } #identify h2 { font-size: 18px; margin: 0 0 0.6rem; } .identify-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .identify-list li { display: flex; align-items: baseline; gap: 12px; } /* The button label set as the remote sets it, so the reader is matching a shape on the page against a shape in their hand rather than reading a description of one. That is why there is no `font-variant-caps` and no `text-transform` here: the earlier remote prints OFF and the current one prints a lowercase `hue` wordmark, and small caps would render both as capitals and erase the only thing this test asks the reader to look at. */ .identify-list .btn-label { flex: none; min-width: 52px; text-align: center; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: 0.04em; } /* ---------- footer social ---------- */ /* Its own full-width row, for the same reason .copyright has one: the accounts belong to the shop, not to either column of footer text. Sits above the copyright because it is content rather than a legal notice. 20px is the smallest these glyphs stay legible at; the 8px padding makes the tap target 36px, which is what a thumb needs on the mobile dock. */ .social { flex: 1 0 100%; order: 1; display: flex; gap: 10px; margin: -8px 0; } /* Brand colors, not monochrome. The usual argument for gray is that a footer should recede - but these marks are recognised by colour before they are recognised by shape, and the compromise everyone reaches for (gray at rest, colour on hover) is invisible on a phone, which is 95% of this site's traffic. There is no dark theme here for them to fight. TikTok and X really are black marks; that is their brand, not an oversight (D-172). */ .social a { display: inline-flex; padding: 8px; } .social a:hover { opacity: 0.72; } .social .s-etsy { color: #f16521; } .social .s-pinterest { color: #bd081c; } .social .s-instagram { color: #e4405f; } .social .s-tiktok { color: #111111; } .social .s-x { color: #111111; } .social .s-facebook { color: #0866ff; } .social svg { width: 20px; height: 20px; fill: currentColor; display: block; } footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding-block: 24px; margin-top: 36px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); flex-wrap: wrap; } /* ---------- tiers ---------- */ @media (max-width: 1100px) { :root { --gutter: 24px; } .nav { gap: 22px; } } /* The script decides when a callout box can no longer sit beside its target and sets this class; the list is not keyed to a width. */ body.compact-callouts .feature-list { display: grid; } /* ---------- under 960: full mobile mode */ /* ---- the scroll dots, shared by every palette (D-375) ---- */ /* The dot geometry, declared once and used by both rows. They were fallbacks inside var() until they needed changing, at which point the same number lived in six places. KEEP THE TWO SIZES THE SAME PARITY. Both rows are an even number of pixels tall - 26 for the strip, 16 for the palette - so an odd dot centers on a half pixel and an even one does not: 7px (26-7)/2 = 9.5 (16-7)/2 = 4.5 4px (26-4)/2 = 11 (16-4)/2 = 6 3px (26-3)/2 = 11.5 (16-3)/2 = 6.5 At 7 and 4 the two sizes round opposite ways and the small dots sit a device pixel off the large ones, which Martin saw immediately. 7 and 3 round the same way and line up. Changing one size means checking the other against this table, not just picking a number that looks right on its own. */ :root { --dot-pitch:12px; --dot-size:7px; --dot-size-off:3px; } /* The row is OFF by default and switched on only inside the narrow block below, where the palette becomes a horizontal scroller. * * This is not belt and braces, it is the whole of what keeps the wide layout * intact. Every other rule for these elements lives inside that media query, * so above 959px the row had NO styles - it lost `position:absolute`, fell * into normal flow, and `.swatch-wrap` being a flex row made it a second * flex item 376px tall sitting beside the swatches. That squeezed * `.swatches` until its grid overflowed sideways, which made syncDots * compute `over` as true, which kept the dots: a loop that sustained itself * and only ever appeared after a resize, never on a fresh load at that width * (Martin, in Safari; it reproduces everywhere). * * The lesson generalizes past this element: styling something only inside a * media query leaves it UNSTYLED outside, and an absolutely positioned box * that loses its positioning does not disappear - it lands in the layout. */ .swatch-dots { display: none; } @media (max-width: 959px) { /* The native bar is hidden ONLY here. Above 960px the palette is a tall grid inside the panel and genuinely needs its vertical scrollbar; the dots never appear there, because syncDots asks about SIDEWAYS overflow and a tall grid has none. */ #palette .swatches { scrollbar-width:none; } #palette .swatches::-webkit-scrollbar { display:none; } /* The 8px the native bar took, given back only while the dots show - the same conditional reservation as the strip's, for the same reason (D-373). The horizontal palette's own padding is 6px 5px 8px. */ #palette .swatches.has-dots { padding-bottom:16px; } /* Centered under the row, in the band the bar used to occupy. The wrap is the positioned ancestor the fades already rely on, and it shares the scroller's edges, so the row spans the same box the swatches do. */ /* `stretch`, NOT `center` - the strip's row gets this right and this one did not. With `center` each button shrinks to its DOT's height: 7px for an in-view dot and 3px for an out-of-view one. A click a pixel or two off the dot then missed the button entirely, fell through this row (pointer-events:none) to the swatch underneath, and SELECTED that color - and pickColor scrolls the new ring into view without centering, which is exactly the "it scrolls but does not center" Martin saw. Stretched, every button is the full height of the band, so the row is one unbroken strip of hit area with nothing to fall through. */ .swatch-dots { position:absolute; left:0; right:0; bottom:0; height:16px; display:flex; justify-content:center; align-items:stretch; pointer-events:none; } .swatch-dots[hidden] { display:none; } /* Structurally identical to .tray-dot: the button is the hit area and nothing else, and the dot is a pseudo-element of --dot-size, so it is a CIRCLE rather than whatever rectangle the button happens to be. The first version put the color on the button itself and got 12x10 ovals for it (Martin). Same pitch, same size, same shape as the strip's - which is the consistency that is the whole reason these are here. */ .swatch-dot { appearance:none; -webkit-appearance:none; border:0; padding:0; margin:0; background:none; font:inherit; width:var(--dot-pitch, 12px); flex:0 0 auto; cursor:pointer; pointer-events:auto; display:flex; align-items:center; justify-content:center; border-radius:0; } /* The color rides on a custom property set by paletteDots(), because the element that carries it is the pseudo-element and JS cannot reach one. */ .swatch-dot::before { content:''; width:var(--dot-size-off, 4px); height:var(--dot-size-off, 4px); border-radius:50%; background:var(--dot-color, #999); /* SIZE carries the in-view state here, not opacity. Opacity was tried both ways and neither worked: at .38 the pale half of the palette washed out to nothing and Jet Black read as gray, and at .72 - raised to protect the colors - the signal disappeared and the row stopped saying that anything was off-screen, which is the one thing it is for (Martin). Color is spoken for by the jump bar, so the state went to the channel that was still free. The small dots stay legible enough to aim at, which is all the jump bar needs. */ opacity:.75; transition:opacity 120ms linear, width 120ms linear, height 120ms linear; } .swatch-dot.on::before { width:var(--dot-size, 6px); height:var(--dot-size, 6px); opacity:1; } /* The same test swatch() uses for a pale chip, so a dot and its chip never disagree about needing an edge to be seen against white. */ .swatch-dot.light::before { box-shadow:inset 0 0 0 1px rgba(0,0,0,.22); } /* The chosen color is always FULL SIZE, in view or not. It is the one dot someone looks for deliberately, and shrinking it off-screen would hide exactly the thing the ring exists to point at. */ .swatch-dot.picked::before { width:var(--dot-size, 6px); height:var(--dot-size, 6px); opacity:1; box-shadow:0 0 0 1.5px var(--bg, #fff), 0 0 0 3px var(--ink, #222); } .swatch-dot.light.picked::before { box-shadow:inset 0 0 0 1px rgba(0,0,0,.22), 0 0 0 1.5px var(--bg, #fff), 0 0 0 3px var(--ink, #222); } .swatch-dot:focus-visible { outline:2px solid var(--ink, #222); outline-offset:2px; } /* The slider moves above the band on mobile. Source order stays as it is, because on desktop the size control belongs under the scene it changes; reordering here rather than in the markup keeps one DOM for both and keeps the tab order sensible in each. */ /* The order itself now lives outside this query — see `.wrap` near the top. Keeping a second copy here meant desktop and phone could drift apart. */ /* Above the scene the block needs real white space under it, not just the focus ring's clearance: 8px of reserve reads as the ring touching the band. Match the side gutter so the gap looks deliberate. */ .sizes { padding-top: 14px; padding-bottom: 24px; } :root { --gutter: 24px; } .about .cols { grid-template-columns: 1fr; } .nav { display: none; } /* The nav and the Etsy link go on a phone; Share stays, because the OS share sheet is the whole point of it there. */ .share-wrap { margin-left: auto; } /* The prompt stays on a phone. Hiding it was what left the chooser looking like decoration; it is the only thing that says what the control is for. */ /* Full width on a phone: a pill sized to "Amazon Smart Wireless Dimmer Switch" and a pill sized to "Hue V1" look like different controls when they are the only thing on their line. */ /* The name row goes: eleven of "Straight Quintuple" do not fit across a phone, and the numbered chips already say what each stop is. Everything else about the chips is the same as it is on a desktop, and lives with `.detent` above rather than being restated here. */ .labels { display: none; } .band { border-radius: var(--radius); margin-inline: 24px; width: auto; } /* In mobile mode the copy always sits in the page body, whether or not the boxes also fit beside the product, and whether or not the toggle is on. */ .feature-list { display: grid; } .feature-list { grid-template-columns: 1fr; max-width: 560px; } footer { flex-direction: column; align-items: flex-start; gap: 8px; } .panel-stack { position: static; width: auto; padding: 20px 0 0 0; gap: 0; } .panel { background: none; box-shadow: none; backdrop-filter: none; padding: 0; } #palette { flex: none; padding-inline: 24px; } /* One scrolling row: a grid spread across a wide page puts the swatches too far apart to compare. */ /* Pulled out by the scroller's side padding, so the row still starts on the gutter while the scroller has room for the selection ring. The fades are positioned against this element, so it must share the scroller's edges exactly. */ .swatch-wrap { margin: 0 -5px; min-height: 0; } /* Side padding so the selected chip's ring is not clipped by the scroll container: it is drawn 4px outside the chip, and this row scrolls, so zero padding cuts the first and last selections in half. The negative margin goes on the WRAPPER, not the scroller, so the two keep the same edges - the fades are positioned against the wrapper, and if the scroller overhangs it they sit inside the row and wash a chip that is still fully visible. */ .swatches { overflow-x: auto; overflow-y: visible; padding: 6px 5px 8px 5px; cursor: grab; } .swatch-grid { display: flex; gap: 10px; } .swatch { flex: none; width: 84px; } .fade { top: 0; bottom: 0; height: auto; width: 30px; } .fade.top { left: 0; right: auto; background: linear-gradient(to right, #fff, transparent); } .fade.bottom { right: 0; left: auto; background: linear-gradient(to left, #fff, transparent); } /* Docked to the viewport, not sticky: sticky only engages when the container is taller than the viewport, and this one is not. */ #purchase { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 24px calc(10px + env(safe-area-inset-bottom, 0px)) 24px; background: #ffffff; border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.10); } /* The offer stays. Free shipping and a live coupon are the two reasons to press Buy, and hiding every .note here hid them from the ~95% of visitors who arrive on a phone - the surface the social campaigns feed. The Etsy handover note is the one that goes: three more lines would make the dock a fifth of the screen, and it is reassurance rather than an offer. It reappears in the page body below (.note-echo). */ #purchase .note { display: none; } #purchase #offer { display: block; font-size: 12px; line-height: 1.3; } .note-echo { display: block; margin-top: 18px; } .wrap { padding-bottom: calc(var(--dock-h, 88px) + 16px); } } @media (max-width: 719px) { :root { --gutter: 16px; } #palette { padding-inline: 16px; } .band { margin-inline: 16px; } #purchase { padding-inline: 16px; } .price { font-size: 24px; } } @media (max-width: 479px) { .swatch { width: 76px; } } /* ---------- 360 to 420: the last place anything has to give ---------- */ /* Gutters stay at 16px all the way down: the band's height is capped by what the master can cover at that width, so narrowing the gutter only buys a few pixels of band and costs a consistent page edge. */ @media (max-width: 419px) { .masthead { height: 78px; } /* Scaled with the bar rather than left behind: 44 of 72 is 61%, and 36 of 60 is the same fraction, so the mark keeps its weight on a phone. There is room - the nav is display:none below 960px, so the only thing the logo shares this bar with is empty space. */ .masthead img { height: 54px; } .buy { height: 44px; padding-inline: 16px; font-size: 15px; } .price { font-size: 22px; } .spec { font-size: 12px; } /* Position only. The size is deliberately the same on a phone: shrinking a 44px target to 30px undoes the one thing it is sized for (D-287). */ .feature-toggle { left: 12px; bottom: 12px; } .swatch { width: 68px; } .swatch i { height: 42px; } .sizes { padding-top: 16px; } } /* ---------- catalog ---------- The catalog and the brand-group pages. Their own stylesheet rules rather than the configurator's, because catalog.html carries no script: every tile is a link and nothing here waits on a manifest to arrive (D-111). */ /* The breadcrumb is the trail TO this heading, so it sits close to it - proximity is what says they belong together. The air goes underneath instead, between the heading block and the grid it introduces. It used to be the other way round: 32px above the h1 and 4px below, which read as a heading that had drifted away from its trail and landed on its prompt. The zero above matches the product pages, which measured 0 between the crumb box and the heading box and read correctly. In rem below, so the block grows with a reader's text size (D-172). */ .catalog { padding-block: 0 8px; } .catalog h1 { margin: 0 0 0.6rem; font-size: 28px; font-weight: 600; } .catalog .prompt { margin: 0 0 1.75rem; color: var(--muted); } .catalog-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .catalog-grid a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; background: #fff; transition: border-color .15s ease, transform .15s ease; } .catalog-grid a:hover, .catalog-grid a:focus-visible { border-color: var(--brand); transform: translateY(-2px); } /* The remote sits on the scene plate, cropped to the tile. A fixed aspect keeps the grid even before the images decode, so the page does not reflow under the pointer. */ .catalog-grid .shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; background: var(--surround); } /* Three pre-cropped layers from `web/tiles/`, stacked: scene plate, pedestal, remotes. Same composition the configurator draws, same source renders, but cropped and downscaled at build time - 403 KB for the page against 4.9 MB for the originals, and no inline `style` for `style-src 'self'` to block (D-117). All three share the tile box exactly, so they cannot drift. */ .catalog-grid .shot img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .catalog-grid .label { padding: 14px 16px 16px; } .catalog-grid .label strong { display: block; font-size: 17px; font-weight: 600; } .catalog-grid .label span { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; } @media (max-width: 720px) { :root { --gutter: 20px; } .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } } /* ---------- no-script fallbacks ---------- The pre-rendered size links. They are the only navigation on a layout page when app.js does not run, and a duplicate of the slider when it does, so they are shown by default and hidden the moment `has-js` lands (D-111). Default-visible, not default-hidden: a stylesheet that loads while a script does not must fail toward the links being there. */ .seo-sizes { margin: 0 0 12px; padding-inline: var(--gutter); } .seo-sizes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .seo-sizes a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); font-size: 14px; } .seo-sizes a[aria-current="page"] { border-color: var(--brand); color: var(--brand); } .has-js .seo-sizes { display: none; } /* Everything below is drawn or populated by app.js and is an empty shell without it: the stage shows a bare table with no product on it, the family has no options, and the slider has no detents. Hidden rather than shown broken - what is left is a real heading, the price, the facts, the size links above and a working buy button, which is a page that still sells. The product SHOT is the gap: there is no composite still per layout, which is the same missing asset build_seo.py warns about for og:image. One render pass fixes both. */ html:not(.has-js) .band, html:not(.has-js) .sizes, html:not(.has-js) #palette { display: none; } /* The purchase panel is an absolutely-positioned overlay ON the stage, so hiding the stage wrapper takes the price and the buy button with it. Drop it back into normal flow instead: it carries the only way to buy anything. The is no longer in here - it moved up under the breadcrumb (D-169) - so a no-JS page keeps its heading either way. */ /* Only above 959px. Below that the responsive rules already drop the panel into normal flow, and overriding them again just fights them. */ @media (min-width: 960px) { html:not(.has-js) .stage-wrap { position: static; height: auto; min-height: 0; } html:not(.has-js) .panel-stack { position: static; width: auto; max-width: 420px; margin: 0 var(--gutter) 28px; inset: auto; } } html:not(.has-js) .panel { background: #fff; backdrop-filter: none; box-shadow: none; border: 1px solid var(--line); }