/* ========================================================================== GARN — Design System Palette inspired by Hill People Gear: brick-red/rust as the primary brand accent, khaki tan as the secondary accent, dark neutral ink + cream as the base. Sage green is kept defined but no longer used for primary UI so the site reads as two disciplined earth-tone families instead of three. ========================================================================== */ @font-face { font-family: 'Traditio AH'; src: url('../assets/fonts/traditio.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'KG Always A Good Time'; src: url('../assets/fonts/KGAlwaysAGoodTime.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'F25 Executive'; src: url('../assets/fonts/F25_Executive.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Typewriter Condensed'; src: url('../assets/fonts/typewcond_regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Typewriter Condensed'; src: url('../assets/fonts/typewcond_demi.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Typewriter Condensed'; src: url('../assets/fonts/typewcond_bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } /* block, not swap: Lambda is --font-body, so it sets the width of nearly every line on the site. Under swap the browser paints in the system fallback first -- which is wider -- then reflows when Lambda arrives, which showed up as a flash of over-wide text on load. block holds the text invisible briefly instead, so it only ever paints at its real width. The file is self-hosted and 120KB, so that wait is imperceptible; the pages also preload it. */ @font-face { font-family: 'Lambda'; src: url('../assets/fonts/Lambda-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: 'Lambda'; src: url('../assets/fonts/Lambda-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: block; } :root { /* Raw palette */ --forest: #131313; /* deep neutral ink, softened from the raw forest swatch so dark sections read moody rather than saturated-green — the page ground, a step above the footer */ --forest-deep: #202020; /* the site's only other approved background tone — the .section-alt band, and the About story cards */ --sage: #4d5947; --sage-dim: #1c1d19; --sage-light: #9aa88f; --tan: var(--rust-bright); /* was warm khaki tan, then a darker mismatched brick red, now matches the actual brand red */ --tan-light: #e26969; --rust: var(--rust-bright); /* brand accent red — was a darker mismatched brick red */ --rust-bright: #b8322f; --rust-deep: #6e1f1a; /* darkest rust, for hover-darken effects */ --rust-vivid: #c2402b; /* brighter tint of --rust, for accents on dark backgrounds */ --tan-vivid: #d44740; /* brighter tint of --tan, for accents on dark backgrounds */ --btn-red: #b02b25; /* solid mid-tone, for text/border/accent uses */ --btn-red-light: #d6413d; /* hover-sweep tint for redish buttons */ /* The promo bar's fill. Same red as the two button washes above -- only the alpha differs, and this is the lowest of the three: the bar is a standing element behind white text, so it wants to sit under the page rather than on it. Flat, edge to edge. */ --promo-wash: rgba(214, 65, 61, 0.12); --btn-red-gradient: linear-gradient(to bottom, #d6413d 0%, #b02b25 50%, #901711 100%); /* button fill, matches user-supplied pill graphic */ --btn-gray-dark: #5c5c5c; /* flat hover fill for all the big buttons — desktop only now; the phone rests every button on --btn-white-solid instead of lifting some of them to this */ --btn-white-solid: #404040; /* flat lighter-gray resting fill for all the big buttons, desktop and mobile */ /* The hero button's pair, standing in for the two grays above on that one button. --title-red at rest so it is the same red as the eyebrows and the star ratings rather than a second one, and a lighter step of it for the sweep, which is the direction the grays move on hover too. The step is smaller than the grays' (+17 per channel against their +28) and that is deliberate: it is as far as the fill can lift before the off-white label drops under 4.5:1 against it. Hover only. The gray buttons hold their LIGHTER value statically on phones, where there is no hover to reach it -- the red does not, so this value is never on screen without a pointer over it. */ --btn-red-solid: var(--title-red); --btn-red-hover: #c93f3c; /* The drop shadow under every pill button. Not a new value: this is what the hero's button and the Subscribe band's button already carried, each writing it out for itself because those two sit on photography and needed to lift off it. The rest of the buttons sit on flat dark grounds and had none. They all have it now, from here, so there is one shadow to turn. Tight and low -- 3px down, 18px of blur -- because these are pills a couple of hundred pixels wide, not panels. --shadow, the site's other shadow, is 20px down and 44px of blur: that one is for the cart drawer and the popups, and under a button it reads as the button floating several inches off the page. */ --btn-shadow: 0 3px 18px rgba(0, 0, 0, 0.35); --title-gold: #c6ac5a; /* review-success celebration icon only — star ratings and eyebrow/title text use --title-red instead */ --title-red: #b8322f; /* color for eyebrow/title labels */ --offwhite: #fbf7f3; /* Dark theme (default — most of the site) */ --bg: var(--forest); --bg-alt: var(--forest-deep); --surface: #202020; --surface-2: #131313; /* The site header and the dropdown menus that hang off it. It used to follow --featured-ground, so the bar and the hero band under it read as one field and what marked the header was its border-bottom rather than a change of tone. It is a literal now: the frame -- header and footer -- sits one step under the page instead, and the two ends of the document carry the same value so they read as a matched pair. */ --chrome-ground: #141414; /* The footer. A step under the page rather than level with it: the footer is the end of the document and the only element below the last section, so it is the one piece of furniture that should read as underneath the content rather than as more of it. The same value as --chrome-ground, written out rather than referring to it. The two are equal on purpose right now -- they came apart while the header sat at #101010 and the header has moved back -- but they are opposite ends of the page, so they stay separate and either can move without dragging the other with it. */ --footer-ground: #141414; /* The product page's mobile buy bar. It used to share the frame's token with the header and footer and no longer does: the bar is the one piece of furniture that has controls sitting ON it -- the colour select and the quantity pill, both --field-fill -- so it has to stay a step under them, which the frame at --forest no longer is. Raised from #0d0d0d, the value the frame carried when the bar was built against it; still well clear of --field-fill above it. */ --buy-bar-ground: #111111; /* The panel behind a popup -- the quick view and the write-a-review modal, which are the same colour. Its own token rather than --surface, which they used to share with the cart drawer, the filter sidebar and a dozen form fields. The quick view's controls used to be built as a veil laid over this value and so moved with it; they sit on --surface directly now, so this can move on its own -- but the two have to stay far enough apart that the controls still read as sitting ON the panel. */ --modal-panel: #131313; /* The fill behind the buy bar's controls -- its colour selector, that selector's open menu, and the quantity pill. Well above the bar's own --buy-bar-ground, so they read as controls sitting on it rather than cut out of it. --surface, lowered from #252525 to match: the same fill the product column's controls and the quick view popup's carry, so a colour selector looks like itself in all three places. Kept as its own token because the bar is the one place where the fill has to clear the surface under it by a set amount -- if --surface ever moves, check it still does. */ --field-fill: var(--surface); --border: #333332; --border-strong: #545352; /* The two topo strips: Free Membership on the home page, Get In Touch on the About page. --topo-ground is the flat colour the texture sits on; --topo-strength is how much of the texture shows through it. Those are the only two numbers -- see the topo block near the end of the file. With --topo-strength now at 1 the texture is opaque and this is what shows BEFORE it arrives rather than through it -- the colour the strip paints on first load. Set to the artwork's own ground so the swap is not a visible step as the image comes in; it has followed the artwork from #0a0a0a out to #151515 and back down to here, and the current topo meters neutral grey at about #0c0c0c. It matters again the moment the strength drops below 1. */ --topo-ground: #0c0c0c; /* The Featured Collection section, and the band under the hero photo -- .hero paints this in the strip below .hero-photo, so the section appears to run up underneath the photo rather than stopping at a bar of its own. --forest, the site's base dark. The About Us section directly below used to share it, so the two ran together as one field with only the ruled border between them. The stories have since been lifted to #1a1a1a, so that border now separates two tones rather than sitting inside one field. Its own token rather than a literal written twice, because the hero band has to follow it. Whatever this becomes, the band under the hero photo becomes too, or a bar appears between the hero and the section. One value not to give it: anything between #050505 and #101010. The product photos are shot on a dark surface that vignettes across exactly that range, so a ground inside it is lighter than part of every photo and darker than the rest -- which reads as a failed match rather than a choice. --forest clears the top of that range, black clears the bottom; both read as intentional, and the middle does not. */ --featured-ground: var(--forest); /* 1, up from the 0.25 this sat at for years, and that is not a decision to show the texture more -- it is the current artwork's own strength, shown unmodified. The file this replaced was WHITE contour lines on black: measured across it the values ran the full 0-252, so it had to be held at a quarter or the lines would have been stripes of glare across the bottom of the page. The topo in use now is already finished and dark -- its lines peak around 21 against a ground near 16, a range of about 10 where the old one had 250. Dimming that a second time in CSS would put the lines a value or two off their own ground, and a parallax you cannot see is not one. Note this is the CEILING. The texture is now as strong as CSS can show it, so if it ever reads too faint the fix is a higher-contrast file, not a number here -- there is no headroom left in this direction. Lowering it still works: that blends the texture back toward --topo-ground below. */ --topo-strength: 1; /* Where the header stops, in viewport terms -- the line every sliding sheet opens up to and every backdrop starts at. Written by initSheetTop in main.js on every scroll that moves it, because the header is sticky on a phone: at the top of a page its foot is below the promo bar, and once you have scrolled past that bar it is the header's own height and stays there. This value is the resting one, for the moment before the script runs. */ --sheet-top: calc(var(--promo-h) + var(--header-h)); /* Height of the promo bar above the header. A token because three other things are measured off it -- see the .promo-banner block for which. */ --promo-h: 38px; /* Height of the header itself. A token for the same reason: the nav dropdown on a narrow window hangs from a fixed offset down the page and has to start exactly where the header ends. */ --header-h: 96px; /* The darkening any full-screen viewer lays over the page behind it -- the stacked photo gallery and the quick view popup's backdrop. One token so opening either one dims the page by exactly the same amount. */ --overlay-dim: rgba(0, 0, 0, 0.7); --text: #fbf7f3; /* near-white, not true white */ --text-muted: rgba(251, 247, 243, 0.72); --text-faint: rgba(251, 247, 243, 0.5); --title: #ececec; /* headline color for h1/h2/h4 titles, light gray instead of near-white */ /* Dark sections (header, hero, footer, subscribe) */ --on-dark: var(--offwhite); --on-dark-muted: rgba(251, 247, 243, 0.72); --on-dark-faint: rgba(251, 247, 243, 0.5); --on-dark-border: #383737; --on-dark-border-strong: #5d5c5b; --accent: var(--rust); --accent-bright: var(--tan); --danger: #a1302a; /* Type One family across the whole site, which is what the home page had already gone to a rule at a time -- sixteen blocks in this file name Barlow Condensed outright. Both tokens now resolve to it, so the other ten pages follow in one move rather than sixteen more. The two tokens are kept apart even though they are equal. They are two ROLES -- the face headings and controls are set in, and the face copy is set in -- and every rule in this file asks for one or the other by role. Collapsing them into a single token would lose that, and the site has already run two families and may again. What this replaces: Koulen, an uppercase-only display face, and Lambda, the body serif. Both -face blocks and both files stay where they are, unused, exactly as Typewriter Condensed already was -- nothing now asks for any of the three. Read the note on letter-spacing before adjusting anything that looks wide: the 0.2em on .btn and the tracking on several headings were set for Koulen, which is narrow enough to need that much air. Barlow is narrower still in the letterform but spaces differently, and those numbers have not been swept. */ --font-display: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-gold: var(--font-display); /* Spacing / radius */ --radius-sm: 4px; /* ---- What every photo on the site fades up OUT OF --------------------- Seven rules carry the image entrance -- the global img rule, the product card wrapper, the gallery and popup slides, the Coming Soon plate, the split-media photos and the five page-header banners -- and all seven read this. It is a filter list rather than a colour because that is what those rules apply: brightness(0) renders any image as a flat rectangle, which is the "before" the entrance settles out of. The catch is that brightness(0) has exactly one endpoint and it is pure #000. The hero worked around that years-of-passes ago by painting #141414 on the layer BEHIND the photo and fading the photo up with opacity, which is how it reaches a colour a filter cannot -- see the note on .hero-slide-img. Everything else on the site still uses the filter, and on the dark bands a #000 rectangle sitting in a #141414 section reads as a hole in the page rather than as a photo about to arrive. invert() is what closes the gap. invert(a) mixes a colour with its own inverse, so on black it resolves to `a` flat: 0.0784 is 20/255, and 20 is #14. `brightness(0) invert(0.0784)` is therefore exactly #141414, with no second element and no ground to paint. The end state stays `brightness(1)`. A filter list interpolates against a shorter one by padding it with each function's identity value, so brightness(1) is read as `brightness(1) invert(0)` for the transition and both components animate together. Every width. It went in mobile-only, then more images were pointed at that were not on a phone -- which is the answer to the question the split was posing anyway: a photo arriving out of #000 on one screen and #141414 on another is not two decisions, it is one decision made twice. The media query that used to carry this is gone with it. */ --reveal-from: brightness(0) invert(0.0784); --radius: 8px; --radius-lg: 16px; /* The home page's bands -- the two stories, the category tiles and Get In Touch. One value for the three, because they sit under each other down one page and a curve that differs between them reads as a mistake. 6.4px: --radius-lg was the first try and was 60% too much on boxes this large. Written as its own token rather than as a calc off --radius-lg, so it can move without dragging the nine other places that use that. */ --band-radius: 6.4px; /* The quick view popup's corner. It borrowed --band-radius for a moment, matching the home page's bands, and that curve is too tight for a panel this size -- 6.4px on a 1300px-wide sheet barely reads as a corner at all. 16px is --radius-lg, the widest curve already in the file, used on the About page's photo frames. Its own token rather than a reference to --radius-lg, because the two are not the same decision: this one follows the popup and that one follows a photograph. Turn this number to change the popup and nothing else -- all four rules that set the modal's corner read it. */ --qv-radius: 10px; --container: 1500px; /* The page's own side margin -- the inset .container holds its content off the window edge with. Named because it is no longer only a horizontal measure: the home page's white run (Featured Collection, the two stories, the membership band) uses it vertically as well, so the space between those sections is the same as the space beside them and the whole block reads as one gutter carried round the page. */ --page-gutter: clamp(16px, 4vw, 64px); /* The space between cards in a product grid. Named because the hero's white frame is set to the same thickness -- the two are meant to be the same measure, and a shared value is what keeps them so if either moves. */ --grid-gap: 18px; /* The ground the home page's panels share: the two story copy panels, the panel under every product card, and the Free Membership band. It was written out as a literal in all three places, which is three places to miss when it moves -- and it has moved a dozen times now. One value. A gradient again, after a run of flat colours: #f6f6f6 / #c6c6c6 light, twice darker, inverted to #434646 / #141414, turned to run from the top right off a warm #6e6060, then flat through #544144, #3f4345, #2f322d, #777a73, #3f4541, #515c7b and #394c58, then vertical fades in grey and in plum. This one runs vertically -- `to bottom`, so #4c3e3b is the head and it fades down to #261f1e -- the same colour at half the value, channel for channel: 76/62/59 becomes 38/31/30. One hue, one fade, no drift toward a second colour on the way down. Vertical, not the 135deg or 225deg diagonals it used before, and the difference matters on these surfaces: a diagonal puts its light corner somewhere different on a tall story panel than on a short category tile, so three panels of different proportions never agreed. A vertical fade lands the same way on all of them -- lighter at the head, dark at the foot, whatever the height. Downward, which behaves like light falling on the panel rather than rising out of it. Both stops are a cool slate: blue and green level with each other, red nine under them. Enough to read as cool without reading as blue. The pairing before it leaned the other way -- an olive grey -- so this is the same idea with the temperature reversed. Lighter than the grey it replaces, and worth watching: white on this head is about 5.9:1 where that gave 7.7:1. Still clear of the 4.5:1 normal text needs and the foot is far past it, so nothing on the panels has to change -- but this is the second-lightest ground these have taken, and the taupe two before it is the one that failed. It is also the closest any of these grounds has come to the promo bar's red -- it is that red taken most of the way to brown -- and the bar is set to the head stop, so the two are the same colour rather than two versions of one. Worth noting against the rest of the site rather than assuming it: --forest is the name of the dark ground everything else is built on, but its value is #131313, a neutral ink deliberately softened off the raw forest swatch so those sections read moody rather than saturated-green. So this does not match anything elsewhere -- it is the green the site's own token only claims in its name -- and it is the only hue on the page besides the promo bar's red. White type clears at about 5.9:1 at the light end and about 12:1 at the dark, so nothing on the panels needs a weight or a size changed. Still named a ground though it is a gradient again: it is what the three surfaces are painted in, flat or not, and renaming it every time the value changes shape would churn the call sites for nothing. Two of the three references are in the desktop home blocks; the third, .category-info, is a base rule, so the phone gets this too -- the category tiles are new content rather than a desktop repaint of something it already had. */ /* The two stops, named, because three other things in this file need to know one or the other of them and none of them can read a stop out of a gradient: the promo bar is the head as a flat fill, and the About page's scroll fade has to end on the foot so the copy dissolves into the panel rather than into a colour that is not behind it. The bar was a hand-typed literal for a long time and went stale between edits more than once. It is a token reference now, so a colour change is these two lines and nothing else. */ /* The light pages' ground. Six surfaces were painting #ffffff literally -- four page bodies, two sections -- plus the two panels the quick view is built from, and a colour used in eight places by eight separate rules is one that will go stale in some of them. One value now. White. It was #efeff1 for a moment -- a hair off white and a hair cool with it -- and is back to where it was. The token stays: it is not the colour, it is the eight rules no longer each carrying their own copy of it, and the next time this moves it is one line. */ --page-ground: #ffffff; /* ---- The three-colour drop -------------------------------------------- Colours arrive three at a time and fill four slots, always the same four. Written down so the next set goes to the same places without being asked: 1. the gradient -- --panel-head here, with --panel-foot at half its value; drives the story panels, the category tiles and the Free Membership band 2. the buttons -- all four of them, one fill: the hero, Contact Us and the two story buttons 3. the accent -- the story eyebrows (ABOUT US, USA SOURCED & SEWN) and the drop-in underline under a link, in the header nav and in the footer columns Which colour goes to which slot is decided by the colours, not by the order they arrive in: - the BUTTONS take the most saturated, and their label is white. That is fixed and it is decided first. - the GRADIENT takes the darkest of what is left. - the ACCENT takes the lightest. A drop can also name its own assignment, and when it does that wins over all of the above. It can carry FOUR colours rather than three, in which case the accent's two uses part company -- the story eyebrows take one and the header and footer underlines take another. They are separate declarations and always have been; sharing a value was a convention, not a constraint. Saturation here means chroma -- how far the three channels spread -- rather than HSL's S, which reads a pale wash as highly saturated because it divides by how close the colour is to white. By RGB spread this set is 60, 49, 31 and by HSL it would be 0.38, 0.31, 0.24, which name different winners; the spread is the one that matches what the eye calls vivid. Two tensions to watch, and a set will usually hit one of them. The first: the most saturated colour is often also the darkest, and the gradient is the slot that most needs a dark one -- it carries white type across a whole panel and its fade needs somewhere dark to fall to. When the button takes the dark one the panels get a light ground and their white type fails. The second: the ACCENT has two uses on very different grounds. As the underline it is a 1px rule on near-black chrome, which needs 3:1. As the story eyebrow it is small text on --panel-head, which needs 4.5:1 and is a much lighter ground. A mid-value accent clears the first and fails the second, and that happens whenever the accent and the panel are close in value -- which is to say, whenever all three colours in a set come from the same narrow band. Both are avoided the same way: send three colours that are genuinely far apart in value, not three shades of one. A vivid one for the buttons, a dark one for the panels, and a light one for the accent. */ --panel-head: #3d3d3d; /* Half of --panel-head on every channel, rounded up, which is the ratio this gradient has held through every colour it has been given: 61/61/61 to 31/31/31. Not a look decided per colour -- it is what keeps the run's depth constant while its hue moves. This one has no hue at all. #332a29 before it was a warm grey, ten levels of red across the span; this is three equal channels, the first fully neutral gradient the panels have carried. It is also the popup's controls' value and the store cards' Quick Add fill, so the same grey now appears as a panel, as a control and as a button on three different pages. It is LIGHTER than anything before it -- 7.2:1 to white at the head where #332a29 read 14.0:1, and 16.5:1 at the foot. Still far past the 4.5:1 white type needs, but half the room it had, and the loss lands on the things that have to separate FROM the panel rather than sit on it. See the hero-button note for the one that no longer does. */ --panel-foot: #1f1f1f; /* The promo bar, and with it the strip of canvas above the page -- see the `html` rule and .promo-banner, the only two things that read this. Its own token as of now. It was --panel-head, and that was honest while the two were meant to be one colour: the bar sat directly above a page whose panels ran from the same value, so the page appeared to come out from under it. They have been given different colours, so a token that said "the bar is the gradient's head stop" would now be saying something false in two places at once. The canvas has to follow the BAR and not the gradient. That strip is only ever seen at the top of a fast scroll that overshoots, where the thing directly under it is the bar -- which is the whole reason it stopped being white. Reading --panel-head there would put a lighter warm brown above a dark red bar, which is the same visible seam in a new colour. Red again, and the site's own: var(--btn-red), #b02b25. That is the fill on Shop The Store in the hero, on both story buttons and on Contact Us, so the bar is now the same red as every button on the page rather than a red of its own -- which is the point of taking the token instead of the hex. The bar has been through a 12% red wash, a full-strength brand red, a run of browns, and #3d3d3d gray to get back here. White on it measures 6.5:1, comfortably past the 4.5:1 body text wants, so the #ffffff on .promo-banner needs no revisiting. */ --promo-ground: var(--btn-red); --panel-ground: linear-gradient(to bottom, var(--panel-head) 0%, var(--panel-foot) 100%); /* The depth of the home page's four bands -- the two stories, the category grid and Get In Touch. They were three different heights, each set by whatever was inside it: the stories by a 16:10 photograph in the wider of two grid columns, the grid by a square plate plus however deep a panel of copy came out, Get In Touch by its own padding. One value now drives all four, so they read as one run down the page. Where the number comes from -- it is the story bands' own height, kept because that was the proportion the page was designed around: columns minmax(0, 1.15fr) minmax(0, 2fr), gap 0 so photo 2 / 3.15 of the container's content width at 16:10 x 10 / 16 of its own width together 2 / 3.15 x 0.625 = 0.396825 Measured on .container's content box -- the page measure less its two gutters -- not on the sections themselves. Get In Touch is inset by margins rather than by a container, so past 1500px it runs wider than the stories do; the min() is what keeps every band the same height anyway. 100vw includes the scrollbar where the platform draws one over the page, so with classic scrollbars this can be a few pixels tall below 1500px. macOS overlay scrollbars measure zero and it is exact there. Only the desktop blocks read it. */ --band-h: calc((min(100vw, var(--container)) - 2 * var(--page-gutter)) * 0.396825); /* The two story bands, a fifth deeper than the other two -- they were a third deeper a moment ago and this is a step back from that. These are the bands carrying a photograph AND a paragraph side by side, which is why they take more than the rest. The photo's proportion goes with the height, since it fills the row, so the ratio is arithmetic rather than a second decision: media column 2 / 3.15 of the container = 0.63492 height 0.396825 x 6 / 5 = 0.47619 ratio 0.63492 / 0.47619 = 1.3333, i.e. 4:3 The two move together in one direction -- a deeper band is a squarer photo -- and 1:1 is where the pictures stop being wide at all. That is the limit on how far these can go. */ --band-h-story: calc(var(--band-h) * 6 / 5); --shadow: 0 20px 44px rgba(0, 0, 0, 0.16); } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } /* The background on the ROOT, which is what fills the canvas -- including the strip revealed above the page when a fast scroll overshoots the top and rubber-bands. --promo-ground, the promo bar's own fill, so the page appears to come out from under the bar rather than off the top of a separate sheet. It read --panel-head until the bar and the gradient were given different colours; what this strip has to match is the BAR, which is the only thing it is ever seen against. Which makes this rule look, at the moment, like it does nothing. The bar is white and the strip is white, and the strip was white to begin with -- with no background declared here the body's propagates to the canvas, and on the light pages the body is #ffffff. The declaration is still doing the work: it is white BECAUSE the bar is, not because nothing was set, and it follows the bar the moment that moves again. Deleting it would look identical today and be wrong on the next colour drop. Setting this changes where the body's background paints -- it stops propagating and covers the body box only. That box is the full document, so nothing on any page looks different; only the two overscroll strips do. The one at the BOTTOM is handled separately, on .site-footer, because a root background can only be one colour and the bar's fill under the footer would be as wrong there as an unrelated colour is here. */ html { scroll-behavior: smooth; font-size: 18px; background: var(--promo-ground); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.8; letter-spacing: 0.0375em; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } /* Every photo on the site settles in the same way the hero does: starts at 1.28 and shrinks to its resting size over 2.7s, with no fade -- images are at full opacity from the first frame. Their containers clip the overflow. This rule covers the static images in the markup. Generated product images carry .product-media-img, which opts out of it (see that rule) -- those animate through their wrapper instead, which is what keeps the product page's thumbnails and the stacked popup still. */ img { transform: scale(1.28); filter: var(--reveal-from); transition: transform 2.7s cubic-bezier(0.16, 1, 0.3, 1), filter 2.7s cubic-bezier(0.16, 1, 0.3, 1); } img.is-visible { transform: scale(1); filter: brightness(1); } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } button { font: inherit; cursor: pointer; } input, textarea, select { font: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: 0.0375em; /* Koulen ships a single weight, so asking for 700 only got the browser's synthetic bold -- thicker, muddier strokes. 400 is the face as drawn. */ font-weight: 400; margin: 0 0 0.5em; line-height: 1.3; } h1, h2, h4 { color: var(--title); } h1 { font-size: clamp(2.5rem, 4.5vw, 3.75rem); } h2 { font-size: clamp(1.75rem, 3.2vw, 2.3rem); } h3 { font-size: 1.25rem; font-weight: 400; } p { margin: 0 0 1em; color: var(--text-muted); font-size: 1.0625rem; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--page-gutter); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-gold); letter-spacing: 0.18em; font-size: 0.9375rem; font-weight: 600; text-transform: uppercase; color: var(--title-red); margin-bottom: 14px; } /* The 22px rule that used to sit before the label is gone. It was a ::before here -- content: '' at 22x2 in currentColor -- and it came off on mobile first and now at every width, which is why the rule is deleted rather than turned off: `content: none` in a media query was the mobile-only answer, and keeping it as a base rule plus an override to cancel it would leave two places to read to find out that nothing is drawn. .eyebrow keeps `display: inline-flex` and its 8px gap. Both are inert with a single text child -- a gap needs two items to sit between -- and they are what the mark needs back if the rule ever returns. */ /* On dark sections (hero, subscribe), lighten the eyebrow for contrast */ .hero .eyebrow { color: var(--title-red); } .eyebrow-lg::before { width: 28px; } /* ---- Buttons ---- Standard, no-gimmick pattern: solid buttons darken slightly on hover, outline buttons fill solid on hover. Simple color/background transitions only — nothing sliding, growing, or animating. */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px; border: none; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.9375rem; font-weight: 400; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; } .btn-ghost { padding: 10px 16px; } .btn-block { width: 100%; } .btn-sm { padding: 10px 18px; font-size: 0.75rem; } /* Wood-sign image buttons — still just `.btn` underneath, so the lantern glow (::after) and light-cast shadow (:hover box-shadow) rules above keep working unchanged; this just strips the padding/fill/border so the PNG (with its own baked-in shape) is all that shows. */ .hero-sign-btn { padding: 0; background: transparent; border: none; border-radius: 10px; overflow: hidden; width: clamp(150px, 16vw, 210px); cursor: url("data:image/svg+xml;utf8,") 10 10, pointer; } .hero-sign-btn img { width: 100%; height: auto; display: block; } .hero-sign-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 10%; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; color: var(--on-dark); font-size: clamp(0.8rem, 1.7vw, 1.05rem); line-height: 1; text-align: center; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.55); pointer-events: none; } .btn:active { filter: brightness(0.92); } /* ---- Header ---- */ /* ---- Promo banner ------------------------------------------------------- A thin red bar above the header on every page, showing one message at a time: the current one leaves to the left as the next arrives from the right, with dots at the right edge for how many there are and which is up. The messages are data (PROMO_MESSAGES in main.js) and the slides and dots are built from them, so the pages carry an empty [data-promo-banner] and the copy lives in one place instead of eleven. Its height is a token because three other things are measured off it: the home page's header floats over the hero and has to start below the bar, the hero's own 100vh has to lose it, and the narrow-desktop nav dropdown hangs from a fixed offset down the page. */ .promo-banner { position: relative; z-index: 101; height: var(--promo-h); /* Its own token now rather than the Add to Cart buttons' resting fill -- see --promo-wash for why the two came apart. border-box sizing means the line below comes out of --promo-h rather than adding to it, so the bar is the same height it always was and nothing measured off that token moves. */ /* Flat, and red again -- a dark one. It was --promo-wash, a 12% red over the page, deliberately low so a standing bar sat under the page rather than on it, with a solid --btn-red hairline under it doing the actual dividing. Then the brand red at full strength, where the bar IS the divider, which is why the line went with it: a second red edge under a red band is a line drawn on top of itself. Then a run of browns and greys, following the gradient. That reasoning still holds at every one of them, and holds hardest here, where the bar is a red once more. --promo-ground, and a flat one: the whole gradient was here for a moment and a fade compressed into 38px reads as a bar that has not finished loading rather than as a lit surface -- the panels have the height to carry it and this does not. It read --panel-head for a long stretch, back when the bar was meant to be the gradient's own head stop. It is a colour of its own now, so it has a token of its own -- shared with nothing except the canvas strip above the page, which has to match the bar rather than the panels. Site-wide, not scoped to a page. The bar is shared chrome and has always changed as one thing; the nine pages still dark carry it as easily as they carried the red. border-box sizing means the missing border does not change --promo-h, so the header offset, the hero's 100vh and the narrow-desktop dropdown that all measure off that token stay exactly where they are. */ background: var(--promo-ground); border-bottom: none; /* White on #3d3d3d: 7.16:1, against the 4.5:1 small text wants. Dark again, after a white bar and a light-gray one -- and dark in the panels' own value, since #3d3d3d is --panel-head. The bar and the page's panels have been one colour before and been split apart since; this is them landing on the same value again without the token being re-joined, which is the arrangement that lets either move alone. ---- The list this finally settles Every ground the bar has been given, metered against the WHITE type it carried until now: 15.6:1 on #3a110c, 12.1:1 on #552211, 8.3:1 on #684038 and again on #79352f, 8.1:1 on #7d3733, 7.8:1 on #524e41, 7.2:1 on #56543b, 5.9:1 on the brand red, 5.5:1 on #7e5e3e and on #5d6668, 4.0:1 on #797f51, 3.8:1 on #887b7b, 3.6:1 on #8b8074, 3.5:1 on #81886d and on #7a877b, 3.4:1 on #838886, 2.6:1 on #959d9a, 2.1:1 on #f8973a and on #acb0a8, 1.6:1 on #cfc2af, 1.5:1 on #e6c883, 1.2:1 on #d0e6c5. Every dark ground cleared 4.5:1 and every light one failed it. #f8973a is a saturated orange and #acb0a8 a desaturated sage; they have no hue in common and they metered within half a percent of each other, which is the clearest line in the list: lightness was the whole of it, and hue never entered into it once. Which is why a white bar is not the twenty-second entry in that list. It is the first one where the OTHER half moved. The type had been the one fixed thing for twenty-one grounds -- the fill was the entire variable, so a light fill could only ever fail. Turn the type over with it and the same reasoning that made every dark ground work runs in reverse and lands further from the line than any of them did. The bar has no fade to fall into, which is why it has always been the strictest surface on the site: the panels' type slides down into darker ground as the gradient falls, and 38px of flat colour is all there is here, so the fill is the whole of the contrast. That is still true. It just stopped being a constraint. The pair moves together -- change the bar's fill and this is the other half of it. */ color: #ffffff; overflow: hidden; /* Set by JS as the messages move: 1 running forwards, -1 stepping back through the dots. The parked and leaving positions below are written as multiples of it, so one sign flip mirrors the whole animation. */ --promo-dir: 1; /* How far the dots sit in from the container's own edge, so they clear it rather than running up against it. */ --promo-dots-inset: 14px; /* Space the message may not run into: the dots' own width (about 42px at their widest, with one stretched into a pill) plus that inset. Only the right end holds dots, but the left is kept clear to match it, so the message is centred in the bar rather than in what is left beside them. On a phone that symmetry costs more room than it is worth -- see the mobile block below. */ --promo-dots-w: 56px; --promo-lead: var(--promo-dots-w); } .promo-banner-inner { position: relative; height: 100%; } /* The two gutters exist to keep the message centred in the BAR rather than in what is left beside the dots -- see --promo-lead, which is deliberately the dots' own width. With a single message initPromoBanner renders no dots at all, and 112px of the bar was being held for something that is not there. :has() is what lets CSS see that. The dots container is only written into the markup when there is more than one message, so its absence IS the condition, and this reads it directly rather than needing the script to stamp a class for it. The file uses :has() elsewhere (.section-alt has one up at the subscribe block), so nothing new is being relied on. Add a second message and the gutters come back on their own. */ .promo-banner:not(:has(.promo-banner-dots)) { --promo-dots-w: 0px; --promo-lead: 0px; } /* The window the messages slide through: the full width of the bar, with the reserved space taken as padding on the slides inside it instead of as an inset here. Either way the message centres in the same place and a slide's own 100% is exactly the distance it has to travel to clear the window -- padding keeps that true while leaving the window itself the width of the bar, so nothing painted on a slide can be cut off short of the page edge. Its overflow is what clips the messages on the way through. */ .promo-banner-viewport { position: absolute; inset: 0; overflow: hidden; } .promo-banner-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; /* The space the message may not run into: the dots' own width on the right, matched on the left so the message is centred in the BAR rather than in what is left beside them. justify-content centres within the content box, so the words land inside these gutters. */ padding-left: var(--promo-lead); padding-right: var(--promo-dots-w); font-family: var(--font-body); /* Up from 0.78rem. There is room: the bar is --promo-h (38px) and the line box at this size and leading comes to about 22px, so it still sits clear of both edges. One message rather than three is what allows it -- a rotating bar has to hold the longest of them on one line, and this only has to hold its own. Italic, and a real one: Lambda registers an italic face at the top of this file, so nothing here is a browser-slanted upright. */ /* Fluid, where this was a flat 0.95rem. The message it was set for was 'STORE LAUNCHING SOON!' -- 21 characters, which fits across a 900px window at that size with room to spare. The one in the bar now is four times that, and at 17px it sets to about 700px: fine at 1440, and wider than the space left between the two gutters somewhere around 880. The clamp is what keeps it on ONE line for the whole desktop range instead of wrapping into a bar that is 38px deep and has nowhere to put a second. 1.3vw reaches the 0.95rem ceiling at about 1270px and holds there; the 0.68rem floor is reached around 940 and carries the rest of the way to the breakpoint, where the line still measures some 200px inside what is available. Below 860 it wraps on purpose -- see the block down the file that gives it the depth to. */ font-size: clamp(0.68rem, 1.3vw, 0.95rem); font-style: italic; line-height: 1.3; /* 0.05em, up from 0.02. Tracking rather than size: the bar is 38px and the line box at this size already comes to about 22px, so there is not much room to grow the type without crowding the edges -- but there is room either side of a centred line, which is where opening the letters puts the extra width. An italic at a small size takes tracking well; the slope already opens the spacing on one side of each letter and this evens it out. */ letter-spacing: 0.05em; text-align: center; /* Parked off whichever side it will enter from. Deliberately no transition in this state: only the two moving states carry one, so a slide waiting its turn changes sides the instant --promo-dir flips instead of being dragged across the bar to get there. */ transform: translateX(calc(100% * var(--promo-dir))); } .promo-banner-slide.is-active { transform: translateX(0); } .promo-banner-slide.is-leaving { transform: translateX(calc(-100% * var(--promo-dir))); } .promo-banner-slide.is-active, .promo-banner-slide.is-leaving { transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); } @media (prefers-reduced-motion: reduce) { .promo-banner-slide.is-active, .promo-banner-slide.is-leaving { transition: none; } } /* The link is words inside the sentence, not a separate item after it, so the italic is what marks it as one -- there is a real Lambda italic face, so this is a drawn italic rather than a synthesised slant. inline-block and nowrap so the phrase travels as a unit: the underline below is positioned against this box, and an inline box broken across two lines would leave it measuring only the first fragment. Same underline as the main nav's -- it fades in while sliding down from behind the text, and lifts back up on the way out. */ .promo-banner-link { position: relative; display: inline-block; color: #ffffff; font-style: italic; text-decoration: none; white-space: nowrap; } .promo-banner-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; opacity: 0; transform: translateY(-6px); transition: transform 0.3s ease, opacity 0.3s ease; } .promo-banner-link:hover::after { opacity: 1; transform: translateY(0); } .promo-banner-dots { position: absolute; right: var(--promo-dots-inset); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 7px; z-index: 2; } .promo-banner-dot { position: relative; width: 6px; height: 6px; padding: 0; border: none; border-radius: 999px; /* Held back from the message beside them, which is full white: the dots are an indicator, not something to read. The active one goes to solid below, so weight marks it as well as its stretch. 0.6, not the 0.45 this carried on every previous ground. That value worked on a near-black bar and on a white one, because in both cases the dot at 0.45 still had most of the distance to the ground left; #3d3d3d is a MID grey and there is much less of that distance to spend. At 0.45 the dots meter 2.36:1, under the 3:1 a non-text indicator wants; 0.6 brings them to 3.34:1. The alpha is not a constant -- it is a fraction of whatever room the ground leaves. */ background: rgba(255, 255, 255, 0.6); transition: width 0.25s ease, background 0.25s ease; } /* A 6px target is far too small to tap. The dot stays 6px; this is the part your finger actually has to land on. */ .promo-banner-dot::after { content: ''; position: absolute; inset: -14px -4px; } .promo-banner-dot.is-active { width: 16px; background: #ffffff; } /* On a phone the bar is two lines deep rather than one: the longest message will not fit across a narrow screen at a readable size, so it is given the room to wrap instead of being shrunk until it does. The left gutter drops to a hair as well -- the message then centres in what is left beside the dots rather than in the bar, which buys back most of a line. Nothing at this width measures off --promo-h (the header below is sticky and in flow), so the taller bar costs nothing but its own height. */ @media (max-width: 860px) { /* On :root, not on .promo-banner: the hero and the header read this too, and neither is inside the bar for it to inherit down to. */ :root { --promo-h: 48px; } .promo-banner { --promo-dots-inset: 8px; --promo-dots-w: 46px; --promo-lead: 8px; } .promo-banner-slide { font-size: 0.62rem; } .promo-banner-dots { gap: 6px; } .promo-banner-dot { width: 5px; height: 5px; } .promo-banner-dot.is-active { width: 14px; } } /* Where the bar's Free Membership link lands. Cleared of the mobile header, which is sticky and would otherwise sit over the top of the column -- html { scroll-behavior: smooth } does the travelling, from this page or from any other. */ #free-membership { scroll-margin-top: 86px; } .site-header { position: relative; z-index: 100; background: var(--chrome-ground); /* No rule under the bar, on any page. It separated dark chrome from a dark page, which was its whole job -- and two of the eleven pages are white under it now, where near-black meeting white is about as clear an edge as a seam gets and a hairline across it draws a line where there is already a wall. On the nine that are still dark it was doing little enough that losing it costs nothing, and one header everywhere is worth more than a line on some of them. */ border-bottom: none; } /* Floats over the hero -- so it starts below the bar rather than at the top of the page, which is where top: 0 would put it (its containing block is the page, not the window). */ .page-home .site-header { position: absolute; top: var(--promo-h); left: 0; right: 0; } /* Phones: the bar holds the top of the screen and the page runs under it, frosted -- see-through and blurred -- the whole time, in both directions. It used to do this only while you were scrolling down, and go solid on the way back up. Two states meant the bar changed under you for a reason that had nothing to do with what was behind it, and the change was the only part you noticed. One state is quieter and there is nothing to keep in sync, so no JS runs on scroll for it any more. The transparency is in the background colour, NOT in `opacity` on the header. That distinction is the whole reason the blur is visible. With opacity on the element, the browser draws the header -- blurred backdrop included -- as one group and then composites that group over the ORIGINAL, unblurred page. The blurred copy is sealed behind the bar's own opaque ground where nothing can see it, and what comes through is the sharp page underneath: everything looks right except the one part that was asked for. A translucent ground leaves the header at full opacity, so what shows through it is the filtered backdrop and nothing else. 0.72 rather than something lower on purpose. This is the only chrome on the screen and it is live -- the cart and the menu are there to be tapped -- so it has to read as a bar you could reach for. The blur is what keeps it readable at that alpha: what comes through is soft colour rather than legible words and edges competing with the mark and the icons over them. Prefixed as well as not: iOS Safari still wants -webkit-. Split into two blocks below, and the split is the point. The bar's POSITION is a width question -- a narrow window wants a sticky bar whatever is driving the pointer. Its transparency is not. A desktop window dragged narrow keeps the desktop header, and on the home page that header is absolutely positioned OVER the hero photograph: made see-through, it showed the photo through itself and came out a flat mid-gray, which is a bar that looks broken rather than one that looks frosted. So the frosting is gated on a touch pointer, which is the only place the bar is over the page's own ground rather than over a picture. */ @media (max-width: 860px) { .site-header, .page-home .site-header { position: sticky; top: 0; } } /* The bar was a different COLOUR on touch devices: --chrome-ground at 72% with a 10px backdrop blur under it, so the page showed through the header as you scrolled. On a computer the same bar is that colour at full strength and shows nothing through. Gone, at the asking -- mobile is to match desktop on colour. The whole block goes rather than being set back to opaque: a translucent fill and the blur that makes it legible are one decision, and leaving the blur on an opaque bar would cost a compositor layer to blur what nobody can see through. Nothing else in it moved. The bar is still sticky at these widths (that is the block just above, on width alone), still the same height, and the pointer query that scoped this is not used by anything else here. To put it back, this block is the whole of it. */ .header-inner { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-h); } /* ---- Which third of the bar each block sits in -------------------------- The grid above is 1fr auto 1fr and the markup order is logo, nav, actions. The order asked for is nav, logo, actions -- so the first two swap columns here rather than in the HTML, because that markup is copied into eleven pages and this is one line. grid-column rather than the `order` property. Both would do it, but grid-column says which cell a thing is in, which is the thing being decided; order says where it comes in a sequence and leaves the reader to work the cell out. It also leaves the DOM sequence alone, which is what a keyboard walks: the logo is still the first thing you tab to, as it is on every site, even though it is now painted in the middle. The centre column is `auto`, so it is the logo that sets its width and the two 1fr columns split what is left. That is what centres the badge against the WINDOW rather than against the nav -- the flanking columns are equal whatever is in them. */ /* grid-ROW: 1 on all three, and it is not decoration. Auto-placement walks the items in DOM order -- logo, nav, actions -- and keeps a cursor as it goes. The logo is pinned to column 2, so it is placed there and the cursor ends up past column 2 of row 1. The nav then asks for column 1, which is BEHIND the cursor, and the default sparse packing will not go back for it: it starts a new row instead. So the bar came out as two rows -- the logo alone on the first, the nav and the icons together on the second -- inside an element with a fixed 82px height, which they then overflowed. The nav and the icons were sitting on the hero photograph below the black bar, and no amount of align-items on a two-row grid was going to centre them in it. Naming the row for every item is what makes the placement explicit rather than a consequence of source order. grid-auto-flow: column would also fix it, but it fixes it by describing the flow instead of the destination, and the destination is the thing being decided. */ .header-inner .main-nav { grid-row: 1; grid-column: 1; justify-self: start; } .header-inner .logo { grid-row: 1; grid-column: 2; justify-self: center; } .header-inner .header-actions { grid-row: 1; grid-column: 3; justify-self: end; } .logo { display: inline-flex; align-items: center; gap: 10px; line-height: 0; } /* ---- The circular badge ------------------------------------------------- The mark carries its own wordmark around the rim, so the header's holds one image and nothing else -- and .logo's 10px gap has nothing left to sit between, which costs nothing and is left alone. No sizing here on purpose. The badge kept the .logo-skull class precisely so the eleven heights written against it -- 82px bar, 66px bar, the scroll-shrink from 58 to 38 -- all keep working untouched, and a height of its own on this class would fight them at equal specificity depending only on which rule came later in the file. The one thing worth knowing is that it is SMALLER than the mark it replaced at the same height: the skull file is 987x720, so at 58px tall it was 79px wide, where a circle at 58px tall is 58px wide. The file is transparent outside the circle, so nothing here rounds it -- what makes it a disc on the dark bar is the artwork, not a border-radius. The reveal opt-out it needs is already written, at .logo .logo-skull. */ .logo-skull { display: block; height: 40px; width: auto; } .logo-wordmark { display: block; height: 24px; width: auto; } @media (min-width: 860.02px) { .logo-skull { height: 58px; } .logo-wordmark { height: 34px; } } /* Text stand-in for the wordmark image, used while previewing a rebrand (RINGTAIL GEAR) — mirrors the .logo-wordmark image's sizing/breakpoints above so it drops in without other layout changes. Single-line version (quick view's mini brand label only). */ .logo-wordmark-text { font-family: var(--font-display); color: var(--on-dark); line-height: 1; letter-spacing: 0.02em; font-size: 19px; white-space: nowrap; transform: translateY(-3px); } @media (min-width: 860.02px) { .logo-wordmark-text { font-size: 27px; } } .qv-mini-logo.logo-wordmark-text { height: auto; font-size: 14px; } /* The wordmark — header and footer only: RINGTAIL GEAR on one line, both words the same size, sitting beside the skull. Fades/scales in on scroll into view, same as the skull image next to it. This used to be two stacked lines: RINGTAIL over a smaller GEAR, flanked by rules that split the leftover width so the "— GEAR —" row came out the width of RINGTAIL above it. The markup still has that shape -- a primary span, then a row holding rule/GEAR/rule -- because it is duplicated across eleven pages' headers and the footer, and restyling it costs one block here instead of twenty-two edits. So the row is flattened rather than removed and the rules are hidden; see below. The size lives on this element, and both words inherit it. That is what keeps them equal: one value per context (17px, 24px on desktop, 27px in the footer) rather than a pair that has to be kept in step. */ .logo-wordmark-stack { display: flex; height: auto; flex-direction: row; align-items: center; /* A space between the words, in em so it tracks the size. */ gap: 0.3em; font-size: 17px; /* The hero headline's tracking, not the nav's. Same typeface as HANDCRAFTED GEAR all along -- both are Koulen -- but at 0.2em the letters stood so far apart that the mark read as a different face entirely. At the headline's own 0.0375em the two are plainly the same lettering, which is what a wordmark and the page's biggest words ought to be. Declared as a variable because the rule under GEAR has to cancel exactly this much trailing space -- see .logo-wordmark-secondary. */ --logo-track: 0.0375em; letter-spacing: var(--logo-track); /* --font-display, the same Koulen the nav carries. Both words inherit it, the same way they inherit the size and the tracking -- that shared inheritance is what keeps RINGTAIL and GEAR identical. */ font-family: var(--font-display); font-weight: 400; color: var(--on-dark); opacity: 0; transform: translateY(-1px) scale(1.12); transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.6s ease; } .logo-wordmark-stack.is-visible { opacity: 1; transform: translateY(-1px) scale(1); } .logo-wordmark-primary { /* Family, weight, size and tracking all come from the stack -- see there. Nothing about RINGTAIL differs from GEAR any more, so nothing is set twice. */ line-height: 1; white-space: nowrap; } /* display: contents, so GEAR becomes a direct flex child of the stack above and sits in the row beside RINGTAIL. The wrapper stays in the markup and simply stops generating a box of its own -- which is what lets the eleven copies of this header keep the two-line structure they were written with. */ .logo-wordmark-secondary-row { display: contents; } /* The two flanking rules belonged to the stacked layout, where they filled the width RINGTAIL left over. On one line there is nothing for them to fill. */ .logo-wordmark-rule { display: none; } .logo-wordmark-secondary { /* As above: GEAR is the same wordmark as RINGTAIL now rather than a subtitle under it, so it takes everything from the stack. */ line-height: 1; white-space: nowrap; /* Letter-spacing is applied AFTER every letter, the last one included, so the text box runs one space past the R and the rule under it would too. This takes that trailing space back off, and the line ends where the word does. Read from the same variable the tracking is set with, so the two cannot drift. Safe to pull the box in from the right because the logo is left-aligned in the header and centred as a unit in the footer. */ margin-right: calc(var(--logo-track) * -1); } @media (min-width: 860.02px) { .logo-wordmark-stack { font-size: 24px; } } .footer-brand .logo-wordmark-stack { font-size: 27px; } /* ---- Nothing renders .logo-wordmark-stack any more ---------------------- RINGTAIL and GEAR were set as type in two places -- the header and the footer -- and both now carry the badge, which has the words in the artwork. So this rule and the .logo-wordmark-* block above it match nothing in any of the eleven pages. Kept rather than deleted, and this note is the price of keeping it: the block is the whole of how the wordmark was drawn -- the shared size that holds the two words equal, the tracking, the trailing-space correction under GEAR -- and it is a great deal easier to put the spans back into a header than to derive all of that again. Delete it the day the badge stops being the mark. Not to be confused with .logo-wordmark-TEXT, a few rules up, which is a different thing and is still live: the quick view's mini logo and the product page's buy bar both set RINGTAIL GEAR with it. */ /* Stacked in the footer, where the header has them side by side: there is height to spend down here and the brand block is the footer's own heading, so it reads better as a mark over a name. align-items centres the wordmark under the skull rather than lining their left edges up, which matters because the skull is much the narrower of the two. */ /* The column and the gap were what stacked the skull over the wordmark. The holds one image now, so neither has anything to act on -- kept because they are the right rules for whatever goes in this slot, and removing them would only mean writing them again if a second element ever joins it. */ .footer-brand .logo { flex-direction: column; align-items: center; gap: 8px; } /* 152px, where the header's is 80 -- nearly double, and not an oversight. Up there the mark shares a fixed-depth bar with the nav and the icons and is bounded by it. Down here it is the footer's own heading with a column to itself and no ceiling over it, so the only thing setting the size is what the block should weigh on the page, and it is the last thing anyone sees before they leave. Scoped to .footer-brand, and it has to be: the generic .logo-skull heights up the file are what the header rides on, and the two contexts want very different numbers from the same class. */ .footer-brand .logo-badge { height: 152px; } /* ---- Narrow phones: the header closes ranks in three steps --------------- RINGTAIL and GEAR sit on one line beside the skull, and both are nowrap, so the wordmark cannot shrink -- past some width it spills out of its own box and the search button ends up printed over GEAR. Three things happen on the way down, cheapest first, and the last one is the one that changes how the mark reads. 1. The buttons close up. 18px between them is a desktop rhythm; 12 is plenty on a phone and it is 12px the logo does not have to give up. 2. The mark comes down a size. The skull is the wide part -- about twice as wide as it is tall -- so a few pixels off its height is what actually gives the row room, and the wordmark follows so the two stay in proportion. 3. Only then does the wordmark fold, RINGTAIL over GEAR -- how this markup was written in the first place, and how the footer still sets it. Where the fold lands is measured, not guessed: with the tracking the mark now carries the whole logo is 158px wide, so one line and the three buttons fit side by side with room to spare down to about 346px, and to 330 once the first two steps have been taken. Anything above that and the buttons simply slide right up to the wordmark, which is where they belong. Scoped to .header-inner, so the footer's own stacked mark is untouched. */ @media (max-width: 400px) { /* .header-inner scoping, not for the cascade's sake but for the file's: this block sits above .header-actions' own rule, and a bare selector here would lose to it on source order. */ .header-inner .header-actions { gap: 12px; } } @media (max-width: 340px) { .header-inner .logo-skull { height: 50px; } .header-inner .logo-wordmark-stack { font-size: 15px; } .header-inner .header-actions { gap: 10px; } } @media (max-width: 330px) { .header-inner .logo-wordmark-stack { flex-direction: column; align-items: flex-start; /* Tighter than the word space this had on one line: stacked, that gap is leading between two lines rather than a space between two words. */ gap: 0.08em; } /* The negative margin took the trailing letter-space off the end of the line. Stacked, GEAR is its own line and there is nothing to its right to pull it towards. */ .header-inner .logo-wordmark-secondary { margin-right: 0; } } /* Desktop only -- see the collapse block below for where the mobile sheet takes over. Wider gaps than before, with room to spare now that the centre column holds four items instead of five. */ /* align-items: center, which the row did not have. .header-inner centres the nav as a BLOCK, but inside it the default is stretch: .nav-dropdown is the tallest item -- its trigger carries a 12px chevron beside the label -- so the three plain links were stretched to its height and their text sat at the top of a box taller than itself. HOME, ABOUT and CONTACT were riding a couple of pixels above STORE because of it. */ .main-nav { display: flex; align-items: center; gap: 52px; } /* The Store trigger is a , not an : it opens the menu below it and goes nowhere itself, so it is not a link and does not claim to be one. It still has to LOOK like its neighbours -- the type ramp here, and the hover underline further down -- which is why it is named alongside them rather than left to pick up whatever a bare span gets. */ .main-nav a, .main-nav .nav-dropdown-trigger { position: relative; /* The .btn type ramp, the same one the buttons, the two red text links and Sort By carry. Family, weight and uppercasing already matched; the size came down from 1.125rem and the tracking went up from 0.0375em, which is most of the change. The 52px gap above still holds -- the labels come out close to the width they were, narrower type at wider tracking. */ font-family: var(--font-display); font-size: 0.9375rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.2em; /* Muted at rest, full white on hover and on the current page -- the same two-tone treatment the rest of the site's links use. --on-dark-muted is the counterpart to the --on-dark below, so the pair moves together. */ color: var(--on-dark-muted); padding: 8px 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 8px rgba(0, 0, 0, 0.3); transition: color 0.2s ease; } /* The line that drops in under a nav label on hover, and stays under the current page's. White, after a run of accent colours in this slot -- #5c8073, #b35754, #805149. Each of those was picked to make the mark that says WHERE YOU ARE a colour rather than more of the same white the label is already made of, and each one measured fine on its own: a 1px rule needs 3:1, not text's 4.5:1, and on --chrome-ground all three cleared 4:1 comfortably. What white gives up is exactly that distinction: the line is now the same value as the label above it, so the underline reads as part of the word rather than as a separate mark. What it gains is 18.4:1 on near-black chrome -- the most a 1px line can have -- and one fewer colour on a page whose accents are down to the buttons. The footer's column links carry the identical line on .footer-col a::after and have followed this slot through every one of those changes. The two move together; they are one decision written in two places because the selectors have nothing in common. */ .main-nav a::after, .main-nav .nav-dropdown-trigger::after { content: ''; position: absolute; left: 0; bottom: 6px; height: 1px; width: 100%; background: #ffffff; opacity: 0; transform: translateY(-10px); transition: transform 0.3s ease, opacity 0.3s ease; } /* White for the page you are on (.active, set in the markup on every page that has a nav entry), for the link under the cursor, and for the Store trigger while its own dropdown is open -- without that last one the label would drop back to gray the moment the pointer left it for the menu hanging off it, which is the one place the two are not the same thing. */ .main-nav a:hover, .main-nav a.active, .main-nav a[aria-expanded="true"], .main-nav .nav-dropdown-trigger.active, .main-nav .nav-dropdown:hover .nav-dropdown-trigger { color: var(--on-dark); } /* The Store trigger takes the underline too, even though it is not a link and goes nowhere. It is one nav row and the labels in it should answer the pointer the same way; the trigger being a is a semantic fact, not something the hover state needs to advertise. Keyed to the DROPDOWN's hover rather than the label's own, which is what the colour rule above does and for the same reason: crossing the gap from the label down into the open menu would otherwise drop the underline the moment the pointer left the text, and the label should stay lit for as long as the menu it opened is showing. .active is separate from all of that -- a you-are-here mark rather than a response to the pointer. Store carries it on the store and product pages. */ .main-nav a:hover::after, .main-nav a.active::after, .main-nav .nav-dropdown-trigger.active::after, .main-nav .nav-dropdown:hover .nav-dropdown-trigger::after { opacity: 1; transform: translateY(0); } /* ---- Store dropdown (hover-based) ---- */ .main-nav .nav-dropdown { position: relative; } /* Default cursor, not the pointer an would have given it and not the I-beam a bare span gets: nothing here is clickable or selectable-looking, the label just sits there and the menu comes down under it. tabindex on the span (see the markup) so it still takes focus. That is not decoration -- the menu is visibility: hidden until :focus-within, and a hidden element cannot be focused, so without something focusable at the top of the dropdown a keyboard tab would skip the Store categories entirely. Focusing the label opens the menu and the links inside become reachable. */ .main-nav .nav-dropdown-trigger { display: flex; align-items: center; gap: 6px; cursor: default; } .main-nav .nav-dropdown-trigger svg { width: 12px; height: 12px; transition: transform 0.2s ease; } .main-nav .nav-dropdown:hover .nav-dropdown-trigger svg, .main-nav .nav-dropdown:focus-within .nav-dropdown-trigger svg { transform: rotate(180deg); } /* invisible bridge so the pointer doesn't lose hover crossing the gap to the menu */ .main-nav .nav-dropdown::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } .nav-dropdown-menu { position: absolute; top: 100%; left: 0; /* The header's own colour, not the page's. This hangs off the bar and reads as part of it, so it follows --chrome-ground wherever that goes rather than staying on --forest and showing a seam at the join. */ background: var(--chrome-ground); border-radius: 0 0 var(--radius) var(--radius); padding: 8px; min-width: 190px; box-shadow: var(--shadow); z-index: 150; transform-origin: top; transform: scaleY(0); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, visibility 0.28s; } .main-nav .nav-dropdown:hover .nav-dropdown-menu, .main-nav .nav-dropdown:focus-within .nav-dropdown-menu { transform: scaleY(1); opacity: 1; visibility: visible; pointer-events: auto; } .nav-dropdown-menu a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-family: var(--font-body); text-transform: none; letter-spacing: normal; font-size: 0.88rem; color: var(--on-dark-muted); text-shadow: none; border-bottom: none; transition: color 0.2s ease; } .nav-dropdown-menu a:hover { background: transparent; color: var(--offwhite); } .header-actions { display: flex; align-items: center; gap: 18px; } .icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--on-dark); border: 1.3px solid var(--on-dark-border-strong); border-radius: var(--radius-sm); background: transparent; transition: border-color 0.2s ease; } /* Pointer devices only. A tap on a touch screen leaves :hover stuck on the thing you tapped until you touch something else, so on a phone these lit up white and stayed that way -- a button reporting a pointer that is not there. Nothing is lost: there is no hover on a phone to show. */ @media (hover: hover) and (pointer: fine) { .icon-btn:hover { border-color: var(--on-dark); } } .icon-btn svg { width: 18px; height: 18px; } .cart-count { position: absolute; top: -7px; right: -7px; background: var(--title-red); color: var(--offwhite); font-size: 0.65rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; /* Hidden until updateCartCount() has run and found something in the cart. The badge ships in the markup reading "0", so painting it by default meant a red 0 flashed over the cart icon on every load before the script hid it. updateCartCount sets display:flex inline when the count is above zero. */ display: none; align-items: center; justify-content: center; padding: 0 4px; } .nav-toggle { display: none; width: 40px; height: 40px; border: 1.3px solid var(--on-dark-border-strong); border-radius: var(--radius-sm); background: transparent; align-items: center; justify-content: center; color: var(--on-dark); transition: border-color 0.2s ease; } /* White on hover, and on hover only -- the same edge the search and cart buttons beside it take, and pointer-gated for the same reason they are. Being open does not hold it lit either: press it, move away, and it goes back to gray with the X still showing. The icon is what says the menu is open; the border only ever says where the pointer is. */ @media (hover: hover) and (pointer: fine) { .nav-toggle:hover { border-color: var(--on-dark); } } .nav-toggle svg { width: 20px; height: 20px; flex-shrink: 0; } /* ---- The three bars fold into an X ------------------------------------- Driven off aria-expanded, which the toggle already carried for screen readers -- so the state has one home and the icon cannot disagree with it. transform-box: view-box puts each bar's origin in the icon's own 24-unit grid, which is why the origins below can be written as the coordinates the `d` attributes already use. fill-box would be the tidier-looking choice and is the wrong one here: a horizontal line has a zero-height bounding box, and browsers have not always agreed on where the centre of nothing is. Each outer bar turns about its own centre and then travels to the middle: 7 + 5 and 17 - 5 both land on 12. The middle bar just goes. */ .nav-toggle-bar { transform-box: view-box; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.16s ease; } .nav-toggle-bar-top { transform-origin: 12px 7px; } .nav-toggle-bar-mid { transform-origin: 12px 12px; } .nav-toggle-bar-bot { transform-origin: 12px 17px; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar-top { transform: translateY(5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar-mid { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar-bot { transform: translateY(-5px) rotate(-45deg); } /* ---- Where the menu collapses ------------------------------------------ The header is a 1fr auto 1fr grid: logo left, nav centred, actions right. The nav is centred on the HEADER, not in the space left over, so the two side columns each get (width - nav) / 2 whatever they actually need -- and the logo is the wider of the two. Give it less than it needs and it does not wrap or shrink; it runs under the nav. With the wordmark on one line at 0.2em tracking the logo is about 260px wide and the nav about 350px, so the collision arrives a little under 900px -- above the 860px the rest of the file switches at, which is why the two overlapped before this. 1024px is comfortably clear of it, and it is a breakpoint the file already uses elsewhere. What the sheet ITSELF looks like at this width is decided elsewhere: the panel styles are unconditional, and the narrow-desktop block further down (also 1024px now) is what turns them into an anchored dropdown on a pointer device rather than a full-width sheet off the bottom of the screen. The 860px block still does the rest of the phone-width bar -- the shorter header, the smaller logo, the promo bar wrapping to two lines -- which is correct, since none of that is about whether the menu is a row or a panel. */ @media (max-width: 1024px) { .main-nav { display: none; } .nav-toggle { display: inline-flex; order: 3; } /* The centre column has nothing in it once the nav is gone, and an empty 1fr between the logo and the actions pushes them to opposite edges of a bar that no longer needs to be that wide. Two columns, spaced apart. */ .header-inner { grid-template-columns: auto auto; justify-content: space-between; } /* ---- The logo goes back to the left here ------------------------------ Above 1024 it is centred, in column 2 of a 1fr / auto / 1fr bar with the nav on one side of it and the icons on the other -- the two flanking columns are what hold it in the middle of the WINDOW rather than in the middle of what is left over. Neither of those is true here. The nav is display: none and is not placed at all, so nothing balances the icons, and a centred mark with a cluster of controls on one side of it and empty gutter on the other is not centred, it is adrift. Left, with the icons opposite, is the arrangement the collapsed bar wants -- and it is what this block's own two-column template was already describing. These have to be said, not left to the template. The base rules pin the logo to grid-column 2 and the actions to 3, and those columns do not exist in a two-track grid: the actions were landing in an IMPLICIT third column, and space-between was then spreading three tracks -- an empty one at the left, the logo, the icons -- which is what put the mark in the middle of a bar that has no middle column. Naming the two real columns is the fix. */ .header-inner .logo { grid-column: 1; justify-self: start; } .header-inner .header-actions { grid-column: 2; justify-self: end; } .header-actions [data-open-search] { order: 1; } .header-actions [data-open-cart] { order: 2; } /* Log in moves into the dropdown at this width -- it is a row in there -- so keeping the icon as well would show it twice. */ .header-actions [data-open-account] { display: none; } } /* ---- Hero ---- */ .hero { position: relative; isolation: isolate; /* The band under the photo. .hero-photo and .hero-overlay both stop this far short of the hero's bottom edge and have to stop at the SAME place, so it is one number rather than two that must be kept in step. A fallback: both width blocks down the file set this to 58px, and between them they cover every width, so nothing reads the value here. Kept in step with them anyway -- a fallback that disagrees with the rule it backs up is worse than none. */ --hero-band: 58px; /* What shows in that band: the Featured Collection's own ground, so the section reads as running up under the photo instead of the photo ending on a bar of its own. The overlay's hairline above it is what marks where the photo stops. */ background: var(--featured-ground); /* The bar sits above it in flow, so a full 100vh here would push the hero that much past the fold. */ min-height: calc(100vh - var(--promo-h)); display: flex; /* Bottom left. Where the copy sits is decided in two places and this is the up-and-down one; left is .hero-content's own doing, below. It has now been every one of them -- bottom, centred, top, bottom again -- and each move is one word here. That is the whole point of keeping the vertical on the section and the horizontal on the element inside it: neither ever has to know what the other is doing. flex-end puts the block against the bottom of the CONTENT box, which ends where the band under the photograph begins -- .hero carries a padding-bottom of --hero-band in both width blocks -- so the copy is never in danger of sitting over the social row. What holds it off that edge is .hero-content's own 60px of padding. */ align-items: flex-end; overflow: hidden; color: var(--on-dark); } /* Real element (not a pseudo-element on .hero) with its own overflow:hidden, so the scale(1.12)->scale(1) reveal animation is clipped right at this box's edges -- including the bottom one -- instead of bleeding past the band and painting over the black bar/border while it's mid-shrink. */ .hero-photo { position: absolute; top: 0; left: 0; right: 0; bottom: var(--hero-band); /* stop short of the hero's bottom edge so the border below reads as a real border, not a line drawn on top of the photo */ z-index: -2; overflow: hidden; /* What the photo fades up out of. This element had no fill for a while, so at opacity 0 the colour showing through was .hero's own background -- --featured-ground, which is white on this page. Asked for #141414 instead, so the ground is painted here rather than inherited. It covers exactly the photo's area and stops where the photo stops, at --hero-band, so the strip below is untouched and still shows the section ground running up under the picture. */ background: #141414; } /* ---- The slide track ---------------------------------------------------- Two pictures side by side in a box one picture wide, moved as a unit. The flex row overflows .hero-photo, which clips it, so exactly one slide shows and translate3d(-100%) brings the next one in from the right. The percentage is of the TRACK's own box -- 100% of .hero-photo, not of the two slides together -- so one step is one slide however many there are. Why a track and not a crossfade: two shots of the same product on the same black ground crossfade into a smear, since most of both frames is the same dark weave and only the object moves. Sliding says which way you went, and it is the gesture the dots and arrows are promising. 0.85s on the site's own settle curve -- the same cubic-bezier the photo entrance and the page headers take, decelerating hard at the end so the picture arrives rather than stops. */ .hero-slides { position: absolute; inset: 0; display: flex; transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .hero-slide { position: relative; /* No shrinking: each slide is exactly the width of the frame, and the row is allowed to overflow. flex-basis 100% with flex-shrink 0 is what makes that true at any number of slides. */ flex: 0 0 100%; height: 100%; } /* The picture itself: the layer inside each slide that actually holds a photograph. What it is NOT is the entrance -- that is on the first slide alone, in the rule below this one, and everything here is true of every slide whether it animates or not. `center / cover` and no vertical offset, which is worth being straight about: both files are square in a landscape frame, so cover scales them to the WIDTH and crops top and bottom evenly, and the pack -- centred in its file -- comes out centred in the frame too. It is also large: at a 1440x770 hero the pack alone is about two thirds of the height, so the copy in the bottom left sits ON it rather than beside it. That is a choice, and the corner scrim on .hero-overlay is what pays for it. The alternative was pushing the crop up with a position-y around 70%, which buys about 25px of clearance and costs the top of the drawstrings -- a worse trade than darkening one corner of a photograph that is already almost entirely black. The old landscape shot needed `center 30%` for the opposite reason: it was WIDER than the frame in proportion, so the offset was choosing which horizontal band survived. */ .hero-slide-img { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; } .hero-slide-pack .hero-slide-img { background-image: url('../assets/images/hero-hip-pack.jpg'); } .hero-slide-sling .hero-slide-img { background-image: url('../assets/images/hero-sling-pack.jpg'); } /* The entrance belongs to the FIRST slide and to nothing else. It was on every slide for a while, all of them settling together on .hero.is-visible. The reasoning was that only one is on screen when the class lands, so the rest cost nothing -- which is true right up until you press an arrow inside the first three seconds, and then the picture you asked for arrives already mid-shrink, fading up out of black under your finger. The entrance is the page opening; a slide you swiped to is not the page opening, and should simply be there. :first-child rather than .hero-slide-pack, so it is the SLOT that opens and not that particular photograph -- reorder the slides in the markup and the right one still animates. Everything after it is left at its natural state: opaque, unscaled, and with no transition on transform, so the only thing that ever moves a later slide is the track sliding it into view. */ .hero-slide:first-child .hero-slide-img { opacity: 0; transform: scale(1.28); transition: transform 2.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 2.2s ease; } .hero.is-visible .hero-slide:first-child .hero-slide-img { opacity: 1; transform: scale(1); } @media (prefers-reduced-motion: reduce) { /* Scoped to match the rule above it, or it would lose on specificity and the first slide would keep its 2.7s settle. */ .hero-slide:first-child .hero-slide-img { transition: none; opacity: 1; transform: none; } /* The move still happens -- it is what the control was pressed for -- but it happens at once rather than sliding. */ .hero-slides { transition: none; } } /* The social row that sits in the band under the photo. Off by default and switched on in the desktop block: the phone's band has always been an empty strip and nothing about it is being changed. */ .hero-social-bar { display: none; } .hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: var(--hero-band); z-index: -1; /* The flat 35% scrim that used to sit under this is gone: it was dimming the whole photo, which is the one thing a screen carried outdoors cannot spare. What is left is the soft darkening along the top and bottom edges, so the photo sinks into the page at those edges instead of ending on a hard line -- into the header above it, and into the band and hairline below. This element already shares .hero-photo's bottom inset, so the shading covers the photo exactly and stops where the photo does. The 8% / 92% stops are read along the gradient line, which is the hero's HEIGHT here rather than its width: at a full-viewport hero that is a fade of roughly 60-70px at each end. Nothing between those two stops is touched -- the middle of the photo, which is all of it you actually look at, is now completely clear. What carries the type instead is the text's own shadow, which was always there under the scrim: it darkens the pixels immediately behind each letter rather than the photograph. */ /* Two layers, and they do different jobs. The first is the ground under the copy, and it stopped being a corner when the copy did. It was an ellipse anchored in whichever corner the block sat in -- four of them, over four passes. The block is not in a corner any more: the type is on the right gutter and the button on the left, so it spans the foot of the picture, and an ellipse in either corner would leave half of it on undimmed photograph. A band across the bottom instead: 62% black on the edge, gone by a little under half way up. It covers what the copy occupies for the same reason the ellipse did, and covers no more of the picture than it has to -- the top half of the frame, where the pack is, is untouched by it. So the headline, the lead and the button have a darkened ground under them and the rest of the picture does not. It is the argument the Get In Touch plate makes and the vertical scrim there lost: cover what the copy occupies, not the whole photograph. What is different here is that the copy sits on a product shot rather than a landscape, and the product is centred and large -- so the type lands on the pack itself, and something has to hold the two apart. The text-shadow on the h1 and the lead is still doing its own half of that; this is under it, not instead of it. The second is the pair of edge fades that were here before: the photo sinks into the header above it and into the band below rather than ending on a hard line. The middle of the frame is untouched by both. */ background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.34) 22%, rgba(0, 0, 0, 0) 48%), linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0, rgba(0, 0, 0, 0) 8%, rgba(0, 0, 0, 0) 92%, rgba(0, 0, 0, 0.18) 100%); border-bottom: 1.3px solid var(--on-dark-border); } /* ---- The copy row ------------------------------------------------------- .hero-content keeps .container's measure and gutter now instead of overriding them with a 780px centred column. That cap was what centred the copy; with the copy in the bottom left, the container IS the alignment -- the headline starts on the same gutter every other section on the page starts on, and the controls end on the one they end on. A row, so the two halves can sit at opposite ends of it: the copy at the left, the arrows and dots at the right, both on the same baseline. It becomes a column under 640 -- see the block further down. The bottom padding is what keeps the block off the floor. --hero-band is the strip below the photo (the social bar's, on desktop), so the copy has to clear that as well as have air of its own; 56px is that air, measured to the button's box rather than to the text. */ /* The copy, and only the copy. This was a two-part row -- copy at one end, the carousel controls at the other, both on the same baseline -- for as long as the two shared a line. The controls are pinned to the bottom of the picture now and are a sibling of this element rather than a child, so what is left here has one thing in it and does not need to be a flex row to hold it. The block keeps position: relative, which is what puts it and its copy above .hero-overlay. */ .hero-content { position: relative; /* The top value is the one doing work now that the block is anchored to the top: 60px is the distance from the underside of the header to the cap line of the headline. The bottom is inert -- nothing sits below the copy in this element any more -- and is kept equal rather than zeroed so the box still has a shape if anything is ever added under it. The sides are .container's own gutter, restated because this is a shorthand and would otherwise zero what the container set. That matters in a way it did not before: the copy used to be a centred 780px column, where the headline's left edge now IS the gutter. */ padding: 60px var(--page-gutter); /* The type is ranged left and the button is ranged right -- the block is split across the foot of the picture rather than stacked in one corner. That the alignment mechanisms are separate is what makes this possible at all. text-align here carries the headline and the lead to the left gutter; .hero-actions is a flex row and does not answer to text-align, so its own justify-content holds the button on the right independently of it. Two opposite alignments out of one block, with nothing overriding anything. */ text-align: left; } /* The two copy blocks, stacked in one grid cell. Both are in normal flow, so the cell -- and with it the hero -- is as tall as the taller of them and nothing shifts when they swap. Absolute positioning would have taken the second one out of flow and let the hero resize under the crossfade. */ .hero-copies { display: grid; /* No cap and no margins: this box is the full container now, because the two things inside it are pinned to OPPOSITE gutters and a box narrower than the page cannot reach both. The measure that used to live here -- 640px, opened to 720 on desktop -- has moved onto the lead, which is the only part of the copy that ever needed one. A headline is one line and a button is as wide as its label; it was always the paragraph the cap was for. */ max-width: none; margin: 0; } .hero-copy { grid-area: 1 / 1; /* The one that is not showing is still in the grid -- it has to be, or it would stop holding the cell open -- so it is hidden by opacity and taken out of the pointer and tab order rather than by display. */ opacity: 0; /* A crossfade, and only that. There was a 14px lift under it on the site's settle curve -- the one that decelerates hard at the end -- which on a line of type reads as the words dropping into place rather than as the photograph handing over. Taken out at the asking: the picture is what moves, the words simply change. */ pointer-events: none; transition: opacity 0.45s ease; /* ---- Two columns, so the type reaches the bottom edge ----------------- The three pieces used to stack: headline, lead, button, in that order and in that direction. That put the BUTTON on the bottom edge and left the type sitting above it, which is the wrong way round now that the two are ranged to opposite gutters -- the copy was asked for on the bottom right, and it could not get there with a button underneath it. So they share the line instead. The type stacks in a column on the left and the button takes a column of its own on the right, and align-items: end sets both of them on the same floor. The whole block still sits at the foot of the picture, which .hero's flex-end does; this decides what the bottom of the block IS. Which column is which is two lines -- the template below and the grid-column on each item -- and the type's own ranging is two more, on .hero-content and on the lead. Four again, and separate again, which is what has made every one of these passes a handful of values rather than a rebuild. Placed explicitly, every item, because auto-placement in a two-column grid would put the headline and the lead side by side and drop the button underneath them -- the reverse of all three intentions at once. The header taught this lesson once already. The button spans both rows rather than being pinned to the second: the type is one line or three depending on the slide and the window, and align-self: end on a full-height cell means the button finds the floor wherever the type leaves it. */ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 40px; } .hero-copy h1 { grid-column: 1; grid-row: 1; } .hero-copy p.lead { grid-column: 1; grid-row: 2; } .hero-copy .hero-actions { grid-column: 2; grid-row: 1 / 3; align-self: end; justify-self: end; /* .hero-actions carries margin-top: 21px from the hero's own stacked layout, where it was the gap under the paragraph. There is no paragraph above it any more -- it is beside one -- and a top margin on a bottom- aligned item only shortens the box it is aligning inside. */ margin-top: 0; } /* ---- Under 640px the two columns give up ------------------------------- A button column and a type column need a page wide enough for both, and the type is the half that suffers: at 500px the lead is down to about 250px of measure beside a 190px button and breaks after two or three words. Back to the stack there, in source order -- headline, lead, button -- which is the arrangement the markup already reads as, so this is the grid standing down rather than a second layout. The type is no longer on the bottom edge at that width. That is the trade, and it is the right way round: a phone has one column of room and the copy is what should have it. */ .hero-copy.is-active { opacity: 1; pointer-events: auto; } /* The copy crossfades where the picture slides, and that is on purpose rather than an oversight: sliding both is a slideshow, and this is a photograph that changes with a line of type over it. The 0.45s fade sits inside the picture's 0.85s move, so the words have settled before it lands. */ @media (prefers-reduced-motion: reduce) { .hero-copy { transition: opacity 0.2s ease; } } .hero-content h1 { /* Vidaloka is a wider serif than the site's old condensed sans — the global h1 clamp (up to 4.2rem) is wide enough at large viewports that "Handcrafted Gear" wraps inside the 780px hero-content box. Cap it lower here so it reliably stays on one line. */ font-size: clamp(2.45rem, 4.6vw, 3.6rem); /* White, rather than the --title light gray every other heading takes or the warm --offwhite the body carries. This is the one piece of type on the site sitting straight on a photograph in daylight, and the extra few percent is the difference between reading it and squinting at it. */ color: #fff; /* Was nowrap, which the desktop block's fixed 3.6rem was leaning on: HANDCRAFTED GEAR sets to about 500px in this face and the box was always wider, so the line could be pinned whole. There are two headlines now and the longer one -- USA SOURCED & SEWN, about 555px -- shares the box with a 186px control cluster beside it. It still fits inside the 720px cap at every desktop width, so nothing actually wraps; what changes is the failure. nowrap fails by running the headline off the side of the photograph, and wrapping fails by taking a second line, which is the failure this design can absorb -- the copy is bottom-anchored, so a second line grows upward into the picture rather than pushing anything down. The block under 860 was already setting normal for the same reason. */ white-space: normal; text-shadow: 0 3px 14px rgba(0, 0, 0, 0.65); /* The default 0.5em heading margin reads as a much bigger gap here than it looks on body text, since this heading's line-height packs in a lot more empty space above/below the glyphs than the lead paragraph below it — cut it down so the visual gap matches the lead-to-button gap. */ margin-bottom: 0.12em; } .hero-content h1 .hero-title-sub { display: block; font-size: 0.5em; margin-top: 0.15em; white-space: normal; } .hero-content p.lead { font-size: 1.3rem; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); max-width: 540px; /* ---- Sitting the type on the button's floor -------------------------- Two things had to come off the bottom of this paragraph, and the second is the one that is easy to miss. The first was p's `margin: 0 0 1em`, the gap between the lead and the button while the button was underneath it. Beside it, that margin stopped being a gap between two things and became a strip of empty space holding the last line up off the floor. Zeroing it was not enough, because align-items: end aligns BOXES and a line of type does not fill its box. line-height is 1.8, inherited from body, so the line box is 0.8em taller than the text in it and half of that -- 0.4em, about 11px at this size -- sits under the last baseline as leading. Under that again is the font's own descent, 0.2em in Barlow Condensed. So with both boxes flush the LETTERS were sitting some 16px above the button's edge, which is the gap you can see. -0.4em takes back exactly the leading and no more. What is left below the baseline is the descent, which is ink: the tail of the y in Quality lands on the button's bottom edge, which is what "the bottom of the text" means when you look at it rather than measure it. Written as a calc from the line-height rather than as -0.4em, so the two cannot drift apart -- and the line-height is restated just above it for the same reason. It is the value this already inherits, so declaring it changes nothing and gives the calc a source you can check. */ line-height: 1.8; margin-bottom: calc((1 - 1.8) * 0.5em); /* The lead is the only capped thing left in the hero copy, and the cap is what stops it setting a 1372px line now that the block around it is the full container. auto on the RIGHT puts all of its slack on that side, so the line starts on the left gutter under the headline. */ margin-left: 0; margin-right: auto; } .hero-actions { display: flex; justify-content: center; gap: 12px; margin-top: 21px; flex-wrap: wrap; } /* Scoped to .hero: the shared rule above centres the row, which is right on the About page and in Get In Touch, and wrong beside a headline ranged to the other gutter. Both axes, because .hero-actions turns into a COLUMN under 640px and it is align-items rather than justify-content that places the button on the cross axis there -- set one and the button drifts back to the middle at whichever width you did not think about. Above 640 this is nearly inert: justify-self: end on the grid item already shrinks the row to its button. It is the stacked layout below that width that these two are really for, where the row is the full page measure and the button would otherwise sit at its left end, under type that starts there -- which is the one arrangement this pass was moving away from. */ .hero .hero-actions { justify-content: flex-end; align-items: flex-end; } /* ---- The hero copy on a phone: stacked, and centred --------------------- Two changes that are really one. Asked for: centre the hero text and the button at this width. Centring them means stacking them first, and that is not a liberty -- a two-column split with the type ranged to one gutter and the button to the other has no centre to put anything on. So the grid stands down here and the three pieces go back to a column in source order, which is what the markup reads as anyway. The breakpoint has moved twice: 640 -> 860.01 for the headline's sake -- above 640 the split gave the type `container minus the button minus the gap`, about 414px at a 700px window against the 520px the longer headline needs, and no font size fixes a column that narrow -- and now 860.01 -> 1024 to agree with the header. 1024 is where the nav collapses into the hamburger and the logo moves to the left gutter. That is the width at which the page starts LOOKING like a phone, and it is the width the word "mobile" has meant in every request about this header. The hero was the one thing on the page still switching at 860, which left a 164px band -- 861 to 1024 -- showing a collapsed header over a hero split across two gutters. One boundary for the whole page is worth more than the 164px of two-column hero it costs. Centring is four declarations for the reason it is always four on this element: text-align does the headline and the lead, the lead's own auto margins place its narrower box inside the block, and .hero-actions is a flex row that answers to neither -- both of its axes, since it becomes a column under 640 and it is align-items that places the button there. What does NOT change is the vertical: .hero keeps align-items: flex-end, so the block still sits on the foot of the picture. */ @media (max-width: 1024px) { .hero-copy { display: block; } .hero-content { text-align: center; } .hero-content p.lead { margin-left: auto; margin-right: auto; } .hero .hero-actions { justify-content: center; align-items: center; } /* The optical pull on the lead is for type sitting BESIDE a button -- see .hero-content p.lead, where -0.4em takes back the half-leading so the last line sits on the button's floor. Stacked, the button is under the paragraph again and that pull would eat a third of the 21px gap between them, so it goes back to zero and the gap is the button's own margin-top, as it was. */ .hero-copy p.lead { margin-bottom: 0; } .hero-copy .hero-actions { margin-top: 21px; } } /* The hero button's shadow used to be declared here, softer than the h1's text-shadow above -- same shape, lower alpha and a wider blur, so it grounded the button on the photo without reading as a drop shadow of its own. Every pill button carries that value now, from --btn-shadow, so this rule was saying twice what the base rule already says. */ /* Desktop: a bigger headline and lead than the shared hero sizing. The h1 is white-space: nowrap, so the box it sits in has to grow with it or the text would run past the edge rather than wrap -- hence the wider hero-content. The 5.6vw middle term keeps it in bounds at the narrow end of the range: the 4.6rem cap is only reached around a 1300px viewport, by which point there is room for the line. */ @media (min-width: 860.02px) { /* The cap that was on .hero-copies, now on the lead -- see that rule for why it moved. 660px is what the paragraph gets here; the headline and the button place themselves and want no measure at all. */ .hero-content h1 { font-size: clamp(3.2rem, 5.6vw, 4.6rem); } .hero-content p.lead { font-size: 1.55rem; max-width: 660px; } } /* ---- The carousel controls: < * * > ------------------------------------- One cluster, on the opposite end of the copy row: two arrows with the dots between them, sitting on the container's right gutter the way the headline sits on its left. Round, both of them. The square version argued that everything on this page that is not a header icon is square -- the hero's own Shop the Store, the two story buttons, Contact Us -- and that round controls would be the only curve in the frame. Asked for round anyway, and it is the better call: the thing those square buttons have in common is that they are things you press to GO somewhere, and these are not. A circle says the control belongs to the picture rather than to the page. These sit on the picture, above .hero-overlay, because they are inside .hero-content, which is position: relative and paints after both. */ /* ---- The cluster --------------------------------------------------------- A plain flex row, and nothing else. It was absolutely positioned across the foot of the photograph -- left/right 0, and a bottom offset that had to add --hero-band back because absolute positioning resolves against the padding box and would otherwise have dropped it inside the bar. All of that is gone: it sits IN the bar now, in the middle cell of the grid up the file, and a grid cell needs no offsets to be told where it is. */ .hero-carousel-nav { display: flex; align-items: center; gap: 4px; } .hero-arrow { display: inline-flex; align-items: center; justify-content: center; /* 40px in a 58px bar: 9px of air over and under. It has been 42 on the photograph, then 34 when the bar was 46px deep and 42 would have left two pixels either side -- a control jammed into a slot cut for it rather than sitting in one. The bar is deeper now and this follows it, since what the size is really set by is the depth of what holds it. */ width: 40px; height: 40px; padding: 0; /* No border, and no fill at rest either -- what is left of the control is the chevron. The ring was 1.3px of white at 32%, drawn when these sat on the photograph and needed an edge of their own to be a control rather than a mark on a picture. In the band they sit on flat #141414, which separates them on its own, and 32% white on that ground reads as a gray circle round a white arrow -- the ring became the loudest part of a control whose job is to be quiet. The fill went with it for the same reason it stopped mattering: rgba(20,20,20,0.28) over #141414 IS #141414, so it was painting nothing. So did the backdrop-filter, which was blurring a flat colour. border-radius stays. It is doing nothing visible at rest, and it is what shapes the hover -- see below, where the fill comes back as a disc rather than as a square behind a round arrow. */ border: none; border-radius: 50%; background: transparent; color: #ffffff; cursor: pointer; transition: background 0.25s ease, transform 0.25s ease; } .hero-arrow svg { width: 20px; height: 20px; } /* Pointer devices only, for the reason .icon-btn gives up the file: a tap on a touch screen leaves :hover stuck on the control you tapped. */ @media (hover: hover) and (pointer: fine) { /* The hover is now the whole of the control's chrome: a red disc appears under the chevron where before it only changed colour inside a ring that was already there. border-color has nothing left to move. */ .hero-arrow:hover { background: rgba(176, 43, 37, 0.92); } } .hero-arrow:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } .hero-arrow:active { transform: scale(0.94); } .hero-dots { display: flex; align-items: center; gap: 8px; /* The dots live between the arrows and need air on both sides of them, which is the only reason this has padding rather than the cluster's gap being bigger -- that gap would open the arrows away from the row's own ends too. */ padding: 0 8px; } /* A dot is a 9px circle. The hit area is the whole 22x28 button -- a 9px target is under half of what a finger needs -- and the mark inside it is the ::after, which is what actually changes state. Keeping those two separate is what lets the target be finger-sized without the dot being drawn that big. */ .hero-dot { position: relative; /* The target, which is deliberately much bigger than the mark: 9px of drawn dot is well under what a finger needs. It tracks the bar's depth along with everything else in there -- 30px in a 58px bar -- while staying the largest part of the control. */ width: 22px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; } .hero-dot::after { content: ''; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: rgba(255, 255, 255, 0.42); transition: background 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .hero-dot.is-active::after { background: #ffffff; /* The live one is bigger as well as brighter. Two states told twice reads at a glance on a photograph, where an alpha change on its own can be lost against a light passage of the picture. 1.45 on a 9px dot is 13px, which is the same jump the old diamond took before the dots went round. */ transform: scale(1.45); } @media (hover: hover) and (pointer: fine) { .hero-dot:hover::after { background: #ffffff; } } .hero-dot:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; } @media (prefers-reduced-motion: reduce) { .hero-arrow, .hero-dot::after { transition: none; } } /* The narrow-window block that used to live here is gone with the row it was for. While the controls sat beside the copy they had to drop below it under 750px, or the headline would have been squeezed into a column narrower than its own first word. Pinned to the bottom of the picture they are out of the copy's way at every width, and the phone gets the same arrangement the desktop does -- which is one fewer layout to keep true. */ .hero-stats { position: absolute; right: 18px; bottom: 30px; display: flex; gap: 40px; } .hero-stat { text-align: right; } .hero-stat strong { display: block; font-family: var(--font-body); font-weight: 400; font-size: 1.8rem; color: var(--tan-light); } .hero-stat span { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--on-dark-faint); } /* ---- Sections ---- */ .section { padding: 72px 0; } .section-alt { background: var(--bg-alt); border-top: 1.3px solid var(--border); border-bottom: 1.3px solid var(--border); } /* A rule across the top of a section that keeps the page's own background -- the separation .section-alt gets from its band, for a section that has no band. Same hairline that class uses, so a divided section and an alt one sit at the same weight. */ .section-ruled { border-top: 1.3px solid var(--border); } /* The two About story sections are section-alt, but on that page they are not meant to read as a band at all -- no rules above or below, and the same black as the page behind them, so the two run on unbroken and the only thing marking a section is the space around its content. --surface-2 is the page's own black, so the sections disappear into it exactly -- named for the page rather than borrowed from the frame, even though the frame now happens to sit at the same value. The cards inside them carry their own fill -- see .about-card. Scoped to .page-about. section-alt is used on nine other pages, where it is still the gray band with its hairlines. */ .page-about .section-alt { background: var(--surface-2); border-top: none; border-bottom: none; /* Closer than the shared .section 72px. With no rules and no colour change between them these read as one page rather than separate bands, so they do not need the separation a section between two different backgrounds would. */ padding: 40px 0; } /* The first one is the exception: 40px is the gap BETWEEN story sections, and above the first there is no story to be close to -- just the Our Story header. That break wants the full section's worth of air. */ .page-about .section-alt:first-of-type { padding-top: 80px; } /* The page's own ground, the same value .home-featured names right above it -- the two sections run on as one field of colour, with only section-alt's hairline between them. */ /* No rules at all. The top is bare because Featured Collection above draws the line between the two, and the bottom is bare because the Free Membership band underneath draws its own top rule -- one line at that seam, from the band, exactly as on the store page. */ /* Lighter than the page, not level with it: the About Us / Cut & Sewn pair lift off --forest as one raised band. Both stories live in this single section -- they are two copy panels swapped in one grid cell, not two sections -- so this one ground covers them both. */ .home-about { background: #1a1a1a; } /* The two stories, stacked. Each is its own row -- see .home-story below -- and this is only the space between them; the desktop block widens it. Single column is the base so it holds at every width the desktop query does not cover. */ .home-stories { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; } /* The small label over a story heading -- ABOUT US over The Craft, USA SOURCED & SEWN over Field-Tested. It carries what the band is about so the heading is free to be short -- both headings on this page were the label until the labels arrived, and both have since been rewritten. Note that the older comments in this file still call that lower band "Cut & Sewn", which was its heading for a long time and is no longer any text on the page. It is the .home-about-lower row. Not .eyebrow, which is the site's older label: --font-gold at --title-red with a 22px rule struck before it. That was drawn for the red-accented pages and is the last red left in this part of the file; these panels are Barlow throughout and have no rules on them. A span rather than a p, set to block. As a p it would inherit the story paragraph's size, colour and margins from .home-about .home-story-copy p and need every one of them overridden -- and it is a label, not prose. ---- This slot has never once measured, and it is worth writing down why The label sits about a third of the way down the panel's fade, where the ground now interpolates to roughly #333333. Each of these was metered on the panel it was actually given on, so they are a history rather than a comparison: #b35754 2.4:1 #9db3ab 5.1:1 #b34632 2.5:1 #7d3733 1.8:1 #b02b25 1.9:1 Only the green cleared, and it cleared because it was LIGHT -- luminance 0.42 against the panel's 0.026. Every red the slot has been given has come in between 0.07 and 0.15, one to six times the ground's own value, where 4.5:1 on a ground this dark needs about 0.30. Hue has nothing to do with it: a mid-value colour on a dark panel cannot reach the bar for small text no matter which mid-value colour it is, and this is the SMALLEST text on the panel at 0.8125rem, so the bar is 4.5 and not 3. ---- And then it was white, which is the answer the list was pointing at #ffffff: 12.6:1 where the label sits, against the 4.5:1 this size needs. The slot clears for the first time, and not narrowly. Everything above is why. Seven values, six failures, and the one that worked -- #9db3ab at 5.1:1 -- worked because it was LIGHT, luminance 0.42 against a panel at 0.03. Every red came in between 0.07 and 0.15, one to five times the ground's own value, where 4.5:1 on a ground this dark takes about 0.30. The reds were never failing because they were the wrong red. What it gives up is the point the slot existed to make. An eyebrow in an accent said "this label belongs to the same family as the buttons"; white says only "this is a label". That distinction is now carried by size, weight and tracking -- 0.8125rem at 500 on 0.16em, against a heading at 3.25rem -- which is what carried it on the near-black pages before any accent was tried here, and is the more durable of the two anyway: it does not have to be re-metered every time the panel moves. A base rule, at every width. It is new content rather than a repaint of something the phone already had, which is how the category tiles were handled for the same reason. */ .story-eyebrow { display: block; font-family: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 500; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.2; color: #ffffff; margin-bottom: 12px; } /* One story: copy and photo. Stacked here, side by side on desktop, and the copy is first in the markup in both rows so this order is the reading order everywhere -- the desktop flip is placement, not source. */ .home-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } /* The two edges swapped with the section order. 52px on top is the headroom Featured Collection used to take directly under the hero -- a section opening out of the photo needs less than one between two others. The 40px underneath meets Featured Collection's own 40px to make that seam 80px, the same one this page puts between all its sections. */ .section.home-about { padding-top: 52px; padding-bottom: 40px; } /* Colour lives on --featured-ground (see :root) because the hero's band reads it too -- the two have to move together or a bar reappears under the photo. This used to be the same value as .home-about's ground, so the seam below was this section's bottom rule and nothing else; the stories now sit on a lighter band and the rule draws the top edge of it. */ .home-featured { background: var(--featured-ground); /* 40px, meeting the stories' 40px above to make the standard 80px seam. This was 52px when the section sat directly under the hero and could take less headroom than a section between two others; it is between two others now. */ padding-top: 40px; /* No bottom rule. It used to draw the line between this section and the stories; the Free Membership band is what follows it now, and that band draws its own top rule on the stated assumption that whatever precedes it draws none. Left in place the seam would be ruled twice. */ border-bottom: none; } /* Facing edges, written as .section. rather than the bare class so the mobile `.section { padding: 64px 0 }` further down the file cannot put its own value back: that rule comes later and would win at equal specificity. The heading also sits closer to the product row than the shared .section-head 36px, now that the eyebrow line above it is gone. 72px underneath, the shared .section value: this is the last section before the Free Membership band, which is where the stories used to leave 72px and where the store page leaves it too -- the two pages end the same way. */ .section.home-featured { padding-bottom: 72px; } .home-featured .section-head { margin-bottom: 22px; } .home-videos { background: var(--forest); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 36px; flex-wrap: wrap; } .section-head p { max-width: 480px; margin: 0; } /* ---- Product grid & cards ---- */ /* minmax(0, 1fr), not a plain 1fr. A bare 1fr is minmax(auto, 1fr), and that auto floor is the item's min-content width -- which for a card is its photo's intrinsic width. Once the window is narrow enough that the floor bites, the tracks stop shrinking and the row overflows the container, running the last card off the side of the screen. */ .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } @media (min-width: 1025px) { [data-featured-grid] { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Store and related cards end in the star row, and the next row's photo starts right under it -- too close for the rating to read as belonging to the card above rather than to the one below. Twice the space: .product-info already carries 4px of bottom padding, so 40 + 4 = 44, double the 18 + 4 = 22 the plain grid gap gives. Column-gap is untouched and stays at .product-grid's 18px. */ [data-store-grid], [data-related-grid] { row-gap: 40px; } .product-card { background: transparent; border: none; display: flex; flex-direction: column; min-width: 0; } .product-media-wrap { position: relative; } .product-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; /* The same gray edge the product page's gallery and the stacked viewer's photos carry. This box is only ever a product card's photo -- the one with a Quick Add bar under it -- so the border lands on those and nowhere else. Safe against the aspect-ratio because the file is border-box: the border eats into the square rather than adding to it. */ border: 1.3px solid var(--border-strong); /* Square on all four corners, as is the Quick Add bar welded to the bottom of it: the pair is one hard-edged rectangle, the only one on the card. Written out rather than left unsaid, because --radius runs through this file as a habit and a later rule picking it up would round these again by accident. No -webkit-mask-image either. That hack is what makes WebKit clip a transformed child to a radius, and .product-media-link does carry the entrance scale -- but with no radius there is nothing for it to clip to, and overflow above already holds the child to the box. */ border-radius: 0; transform: translateZ(0); background: radial-gradient(circle at 30% 20%, rgba(169,136,90,0.06), transparent 70%), #5e5e5e; } /* ---- Coming Soon: what every product photo is at the moment -------------- Real photography does not exist yet, so mediaMarkup returns one of these in place of every product image on the site -- card grids, the product page's gallery and thumbnails, the stacked viewer, the quick view popup and its fullscreen viewer, cart lines, the review modal, search results. One rule covers all of them because one function builds all of them. Fills whatever box it is dropped into. Each of those containers is either a flex box centring its child or a fixed square, and 100%/100% satisfies both, so nothing here has to know which one it landed in. */ .product-media-soon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; /* A step lighter than --surface, so the plate reads as a filled panel against the card and the popup rather than as a hole in them. */ background: #2a2a2a; color: var(--offwhite); /* Never a target: the plate sits inside links and buttons that are. */ pointer-events: none; /* Two words at a fixed floor will not fit the smallest plates. They are hidden outright below, but this is the guarantee -- nothing spills out of the tile whatever it ends up in. */ overflow: hidden; } .product-media-soon span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.2em; /* Pulls the tracking off the last letter so the words stay optically centred rather than sitting a fifth of an em to the left. */ text-indent: 0.2em; text-align: center; line-height: 1.2; font-size: 0.8rem; } /* The plate turns up at wildly different sizes -- a 68px cart thumbnail, a ~330px card, a gallery slide most of the window tall -- and one type size cannot serve all of them. Container units size the label against the plate it is actually in, so each one comes out proportionate without a rule per context. Behind @supports because the fixed size above is a perfectly good answer where they are unavailable. */ @supports (container-type: inline-size) { .product-media-soon { container-type: inline-size; } .product-media-soon span { font-size: clamp(0.55rem, 9cqw, 1.15rem); } /* Below this there is no size at which two words of tracked display type read as anything but noise -- the cart line's 68px thumbnail and the product page's four-up thumbnail mosaic. Those get the plate as a plain tile, which says the same thing in that context. */ @container (max-width: 96px) { .product-media-soon span { display: none; } } } .product-media-link { /* Positioning context for the crossfade overlay below. */ position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: none; background: transparent; padding: 0; font: inherit; cursor: pointer; /* Same shrink as the hero but quicker, and lifting out of black as it lands. brightness() rather than opacity, so it reads as the photo lighting up rather than the card behind it showing through. */ transform: scale(1.28); filter: var(--reveal-from); transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s ease; } .product-media-link.is-visible { transform: scale(1); filter: brightness(1); } .product-media-link svg { width: 34%; height: 34%; color: var(--text-faint); transition: transform 0.35s ease; } .product-media-wrap:hover .product-media-link svg { transform: scale(1.08); } /* Real product photos fill their container edge-to-edge (unlike the centered, size-limited icon glyphs) — one rule shared by every media container: product cards, galleries, thumbs, cart lines, search results. */ /* Overrides the generic img{opacity:0;transform:scale(1.12)} scroll-reveal defaults — these live inside wrappers (.product-media-link, etc.) that already own their own reveal animation, so the img itself just shows. */ .product-media-img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; transform: none; filter: none; transition: transform 0.35s ease; } /* Quick Add hover switches a card to its second photo, with no transition -- the overlay is simply shown or hidden. The two photos stay stacked rather than one src being swapped, so the change is instant: the second file is already loaded and painted, with nothing to decode at hover time. transform stays on the base image's 0.35s ease, so both stacked layers zoom together on hover rather than sliding out of step. */ .product-media-img-alt { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: transform 0.35s ease; } .product-media-link.is-previewing > .product-media-img-alt { opacity: 1; } /* The 1% resting scale is not decoration -- it is the same fix the product page's thumbs already carry (see .product-detail-gallery .product-thumb img). Grid columns are 1fr, so a card's width lands on fractional pixels; the hover transform promotes the photo to its own layer, whose edges are then no longer pixel-snapped to the box it fills, and .product-media's gray placeholder background flashed through the seam as a hairline along an edge while the transition ran -- most visible on the way back down, where the photo settles flush against the box instead of overflowing it. A 1% overfill is invisible and leaves no seam to show through, and backface-visibility keeps the same layer alive between hovers so the promotion itself isn't what blinks. Both stacked photos take it, so the Quick Add preview swap and the photo under it stay in step. */ .product-media-wrap .product-media-link .product-media-img { transform: scale(1.01); backface-visibility: hidden; } /* Keyed to .product-media-wrap, which holds the photo and the Quick Add button together: the photo stays big while the cursor moves between the two, and shrinks back the moment it leaves both. */ .product-media-wrap:hover .product-media-link img { transform: scale(1.08); } .qv-fullscreen-slide .product-media-img { object-fit: contain; } /* The generated images that do get the entrance: the product page's main photo and the quick view popup's, which share one declaration so the two are identical by construction rather than by two sets of numbers kept in step by hand. Declared on the image rather than its slide because the slide's own transform belongs to the gallery. The small thumbnails and both stacked viewers are deliberately left out, so they simply never match this -- the stacks show their photos plainly, with no entrance at all. */ .product-detail-media-slide .product-media-img, .qv-media-slide .product-media-img { transform: scale(1.28); filter: var(--reveal-from); transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s ease; } .product-detail-media-slide .product-media-img.is-visible, .qv-media-slide .product-media-img.is-visible { transform: scale(1); filter: brightness(1); } /* And the placeholder, on exactly the same numbers. Every photo on the site is a Coming Soon plate at the moment, and a plate is a div, not an -- so the gallery and the popup had no entrance at all while the card grids, whose entrance sits on the wrapper around the photo, did. Same rule, so the two cannot drift apart, and the day real photos land the plate rule simply stops matching anything. On the slide's child rather than the slide, for the reason above: the slide's own transform belongs to the gallery. Scoped to slides, so the thumbnails and the stacked viewers -- which show their photos plainly -- are left out. */ .product-detail-media-slide .product-media-soon, .qv-media-slide .product-media-soon { transform: scale(1.28); filter: var(--reveal-from); transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s ease; } .product-detail-media-slide .product-media-soon.is-visible, .qv-media-slide .product-media-soon.is-visible { transform: scale(1); filter: brightness(1); } .product-badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--font-display); font-size: 0.65rem; letter-spacing: 0.08em; padding: 5px 10px; border-radius: var(--radius-sm); background: var(--title-red); color: var(--offwhite); } .product-badge.badge-muted { background: var(--surface); color: var(--text-muted); border: 1.3px solid var(--border-strong); } .product-badge.badge-accent { background: var(--forest); color: var(--offwhite); } /* ---- Quick Add: a bordered bar that always sits in normal flow between the product image and the title/description, at every viewport width -- no hover reveal, no absolute positioning. ---- */ .product-media-actions { position: static; z-index: 2; display: flex; width: 100%; /* No gap at all: the bar is welded to the bottom of the photo. Between them, the photo's own bottom border is the seam, and the two square edges that meet there -- the photo's bottom, the bar's top -- are what let them join without a join showing. Their far edges are both rounded, so the pair reads as one panel rather than two things touching. One value for every width: nothing about this is proportional to the grid, because there is no space to scale. */ margin-top: 0; /* The same gray edge the photo above carries, so the outline runs unbroken around the pair. Sides and bottom only: the photo's own bottom border is already the line where the two meet, and a top border here would sit against it and draw that one seam at 2.6px while every other edge stayed at 1.3px. */ border: 1.3px solid var(--border-strong); border-top: none; /* Square, like the photo it is welded to. overflow below is doing the clipping on its own now: there is no shape for a radius to follow, but the hover sweep still has to be kept out of sight while it is mid-travel above the button. */ border-radius: 0; overflow: hidden; } .cart-overlay-btn { position: relative; isolation: isolate; overflow: hidden; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 0; background: var(--btn-white-solid); color: var(--offwhite); border: none; /* The .btn type ramp, matched value for value so Quick Add and Add to Cart read as the same control. The family, weight and uppercasing were already shared; the size and the letter-spacing were not -- this ran a tighter 1.05rem with no tracking at all. */ font-family: var(--font-display); font-size: 0.9375rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.2em; cursor: pointer; } .cart-overlay-btn::after { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: calc(100% + 32px); z-index: -1; background: linear-gradient(to bottom, transparent 0px, var(--btn-gray-dark) 16px, var(--btn-gray-dark) calc(100% - 16px), transparent 100%); pointer-events: none; transform: translateY(-100%); transition: none; } .cart-overlay-btn.is-hovering::after { transform: translateY(0%); transition: transform 0.22s ease; } .cart-overlay-btn.is-leaving::after { transform: translateY(100%); transition: transform 0.22s ease; } .cart-overlay-btn.is-resetting::after { transition: none; } .cart-overlay-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .cart-overlay-btn span { white-space: nowrap; } /* ---- Quick view: modal ---- */ .quick-view-backdrop { position: fixed; inset: 0; /* The same darkening the stacked gallery lays down -- see --overlay-dim. Was rgba(26, 26, 26, 0.6): lighter, and warmer, so the page behind the popup sat at a visibly different level from the page behind the stack. */ background: var(--overlay-dim); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 300; } .quick-view-backdrop.open { opacity: 1; pointer-events: auto; } /* ---- Custom pointer cursor --------------------------------------------- .quick-view-close redrawn as a cursor, at that button's own 38px: the ring under the pointer and the button in the popup's corner are the same size. The viewBox is 38 units too, so every coordinate below is a real pixel and the artwork is 1:1 with the button. White ring and white X (--on-dark, the site's white) over a black disc at the same 0.55 the gallery arrows carry as --glass-fill -- enough to seat the white marks on a light photo, while the photo or page still carries on through it. Cursor and arrows are one set, so those two numbers move together. r=18.35, not 19, because the 1.3 ring straddles the path: half of it falls outside the radius, and at 19 that half would be clipped off by the 38-unit viewBox. The glyph is the close button's own path verbatim, written in that button's 24-unit viewBox and placed by a translate/scale group: 0.8333 at translate(9 9), for a 10px X on a 1.33 stroke. The disc now matches the button exactly but the X inside it is still deliberately the larger of the two -- the button draws the same path at 0.6667 (a 16px on a 24 viewBox) for 8px on 1.067. The translate is not free to choose: the path centres on (12,12) locally, so the offset has to be 19 - 12 * scale for the middle to land on the disc's centre. Rescale the glyph and that number moves with it. Held as a custom property because the data: URI is ~400 characters and inlining it at both use sites would be unreadable; `cursor` takes a var() substitution fine. Colours are literals inside the URI -- a data: URI cannot read a custom property -- so if the palette moves, these move with it by hand. Each use site ends in `pointer` as a fallback, so anything that will not take an SVG cursor still reads as clickable. */ :root { --cursor-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'%3E%3Ccircle cx='19' cy='19' r='18.35' fill='black' fill-opacity='0.55' stroke='%23878583' stroke-width='1.3'/%3E%3Cg transform='translate(9 9) scale(0.8333)' fill='none' stroke='%23fbf7f3' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/g%3E%3C/svg%3E") 19 19; /* The smoked fill behind both pairs of gallery arrows and the stacked gallery's close button -- black at the same 0.55 the cursor above carries, so a ring under the pointer and a ring sitting on the photo weigh the same. The cursor cannot read this: a data: URI has no access to custom properties, so it writes the value out by hand as `fill='black' fill-opacity='0.55'`, in SVG's own attribute form rather than an rgba() string. Two places, one value. */ --glass-fill: rgba(0, 0, 0, 0.55); } /* Off the popup, the pointer becomes the close button -- clicking out here closes the quick view (see main.js), so the cursor says so rather than leaving a bare arrow over dead space. Pointer-only: a touch device has no cursor to restyle, and the popup is a bottom sheet there anyway. */ @media (hover: hover) and (pointer: fine) { .quick-view-backdrop, .review-modal-backdrop, /* Same idea over the nav panel's dimmed page: off the panel and off the header, the pointer is a close button, because that is what clicking there does. It only ever catches the pointer while the panel is open. */ .mobile-nav-backdrop, .cart-drawer-backdrop { cursor: var(--cursor-close), pointer; } } .quick-view-modal { position: fixed; /* Equal gap on all four sides, guaranteed by the box model itself -- replaces the old top/left/width/max-height combo (94vw vs 94vh caps), which produced generous side margins but a nearly-clipped top/bottom. Tied to the page's own .container content edge -- same side padding formula PLUS the auto-margin that kicks in once the viewport is wider than --container's 1500px cap -- minus 1px, so the modal always overlaps the product grid behind it by at least a hair instead of leaving a gap that peeks through (previously this only matched the padding half of that formula, so it drifted off the true page margin on any screen wider than 1500px). */ --qv-inset: calc(max(0px, (100vw - var(--container)) / 2) + clamp(16px, 4vw, 64px) - 1px); inset: var(--qv-inset); overflow: hidden; background: var(--modal-panel); /* Gray edge, same as the product page's gallery. Held in a property because the grid formula below has to subtract it -- see there. */ --qv-border: 1.3px; border: var(--qv-border) solid var(--border-strong); /* Square. The panel is a full-bleed dialog inset to the page's own content edge, not a card floating on it, so it takes the same hard corners the product cards do. The mobile bottom sheet keeps its rounded top -- see the max-width: 760px block, where it is the sheet's only shaping. */ /* --band-radius, the curve the home page's four bands share -- the two story rows, the category tiles and Get In Touch. This modal is the same kind of object: a panel floating inset from the window edge, so it takes the same corner. overflow: hidden above is what makes the photograph and the info column follow it rather than square it off. */ border-radius: var(--qv-radius); box-shadow: var(--shadow); z-index: 301; opacity: 0; pointer-events: none; transform: scale(0.96); transition: opacity 0.25s ease, transform 0.25s ease; display: grid; /* Image column width = modal height (100vh minus 2x the inset above), so that column is an exact square whenever the modal has room for it -- capped at 56% of the modal's own width so a narrow-but-tall window can't squeeze the info column down to nothing (image just goes slightly rectangular instead once that cap kicks in). The border comes off that height. Grid tracks are laid out in the content box, so the column's height is the modal MINUS its two borders, while 100vh - 2 * inset is the modal including them -- left unsubtracted the column would be 2.6px wider than it is tall, and the square this whole expression exists to guarantee would not be one. */ grid-template-columns: min(calc(100vh - 2 * var(--qv-inset) - 2 * var(--qv-border)), 56%) 1fr; } .quick-view-modal.open { opacity: 1; pointer-events: auto; transform: scale(1); } .quick-view-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; border: 1.3px solid var(--border-strong); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; z-index: 2; transition: border-color 0.2s ease, color 0.2s ease; } .quick-view-close:hover { border-color: var(--on-dark); color: var(--on-dark); } .quick-view-close svg { width: 16px; height: 16px; transition: transform 0.2s ease; } .quick-view-close:hover svg { transform: scale(1.35); } .quick-view-handle { display: none; } .quick-view-media { position: relative; height: 100%; /* Square, following the panel. This used to round its outer two corners to sit inside the panel's; with that square there is nothing to follow, and a curve here would only show the panel's own ground through each corner. */ /* The dark half has to carry the panel's curve on the two corners it touches, and this is the fix for the white showing through them. The modal's own background is --page-ground, which is #ffffff -- the light treatment sets it on .quick-view-modal and .quick-view-info together. The info half being white too means its corners are invisible against it. The media half is not: it is a near-black photo plate, and with square corners inside a parent clipped at 24px, the white parent showed as a crescent in each of its two corners. Rounding the child is what removes it. Clipping the parent harder cannot -- the gap is INSIDE the parent's own rounded edge, so there is nothing there for the clip to cut. Left pair only: in this two-column form the media is the left half and its right edge meets the info panel square. Same token as the panel, so the two curves cannot drift apart. */ border-radius: var(--qv-radius) 0 0 var(--qv-radius); overflow: hidden; /* An opaque ground under the clip, and this is what kills the light edge along the curve. This element had no background at all -- the dark you see is its CHILD, the Coming Soon plate, painting inside it. A rounded overflow: hidden clips that child with an antialiased edge, and antialiased means the outermost pixels of the curve are partly transparent. Partly transparent over what? The modal's own background, which the light treatment sets to #ffffff. So every pixel along the arc was a blend of the photo and white, which reads as a pale rim following the corner. #181818 is the plate's own ground -- the colour under the topo file in .quick-view-media .product-media-soon -- so the blend is now dark on dark and the rim has nothing light to pick up. It also covers the case the plate is replaced by a real photograph: the backing stays dark either way. */ background: #181818; /* No cursor and no zoom. The popup is a quick look before adding to the cart, not a photo viewer -- the product page is where the photography is examined, and it has the stacked gallery for it. */ } .qv-media-track { width: 100%; height: 100%; position: relative; } .qv-media-slide { position: absolute; inset: 0; width: 100%; height: 100%; display: none; align-items: center; justify-content: center; transition: transform 0.15s ease-out; background: radial-gradient(circle at 30% 20%, rgba(169,136,90,0.06), transparent 70%), #5e5e5e; } .qv-media-slide.is-active { display: flex; } .qv-media-slide-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .qv-media-slide svg { width: 34%; height: 34%; color: var(--text-faint); } /* Tap-to-expand, on the product page's gallery only. The class is named for the quick view popup, which used to carry one of these as well -- the popup's photos are a quick look before adding to the cart and deliberately no longer enlarge, so the selectors below are scoped to the product page to keep the button from ever coming back there. Hidden except on a phone; a pointer device opens the stacked viewer by clicking the photo itself. */ .qv-media-expand { display: none; } /* ---- Quick view (mobile): real swipeable filmstrip, exactly one photo on screen at a time — plus a thumbnail strip below to jump straight to any photo. ---- */ .qv-media-thumbs { display: none; } @media (max-width: 860px) { .qv-media-track { display: flex; overflow-x: auto; /* Same fix as .product-detail-media-track: overflow-x on its own makes overflow-y compute to auto, so a downward drag panned the photos instead of scrolling the popup. */ overflow-y: hidden; /* Both axes, not pan-x alone. pan-x does not hand a vertical drag to the sheet behind the photo -- it forbids one outright, which is why a finger starting on the image could page the photos sideways and do nothing at all up or down. With pan-y allowed as well the browser reads the direction and gives the gesture to whichever wants it: sideways to the strip, up and down to the sheet. */ touch-action: pan-x pan-y pinch-zoom; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .qv-media-track::-webkit-scrollbar { display: none; } /* Full width, so one photo fills the frame and the next is genuinely off screen rather than peeking in at the edge. */ .qv-media-slide { position: relative; display: flex !important; flex: 0 0 100%; scroll-snap-align: start; } .quick-view-media .qv-media-arrow { display: none; } /* Against the frame, not against a slide. It used to be rendered into every photo, which meant it travelled with the filmstrip -- it slid off the left edge on a swipe while the next photo's copy slid in from the right. One button, parked. */ .product-detail-media .qv-media-expand { display: flex; align-items: center; justify-content: center; position: absolute; top: 12px; right: 12px; z-index: 4; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(19, 19, 19, 0.55); color: #d6d6d6; cursor: pointer; } .qv-media-expand svg { width: 20px; height: 20px; color: #d6d6d6; } .qv-media-thumbs { display: flex; justify-content: center; gap: 10px; padding: 10px 16px 0; overflow-x: auto; scrollbar-width: none; } .qv-media-thumbs::-webkit-scrollbar { display: none; } .qv-media-thumb { position: relative; flex: 0 0 72px; width: 72px; height: 72px; border-radius: var(--radius-sm); border: 1.3px solid transparent; background: #5e5e5e; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; } .qv-media-thumb.is-active { border-color: var(--text); } .qv-media-thumb svg { width: 60%; height: 60%; color: var(--text-faint); } /* Shown on the 4th thumb only when there are more images than fit — darkens that thumb and overlays "+N" for the rest. */ .qv-media-thumb-count { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; background: rgba(19, 19, 19, 0.65); color: #ececec; font-family: var(--font-display); font-size: 1rem; font-weight: 600; } .qv-media-thumb.has-more .qv-media-thumb-count { display: flex; } } .qv-media-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1.3px solid var(--border-strong); /* Smoked rather than solid, so the photo carries on behind the arrows instead of stopping at a disc. Same fill as the zoom cursors, and both pairs take it from here -- the popup's and the product page's, which share this class. */ background: var(--glass-fill); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; /* Above the slides, which sit at 1 and 2 while one is sliding in over the other. The prev arrow comes BEFORE the track in the markup, so at an equal z-index the active slide painted straight over it and only the left arrow vanished. Also above the dot row at 3. */ z-index: 4; transition: border-color 0.2s ease, color 0.2s ease; } .qv-media-arrow:hover { border-color: var(--on-dark); color: var(--on-dark); } .qv-media-arrow svg { width: 18px; height: 18px; transition: transform 0.2s ease; } .qv-media-arrow:hover svg { transform: scale(1.35); } .qv-media-prev { left: 16px; } .qv-media-next { right: 16px; } /* ---- Product detail page image gallery ---- */ @media (min-width: 860.02px) { /* Desktop only: the gallery stays pinned in view while the info column (which runs much longer once the accordion and reviews are open) scrolls past it, instead of scrolling away after the first screen. Give it more of the row than the info column -- past the halfway mark -- since the thumbnail column below now shares this space with the main image. */ /* .split.product-detail-split (not just .product-detail-split) so this beats the plain .split rule declared later in the file at equal specificity. */ /* Not an fr ratio any more, because one cannot hold the margins even. The photo is capped at --pd-photo-cap, so on a short window the gallery needs LESS width than any fixed ratio hands it, and the leftover opens up as slack between the photo and the info column -- a left margin that grows as the window gets shorter while the right one stays put. A ratio tuned to look even at one height is wrong at every other. So the first track asks for exactly what the gallery needs and no more. Whichever of the two terms is smaller wins, and either way the gallery fills its track with nothing left over: - min(58%, ...) on a tall window, where the cap never binds and the photo is sized by this track; - the calc on a short one, which is the gallery's own width at the cap: photo + gap + thumb, and a thumb is (photo - 4 gaps) / 5, so the whole column comes to 1.2 photo + 0.2 gap. Those two constants are PD_THUMB_WINDOW = 5 written out -- change the thumb count in main.js and they change with it. With slack gone, the space between photo and info is just this rule's gap, so setting that to the container's own side padding makes the info column's left margin exactly its right one at every width. */ .product-detail-split.split { /* Where the sticky gallery comes to rest: directly under the breadcrumb bar, which is stuck to the top of the screen. Not a round number by accident -- it is that bar's exact height, 12px of padding either side of a 23px line (0.8rem on the body's 1.8 line-height). Change the bar's type size or padding and this has to move with it, or the gallery will either slide under the bar or leave a gap below it. */ /* Where the breadcrumb-and-photos block comes to rest: a little air above the breadcrumb, and that is all. The breadcrumb is part of what sticks, so it is still on screen at the stop -- no pinned bar of its own. */ --pd-sticky-top: 12px; /* The breadcrumb's own line box (0.8rem on the body's 1.8 line-height) and the space under it. Both are inside the sticky block, so both come off the height the photo has to play with. */ --pd-crumb: 23px; --pd-crumb-gap: 12px; /* Fill the screen below the breadcrumb, less a little air at the bottom, so the stopped block sits in the viewport with no dead space under it. Only binds on a SHORT window -- see the track below, where page width takes over on a tall one. */ --pd-photo-cap: calc( 100vh - var(--pd-sticky-top) - var(--pd-crumb) - var(--pd-crumb-gap) - 24px ); --pd-gallery-gap: 10px; grid-template-columns: min(64%, calc(var(--pd-photo-cap) * 1.2 + var(--pd-gallery-gap) * 0.2)) 1fr; gap: clamp(16px, 4vw, 64px); } /* One photo, so no thumb column. The track above is 1.2x the photo's cap precisely to leave room for one; without it that extra fifth is not a narrower photo, it is dead space opening between the photo and the product info. So the track drops to the photo's own width. Selected on the gallery from its parent, because the class that says "one photo" is set by initProductGallery on the gallery itself and the track is declared up here. */ .product-detail-split.split:has(.product-detail-gallery.is-single-slide) { grid-template-columns: min(64%, var(--pd-photo-cap)) 1fr; } /* The breadcrumb and the photos stick as one block, which is the whole point of the wrapper: the text stops with the images, sits over the page background like any other text rather than on a bar of its own, and when the info column finally runs out the two scroll away together. No background and no z-index, and neither is an oversight. Nothing ever passes beneath this: the gallery is inside it, and the info column is a separate grid track alongside. It releases with the section, so the reviews below never reach it either. */ .product-detail-sticky { position: sticky; top: var(--pd-sticky-top); } .product-detail-sticky .breadcrumb { margin-bottom: var(--pd-crumb-gap); } /* Drops the info column by the height of the breadcrumb and the gap under it, so RINGTAIL GEAR starts level with the top of the photos rather than level with the breadcrumb above them. The first two terms are exact and derived from the breadcrumb's own values, so they track any change to it. The third is an eyeball correction and the only number here that is: box alignment is not optical alignment. The photo's top edge is a hard 1.3px line, while the eyebrow's is a cap-height that sits some way inside its line box, so boxes that line up perfectly still do not LOOK lined up. Tune this one, not the two above it. */ .product-detail-info { --pd-info-nudge: 8px; padding-top: calc(var(--pd-crumb) + var(--pd-crumb-gap) + var(--pd-info-nudge)); } .product-detail-gallery { display: flex; /* .product-detail-media is first in the markup and .product-thumbs second -- reversing the row puts the thumbnail column on the left without needing to reorder the actual DOM. */ flex-direction: row-reverse; /* Not stretch: that would force the image's height to match the thumb column, overriding its own 1:1 aspect-ratio and making it non-square. The image sizes itself (aspect-ratio from its flex-computed width); the thumb column matches it via JS instead (see initProductThumbSizing in main.js). */ align-items: flex-start; /* row-reverse runs the main axis right-to-left, so flex-end packs toward the LEFT edge. That matters once the photo is height-capped below and the row no longer fills its column: the slack has to fall on the right, between the photo and the product info, rather than opening a gap to the left of the thumbnails. */ justify-content: flex-end; /* One spacing value for the whole gallery: between the thumb column and the main image, and between the thumbs themselves. It is declared on .product-detail-split and inherited down to here, because the split's own track formula has to do arithmetic with it -- see there. Also read back by sizeProductThumbs in main.js, which subtracts it before dividing the image's height into thumbs, so the column still ends level with the photo. */ gap: var(--pd-gallery-gap); } /* .product-detail-gallery .product-detail-media (not just .product-detail-media) so border-radius:0 outranks the plain, unconditional rule declared later in the file at equal specificity. */ /* The photo and its dot row share a column, so the dots sit under the photo rather than becoming a third item in this row-reverse row -- which would have stood them up as a vertical strip between the thumbs and the image. The flex sizing moves to the column; the photo just fills it. */ .product-detail-gallery .product-detail-media-col { flex: 1; min-width: 0; /* A height cap, written as a width: the photo is square, so bounding one bounds the other. Without it a wide window sizes the photo purely from the column it sits in and it grows taller than the screen -- the gallery is sticky at top: 24px, so the bottom of the photo and its dot row simply never come into view. The cap leaves room for both plus the sticky offset. The thumbs follow: sizeProductThumbs divides whatever height this ends up at, so capping the photo shrinks them with it. Declared on .product-detail-split, whose track formula sizes the gallery's column from this same value so the two cannot disagree. */ max-width: var(--pd-photo-cap); } .product-detail-gallery .product-detail-media { border-radius: 0; /* Square corners, but still outlined -- the gray edge is what separates a near-black product shot from the near-black page behind it. */ border: 1.3px solid var(--border-strong); } /* Scoped to .product-detail-gallery (not just .product-thumbs/.product-thumb) so these outrank the plain, unconditional rules declared later in the file at equal specificity. */ .product-detail-gallery .product-thumbs { flex-direction: column; /* The same value that separates the column from the photo, so the space around a thumb is even on every side. The column still ends level with the main image: sizeProductThumbs reads this gap and takes the three of them off the height before dividing it into PD_THUMB_WINDOW rows. */ gap: var(--pd-gallery-gap); flex-shrink: 0; margin-top: 0; } /* Exact square size (big, small gap between) is computed in JS from the main image's actual rendered height -- see initProductThumbSizing in main.js. CSS alone can't do it: the thumb size depends on the image's height, which depends on the width left over after the thumb column, which depends on the thumb size -- a genuine circular dependency that flexbox + aspect-ratio doesn't resolve reliably here. */ /* Same gray edge as the main image. Now that the thumbs are separated rather than flush, each border stands on its own -- no doubled seams. */ .product-detail-gallery .product-thumb { flex: none; border-radius: 0; border: 1.3px solid var(--border-strong); } /* The border used to be the hover tell. With it gone the photo itself grows inside the (overflow: hidden) thumb, matching how the product cards behave on hover. The 1.01 resting scale is not decoration. Thumb sizes come out of a JS division of the main image's height, so they land on fractional pixels; the hover transform promotes the photo to its own layer, whose edges are no longer pixel-snapped to the box, and the thumb's gray placeholder background flashed through the seam along the bottom as the transition started and ended. A 1% overfill is invisible and leaves no seam to show through. backface-visibility keeps the same layer alive between hovers so the promotion itself isn't what blinks. */ .product-detail-gallery .product-thumb img { transform: scale(1.01); transition: transform 0.35s ease; backface-visibility: hidden; } .product-detail-gallery .product-thumb:hover img { transform: scale(1.1); } } .product-detail-media { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); /* Gray edge, same as the thumbs below it. Safe against the aspect-ratio because everything here is border-box: the border eats into the square rather than adding to it, so the box stays square and the JS that sizes the thumb column off this height still measures what it expects. */ border: 1.3px solid var(--border-strong); overflow: hidden; /* A plain hand rather than the popup's ringed + and -: this photo grows on hover the way the product cards do, so it reads as a clickable image instead of a magnifier. Click-to-zoom still works (see initImageZoom), and the hand stays put while zoomed, since clicking again zooms out. */ cursor: pointer; } .product-detail-media-track { width: 100%; height: 100%; position: relative; } /* Pointer devices only. Below that the track is a swipeable filmstrip with its own overflow, scroll-snap and touch-action, and a transform on it would fight all three. */ @media (hover: hover) and (pointer: fine) { /* The same grow, easing and 1% resting overfill the product cards use -- see .product-media-wrap .product-media-link .product-media-img for why the resting scale is 1.01 and not 1. Keyed to the track rather than to the photo, which is the element the cards grow. Here the photo already owns the 1.2s entrance transition and the slide already owns the zoom transform, so the wrapper between them is the one part of the stack free to take this without colliding with either. It scales whichever slide is showing, and .product-detail-media clips the overflow exactly as the cards' .product-media does. */ .product-detail-media-track { transform: scale(1.01); backface-visibility: hidden; transition: transform 0.35s ease; } .product-detail-media:hover .product-detail-media-track { transform: scale(1.08); } /* Zoomed, the active slide is already at 2.2 and the pointer is by definition still over the photo -- growing the wrapper as well would multiply the two into 2.38. Declared after the hover rule so it wins on source order at equal specificity. */ .product-detail-media.is-zoomed .product-detail-media-track { transform: scale(1.01); } } .product-detail-media-slide { position: absolute; inset: 0; width: 100%; height: 100%; display: none; align-items: center; justify-content: center; transition: transform 0.15s ease-out; background: radial-gradient(circle at 30% 20%, rgba(169,136,90,0.06), transparent 70%), #5e5e5e; } .product-detail-media-slide.is-active { display: flex; } .product-detail-media.is-zoomed .product-detail-media-slide.is-active { transform: scale(2.2); } .product-thumbs { display: flex; gap: 10px; margin-top: 14px; } .product-thumb { width: 68px; height: 68px; padding: 0; border-radius: var(--radius-sm); border: 1.3px solid var(--border-strong); /* Near-black, not the gray placeholder this used to carry. Thumb heights come out of a JS division and land on fractional pixels, so a hairline of the box can show below the photo -- against #5e5e5e that read as a gray line along the bottom edge, most obviously under the mosaic tile. The fallback icon these were gray for is no longer used by any product. */ background: #131313; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; transition: border-color 0.2s ease; } .product-thumb svg { width: 55%; height: 55%; color: var(--text-faint); } /* The border is gray and stays gray -- no state lightens it. Neither hover nor .is-active, which used to mark the photo currently in the main image and was the white edge that showed on the first thumb at rest. The desktop gallery's hover tell is the photo growing inside the thumb instead; the current photo is told by the main image itself. */ .detail-divider { border-top: 1.3px solid var(--border-strong); margin: 16px 0; } /* .product-detail-info and .quick-view-info-scroll both lay their children out with explicit flex `order` values (see below) instead of relying on source order, so a plain divider with the default order:0 would float to the very front of the column regardless of where it sits in the HTML. Give each divider the same order as the element right before it in reading order -- ties resolve by DOM order, so it still lands immediately after that element. */ .product-detail-info .detail-divider { order: 1; } .product-detail-info .detail-divider.detail-divider-after-cart { order: 3; } .quick-view-info-scroll .detail-divider { order: 1; } /* NO .detail-divider-after-cart in the popup, and this note is here to stop it being added a third time. There already IS a line under Add to Cart and it is not a divider: it is .quick-view-link-full's own border-top, which that link has carried since it was built -- 18px of padding under a rule, so View Full Details reads as a footer to the column rather than as another thing in the form. Adding a divider element under the actions puts a second rule about 22px above that one. */ .quick-view-info .detail-divider { border-top-color: var(--on-dark-border); } .product-color-select { margin: 20px 0; display: flex; align-items: center; gap: 12px; } /* display: flex above outranks the browser's own [hidden] rule, so a block the script hides -- no sizes, or no colours in Shopify -- has to be told. */ .product-color-select[hidden] { display: none; } .color-select-row { display: flex; align-items: flex-start; gap: 12px; } .color-select-row .color-select-dropdown { flex-shrink: 0; } .color-select-row .qv-stock-status { flex: 1 1 auto; min-width: 0; padding-top: 12px; } .product-color-label { font-family: var(--font-display); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .color-select-dropdown { position: relative; } /* Flashed when Add to Cart is blocked because no color is selected yet. */ .color-select-dropdown.needs-color .color-select-trigger { border-color: var(--danger); animation: color-select-shake 0.4s ease; } @keyframes color-select-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } } .color-select-trigger { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--radius-sm); border: 1.3px solid var(--border-strong); background: transparent; color: var(--text); font-family: var(--font-body); font-size: 0.85rem; cursor: pointer; } .color-select-trigger svg { width: 13px; height: 13px; color: var(--text-muted); transition: transform 0.2s ease; flex-shrink: 0; } [data-color-select-label].is-placeholder { color: var(--text-muted); } .quick-view-info [data-color-select-label].is-placeholder { color: var(--on-dark-muted); } .color-select-dropdown.is-open .color-select-trigger { border-color: var(--text); } .color-select-dropdown.is-open .color-select-trigger svg { transform: rotate(180deg); } .color-select-list { position: absolute; top: calc(100% + 6px); left: 0; min-width: 160px; background: var(--surface); border: 1.3px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 20; padding: 6px; list-style: none; margin: 0; } .color-select-list li { list-style: none; padding: 8px 10px; border-radius: 6px; font-family: var(--font-body); font-size: 0.85rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; } .color-select-list li:hover { background: rgba(0, 0, 0, 0.06); color: var(--text); } .color-select-list li[aria-selected="true"] { color: var(--text); font-weight: 600; } .color-select-list li[data-placeholder] { font-weight: 400; } /* A size row is "Large" followed by what Large actually measures -- the choice is made on the numbers, not on the word, which means nothing on its own. The name stays in the row's own weight and colour; the measurement sits after it, smaller and quieter, and the trigger shows the name alone once the row is picked (see data-label). */ .color-select-list li .option-note { display: block; margin-top: 2px; font-size: 0.76rem; color: var(--text-faint); font-weight: 400; } .quick-view-info .color-select-list li .option-note { color: var(--on-dark-faint); } /* Hidden for the products that come in one size. The block is display:flex, which outranks the browser's own [hidden] rule, so it needs saying here. */ .product-size-select[hidden] { display: none; } .pd-buybar-size[hidden] { display: none; } .color-select-list li[data-placeholder][aria-selected="true"] { color: var(--text-muted); } .quick-view-info .color-select-trigger { border-color: var(--border-strong); color: var(--on-dark); } .quick-view-info .color-select-dropdown.is-open .color-select-trigger { border-color: var(--on-dark); } .quick-view-info .color-select-trigger svg { color: var(--on-dark-faint); } .quick-view-info .color-select-list { border-color: var(--border-strong); } .quick-view-info .color-select-list li { color: var(--on-dark-muted); } .quick-view-info .color-select-list li:hover { background: rgba(251, 247, 243, 0.08); color: var(--on-dark); } .quick-view-info .color-select-list li[aria-selected="true"] { color: var(--on-dark); } .quick-view-info .color-select-list li[data-placeholder][aria-selected="true"] { color: var(--on-dark-muted); } .qv-stock-status { display: flex; align-items: flex-start; gap: 7px; font-family: var(--font-body); text-transform: uppercase; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--title-red); min-width: 0; } .qv-stock-status:not([data-status]) { display: none; } /* ---- A product with a single photo ---- The arrows, the dots and the thumb strip all describe a set of photos to move between. With one photo there is no set: the arrows step nowhere, the single dot says nothing, and the thumb column was taking a fifth of the gallery's width to show the same picture a second time. Higher specificity than the rules they switch off, so they win wherever those are written -- inside a media query or not. This lifts by itself the moment a product carries real photography. */ .product-detail-gallery.is-single-slide .pd-media-arrow, .product-detail-gallery.is-single-slide .media-dots, .product-detail-gallery.is-single-slide .product-thumbs, .quick-view-modal.is-single-slide .qv-media-arrow, .quick-view-modal.is-single-slide .media-dots, .quick-view-modal.is-single-slide .qv-media-thumbs { display: none; } /* ---- The popup: the stock line's slot is always there -------------------- .color-select-row stacks at every width, so the status sits UNDER the dropdown -- and being display:none until a colour is picked, it appeared out of nothing and pushed the price, the qty stepper, Add to Cart and View Full Details down the panel with it. So in the popup the row is held open whether or not there is anything in it: visibility rather than display, which keeps the box (and the 12px of padding above it) in the layout while showing nothing -- the dot on the ::before included. The reserved height is that padding plus one line, and line-height is pinned here rather than left to inherit so the two numbers are the same number. min-height, not height, so a status long enough to wrap still fits; it is only the first line that has to cost nothing. Scoped to .quick-view-info. The product page has the same markup and the same jump, but its column is a page rather than a panel and reserving the slot there is a separate call. */ .quick-view-info .qv-stock-status { line-height: 1.3; min-height: calc(12px + 1.3em); } .quick-view-info .qv-stock-status:not([data-status]) { display: flex; visibility: hidden; } /* Two margins met under the stock line and neither collapsed -- these are flex children, so .product-color-select's 20px bottom and .quick-view-actions' 14px top simply added up to 34px of nothing between the status and the quantity stepper. Dropping the first leaves the actions' own 14px, which reads against the 12px above the status rather than dwarfing it. Only the bottom: the 20px above the block still separates it from the divider over it. */ .quick-view-info .product-color-select { margin-bottom: 0; } .qv-stock-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; background: var(--title-red); } .quick-view-info { /* The right pair of the panel's corners. Now that the white lives on this element rather than on the panel behind it, this half has to carry the curve itself or its square corner paints over the panel's rounded one. */ border-radius: 0 var(--qv-radius) var(--qv-radius) 0; position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--modal-panel); color: var(--on-dark); /* The divider between the photo and this column. On the info side rather than as a border-right on .quick-view-media, because that column's width is calculated to make it an exact square and a border would eat 1.3px out of it. This column is the grid's 1fr, so it just gives up the space. Dropped in the stacked mobile form, where the two sit one above the other and a line down the left of the text would mean nothing. */ border-left: 1.3px solid var(--border-strong); } .quick-view-info-scroll { padding: 48px 64px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; } .quick-view-info-scroll::-webkit-scrollbar { display: none; } .quick-view-scroll-cue { position: absolute; right: 18px; bottom: 18px; width: 34px; height: 34px; border-radius: 50%; background: rgba(251, 247, 243, 0.12); display: flex; align-items: center; justify-content: center; color: var(--on-dark); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 2; animation: qv-scroll-cue-bounce 1.6s ease-in-out infinite; } .quick-view-scroll-cue svg { width: 16px; height: 16px; } .quick-view-info.is-scrollable .quick-view-scroll-cue { opacity: 1; } @keyframes qv-scroll-cue-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } .product-detail-header .product-price, .quick-view-info .product-price { margin: 12px 0 10px; } .product-detail-header .product-price .price, .quick-view-info .product-price .price { font-size: 1.5625rem; font-family: var(--font-body); } .product-detail-header .product-price .price, .quick-view-info .product-price .price { color: var(--text); } .quick-view-info .product-price .price-was { color: var(--on-dark-faint); } /* Match the quick view popup's h3 exactly (same size/weight) instead of the page's own much larger default h1 -- consistency between the two "product page" contexts matters more here than semantic heading size. */ /* --font-body, not the --font-display every other heading on the site takes from the h1-h4 rule. Koulen is an uppercase-only face -- its Latin lowercase maps to capitals -- so a product title set in it reads as SUMMIT DAYPACK however it is written in products.js. There is no text-transform to remove; the family IS the capitalisation, and this is the only way off it. Lambda instead, which is what the card titles under the grid already use, so the name reads the same in the grid, in the popup and on the page. */ .product-detail-header h1, .quick-view-info h3 { font-family: var(--font-body); font-size: 1.5625rem; font-weight: 400; } .quick-view-info h3 { color: var(--on-dark); } .qv-mini-logo { display: block; height: 18px; width: auto; margin-bottom: 10px; opacity: 0.85; } .quick-view-info p { line-height: 1.65; color: var(--on-dark-muted); } .quick-view-info ul { margin: 16px 0 6px; padding-left: 20px; list-style: disc; } .quick-view-info ul li { margin-bottom: 8px; color: var(--on-dark-muted); font-size: 0.92rem; } .quick-view-info .product-color-label { color: var(--on-dark-muted); } .quick-view-info .quick-view-link { color: var(--on-dark-muted); } .quick-view-info .quick-view-link:hover { color: var(--on-dark); } /* No price here, and the qty stepper stacks above a full-width Add to Cart button instead of sitting side by side with it -- at every viewport width, same as the product detail page's cart row. */ .quick-view-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 14px; } .quick-view-actions .qv-actions-price { display: none; } .quick-view-actions [data-qv-add-to-cart] { width: 100%; } .quick-view-actions .qty-stepper { width: 100%; height: 46px; display: flex; align-items: center; justify-content: space-between; border-radius: 999px; border: 1.3px solid var(--border-strong); padding: 0 6px; } .quick-view-actions .qty-stepper-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border: none; background: transparent; color: var(--on-dark); cursor: pointer; } .quick-view-actions .qty-stepper-btn svg { width: 18px; height: 18px; } .quick-view-actions .qty-stepper .qty-input { flex: 1; width: auto; height: auto; border: none; background: transparent; } /* Partial-fill star rating: an outline row and a gold row stacked exactly on top of each other; the gold row is clipped to a % width so a rating like 4.8/5 fills the 5th star only 80% of the way instead of jumping to whole stars. */ .star-rating { position: relative; display: inline-flex; } .star-rating-row { display: flex; gap: 2px; } .star-rating-row svg { width: 16px; height: 16px; flex-shrink: 0; } .star-rating-bg svg { fill: rgba(251, 247, 243, 0.18); } .star-rating-fg { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; } .star-rating-fg svg { fill: var(--title-red); } .star-rating.is-small .star-rating-row svg { width: 13px; height: 13px; } .qv-review-card { padding-bottom: 18px; border-bottom: 1.3px solid var(--on-dark-border); } .qv-review-card.is-last-visible { border-bottom: none; padding-bottom: 0; } .qv-review-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .qv-review-date { font-family: var(--font-body); font-size: 0.75rem; color: var(--on-dark-faint); } .qv-review-text { font-size: 0.88rem; line-height: 1.55; color: var(--on-dark-muted); margin: 0 0 6px; } .qv-review-author { font-family: var(--font-display); font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--on-dark); } /* ---- Write a Review modal ---- */ .review-modal-backdrop { position: fixed; inset: 0; /* The same darkening every other full-screen viewer lays down -- see --overlay-dim. Was rgba(26, 26, 26, 0.6): lighter and warmer, so opening this popup dimmed the page to a different level than the quick view or the stacked gallery did. */ background: var(--overlay-dim); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 700; } .review-modal-backdrop.open { opacity: 1; pointer-events: auto; } .review-modal { position: fixed; top: 50%; left: 50%; width: min(460px, 92vw); max-height: 85vh; overflow-y: auto; background: var(--modal-panel); border-radius: var(--radius-lg); box-shadow: var(--shadow); z-index: 701; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.96); transition: opacity 0.25s ease, transform 0.25s ease; } .review-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .review-modal-handle { display: none; } .review-modal-close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1.3px solid var(--border-strong); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .review-modal-close:hover { border-color: var(--on-dark); color: var(--on-dark); } .review-modal-close svg { width: 16px; height: 16px; transition: transform 0.2s ease; } .review-modal-close:hover svg { transform: scale(1.35); } .review-modal-scroll { padding: 48px 32px 36px; } .review-modal-product { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; } .review-modal-product-media { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-sm); background: radial-gradient(circle at 30% 20%, rgba(169,136,90,0.06), transparent 70%), #5e5e5e; display: flex; align-items: center; justify-content: center; overflow: hidden; } .review-modal-product-media svg { width: 55%; height: 55%; color: var(--text-faint); } .review-modal-product h3 { color: var(--on-dark); font-size: 1.05rem; margin: 0; } .review-modal-step { text-align: center; padding-bottom: 6px; } .review-modal-prompt { color: var(--on-dark-muted); font-size: 0.9rem; margin: 0 0 18px; } .review-star-picker { display: flex; justify-content: center; gap: 10px; } .review-star-btn { background: none; border: none; padding: 0; cursor: pointer; transition: transform 0.15s ease; } .review-star-btn:hover { transform: scale(1.1); } .review-star-btn svg { width: 34px; height: 34px; fill: none; stroke: var(--on-dark-border-strong); stroke-width: 1.5px; transition: fill 0.15s ease, stroke 0.15s ease; } .review-star-btn.is-filled svg { fill: var(--title-red); stroke: var(--title-red); } /* Read-only star recap shown on the form step: same rating, no longer editable. Filled stars appear already red and pulse once together. */ .review-form-stars-wrap { position: relative; display: flex; justify-content: center; } .review-form-stars { position: relative; z-index: 2; display: flex; justify-content: center; gap: 8px; } /* These are itself) sizes with height:100%. Those percentages need a DEFINITE height to resolve against; the base rule's own height:100% only makes sense in the desktop two-column grid, and here -- a single-column grid with auto rows -- it resolves against a row this element is itself sizing, so the whole chain collapses (min-height:0 removes the last floor, and the lazy-loaded contributes no intrinsic height). The modal is full viewport width at this breakpoint (left:0;right:0), so a full-width slide is 100vw across and the box is 100vw tall. The two gray rules are added on top of that rather than taken out of it (box-sizing is border-box everywhere, so the height has to grow by their combined 2.6px) -- otherwise the photo lands 2.6px short of the square this expression exists to guarantee. */ .quick-view-media { /* Under 760px the panel is a sheet from the bottom edge and the media is the full width across its TOP, so the two corners it owns WOULD be the top pair rather than the left pair -- except that it does not own them. The handle strip is above it and is what meets the sheet's top edge, so the curve belongs there; rounding the photo as well put a second pair of curves one strip further down, in the middle of the sheet, cutting the corners off the picture against a white bar. Square, then. The bottom of the sheet is off-screen and square too, so this element rounds nothing at all. */ border-radius: 0; min-height: 0; --qv-media-rule: 1.3px; /* One rule to add back, not two: the line above the photo belongs to the strip now, so only the bottom one comes out of this box. Same reason as before -- box-sizing is border-box, so a rule eats into the square this height exists to guarantee unless the height grows by it. */ height: calc(100vw + var(--qv-media-rule)); border-top: none; border-bottom: var(--qv-media-rule) solid var(--border-strong); flex-shrink: 0; } .qv-media-slide { min-height: 0; } /* Shown on a phone too -- see the note on .review-modal-close. Above the drag handle, which is a full-width sticky bar across the top of the sheet at z-index 5: level with it, the handle took the taps meant for this. */ /* The X takes the right-hand end of the strip the drag handle sits in: a 44px square against a 44px strip, flush to the edge, with one hairline down its left running the strip's full height. No ring -- the sheet is edge to edge and square-cornered, and a pill floating in the corner read as something stuck on. Sticky, not absolute, and placed into the handle's own grid cell so it takes no row of its own. Absolute, it scrolled away with the photo the moment the sheet was dragged -- measured at -142px after a 260px scroll -- while the handle beside it stayed put. Now the two hold the top of the sheet together, which is what the strip is for. Its own ground, in the panel's colour, so the photo passing under it on a scroll does not show through the square. */ .quick-view-close { display: flex; position: sticky; /* 6px, matching the margin below -- so where it sticks and where it sits are the same place. */ top: 6px; right: auto; grid-row: 1; grid-column: 1; justify-self: end; align-self: start; /* A 40px button inside the 52px strip: 6px off the top, which centres it, and the page's own side margin off the right, so its right edge lines up with the header buttons above it and with everything else on the page. The sheet runs edge to edge, so that margin has to be said here -- it is .container's padding, restated. */ width: 40px; height: 40px; margin: 6px clamp(16px, 4vw, 64px) 0 0; z-index: 6; /* The header's icon buttons' edge and fill, drawn round rather than square. It no longer needs a rule of its own along the bottom either -- inset from the strip's edges, it stops covering the line the strip draws, so that line runs the full width on its own. */ border: 1.3px solid var(--on-dark-border-strong); border-radius: 50%; background: transparent; } /* 20px, the size the header's own button draws its X at -- the two are the same control in two places, and at the quick view's usual 16 this one read as the smaller of the pair. */ .quick-view-close svg { width: 20px; height: 20px; } .quick-view-info { max-height: none; overflow: visible; border-left: none; /* Square here. In the sheet form this half sits at the BOTTOM, and the sheet's bottom edge runs off the screen -- there is no corner of the panel for it to follow. The media half above owns the two that show. */ border-radius: 0; } .quick-view-info-scroll { padding: 32px 26px; overflow: visible; } .quick-view-scroll-cue { display: none; } } /* ---- Quick view on a narrow DESKTOP window ---- Same reasoning as the product gallery block further down: a resized desktop window still reports hover:hover / pointer:fine, a phone or tablet reports hover:none / pointer:coarse. Gating on the pointer type keeps the popup in its centered two-column desktop form at any window width on a computer, and leaves the bottom-sheet + filmstrip blocks above untouched on real touch devices. Declared after both of those blocks so it wins on source order at equal specificity. */ @media (max-width: 860px) and (hover: hover) and (pointer: fine) { /* Back to the centered dialog: equal inset on all four sides, square image column beside the info column, no sheet slide-up or page-level scrolling of the modal itself. */ .quick-view-modal { top: var(--qv-inset); right: var(--qv-inset); bottom: var(--qv-inset); left: var(--qv-inset); width: auto; max-width: none; max-height: none; grid-template-columns: min(calc(100vh - 2 * var(--qv-inset) - 2 * var(--qv-border)), 56%) 1fr; /* And its border back: that comes off only for the mobile bottom sheet. Same for the corners -- the sheet rounds its top two, the dialog is square, and this block is the dialog. */ border: var(--qv-border) solid var(--border-strong); /* Same curve as the base rule -- this block only re-states the inset geometry for a narrow window with a mouse, so it has to re-state the corner with it or the square one from further up wins. */ border-radius: var(--qv-radius); transform: scale(0.96); overflow: hidden; } .quick-view-modal.open { transform: scale(1); } .quick-view-handle { display: none; } .quick-view-close { display: flex; } /* Fills the grid column again rather than the mobile square sheet box, and drops that box's two gray rules along with it -- here the photo is bounded by the modal's own border and the info column's. */ .quick-view-media { height: 100%; /* The left half's outer corners, matching the panel's. Same reason as the base rule below -- this block re-states the inset geometry for a narrow window with a mouse, so it has to re-state this too. */ border-radius: var(--qv-radius) 0 0 var(--qv-radius); border-top: none; border-bottom: none; } /* Undo the swipe filmstrip: one absolutely-positioned slide at a time, advanced by the arrows, with click-to-zoom in place. */ .qv-media-track { display: block; overflow: visible; scroll-snap-type: none; } .qv-media-slide { position: absolute; inset: 0; display: none !important; flex: none; margin-right: 0; scroll-snap-align: none; } .qv-media-slide.is-active { display: flex !important; } .quick-view-media .qv-media-arrow { display: flex; } /* Pointer devices step with the arrows rather than swiping, so the thumbnail strip stays out -- and the product page's photos are opened by clicking them, so its tap-to-expand button does too. */ .product-detail-media .qv-media-expand { display: none; } .qv-media-thumbs { display: none; } /* Info column scrolls within its own panel again, next to the image, instead of the whole sheet scrolling as one unit. */ .quick-view-info { overflow: hidden; border-left: 1.3px solid var(--border-strong); /* The right pair, matching the panel. Same reason as the base rule. */ border-radius: 0 var(--qv-radius) var(--qv-radius) 0; } .quick-view-info-scroll { padding: 48px 64px; overflow-y: auto; } .quick-view-scroll-cue { display: flex; } .quick-view-actions { order: 4; } /* The info column gets genuinely narrow at these widths. Padding scaled back from the full-size 48/64 so the controls inside it keep a sane amount of room. */ .quick-view-info-scroll { padding: 32px 30px; } /* Stack Share under the rating rather than beside it. Side by side in a column this narrow, Share steals enough width that the score wraps onto its own line under the stars, which reads worse than simply putting the button on the next line. */ .quick-view-info .pd-rating-share-row { flex-direction: column; align-items: flex-start; gap: 10px; } } /* Desktop pointers: let the quantity input shrink inside its pill. A flex item will not go below its min-content width unless min-width is set, so in a narrow info column the number input overflows the stepper and shoves the "+" button outside the pill's border. No effect where there is room, and never matches a touch device, so mobile is unaffected. */ @media (hover: hover) and (pointer: fine) { .quick-view-actions .qty-stepper .qty-input { min-width: 0; } .product-detail-cart-row .qty-stepper .qty-input { min-width: 0; } } .product-info { padding: 14px 2px 4px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; } /* No text-transform: the names read as written in products.js -- "Summit Daypack", not "SUMMIT DAYPACK". The 0.0375em tracking is body's own, so the titles are spaced like the copy around them. */ .product-info h3 { font-size: 1rem; letter-spacing: 0.0375em; font-family: var(--font-body); font-weight: 400; } .product-info h3 a { position: relative; display: inline-block; color: var(--text-muted); transition: color 0.2s ease; } .product-info h3 a:hover { color: var(--text); } .product-info h3 a::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; background: #d6d6d6; opacity: 0; transform: translateY(-6px); transition: transform 0.3s ease, opacity 0.3s ease; } .product-info h3 a:hover::after { opacity: 1; transform: translateY(0); } .product-price { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: -2px; } .product-price .price { font-family: var(--font-body); font-size: 1.05rem; color: var(--text-muted); } .product-price:has(.price-was:not([style*="none"])) .price { color: var(--title-red); } .product-price .price-was { position: relative; display: inline-block; font-size: 0.85rem; color: var(--text-faint); text-decoration: none; } .product-price .price-was::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 1px; background: var(--title-red); transform: rotate(-12deg); } .qv-rating-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } .qv-rating-row:empty { display: none; } [data-featured-grid] .qv-rating-row { display: none; } .qv-rating-row .star-rating.is-small .star-rating-row svg { width: 15px; height: 15px; } .qv-rating-score { font-family: var(--font-body); font-size: 0.95rem; font-weight: 400; line-height: 1; color: var(--text-faint); } .qv-rating-count { font-size: 0.85rem; line-height: 1; color: var(--text-faint); } /* Stands in for the stars on a product nobody has reviewed yet. Same size and same quiet colour as the count it replaces, so the header line keeps its shape. */ .qv-rating-empty { font-size: 0.9rem; line-height: 1; color: var(--text-faint); } .pd-rating-share-row .qv-rating-empty { font-size: 1rem; } .quick-view-info .qv-rating-empty { color: var(--on-dark-faint); } .pd-rating-share-row .qv-rating-row .star-rating.is-small .star-rating-row svg { width: 20px; height: 20px; } .pd-rating-share-row .qv-rating-score { font-size: 1.2rem; font-weight: 400; } .pd-rating-share-row .qv-rating-count { font-size: 1rem; } .pd-rating-share-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pd-share-btn { display: flex; align-items: center; gap: 8px; flex-shrink: 0; border: none; background: transparent; padding: 0; font-family: var(--font-body); font-size: 1rem; color: var(--text-faint); cursor: pointer; transition: color 0.2s ease; } .pd-share-btn:hover { color: var(--text); } .pd-share-btn svg { width: 20px; height: 20px; max-width: none; flex-shrink: 0; } .quick-view-info .pd-share-btn { color: var(--on-dark-faint); } .quick-view-info .pd-share-btn:hover { color: var(--on-dark); } /* Every button on the site shares this same treatment: lighter-gray fill at rest, white text. On hover, a lighter-gray overlay sweeps in from the left, growing to fill the whole button. */ .btn-cart, .btn-tan, .btn-primary, .btn-outline, .btn-ghost, .btn-light { position: relative; isolation: isolate; background: var(--btn-white-solid); color: var(--offwhite); border: none; overflow: hidden; /* Sits outside the box, so `overflow: hidden` above does not touch it -- that clips children and backgrounds, not the shadow. */ box-shadow: var(--btn-shadow); transform: scale(1); transition: transform 0.15s ease; } .btn-cart::after, .btn-tan::after, .btn-primary::after, .btn-outline::after, .btn-ghost::after, .btn-light::after { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: calc(100% + 32px); z-index: -1; background: linear-gradient(to bottom, transparent 0px, var(--btn-gray-dark) 16px, var(--btn-gray-dark) calc(100% - 16px), transparent 100%); pointer-events: none; transform: translateY(-100%); transition: none; } .btn-cart.is-hovering::after, .btn-tan.is-hovering::after, .btn-primary.is-hovering::after, .btn-outline.is-hovering::after, .btn-ghost.is-hovering::after, .btn-light.is-hovering::after { transform: translateY(0%); transition: transform 0.22s ease; } .btn-cart.is-leaving::after, .btn-tan.is-leaving::after, .btn-primary.is-leaving::after, .btn-outline.is-leaving::after, .btn-ghost.is-leaving::after, .btn-light.is-leaving::after { transform: translateY(100%); transition: transform 0.22s ease; } .btn-cart.is-resetting::after, .btn-tan.is-resetting::after, .btn-primary.is-resetting::after, .btn-outline.is-resetting::after, .btn-ghost.is-resetting::after, .btn-light.is-resetting::after { transition: none; } /* Hero button, and Read Our Story / Learn More below: same lighter-gray resting fill / hover-sweep-from-left treatment as the outline-pill buttons above. */ .btn-hero { position: relative; isolation: isolate; background: var(--btn-white-solid); color: var(--offwhite); border: none; overflow: hidden; box-shadow: var(--btn-shadow); } .btn-hero::after { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: calc(100% + 32px); z-index: -1; background: linear-gradient(to bottom, transparent 0px, var(--btn-gray-dark) 16px, var(--btn-gray-dark) calc(100% - 16px), transparent 100%); pointer-events: none; transform: translateY(-100%); transition: none; } .btn-hero.is-hovering::after { transform: translateY(0%); transition: transform 0.22s ease; } .btn-hero.is-leaving::after { transform: translateY(100%); transition: transform 0.22s ease; } .btn-hero.is-resetting::after { transition: none; } .brand-strip .btn-hero { background: var(--btn-white-solid); color: var(--offwhite); } /* Shop the Store, in red -- the one button on the site that is not gray. Scoped to .hero, not left on .btn-hero, because that class is also on Shop All Products down in the Cut & Sewn story, which stays gray: the red is here to mark the single primary action on the page, and a second red button further down would spend exactly what this one is buying. Rest and sweep only. Everything else about the button -- the shape, the sweep's geometry and timing, the is-hovering/is-leaving classes JS puts on it -- comes from .btn-hero above and is not repeated here. */ .hero .btn-hero { background: var(--btn-red-solid); } .hero .btn-hero::after { background: linear-gradient(to bottom, transparent 0px, var(--btn-red-hover) 16px, var(--btn-red-hover) calc(100% - 16px), transparent 100%); } /* ---- About split ---- */ .split { display: grid; /* minmax(0, 1fr), never a bare 1fr. A bare 1fr is minmax(auto, 1fr), and that auto floor is the item's min-content width -- which for a cell holding a photo is the image file's own intrinsic width, several hundred pixels of it. Narrow the window past that and the floor stops the column shrinking: the two halves overflow their tracks and the photo rides over the copy beside it instead of the two staying in their columns. Here on the base rule rather than only on .about-card, which is where this was first fixed, because .about-card's layout lives inside a min-width media query and the base rule is what holds between that query's lower edge and the mobile query's upper one -- see the note on the breakpoint pair below. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; } .split .hero-actions { justify-content: flex-start; } .split-media { position: relative; /* See .split above: the track can shrink below the image's intrinsic width, and this is what lets the frame shrink with it. Without both halves the photo still spills over the copy. */ min-width: 0; aspect-ratio: 4/3; border-radius: var(--radius-lg); border: 1.3px solid var(--border); overflow: hidden; display: flex; align-items: center; justify-content: center; } /* The 35% dark wash that used to sit over every section photo is gone. It was there to settle the photo into the page; nothing is written on these, so it was only costing brightness -- which is the one thing a screen carried outdoors cannot spare. The element is kept, empty and inert, because .split-media is a positioning context that other rules paint into. */ .split-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; } .split-media svg { width: 30%; height: 30%; color: var(--rust); } .split-media img { width: 100%; height: 100%; object-fit: cover; filter: var(--reveal-from); /* The hero photo's entrance, to the value: 2.7s on the same curve for both the shrink and the lift out of black. These are the other full-bleed photographs on the site and they are as tall as the window, so they want the hero's long settle rather than the product cards' quick one -- at 1.2s the lift was over before much of the photo had come up. No transition declared here on purpose: this IS the site-wide `img` rule at the top of the file, which is the same declaration the hero carries. Restating it would be a second copy to keep in step with the first. */ } .split-media img.is-visible { filter: brightness(1); } /* is-unfiltered used to be the opt-out from the house grade. There is no house grade any more -- every photo settles at brightness(1) and its own colour -- so these two say what the rules above already say. Kept because the class still carries meaning on the frame (see below), and because a photo that wants a treatment of its own would hang it here. */ .split-media img.is-unfiltered { filter: var(--reveal-from); } .split-media img.is-unfiltered.is-visible { filter: brightness(1); } /* No scrim to drop any more -- the base ::after paints nothing. Left in place so nothing downstream can quietly give these frames one back. */ .split-media.is-unfiltered::after { content: none; } /* Square frame instead of the default 4/3 -- what the story cards use, so the photo column is exactly as tall as it is wide. The Oak Creek photo is itself square and so crops nothing at 1:1; the other two are landscape and object-fit: cover takes the difference off their sides, from the centre unless is-focus-right below says otherwise. */ .split-media.is-square { aspect-ratio: 1 / 1; } /* Wider than the base 4/3, for the home page's two story cards. A square photo half the container across made those sections enormously tall -- the photo is what sets a card's height, so the ratio is the lever. */ .split-media.is-wide { aspect-ratio: 3 / 2; } /* Pulls a wide photo's crop toward its right edge. object-fit: cover centres by default, which on the trail-cam shot cut the ringtail's tail off at the frame -- the animal is left of centre and the tail runs out to the right. */ .split-media img.is-focus-right { object-position: 78% center; } /* The vertical counterpart, and the same 78. The files these frames take are square and the frames are 4:3, so `cover` scales by the WIDTH and it is the top and bottom of the picture that go -- a band of 75% of the file survives, centred, with 12.5% cut off each end. That is the right crop for a landscape but not for a photograph with a person standing in it: Oak Creek was losing his legs below the knee to the bottom edge. 78% slides the window down to cover 19.5% - 94.5% of the file instead of 12.5% - 87.5%. The seven points it gains at the bottom are the ones with the figure in them; what it spends is sky and bare branches, which is the half of that frame with nothing in it. */ .split-media img.is-focus-low { object-position: center 78%; } /* Photo on the left, copy on the right. The two columns are already in that order in the markup, so this needs no rule on desktop -- but the single-column mobile layout should still lead with the heading, so the DOM order is flipped back below the breakpoint. */ @media (max-width: 860px) { .split.split-media-first > .split-media { order: 2; } .split.split-media-first > :not(.split-media) { order: 1; } /* Square corners on a phone, like every other photo down here -- the product cards, the gallery, the thumbnails. .split-media carries a --radius-lg frame by default and the About page's two photos were the only rounded things left on the page. Desktop drops the radius too, in the .about-card rule further down; it just did it from the other side of the breakpoint, where the photo is a panel with a seam rather than a framed picture. */ .about-card .split-media { border-radius: 0; } } .stat-row { display: flex; gap: 30px; margin-top: 24px; } .stat-row div strong { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--tan); } .stat-row div span { font-size: 0.75rem; letter-spacing: 0.08em; color: var(--text-faint); } /* ---- Ambassador / Influencer banner ---- */ .ambassador-banner { display: grid; grid-template-columns: 1fr 1fr; background: var(--forest); border-radius: var(--radius-lg); overflow: hidden; } .ambassador-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .ambassador-media img { width: 100%; height: 100%; object-fit: cover; } /* The gradient that used to darken this from 15% at the top to 55% at the bottom is gone with every other scrim on the site. The sign sitting over it carries its own drop-shadow (see below), which is what holds it against the photo -- the wash was only ever helping. */ .ambassador-media::after { content: ''; position: absolute; inset: 0; } .ambassador-sign { position: absolute; top: 50%; left: 50%; width: 62%; transform: translate(-50%, -50%) rotate(-6deg); z-index: 2; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45)); } .ambassador-sign img { width: 100%; height: auto; display: block; } .ambassador-sign-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 8%; } .ambassador-sign-text .line1 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(1.1rem, 2.6vw, 1.8rem); color: var(--offwhite); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); } .ambassador-sign-text .line2 { font-family: var(--font-body); font-size: clamp(0.62rem, 1.3vw, 0.85rem); letter-spacing: 0.15em; text-transform: uppercase; color: var(--tan-light); margin-top: 4px; } .subscribe-col { display: flex; flex-direction: column; justify-content: center; gap: 22px; } .subscribe-col h2 { color: var(--title); margin: 0; } .subscribe-col .subscribe-stack { max-width: 100%; } /* ---- Home: Free Membership ---- One centred card on the topo strip. The texture, its fade to black at the section's top and bottom edges, and the fixed-attachment parallax all belong to the SECTION (see the topo block at the end of this file); the frame and the lighter fill belong to the CARD. That split is the whole point -- the topo reads as ground the card is sitting on rather than a panel the card is part of. */ .membership-strip { /* 40px, the same as every other seam between the home page's sections. */ padding: 40px 0; /* The ground and the texture both come from the topo block at the end of the file, which this now shares with the About page's Get In Touch strip and the product page's own membership section -- so the three read as one thing across the site and there is a single place to change them. */ /* Ruled off top and bottom, so the band is closed on both sides rather than running into whatever precedes it. Safe to draw the top one here: neither section that comes before this -- the home page's stories, the store page's grid -- draws a rule underneath itself, so there is nothing for it to double up against. */ border-top: 1.3px solid var(--border); border-bottom: 1.3px solid var(--border); color: var(--on-dark); } .membership-card { max-width: 560px; margin: 0 auto; padding: 44px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; /* No fill, no frame, no radius: the copy sits straight on the band. What is left of this rule is only the measure and the centring -- and the padding, which no longer holds anything off a border and is simply the air above and below the block now. */ } .membership-card h2 { color: var(--title); margin: 0; } /* The heading centres with the card; the stack keeps the left alignment it has everywhere else, so the blurb and the two fields read the same here as they do on the other pages' sign-up. */ .membership-card .subscribe-stack { max-width: 100%; } /* ---- Brand strip ---- */ /* Same ground as About Us directly above it, and no rule between the two: they read as one run of page with two cards on it. The 40px top pairs with About Us's 40px bottom for the 80px the About page puts between its own two cards. */ .brand-strip { position: relative; isolation: isolate; overflow: hidden; background: var(--forest); color: var(--on-dark); padding: 40px 0; border-bottom: 1.3px solid var(--border); } /* The strip holds one story card now, so its copy sits on the card's own fill rather than directly on a photo or texture. The centring, the hero-style text shadows and the button's drop shadow all went with that -- they were there to lift the block off a busy background, and the flat fill needs none of it. */ .brand-strip h2 { color: var(--title); } .brand-strip p { color: var(--on-dark-muted); } .brand-strip .hero-actions { justify-content: flex-start; } /* ---- Video tutorials ---- */ .video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 36px; } .video-card { display: block; } .video-card-media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1.3px solid var(--border-strong); background: radial-gradient(circle at 30% 20%, rgba(169,136,90,0.06), transparent 70%), #5e5e5e; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s ease; } .video-card:hover .video-card-media { border-color: var(--offwhite); } .video-card-media svg:first-child { width: 56px; height: 56px; color: var(--offwhite); opacity: 0; transform: scale(1.12); transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.6s ease; } .video-card-media.is-visible svg:first-child { opacity: 0.92; transform: scale(1); } .video-card:hover .video-card-media.is-visible svg:first-child { transition: transform 0.35s ease; transform: scale(1.08); } .video-card-play { position: absolute; width: 22px; height: 22px; } .video-card-title-banner { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; background: rgba(19, 19, 19, 0.55); color: var(--offwhite); font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; line-height: 1.25; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); } .video-card h3 { margin-top: 14px; margin-bottom: 4px; font-size: 1rem; font-weight: 400; color: var(--text); } .video-card-date { display: block; font-size: 0.8rem; color: var(--text-faint); margin-top: 10px; } .video-grid-page { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } /* ---- Videos page: Filter Results as a compact anchored dropdown ---- */ .filter-sidebar-trigger { display: none; } .filter-dropdown { position: relative; display: inline-block; margin-bottom: 20px; } .filter-trigger-label-mobile { display: none; } .filter-sidebar-sort-section { display: none; } .filter-sidebar-category-section { display: none; } .store-filter-dropdown { display: none; } .filter-sidebar { background: var(--surface); border: 1.3px solid var(--border); border-radius: var(--radius); overflow: hidden; } @media (min-width: 860.02px) { .filter-sidebar-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: transparent; border: 1.3px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .filter-sidebar-trigger svg { width: 16px; height: 16px; } .filter-sidebar-trigger:hover, .filter-sidebar-trigger[aria-expanded="true"] { border-color: var(--text); } .filter-sidebar { position: absolute; top: calc(100% + 8px); left: 0; width: 300px; max-height: 70vh; overflow-y: auto; box-shadow: var(--shadow); border-color: var(--border-strong); z-index: 20; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease; } .filter-sidebar.open { opacity: 1; pointer-events: auto; transform: translateY(0); } .filter-sidebar-handle { display: none; } } .filter-sidebar-head { display: none; } /* Only the phone sheet has one -- the desktop sidebar sits in the page and has nothing to close. */ .filter-sidebar-close { display: none; } .filter-sidebar-head svg { width: 18px; height: 18px; flex-shrink: 0; } .filter-sidebar-group { padding: 18px; border-bottom: 1.3px solid var(--border); transition: background 0.2s ease; } .filter-sidebar-group:last-child { border-bottom: none; } .filter-sidebar-group:hover { background: var(--surface-2); } .filter-sidebar-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; cursor: pointer; } .filter-sidebar-group-head h4 { margin: 0; font-family: var(--font-display); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); } .filter-collapse-toggle { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; border: none; background: transparent; cursor: pointer; transform: scale(1); transition: transform 0.2s ease; } .filter-collapse-toggle svg { width: 18px; height: 18px; max-width: none; flex-shrink: 0; color: var(--offwhite); transition: transform 0.2s ease; } .filter-collapse-toggle[aria-expanded="true"] svg { transform: rotate(90deg); } .filter-sidebar-group:hover .filter-collapse-toggle { transform: scale(1.25); } .filter-sidebar-options { display: flex; flex-direction: column; gap: 12px; overflow: hidden; } .filter-sidebar-options[hidden] { display: none; } .filter-check { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--text-muted); cursor: pointer; } .filter-check input { width: 15px; height: 15px; accent-color: var(--btn-red); cursor: pointer; } .filter-check:hover { color: var(--text); } .filter-count { color: var(--text-faint); } .videos-toolbar { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1.3px solid var(--border); } .videos-showing { font-size: 0.9rem; color: var(--text-muted); } .videos-showing strong { color: var(--text); font-weight: 400; } .videos-sort-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .videos-count { font-size: 0.8rem; color: var(--text-faint); } .video-section-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; max-width: 380px; text-align: right; } .video-section-side p { margin: 0; font-size: 0.85rem; color: var(--text-muted); } .video-link-arrow:hover { color: var(--text); } .video-stack { display: flex; flex-direction: column; gap: 28px; } .video-row { display: flex; gap: 24px; } .video-row .video-card { flex: 1; min-width: 0; } .video-row .video-card-media { aspect-ratio: 16 / 10; } .video-row .video-card-title-banner { padding: 16px 18px; font-size: 1rem; line-height: 1.25; } .video-playlist { display: flex; flex-direction: column; gap: 18px; } .video-playlist-item { display: flex; align-items: center; gap: 16px; } .video-playlist-thumb { position: relative; width: 168px; flex-shrink: 0; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: radial-gradient(circle at 30% 20%, rgba(169,136,90,0.06), transparent 70%), #5e5e5e; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; } .video-playlist-item:hover .video-playlist-thumb { transform: scale(1.03); } .video-playlist-thumb svg:first-child { width: 30px; height: 30px; color: var(--offwhite); opacity: 0.92; } .video-playlist-thumb .video-card-play { position: absolute; width: 13px; height: 13px; } .video-playlist-info h3 { margin: 0 0 4px; font-size: 0.95rem; font-weight: 400; color: var(--text); } .video-modal { position: fixed; top: 50%; left: 50%; width: min(1060px, 95vw); max-height: 90vh; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); z-index: 301; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.96); transition: opacity 0.25s ease, transform 0.25s ease; } .video-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .video-modal-body { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 20%, rgba(169,136,90,0.06), transparent 70%), #5e5e5e; } .video-modal-body svg:first-child { width: 72px; height: 72px; color: var(--offwhite); opacity: 0.92; } .video-modal-body .video-card-play { position: absolute; width: 28px; height: 28px; } .video-modal .quick-view-close { opacity: 0; pointer-events: none; transition: opacity 0.4s ease, border-color 0.2s ease, color 0.2s ease; } .video-modal.show-controls .quick-view-close { opacity: 1; pointer-events: auto; } /* ---- Subscribe ---- */ .subscribe { position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark); padding: 48px 0; /* Matches the line closing the section off at the bottom, which is the footer's own border-top -- same width, same colour. */ border-top: 1.3px solid var(--on-dark-border); } /* The canyon photo and its scrim that used to sit here were replaced by the topo texture, which is painted on the section's own background instead of a pseudo-element -- background-attachment: fixed cannot survive the transform the photo's reveal animation used. Same move as .brand-strip; see the topo block at the end of this file. */ /* Same shadows the hero and the brand strip use, so the heading, blurb and button sit on the topo the way they sit on the hero photo. */ .subscribe h2 { text-shadow: 0 3px 14px rgba(0, 0, 0, 0.65); } .subscribe p { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); } /* The button's shadow is not repeated here any more -- it comes from --btn-shadow on the base rule, which is this same value. */ .subscribe-row { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; } .subscribe-heading { flex-shrink: 0; } .subscribe-heading h2 { margin: 0; white-space: normal; } .subscribe-stack { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 460px; text-align: left; } .subscribe-block { position: relative; display: flex; flex-direction: column; gap: 6px; } .subscribe-block-label { display: block; font-family: var(--font-gold); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--title-red); } .subscribe-block-desc { color: var(--on-dark-muted); font-size: 0.85rem; line-height: 1.5; margin: 0; } .subscribe-form { display: flex; width: 100%; } .subscribe-input-wrap { position: relative; width: 100%; /* Clips the arrow to the field. It slides in from translateX(12px), which puts about 7px of it past this box's right edge, and the opacity fade under the slide is only partway through by then -- so mid-transition the tip was visible outside the input. Safe to clip here, which is worth saying because the arrow sits over the field's right corner: .subscribe-form input has border-radius: 0, so this box is a plain rectangle and the glyph is cut on a straight edge rather than on a curve. If the field is ever rounded, this needs the same radius or the corner will shave the arrow. Nothing else needs to escape: the arrow is the only thing inside this wrap besides the input, and .subscribe-success is a sibling of it. The focus state sets outline: none and draws a border instead, which is inside the box and unaffected. */ overflow: hidden; } .subscribe-form input[type="email"], .subscribe-form input[type="tel"] { width: 100%; /* 52px on the right. It is not decoration: the arrow button is 38px wide sitting 8px in, so it occupies the last 46px of the field, and the text has to stop before it. 52 leaves 6px between the two. Move the button's size or its offset and this is the number that has to follow -- it has had to three times now, 34 to 44 to 48 to 52. */ padding: 8px 52px 8px 2px; border-radius: 0; border: 1.3px solid transparent; border-bottom: 1.3px solid var(--on-dark-border); background: transparent; color: var(--on-dark); transition: border-color 0.2s ease; } .subscribe-form input[type="email"]::placeholder, .subscribe-form input[type="tel"]::placeholder { color: var(--on-dark-faint); } .subscribe-form input[type="email"]:hover, .subscribe-form input[type="tel"]:hover { outline: none; border-bottom-color: var(--on-dark); } .subscribe-form input[type="email"]:focus, .subscribe-form input[type="tel"]:focus { outline: none; border: 1.3px solid var(--on-dark); } .subscribe-arrow { position: absolute; top: 50%; /* 8px in from the field's edge, up from 2px. The input's right padding below is what keeps the text clear of it and had to move with it. */ right: 8px; transform: translateY(-50%); /* 34px, up from 30 and 28 before that. The box is invisible -- transparent fill, and the border-radius: 50% below rounds nothing you can see -- so this is the pointer target and the centring frame for the glyph, nothing more. It stays a few pixels wider than the glyph so the two share a centre and the target is not exactly the artwork. */ width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; color: var(--offwhite); cursor: pointer; } /* The story buttons' arrow, at this button's size. The art in the markup is the same path on the same 34x12 viewBox that Contact Us and Learn More carry -- a long rule with a chevron on the end -- rather than the 24x24 short arrow that was here. 22px inside a 28px button, and the button is untouched. It is absolutely positioned in .subscribe-input-wrap, so its box never contributed to the field's height or width in the first place; only the art inside it has changed. The stroke is not set here and does not need to be: stroke-width 2.25 is on the path in the markup and scales with this width, which is how the hero's copy of the same arrow works. At 34px the glyph is drawn at its viewBox's own scale, so the stroke lands at 2.25px exactly -- against 1.99 at 30px, 1.72 at 26px, 1.46 at the 22px this started at, and 1.5 for the short arrow before any of it. Half again as heavy as it began. Where that leaves it: the story buttons draw this same path at 17px, so these are twice their size with twice their line weight. They are no longer the same glyph at a different size -- they are the field's own arrow, which happens to share a path with the buttons'. A fine thing to be, but worth having written down, because matching those buttons is why this art was chosen. If a size step is ever wanted WITHOUT the weight going with it, the lever is stroke-width in the markup: 2.25 * 34 / (this width) holds the line wherever the box goes, and nothing in this rule has to change for it. */ .subscribe-arrow svg { width: 34px; height: 34px; transition: transform 0.28s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.22s ease; } /* ---- It arrives with the field, not with the pointer on itself ----------- Hidden at rest and slid in from the right when the field is hovered or has focus inside it. It used to be permanently visible and nudge 3px when the pointer was on the button itself, which is a small target and the wrong one: the thing being pointed at is the input. Keyed to .subscribe-input-wrap rather than to the button. :hover on the wrap covers the whole field, and :focus-within covers the input AND the button -- so tabbing to either brings the arrow in, and it stays in while you are typing. That is what makes this work for a keyboard, where a :hover-only reveal would leave the submit control invisible. 12px of travel with an opacity fade under it. Both are needed and they do different jobs: the fade carries the last of it out of sight, and .subscribe-input-wrap clips the rest, so the arrow is never seen outside the field on its way in. The clip is on the wrap and not here -- see that rule for why it is safe there. Only where there is a real pointer. On touch there is no hover to reveal it with, and an invisible submit button that appears only after the field is tapped is worse than one that is simply there -- so the whole reveal is inside (hover: hover) and (pointer: fine), and a phone keeps the arrow showing at all times. */ @media (hover: hover) and (pointer: fine) { .subscribe-arrow svg { opacity: 0; transform: translateX(12px); } .subscribe-input-wrap:hover .subscribe-arrow svg, .subscribe-input-wrap:focus-within .subscribe-arrow svg { opacity: 1; transform: translateX(0); } /* And a further 3px left once the pointer is on the arrow itself. Two stages, and they answer two different things: the field says "there is a button here", the button says "this one". Left rather than right because it is the direction the arrow already travelled to arrive -- carrying on the way it came in reads as the same gesture continuing, where reversing it would read as a second, unrelated one. Both selectors carry the wrap as well as the button, which is what gets them past the reveal rules above: those are two classes and a pseudo-class each, so a bare .subscribe-arrow:hover would lose on specificity and nothing would move. The wrap's state is always true when the button's is -- you cannot hover the arrow without hovering the field it sits in -- so naming it costs nothing. */ .subscribe-input-wrap:hover .subscribe-arrow:hover svg, .subscribe-input-wrap:focus-within .subscribe-arrow:focus-visible svg { transform: translateX(-3px); } } @media (prefers-reduced-motion: reduce) { .subscribe-arrow svg { transition: none; } } .subscribe-success { display: none; color: var(--tan-light); font-size: 0.8rem; margin: 0; } /* ---- Footer ---- */ /* position/z-index are not layering the footer over anything -- they give it a stacking context of its own, which kept it out of the repaint region of the fixed-background section above. That section no longer uses a fixed attachment (see the topo block), so this is belt and braces now rather than load-bearing -- it costs nothing, and a footer owning its own stacking context is reasonable on its own terms. The translateZ(0) that sat here promoting it to a compositor layer is gone: that was expensive, and its reason went with the fixed layer. */ /* No rule across the top, on any page -- the same call the header's bottom border took, and for the same reason. It was a 1.3px --on-dark-border separating dark chrome from a dark page, which was its whole job. Two of the pages above it are light now, where near-black meeting white is about as clear an edge as a seam gets and a hairline over it draws a line where there is already a wall. On the rest it was doing little enough that losing it costs nothing. It is also drawn where the Free Membership band now ends. That band runs full-bleed and hard against this element, so the border was a line inside what reads as one continuous dark block at the foot of the page. border-box sizing means dropping it does not move anything: the 1.3px came out of the padding box, so the copy inside sits where it always has. */ .site-footer { position: relative; z-index: 1; color: var(--on-dark); background: var(--footer-ground); border-top: none; padding: 48px 0 21px; overflow-x: hidden; /* The other end of the same problem. The root's background now fills the canvas in --panel-head, which is right above the promo bar and wrong below the footer; this covers the bottom strip in the footer's own ground so an overshoot there comes off the footer rather than out of the bar's colour. A box-shadow rather than an element: it paints outside the border box, costs no layout, and adds nothing to the scrollable area -- so 1000px of it is free. It is not clipped by the overflow-x above either, which applies to descendants and not to the element's own shadow. */ box-shadow: 0 1000px 0 var(--footer-ground); } .footer-grid { position: relative; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; padding-bottom: 30px; } .footer-grid::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 100vw; transform: translateX(-50%); border-bottom: 1.3px solid var(--on-dark-border); } .footer-brand .footer-social { margin-top: 16px; } .footer-connect { display: none; position: relative; flex-direction: column; align-items: center; gap: 12px; flex-basis: 100%; padding-bottom: 20px; } .footer-connect-head { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.1em; color: var(--on-dark); margin: 0; } .footer-social { display: flex; gap: 10px; } /* No box round them, and the glyph carries the whole state -- the same treatment the header's three icons and the home page's hero band row take, so every set of marks on the site behaves alike. The border going is what makes the colour necessary. .icon-btn's hover was a border-color lift, which has nothing left to lift; gray to white is the pair the nav labels use and the one these now use too. */ .footer-social .icon-btn { border: none; color: var(--on-dark-muted); transition: color 0.2s ease; } @media (hover: hover) and (pointer: fine) { .footer-social .icon-btn:hover { color: var(--on-dark); } } /* The column headings -- Products, Company, Legal. A step ABOVE the links under them, which is the way round it should have been: 1rem against the 0.9rem on .footer-col a below. It was 0.8rem, so the heading was the smaller of the two and the list read as the more important half of its own column. Two things were hiding it. The heading is --on-dark against the links' --on-dark-muted, so it was brighter even while it was smaller; and it is uppercase at 0.1em, which fills more width per word than the sentence-case links do. Between them the hierarchy looked deliberate rather than inverted. 1rem, not more. --font-display is Barlow Condensed, which is narrow enough that a size step reads as less of one than it would in a normal-width face -- this is about 11% up on the links and it is the smallest step that is unmistakably a step. */ .footer-col h4 { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.1em; color: var(--on-dark); margin-bottom: 18px; } .footer-col a, .footer-col address { position: relative; display: block; width: fit-content; font-style: normal; color: var(--on-dark-muted); padding: 6px 0; font-size: 0.9rem; transition: color 0.2s ease; } /* The footer's own drop-in line, matching the header's -- see the long note on .main-nav a::after for why this slot is white again after three accent colours. A link answers the pointer the same way at either end of the page, and --footer-ground and --chrome-ground are both #141414, so the 18.4:1 up there is the figure down here too. */ .footer-col a::after { content: ''; position: absolute; left: 0; bottom: 4px; height: 1px; width: 100%; background: #ffffff; opacity: 0; transform: translateY(-10px); transition: transform 0.3s ease, opacity 0.3s ease; } .footer-col a:hover { color: var(--on-dark); } .footer-col a:hover::after { opacity: 1; transform: translateY(0); } .footer-utility { position: relative; display: grid; /* Region | copyright | badges. The copyright gets its own middle column instead of being absolutely centered, so a long badge row wraps inside its column rather than sliding under the copyright text. */ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px 24px; margin-top: 24px; font-size: 0.8rem; color: var(--on-dark-faint); } .footer-utility .region-dropdown { grid-column: 1; grid-row: 1; } .footer-utility .payment-icons { grid-column: 3; grid-row: 1; justify-content: flex-end; min-width: 0; } .footer-bottom { grid-column: 2; grid-row: 1; text-align: center; white-space: nowrap; } /* Nine badges need ~460px, which the side column only has on wide screens. Below that the copyright drops to its own line so the badges can stay on one row beside the region selector instead of wrapping around it. */ @media (min-width: 860.02px) and (max-width: 1400px) { .footer-utility { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .footer-utility .payment-icons { margin-left: auto; } .footer-bottom { order: 3; flex-basis: 100%; } } @media (max-width: 860px) { .footer-utility .payment-icons { justify-content: center; max-width: 100%; margin-inline: auto; } } /* No country picker in the footer (removed until Shopify Markets is set up): nothing is left to balance the badges against, so the row stacks and centres -- badges, then the copyright -- at every width. Keyed to the picker's absence, so putting it back restores the three-part row. */ .footer-utility:not(:has(.region-dropdown)) { display: flex; flex-direction: column; align-items: center; gap: 14px; } .footer-utility:not(:has(.region-dropdown)) .payment-icons { justify-content: center; margin-inline: auto; } .footer-utility:not(:has(.region-dropdown)) .footer-bottom { position: static; transform: none; white-space: normal; text-align: center; } /* Too narrow for one row: cap at five badges so it splits 5 + 4 rather than leaving one badge alone on a second line. */ @media (max-width: 520px) { .footer-utility .payment-icons { max-width: 252px; } } .region-dropdown { position: relative; justify-self: start; } .region-select { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--on-dark-muted); /* No box. It was 1.3px of --on-dark-border, which is #383737 -- a gray rectangle that, on a control with no fill, was the loudest thing about it and the only rectangle in either place it appears. What is left is the label and its chevron, which is how the header's three marks are drawn a few rules up and how the footer's social row is drawn beside this one. The hover is the same two values those use -- muted at rest, white under the pointer -- and it carries the whole state now that there is no edge to light. border-radius stays, doing nothing visible: it costs nothing and is the shape the control would take if a fill ever came back. The padding is kept as the click target -- a bare line of 12px type is a thin thing to hit -- but see .header-region below, where the sides come off: with no border there is nothing to hold the label away from, and that padding was reading as an uneven gap next to the icons. */ border: none; border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.78rem; font-family: var(--font-body); cursor: pointer; transition: color 0.2s ease; } .region-select svg { width: 12px; height: 12px; transition: transform 0.2s ease; } .region-select:hover { color: var(--on-dark); } .region-select[aria-expanded="true"] svg { transform: rotate(180deg); } .region-dropdown-list { position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 100%; background: var(--forest); /* No border, matching the button that opens it -- that lost its own rectangle of --on-dark-border a pass ago, and a bordered panel hanging off an unbordered control was the two halves of one thing disagreeing. What separates the panel from the page now is its fill and its shadow. The fill is the honest half of that: --forest is #131313 and flat, where everything this opens over is either photographic or textured, so the edge is legible as a change of surface rather than as a drawn line. The shadow is 0 20px 44px at 16% black, which is a soft thing to ask to hold an edge over a dark photograph -- if the panel ever reads as floating without a shape, that alpha is the value to raise, not the border to put back. */ border: none; border-radius: var(--radius-sm); padding: 6px; box-shadow: var(--shadow); z-index: 20; max-height: 260px; overflow-y: auto; } .region-dropdown-list[hidden] { display: none; } .region-dropdown-list li { position: relative; padding: 9px 12px; font-size: 0.82rem; color: var(--on-dark-muted); cursor: pointer; white-space: nowrap; transition: color 0.15s ease; } .region-dropdown-list li::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: var(--on-dark); opacity: 0; transform: translateY(-6px); transition: transform 0.3s ease, opacity 0.3s ease; } .region-dropdown-list li:hover, .region-dropdown-list li.is-active { background: transparent; color: var(--on-dark); } .region-dropdown-list li:hover::after, .region-dropdown-list li.is-active::after { opacity: 1; transform: translateY(0); } .region-dropdown-list li[aria-selected="true"] { color: var(--on-dark); font-weight: 600; } .payment-icons { justify-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .pay-badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 26px; padding: 0; border-radius: 4px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; white-space: nowrap; font-family: var(--font-body); background: var(--surface); color: var(--text-muted); border: 1.3px solid var(--border-strong); } .pay-visa { font-style: italic; } .pay-mastercard svg { width: 22px; height: 14px; display: block; } .pay-discover { font-size: 0.42rem; letter-spacing: -0.02em; } .pay-diners { font-size: 0.46rem; letter-spacing: -0.01em; } .pay-applepay { font-size: 0.46rem; letter-spacing: -0.01em; } .pay-googlepay { font-size: 0.4rem; letter-spacing: -0.02em; } .pay-paypal { font-size: 0.5rem; font-style: italic; letter-spacing: -0.01em; } .pay-shoppay { font-size: 0.46rem; letter-spacing: -0.01em; } /* ---- Page header (interior pages) ---- */ .page-header { padding: 107px 0 80px; border-bottom: 1.3px solid var(--border); background: linear-gradient(180deg, rgba(77,89,71,0.08), transparent); } /* No .page-header-product rules any more: the product page has no page header block. Its breadcrumb moved inside the gallery column so the two stick as one -- see .product-detail-sticky. This padding is the space above the breadcrumb that the page header used to provide. */ [data-product-root] { padding-top: 12px; } .page-header-store, .page-header-about, .page-header-faq, .page-header-contact, .page-header-videos { position: relative; isolation: isolate; overflow: hidden; padding: 155px 0 32px; border-bottom: 1.3px solid var(--on-dark-border); color: var(--on-dark); } /* Store, About and Contact carry a deeper photo than FAQ does, and their text sits in the bottom-left of it rather than partway down. Nearly all of the band's height is above the text, leaving just enough beneath it to clear the edge. The 360/34 split keeps the same overall depth the earlier 155/240 gave. It lines up with the page's content edge, not the viewport's, because it rides in the same .container as everything else. */ .page-header-store, .page-header-about, .page-header-contact { padding-top: 360px; padding-bottom: 34px; } /* ...and the section under it starts sooner. The shared .section 72px on top of a photo band this deep left a large empty gap between the two. */ .page-header-store + .section, .page-header-about + .section, .page-header-contact + .section { padding-top: 28px; } .page-header-store::before, .page-header-about::before, .page-header-faq::before, .page-header-contact::before, .page-header-videos::before { content: ''; position: absolute; /* -1px, not 0. This layer is scaled -- 1.28 down to 1 on the reveal -- and a transformed box lands on subpixel boundaries, so at rest it can fall a fraction short of its own edges and leave a hairline of whatever is behind it showing along the top. Behind it is .page-header's own background, a translucent olive over the page, and that hairline was invisible for as long as the page under it was near-black. It is a line across the top of the photograph on a white one. Overshooting by a pixel on every side costs nothing: the parent carries overflow: hidden, so the extra is clipped rather than drawn. */ inset: -1px; z-index: -2; background-size: cover; background-repeat: no-repeat; } /* Dead centre, and unlike the landscapes below it that is not a taste call. The bag is the subject and it sits in the middle of the frame, so the crop has to keep the middle: any offset here trades a strap end for empty ground. The square frame, uncropped and unpadded -- store-header-bag-front.jpg, 1200x1200, the photograph's own ground running edge to edge. It was store-header-bag.jpg until now: that same square padded out to 2880x1200 (2.4:1) on flat #131313, on the reasoning that a square cannot fill a band this wide without losing the top and bottom of the bag, and that the flat flanks would read as the vignette carrying on rather than as letterboxing. They do not. `cover` fits a file by whichever axis falls short, so the padding stays outside the crop only while the band is TALLER than it is wide. This band is about 470px deep, so from roughly 470px of window upward the flanks come inside it and land as two flat bars with a hard edge against the photograph's texture -- 103px a side at 700px of window, 228px a side at 950px. Above 1000px none of it was ever visible, because the two-frame treatment further down replaces the image outright; that is why this only showed on a narrowed window. The square costs what the padding was there to avoid -- at 700x470 the crop keeps the middle 67% of the frame -- but the bag sits small and centred in it, so what goes is ground rather than bag. Full width, no bars, at every size under 1000px. */ .page-header-store::before { background-image: url('../assets/images/store-header-bag-front.jpg'); background-position: center center; } .page-header-about::before { background-image: url('../assets/images/about-header-oak-creek-sunset.jpg'); background-position: center 48%; } .page-header-faq::before { background-image: url('../assets/images/faq-header-canyon.jpg'); background-position: center 55%; } /* 62%, well down from the 35% the previous photo wanted. This frame is mostly sky -- a monsoon cell over the red rock with the storm light behind it -- and the band is a wide strip, so a crop near the top would have been cloud and nothing else. Pulling it down holds the rock line and the desert floor with the weather still above them. */ .page-header-contact::before { background-image: url('../assets/images/contact-header-monsoon.jpg'); background-position: center 62%; } .page-header-videos::before { background-image: url('../assets/images/videos-header-aspen.jpg'); background-position: center 40%; } /* Page header photos settle in like the hero. The section is what carries the is-visible class, so the trigger sits on the parent and the transform on the ::before that holds the photo. */ .page-header-store::before, .page-header-about::before, .page-header-faq::before, .page-header-contact::before, .page-header-videos::before { transform: scale(1.28); filter: var(--reveal-from); transition: transform 2.7s cubic-bezier(0.16, 1, 0.3, 1), filter 2.7s cubic-bezier(0.16, 1, 0.3, 1); } .page-header-store.is-visible::before, .page-header-about.is-visible::before, .page-header-faq.is-visible::before, .page-header-contact.is-visible::before, .page-header-videos.is-visible::before { transform: scale(1); filter: brightness(1); } /* Desktop: the store band carries BOTH bag photographs, one per half, instead of the single padded one above. Two background layers on the one ::before rather than two elements. The pseudo element is already here, already the thing the reveal scales, and already sitting behind the type -- splitting it in two would mean a second element that has to be kept in step with all three. `50% auto` is what makes them fill their halves. Each frame is SQUARE, so at half the band's width it renders half the band's width TALL -- which on any desktop window is a good deal taller than the band, so each one is cropped by the band top and bottom and there is no gap anywhere. That is the zoom: the photographs are held at the size that fills the space and the band decides how much of each survives, rather than being fitted whole into a strip they do not suit. It also means the two are cropped independently, which is the reason for two positions below rather than one shared. Gated at 1000px because the trick has a floor: the squares are half the window wide, so under roughly 930px they stop being as tall as the band and bars open up above and below them. Narrower than that keeps the single padded frame, which has no such floor. */ @media (min-width: 1000px) { .page-header-store::before { background-image: url('../assets/images/store-header-bag-front.jpg'), url('../assets/images/store-header-bag-angle.jpg'); background-size: 50% auto, 50% auto; /* The front-on frame is centred in its own photograph, so it takes the middle. The angled one sits low in its frame -- the strap runs up out of the top -- so its window is pulled down to follow the bag rather than the picture. Those are the two numbers to turn if the framing wants adjusting; nothing else here is a taste call. */ background-position: left 50%, right 58%; background-repeat: no-repeat, no-repeat; } } /* No scrim on these any more either. It was 55% black across the whole band -- by some way the heaviest darkening on the site -- and the photo behind it is the first thing on the page. The element stays, empty, because these sections stack on it and because a treatment that ever comes back belongs here rather than somewhere new. */ .page-header-store::after, .page-header-about::after, .page-header-faq::after, .page-header-contact::after, .page-header-videos::after { content: ''; position: absolute; inset: 0; z-index: -1; } /* The type is white and now sits on bare photography, so it carries its own shadow -- the hero's, to the value, since the two are the same problem. A shadow darkens only the pixels behind each letter, so it buys the contrast the scrim used to and costs the photograph nothing. */ .page-header-store h1, .page-header-about h1, .page-header-faq h1, .page-header-contact h1, .page-header-videos h1 { text-shadow: 0 3px 14px rgba(0, 0, 0, 0.65), 0 1px 4px rgba(0, 0, 0, 0.5); } .page-header-store p, .page-header-about p, .page-header-faq p, .page-header-contact p, .page-header-videos p, .page-header-store .breadcrumb, .page-header-about .breadcrumb, .page-header-faq .breadcrumb, .page-header-contact .breadcrumb, .page-header-videos .breadcrumb, .page-header-store .eyebrow, .page-header-about .eyebrow, .page-header-faq .eyebrow, .page-header-contact .eyebrow, .page-header-videos .eyebrow { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.5); } .page-header-store .breadcrumb, .page-header-about .breadcrumb, .page-header-faq .breadcrumb, .page-header-contact .breadcrumb, .page-header-videos .breadcrumb { color: var(--on-dark-muted); } /* Home, on hover, over a page header's photograph. White, and it is the direction that makes it right rather than the colour. It was #7d3733, the drop's accent, and before that --tan-light. Both pointed the wrong way: the resting colour is --on-dark-muted, a near-white, so a mid-value accent could only take the link from plainly legible to barely there -- 2.2:1 on the store header's #141414, 1.7:1 on the photograph over it, against the 4.5:1 that 0.8rem text needs. The link read as going OUT under the pointer. Muted lifting to full white is the same two-tone the footer columns and the nav use, and it is the only version of this that gains contrast rather than spending it: 18.4:1 on the header's own ground. This rule is the five photo headers together -- store, about, FAQ, contact and videos -- because they have always shared one declaration and they all have the same near-white resting label on the same kind of dark photograph. The plain .breadcrumb a:hover below is a different case: those sit on a page rather than an image, and on this site's white pages white would be the invisible one. */ .page-header-store .breadcrumb a:hover, .page-header-about .breadcrumb a:hover, .page-header-faq .breadcrumb a:hover, .page-header-contact .breadcrumb a:hover, .page-header-videos .breadcrumb a:hover { color: #ffffff; } /* #ffffff, not --title. The comment up at the head of this block opens "The type is white and now sits on bare photography" -- and it was not. --title is #ececec, a near-white built for a heading on a dark PANEL, where a hair off white keeps the display size from glaring. There is no panel here. These five headings sit on a photograph with nothing under them but their own text-shadow, so the value that was buying restraint on a flat ground was only costing separation on a picture. Sampled off the store banner it read #ececec against the #ffffff the promo bar, the hero heading and the two story headings all carry -- the one white on the site that was not white. The band is the page masthead; it should not hold the dimmest heading on the page. Scoped to the banner h1 and nothing else. --title itself is untouched: it dresses every other heading on the dark pages and those all sit on panels, which is the case it was written for. */ .page-header-store h1, .page-header-about h1, .page-header-faq h1, .page-header-contact h1, .page-header-videos h1 { color: #ffffff; } /* ---- ...and the face, which was the bigger half of it ------------------- These five headings were the only display type on the site still taking the BASE h1 rule: --font-display at weight 400, 0.0375em of tracking, no text-transform, and a font-size that ran clamp(2.5rem, 4.5vw, 3.75rem) -- 45px up to 67.5px depending on the window. Every heading the pages actually show -- THE CRAFT, ABOUT US, USA SOURCED, GET IN TOUCH, FREE MEMBERSHIP -- is Barlow Condensed 700, uppercase, 2.5rem, 0.02em, 1.1. That set is written out in six places in this file by now (the home page desktop block, the narrow-desktop mirror below 860, and the membership strip in both) and it is what the client means by "the titles on the home page". Against it the banner headings read as another site: All Products, Our Story and Get In Touch came out title-case in the 400 weight, tracked nearly twice as wide, and up to half again as large. Light, airy, and wide, over a photograph -- next to a page of condensed black caps. All five values move together, because they are one type style and taking any of them alone leaves a heading that matches nothing: weight 400 -> 700 transform none -> uppercase tracking 0.0375em -> 0.02em size 45-67.5px -> 45px flat leading 1.3 -> 1.1 The size going flat is the point of the change rather than a side effect of it: 4.5vw meant the masthead was a different size in every window, and the whole run of work on this site has been the opposite -- one size at every width. 2.5rem is what the sections carry, so the banner now opens the page at the size the page continues at. The h1 keeps its own text-shadow from the rule above; that one is about sitting on a photograph and has nothing to do with the face. */ .page-header-store h1, .page-header-about h1, .page-header-faq h1, .page-header-contact h1, .page-header-videos h1 { font-family: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 700; text-transform: uppercase; font-size: 2.5rem; letter-spacing: 0.02em; line-height: 1.1; } .breadcrumb { font-size: 0.8rem; color: var(--text-faint); margin-bottom: 14px; } .breadcrumb a:hover { color: #7d3733; } /* ---- Filters (store page) ---- */ .store-toolbar-top { display: flex; justify-content: flex-end; margin-bottom: 8px; } .filter-group { display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 32px; } .filter-group h4 { font-family: var(--font-gold); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--title-red); } .filter-tabs { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; } .filter-option { position: relative; display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; border: 1.3px solid transparent; background: none; color: var(--text-muted); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease; } .filter-option input { position: absolute; width: 0; height: 0; opacity: 0; } .filter-option::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 1px; background: currentColor; opacity: 0; transform: translateY(-6px); transition: transform 0.3s ease, opacity 0.3s ease; } .filter-option:hover { color: var(--text); } .filter-option:hover::after { opacity: 1; transform: translateY(0); } .filter-option:has(input:checked) { color: var(--text); } .filter-option:has(input:checked)::after { opacity: 1; transform: translateY(0); } .store-toolbar { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1.3px solid var(--border); flex-wrap: wrap; gap: 12px; } /* Put the product count and Sort By on one row -- count left, sort right -- and tighten the vertical space they sit in. Applies at 861px+ on anything, and at any width on a pointer device, so a desktop window dragged narrow keeps this row rather than falling back to the stacked default. Real touch devices under 860px match neither arm and keep the bottom-sheet treatment. */ @media (min-width: 860.02px), (hover: hover) and (pointer: fine) { .store-toolbar-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1.3px solid var(--border); } .store-toolbar-top { margin-bottom: 0; } .store-toolbar { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } } .sort-dropdown { position: relative; } .sort-select { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; padding: 8px 2px; color: var(--text-muted); /* The same type as the View Full Details text link and the home page's two story links, which is the About Us body copy's face at the size the buttons use. Mixed case is the reason for the family: --font-display is Koulen, an uppercase-only face that renders lowercase letters as capitals, so dropping text-transform alone would have changed nothing. On the base rule rather than scoped to the store toolbar, so the videos page's identical Sort By moves with it. The touch pill further down the file keeps its own tighter uppercase type -- it matches the Filter trigger beside it, which shares that rule, and only one of the two changing would leave the pair mismatched. That rule is later at equal specificity, so it wins without needing to say so. */ font-family: var(--font-body); text-transform: none; letter-spacing: 0.0375em; font-size: 0.9375rem; font-weight: 400; white-space: nowrap; cursor: pointer; transition: color 0.2s ease; } .sort-select:hover, .sort-select[aria-expanded="true"] { color: var(--text); } .sort-select svg { width: 12px; height: 12px; transition: transform 0.2s ease; } .sort-select[aria-expanded="true"] svg { transform: rotate(180deg); } .sort-dropdown-list { position: absolute; top: calc(100% + 2px); right: 0; min-width: 190px; background: var(--surface); border: 1.3px solid var(--border-strong); border-radius: var(--radius-sm); padding: 6px; box-shadow: var(--shadow); z-index: 20; } .sort-dropdown-list[hidden] { display: none; } .sort-dropdown-handle { display: none; } .sort-dropdown-list li { position: relative; padding: 9px 12px; font-size: 0.85rem; color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .sort-dropdown-list li::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: currentColor; opacity: 0; transform: translateY(-6px); transition: transform 0.3s ease, opacity 0.3s ease; } .sort-dropdown-list li:hover, .sort-dropdown-list li.is-active { background: transparent; color: var(--text); } .sort-dropdown-list li:hover::after, .sort-dropdown-list li.is-active::after { opacity: 1; transform: translateY(0); } .sort-dropdown-list li[aria-selected="true"] { font-weight: 600; color: var(--text); } .result-count { color: var(--text-faint); font-size: 0.85rem; } @media (min-width: 1025px) { [data-store-grid], [data-related-grid] { grid-template-columns: repeat(4, 1fr); } } /* Desktop only (861px+, above the mobile breakpoint): step the store and related grids 4 -> 3 before the shared 2-column rule takes over. Higher specificity than the plain .product-grid rule at max-width:1024px so this wins in that range. */ @media (min-width: 860.02px) and (max-width: 1024px) { .product-grid[data-store-grid], .product-grid[data-related-grid] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---- FAQ accordion ---- */ .accordion-item { border-bottom: 1.3px solid var(--border); } .accordion-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 22px 0; background: none; border: none; color: var(--text); text-align: left; font-size: 1.02rem; font-weight: 600; } .accordion-trigger svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--tan); transition: transform 0.2s ease; } .accordion-item.open .accordion-trigger svg { transform: rotate(45deg); } .accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .accordion-item.open .accordion-panel { max-height: 400px; } .accordion-panel p { padding-bottom: 22px; margin: 0; } /* ---- Product detail page: color/cart sit right under the price, above the info accordion, at every viewport width -- driven by flex order on the same markup, no duplicated content. ---- */ .product-detail-info { display: flex; flex-direction: column; } .product-detail-header { order: 1; } .product-color-select { order: 2; } .product-detail-cart-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin: 24px 0; order: 3; } .product-detail-accordion { order: 4; } .qv-actions-price { font-family: var(--font-body); font-size: 1.1rem; font-weight: 400; } /* Color select, qty stepper and Add to Cart all span the full width of the info column, at every viewport width -- no "Color" label, no price next to the Add to Cart button. */ .product-color-select { flex-direction: column; align-items: stretch; gap: 8px; } .product-color-label { display: none; } .color-select-row { flex-direction: column; align-items: stretch; } .color-select-dropdown { width: 100%; } .color-select-trigger { width: 100%; height: 46px; justify-content: space-between; /* This rule is unscoped and later than the base one, so it is the radius every one of these triggers ends up with -- the product page's Select Color, the reviews toolbar's two filters, the buy bar's and the quick view popup's. One value keeps them identical by construction rather than by several that happen to match, and it is the 8px --radius rather than the base rule's smaller --radius-sm because these are 46px tall. */ border-radius: var(--radius); border-width: 1.3px; border-color: var(--border-strong); } .color-select-list { width: 100%; } .product-detail-cart-row { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 12px; } .product-detail-cart-row .qv-actions-price { display: none; } .product-detail-cart-row [data-add-to-cart-main] { width: 100%; } .product-detail-cart-row .qty-stepper { width: 100%; height: 46px; display: flex; align-items: center; justify-content: space-between; border-radius: 999px; border: 1.3px solid var(--border-strong); padding: 0 6px; } .product-detail-cart-row .qty-stepper-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; border: none; background: transparent; color: var(--text); cursor: pointer; } .product-detail-cart-row .qty-stepper-btn svg { width: 18px; height: 18px; } .product-detail-cart-row .qty-stepper .qty-input { flex: 1; width: auto; height: auto; border: none; background: transparent; } @media (max-width: 860px) { /* Under the main image, spanning its width: five squares sharing the row evenly, the fifth being the "+N" tile into the stack. Not centred with a fixed 68px each, which is the desktop column's size and left the row floating in the middle of a phone screen. */ .product-thumbs { justify-content: flex-start; } .product-thumb { width: auto; height: auto; flex: 1; aspect-ratio: 1 / 1; border-radius: 0; } /* One photo, edge to edge: square corners, a square container, and full-bleed width by cancelling out .container's own side padding. The small thumbnails below keep their rounded corners and stay inside the normal container width. Square, not the 20:17 this used to be. That ratio existed to make an 85%-wide slide crop to a 1:1 square with the next photo peeking in at the right -- the popup still works that way. Here a slide is the full width of the strip, so the container's own ratio is the photo's. */ .product-detail-media { border-radius: 0; /* No rules down the sides. The photo runs edge to edge here, so those two landed on the very edge of the screen -- a frame around something that has no frame. The top and bottom stay: those are real seams, between the photo and the breadcrumb above it and the thumbs below. */ border-left: none; border-right: none; aspect-ratio: 1 / 1; width: calc(100% + clamp(16px, 4vw, 64px) * 2); margin-left: calc(clamp(16px, 4vw, 64px) * -1); } /* A swipeable filmstrip, one photo to a screen: each slide is the full width of the track, so a swipe carries you from one photo to the next with nothing of either neighbour showing, and native scroll-snap lands it. (The quick view popup keeps the 85% slide that peeks -- there the peek is what says the popup has more photos in it, since it has no arrows and no thumb row to say so.) */ .product-detail-media-track { display: flex; overflow-x: auto; /* Explicit, and it matters: setting one axis to something other than `visible` makes the OTHER axis compute to `auto` rather than staying visible. So overflow-x: auto on its own silently made the strip vertically scrollable too, and a downward drag over the photo panned the images instead of scrolling the page. */ overflow-y: hidden; /* Both axes, not pan-x alone. This is the same trap the quick view's filmstrip fell into -- see .qv-media-track further up, which now reads the same way. pan-x does NOT hand a vertical drag to the page. It forbids one outright: the element declares that horizontal panning is the only gesture it participates in, and the browser then refuses the vertical drag rather than passing it to an ancestor. So a finger starting on a product photo could page the strip sideways and do nothing at all up or down -- the page simply would not scroll from there. overflow-y: hidden above is what stops the strip scrolling vertically itself. This line is only about which gestures the browser will route, and naming both axes lets it read the direction and give the gesture to whichever wants it: sideways to the strip, up and down to the page. */ touch-action: pan-x pan-y pinch-zoom; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .product-detail-media-track::-webkit-scrollbar { display: none; } .product-detail-media-slide { position: relative; display: flex !important; flex: 0 0 100%; scroll-snap-align: start; } .product-detail-header .product-price { align-items: baseline; gap: 8px 10px; } } /* ---- Product gallery on a narrow DESKTOP window ---- A desktop browser resized small is still a desktop: it reports hover:hover / pointer:fine, while phones and tablets report hover:none / pointer:coarse. Gating on the pointer type instead of on width alone is what lets the gallery keep its desktop behaviour at any window size on a computer while leaving the mobile filmstrip block above completely untouched on real touch devices -- width alone cannot tell the two apart, which is why this needs the pointer query. */ @media (max-width: 860px) and (hover: hover) and (pointer: fine) { /* Undo the full-bleed 20:17 filmstrip container: back to a square image inside the container, with the same static border as the desktop layout. Square corners, matching desktop. --border-strong, not --border. This rule said "the same static border as the desktop layout" and then drew it in the other token: #333332 against the #545352 the full-width rule uses, so the frame quietly darkened as you narrowed a desktop window. The comment was right and the value was wrong; the value now agrees with it. */ .product-detail-media { aspect-ratio: 1 / 1; width: auto; margin-left: 0; border-radius: 0; border: 1.3px solid var(--border-strong); } /* Undo the swipe track: show one slide at a time, stacked and absolutely positioned again, with no scroll-snap. Clicking zooms in place via initImageZoom, exactly as on the full-size desktop layout. */ .product-detail-media-track { display: block; overflow: visible; scroll-snap-type: none; } .product-detail-media-slide { position: absolute; inset: 0; display: none !important; flex: none; margin-right: 0; scroll-snap-align: none; } .product-detail-media-slide.is-active { display: flex !important; } /* No tap-to-expand affordance on a pointer device. */ [data-pd-media-expand] { display: none; } /* Thumbnails sit under the main image and span its full width -- declared for every width under 860 now, phones included, in the block above. */ /* Overview / Details / Reviews stay plain, always-open sections rather than becoming clickable dropdowns -- same as desktop. */ .product-detail-accordion .accordion-trigger { pointer-events: none; cursor: default; } .product-detail-accordion .accordion-trigger svg { display: none; } .product-detail-accordion .accordion-panel { max-height: none !important; overflow: visible; } } /* Desktop: the accordion items show as plain, always-open sections rather than clickable dropdowns -- dropdown behavior is a mobile-only ask. */ @media (min-width: 860.02px) { .product-detail-accordion .accordion-trigger { pointer-events: none; cursor: default; } .product-detail-accordion .accordion-trigger svg { display: none; } .product-detail-accordion .accordion-panel { max-height: none !important; overflow: visible; } } /* Reviews: full-width section below the gallery/info split on desktop (matches Tuff Possum Gear's layout) instead of sitting in the sticky info column's side-scroll. JS moves the same accordion-item node between this section and its normal spot in .product-detail-accordion depending on viewport width -- no duplicated markup or data hooks. */ .product-reviews-desktop-section { display: none; } @media (min-width: 860.02px) { .product-reviews-desktop-section { display: block; padding-top: 16px; } } /* The accordion-trigger's "Reviews" label is redundant here -- the panel already has its own "Reviews (n)" heading -- and it's non-interactive in this slot anyway (see the min-width:861px rule above), so just hide it rather than showing the word twice. */ [data-product-reviews-desktop-accordion] .accordion-trigger { display: none; } /* "Customer Reviews" title + divider above the bars/score boxes -- desktop-only, same node as the mobile panel so this stays hidden there instead of showing on top of its own "Reviews (n)" heading further down. */ .product-reviews-desktop-heading, .product-reviews-desktop-divider { display: none; } [data-product-reviews-desktop-accordion] .product-reviews-desktop-heading { display: block; margin: 0 0 16px; font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; color: var(--text); } [data-product-reviews-desktop-accordion] .product-reviews-desktop-divider { display: block; border-top: 1.3px solid var(--border); margin-bottom: 22px; } /* No trailing line after the last item (Details) in the info column's accordion on desktop -- the reviews section right below now starts with its own "Customer Reviews" divider instead. */ @media (min-width: 860.02px) { .product-detail-accordion .accordion-item:last-child { border-bottom: none; } } @media (max-width: 860px) { /* overflow:visible once open (not just a taller max-height) so the Sort by / rating filter dropdowns aren't clipped by this panel -- they're position:absolute popovers that render outside the panel's own in-flow content box. */ /* Generously large (not just "tall enough for the default content") so expanding Reviews via Show More -- which can add many more review cards after the panel is already open -- never gets clipped by a cap sized for the initial render. */ .product-detail-accordion .accordion-item.open .accordion-panel { max-height: 20000px; overflow: visible; } } .product-detail-accordion .accordion-panel ul { padding-bottom: 22px; margin: 0; } [data-product-specs] { padding-left: 20px; list-style: disc; } [data-product-specs] li { margin-bottom: 10px; } [data-product-specs] li:last-child { margin-bottom: 0; } /* ---- The chevrons on Overview / Details / Reviews ----------------------- The glyph in the markup is `M9 6l6 6-6 6`, which draws a chevron pointing RIGHT. It was rotate(0) closed and rotate(90deg) open -- so it read as pointing at the heading when shut and downward when open, which is the wrong way round: a closed row should point at the panel it will reveal (down) and an open one back at the heading that closes it (up). 90deg and -90deg, a half turn apart, so the transition between them is the 180deg sweep the eye reads as the row flipping rather than a quarter turn that looks like it stopped early. No media query on either. These only render on a phone -- the accordion is expanded on desktop and at narrow widths with a mouse, and both of those blocks set `display: none` on this svg -- so a rule here IS a rule for mobile. Written at the base rather than duplicated into a query, because a second copy of a value is what has gone stale in this file every time. */ /* Closed points DOWN, open points UP, and the glyph does half the work now. It was drawn right-pointing -- `M9 6l6 6-6 6`, the same chevron the gallery arrows use -- and rotated 90deg to face down, -90deg to face up. That is two rotations away from the artwork in both states, which is the kind of thing to get wrong once and never notice: the closed state looked correct, so nothing drew attention to the open one. These three triggers carry `M6 9l6 6 6-6` in the markup now, which points down as drawn, and these rules are 0 and 180. That is the pattern .contact-faq uses further down this file and has used since it was built -- the same component, the same glyph, the same pair of values -- so the two accordions on this site are one behaviour written one way rather than two descriptions of it. Only the three inside .accordion-trigger were swapped. The right-pointing path appears thirteen times in product.html -- the gallery arrows, the thumbnails, the buy bar -- and those all still mean "next". No media query. These only render on a phone: the accordion is expanded on desktop and at narrow widths with a mouse, and both of those blocks set `display: none` on this svg, so a rule here is a rule for mobile. */ /* Black, and pinned to the right edge. --offwhite is what this was, and it is the same class of mistake the SORT button had: a near-white token, drawn for the dark page this component came from, left in place when the product page went white. The chevrons were there the whole time at about 1.1:1 against the ground -- visible enough in a screenshot to be identified as gray, not visible enough to read as a control. #141414 is what every other dark-on-light mark on this page is set to. margin-left: auto is belt and braces. .accordion-trigger is already justify-content: space-between, which pushes the glyph to the right edge on its own -- but that only holds while the row has exactly two children, and the label is a bare text node rather than an element, so a third thing added to this button would quietly redistribute the space instead. An auto margin says right and keeps saying it. */ .product-detail-accordion .accordion-trigger svg { transform: rotate(0deg); color: #141414; margin-left: auto; } .product-detail-accordion .accordion-item.open .accordion-trigger svg { transform: rotate(180deg); } /* Reviews overview: three equal boxes, left to right -- the rating bars, the overall score, and the star picker that starts a review. Grid rather than flex so the three stay exactly even regardless of their content, and so the stacked state is one property change. The boxes carry the border and padding; the blocks inside them are plain. */ .product-reviews-overview { display: grid; grid-template-columns: 1fr; gap: 16px; padding-bottom: 0; } .reviews-box { display: flex; flex-direction: column; align-items: center; /* The title stays put at the top of every box; .reviews-box-body takes the rest of the height and centres its own contents in it, so the three titles line up across the row however unevenly the boxes fill. */ justify-content: flex-start; /* No shared gap: the title and subtext carry their own margins so the header reads as one tight block, and everything below it is spaced from the subtext rather than from an even gap between all three children. */ gap: 0; padding: 8px 20px; border: 1.3px solid var(--border-strong); /* Square, like the product cards' photo and Quick Add bar. Written out rather than left unsaid: --radius runs through this file as a habit, and a later rule picking it up would round these again by accident. */ border-radius: 0; } /* These two sit inside .reviews-box-body now , so the child combinator that used to reach them from .reviews-box no longer applies. */ .reviews-box-body > .rating-breakdown, .reviews-box-body > .product-reviews-summary { width: 100%; padding-bottom: 0; margin-bottom: 0; border: none; } .reviews-box-body { /* flex: 1 takes whatever height is left under the title and subtext, and centring on both axes puts the content -- the bars, the score, the star row -- in the middle of it. */ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; } /* Title and subtext both sit at the top of the box, above the body that centres whatever content the box holds. */ .reviews-box-title, .reviews-box > .reviews-box-note { flex: none; } /* One consistent step from the header block down to the content in every box, whether that content is the bars, the score, or the stars. */ .reviews-box > .reviews-box-note { margin-bottom: 6px; } .reviews-box-title { margin: 0 0 3px; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.0375em; color: var(--title); text-align: center; } .reviews-box-note { margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--on-dark-faint); text-align: center; } /* Stars sit centred under the title; the note sits under them. Hovering paints red from the left up to the star under the cursor, and turns those outlines white, so the row reads as a rating rather than one lit star. */ .review-star-picker-inline { display: flex; justify-content: center; gap: 8px; /* Fills its box so the squares below have a width to divide up. */ width: 100%; } .review-star-picker-inline[hidden] { display: none; } /* Each star sits in its own square, matching the footer's social buttons: same 1.3px --on-dark-border-strong edge, same --radius-sm corners, same transparent fill and same --on-dark on hover. */ .review-star-picker-inline .review-star-btn { display: inline-flex; align-items: center; justify-content: center; /* 56px is the cap, not the size. The column these sit in is an exact third of the row now, so five fixed squares would overflow it on a narrower window -- before, they widened the column instead, which is what made the three boxes unequal. Flexing down keeps them inside it, and aspect-ratio keeps them square while they do. */ flex: 1 1 0; max-width: 56px; height: auto; aspect-ratio: 1 / 1; padding: 0; /* --on-dark-faint, the same gray the rating snapshot's percentages use, so the two boxes' quiet type and these frames sit at one weight. */ border: 1.3px solid var(--on-dark-faint); border-radius: var(--radius-sm); background: transparent; /* No transition here: nothing about the square itself changes -- border, background and size all hold. Only the star inside it moves, and that carries its own. */ } /* No per-button scale: the whole row lights up together, so lifting only the star under the cursor would fight that. */ .review-star-picker-inline .review-star-btn:hover { transform: none; } /* Locked: the five squares look exactly as they do when they work, because this is the shape of the box, not a disabled control the eye should skip. Only the cursor changes. (A disabled button fires no pointer events, so the hover paint never runs and the stars stay gray on their own.) */ .review-star-picker-inline.is-locked .review-star-btn { cursor: default; } .review-star-picker-inline.is-locked .review-star-btn:disabled { opacity: 1; } /* Solid, and the same gray the overall-rating row uses for its empty stars (.star-rating-bg) -- the two sit side by side in that box, so they should be one colour. stroke-width: 0 is what makes a translucent colour safe here. A stroke straddles the shape's edge, so its inner half lies over the fill and two 18% layers composite to about 33% right along the border -- that is the lighter outline these had before. With no stroke width there is nothing to double up, and the colour can stay the token's own rgba rather than an opaque approximation that would only match over one backdrop. */ .review-star-picker-inline .review-star-btn svg { width: 31px; height: 31px; stroke-width: 0; fill: rgba(251, 247, 243, 0.18); stroke: rgba(251, 247, 243, 0.18); /* Restates the base rule's fill/stroke because it adds transform to the list, and `transition` is not additive -- naming one property here would drop the other two. */ transition: fill 0.15s ease, stroke 0.15s ease, transform 0.2s ease; } /* Lit: the star goes solid red and grows a little. Fill and stroke both, since it is solid now and leaving the outline gray would ring it. Colour only -- nothing grows. .is-hot runs from the left up to the hovered star, so the row lights as a group; a size change on top of that is more movement than the gesture needs. (.review-star-btn's own :hover scale is cancelled just above for the same reason.) */ .review-star-picker-inline .review-star-btn.is-hot svg { fill: var(--title-red); stroke: var(--title-red); } /* Three across only once there is room; below that they stack, and the mobile layout was already stacked. */ @media (min-width: 860.02px) { .product-reviews-overview { /* minmax(0, 1fr), not 1fr. A plain 1fr is minmax(auto, 1fr), and `auto` as a minimum means a track can refuse to shrink below its content -- so as the window narrowed, the box with the widest contents (the five star buttons) pushed its own column wider and squeezed the other two. A zero minimum holds all three to an exact third whatever is in them. The stars flex to suit -- see .review-star-picker-inline below. */ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; } /* The bars are the tallest content in the row, so they set every box's height -- tightening their gaps shortens all three. */ /* These four gaps are what set the height of all three boxes, since the bars are the tallest content in the row. */ .product-reviews-overview .rating-breakdown { justify-content: center; gap: 2px; } /* Both blocks sit a few pixels above dead centre in their box bodies -- optical centring, since the subtext above them makes exact centring read as slightly low. Relative offsets, so neither changes the row's height. */ .product-reviews-overview .rating-breakdown { position: relative; top: -6px; } .product-reviews-overview .review-star-picker-inline { position: relative; top: -8px; } .product-reviews-overview .product-reviews-summary { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; } .product-reviews-overview .product-reviews-score { font-size: 2.6rem; } .product-reviews-overview .product-reviews-summary .star-rating.is-small .star-rating-row svg { width: 26px; height: 26px; } .product-reviews-overview .product-reviews-count { font-size: 1rem; } } .product-reviews-summary { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; } .product-reviews-score { font-family: var(--font-display); font-size: 1.3rem; line-height: 1; color: var(--on-dark); } .product-reviews-score-suffix { font-family: var(--font-body); font-weight: 400; font-size: 0.5em; } .product-reviews-count { font-size: 0.82rem; line-height: 1; color: var(--on-dark-faint); } @media (max-width: 860px) { /* Border and padding live on .reviews-box now, so this only handles the stacked arrangement and the larger type. */ .product-reviews-summary { flex-direction: column; align-items: center; text-align: center; gap: 14px; } .product-reviews-score { font-size: 2.6rem; } .product-reviews-summary .star-rating.is-small .star-rating-row svg { width: 28px; height: 28px; } .product-reviews-count { font-size: 1rem; } } .rating-breakdown { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; } .rating-breakdown-row { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent; padding: 0; font: inherit; cursor: pointer; } .rating-breakdown-label { flex: 0 0 52px; text-align: left; font-size: 0.82rem; color: var(--on-dark-faint); transition: color 0.15s ease; } .rating-breakdown-track { flex: 1; height: 8px; border-radius: 999px; background: var(--on-dark-border); overflow: hidden; } .rating-breakdown-fill { height: 100%; border-radius: inherit; background: var(--title-red); transition: background 0.15s ease; } .rating-breakdown-count { flex: 0 0 32px; text-align: right; font-size: 0.82rem; color: var(--on-dark-faint); transition: color 0.15s ease; } /* A row with nothing behind it. It keeps its label, its empty track and its 0%, and loses only the pointer and the hover lift -- the :disabled:hover pairs below outrank the plain :hover rules above them on specificity, not on order. */ .rating-breakdown-row:disabled { cursor: default; } .rating-breakdown-row:disabled:hover .rating-breakdown-label, .rating-breakdown-row:disabled:hover .rating-breakdown-count { color: var(--on-dark-faint); } .rating-breakdown-row:disabled:hover .rating-breakdown-fill { background: var(--title-red); } .rating-breakdown-row:hover .rating-breakdown-label, .rating-breakdown-row:hover .rating-breakdown-count, .rating-breakdown-row.is-active .rating-breakdown-label, .rating-breakdown-row.is-active .rating-breakdown-count { color: var(--offwhite); } .rating-breakdown-row:hover .rating-breakdown-fill, .rating-breakdown-row.is-active .rating-breakdown-fill { background: #ff5347; } @media (max-width: 860px) { .rating-breakdown { gap: 4px; padding: 18px 16px; margin-bottom: 16px; border: 1.3px solid var(--border-strong); border-radius: var(--radius); } .rating-breakdown-label { flex-basis: 58px; font-size: 0.9rem; } .rating-breakdown-count { flex-basis: 38px; font-size: 0.9rem; } } .product-reviews-purchase-note { margin: 0; font-size: 0.82rem; color: var(--text-faint); } .product-reviews-heading { display: flex; align-items: baseline; gap: 6px; /* The top margin stands in for the Write a Review block that used to sit between this heading and the boxes above it. */ margin: 44px 0 16px; font-family: var(--font-body); font-size: 1.02rem; font-weight: 600; color: var(--text); } .product-reviews-heading-count { font-weight: 400; color: var(--text-faint); } .product-reviews-divider { border-top: 1.3px solid var(--border); margin-bottom: 22px; } .product-reviews-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding-bottom: 16px; } .product-reviews-toolbar[hidden] { display: none; } /* Same size/border/corner-radius as the sort and rating-filter dropdowns right below it -- .color-select-trigger is height:46px with border-radius:var(--radius), so this matches those exactly instead of its own smaller radius/padding-based height. */ .reviews-search-input { width: 100%; height: 46px; /* Right side padded clear of the icon that sits over it. */ padding: 0 40px 0 14px; border-radius: var(--radius); border: 1.3px solid var(--border-strong); background: transparent; color: var(--text); font-family: var(--font-body); font-size: 0.85rem; transition: border-color 0.2s ease; } .reviews-search-input::placeholder { color: var(--text-muted); } .reviews-search-input:focus { outline: none; border-color: var(--text); } /* The magnifier, and the clear button that replaces it the moment there is anything to clear. Both grays match the placeholder and the sort/rating chevrons beside them, so the whole toolbar reads as one row. */ .reviews-search-field { position: relative; width: 100%; /* One pair of numbers for both icons: the button is wider than the glyph, for a comfortable tap target, and is centred on the glyph's spot rather than offset into place on its own -- so nothing shifts as they swap. */ --reviews-search-glyph: 17px; --reviews-search-inset: 15px; --reviews-search-btn: 36px; } .reviews-search-icon { position: absolute; top: 50%; right: var(--reviews-search-inset); transform: translateY(-50%); width: var(--reviews-search-glyph); height: var(--reviews-search-glyph); color: var(--text-muted); pointer-events: none; } .reviews-search-clear { display: none; position: absolute; top: 50%; right: calc(var(--reviews-search-inset) - (var(--reviews-search-btn) - var(--reviews-search-glyph)) / 2); transform: translateY(-50%); width: var(--reviews-search-btn); height: var(--reviews-search-btn); align-items: center; justify-content: center; padding: 0; border: none; background: none; color: var(--text-muted); transition: color 0.2s ease; } .reviews-search-clear svg { width: var(--reviews-search-glyph); height: var(--reviews-search-glyph); } .reviews-search-clear:hover { color: var(--text); } .reviews-search-field.has-query .reviews-search-icon { display: none; } .reviews-search-field.has-query .reviews-search-clear { display: flex; } /* Desktop: search, sort, and rating filter sit in one equal-width row instead of stacking -- only stacks again if the screen gets narrow enough to fall back to the mobile layout. */ @media (min-width: 860.02px) { /* Grid, not flex: three equal columns regardless of each item's own content-based minimum width (flex:1 on all three still let the search input end up wider than the dropdowns, since flex's min-content floor doesn't apply the same way to an as it does to the dropdown buttons' text). */ .product-reviews-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; /* Matches .product-reviews-overview's gap so each control lines up with the box above it -- same columns, same gutters, same widths. */ gap: 20px; } .product-reviews-toolbar .reviews-search-field, .product-reviews-toolbar .color-select-dropdown { width: auto; min-width: 0; } } /* The closed field itself (search input, or a dropdown's collapsed trigger showing the current value) never gets a hover line. Inside the opened list, no background highlight either -- roomy padding, no rounded corners, and a line under the text (inset from the list's own edges, not touching them) that fades in while sliding down into place on hover, and fades back up when the cursor leaves -- same motion as the main nav's underline. Covers both the reviews toolbar dropdowns and the product page's Select Color dropdown. */ .quick-view-info .color-select-list, .pd-buybar-color .color-select-list, .product-reviews-toolbar .color-select-list, .product-color-select .color-select-list { padding: 0; /* No shadow. --shadow is 0 20px 44px rgba(0,0,0,0.16) -- a light-UI shadow, and these panels are near-black on a near-black page. It reads as depth nowhere and instead darkens a 20px band directly under the panel, which looks like the panel carrying on past its last row. That band is the "extra space at the bottom"; the list itself ends flush with the last item, since padding is 0 above. */ box-shadow: none; } /* Spaced like the header's Store menu, which is 0.88rem on 10px of vertical padding -- about 45px an item. These were 14px, which at 0.85rem came out near 53px and read as a looser list than the one in the nav. Matching the nav's font size as well as its padding is what makes the two identical rather than merely close. */ .quick-view-info .color-select-list li, .pd-buybar-color .color-select-list li, .product-reviews-toolbar .color-select-list li, .product-color-select .color-select-list li { position: relative; padding: 10px 14px; font-size: 0.88rem; border-radius: 0; transition: color 0.2s ease; } .quick-view-info .color-select-list li::after, .pd-buybar-color .color-select-list li::after, .product-reviews-toolbar .color-select-list li::after, .product-color-select .color-select-list li::after { content: ''; position: absolute; /* Inset to the item's own side padding, and lifted just clear of the baseline -- both follow the padding above, so they move with it. */ left: 14px; right: 14px; bottom: 4px; height: 1px; background: var(--offwhite); opacity: 0; transform: translateY(-6px); transition: transform 0.3s ease, opacity 0.3s ease; } .quick-view-info .color-select-list li:hover, .pd-buybar-color .color-select-list li:hover, .product-reviews-toolbar .color-select-list li:hover, .product-color-select .color-select-list li:hover { background: transparent; color: var(--offwhite); } .quick-view-info .color-select-list li:hover::after, .pd-buybar-color .color-select-list li:hover::after, .product-reviews-toolbar .color-select-list li:hover::after, .product-color-select .color-select-list li:hover::after { opacity: 1; transform: translateY(0); } .product-reviews-empty { margin: 0; padding-bottom: 16px; font-size: 0.9rem; color: var(--text-faint); } .product-reviews-visible-count { margin: 0 0 12px; text-align: center; font-size: 0.82rem; color: var(--text-faint); } .product-reviews-list { padding-bottom: 22px; } .product-reviews-list .qv-review-card:last-child { border-bottom: none; padding-bottom: 0; } .product-reviews-show-more { display: flex; align-items: center; justify-content: center; width: auto; margin: 4px auto 22px; padding: 10px 26px; border-radius: 999px; border: 1.3px solid var(--border-strong); background: transparent; color: var(--text); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; font-weight: 400; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .product-reviews-show-more:hover { border-color: var(--text); color: var(--text); } .product-reviews-show-more[hidden] { display: none; } /* ---- Quick view popup: same color/cart-above-info-accordion pattern as the product detail page. ---- */ .quick-view-info-scroll { display: flex; flex-direction: column; } .qv-detail-header { order: 1; } .quick-view-actions { order: 4; } @media (max-width: 860px) { .quick-view-actions { order: 3; } } .product-detail-accordion .accordion-panel .link-arrow { display: flex; width: fit-content; padding-bottom: 22px; } .product-detail-accordion .accordion-panel > p, [data-product-specs] li { color: var(--text-muted); font-size: 0.92rem; } /* ---- Contact ---- */ /* One column down the middle. The page used to be a 1fr 1fr grid with the form on the left and two info cards on the right, which spent half the width on two lines of text and left the form -- the only thing on the page anyone came to use -- squeezed into the other half. Everything is stacked now and shares one measure. 680px, not the full container. A form is read line by line like body copy, and fields running the width of a 1500px page make every label a long way from its own input. */ .contact-lead, .contact-form, .contact-direct, .contact-faq { max-width: 680px; margin-left: auto; margin-right: auto; } .contact-lead { margin-bottom: 40px; } .contact-lead p { color: var(--text-muted); margin-bottom: 14px; } .contact-lead p:last-child { margin-bottom: 0; } /* No shadow on Send Message. Every other pill on the site sits on a page or a photograph and the shadow lifts it off; this one sits at the bottom of a column of framed inputs, and against those flat panels it read as the one thing on the form trying to float. */ .contact-form .btn { box-shadow: none; } /* The "optional" tag on a label, at the label's own size but quieter -- it marks the one field that is not required without a second row of type. */ .form-optional { text-transform: none; letter-spacing: 0.02em; color: var(--text-faint); opacity: 0.75; } /* The old side column, laid flat: the two facts worth stating, in a row under the form rather than a stack beside it. Drops to one column with the rest of the page. */ .contact-direct { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 44px; } /* Before You Write, lifted off the page as its own band -- the same #1a1a1a the home page's story section carries, so the two read as the same kind of raised block rather than two lightly different greys. The class is on the SECTION, not .contact-faq, because the band has to run the full width of the window while the questions inside it stay on the 680px measure the form above them uses. .section-ruled's border-top stays. It used to be the only thing marking the start of this section, and now it draws the top edge of the band. */ .contact-faq-section { background: #1a1a1a; } /* This accordion opens with a chevron, not the tan plus-into-cross the FAQ page uses: white, pointing down when the panel is shut and up when it is open. A plus says "add", and it says it in the one accent colour on the page, which put four small red marks down a column that is otherwise type. A chevron says which way the thing is about to move and says it quietly -- the same disclosure the mobile nav's Store row uses. Scoped to .contact-faq. The FAQ page's own accordion still carries the plus; move that too if the two should match. 180deg, overriding the 45deg that turns a plus into a cross -- the markup here is a down chevron (see contact.html), so a quarter turn would leave it pointing sideways. */ .contact-faq .accordion-trigger svg { color: var(--offwhite); } .contact-faq .accordion-item.open .accordion-trigger svg { transform: rotate(180deg); } .contact-faq h2 { margin-bottom: 8px; } .contact-faq-lead { color: var(--text-muted); margin-bottom: 24px; } /* The home page's story links, not the popup's View Full Details: same body face at the button's size, an arrow after the label, and the underline that slides in on hover -- which this shares by selector further up the file rather than by a second copy of the same three rules. The arrow HOLDS STILL. It used to be a .quick-view-link, whose arrow spins a full turn on hover; that treatment is not used any more. The underline is the whole of the hover state, exactly as on the home page. */ .contact-faq-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400; letter-spacing: 0.0375em; color: var(--text-muted); transition: color 0.2s ease; } .contact-faq-more:hover { color: var(--text); } .contact-faq-more svg { width: 17px; height: 17px; flex-shrink: 0; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .form-row .form-field { margin-bottom: 0; } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; gap: 0; } .form-row .form-field { margin-bottom: 20px; } } .form-field { margin-bottom: 20px; } .form-field label { display: block; font-size: 0.78rem; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 8px; } .required-mark { color: var(--rust); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; font-size: 2.4em; line-height: 0; margin-left: 3px; vertical-align: middle; } .form-field input, .form-field textarea, .form-field select { width: 100%; padding: 13px 16px; border-radius: var(--radius-sm); border: 1.3px solid var(--border-strong); background: var(--surface); color: var(--text); transition: border-color 0.2s ease; } .form-field input:hover, .form-field textarea:hover, .form-field select:hover { border-color: var(--offwhite); } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--rust); } /* Sign In drawer only: underline-style fields, matching the email signup inputs — gray line at rest, white on hover, full white border when focused/clicked. */ .account-drawer-body .form-field input { padding: 10px 2px; border-radius: 0; border: 1.3px solid transparent; border-bottom: 1.3px solid var(--border-strong); background: transparent; } .account-drawer-body .form-field input:hover { border-bottom-color: var(--offwhite); } .account-drawer-body .form-field input:focus { border: 1.3px solid var(--offwhite); } /* Padding down from 32px and the bottom margin gone: these were sized as a stack of full-width panels down a column, and three of them across one row need to be quieter than that. The grid gap does the spacing now. */ .contact-info-card { background: var(--surface); border: 1.3px solid var(--border); border-radius: var(--radius); padding: 22px; } .contact-info-card h4 { margin-bottom: 6px; } .contact-info-card p { margin: 0; color: var(--text-muted); font-size: 0.92rem; } .contact-info-card a { color: inherit; } .contact-info-card a:hover { color: var(--text); } /* ---- Legal pages ---- */ .legal-content { max-width: 780px; } .legal-content h2 { margin-top: 2.2em; font-size: 1.3rem; } .legal-content h2:first-child { margin-top: 0; } .legal-content p, .legal-content li { color: var(--text-muted); } .legal-content ul { padding-left: 20px; list-style: disc; margin-bottom: 1em; } .legal-updated { color: var(--text-faint); font-size: 0.85rem; margin-bottom: 40px; } /* ---- Cart page layout ---- */ .cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; } @media (max-width: 860px) { .cart-layout { grid-template-columns: 1fr; } } /* ---- Cart drawer ---- */ /* 400, with the drawer at 401 -- the same tier the nav sheet and the search overlay sit on, and above the quick view at 300/301. All three are opened from the header, the header stays out from under the quick view's backdrop, so all three have to be able to arrive over it. They never contend with each other for the tier: opening any one of them closes the other two. */ /* Black at 50%, the value every other panel dims with, rather than the warm near-black this carried. And starting at the header's foot rather than the top of the window, at every width -- the same as the nav panel: the header stays lit, and its own buttons stay live while the cart is open. */ .cart-drawer-backdrop { position: fixed; inset: 0; top: var(--sheet-top); background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 400; } .cart-drawer-backdrop.open { opacity: 1; pointer-events: auto; } /* A column down the right of the page from the header's foot to the bottom of the window -- the shape the nav panel takes at a narrow width, at its own width and with its own slide in from the right. bottom: 0 with no height, so it ends where the window does whatever --sheet-top turns out to be. */ .cart-drawer { position: fixed; top: var(--sheet-top); bottom: 0; right: 0; width: 420px; max-width: 92vw; background: var(--surface); border-left: 1.3px solid var(--border); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s ease; z-index: 401; } .cart-drawer.open { transform: translateX(0); } .cart-drawer-handle { display: none; } .cart-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; border-bottom: 1.3px solid var(--border); } .cart-drawer-head .icon-btn { color: var(--text); border-color: var(--border-strong); } .cart-drawer-head .icon-btn:hover { border-color: var(--on-dark); } .cart-drawer-head .icon-btn svg { transition: transform 0.2s ease; } .cart-drawer-head .icon-btn:hover svg { transform: scale(1.35); } .cart-drawer-items { flex: 1; overflow-y: auto; padding: 16px 24px; } .cart-line { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1.3px solid var(--border); } .cart-line-media { width: 68px; height: 68px; border-radius: var(--radius-sm); background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .cart-line-media svg { width: 50%; height: 50%; color: var(--text-faint); } .cart-line-info { flex: 1; } .cart-line-info h4 { font-size: 0.92rem; margin: 0 0 4px; text-transform: none; letter-spacing: 0; font-family: var(--font-body); } /* Which size and colour this line is. Only drawn when there is something to say -- a patch comes one way and gets no label. */ .cart-line-variant { margin: -2px 0 6px; font-family: var(--font-body); font-size: 0.78rem; color: var(--text-faint); } .cart-line-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; } .cart-line-qty-stepper { display: flex; align-items: center; height: 38px; border-radius: 999px; border: 1.3px solid var(--border-strong); padding: 0 2px; flex-shrink: 0; } .cart-line-qty-stepper .qty-stepper-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border: none; background: transparent; color: var(--text); cursor: pointer; } .cart-line-qty-stepper .qty-stepper-btn svg { width: 14px; height: 14px; } .cart-line-qty-input { width: 26px; height: auto; border: none; background: transparent; padding: 0; font-size: 0.85rem; } .cart-line-price { font-family: var(--font-body); font-size: 0.92rem; margin-left: auto; } .cart-line-remove { font-size: 0.78rem; color: var(--text-faint); margin-top: 6px; display: inline-block; background: transparent; border: none; padding: 0; } .cart-line-remove:hover { color: var(--danger); } .cart-drawer-foot { padding: 22px 24px; border-top: 1.3px solid var(--border); } .cart-subtotal { display: flex; justify-content: space-between; margin-bottom: 16px; } .cart-subtotal span:last-child { font-family: var(--font-body); } .cart-empty { color: var(--text-faint); text-align: center; padding: 60px 0; } @media (max-width: 860px) { /* Each cart line in its own bordered, rounded card instead of a shared row divider — and Remove becomes a real tappable pill button instead of a bare text link. */ .cart-line { border: 1.3px solid var(--border-strong); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; } .cart-line:last-child { margin-bottom: 0; } .cart-line-remove { display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; padding: 6px 16px; border-radius: 999px; border: 1.3px solid var(--border-strong); background: transparent; color: var(--text-muted); font-family: var(--font-display); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .cart-line-remove:hover { border-color: var(--danger); color: var(--danger); } #cartDrawer { /* One rule up, so the sheet's own top border lands ON the header's rather than under it -- the same trick the quick view uses. */ top: calc(var(--sheet-top) - 1.3px); right: 0; left: 0; bottom: 0; height: auto; width: auto; max-width: none; border-left: none; /* The header's bottom border, carried on across the seam. */ border-top: 1.3px solid var(--on-dark-border); border-radius: 0; transform: translateY(100%) translateZ(0); transition: transform 0.22s ease; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } #cartDrawer.open { transform: translateY(0) translateZ(0); } /* The strip across the top, as the quick view has it: 52px tall, the grab bar centred in it, the close at its right, and one rule closing it off. The bar itself moves to a ::before so the element can be the strip. */ #cartDrawer .cart-drawer-handle { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; flex-shrink: 0; margin: 0; background: transparent; border-radius: 0; border-bottom: 1.3px solid var(--border); } #cartDrawer .cart-drawer-handle::before { content: ''; width: 44px; height: 5px; border-radius: 3px; background: var(--border-strong); } /* Lifted out of the head and into the strip above it, which leaves Your Cart on its own below the rule. Absolute against the drawer, which is fixed, so it sits in the strip without being a child of it -- the markup is the same on eleven pages and this is one rule instead. */ #cartDrawer .cart-drawer-head .icon-btn { display: inline-flex; position: absolute; top: 6px; right: clamp(16px, 4vw, 64px); width: 40px; height: 40px; border-radius: 50%; z-index: 6; } #cartDrawer .cart-drawer-head .icon-btn svg { width: 20px; height: 20px; } } /* ---- Mobile nav bottom sheet ---- */ .mobile-nav-backdrop, .sort-dropdown-backdrop, .filter-sidebar-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 300; } .mobile-nav-backdrop.open, .sort-dropdown-backdrop.open, .filter-sidebar-backdrop.open { opacity: 1; pointer-events: auto; } /* The sheet itself never moves and never gets a transform: it's a static "porthole" that just provides the rounded-corner clip. The .open toggle from JS still lands here (so nothing else in the codebase needs to know about the split), but the actual slide-up transform lives one level down on .mobile-nav-sheet-inner. Putting both the rounded-corner overflow:hidden clip AND the sliding transform on the same element is exactly the combination that made Safari/Chrome show a trailing seam along the clip mask mid-animation; splitting them onto two elements avoids it entirely. */ /* Above every other sheet, and that is the whole reason for the number. The header stays out from under the backdrops now, so its buttons are live while something else is open -- and the menu one of those buttons opens has to arrive on top of whatever it was opened over, the quick view included. Anything level with it would be decided by document order instead, and the quick view sits later in the markup. Still under the two full-screen photo viewers at 600 and the review sheet at 700: those cover the header, so the button is not reachable while they are up. */ .mobile-nav-backdrop { z-index: 400; } .mobile-nav-sheet { /* Up to the foot of the header, not an arbitrary tenth of the window: at 10% the sheet stopped wherever it happened to stop, which on a tall phone left a band of dimmed page above it and on a short one ran under the header. */ position: fixed; left: 0; right: 0; bottom: 0; top: var(--sheet-top); /* Square. These meet the header's own edge and fill the width of the screen -- a rounded top corner would be a card's tell on something that is not a card. */ border-radius: 0; z-index: 401; overflow: hidden; pointer-events: none; } .mobile-nav-sheet.open { pointer-events: auto; } .mobile-nav-sheet-inner { height: 100%; /* No rule along the top: the sheet meets the header's own bottom edge, and two lines a pixel apart read as a seam rather than an edge. */ background: var(--forest); display: flex; flex-direction: column; transform: translateY(100%) translateZ(0); transition: transform 0.22s ease; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .mobile-nav-sheet.open .mobile-nav-sheet-inner { transform: translateY(0) translateZ(0); } /* The strip across the top of the sheet, built the way the quick view's and the review sheet's are: a full-width bar with the grab bar centred in it and a rule closing it off, rather than a lone pill floating on some margin. The bar is the ::before, so the strip itself is a box with a height to give the pill its air -- which is what makes this read as the head of the sheet. 52px and centred, matching the quick view's strip. That one is 52 because it is also the box its X sits in; there is no X here -- this sheet is dismissed by the header's own toggle and by the backdrop -- but the height is what the two have in common visually, so it stays. No sticky and no background of its own, which the other two both need: they sit INSIDE their scrolling panel, and this is a flex sibling above .mobile-nav-list, so it is already outside everything that scrolls. */ .mobile-nav-handle { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; flex-shrink: 0; /* The sheet's own divider, the same rule that runs between the nav rows below it -- not the quick view's --border-strong, which is the light context's line and would be the one bright edge in here. */ border-bottom: 1.3px solid var(--on-dark-border); } .mobile-nav-handle::before { content: ''; width: 44px; height: 5px; border-radius: 3px; background: var(--on-dark-border-strong); } .mobile-nav-list { flex: 1; overflow-y: auto; padding: 8px 24px 24px; } .mobile-nav-link { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; box-shadow: 0 1.3px 0 0 var(--on-dark-border); padding: 16px 0; font-family: var(--font-display); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--on-dark); text-align: left; } .mobile-nav-plus { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; } .mobile-nav-plus svg { width: 18px; height: 18px; color: var(--offwhite); transition: transform 0.2s ease; } /* Pointing down at rest and flipping up when the Store list is out -- the usual way a disclosure says which way it is about to move. It used to go right-to-down, which said something was coming but not which direction it would leave in. The icon is drawn pointing RIGHT, so neither state is its natural one: the two are a quarter turn either side of it. Rotating the drawing rather than swapping the path keeps the flip animatable -- transform tweens, `d` does not -- and the same span is the only chevron in this sheet, so nothing else is riding on its resting angle. */ .mobile-nav-plus svg { transform: rotate(90deg); } [data-mobile-nav-toggle-store][aria-expanded="true"] .mobile-nav-plus svg { transform: rotate(-90deg); } .mobile-nav-submenu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; display: flex; flex-direction: column; } .mobile-nav-submenu.open { max-height: 320px; } .mobile-nav-sublink { padding: 12px 0 12px 16px; font-family: var(--font-body); font-size: 0.92rem; color: var(--on-dark-muted); border-bottom: 1.3px solid var(--on-dark-border); } .mobile-nav-sublink:hover { color: var(--on-dark); } .mobile-nav-foot { padding: 20px 24px 28px; flex-shrink: 0; display: flex; flex-direction: column; gap: 18px; } .mobile-nav-region.region-dropdown { justify-self: auto; } .mobile-nav-social { display: flex; gap: 10px; } .mobile-nav-login { display: flex; align-items: center; gap: 10px; background: none; border: none; color: var(--on-dark); padding: 0; font-family: var(--font-display); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; } .mobile-nav-login svg { width: 20px; height: 20px; } /* ---- Search overlay ---- */ /* Same tier as the cart and the nav, and for the same reason -- see the note on .cart-drawer-backdrop. Black at 50%, the value the nav and filter sheets dim with, rather than the warm near-black this used to carry. Everything under the search bar is meant to read as put aside while you type, and it should look the same as it does under every other panel the header opens. Full height on purpose, unlike those two: the bar slides down over the header, so there is no header left showing to keep bright. */ .search-overlay-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 400; } .search-overlay-backdrop.open { opacity: 1; pointer-events: auto; } .search-overlay { position: fixed; top: 0; left: 0; right: 0; background: var(--surface); border-bottom: 1.3px solid var(--border); box-shadow: var(--shadow); transform: translateY(-100%); transition: transform 0.3s ease; z-index: 401; padding: 28px 0; max-height: 80vh; overflow-y: auto; } .search-overlay.open { transform: translateY(0); } .search-input-row { display: flex; align-items: center; gap: 14px; border-bottom: 1.3px solid var(--border-strong); padding-bottom: 16px; } .search-input-icon { width: 22px; height: 22px; color: var(--text-faint); flex-shrink: 0; } .search-input-row .icon-btn svg { transition: transform 0.2s ease; } .search-input-row .icon-btn:hover svg { transform: scale(1.35); } .search-input-row input { flex: 1; border: none; outline: none; background: none; font-family: var(--font-display); font-size: 1.4rem; color: var(--text); } .search-input-row input::placeholder { color: var(--text-faint); } .search-results { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; } .search-result-item { display: flex; flex-direction: column; gap: 8px; color: var(--text); } .search-result-media { aspect-ratio: 1; background: var(--surface-2); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; overflow: hidden; } .search-result-media svg { width: 40%; height: 40%; color: var(--text-faint); } .search-result-item h4 { margin: 0; font-size: 0.92rem; font-weight: 400; font-family: var(--font-display); } .search-result-item .price { font-size: 0.85rem; color: var(--text-muted); } .search-empty { color: var(--text-faint); padding: 12px 0; font-size: 0.9rem; } /* ---- Account drawer ---- */ .account-drawer-body { padding: 24px; } .account-alt { margin-top: 18px; font-size: 0.85rem; color: var(--text-faint); text-align: center; } .account-alt a { color: var(--text-faint); text-decoration: underline; transition: color 0.2s ease; } .account-alt a:hover { color: var(--on-dark); } /* ---- Back to top ---- */ .back-to-top { position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-2); color: var(--offwhite); border: 1.3px solid var(--on-dark-border-strong); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(26, 26, 26, 0.25); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.2s ease; z-index: 150; cursor: pointer; } .back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { border-color: var(--on-dark); } .back-to-top svg { width: 20px; height: 20px; } /* ---- Utilities ---- */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .badge-row { display: flex; gap: 10px; flex-wrap: wrap; } /* ---- Responsive ---- */ @media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: 1fr 1fr; } .video-grid { grid-template-columns: 1fr 1fr; } .video-grid-page { grid-template-columns: 1fr 1fr; } .video-section-split { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 640px) { .video-grid, .video-grid-page { grid-template-columns: 1fr; } } @media (max-width: 860px) { .main-nav { display: none; } .header-inner { grid-template-columns: auto auto; justify-content: space-between; } .nav-toggle { display: inline-flex; order: 3; } .header-actions [data-open-search] { order: 1; } .header-actions [data-open-cart] { order: 2; } .header-actions [data-open-account] { display: none; } .split { grid-template-columns: 1fr; gap: 24px; } .ambassador-banner { grid-template-columns: 1fr; } /* The contact page is a single centred column at every width now, so there is no two-up grid left to collapse -- .contact-grid is gone. What does need collapsing is the row of three info cards under the form. */ .contact-direct { grid-template-columns: 1fr; gap: 12px; } .membership-card { padding: 32px 22px; } .hero-stats { position: static; margin-top: 30px; justify-content: center; } /* The gutter again, for the reason the base rule restates it: this is a shorthand and `0` on the sides was harmless while the copy was a centred column inside a 780px cap. Ranged left, it put the headline flush against the window edge at every width under 860. */ .hero-content { padding: 42px var(--page-gutter); } } @media (max-width: 640px) { :root { --header-h: 78px; } .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .footer-grid { grid-template-columns: 1fr; gap: 0; } .section { padding: 64px 0; } [data-product-root] { padding-top: 12px; } .subscribe { padding: 28px 0; } .subscribe-row { gap: 20px; } .subscribe-stack { max-width: 100%; } .subscribe-heading h2 { white-space: normal; } .hero-actions { flex-direction: column; align-items: center; } .section-head { flex-direction: column; align-items: flex-start; } .video-section-side { align-items: flex-start; text-align: left; max-width: 100%; } .footer-grid { padding-bottom: 0; } .footer-utility { flex-direction: column; justify-content: center; gap: 16px; margin-top: 20px; } .footer-bottom { text-align: center; white-space: normal; } .footer-social { justify-content: center; } } /* Touch devices fire :hover on tap and it sticks until you tap elsewhere, which makes the desktop hover effects look glitchy/stuck on mobile. Neutralize the button hover effects specifically for touch. */ @media (hover: none) { .btn-cart:hover, .btn-tan:hover, .btn-primary:hover, .btn-outline:hover, .btn-ghost:hover, .btn-light:hover, .btn-hero:hover, .brand-strip .btn-hero:hover, .cart-overlay-btn:hover { background: var(--btn-white-solid); color: var(--offwhite); } .icon-btn:hover, /* The phone's border-color hover is gone with the border itself -- see .footer-social .icon-btn up the file. */ .cart-drawer-head .icon-btn:hover { border-color: var(--border-strong); } .cart-drawer-head .icon-btn:hover svg, .search-input-row .icon-btn:hover svg { transform: none; } .product-media-wrap:hover .product-media-link svg, .product-card:focus-within .product-media-link svg { transform: none; } /* Not `none` like its siblings: the photo's resting scale is the seam overfill, not a hover effect, so it has to survive here -- zeroing it would open the seam back up and jump the photo by 1% on every tap. */ .product-media-wrap:hover .product-media-link img { transform: scale(1.01); } .quick-view-close:hover { border-color: var(--border-strong); color: inherit; } .quick-view-close:hover svg { transform: none; } .qv-media-arrow:hover { border-color: var(--border-strong); color: var(--text); } .qv-media-arrow:hover svg { transform: none; } .quick-view-link:hover, .link-arrow:hover, .video-link-arrow:hover { color: inherit; } .quick-view-link:hover svg, .link-arrow:hover svg, .subscribe-arrow:hover svg { animation: none; } /* A tap would otherwise leave the underline down until the next one. */ .quick-view-info .quick-view-link-full:hover span::after, .home-story-copy .story-cta:hover span::after { opacity: 0; transform: translateY(-10px); } .product-info h3 a:hover::after { opacity: 0; transform: translateY(-10px); } .video-card:hover .video-card-media { border-color: var(--border-strong); } .video-card:hover .video-card-media.is-visible svg:first-child { transform: none; } .footer-col a:hover { color: var(--on-dark-muted); } .footer-col a:hover::after { opacity: 0; transform: translateY(-10px); } .region-select:hover { color: var(--on-dark-muted); } .region-dropdown-list li:hover { background: transparent; color: inherit; } .region-dropdown-list li:hover::after { opacity: 0; } .breadcrumb a:hover { color: inherit; } .filter-option:hover { color: var(--text-muted); } .filter-option:hover::after { opacity: 0; transform: translateY(-6px); } .sort-dropdown-list li:hover { background: transparent; color: inherit; } .sort-dropdown-list li:hover::after { opacity: 0; } .cart-line-remove:hover { color: var(--text-faint); } .mobile-nav-sublink:hover { color: var(--on-dark-muted); } .account-alt a:hover { color: var(--text-faint); } } /* Static solid light-gray fill + black text for the outline-pill buttons on mobile -- there's no hover on a phone, so the rest-state fill from the desktop rules above already applies and just needs to stay put (no hover/click fill-change on mobile). Gated on (hover: none) as well as width, because "no hover on a phone" is the actual condition this block is describing. A desktop window resized under 860px still has a mouse, and width alone was flattening every button's hover state there. Phones and tablets always match hover:none, so their rendering is unchanged. */ @media (max-width: 860px) and (hover: none) { .btn-cart::after, .btn-tan::after, .btn-primary::after, .btn-outline::after, .btn-ghost::after, .btn-light::after, .btn-hero::after, .brand-strip .btn-hero::after, .cart-overlay-btn::after { content: none; } .btn-cart:hover, .btn-tan:hover, .btn-primary:hover, .btn-outline:hover, .btn-ghost:hover, .btn-light:hover { background: var(--btn-white-solid); color: var(--offwhite); } .btn-cart:active, .btn-tan:active, .btn-primary:active, .btn-outline:active, .btn-ghost:active, .btn-light:active { filter: none; } /* There used to be a second gray here. Shop All Products, the brand strip's button and Quick Add were lifted to --btn-gray-dark (#5c5c5c) on touch, on the reasoning that with no hover to reach the lighter fill they should just sit on it -- while every other button rested on --btn-white-solid (#404040). So a phone showed two grays, and the story carousel showed both of them a few lines apart: Learn More dark, Shop All Products light. It was also self-contradictory. The (hover: none) block further up sets these same three back to #404040 on tap, so they rested light and went dark when touched -- the opposite way round from every other button. Removed, so all of them rest on --btn-white-solid, tap on it, and match what they rest on with a mouse. One gray on the phone. */ /* Shop the Store is the exception and always was: it holds its resting red rather than any gray. The ::after is already gone -- the rule at the top of this block drops it for every .btn-hero -- so this is the whole button. */ .hero .btn-hero, .hero .btn-hero:hover { background: var(--btn-red-solid); color: var(--offwhite); } } /* ---- Store toolbar (mobile): category pills and sort merge into one Filter & Sort bottom sheet, same pattern as the videos page ---- */ @media (max-width: 860px) { .filter-group { display: none; } } /* Swapping the Sort By dropdown for the Refine bottom sheet is a TOUCH treatment, not a narrow-window one. A desktop browser dragged below 860px still reports hover:hover / pointer:fine, and there it should keep the desktop toolbar -- the sheet is built for thumbs, and it turned up on the desktop store any time the window got small. Width alone can't tell the two apart; the pointer media features can. */ @media (max-width: 860px) and (hover: none) and (pointer: coarse) { .store-filter-dropdown { display: block; margin-bottom: 0; } .store-toolbar-wrap { display: flex; flex-direction: column; align-items: center; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1.3px solid var(--border); } .store-toolbar { display: none; } .store-toolbar-top { justify-content: center; margin: 0; } .sort-dropdown-list { /* Content-height, so it has no top edge to place -- but it can never reach past the header either. */ position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: calc(100vh - var(--sheet-top)); max-height: calc(100dvh - var(--sheet-top)); background: var(--forest); border: none; border-radius: 0; padding: 8px 24px 28px; box-shadow: none; z-index: 301; max-height: none; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.22s ease; } .sort-dropdown-list[hidden] { display: flex; } .sort-dropdown-list:not([hidden]) { transform: translateY(0); } .sort-dropdown-list .sort-dropdown-handle { display: block; width: 44px; height: 5px; padding: 0; border-radius: 3px; flex-shrink: 0; background: var(--on-dark-border-strong); margin: 12px auto 8px; pointer-events: none; } .sort-dropdown-list .sort-dropdown-handle::after { content: none; } .sort-dropdown-list li[role="option"] { padding: 16px 0; border-bottom: 1.3px solid var(--on-dark-border); color: var(--on-dark-muted); font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.04em; background: transparent; } .sort-dropdown-list li[role="option"]::after { display: none; } .sort-dropdown-list li[aria-selected="true"] { color: var(--on-dark); font-weight: 600; } } /* ---- Videos page (mobile): Filter Results becomes a bottom sheet too, and Sort merges into that same sheet as a second section (see JS: the real sort-dropdown-list gets moved into filter-sidebar-sort-section, its own trigger button/backdrop are just hidden here). ---- */ @media (max-width: 860px) and (hover: none) and (pointer: coarse) { .filter-trigger-label-desktop { display: none; } .filter-trigger-label-mobile { display: inline; } .filter-dropdown { display: block; margin-bottom: 0; } .filter-sidebar-trigger, .sort-select { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; min-width: 180px; margin: 0 auto; padding: 11px 18px; background: transparent; border: 1.3px solid var(--border-strong); border-radius: 999px; color: var(--text); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; font-weight: 600; } .filter-sidebar-trigger { margin-bottom: 20px; } .filter-sidebar-trigger svg { display: block; width: 15px; height: 15px; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); } .sort-select svg { display: none; } .sort-select:hover, .sort-select[aria-expanded="true"] { color: var(--text); } .videos-showing { display: none; } .videos-toolbar { justify-content: center; } .videos-sort-col { align-items: center; } .videos-sort-col .sort-dropdown { display: none; } .store-toolbar .sort-select { margin: 0 auto; } .filter-sidebar { /* One rule up, so its top border lands on the header's -- see #cartDrawer. */ position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--sheet-top) - 1.3px); margin-top: 0; background: var(--forest); border: none; border-top: 1.3px solid var(--on-dark-border); border-radius: 0; z-index: 301; display: flex; flex-direction: column; transform: translateY(100%) translateZ(0); transition: transform 0.22s ease; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .filter-sidebar.open { transform: translateY(0) translateZ(0); } /* The same strip the cart and the quick view carry -- see #cartDrawer. */ .filter-sidebar-handle { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; flex-shrink: 0; margin: 0; background: transparent; border-radius: 0; border-bottom: 1.3px solid var(--on-dark-border); } .filter-sidebar-handle::before { content: ''; width: 44px; height: 5px; border-radius: 3px; background: var(--on-dark-border-strong); } .filter-sidebar-head { background: transparent; color: var(--on-dark); padding: 8px 24px 12px; } /* The one sheet with no close of its own. Same circle, same size and same place in the strip as the quick view's. */ .filter-sidebar-close { position: absolute; top: 6px; right: clamp(16px, 4vw, 64px); width: 40px; height: 40px; border-radius: 50%; border: 1.3px solid var(--on-dark-border-strong); background: transparent; color: var(--on-dark); display: flex; align-items: center; justify-content: center; z-index: 6; } .filter-sidebar-close svg { width: 20px; height: 20px; } .filter-sidebar-group { padding: 14px 24px; border-bottom-color: var(--on-dark-border); overflow-y: auto; } .filter-sidebar-group-head h4 { color: var(--title); } .filter-check { color: var(--on-dark-muted); } .filter-check:hover { color: var(--on-dark); } .filter-count { color: var(--on-dark-muted); } /* Sort section — visually set apart from Filter above it with a divider and its own label, so the two stay distinct inside one merged sheet. */ /* No border-top: it used to divide this section from the Category list above it, and with that list gone it was just a line under the header. */ .filter-sidebar-sort-section { display: block; padding: 18px 24px 24px; } .filter-sidebar-sort-label { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 12px; } .filter-sidebar-sort-section .sort-dropdown-list { position: static; transform: none; background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; max-height: none; display: flex; flex-direction: column; gap: 2px; } .filter-sidebar-sort-section .sort-dropdown-handle { display: none; } .filter-sidebar-sort-section .sort-dropdown-list li[role="option"] { position: relative; padding: 10px 36px 10px 12px; border-bottom: none; border-radius: var(--radius-sm); background: transparent; color: var(--on-dark-muted); font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.04em; } .filter-sidebar-sort-section .sort-dropdown-list li[role="option"]::after { content: ''; display: block; position: absolute; left: auto; right: 12px; bottom: auto; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 13l4 4L19 7' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; opacity: 0; } .filter-sidebar-sort-section .sort-dropdown-list li[aria-selected="true"] { background: rgba(251, 247, 243, 0.08); color: var(--on-dark); font-weight: 600; } .filter-sidebar-sort-section .sort-dropdown-list li[aria-selected="true"]::after { opacity: 1; } /* Store page: Category is single-select — All Products, Bags & Pouches, Accessories, or Merch, never combined — styled to match Sort By. */ .filter-sidebar-category-section { display: block; padding: 18px 24px; border-bottom: 1.3px solid var(--on-dark-border); } .filter-sidebar-category-label { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 12px; } .filter-sidebar-category-list { display: flex; flex-direction: column; gap: 2px; } .filter-sidebar-category-option { position: relative; display: block; width: 100%; padding: 10px 36px 10px 12px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--on-dark-muted); font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; text-align: left; cursor: pointer; } .filter-sidebar-category-option:hover { color: var(--on-dark); } .filter-sidebar-category-option::after { content: ''; display: block; position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 13l4 4L19 7' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; opacity: 0; } .filter-sidebar-category-option.is-active { background: rgba(251, 247, 243, 0.08); color: var(--on-dark); font-weight: 600; } .filter-sidebar-category-option.is-active::after { opacity: 1; } } /* ---- Mobile slide-up sheets: staggered text entrance ---- */ @media (max-width: 860px) { @keyframes nav-row-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Every row starts at 0.22s, matching each sheet's own 0.22s slide-up transition, so the text entrance begins right as the sheet arrives at the top, not while it's still moving. Each subsequent row in the list adds another 0.03s on top of that, covering every row via nth-child (see tiers below), not just the first few. Deliberately scoped to '.filter-sidebar.open'/ '.mobile-nav-sheet.open' only (no standalone '.sort-dropdown-list:not([hidden])' fallback): that selector used to also match here once the sort list got merged into the filter sheet and un-hidden by JS, which made the Sort rows' entrance fire once on page load (immediately, before the sheet was ever opened) instead of when the sheet actually opens, so by the time a user opened it the animation had already long since finished. A vertical fade+drop was used everywhere (rather than an earlier horizontal slide) because on the header nav list, translateX on .mobile-nav-link rows -- combined with the row's box-shadow divider and the sheet's own overflow:hidden clip -- produced a visible trailing seam/line during the horizontal motion. The vertical version avoids that clip-boundary crossing entirely, so it's used for all of these sheets rather than just the one that showed the bug. */ .filter-sidebar.open .filter-sidebar-group, .filter-sidebar.open .filter-sidebar-category-list .filter-sidebar-category-option, .filter-sidebar.open .filter-sidebar-sort-section .sort-dropdown-list li[role="option"], .mobile-nav-sheet.open .mobile-nav-list > * { animation: nav-row-fade-in 0.22s ease both; animation-delay: 0.22s; } /* .filter-sidebar-group and the sort list's own drag-handle are leading siblings ahead of the rows we're animating, so those rows land on nth-child(3+) and nth-child(2+) respectively, offsets below are tuned to each list's real DOM position, not a plain 1-based count. The sort section merged inside the filter sheet (mobile videos.html) never toggles its own [hidden] after the initial merge, it's gated by .filter-sidebar.open instead, same as the category list. */ .filter-sidebar.open .filter-sidebar-group:nth-child(4), .filter-sidebar.open .filter-sidebar-category-list .filter-sidebar-category-option:nth-child(2), .filter-sidebar.open .filter-sidebar-sort-section .sort-dropdown-list li[role="option"]:nth-child(3), .mobile-nav-sheet.open .mobile-nav-list > *:nth-child(2) { animation-delay: 0.25s; } .filter-sidebar.open .filter-sidebar-group:nth-child(5), .filter-sidebar.open .filter-sidebar-category-list .filter-sidebar-category-option:nth-child(3), .filter-sidebar.open .filter-sidebar-sort-section .sort-dropdown-list li[role="option"]:nth-child(4), .mobile-nav-sheet.open .mobile-nav-list > *:nth-child(3) { animation-delay: 0.28s; } .filter-sidebar.open .filter-sidebar-group:nth-child(6), .filter-sidebar.open .filter-sidebar-category-list .filter-sidebar-category-option:nth-child(4), .filter-sidebar.open .filter-sidebar-sort-section .sort-dropdown-list li[role="option"]:nth-child(5), .mobile-nav-sheet.open .mobile-nav-list > *:nth-child(4) { animation-delay: 0.31s; } .filter-sidebar.open .filter-sidebar-group:nth-child(7), .filter-sidebar.open .filter-sidebar-category-list .filter-sidebar-category-option:nth-child(5), .filter-sidebar.open .filter-sidebar-sort-section .sort-dropdown-list li[role="option"]:nth-child(6), .mobile-nav-sheet.open .mobile-nav-list > *:nth-child(5) { animation-delay: 0.34s; } .filter-sidebar.open .filter-sidebar-group:nth-child(8), .filter-sidebar.open .filter-sidebar-category-list .filter-sidebar-category-option:nth-child(6), .filter-sidebar.open .filter-sidebar-sort-section .sort-dropdown-list li[role="option"]:nth-child(7), .mobile-nav-sheet.open .mobile-nav-list > *:nth-child(6) { animation-delay: 0.37s; } .filter-sidebar.open .filter-sidebar-group:nth-child(9), .filter-sidebar.open .filter-sidebar-category-list .filter-sidebar-category-option:nth-child(7), .filter-sidebar.open .filter-sidebar-sort-section .sort-dropdown-list li[role="option"]:nth-child(8), .mobile-nav-sheet.open .mobile-nav-list > *:nth-child(7) { animation-delay: 0.4s; } .filter-sidebar.open .filter-sidebar-group:nth-child(10), .filter-sidebar.open .filter-sidebar-category-list .filter-sidebar-category-option:nth-child(8), .filter-sidebar.open .filter-sidebar-sort-section .sort-dropdown-list li[role="option"]:nth-child(9), .mobile-nav-sheet.open .mobile-nav-list > *:nth-child(8) { animation-delay: 0.43s; } .filter-sidebar.open .filter-sidebar-group:nth-child(11), .filter-sidebar.open .filter-sidebar-category-list .filter-sidebar-category-option:nth-child(9), .filter-sidebar.open .filter-sidebar-sort-section .sort-dropdown-list li[role="option"]:nth-child(10), .mobile-nav-sheet.open .mobile-nav-list > *:nth-child(9) { animation-delay: 0.46s; } .filter-sidebar.open .filter-sidebar-group:nth-child(12), .filter-sidebar.open .filter-sidebar-category-list .filter-sidebar-category-option:nth-child(10), .filter-sidebar.open .filter-sidebar-sort-section .sort-dropdown-list li[role="option"]:nth-child(11), .mobile-nav-sheet.open .mobile-nav-list > *:nth-child(10) { animation-delay: 0.49s; } } /* ---- Header + nav menu on a narrow DESKTOP window ---- Declared after every mobile header/nav block above so it wins on source order at equal specificity. Pointer-gated, so phones and tablets keep the sticky hide-on-scroll header and the slide-up sheet exactly as they are; only a mouse-driven window gets this. */ /* 1024px, matching the collapse block further up, not the 860px the phone layout switches at. The hamburger now appears at 1024 -- and everything in here is what turns it into a DESKTOP control: an anchored dropdown under the button, a header that scrolls with the page, and hover underlines on the rows. Left at 860 it would only start applying a whole 164px after the button did, and in that band a desktop window got the phone's full-width bottom sheet with its drag handle. */ @media (max-width: 1024px) and (hover: hover) and (pointer: fine) { /* Header logo keeps its full-size dimensions. The two min-width:860.02px blocks near the top of the file scale it up for desktop; below that width it falls back to the smaller mobile values, which a desktop window should not be getting. Scoped to the header so the footer logo keeps whatever sizing its own rules give it. */ .header-inner .logo-skull { height: 58px; } .header-inner .logo-wordmark-stack { font-size: 24px; } /* Header behaves exactly as it does at full width: it scrolls away with the page instead of sticking and hiding/revealing on scroll direction. */ .site-header { position: relative; transition: none; } .page-home .site-header { position: absolute; top: var(--promo-h); left: 0; right: 0; } /* The hamburger stays (it is the right control at this width), but it opens an anchored dropdown under itself -- same idea as the Store dropdown in the full-size nav -- rather than a full-height sheet sliding up from the bottom of the screen. */ /* Everything below the header goes dark and stops answering: the panel is a column down the right of a page you are meant to be finished with for the moment, not a menu floating over a live one. The header is deliberately NOT under it -- the backdrop starts at the header's bottom edge -- so the search, cart and account buttons stay lit and clickable up there, and pressing one both does its job and puts the panel away. --sheet-top is the header's bottom edge in viewport terms -- the same one every sliding sheet on a phone opens up to. Not a constant, since at this width the header scrolls with the page; initSheetTop keeps it current. */ .mobile-nav-backdrop { top: var(--sheet-top); background: rgba(0, 0, 0, 0.5); } /* A full-height column against the right edge, with one line down its left side and nothing anywhere else -- it is not a floating card, it is the right-hand side of the window for as long as it is open. */ .mobile-nav-sheet { position: fixed; top: var(--sheet-top); right: 0; left: auto; bottom: 0; width: 260px; max-width: calc(100vw - 32px); border-radius: 0; } .mobile-nav-sheet-inner { height: 100%; max-height: none; overflow-y: auto; border: none; border-left: 1.3px solid var(--on-dark-border); border-radius: 0; box-shadow: var(--shadow); /* Grows down out of the header, matching .nav-dropdown-menu. */ transform-origin: top; transform: scaleY(0); opacity: 0; visibility: hidden; transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease, visibility 0.24s; } .mobile-nav-sheet.open .mobile-nav-sheet-inner { transform: scaleY(1); opacity: 1; visibility: visible; } /* The drag handle is a bottom-sheet affordance and does not belong on a dropdown. */ .mobile-nav-handle { display: none; } /* The rows arrive one line at a time, on the Store menu's own keyframe and its own 50ms step -- see dropdown-item-appear further down the file. Both blocks need hover:hover and pointer:fine, so wherever this one applies that one is defined. Not the bottom sheet's nav-row-fade-in, which fades AND drops each row: a row moving down inside a panel that is itself unrolling downward is two movements arguing over the same 240ms. Opacity only here, so what you see is a line appearing, then the next. */ .mobile-nav-sheet .mobile-nav-list > *, .mobile-nav-sheet .mobile-nav-foot { opacity: 0; animation: none; } .mobile-nav-sheet.open .mobile-nav-list > *, .mobile-nav-sheet.open .mobile-nav-foot { animation: dropdown-item-appear 0.01s linear forwards; } /* 0.16s is the panel's own 0.24s slide less a hair, so the first row lands as the panel settles rather than racing it down. */ .mobile-nav-sheet.open .mobile-nav-list > *:nth-child(1) { animation-delay: 0.16s; } .mobile-nav-sheet.open .mobile-nav-list > *:nth-child(2) { animation-delay: 0.21s; } .mobile-nav-sheet.open .mobile-nav-list > *:nth-child(3) { animation-delay: 0.26s; } .mobile-nav-sheet.open .mobile-nav-list > *:nth-child(4) { animation-delay: 0.31s; } .mobile-nav-sheet.open .mobile-nav-list > *:nth-child(5) { animation-delay: 0.36s; } /* Log in and the social row are the last line of the panel, so they follow the list rather than arriving with it. */ .mobile-nav-sheet.open .mobile-nav-foot { animation-delay: 0.41s; } /* Tighter rows to suit a 250px panel rather than a full-screen sheet. */ /* Fills the column, which puts Log in and the social row at the foot of the panel rather than trailing the last link with empty space under them. */ .mobile-nav-list { flex: 1; padding: 10px 18px; } .mobile-nav-link { padding: 12px 0; font-size: 0.95rem; } .mobile-nav-sublink { padding: 10px 0 10px 14px; font-size: 0.86rem; } .mobile-nav-foot { padding: 14px 18px 18px; gap: 14px; } .mobile-nav-login { font-size: 0.88rem; } /* Same hover underline as the full-size nav, with no static divider lines between rows. Every row -- including Log in -- is full width and anchors its underline to left:0/right:0, so the lines all start and end at the same place rather than hugging each label. The list and the footer share the same 18px side padding, which is what keeps the Log in line aligned with the ones above it. */ .mobile-nav-link, .mobile-nav-sublink, .mobile-nav-login { position: relative; width: 100%; box-shadow: none; border-bottom: none; /* White at rest, like the phone's sheet -- not the full-size nav's gray. The underline below is the whole of the hover state here: these rows are the only thing on a panel of their own, rather than four labels sharing a bar with a logo and three icons, so there is nothing for a dimmed state to separate them from. */ transition: color 0.2s ease; } /* The chevron and the Log in glyph go with their row rather than holding a colour of their own. */ .mobile-nav-plus svg, .mobile-nav-login svg { color: inherit; } /* The down/up flip used to be set up here, for narrow desktop windows only, while the phone sheet kept the old right-to-down turn. Both do the same thing now, so it lives on the base rule and this block no longer needs a copy of it. */ /* Padding gives the underline room to sit clear of the text. */ .mobile-nav-login { padding: 12px 0; } .mobile-nav-link::after, .mobile-nav-sublink::after, .mobile-nav-login::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--offwhite); opacity: 0; transform: translateY(-10px); transition: transform 0.3s ease, opacity 0.3s ease; } .mobile-nav-link:hover::after, .mobile-nav-sublink:hover::after, .mobile-nav-login:hover::after { opacity: 1; transform: translateY(0); } } /* The header is shorter below 640px, so the dropdown hangs from lower. */ @media (max-width: 640px) and (hover: hover) and (pointer: fine) { .mobile-nav-sheet-inner { max-height: calc(100vh - 100px); } } /* ---- Home page (mobile): swipeable sliders ---- */ @media (max-width: 860px) { [data-featured-grid] { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 14px; padding-bottom: 4px; } [data-featured-grid]::-webkit-scrollbar { display: none; } /* Two cards and a slice of the third. 40% of the track, twice, plus the two 14px gaps, leaves roughly 45px of the next card showing on a 390px phone -- enough that the row plainly continues rather than ending at the edge. It was 72%, which showed one card and a sliver and read as a single item you had to work through one at a time. A percentage of the track rather than a fixed width, so the arithmetic holds on every phone: a wider screen gets wider cards and the same two-and-a-bit. */ [data-featured-grid] .product-card { flex: 0 0 auto; width: 40%; scroll-snap-align: start; } .video-row { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .video-row::-webkit-scrollbar { display: none; } .video-row .video-card { flex: 0 0 auto; width: 80%; scroll-snap-align: start; } } /* ---- Featured Collection on DESKTOP: a 4-up row that shrinks before it scrolls ---- All four cards stay whole whenever they fit. --featured-card-w is the design size -- the exact width a card has at the container's full 1500px, i.e. (container - 2x64px padding - 3x18px gap) / 4 -- and cards never exceed it, so a maximised window looks exactly as it did. Narrower than that the four shrink together to fill the row rather than the last one being clipped by the scroller, down to a floor of --featured-card-min. Only once even that floor overflows (a window around 1190px) does the row start scrolling, so the slide shows up only on a window genuinely too small for the row. Before this, the cards were a fixed flex: 0 0 --featured-card-w, so the row overflowed and clipped below roughly a 1490px window -- most desktops. Declared after the mobile slider block above and pointer-gated, so phones keep their own 72%-wide swipe slider. */ @media (hover: hover) and (pointer: fine) { [data-featured-grid] { --featured-card-w: calc((var(--container) - 2 * 64px - 3 * 18px) / 4); --featured-card-min: 260px; display: flex; grid-template-columns: none; gap: 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } [data-featured-grid]::-webkit-scrollbar { display: none; } [data-featured-grid] .product-card { /* Basis is the design size with grow off, so a card never exceeds it. Shrink is on, paired with an explicit min-width -- flex items default to min-width:auto, which resolves to the content size and would refuse to shrink at all. */ flex: 0 1 var(--featured-card-w); min-width: var(--featured-card-min); } } /* ---- Footer (mobile): centered utility row, accordion link columns ---- Company + Legal collapse into one "Support" column on mobile only; desktop keeps them as separate columns. Pointer-gated as well as width-gated: a narrow desktop window keeps the real footer -- separate link columns, all links visible, left-aligned brand -- instead of collapsing into tap-to-open accordions. Phones and tablets always match hover:none, so they are unaffected. ---- */ .footer-collapse-toggle { display: none; } .footer-col-mobile-only { display: none; } @media (max-width: 860px) and (hover: none) { .site-footer { padding-top: 0; } .section-alt:has(.subscribe-col) { padding-bottom: 28px; } .footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 24px 0 16px; } /* Smaller here than the 152px above -- a phone's footer wanting less of everything rather than a rule about the mark, and a disc that wide would be a third of a 360px screen. The two .logo-wordmark lines that stood beside this one are gone with the spans they sized. */ .footer-brand .logo-badge { height: 116px; } .footer-brand .footer-social { margin-top: 0; justify-content: center; } .footer-social { justify-content: center; } .footer-col-desktop-only { display: none; } .footer-col-mobile-only { display: block; } .footer-utility { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 20px; } .footer-utility .region-dropdown { order: 2; } .payment-icons { order: 3; justify-self: auto; } .footer-bottom { order: 4; white-space: normal; position: static; left: auto; top: auto; transform: none; } .footer-col-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-top: 1.3px solid var(--on-dark-border); cursor: pointer; } .footer-col h4 { margin-bottom: 0; } .footer-collapse-toggle { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; background: none; border: none; cursor: pointer; } .footer-collapse-toggle svg { width: 18px; height: 18px; color: var(--offwhite); transition: transform 0.2s ease; } .footer-collapse-toggle[aria-expanded="true"] svg { transform: rotate(90deg); } .footer-col-links { max-height: 0; overflow: hidden; display: flex; flex-direction: column; transition: max-height 0.3s ease; } .footer-col-links.open { max-height: 300px; } .footer-col-links a { width: 100%; } } /* ---- Footer layout on a narrow DESKTOP window ---- The width-only rules above drop the footer grid to two columns and then one, which breaks Store / Company / Legal apart across rows. Here they stay side by side as a single three-column row and the brand block moves above them, spanning the full width and centering itself -- so the columns keep their left-to-right reading order at any window size. The utility row below also stops overlapping itself: the copyright is absolutely centered by default, which collides with the region selector and payment badges once the row gets narrow, so here it drops onto its own line instead. */ @media (max-width: 1024px) and (hover: hover) and (pointer: fine) { .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; padding-bottom: 30px; } .footer-brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; } .footer-brand .footer-social { justify-content: center; } .footer-utility { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 24px; } .region-dropdown { justify-self: auto; } .payment-icons { justify-self: auto; } .footer-bottom { position: static; left: auto; top: auto; transform: none; order: 3; flex-basis: 100%; text-align: center; white-space: normal; } } /* ---- Featured Collection + Store grid (mobile): Quick Add bar pinned below the image instead of tap-to-enlarge ---- */ .product-media-expand { display: none; } /* Gated to hover: none -- see the pointer block further down the file. Everything in here is the card as a PHONE wants it: the Quick Add bar pinned under the photograph because a touch screen has no hover to reveal it with, and the spacing that bar needs around it -- a 52px row gap, a tightened price, more padding over the title. On a mouse none of that applies: the bar goes back to sliding up over the photo and the card goes back to its full-width spacing. */ @media (max-width: 860px) and (hover: none) { /* Grid items default to stretching to the tallest card in the row — if one product name wraps to 2 lines, every other card in that row gets stretched taller too, leaving dead space below its price that looks like an oversized gap before the next row. Sizing each card to only its own content keeps the row-to-row gap equal to the real grid gap regardless of how any one title wraps. */ [data-featured-grid], [data-store-grid], [data-related-grid] { align-items: start; } /* Bigger vertical gap between rows than the gap between cards side by side (column-gap stays whatever .product-grid sets). Doubled from the 24px it used to be, so the star row stays clear of the next row's photo. .product-info already has 4px of its own bottom padding below the price — 52 + 4 = a true visible 56px gap. */ [data-store-grid], [data-related-grid] { row-gap: 52px; } /* The h3's default bottom margin and the price's -2px nudge are zeroed out so the flex gap is the only thing setting the spacing. The price also gets line-height:1 — it was inheriting the body's 1.8 line-height, which padded it with extra invisible leading the h3 doesn't have, making the gap above it look bigger than the gap above the h3 even though the box-to-box distance was identical. */ [data-featured-grid] .product-info h3, [data-store-grid] .product-info h3, [data-related-grid] .product-info h3 { margin-bottom: 0; } [data-featured-grid] .product-price, [data-store-grid] .product-price, [data-related-grid] .product-price { margin-top: 0; line-height: 1; } /* "More from this category" only: price matches the plain description paragraph's font (regular body font, not the bold display font) and size instead of the store/featured grids' bold price treatment. */ [data-related-grid] .product-price .price { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 400; } /* Featured Collection is a swipeable carousel (see "Home page (mobile): swipeable sliders" below) with its own constant `gap: 14px` between cards at every mobile width — the padding above the title matches that exactly, instead of the store grid's responsive value. */ [data-featured-grid] .product-info { padding-top: 14px; gap: 14px; } /* Store and related grids are real CSS grids using .product-grid's own gap, which is 18px down to 640px. */ [data-store-grid] .product-info, [data-related-grid] .product-info { padding-top: 18px; gap: 18px; } } /* Below 640px .product-grid's own gap shrinks to 14px — match it here so the store/related grids' spacing stays equal to their card-to-card gap. */ /* hover: none, same as the 860px block above and for the same reason: this is the phone's card spacing, sized around a Quick Add bar pinned under the photograph. On a mouse the bar rides over the photo instead and the card keeps its full-width spacing, so none of this should reach it. */ @media (max-width: 640px) and (hover: none) { [data-store-grid] .product-info, [data-related-grid] .product-info { padding-top: 14px; gap: 14px; } [data-store-grid], [data-related-grid] { row-gap: 52px; } } /* The price belongs to the title above it, so it sits tight under it rather than floating halfway to the next card. .product-info holds exactly two things -- the h3 and the price -- so its gap IS the distance between them, and the two blocks above set that to the card-to-card gap (18px, 14px under 640px). That value is right for the space above the title, which is padding-top on the same rule and is left alone; it is far too much between a name and its own price. 6px is what the desktop card uses. After both blocks and matching the wider one, so it beats the 18px and the 14px alike -- same specificity, later wins -- while their padding-top, which this does not touch, still applies. */ @media (max-width: 860px) { [data-featured-grid] .product-info, [data-store-grid] .product-info, [data-related-grid] .product-info { gap: 6px; } } /* ---- Quick view (mobile): tap-to-fill-screen image viewer ---- */ .qv-fullscreen { display: none; position: fixed; inset: 0; z-index: 600; background: var(--surface); flex-direction: column; align-items: center; justify-content: center; gap: 16px; } .qv-fullscreen.open { display: flex; } /* One tall scroller filling the overlay, rather than a square window you swipe sideways: every photo is stacked down the page and you scroll through them. The square element keeps its name and its markup slot; it is just the scroll container now. */ .qv-fullscreen-square { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; } .qv-fullscreen-track { width: 100%; display: flex; flex-direction: column; align-items: center; /* No gap and no padding: the photos butt together as one continuous run. */ gap: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .qv-fullscreen-track::-webkit-scrollbar { display: none; } .qv-fullscreen-slide { /* flex: none plus an explicit ratio -- in a column the old flex-basis of 100% would have sized against height, not width. */ flex: none; width: 100%; aspect-ratio: 1 / 1; /* Clips the entrance: the photo starts at scale(1.28), and with the slides now butted together with no gap it would otherwise spill over its neighbours on the way in. */ overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 20%, rgba(169,136,90,0.06), transparent 70%), #5e5e5e; } .qv-fullscreen-slide svg { width: 55%; height: 55%; color: var(--text-faint); } /* Fixed, not absolute: it stays in the top-right corner for the whole scroll instead of riding away with the first photo. */ .qv-fullscreen-close { position: fixed; top: 16px; right: 16px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(26, 26, 26, 0.55); color: #d6d6d6; display: flex; align-items: center; justify-content: center; cursor: pointer; } .qv-fullscreen-close svg { width: 20px; height: 20px; color: #d6d6d6; } /* Round bouncing arrow in the bottom-right of the stacked viewer, saying there is more below. Styled off the close button so the two corners match, fixed to the viewport for the same reason, and pointer-events: none because it is an indicator, not a control -- the X is the only thing in here you can press. Reuses the quick view's bounce keyframes. JS adds .has-scrolled on the first scroll and never takes it off, so it fades out once and stays gone for that viewing. */ .qv-fullscreen-cue { position: fixed; /* Centred with auto margins between a pinned left and right edge rather than translateX(-50%): the bounce animation owns `transform`, and a centring transform here would be overwritten by every keyframe. */ left: 0; right: 0; margin: 0 auto; bottom: 20px; width: 46px; height: 46px; border-radius: 50%; background: rgba(26, 26, 26, 0.55); color: #d6d6d6; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.25s ease; animation: qv-scroll-cue-bounce 1.6s ease-in-out infinite; } .qv-fullscreen-cue svg { width: 20px; height: 20px; } /* The twin at the top, for when the stack opens partway down and there are photos above as well. Same button, flipped to the other edge and bouncing the way it points. */ .qv-fullscreen-cue-up { top: 20px; bottom: auto; animation-name: qv-scroll-cue-bounce-up; } @keyframes qv-scroll-cue-bounce-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* Each arrow is shown only if there is actually something that way, so a stack opened at the very bottom gets the up arrow alone. */ .qv-fullscreen.can-scroll-down .qv-fullscreen-cue:not(.qv-fullscreen-cue-up) { opacity: 1; } .qv-fullscreen.can-scroll-up .qv-fullscreen-cue-up { opacity: 1; } /* Both go at the first scroll and stay gone. These have to carry the can-scroll-* class as well: the two rules above are three classes deep, so a plain `.qv-fullscreen.has-scrolled .qv-fullscreen-cue` loses to them on specificity and the arrows would simply never hide. */ .qv-fullscreen.can-scroll-down.has-scrolled .qv-fullscreen-cue:not(.qv-fullscreen-cue-up), .qv-fullscreen.can-scroll-up.has-scrolled .qv-fullscreen-cue-up { opacity: 0; } /* Hidden: these tracked which slide of a horizontal filmstrip you were on, which says nothing once the photos are a vertical scroll. The inline .media-dots under the main image carry that job now. */ .qv-fullscreen-dots { display: none; } .qv-fullscreen-dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(251, 247, 243, 0.4); transition: width 0.25s ease, background 0.25s ease; } .qv-fullscreen-dot.is-active { width: 18px; background: rgba(251, 247, 243, 0.95); } @media (min-width: 860.02px) { .qv-fullscreen { display: none !important; } } /* ---- Topo texture: Free Membership (home) and Get In Touch (About) ---- A flat --topo-ground on the section, and the texture over it on a ::before at --topo-strength opacity. Two numbers, and they do not fight each other: the ground sets how dark the strip is, the opacity sets how much of the contour lines you see on it. Turn either without touching the other. Two tones meet here and have to stay legible against each other: --topo-ground #0c0c0c this strip's ground --footer-ground #101010 the footer directly below This list used to carry a third line -- --forest, "the card sitting on it" -- and that has not been true for a while: .membership-card has no fill, no frame and no radius, so the copy sits straight on the band and there is nothing stacked on this ground to clash with it. Nothing else inside the three strips carries a background either. Worth knowing, because it means this value is free to follow the artwork wherever it goes. And it does go. Across a run of candidate topos this ground has been as light as #151515 -- above the footer rather than below it, inverting the order this list is written in -- before coming back down to where it is now, a few levels under the footer again, which is where it sat for a long time at #0a0a0a. Not drift: the topo runs at full strength, so this ground has to match whatever file is loaded or the strip changes colour as the image arrives. The seam reads at any of those values, because the footer's own border-top was always what drew that line rather than the few levels between the two. This used to be built out of stacked background layers: the texture blended with `lighten` against the section's background-colour, under a scrim, with background-attachment: fixed pinning the texture to the viewport so the page slid over a stationary topo. That looked right but painted wrong, and both bugs traced to the same place. A fixed layer and a blend mode are a bad pair: the blend was skipped on the first paint, so the raw -- much lighter -- texture showed until something forced a repaint and it snapped to the blended version. The footer got caught in the same repaint region and came into view carrying this strip's ground before correcting to its own. Dropping the fixed attachment was not enough; the blend mode alone still misfired. So: no blend mode and no fixed attachment. Plain opacity over a plain background composites in one pass with nothing to skip. The mottling that `lighten` was there to suppress -- render noise sitting just above black in the texture's flat areas -- used to be a non-issue because the opacity of a quarter scaled a few levels of noise down to less than one. That safety net is gone now the texture runs at full strength: whatever noise is in the file is what lands on the page, which is one more reason the artwork itself has to be clean rather than corrected here. The parallax is the thing genuinely lost here. Getting it back means a position: fixed pseudo-element inside an overflow: hidden container rather than background-attachment, which composites cleanly but is more moving parts than this section has needed so far. */ /* Three sections carry this: the About page's Get In Touch strip, the Free Membership band on the home and store pages, and the membership section at the foot of a product page -- which has no class of its own and is given .topo-strip in the markup for the purpose. */ .subscribe, .membership-strip, .topo-strip { position: relative; background: var(--topo-ground); /* The texture is a viewport-sized layer clipped to the band. Nothing should be able to paint outside it. */ overflow: hidden; } .subscribe::before, .membership-strip::before, .topo-strip::before { content: ''; position: absolute; inset: 0; background: url('../assets/images/topo-texture-v7.jpg') center top / cover no-repeat; opacity: var(--topo-strength); pointer-events: none; } /* The parallax: the texture is anchored to the viewport rather than to the section, so the page slides over a stationary topo. This is the same background-attachment: fixed that used to be here and had to come out -- but what broke it then was pairing it with background-blend-mode, and the blend is gone: this is a plain image at a plain opacity now, which is a far better-tested combination. If any flicker ever comes back, this is the first thing to pull. Desktop only, as before: mobile Safari handles fixed backgrounds badly. */ @media (hover: hover) and (pointer: fine) { .subscribe::before, .membership-strip::before, .topo-strip::before { background-attachment: fixed; /* Sized against the viewport now, not the section, so `cover` has to be restated against that box. */ background-size: cover; background-position: center; } } /* The content has to be told to sit above the texture: ::before is painted over the background but under nothing else by default, and in-flow children with no position of their own would otherwise land beneath it. */ .subscribe > .container, .membership-strip > .container, .topo-strip > .container { position: relative; z-index: 1; } /* The same treatment on the About page's Get In Touch strip: topo texture under the same scrim, with the texture layer pinned to the viewport so the section slides over it. */ /* ---- "+N" overlay on the last thumb (product page, desktop) ---- A product with more photos than the column shows puts the remainder behind its last thumb: the photo is darkened and the count of the other photos sits on top, big. Clicking it opens the stacked popup. The thumb column itself keeps its original four-square spacing -- the count rides on a thumb rather than adding a row of its own. */ .product-thumb { position: relative; } .product-thumb-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; /* Darkens the photo it sits on so the number stays readable. */ background: rgba(19, 19, 19, 0.62); color: var(--offwhite); /* Body face, not the display face the headings use. */ font-family: var(--font-body); font-size: 2.5rem; letter-spacing: 0.02em; line-height: 1; transition: background 0.2s ease; } .product-thumb.has-count:hover .product-thumb-count { background: rgba(19, 19, 19, 0.5); } /* The "+N" tile's 2x2 mosaic. The 1px gaps sit on a near-black ground so the seams read as thin dark lines rather than strips of the thumb's gray placeholder background showing through. */ .product-thumb-mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px; background: #131313; } .product-thumb-mosaic .product-media-img { width: 100%; height: 100%; } /* ---- Stacked photo popup (product page, desktop) ---- Replaces click-to-zoom on the main image: every photo in one vertical scroller. Only the inner .pd-stack-scroll scrolls, so the scroll cue -- a sibling of it, not a child -- stays fixed in the corner the whole way down. There is no close button. The empty columns beside the photos do that job instead (.pd-stack-dismiss): the pointer becomes the ringed X over them and a click dismisses, the same gesture as clicking off the quick view popup. Escape closes it too, and the left column is a real