/** * SwagMode Luxe - base & global component styles. * Design tokens come from theme.json (--wp--preset--*). This file styles the * global chrome (announcement, header, mega menu, search, cart drawer, footer) * and shared components (buttons, product card, badges). Mobile-first. */ :root{ --swm-ink:var(--wp--preset--color--ink); --swm-charcoal:var(--wp--preset--color--charcoal); --swm-bone:var(--wp--preset--color--bone); --swm-paper:var(--wp--preset--color--paper); --swm-mist:var(--wp--preset--color--mist); --swm-stone:var(--wp--preset--color--stone); --swm-flame:var(--wp--preset--color--flame); --swm-accent:var(--swm-flame); --swm-bronze:var(--swm-flame); /* alias: legacy rules keep working */ --swm-green:var(--wp--preset--color--green); --swm-oxblood:var(--wp--preset--color--oxblood); --swm-display:var(--wp--preset--font-family--display); --swm-serif:var(--swm-display); /* alias: legacy heading rules */ --swm-mono:var(--wp--preset--font-family--mono); --swm-sans:var(--wp--preset--font-family--body); --swm-ease:cubic-bezier(.16,1,.3,1); --swm-dur:.3s; --swm-gutter:clamp(1rem,4vw,2.5rem); --swm-header-h:56px; /* The gap between the header and the first thing on a page. One value, so every template opens on the same line - see .swm-plp, .swm-page, .swm-about, .swm-journal and main.swm-wc, which each used to pick their own. */ --swm-page-top:clamp(1.5rem,3vw,2.5rem); --swm-radius:0px; --swm-brush:url('../images/brush-button.png'); --swm-circle:url('../images/circle-brush.svg'); } *,*::before,*::after{box-sizing:border-box} /* The scroll container is the root element, so clipping sideways spill has to be set there as well as on the body. `clip` rather than `hidden`: hidden would turn the page into a scroll container and break the sticky header. */ html{overflow-x:clip; /* iOS Safari inflates text inside blocks much wider than the viewport, which is what the announcement ticker is (width:max-content). Left alone it rendered the bar at roughly twice its size on an iPhone and nowhere else. */ -webkit-text-size-adjust:100%;text-size-adjust:100%; /* Safari and Chrome paint a grey box over whatever a thumb touches. The site has its own press states, so the browser's guess is just a flash of colour on every tap - including on card links and the wishlist heart. */ -webkit-tap-highlight-color:transparent} body{overflow-x:clip;font-family:var(--swm-sans);font-weight:300;font-size:.875rem;color:var(--swm-ink); background:var(--swm-bone);line-height:1.6;-webkit-font-smoothing:antialiased;} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto} /* The ring belongs to keyboard navigation. `.swm-kbd` lands on the first time somebody uses Tab or the arrow keys and comes off at the next pointerdown (interface.js), so it is shown to the people who need it and never left behind by a click or a tap. This used to name four selectors, which meant every other control - a product link, the wishlist heart - still kept a box after being clicked. Closing an overlay also hands focus back to whatever opened it, and script-driven focus counts as :focus-visible in Chrome, so the ring appeared there too. Form fields are deliberately not covered: they carry their own :focus styling in woocommerce.css, because somebody typing needs to see where they are however they got there. */ :focus-visible{outline:none} body.swm-kbd :focus-visible{outline:1px solid var(--swm-ink);outline-offset:3px} :focus:not(:focus-visible){outline:none} /* Display type: condensed, uppercase, tight. */ h1,h2,h3,.swm-display{font-family:var(--swm-display);font-weight:400;text-transform:uppercase; line-height:.92;letter-spacing:-.01em} /* Mono UI label - the workhorse of this system. */ .swm-label,.swm-eyebrow{font-family:var(--swm-mono);font-weight:300;font-size:.6875rem; letter-spacing:.14em;text-transform:uppercase} .swm-container{max-width:1440px;margin-inline:auto;padding-inline:var(--swm-gutter)} /* WordPress gives the main block a default top margin - kill it so sections (hero especially) sit flush against the header. */ main.wp-block-group{margin-top:0} main.wp-block-group>:first-child{margin-block-start:0} /* ---- Buttons ---- */ /* Square, mono, thin - with a fill-from-bottom hover. */ .swm-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-align:center; font-family:var(--swm-mono);font-weight:400;font-size:.6875rem;letter-spacing:.12em; text-transform:uppercase;line-height:1.3;cursor:pointer;overflow:hidden;isolation:isolate; padding:1rem 1.75rem;border-radius:var(--swm-radius);border:1px solid var(--swm-ink); background:var(--swm-ink);color:var(--swm-paper);transition:color var(--swm-dur) var(--swm-ease)} .swm-btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--swm-flame); transform:translateY(101%);transition:transform var(--swm-dur) var(--swm-ease)} .swm-btn:hover::after{transform:translateY(0)} .swm-btn:hover{color:var(--swm-ink);border-color:var(--swm-flame)} .swm-btn[disabled],.swm-btn.is-disabled{opacity:.35;cursor:not-allowed} .swm-btn[disabled]::after,.swm-btn.is-disabled::after{display:none} .swm-btn--secondary{background:transparent;color:var(--swm-ink);border-color:var(--swm-ink)} .swm-btn--secondary:hover{color:var(--swm-ink)} .swm-btn--ghost{background:transparent;color:var(--swm-charcoal);border-color:var(--swm-mist)} .swm-btn--ghost:hover{color:var(--swm-ink);border-color:var(--swm-ink)} .swm-btn--block{width:100%} /* Brush-stroke CTA: a hand-painted ink stroke sits behind the label and turns flame on hover. The brush PNG is used as a mask so the accent stays tokenised. */ .swm-btn--brush{position:relative;background:transparent;border:0;color:var(--swm-paper); isolation:isolate;overflow:visible;padding:1.15rem 2.75rem} .swm-btn--brush::after{display:none} .swm-btn--brush::before{content:"";position:absolute;inset:-48% -8%;z-index:-1;background:var(--swm-ink); -webkit-mask:var(--swm-brush) center/100% 100% no-repeat;mask:var(--swm-brush) center/100% 100% no-repeat} .swm-btn--brush:hover{color:var(--swm-ink)} .swm-btn--brush:hover::before{background:var(--swm-flame)} /* Rough flame ring drawn around a value (price, subtotal). */ .swm-brushring{position:relative;display:inline-block;isolation:isolate} .swm-brushring::before{content:"";position:absolute;inset:-42% -18%;z-index:-1;background:var(--swm-flame); -webkit-mask:var(--swm-circle) center/100% 100% no-repeat;mask:var(--swm-circle) center/100% 100% no-repeat} /* ---- Announcement bar (lives inside the fixed header; collapses on scroll) ---- */ .swm-anno{background:var(--swm-ink);color:var(--swm-bone);text-align:center; font-family:var(--swm-mono);font-weight:300;font-size:.625rem;letter-spacing:.16em; text-transform:uppercase;padding:.6rem var(--swm-gutter); max-height:3rem;overflow:hidden; transition:max-height .45s var(--swm-ease),padding .45s var(--swm-ease),opacity .3s var(--swm-ease)} .swm-header.is-stuck .swm-anno{max-height:0;padding-block:0;opacity:0} .swm-anno b,.swm-anno strong{color:var(--swm-flame);font-weight:400} /* One copy of the message on desktop, centred; the second is only there for the phone ticker and collapses out of the way here. */ .swm-anno__track{display:flex;justify-content:center} .swm-anno__item + .swm-anno__item{display:none} /* Phone: the message is too long for the width and was wrapping to two lines, which doubled the header height. It becomes a single-line ticker instead - two copies scrolling by exactly one copy's width, so the loop has no seam. */ @media(max-width:720px){ .swm-anno{overflow:hidden;max-height:none;padding-inline:0} .swm-anno__track{width:max-content;justify-content:flex-start;flex-wrap:nowrap; animation:swm-anno-scroll 22s linear infinite} .swm-anno__item{display:block;white-space:nowrap;padding-inline:1.25rem;font-size:.625rem} .swm-anno__item + .swm-anno__item{display:block} /* Reading something that is moving is hard; holding it still is one tap. */ .swm-anno:hover .swm-anno__track, .swm-anno:focus-within .swm-anno__track, .swm-anno:active .swm-anno__track{animation-play-state:paused} } @keyframes swm-anno-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* Motion off: no scroll, and the message wraps rather than being cut in half. */ @media(prefers-reduced-motion:reduce){ .swm-anno__track{animation:none;width:auto;justify-content:center} .swm-anno__item{white-space:normal} .swm-anno__item + .swm-anno__item{display:none} } /* ---- Header: transparent over the hero, stacked links; solidifies + goes horizontal on scroll, with a quiet logo shrink. ---- */ /* The admin bar is fixed too, so without this the header (and the announcement bar inside it) hides behind it for logged-in users, and the reserved strip below counts that height twice. Visitors are unaffected either way. */ body.admin-bar .swm-header{top:32px} @media screen and (max-width:782px){body.admin-bar .swm-header{top:46px}} /* Same for the full-height overlays: start below the admin bar and lose that height, or their heads hide behind it and their feet fall off the screen. */ body.admin-bar :is(.swm-menu,.swm-drawer,.swm-search,.swm-guide){top:32px;height:calc(100dvh - 32px)} /* The filter panel is only a fixed drawer below 1280px - above that it is an inline row in the toolbar, where a forced height would wreck it. */ @media screen and (max-width:1279px){ body.admin-bar .swm-plp__filters{top:32px;height:calc(100dvh - 32px)} } /* No offset below 783px: WordPress switches the admin bar to position:absolute there, so it scrolls away with the page. Reserving 46px for a bar that is not there left a strip at the top of every overlay with the fixed site header showing through it - which is why search appeared to open below the header on a phone rather than over it. */ @media screen and (max-width:782px){ body.admin-bar :is(.swm-menu,.swm-drawer,.swm-search,.swm-guide,.swm-plp__filters){top:0;height:100dvh} } .swm-header{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent; border-bottom:1px solid transparent; transition:background .45s var(--swm-ease),border-color .45s var(--swm-ease), backdrop-filter .45s var(--swm-ease),transform .4s var(--swm-ease)} .swm-header.is-stuck{background:#fff;border-bottom-color:var(--swm-mist);backdrop-filter:blur(8px)} /* Hide-on-scroll-down / reveal-on-scroll-up (JS toggles is-hidden on all pages). */ .swm-header.is-hidden{transform:translateY(-100%)} /* Non-hero pages: header is opaque (no hero behind it) and stays fixed; reserve its height on the body so the fixed header never overlaps the page content. --swm-hdr-offset is measured live in interface.js (full, un-stuck height). */ body:not(.swm-has-hero) .swm-header{background:var(--swm-bone);border-bottom-color:var(--swm-mist)} /* Offset lives on main (opaque) not body, so its background covers the fixed reveal-footer in the reserved strip - a body gap would let the footer show. */ body:not(.swm-has-hero) main{padding-top:var(--swm-hdr-offset,116px)} /* The mobile trim of each wrapper's own top padding lives at the end of this file - the wrappers are defined further down, and at equal specificity the later rule wins. */ .swm-header__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:1rem; padding:1.5rem var(--swm-gutter);transition:padding .45s var(--swm-ease)} .swm-header.is-stuck .swm-header__bar{padding-block:.9rem;align-items:center} /* Stacked at rest → single row when stuck. */ .swm-header__side{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;min-width:0; transition:gap .45s var(--swm-ease)} /* Both axes, so the group hugs the outer edge whether stacked (align) or in a row (justify). */ .swm-header__side--left{align-items:flex-start;justify-content:flex-start} .swm-header__side--right{align-items:flex-end;justify-content:flex-end} .swm-header.is-stuck .swm-header__side{flex-direction:row;align-items:center;gap:1.75rem} /* Each link eases into place so the change reads as motion, not a jump. */ .swm-header__side .swm-tlink{transition:transform .45s var(--swm-ease),opacity .45s var(--swm-ease),color .3s} .swm-header:not(.is-stuck) .swm-header__side .swm-tlink{transform:translateY(0)} /* Quiet shrink on the mark. */ .swm-brand img{transition:height .45s var(--swm-ease)} .swm-header.is-stuck .swm-brand img{height:var(--swm-logo-h-stuck,36px)} /* Over a dark hero the header text is light until it sticks. */ body.swm-has-hero{--swm-hdr-fg:#fff} /* The transparent header takes its colour from whichever hero slide is showing: white links disappear on a pale photograph, black ones on a dark photograph. The class is set by the slider, so it changes with the fade rather than after it. Only the see-through state is affected - once the header is stuck it has its own background and goes back to ink. */ body.swm-hero-dark{--swm-hdr-fg:var(--swm-ink)} body.swm-has-hero .swm-header:not(.is-stuck) :is(.swm-tlink,.swm-brand__text){ transition:color .6s var(--swm-ease)} body.swm-has-hero .swm-header:not(.is-stuck) .swm-tlink, body.swm-has-hero .swm-header:not(.is-stuck) .swm-brand__text{color:var(--swm-hdr-fg)} body.swm-has-hero .swm-header:not(.is-stuck) .swm-anno{color:#fff} /* Icons are drawn with stroke="currentColor" inside their link, so they take the link's colour on their own. Setting `color` on the svg itself - as this block used to - overrode that, which is why the icons kept the slide's colour and ignored what was measured behind them. The wordmark is the exception and is pinned: its letterforms are currentColor so the mark *can* adapt, but it is a logo - it reads the same on every slide or it looks like two different brands. */ body.swm-has-hero .swm-header:not(.is-stuck) .swm-brand__svg{color:var(--swm-ink)} /* Measured contrast beats the per-slide setting: each control is told what is actually behind it, which matters most on a phone, where the picture is cropped hard and the pale half of a photograph can sit under the icons alone. Icons are inside the link, so they inherit this through currentColor. */ body.swm-has-hero .swm-header:not(.is-stuck) :is(.swm-tlink,.swm-brand__text).is-on-light, .swm-hero__pager.is-on-light{color:var(--swm-ink)} body.swm-has-hero .swm-header:not(.is-stuck) :is(.swm-tlink,.swm-brand__text).is-on-dark, .swm-hero__pager.is-on-dark{color:#fff} /* The announcement bar rides above a transparent header on hero pages. */ body.swm-has-hero .swm-anno{background:var(--swm-ink)} @media(max-width:860px){ .swm-header__side{gap:.3rem} /* Left side still collapses to Menu alone - those are wordy page links with no icon to fall back on. The right side keeps all three controls and shows them as icons, which is what a phone shopper reaches for. */ .swm-header__side--left .swm-tlink:not(:first-child){display:none} .swm-header__side--right{flex-direction:row;align-items:center;gap:1rem} .swm-header__side--right .swm-tlink--ico>span{display:none} .swm-header__side--right .swm-tlink--ico .swm-tlink__i{display:inline-flex} /* The count rides the icon rather than sitting after a word. */ .swm-header__side--right .swm-tlink--ico{padding:.15rem} .swm-header__side--right .swm-tlink--ico .swm-tlink__n{position:absolute;top:-.35rem;right:-.5rem; margin:0;font-size:.6rem;line-height:1} .swm-header.is-stuck .swm-header__side{gap:1rem} .swm-header.is-stuck .swm-header__side--right{gap:1rem} /* Only one link survives per side here, so the desktop bar padding is dead height - and it is reserved twice over, because --swm-hdr-offset pushes the page down by the header's measured height. */ .swm-header__bar{padding-block:.85rem;align-items:center} .swm-anno{padding-block:.45rem} } /* Text link: the core UI atom - thin mono, underline wipe on hover */ .swm-tlink{position:relative;display:inline-flex;align-items:flex-start;gap:.3rem; font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.14em; text-transform:uppercase;color:var(--swm-ink);background:none;border:0;padding:0;cursor:pointer; line-height:1;white-space:nowrap} /* Icon variant: the word is the default, the glyph appears only where the CSS asks for it, so both are always in the DOM for assistive tech. */ .swm-tlink--ico{position:relative;align-items:center} .swm-tlink__i{display:none;align-items:center;justify-content:center} .swm-tlink__i svg{display:block} .swm-tlink>span{position:relative;padding-bottom:2px} .swm-tlink>span::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px; background:currentColor;transition:right .4s var(--swm-ease)} .swm-tlink:hover>span::after,.swm-tlink[aria-expanded="true"]>span::after{right:0} .swm-tlink__n{font-style:normal;font-size:.6875rem;opacity:.55;font-variant-numeric:tabular-nums} .swm-tlink__n::before{content:"."} /* Animated + / x */ .swm-tlink__plus{position:relative;width:8px;height:8px;margin-top:1px;flex:0 0 auto} .swm-tlink__plus::before,.swm-tlink__plus::after{content:"";position:absolute;top:50%;left:0;width:8px;height:1px; background:currentColor;transition:transform .4s var(--swm-ease)} .swm-tlink__plus::after{transform:rotate(90deg)} .swm-tlink[aria-expanded="true"] .swm-tlink__plus::before,.swm-tlink--toggle.is-open .swm-tlink__plus::before{transform:rotate(45deg)} .swm-tlink[aria-expanded="true"] .swm-tlink__plus::after,.swm-tlink--toggle.is-open .swm-tlink__plus::after{transform:rotate(-45deg)} /* ---- Full-screen overlays: Menu (pages) + Collections (sub-collections) ---- */ /* Always exactly one viewport tall; content is sized to fit without scrolling. */ .swm-menu{position:fixed;inset:0;height:100vh;height:100dvh;z-index:120;background:var(--swm-bone); opacity:0;visibility:hidden;transition:opacity .5s var(--swm-ease),visibility .5s; display:flex;flex-direction:column;overflow:hidden} .swm-menu.is-open{opacity:1;visibility:visible} .swm-menu__bar{display:flex;align-items:center;justify-content:space-between; padding:1.15rem var(--swm-gutter);min-height:var(--swm-header-h);flex:0 0 auto} .swm-menu__bar .swm-label{color:var(--swm-stone)} /* Nav left, picture treatment right (right half hidden on mobile). */ .swm-menu__grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr} @media(min-width:900px){.swm-menu__grid{grid-template-columns:1fr 1fr}} .swm-menu__nav{min-height:0;overflow-y:auto;display:flex;flex-direction:column;justify-content:center; gap:clamp(1rem,3vh,2.5rem); padding:clamp(.5rem,2vh,2rem) var(--swm-gutter) clamp(1rem,3vh,2.5rem)} .swm-menu__list{list-style:none;margin:0;padding:0} .swm-menu__item{border-top:1px solid var(--swm-mist);overflow:hidden} /* Collections row appears in the Menu overlay on mobile only (desktop has its own trigger). */ .swm-menu__item--mobonly{display:none} @media(max-width:859px){.swm-menu__item--mobonly{display:list-item}} .swm-menu__item:last-child{border-bottom:1px solid var(--swm-mist)} /* Nav type scales with viewport HEIGHT so every row fits at 100dvh. */ .swm-menu__item>a{display:flex;align-items:baseline;gap:1rem;padding:clamp(.4rem,1.4vh,1rem) 0; font-family:var(--swm-display);text-transform:uppercase;line-height:.95; font-size:clamp(1.6rem,6vh,3.25rem);color:var(--swm-ink); transform:translateY(110%);opacity:0;transition:color .3s var(--swm-ease)} /* Collections carries sub-lists, so its rows run a touch smaller to stay on-screen. */ .swm-menu--collections .swm-menu__item>a{font-size:clamp(1.5rem,5.6vh,3.25rem)} .swm-menu.is-open .swm-menu__item>a{animation:swmRise .7s var(--swm-ease) forwards;animation-delay:calc(var(--i,1) * 60ms + 120ms)} @keyframes swmRise{to{transform:translateY(0);opacity:1}} .swm-menu__item>a em{font-family:var(--swm-mono);font-style:normal;font-size:.6875rem;font-weight:300; letter-spacing:.14em;color:var(--swm-stone);flex:0 0 auto} .swm-menu__item>a:hover{color:var(--swm-flame)} .swm-menu__sub{list-style:none;margin:0 0 .9rem;padding:0 0 0 2.6rem;display:flex;flex-wrap:wrap;gap:.4rem 1.25rem} .swm-menu__sub a{font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.1em; text-transform:uppercase;color:var(--swm-stone)} .swm-menu__sub a:hover{color:var(--swm-ink)} /* Collections sub-panel: Men / Women groups with their category links. */ .swm-menu__collections{display:flex;flex-wrap:wrap;gap:1.25rem 3rem;padding:.4rem 0 1.1rem 2.6rem} .swm-menu__colgroup{min-width:120px} .swm-menu__colhead{display:inline-block;position:relative;margin-bottom:.7rem;padding-bottom:2px; font-family:var(--swm-mono);font-weight:400;font-size:.75rem;letter-spacing:.14em; text-transform:uppercase;color:var(--swm-ink)} .swm-menu__colhead::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px; background:var(--swm-flame);transition:right .4s var(--swm-ease)} .swm-menu__colhead:hover::after{right:0} .swm-menu__colgroup .swm-menu__sub{margin:0;padding:0;flex-direction:column;gap:.45rem} @media(max-width:560px){.swm-menu__collections{gap:1rem 1.75rem}} .swm-menu__secondary{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 2rem} .swm-menu__secondary a{font-family:var(--swm-mono);font-weight:300;font-size:.75rem;letter-spacing:.12em; text-transform:uppercase;color:var(--swm-ink);position:relative;padding-bottom:2px} .swm-menu__secondary a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px; background:var(--swm-flame);transition:right .4s var(--swm-ease)} .swm-menu__secondary a:hover{color:var(--swm-flame)} .swm-menu__secondary a:hover::after{right:0} .swm-menu__meta{display:flex;gap:1.75rem;flex-wrap:wrap;padding-top:1.25rem;color:var(--swm-stone)} .swm-menu__meta .swm-tlink{color:var(--swm-stone)} .swm-menu__meta .swm-tlink:hover{color:var(--swm-ink)} .swm-menu__visual{position:relative;display:none;background:var(--swm-mist);overflow:hidden} @media(min-width:900px){.swm-menu__visual{display:block}} .swm-menu__panel{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .6s var(--swm-ease)} .swm-menu__panel.is-active{opacity:1} .swm-menu__panel img{width:100%;height:100%;object-fit:cover;transform:scale(1.04); transition:transform 1.2s var(--swm-ease)} .swm-menu__panel.is-active img{transform:scale(1)} .swm-menu__panel figcaption{position:absolute;left:0;right:0;bottom:0;padding:2rem;color:#fff; background:linear-gradient(180deg,transparent,rgba(12,12,13,.6))} .swm-menu__panel figcaption .swm-label{display:block;opacity:.8;margin-bottom:.35rem} .swm-menu__panel figcaption b{font-family:var(--swm-display);font-weight:400;text-transform:uppercase; font-size:clamp(1.25rem,2vw,2rem);line-height:1} /* ---- Collections overlay: Men/Women tabs + big categories (left), hover masonry (right) ---- */ .swm-collections{flex:1;min-height:0;display:grid;grid-template-columns:1fr} @media(min-width:900px){.swm-collections{grid-template-columns:1fr 1fr}} .swm-collections__left{min-height:0;overflow-y:auto;display:flex;flex-direction:column;justify-content:center; gap:clamp(1rem,3vh,2rem);padding:clamp(.5rem,2vh,2rem) var(--swm-gutter) clamp(1rem,3vh,2.5rem)} .swm-coltabs{display:flex;gap:1.75rem;padding-bottom:.35rem} .swm-coltab{background:none;border:0;padding:0 0 .35rem;cursor:pointer;position:relative; font-family:var(--swm-display);text-transform:uppercase;line-height:1; font-size:clamp(1.6rem,6vh,3.25rem);color:var(--swm-stone);transition:color .3s var(--swm-ease)} .swm-coltab::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--swm-flame); transition:right .4s var(--swm-ease)} .swm-coltab.is-active{color:var(--swm-ink)} .swm-coltab.is-active::after{right:0} /* Hover reads like the category rows beneath - the label darkens to ink and the rule sweeps in behind it. It stays mist rather than flame so the active tab is still the only flame-underlined one and hover cannot be mistaken for it. */ .swm-coltab:hover, .swm-coltab:focus-visible{color:var(--swm-ink)} .swm-coltab:hover::after, .swm-coltab:focus-visible::after{right:0;background:var(--swm-mist)} .swm-coltab.is-active:hover::after, .swm-coltab.is-active:focus-visible::after{background:var(--swm-flame)} /* An entry with no children navigates instead of switching a panel, so it never takes the active state - but it hovers like its siblings. */ .swm-coltab--link{text-decoration:none;display:inline-block} .swm-colpanel{display:none;flex-direction:column;gap:clamp(1rem,3vh,2rem)} .swm-colpanel.is-active{display:flex} .swm-colcats{list-style:none;margin:0;padding:0} .swm-colcats li{border-top:1px solid var(--swm-mist)} .swm-colcats li:last-child{border-bottom:1px solid var(--swm-mist)} .swm-colcats a{display:flex;align-items:baseline;gap:1rem;padding:clamp(.4rem,1.4vh,.9rem) 0; font-family:var(--swm-display);text-transform:uppercase;line-height:.95; font-size:clamp(1.3rem,4.6vh,2.5rem);color:var(--swm-ink);transition:color .3s var(--swm-ease)} .swm-colcats a em{font-family:var(--swm-mono);font-style:normal;font-size:.6875rem;font-weight:300; letter-spacing:.14em;color:var(--swm-stone);flex:0 0 auto} .swm-colcats a:hover{color:var(--swm-flame)} /* Phone: the overlay is the whole screen, so the type does not need to be poster-sized. "Shop all" was wrapping onto two lines and shoving the tab row out of line with the categories beneath it. */ @media(max-width:640px){ .swm-coltabs{gap:1.1rem;flex-wrap:wrap} .swm-coltab{font-size:clamp(1.35rem,4.2vh,1.9rem);white-space:nowrap} .swm-colcats a{font-size:clamp(1.05rem,3.2vh,1.5rem);gap:.75rem} .swm-colcats a em{font-size:.625rem} } /* Right: masonry - a big hover-swap feature tile + scattered random images, with deliberate empty cells (white space). Hidden on mobile (tabs carry the menu). */ .swm-collections__visual{position:relative;display:none;background:var(--swm-bone);overflow:hidden; padding:clamp(1rem,2vw,2rem)} @media(min-width:900px){.swm-collections__visual{display:block}} .swm-colmasonry{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr); gap:clamp(.5rem,1vw,1rem);height:100%} .swm-colmasonry figure,.swm-colmasonry__cell{margin:0;overflow:hidden;background:var(--swm-mist)} .swm-colmasonry img{width:100%;height:100%;object-fit:cover;display:block} .swm-colmasonry__feat{position:relative;grid-column:1 / span 2;grid-row:1 / span 2} .swm-colmasonry__feat img{transition:opacity .35s var(--swm-ease)} .swm-colmasonry__feat figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.25rem;color:#fff; background:linear-gradient(180deg,transparent,rgba(12,12,13,.62))} .swm-colmasonry__feat figcaption .swm-label{display:block;opacity:.85;margin-bottom:.3rem} .swm-colmasonry__feat figcaption b{font-family:var(--swm-display);font-weight:400;text-transform:uppercase; font-size:clamp(1.25rem,2vw,2rem);line-height:1} /* feat top-left (2x2), plus three scattered tiles: top-right, bottom-left, bottom-right. The cells directly above and left of the bottom-right tile stay empty (white space). */ .swm-colmasonry__cell--1{grid-column:3;grid-row:1} .swm-colmasonry__cell--2{display:none} .swm-colmasonry__cell--3{grid-column:1;grid-row:3} .swm-colmasonry__cell--4{display:none} .swm-colmasonry__cell--5{grid-column:3;grid-row:3;display:block} /* Menu (pages) overlay reuses the masonry as a decorative random-image collage. */ .swm-menu__visual--masonry{padding:clamp(1rem,2vw,2rem);background:var(--swm-bone)} /* Brand mark - always dead-centre in the middle grid column. */ .swm-brand{justify-self:center;display:inline-flex;align-items:center;color:var(--swm-ink)} .swm-brand img{height:var(--swm-logo-h,50px);width:auto;max-width:220px;object-fit:contain;display:block} /* Inline SVG logo (near-square mark): sized by HEIGHT so it fits the header bar. The flame + white detail paths keep their colours; the black letterforms are currentColor in PHP, so they read ink on light headers and white over the hero. */ .swm-brand__svg{height:clamp(48px,7.5vh,66px);width:auto;display:block;color:var(--swm-ink);transition:height .45s var(--swm-ease)} .swm-header.is-stuck .swm-brand__svg{height:clamp(40px,5vh,52px)} @media(max-width:859px){.swm-brand__svg{height:46px}} /* Logo keeps its default colours over the hero too (no white recolour). */ .swm-brand__text{font-family:var(--swm-display);font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em} @media(max-width:859px){ .swm-brand img{height:var(--swm-logo-h-mobile,36px);max-width:170px} .swm-brand__svg{height:var(--swm-logo-h-mobile,36px)} } .swm-actions{justify-self:end;display:flex;align-items:center;gap:.35rem} .swm-iconbtn{position:relative;display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border:0;background:transparent;color:var(--swm-ink);cursor:pointer;border-radius:4px} .swm-iconbtn:hover{background:var(--swm-bone)} .swm-iconbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5} .swm-count{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 3px;border-radius:999px; background:var(--swm-oxblood);color:#fff;font-size:.6rem;font-weight:700;display:flex;align-items:center; justify-content:center;line-height:1} .swm-count[data-count="0"]{display:none} .swm-burger{display:inline-flex} @media(min-width:960px){.swm-burger{display:none}} /* ---- Mega menu ---- */ .swm-mega{position:absolute;left:0;right:0;top:100%;background:var(--swm-paper); border-top:1px solid var(--swm-mist);border-bottom:1px solid var(--swm-mist); padding:2rem var(--swm-gutter);display:grid; grid-template-columns:repeat(3,1fr) 1.3fr;gap:2rem; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity var(--swm-dur) var(--swm-ease),transform var(--swm-dur) var(--swm-ease),visibility var(--swm-dur)} .swm-has-mega:hover .swm-mega,.swm-has-mega:focus-within .swm-mega,.swm-mega.is-open{ opacity:1;visibility:visible;transform:translateY(0)} .swm-mega h4{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--swm-stone);margin:0 0 .8rem} .swm-mega ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem} .swm-mega a{font-size:.9rem;color:var(--swm-ink);text-decoration:none} .swm-mega a:hover{color:var(--swm-bronze)} .swm-mega__feat{position:relative;min-height:170px;border-radius:4px;overflow:hidden; display:flex;align-items:flex-end;padding:1.1rem;border:1px solid var(--swm-mist); background:radial-gradient(130% 90% at 70% 20%,color-mix(in srgb,var(--swm-bronze) 20%,var(--swm-bone)),var(--swm-bone))} .swm-mega__feat .k{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--swm-charcoal)} .swm-mega__feat .t{display:block;font-family:var(--swm-serif);font-size:1.2rem;margin-top:.2rem} /* ---- Overlay / drawer scaffolding ---- */ .swm-scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--swm-ink) 42%,transparent); opacity:0;visibility:hidden;transition:opacity var(--swm-dur);z-index:90} .swm-scrim.is-open{opacity:1;visibility:visible} .swm-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(400px,92vw);background:var(--swm-paper); z-index:100;display:flex;flex-direction:column;transform:translateX(100%); transition:transform .32s var(--swm-ease);box-shadow:-24px 0 60px -30px rgba(12,12,13,.5)} .swm-drawer.is-open{transform:translateX(0)} .swm-drawer__head{display:flex;align-items:center;justify-content:space-between; padding:1.1rem 1.25rem;border-bottom:1px solid var(--swm-mist)} .swm-drawer__head h2{font-family:var(--swm-serif);font-size:1.15rem;margin:0} .swm-drawer__body{flex:1;overflow-y:auto} .swm-drawer__foot{padding:1.25rem;border-top:1px solid var(--swm-mist)} /* free-shipping progress */ .swm-ship{padding:.9rem 1.25rem;border-bottom:1px solid var(--swm-mist)} .swm-ship p{margin:0 0 .5rem;font-size:.78rem;color:var(--swm-stone)} .swm-ship p b{color:var(--swm-green)} .swm-progress{height:4px;border-radius:3px;background:var(--swm-mist);overflow:hidden} .swm-progress span{display:block;height:100%;background:var(--swm-green);transition:width .4s var(--swm-ease)} /* ---- Mini-cart drawer (editorial bag, serotoninn-style) ---- */ /* Half the viewport, same as the size-guide drawer - two panels that slide in over the same page should be the same size. */ .swm-drawer[data-swm-drawer="cart"]{width:min(50vw,760px);max-width:100vw;height:100dvh;max-height:100dvh} @media(max-width:900px){.swm-drawer[data-swm-drawer="cart"]{width:100vw}} /* Strict 100dvh column: close head (auto) + items (flex, the only scroll region) + pinned subtotal/checkout foot - the drawer itself never scrolls. */ .swm-drawer[data-swm-drawer="cart"] [data-swm-cart-inner]{flex:1;min-height:0;display:flex;flex-direction:column} .swm-drawer[data-swm-drawer="cart"] .swm-minicart{flex:1;min-height:0;overflow-y:auto} .swm-drawer[data-swm-drawer="cart"] .swm-drawer__foot{flex:0 0 auto} .swm-drawer,.swm-minicart,.swm-drawer__body{overflow-x:hidden;max-width:100%} .swm-minicart__body{min-width:0} .swm-minicart__item>*{min-width:0} .swm-minicart__name{overflow-wrap:anywhere} /* The close button and the "YOUR BAG [n - ITEMS]" line are separate elements - the head is static, the bar is re-rendered on every cart update - so they are overlaid on one row of a shared height instead of stacking. */ .swm-drawer__head--bag{position:absolute;top:0;right:0;z-index:2;justify-content:flex-end; align-items:center;height:var(--swm-bag-head,64px);border-bottom:0;padding:0 1.5rem} .swm-minicart__bar{display:flex;align-items:center;gap:1.5rem; min-height:var(--swm-bag-head,64px);padding:0 4.75rem 0 1.75rem; border-bottom:1px solid var(--swm-mist)} @media(max-width:600px){ .swm-drawer__head--bag{--swm-bag-head:56px;padding-inline:1.1rem} .swm-minicart__bar{--swm-bag-head:56px;gap:1rem;padding-inline:1.1rem 4rem} } .swm-minicart__label{font-family:var(--swm-mono);font-weight:300;font-size:.75rem;letter-spacing:.16em; text-transform:uppercase;color:var(--swm-flame)} .swm-minicart__count{font-family:var(--swm-mono);font-weight:300;font-size:.75rem;letter-spacing:.12em; text-transform:uppercase;color:var(--swm-ink)} .swm-minicart__empty{padding:2.5rem 1.75rem;font-family:var(--swm-display);text-transform:uppercase;font-size:1.25rem} .swm-minicart__items{padding:0} .swm-minicart__item{display:grid;grid-template-columns:120px 1fr;gap:1.25rem;padding:1.5rem 1.75rem; border-bottom:1px solid var(--swm-mist);transition:opacity .2s} .swm-minicart__item.is-busy{opacity:.45;pointer-events:none} .swm-minicart__thumb img{width:120px;height:auto;aspect-ratio:3/4;object-fit:cover;background:var(--swm-mist);display:block} .swm-minicart__row1{display:flex;justify-content:space-between;align-items:baseline;gap:1rem} .swm-minicart__name{font-family:var(--swm-display);text-transform:uppercase;line-height:1;margin:0; font-size:clamp(1.1rem,2vw,1.5rem)} .swm-minicart__name a{color:var(--swm-ink)} .swm-minicart__name a:hover{color:var(--swm-flame)} .swm-minicart__price{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap} .swm-minicart__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.85rem 0} .swm-chip{font-family:var(--swm-mono);font-weight:300;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--swm-ink)} .swm-chip::before{content:"[ ";color:var(--swm-stone)} .swm-chip::after{content:" ]";color:var(--swm-stone)} .swm-minicart__row2{display:flex;align-items:center;justify-content:space-between;gap:.75rem 1rem;margin-top:1rem;flex-wrap:wrap} .swm-qty{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--swm-mono);font-size:.85rem} .swm-qty__btn{width:1.75rem;height:1.75rem;border:1px solid var(--swm-mist);background:transparent;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;font-size:1rem;line-height:1;color:var(--swm-ink); transition:border-color .2s var(--swm-ease)} .swm-qty__btn:hover{border-color:var(--swm-ink)} .swm-qty__n{min-width:1.4rem;text-align:center;font-variant-numeric:tabular-nums} .swm-qty--fixed{color:var(--swm-stone);font-family:var(--swm-mono);font-size:.85rem} .swm-minicart__acts{display:flex;gap:1rem;flex-wrap:wrap} .swm-minicart__act{background:none;border:0;padding:0;cursor:pointer;font-family:var(--swm-mono);font-weight:300; font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--swm-stone)} .swm-minicart__act:hover{color:var(--swm-flame)} .swm-minicart__cross{padding:1.5rem 0 1.5rem 1.75rem;border-bottom:1px solid var(--swm-mist)} .swm-minicart__crosshead{font-family:var(--swm-mono);font-weight:300;font-size:.75rem;letter-spacing:.14em; text-transform:uppercase;color:var(--swm-flame);margin:0 0 1rem} .swm-minicart__crossrail{display:grid;grid-auto-flow:column;grid-auto-columns:100px;gap:1.1rem;overflow-x:auto; padding-right:1.75rem;scrollbar-width:none;cursor:grab} .swm-minicart__crossrail::-webkit-scrollbar{display:none} /* Smaller than the cart thumb (120px); keep title + price, drop hover extras/meta. */ .swm-minicart__crossrail .swm-card__quick,.swm-minicart__crossrail .swm-card__wish, .swm-minicart__crossrail .swm-card__variants,.swm-minicart__crossrail .swm-card__meta, .swm-minicart__crossrail .swm-swatches{display:none} .swm-minicart__crossrail .swm-card__info{position:static;padding:.5rem .05rem 0;min-height:0} .swm-minicart__crossrail .swm-card__rest{opacity:1!important;transform:none!important} .swm-minicart__crossrail .swm-card__title{font-family:var(--swm-serif);font-size:.76rem;line-height:1.2;margin:.1rem 0 .25rem} .swm-minicart__crossrail .swm-price{font-size:.76rem} .swm-minicart__crossrail .swm-price .now{font-weight:600} .swm-minicart__crossrail .swm-price .was{font-size:.68rem} .swm-minicart__subtotal{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem} .swm-minicart__subLabel{font-family:var(--swm-mono);font-weight:300;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase} .swm-minicart__subtotal .swm-brushring{font-weight:600;font-size:1.05rem;font-variant-numeric:tabular-nums;padding:0 .35rem} .swm-minicart__viewbag{display:block;text-align:center;margin-top:1rem;font-family:var(--swm-mono);font-weight:300; font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--swm-stone)} .swm-minicart__viewbag:hover{color:var(--swm-ink)} .swm-minicart__cta{display:grid;grid-template-columns:1fr 1fr;gap:.6rem} @media(max-width:420px){.swm-minicart__cta{grid-template-columns:1fr}} @media(max-width:520px){.swm-minicart__item{grid-template-columns:88px 1fr;gap:1rem;padding:1.25rem}} /* ---- Search: full screen, black bar, recommendations rail ---- */ .swm-search{position:fixed;inset:0;z-index:95;background:var(--swm-bone); display:flex;flex-direction:column;overflow-y:auto; opacity:0;visibility:hidden;transition:opacity .35s var(--swm-ease),visibility .35s} .swm-search.is-open{opacity:1;visibility:visible} .swm-search__bar{flex:0 0 auto;background:var(--swm-ink);color:#fff; display:flex;align-items:center;justify-content:space-between; padding:1.25rem var(--swm-gutter)} .swm-search__word{font-size:clamp(2rem,5vw,3.5rem);margin:0;line-height:1;color:#fff} .swm-search__close{background:none;border:0;color:#fff;cursor:pointer;padding:.25rem; transition:transform .3s var(--swm-ease)} .swm-search__close:hover{transform:rotate(90deg)} .swm-search__body{flex:1;display:flex;flex-direction:column;padding-top:clamp(2rem,6vw,4rem)} .swm-search__field{display:flex;align-items:center;gap:1rem; border-bottom:1px solid var(--swm-mist);margin:0 var(--swm-gutter);padding-bottom:1rem} .swm-search__field input{flex:1;border:0;background:transparent;font-family:var(--swm-display); text-transform:uppercase;font-size:clamp(1.5rem,4vw,3rem);line-height:1.1;color:var(--swm-ink);padding:0} .swm-search__field input::placeholder{color:var(--swm-mist)} .swm-search__field input:focus{outline:none} /* ---- Ghost button: outline only, fills on hover ---- Used for the category shortcuts in the search overlay. Kept generic so the same treatment is available anywhere a secondary action needs to sit quietly beside real content. */ .swm-ghost{display:inline-flex;align-items:center;justify-content:center; padding:.6rem 1.1rem;border:1px solid var(--swm-mist);border-radius:var(--swm-radius); font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.14em; text-transform:uppercase;color:var(--swm-ink);white-space:nowrap;background:transparent; transition:border-color var(--swm-dur) var(--swm-ease),color var(--swm-dur) var(--swm-ease), background-color var(--swm-dur) var(--swm-ease)} .swm-ghost:hover,.swm-ghost:focus-visible{border-color:var(--swm-ink); background:var(--swm-ink);color:var(--swm-paper)} /* One row that scrolls sideways rather than wrapping onto a second line, so it never pushes the suggestions below the fold on a phone. */ .swm-search__cats{display:flex;gap:.5rem;padding-left:var(--swm-gutter); padding-right:var(--swm-gutter);margin-top:clamp(1.5rem,4vw,2.5rem); overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none} .swm-search__cats::-webkit-scrollbar{display:none} .swm-search__cats .swm-ghost{flex:0 0 auto} .swm-search__rail{margin-top:clamp(1.5rem,4vw,2.5rem);padding-left:var(--swm-gutter)} .swm-search__rail .swm-rail__title{color:var(--swm-flame)} .swm-search__rail .swm-rail__meta{gap:4rem} .swm-search__empty{grid-column:1/-1;align-self:center;color:var(--swm-stone); font-family:var(--swm-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase} /* ---- Product card: portrait, second image slides in, meta swaps to variants ---- */ .swm-card{position:relative} .swm-card__frame{position:relative;aspect-ratio:3/4;border-radius:0;overflow:hidden; background:var(--swm-paper);border:0} .swm-card__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .7s var(--swm-ease)} /* Second image slides over the first from the right. */ .swm-card__frame img.is-secondary{transform:translateX(100%)} .swm-card:hover .swm-card__frame img.is-primary, .swm-card:focus-within .swm-card__frame img.is-primary{transform:translateX(-14%)} .swm-card:hover .swm-card__frame img.is-secondary, .swm-card:focus-within .swm-card__frame img.is-secondary{transform:translateX(0)} .swm-card__badges{position:absolute;top:.6rem;left:.6rem;display:flex;flex-direction:column;gap:.55rem;z-index:2} /* Rounded pill: a solid, evenly-shaped chip. The colour per label is unchanged - it is the shape that changed, from a painted brush stamp to a pill. The brush treatment is kept in the theme (--swm-brush, .swm-btn--brush, .swm-brushring) and can be put back on these by restoring the masked ::before below. */ .swm-pill{align-self:flex-start; font-family:var(--swm-mono);font-weight:400;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase; line-height:1;padding:.4rem .75rem;color:var(--swm-paper);background:var(--swm-ink);border-radius:999px} .swm-pill--sale{background:var(--swm-oxblood)} /* The shipped labels. A label the owner adds later gets the default ink pill, which is legible on every photograph - so a new one is never invisible. */ .swm-pill--best, .swm-pill--bestseller{background:var(--swm-flame);color:var(--swm-ink)} .swm-pill--premium{background:var(--swm-bronze);color:var(--swm-ink)} .swm-pill--popular{background:var(--swm-green)} .swm-card__wish{position:absolute;top:.55rem;right:.55rem;z-index:3;width:34px;height:34px;border-radius:50%; border:1px solid var(--swm-mist);background:color-mix(in srgb,var(--swm-paper) 82%,transparent); backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;cursor:pointer} .swm-card__wish svg{width:16px;height:16px;fill:none;stroke:var(--swm-ink);stroke-width:1.6} .swm-card__wish[aria-pressed="true"] svg{fill:var(--swm-oxblood);stroke:var(--swm-oxblood)} /* WooCommerce appends its own "View cart" link after an AJAX add; the card's own button takes that job instead (see interface.js). */ .swm-card .added_to_cart{display:none!important} .swm-card__quick .swm-btn.is-added{background:var(--swm-flame);border-color:var(--swm-flame); color:var(--swm-ink)} .swm-card__quick{position:absolute;left:.5rem;right:.5rem;bottom:.5rem;z-index:2;display:flex;gap:.35rem; transform:translateY(calc(100% + .6rem));opacity:0; transition:transform .32s var(--swm-ease),opacity .32s} .swm-card:hover .swm-card__quick,.swm-card:focus-within /* WooCommerce appends its own "View cart" link after an AJAX add; the card's own button takes that job instead (see interface.js). */ .swm-card .added_to_cart{display:none!important} .swm-card__quick .swm-btn.is-added{background:var(--swm-flame);border-color:var(--swm-flame); color:var(--swm-ink)} .swm-card__quick{transform:translateY(0);opacity:1} /* Info row: name/price at rest, sizes + colours on hover (crossfade in place). */ .swm-card__info{position:relative;padding:.85rem .1rem 0;min-height:4.25rem} .swm-card__rest,.swm-card__variants{transition:opacity .35s var(--swm-ease),transform .35s var(--swm-ease)} .swm-card__variants{position:absolute;left:.1rem;right:.1rem;top:.85rem; display:flex;align-items:center;justify-content:space-between;gap:1rem; opacity:0;transform:translateY(6px);pointer-events:none} .swm-card:hover .swm-card__rest,.swm-card:focus-within .swm-card__rest{opacity:0;transform:translateY(-6px)} .swm-card:hover .swm-card__variants,.swm-card:focus-within .swm-card__variants{opacity:1;transform:translateY(0);pointer-events:auto} .swm-card__sizes{display:flex;gap:.4rem;flex-wrap:wrap} .swm-card__sizes span{font-family:var(--swm-mono);font-weight:400;font-size:.7rem;line-height:1; padding:.3rem .1rem;min-width:1.6rem;text-align:center;position:relative;color:var(--swm-ink)} .swm-card__sizes span::before{content:"(";color:var(--swm-stone)} .swm-card__sizes span::after{content:")";color:var(--swm-stone)} .swm-card__dots{display:flex;gap:.3rem;flex:0 0 auto} .swm-card__dots i{width:11px;height:11px;border-radius:50%;border:1px solid var(--swm-mist);display:block} .swm-card__meta{display:flex;justify-content:space-between;align-items:center} .swm-card__cat{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--swm-stone); font-family:var(--swm-mono);font-weight:300} .swm-rating{display:inline-flex;align-items:center;gap:.25rem;color:var(--swm-bronze);font-size:.72rem} .swm-rating b{color:var(--swm-stone);font-weight:400} .swm-card__title{font-family:var(--swm-serif);font-size:1.02rem;line-height:1.2;margin:.3rem 0 .5rem} .swm-card__title a{text-decoration:none;color:var(--swm-ink)} .swm-swatches{display:flex;gap:.35rem;margin:.1rem 0 .6rem} .swm-swatches i{width:15px;height:15px;border-radius:50%;border:1px solid var(--swm-mist);display:inline-block} .swm-price{display:flex;align-items:baseline;gap:.5rem;font-variant-numeric:tabular-nums} .swm-price .now{font-weight:600} .swm-price .was{color:var(--swm-stone);text-decoration:line-through;font-size:.85rem} .swm-price .off{font-size:.72rem;color:var(--swm-green);font-weight:600} .swm-lowstock{margin-top:.55rem} .swm-lowstock small{font-size:.68rem;color:var(--swm-oxblood)} /* ---- Footer ---- */ /* Editorial photo footer: nav top (main left / legal right), giant blended wordmark bottom-left, subscribe beneath it, legal row at the base. The photo carries a light-to-dark gradient (never a flat black). */ .swm-footer{position:relative;overflow:hidden;isolation:isolate;color:var(--swm-bone); background:linear-gradient(180deg,#6f6a64 0%,#847e77 44%,#403e3b 100%)} /* Owner photo as an ABSOLUTE, height-fitted image centred on the gradient (not a full-bleed cover) - the gradient shows around it, serotoninn-style. */ .swm-footer__photo{position:absolute;inset:0;z-index:0; background-image:var(--swm-footer-img,none);background-size:contain; background-position:right bottom;background-repeat:no-repeat} /* Subtle top-light / bottom-dark so the nav + legal + bottom row read over the image. */ .swm-footer__photo::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(12,12,13,0) 22%, rgba(12,12,13,0) 64%,rgba(12,12,13,.55) 100%)} /* 75vh tall, padding on all four sides (horizontal via .swm-container). */ .swm-footer__inner{--swm-foot-split:50%;position:relative;z-index:2;display:flex;flex-direction:column; min-height:75vh;padding:clamp(2rem,4vw,3rem) 48px clamp(1.5rem,3vw,2.25rem);max-width:none} @media(max-width:600px){.swm-footer__inner{padding-inline:24px}} .swm-footer a{text-decoration:none} .swm-footer a:hover{color:var(--swm-flame)} /* Nav: main links left, legal right. Small mono, light over the gradient. */ /* The nav keeps its own two columns and its right-aligned legal list; the split is set to match that column so the offer tab and the email field line up with where the legal column begins, rather than the nav bending to them. */ .swm-footer__nav{display:grid;grid-template-columns:var(--swm-foot-split) minmax(0,1fr); gap:1rem 2.5rem;align-items:start} .swm-footer__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem} /* The legal column is a four-column grid rather than a wrapping flex row: row one is justified across the column, and row two falls into the same columns, so the two rows share one rhythm instead of the second sitting wherever the wrap left it. The first column starts at the split, which is what the offer tab and the email field align to. */ .swm-footer__links--legal{display:grid;grid-template-columns:repeat(4,max-content); justify-content:space-between;gap:.6rem 1.4rem;align-items:start} .swm-footer__links--legal li{justify-self:start} @media(max-width:860px){ .swm-footer__links--legal{display:flex;flex-wrap:wrap;justify-content:flex-start} } .swm-footer__links a{font-family:var(--swm-mono);font-weight:300;font-size:.62rem;letter-spacing:.14em; text-transform:uppercase;color:var(--swm-bone)} .swm-footer__links a:hover{color:var(--swm-flame)} @media(max-width:640px){ .swm-footer__nav{grid-template-columns:1fr;gap:1.25rem} .swm-footer__links--legal{justify-content:flex-start} } /* Giant brand wordmark - pinned to the bottom, white fill + difference blend so the letters invert against the photo (the contrast-overlap effect). */ /* Left-aligned over the left-anchored image so the difference-blend contrast lands on it. */ /* Two-tone brand wordmark: SWAG in bone, MODE in flame (no blend, so the brand colours read true). Slight shadow keeps it legible over the photo. */ /* Just under the column, so the wordmark keeps clear air before the offer tab rather than running up against the next column's edge. */ .swm-footer__wm{display:block;width:88%;margin:0;line-height:0; cursor:pointer} .swm-footer__wm svg{display:block;width:100%;height:auto} .swm-footer__wm text{font-family:var(--swm-display);text-transform:uppercase;font-size:150px;letter-spacing:-2px} /* Typewriter chase through SWAG - MODE holds the brand flame. Exactly one letter is lit at a time and the loop runs straight on: four letters at .25s each is a 1s cycle, so G hands back to S with no pause. step-end stops the browser interpolating between the two fills; a linear curve tweened through the tints in between, which is what made the earlier version read as a gradient. */ .swm-footer__wm-l{fill:var(--swm-bone);animation:swmWmType 1s step-end infinite; animation-delay:calc(var(--i,0) * .25s)} @keyframes swmWmType{ 0%{fill:var(--swm-flame)} 25%{fill:var(--swm-bone)} 100%{fill:var(--swm-bone)} } @media(prefers-reduced-motion:reduce){ .swm-footer__wm-l{animation:none;fill:var(--swm-bone)} } .swm-footer__wm-swag{fill:var(--swm-bone)} .swm-footer__wm-mode{fill:var(--swm-flame)} .swm-footer__wm svg{filter:drop-shadow(0 2px 18px rgba(12,12,13,.35))} /* ---- Footer 2: the real logo in place of the drawn wordmark ---- It occupies the same slot, but at a size a logo can carry - the wordmark is type and reads at 55% of the footer; a logo blown up that far looks stretched and swamps the subscribe block beneath it. Capped in px so a large upload cannot break the layout, and the same drop shadow keeps it legible over the photograph. */ .swm-footer__mark{display:block;margin:0;line-height:0} .swm-footer__marklogo{display:block;width:auto;height:auto; max-width:min(320px,58vw);max-height:clamp(64px,12vw,132px);object-fit:contain; filter:drop-shadow(0 2px 18px rgba(12,12,13,.35))} @media(max-width:720px){ .swm-footer__marklogo{max-width:min(240px,66vw);max-height:96px} } /* Subscribe - beneath the wordmark, left, ~50% width. */ /* One split governs the nav, the mark row and the subscribe row, so everything in the right-hand column starts on the same line. */ /* The row owns the spacing above it so both cells are flush, which is what makes align-items:center put the tab on the mark's true centre rather than the centre of a box padded from the top. */ .swm-footer__markrow{display:grid;grid-template-columns:var(--swm-foot-split) minmax(0,1fr); align-items:center;gap:clamp(1.5rem,5vw,4rem);width:100%; margin-top:clamp(2rem,6vw,4rem)} .swm-footer__sub{width:100%;max-width:none;margin-top:clamp(1.25rem,3vw,2rem); display:grid;grid-template-columns:var(--swm-foot-split) minmax(0,1fr); align-items:end;gap:clamp(1.5rem,5vw,4rem)} @media(max-width:860px){ /* Stacked, there is no neighbouring column to clear. */ .swm-footer__wm{width:100%} .swm-footer__inner{--swm-foot-split:1fr} .swm-footer__markrow,.swm-footer__sub{grid-template-columns:1fr;gap:.9rem} /* Stacked, the tab sits directly under the mark and the brush edge reads as part of it. The row gap alone is not enough because the wordmark's own descender space and the brush's transparent margin meet in the middle. */ .swm-footer__markrow{gap:clamp(1.5rem,5vw,2.25rem)} } .swm-footer__subhead{font-family:var(--swm-display);text-transform:uppercase;color:var(--swm-bone); line-height:1;margin:0 0 1.25rem;display:flex;align-items:baseline;gap:.5rem; font-size:clamp(1.75rem,3.5vw,2.75rem)} .swm-footer__subhead em{font-family:var(--swm-mono);font-style:normal;font-size:.26em;letter-spacing:.08em; color:var(--swm-flame)} .swm-footer__subform{display:flex;align-items:center;gap:1rem;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:.6rem} .swm-footer__subform input{flex:1;background:transparent;border:0;color:var(--swm-bone);font-family:var(--swm-mono); font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;padding:.3rem 0} .swm-footer__subform input::placeholder{color:rgba(255,255,255,.55)} .swm-footer__subform input:focus{outline:none} .swm-footer__subform button{background:none;border:0;color:var(--swm-bone);cursor:pointer;white-space:nowrap; font-family:var(--swm-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase} .swm-footer__subform button:hover{color:var(--swm-flame)} /* ---- Footer 2: subscribe reads as one line, heading left, field right ---- Footer 1 stacks these under a wordmark that fills the width, so the column has something to sit beneath. Footer 2's logo is small by design, which left the right-hand half of the row empty - so the heading and the field share it instead, and the rule under the field runs to the far edge. */ /* Both footers read the same here: heading left, field right to the far edge, action hard right so the rule beneath matches the link rows above. */ .swm-footer__subhead{margin:0;align-self:end;white-space:nowrap; font-size:clamp(2.25rem,5.5vw,4rem)} .swm-footer__subhead em{font-size:.22em} .swm-footer__subform{margin:0 0 .55rem;gap:2rem} .swm-footer__subform button{margin-left:auto} @media(max-width:860px){ .swm-footer__subhead{white-space:normal} } /* ---- Discount tab: the way back to the offer card ---- The card is dismissible and remembers being dismissed, so without this a shopper who closed it could never see the code again. Drawn with the theme's own brush asset - the torn-paper look is the same idea, not the same artwork. */ .swm-footer__discount{justify-self:start;align-self:center; background:none;border:0;padding:0;cursor:pointer;line-height:1; transform:rotate(-3deg);transition:transform .35s var(--swm-ease)} .swm-footer__discount:hover, .swm-footer__discount:focus-visible{transform:rotate(-3deg) scale(1.04)} .swm-footer__discount-label{position:relative;z-index:1;display:inline-block; padding:.8rem 2rem;font-family:var(--swm-display);text-transform:uppercase; font-size:clamp(1.1rem,2.2vw,1.6rem);letter-spacing:.02em;color:var(--swm-ink)} /* The stroke carries the opacity, not the tab: putting it on the button would fade the label too, and the label has to stay legible against the brush. */ .swm-footer__discount-label::before{content:"";position:absolute;inset:-18% -10%;z-index:-1; background:#fff;opacity:.6;transition:opacity .3s var(--swm-ease); -webkit-mask:url(../images/brush-button.png) center/100% 100% no-repeat; mask:url(../images/brush-button.png) center/100% 100% no-repeat} .swm-footer__discount:hover .swm-footer__discount-label::before, .swm-footer__discount:focus-visible .swm-footer__discount-label::before{opacity:.8} /* No mask support is no reason to lose the control: fall back to a plain tab. */ @supports not (mask: url(../images/brush-button.png)){ .swm-footer__discount-label{background:rgba(255,255,255,.6)} .swm-footer__discount:hover .swm-footer__discount-label{background:rgba(255,255,255,.8)} } @media(max-width:860px){ .swm-footer__discount{justify-self:start;transform:none;margin:.5rem 0 1rem} .swm-footer__discount:hover,.swm-footer__discount:focus-visible{transform:scale(1.03)} } /* Below the split it goes back to stacking: a heading and a field side by side on a phone leaves neither enough room. */ @media(max-width:860px){ .swm-footer--logo .swm-footer__sub{grid-template-columns:1fr;gap:.9rem} .swm-footer--logo .swm-footer__subhead{white-space:normal} } .swm-footer__subdone{margin:.75rem 0 0;font-family:var(--swm-mono);font-size:.72rem;letter-spacing:.04em; text-transform:uppercase;color:var(--swm-bone)} .swm-footer__subdone b{color:var(--swm-flame)} /* ---- WhatsApp community invite ---- Deliberately not a floating green bubble: this storefront is quiet, and a badge hovering over every page is the opposite of that. It reads as another line of the footer, and takes the brand's own colours - the WhatsApp glyph inherits currentColor rather than arriving in someone else's green. */ .swm-community{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem} .swm-community__text{display:flex;flex-direction:column;gap:.35rem} .swm-community__head{margin:0;font-family:var(--swm-display);text-transform:uppercase; font-size:clamp(1rem,1.5vw,1.25rem);line-height:1;display:flex;align-items:baseline;gap:.5rem} .swm-community__head em{font-family:var(--swm-mono);font-style:normal;font-weight:300; font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--swm-stone)} .swm-community__note{margin:0;font-size:.85rem;line-height:1.5;color:var(--swm-stone);max-width:34ch} /* Shape, type, padding and the fill-from-bottom hover all come from .swm-btn - this only adds the glyph. The class is repeated so the button outranks `.swm-footer a:hover`, which paints every footer link flame and would otherwise put flame text on the flame fill. */ .swm-community .swm-community__link{margin-top:.2rem;text-decoration:none} .swm-community .swm-community__link:hover, .swm-community .swm-community__link:focus-visible{color:var(--swm-ink)} .swm-community__ico{display:inline-flex} .swm-community__ico svg{width:18px;height:18px} .swm-community__ext{font-size:.85em;opacity:.7} /* In the footer it takes the subscribe row's own split - words on the left, the button under the email field - so the right half is used and the two rows line up instead of the invite trailing off into empty space. */ .swm-footer__sub .swm-community{grid-column:1 / -1;display:grid; grid-template-columns:var(--swm-foot-split) minmax(0,1fr); align-items:center;gap:clamp(1rem,4vw,4rem); margin-top:clamp(1.25rem,3vw,1.75rem); padding-top:clamp(1.25rem,3vw,1.75rem);border-top:1px solid var(--swm-mist)} .swm-footer__sub .swm-community__link{margin-top:0;justify-self:start} @media(max-width:860px){ .swm-footer__sub .swm-community{grid-template-columns:1fr;gap:.9rem;align-items:start} } .swm-community--contact{margin-top:clamp(1.5rem,3vw,2rem);padding-top:clamp(1.25rem,2.5vw,1.75rem); border-top:1px solid var(--swm-mist)} /* On the order-received screen it is a block of its own, after the order table. */ .swm-community--thanks{margin:clamp(2rem,4vw,3rem) 0 0;padding:clamp(1.25rem,3vw,1.75rem); border:1px solid var(--swm-mist);background:var(--swm-bone)} /* Minimal social icon row (footer + contact). Horizontal, always. `.swm-footer ul` sets column direction, so scope tighter to win. */ .swm-social,.swm-footer ul.swm-footer__social{list-style:none;margin:.25rem 0 0;padding:0; display:flex;flex-flow:row wrap;align-items:center;gap:1.1rem} .swm-social a,.swm-footer__social a{display:inline-flex;align-items:center;justify-content:center; color:var(--swm-bone);transition:color var(--swm-dur) var(--swm-ease)} .swm-social a:hover,.swm-footer__social a:hover{color:var(--swm-flame)} .swm-social svg,.swm-footer__social svg{width:18px;height:18px;stroke-width:1.5} /* On light backgrounds (contact page) the icons should read ink, not bone. */ .swm-contact .swm-social a{color:var(--swm-ink)} .swm-contact .swm-social a:hover{color:var(--swm-flame)} .swm-contact__social{margin-top:1.75rem;display:flex;flex-direction:column;gap:.7rem} .swm-contact__social .swm-label{color:var(--swm-stone)} .swm-footer__bottom{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center; margin-top:clamp(1.5rem,3vw,2.25rem);padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.2); font-family:var(--swm-mono);font-weight:300;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--swm-bone)} .swm-footer__bottom a{font-size:.68rem;letter-spacing:.1em;color:var(--swm-bone)} .swm-footer__bottom .swm-footer__social{margin:0} /* Reveal footer: the footer is fixed to the bottom BEHIND the page content. The content sits on an opaque layer above it with a bottom margin equal to the footer's height (set in JS), so scrolling past the content uncovers the footer. No transforms - robust on every template regardless of the main's markup. */ /* Footer is fixed ON TOP of the page (above the content, below the header), hidden below the viewport at rest (translateY 100%), and slides UP over the content's tail as you reach the page end - the serotoninn reveal. JS drives translateY from scroll and sets main's bottom margin = footer height so there's room to scroll into. (Previously main was position:sticky, which froze the last screen and broke this.) */ .swm-reveal-footer .swm-footer{position:fixed;left:0;right:0;bottom:0;z-index:50;width:100%; transform:translateY(100%);will-change:transform} /* main is counter-translated DOWN by JS through the reveal zone (equal to how far you've scrolled into it) so its last screen appears frozen while the footer slides up over it - the serotoninn "page pins at the end" effect. */ .swm-reveal-footer main{position:relative;z-index:1;background:var(--swm-bone);min-height:100vh;will-change:transform} @media(prefers-reduced-motion:reduce){ .swm-reveal-footer .swm-footer{position:static;transform:none} .swm-reveal-footer main{transform:none!important} } /* ---- Product grid + card extras ---- */ .swm-product-grid{display:grid;gap:1.75rem 1.25rem;grid-template-columns:repeat(2,1fr)} @media(min-width:640px){.swm-product-grid{grid-template-columns:repeat(3,1fr)}} @media(min-width:1000px){.swm-product-grid{grid-template-columns:repeat(var(--swm-cols,4),1fr)}} .swm-ico.is-on{fill:var(--swm-bronze);stroke:var(--swm-bronze)} .swm-ico.is-off{stroke:var(--swm-mist)} .swm-card__soldout{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--swm-ink) 24%,transparent)} .swm-card__soldout span{background:var(--swm-paper);color:var(--swm-ink);font-size:.7rem;letter-spacing:.14em; text-transform:uppercase;padding:.5rem .9rem;border-radius:3px;border:1px solid var(--swm-mist)} .swm-card__frame:has(.swm-card__soldout){filter:grayscale(.35)} /* ---- Section scaffolding ---- */ .swm-section{padding-block:clamp(3rem,7vw,6rem)} .swm-section--tight{padding-block:clamp(2rem,4vw,3.5rem)} .swm-sectionhead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem; margin-bottom:clamp(1.5rem,3vw,2.5rem)} .swm-sectionhead .ey{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--swm-stone);display:block;margin-bottom:.6rem} .swm-sectionhead h2{font-family:var(--swm-serif);font-size:clamp(1.75rem,3.4vw,2.75rem);margin:0;line-height:1.05;text-wrap:balance} .swm-sectionhead a{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--swm-ink); text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem} .swm-sectionhead a:hover{color:var(--swm-bronze)} .swm-sectionhead a .swm-ico{transition:transform var(--swm-dur) var(--swm-ease)} .swm-sectionhead a:hover .swm-ico{transform:translateX(3px)} /* ---- Hero ---- */ .swm-hero{position:relative;min-height:clamp(78vh,86vh,900px);display:flex;align-items:flex-end; color:var(--swm-bone);overflow:hidden;background:var(--swm-charcoal)} .swm-hero__media{position:absolute;inset:0} /* Top centre: these are portraits, and cropping a hero from the middle takes the head off first. */ .swm-hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 0} /* Slides are stacked and crossfaded; only the active one is opaque, so there is never a moment with nothing behind the copy. */ .swm-hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--swm-ease)} .swm-hero__slide.is-active{opacity:1} .swm-hero::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(12,12,13,.15) 0%,rgba(12,12,13,0) 35%,rgba(12,12,13,.72) 100%)} .swm-hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(2.5rem,6vw,5rem)} /* Slide pager, bottom right. Every number keeps its own slot - the slots are a fixed size, so the active number growing does not shove the others sideways - and each one is a button, so a slide can be picked as well as waited for. */ .swm-hero__pager{position:absolute;z-index:3;right:var(--swm-gutter); bottom:clamp(1.25rem,3vw,2.25rem);display:flex;align-items:center;gap:.4rem;color:#fff} .swm-hero__page{width:2.6rem;height:2.2rem;display:grid;place-items:center;padding:0; border:0;background:none;cursor:pointer;color:inherit; font-variant-numeric:tabular-nums;line-height:1} .swm-hero__page span{font-family:var(--swm-mono);font-weight:300;font-size:.75rem; letter-spacing:.12em;opacity:.62;transition:font-size .45s var(--swm-ease),opacity .45s var(--swm-ease)} .swm-hero__page.is-active span{font-family:var(--swm-display);font-weight:400; font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:.02em;opacity:1} .swm-hero__page:hover span,.swm-hero__page:focus-visible span{opacity:1} .swm-hero__pager-sep{font-family:var(--swm-mono);font-weight:300;font-size:.75rem;opacity:.45} /* On a phone the buttons wrap the full width of the hero and run straight into the pager, so the copy block gives up the room the pager needs. */ @media(max-width:640px){ .swm-hero__inner{padding-bottom:calc(clamp(2.5rem,6vw,5rem) + 2.5rem)} } .swm-hero__eyebrow{font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--swm-bone);opacity:.85} .swm-hero h1{font-family:var(--swm-serif);font-size:clamp(2.75rem,7vw,6rem);line-height:.98;margin:.6rem 0 1rem; max-width:16ch;text-wrap:balance} .swm-hero p{max-width:44ch;font-size:1.05rem;opacity:.9;margin:0 0 1.75rem} .swm-hero__cta{display:flex;gap:.75rem;flex-wrap:wrap} /* Bone outline over the photograph, but the hover is the site's: the flame fills from the bottom and the label goes ink. This rule ties on specificity with `.swm-btn:hover` and sits later in the file, so without saying so explicitly the label stayed bone - flame text on a flame fill, 2.1:1. */ .swm-hero .swm-btn--secondary{color:var(--swm-bone);border-color:var(--swm-bone)} .swm-hero .swm-btn--secondary:hover, .swm-hero .swm-btn--secondary:focus-visible{color:var(--swm-ink);border-color:var(--swm-flame)} /* ---- Category rail: full-height panels, rotated names, real counts ---- */ .swm-catrail{margin-block:clamp(3rem,7vw,6rem);overflow:hidden} /* Fixed column width (not minmax) so the track actually overflows and scrolls - minmax lets the grid shrink columns to fit and the carousel never engages. */ .swm-catrail__track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,30vw,460px); gap:1.25rem;padding-inline:var(--swm-gutter);overflow-x:auto;overscroll-behavior-x:contain; scrollbar-width:none;cursor:grab} .swm-catrail__track::-webkit-scrollbar{display:none} .swm-catrail__track.is-dragging{cursor:grabbing;scroll-behavior:auto} /* One proportion everywhere: 3:4, with the height following the column width, so the tile is simply larger on a desktop and smaller on a phone rather than a different shape on each. Height used to be a share of the viewport while width came from the column, which only agreed above 1024px - below that the column pins at 260px and the tile kept growing taller. */ .swm-cat{position:relative;display:block;aspect-ratio:3/4; background:var(--swm-mist);color:#fff;overflow:hidden} /* Media fills the panel edge to edge. */ .swm-cat__media{position:absolute;inset:0;display:block} /* Cropped from the top, like the hero: these are portraits, and the subject - a face, a wrist, a bag held up - sits in the upper half of every one of them. A centre crop takes it off first. */ .swm-cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 0; transition:transform .9s var(--swm-ease);user-select:none;-webkit-user-drag:none} .swm-cat:hover img{transform:scale(1.05)} .swm-cat::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(12,12,13,.05) 0%,rgba(12,12,13,0) 45%,rgba(12,12,13,.72) 100%)} /* Rotated name pinned to the left edge, like a spine. */ .swm-cat__name{position:absolute;left:.9rem;bottom:1.25rem;z-index:2; writing-mode:vertical-rl;transform:rotate(180deg);transform-origin:center; font-family:var(--swm-display);text-transform:uppercase;font-size:clamp(1.5rem,2.4vw,2.5rem); line-height:1;letter-spacing:-.01em;pointer-events:none;color:#fff} .swm-cat__count{position:absolute;right:1rem;bottom:1.25rem;z-index:2; font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.1em; color:rgba(255,255,255,.75)} /* ---- Two categories, split left/right, with parallax media ---- */ .swm-duo{position:relative;margin-block:clamp(3rem,7vw,6rem)} .swm-duo__head{display:flex;align-items:baseline;gap:.5rem;margin-bottom:clamp(1.5rem,4vw,3rem)} .swm-duo__index,.swm-duo__label{font-family:var(--swm-mono);font-weight:400;font-size:.75rem; letter-spacing:.12em;text-transform:uppercase;color:var(--swm-flame);margin:0} .swm-duo__grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--swm-mist)} @media(min-width:840px){.swm-duo__grid{grid-template-columns:1fr 1fr;align-items:stretch}} /* Both duo cards keep an identical portrait ratio (esp. stacked on mobile). */ @media(max-width:839px){.swm-duo__half{min-height:0!important;aspect-ratio:3/4}} /* Fill-out on scroll: columns start narrow-centred and spread to full width. --swm-duo-fill (0..1) is driven by JS; defaults to full width for no-JS. */ @media(min-width:840px){ .swm-duo__grid[data-swm-duo-fill]{width:calc(60% + 40% * var(--swm-duo-fill,1)); margin-inline:auto;will-change:width} } @media(prefers-reduced-motion:reduce){ .swm-duo__grid[data-swm-duo-fill]{width:100%!important} } .swm-duo__half{position:relative;display:block;min-height:min(92vh,900px);overflow:hidden; background:var(--swm-paper);color:var(--swm-ink); padding:clamp(1.5rem,3vw,2.5rem) clamp(1.25rem,3vw,2.5rem)} .swm-duo__note{position:relative;z-index:2;margin:0;max-width:34ch; font-family:var(--swm-body);font-weight:600;font-size:.8rem;line-height:1.45;text-transform:uppercase} .swm-duo__half--right .swm-duo__note{margin-left:auto;text-align:right} /* Media sits behind the copy and drifts slower than the page. Over-sized vertically so the parallax never exposes an edge. */ .swm-duo__media{position:absolute;inset:-10% 0;z-index:1;pointer-events:none;overflow:hidden} .swm-duo__media img{width:100%;height:100%;object-fit:cover;object-position:center; transform:translate3d(0,var(--swm-par,0px),0);will-change:transform} /* Bottom-only bone fade so the MEN / WOMEN labels read; top stays clean. */ .swm-duo__half::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(255,249,247,0) 55%,rgba(255,249,247,.86) 100%)} .swm-duo__foot{position:absolute;left:clamp(1.25rem,3vw,2.5rem);right:clamp(1.25rem,3vw,2.5rem); bottom:clamp(1.25rem,3vw,2.5rem);z-index:2;display:flex;align-items:flex-end; justify-content:space-between;gap:1rem} .swm-duo__title{margin:0;font-size:clamp(2.25rem,5.5vw,4.75rem);line-height:.85;display:flex;align-items:flex-end} .swm-duo__title em{font-family:var(--swm-display);font-style:normal;font-size:.42em;line-height:1; margin-left:.1em;transform:translateY(-.15em)} .swm-duo__count{font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.1em; color:var(--swm-stone);white-space:nowrap} /* Lives in the head's flex row (not absolutely placed), so it shares the label's baseline and its right edge lands on the container gutter - label hard left, link hard right, both on one line. */ .swm-duo__see{margin-left:auto;flex:0 0 auto;white-space:nowrap; font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.12em; text-transform:uppercase;color:var(--swm-ink)} .swm-duo__see:hover{color:var(--swm-flame)} @media (prefers-reduced-motion:reduce){.swm-duo__media img{transform:none!important}} /* ---- Product rail: label column + single-row drag carousel ---- */ .swm-rail{display:grid;grid-template-columns:1fr;gap:1.5rem; margin-block:clamp(3rem,7vw,6rem);padding-left:var(--swm-gutter);overflow:hidden} @media(min-width:900px){.swm-rail{grid-template-columns:minmax(200px,22%) 1fr;gap:2rem}} .swm-rail__aside{display:flex;flex-direction:column;gap:1rem;padding-right:1rem} .swm-rail__head{display:flex;align-items:baseline;gap:.5rem} .swm-rail__index{font-family:var(--swm-mono);font-weight:400;font-size:.75rem;color:var(--swm-flame)} .swm-rail__title{font-size:clamp(1.1rem,1.6vw,1.4rem);margin:0;color:var(--swm-flame)} .swm-rail__all{font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.12em; text-transform:uppercase;color:var(--swm-ink);align-self:flex-start} .swm-rail__all:hover{color:var(--swm-flame)} .swm-rail__meta{display:flex;flex-direction:column;gap:2.5rem;margin-top:auto;padding-block:2rem; font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.12em; text-transform:uppercase;color:var(--swm-stone)} .swm-rail__bar{height:1px;background:var(--swm-mist);position:relative} .swm-rail__bar span{position:absolute;left:0;top:0;height:1px;width:var(--swm-rail-p,10%); background:var(--swm-ink);transition:width .1s linear} @media(max-width:899px){.swm-rail__meta{display:none}} /* Phone: title and "See all" share one line - title hard left, link hard right. The search overlay rail has no link, so it keeps its own single-column head. */ @media(max-width:899px){ .swm-rail:not(.swm-search__rail) .swm-rail__aside{position:relative;flex-direction:row; align-items:center;gap:1rem;padding-right:var(--swm-gutter)} .swm-rail:not(.swm-search__rail) .swm-rail__head{flex:1 1 auto;min-width:0;line-height:1.1} .swm-rail:not(.swm-search__rail) .swm-rail__all{flex:0 0 auto;margin-left:auto;align-self:center} /* Progress bar sits below the row, full width. */ .swm-rail:not(.swm-search__rail) .swm-rail__bar{position:absolute;left:0;right:var(--swm-gutter);bottom:-.75rem} } /* Single row, always. Fixed column width so the track overflows into a carousel. */ .swm-rail__track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,23vw,340px); grid-template-rows:1fr;gap:1.25rem;overflow-x:auto;overscroll-behavior-x:contain; padding-right:var(--swm-gutter);scrollbar-width:none;cursor:grab} .swm-rail__track::-webkit-scrollbar{display:none} .swm-rail__track.is-dragging{cursor:grabbing;scroll-behavior:auto} .swm-rail__track .swm-card img{user-select:none;-webkit-user-drag:none} @media(max-width:640px){.swm-rail__track{grid-auto-columns:minmax(200px,64vw);gap:1rem}} /* ---- Film: video inside the emblem, mask scales to full-bleed on scroll ---- The section is tall; an inner sticky pane holds the mask while you scroll through it. --swm-mask (set by JS) drives the mask size: small emblem -> open. */ .swm-film{position:relative;height:320vh;background:var(--swm-bone)} /* Grid: copy sits in its own row above the mask, so nothing overlaps the emblem. */ .swm-film__sticky{position:sticky;top:0;height:100vh;overflow:clip; display:grid;grid-template-rows:auto 1fr;align-items:start;justify-items:center; padding:calc(var(--swm-header-h) + 6vh) var(--swm-gutter) 8vh} /* Mask fills the pane; once it opens past the copy row it covers everything. */ .swm-film__mask{position:absolute;inset:0;z-index:1; -webkit-mask-image:var(--swm-mask-img);mask-image:var(--swm-mask-img); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center 62%;mask-position:center 62%; -webkit-mask-size:var(--swm-mask,22%) auto;mask-size:var(--swm-mask,22%) auto; will-change:mask-size} .swm-film__mask video,.swm-film__mask img{width:100%;height:100%;object-fit:cover;display:block} /* Copy occupies the first grid row - above the emblem, never behind it. */ .swm-film__intro{position:relative;z-index:3;text-align:center;max-width:60ch; opacity:var(--swm-film-intro,1);transition:opacity .25s linear;pointer-events:none} .swm-film__ey{display:block;color:var(--swm-flame);margin-bottom:1rem} .swm-film__title{font-size:clamp(2.5rem,7vw,6rem);margin:0 0 1rem;line-height:.9} .swm-film__text{max-width:52ch;margin-inline:auto;color:var(--swm-stone);font-size:.85rem} .swm-film__outro{position:absolute;z-index:3;bottom:12vh;left:50%;transform:translateX(-50%); opacity:var(--swm-film-outro,0);transition:opacity .3s linear; pointer-events:var(--swm-film-outro-pe,none)} .swm-btn--onfilm{background:transparent;border-color:#fff;color:#fff} .swm-btn--onfilm:hover{color:var(--swm-ink);border-color:var(--swm-flame)} .swm-film__tip{position:absolute;z-index:3;bottom:3vh;left:50%;transform:translateX(-50%); font-family:var(--swm-mono);font-weight:300;font-size:.625rem;letter-spacing:.18em;text-transform:uppercase; color:var(--swm-stone);opacity:var(--swm-film-intro,1);transition:opacity .25s linear} /* No JS / reduced motion: show the film opened, no scroll hijack feel. */ @media (prefers-reduced-motion:reduce){ .swm-film{height:auto} .swm-film__sticky{position:relative;height:80vh} .swm-film__mask{-webkit-mask-image:none;mask-image:none} .swm-film__intro{transform:none} } /* ---- Campaign: full-bleed media that zooms as it scrolls ---- */ .swm-campaign{position:relative;min-height:clamp(560px,92vh,1000px);display:flex;align-items:flex-end; overflow:clip;background:var(--swm-ink);color:#fff;margin-block:clamp(3rem,7vw,6rem)} .swm-campaign__media{position:absolute;inset:0;overflow:clip} .swm-campaign__media video,.swm-campaign__media img{width:100%;height:100%;object-fit:cover;display:block; transform:scale(var(--swm-zoom,1.25));transform-origin:center;will-change:transform} .swm-campaign::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(12,12,13,.25) 0%,rgba(12,12,13,0) 40%,rgba(12,12,13,.78) 100%)} .swm-campaign__inner{position:relative;z-index:2;width:100%;padding-block:clamp(2.5rem,6vw,5rem)} .swm-campaign__ey{display:block;color:var(--swm-flame);margin-bottom:1rem} .swm-campaign__title{font-size:clamp(2.75rem,9vw,8rem);margin:0 0 1rem;line-height:.9;max-width:14ch} .swm-campaign__text{max-width:44ch;margin:0 0 2rem;color:rgba(255,255,255,.82);font-size:.9rem} .swm-campaign .swm-btn{background:transparent;border-color:#fff;color:#fff} .swm-campaign .swm-btn:hover{color:var(--swm-ink);border-color:var(--swm-flame)} @media (prefers-reduced-motion:reduce){ .swm-campaign__media video,.swm-campaign__media img{transform:none!important} } /* ---- Editorial band (Mode Grid note) ---- */ .swm-editorial{position:relative;background:var(--swm-ink);color:var(--swm-bone);border-radius:6px;overflow:hidden; display:grid;grid-template-columns:1fr;gap:0} @media(min-width:860px){.swm-editorial{grid-template-columns:1.1fr .9fr}} .swm-editorial__media{position:relative;min-height:320px;background:var(--swm-charcoal)} .swm-editorial__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .swm-editorial__body{padding:clamp(2rem,4vw,3.5rem);display:flex;flex-direction:column;justify-content:center;gap:1rem} .swm-editorial__body .ey{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--swm-bronze)} .swm-editorial__body h2{font-family:var(--swm-serif);font-size:clamp(1.75rem,3.4vw,2.75rem);margin:0;line-height:1.05} .swm-editorial__body p{opacity:.82;max-width:46ch;margin:0} /* ---- Value props strip ---- */ .swm-values{display:grid;gap:1.25rem;grid-template-columns:repeat(2,1fr);border-block:1px solid var(--swm-mist); padding-block:clamp(1.75rem,3vw,2.5rem)} @media(min-width:820px){.swm-values{grid-template-columns:repeat(4,1fr)}} .swm-values-sec{margin-top:clamp(2rem,4vw,3.5rem)} .swm-value{display:flex;gap:.75rem;align-items:flex-start} .swm-value .swm-ico{color:var(--swm-bronze);flex:0 0 auto;margin-top:2px} .swm-value b{display:block;font-size:.92rem;margin-bottom:.15rem} .swm-value span{font-size:.82rem;color:var(--swm-stone);line-height:1.45} /* ---- Newsletter ---- */ .swm-news{background:var(--swm-bone);border:1px solid var(--swm-mist);border-radius:6px; padding:clamp(2rem,5vw,4rem);text-align:center} .swm-news h2{font-family:var(--swm-serif);font-size:clamp(1.75rem,3.4vw,2.75rem);margin:0 0 .6rem} .swm-news p{color:var(--swm-stone);max-width:46ch;margin:0 auto 1.5rem} .swm-news form{display:flex;gap:.5rem;max-width:440px;margin-inline:auto} .swm-news input{flex:1;border:1px solid var(--swm-ink);border-radius:4px;padding:.85rem 1rem; background:var(--swm-paper);font-family:var(--swm-sans)} .swm-news small{display:block;margin-top:.8rem;font-size:.72rem;color:var(--swm-stone)} /* ================= PDP ================= */ .swm-pdp-wrap{padding-block:var(--swm-page-top) clamp(3rem,6vw,5rem)} .swm-breadcrumb{display:flex;align-items:center;gap:.4rem;font-size:.75rem;letter-spacing:.04em; color:var(--swm-stone);margin-bottom:1.5rem;flex-wrap:wrap} .swm-breadcrumb a{color:var(--swm-stone);text-decoration:none} .swm-breadcrumb a:hover{color:var(--swm-ink)} .swm-breadcrumb span{color:var(--swm-ink)} /* Catalogue listings get the same trail, spaced off the page heading. */ .swm-breadcrumb--plp{margin-bottom:clamp(1rem,2vw,1.5rem);flex-wrap:wrap} .swm-pdp{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start} @media(min-width:960px){.swm-pdp{grid-template-columns:46px minmax(0,1.1fr) minmax(360px,.82fr);gap:clamp(1.5rem,3vw,3rem)}} /* Editorial meta spine (left rail of vertical labels). */ .swm-pdp__spine{display:none} @media(min-width:960px){ .swm-pdp__spine{display:flex;flex-direction:column;align-items:center;justify-content:space-between; position:sticky;top:calc(var(--swm-header-h) + 1.5rem);height:min(70vh,640px); border-right:1px solid var(--swm-mist);padding-right:.25rem} } .swm-pdp__spine span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap; font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.24em; text-transform:uppercase;color:var(--swm-stone)} .swm-pdp__spine-top{color:var(--swm-flame)} /* Product gallery - 2-column grid, portrait 3:4 tiles (6 images = 2x3). */ .swm-pdp__gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.5rem,1.2vw,.9rem)} .swm-pdp__gallery--empty{grid-template-columns:1fr} /* A lone image spans the full width instead of sitting at an awkward half. */ .swm-pdp__gallery:has(.swm-pdp__gitem:only-child){grid-template-columns:1fr} .swm-pdp__gitem{display:block;margin:0;padding:0;border:0;background:var(--swm-mist); cursor:zoom-in;aspect-ratio:3/4;overflow:hidden} .swm-pdp__gitem--ph{cursor:default;aspect-ratio:3/4} .swm-pdp__gitem img{width:100%;height:100%;object-fit:cover;display:block} /* Gallery lightbox */ .swm-lightbox{position:fixed;inset:0;z-index:200;background:rgba(12,12,13,.9); display:flex;align-items:center;justify-content:center;padding:5vh 5vw; opacity:0;transition:opacity .2s var(--swm-ease)} .swm-lightbox.is-open{opacity:1} .swm-lightbox img{max-width:100%;max-height:90vh;object-fit:contain;display:block} .swm-lightbox__close{position:absolute;top:1.1rem;right:1.4rem;background:none;border:0; color:#fff;font-size:1.4rem;line-height:1;cursor:pointer} .swm-pdp__railinner{position:static} /* Column stickiness is decided in pdp.js by comparing the two columns' heights: - is-media-sticky (gallery shorter than the rail): pin the gallery, the taller rail scrolls with the page. - is-dual-scroll (gallery taller than the rail): both columns become independent, viewport-tall scroll panes so each scrolls on its own. */ @media(min-width:960px){ .swm-pdp{--swm-pdp-top:calc(var(--swm-header-h) + 1.25rem)} .swm-pdp.is-media-sticky .swm-pdp__media{position:sticky;top:var(--swm-pdp-top);align-self:start} .swm-pdp.is-dual-scroll .swm-pdp__media, .swm-pdp.is-dual-scroll .swm-pdp__rail{position:sticky;top:var(--swm-pdp-top);align-self:start; max-height:calc(100vh - var(--swm-pdp-top) - 1rem);overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain} .swm-pdp.is-dual-scroll .swm-pdp__media::-webkit-scrollbar, .swm-pdp.is-dual-scroll .swm-pdp__rail::-webkit-scrollbar{display:none} } .swm-pdp__eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--swm-stone)} .swm-pdp__title{font-family:var(--swm-serif);font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1.05;margin:.5rem 0 .75rem;text-wrap:balance} .swm-pdp__rating{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--swm-stone);margin-bottom:1rem} .swm-pdp__price{font-size:1.35rem;margin:.25rem 0 .35rem} .swm-pdp__price .swm-price{display:inline-flex;align-items:baseline;gap:.4rem} .swm-pdp__price .swm-price::before{content:"(";color:var(--swm-flame);font-weight:600;font-size:1.55rem} .swm-pdp__price .swm-price::after{content:")";color:var(--swm-flame);font-weight:600;font-size:1.55rem} .swm-pdp__price .swm-price .now{font-size:1.55rem;color:var(--swm-flame);font-weight:600} .swm-pdp__tax{font-size:.78rem;color:var(--swm-stone);margin:0 0 1.25rem} .swm-pdp__short{color:var(--swm-charcoal);margin-bottom:1.25rem} .swm-pdp__highlights{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-direction:column;gap:.6rem} .swm-pdp__highlights li{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem} .swm-pdp__highlights .swm-ico{color:var(--swm-green);flex:0 0 auto;margin-top:2px} /* Stock state and the size-guide link share a row, pushed to opposite ends. */ .swm-pdp__stockrow{display:flex;align-items:center;justify-content:space-between;gap:1rem; flex-wrap:wrap;margin:0 0 1rem} .swm-pdp__stockrow .swm-pdp__stock,.swm-pdp__stockrow .swm-pdp__sizeguide{margin-bottom:0} .swm-pdp__stockrow .swm-pdp__sizeguide{margin-left:auto} .swm-pdp__stock{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1rem; font-family:var(--swm-mono);font-weight:300;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; color:var(--swm-ink)} .swm-stockdot{width:9px;height:9px;border-radius:50%;background:var(--swm-green);flex:0 0 auto} .swm-pdp__stock.is-low{color:var(--swm-oxblood)} .swm-pdp__stock.is-low .swm-stockdot{background:var(--swm-oxblood)} .swm-pdp__stock.is-out{color:var(--swm-stone)} .swm-pdp__stock.is-out .swm-stockdot{background:var(--swm-stone)} .swm-pdp__sizeguide{background:none;border:0;padding:0;margin:0 0 1rem;display:inline-flex;align-items:center;gap:.4rem; font-size:.82rem;color:var(--swm-ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px} /* Native add-to-cart form restyled */ .swm-pdp__buy{margin-bottom:1.25rem} /* Quantity box: square, no native spinner arrows, tight to the CTA. */ .swm-pdp__buy .quantity{display:inline-flex;align-items:center;border:1px solid var(--swm-ink); border-radius:0;overflow:hidden;margin:0 0 .75rem} .swm-pdp__buy .quantity input.qty{width:64px;text-align:center;border:0;padding:.9rem .25rem; font-variant-numeric:tabular-nums;background:transparent;-moz-appearance:textfield;appearance:textfield} .swm-pdp__buy .quantity input.qty::-webkit-outer-spin-button, .swm-pdp__buy .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* Add-to-cart button styling is owned by woocommerce.css (solid, full-width, flame hover). */ .swm-pdp__buy .swm-buynow{margin-top:.75rem;width:100%} .swm-pdp__buy form.cart{margin:0} .swm-pdp__buy .variations{width:100%;border-collapse:collapse;margin-bottom:1rem} .swm-pdp__buy .variations th{text-align:left;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; color:var(--swm-stone);padding:.5rem .75rem .5rem 0;vertical-align:middle;width:32%} .swm-pdp__buy .variations td{padding:.35rem 0 0;vertical-align:middle} /* Keep the chip row centred against its SIZE/COLOUR label (no bottom drop). */ .woocommerce .swm-pdp__buy table.variations tr td, .woocommerce .swm-pdp__buy table.variations tr th{padding-bottom:0!important;vertical-align:middle!important} .swm-pdp__buy .variations select{width:100%;padding:.7rem .8rem;border:1px solid var(--swm-mist);border-radius:4px; background:var(--swm-paper);font-family:var(--swm-sans)} .swm-pdp__buy .reset_variations{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; font-family:var(--swm-mono);color:var(--swm-stone);margin-left:.5rem} .swm-pdp__buy .woocommerce-variation-price{margin-bottom:.75rem;font-weight:600} .swm-pdp__buy .woocommerce-variation-availability{margin-bottom:.5rem;font-size:.85rem} /* Variation swatches (chips) replacing the "Choose an option" dropdowns. Bracketed mono, no box - the reference language. Size selected = filled ink disc; colour selected = flame strikethrough. */ .swm-pdp__buy .variations th{vertical-align:middle;font-family:var(--swm-mono); font-weight:300;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--swm-ink)} .swm-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;margin:0} .swm-swatch{position:relative;display:inline-flex;align-items:center;justify-content:center; font-family:var(--swm-mono);font-weight:300;font-size:.95rem;letter-spacing:.02em;line-height:1; color:var(--swm-ink);background:transparent;border:0;cursor:pointer;text-transform:uppercase; transition:color .2s var(--swm-ease)} .swm-swatch::before{content:"[\00a0";color:var(--swm-stone)} .swm-swatch::after{content:"\00a0]";color:var(--swm-stone)} .swm-swatch:hover{color:var(--swm-flame)} .swm-swatch.is-disabled{opacity:.3;cursor:not-allowed} .swm-swatch.is-disabled .swm-swatch__lbl{text-decoration:line-through} /* Size chips: uniform square so brackets and the selected disc share a baseline. */ .swm-swatches--size .swm-swatch{min-width:2.3rem;min-height:2.3rem;padding:0} .swm-swatches--size .swm-swatch.is-selected{border-radius:50%;background:var(--swm-ink);color:var(--swm-paper)} .swm-swatches--size .swm-swatch.is-selected::before, .swm-swatches--size .swm-swatch.is-selected::after{content:"";width:0} /* Colour chip: bracketed name + colour dot; selected = flame ring around the whole dot+label (same hand-drawn oval as the cart-drawer price). */ .swm-swatch--colour{padding:.35rem .1rem} .swm-swatch__inner{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.15rem .35rem} .swm-swatch--colour .swm-swatch__dot{display:inline-block;width:15px;height:15px;border-radius:50%; border:1px solid var(--swm-mist);flex:0 0 auto} .swm-swatch--colour.is-selected{color:var(--swm-ink)} .swm-swatch--colour.is-selected .swm-swatch__inner::before{content:"";position:absolute;inset:-45% -14%;z-index:-1; background:var(--swm-flame);-webkit-mask:var(--swm-circle) center/100% 100% no-repeat;mask:var(--swm-circle) center/100% 100% no-repeat} /* Clear (reset variations) sits at the right end without wrapping the chips. */ .swm-pdp__buy .reset_variations{float:right;margin:.35rem 0 0} .swm-swatches--colour{flex-wrap:nowrap} .swm-swatch--colour.is-selected .swm-swatch__lbl{text-decoration:none} .swm-pdp__actions{display:flex;gap:1.25rem;margin-bottom:1.5rem} .swm-pdp__act{background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem; font-size:.85rem;color:var(--swm-charcoal)} .swm-pdp__act:hover{color:var(--swm-ink)} .swm-pdp__act[aria-pressed="true"] .swm-ico{fill:var(--swm-oxblood);stroke:var(--swm-oxblood)} /* Delivery checker */ /* Same underline treatment as the contact and track-order forms - no box, one hairline, flame on focus. */ .swm-delivery{border:0;border-top:1px solid var(--swm-mist);border-radius:0; padding:1.25rem 0 0;margin-bottom:1.25rem} .swm-delivery__label{display:flex;align-items:center;gap:.4rem;margin-bottom:.75rem; font-family:var(--swm-mono);font-weight:300;font-size:.68rem;letter-spacing:.1em; text-transform:uppercase;color:var(--swm-stone)} .swm-delivery__row{display:flex;gap:1rem;align-items:stretch} .swm-delivery__row input{flex:1;min-width:0;border:0;border-bottom:1px solid var(--swm-ink); border-radius:0;background:transparent;padding:.55rem 0;font-family:var(--swm-sans); font-size:.95rem;color:var(--swm-ink);font-variant-numeric:tabular-nums} .swm-delivery__row input:focus{outline:none;border-bottom-color:var(--swm-flame)} .swm-delivery__row .swm-btn{flex:0 0 auto;padding:.85rem 1.5rem} .swm-delivery__result{margin:.6rem 0 0;font-size:.82rem;min-height:1em} .swm-delivery__result.is-ok{color:var(--swm-green)} .swm-delivery__result.is-bad{color:var(--swm-oxblood)} .swm-delivery__result b{color:inherit} .swm-pdp__trust{list-style:none;display:flex;flex-wrap:wrap;gap:1rem;margin:0 0 1rem;padding:1rem 0; border-top:1px solid var(--swm-mist);border-bottom:1px solid var(--swm-mist)} .swm-pdp__trust li{display:flex;align-items:center;gap:.45rem;font-size:.8rem;color:var(--swm-charcoal)} .swm-pdp__trust .swm-ico{color:var(--swm-bronze)} .swm-pdp__expert{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;font-size:.85rem; color:var(--swm-green);text-decoration:none;font-weight:600} /* Accordions */ .swm-pdp__details{max-width:900px;margin:clamp(2.5rem,5vw,4rem) 0 0} .swm-acc{border-top:1px solid var(--swm-mist)} .swm-acc:last-of-type{border-bottom:1px solid var(--swm-mist)} .swm-acc summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none; padding:1.25rem 0;font-family:var(--swm-display);text-transform:uppercase;letter-spacing:.01em; font-size:1.1rem} .swm-acc summary::-webkit-details-marker{display:none} .swm-acc__t{display:inline-flex;align-items:baseline;gap:.6rem} .swm-acc__t em{font-family:var(--swm-mono);font-style:normal;font-weight:300;font-size:.75rem; letter-spacing:.14em;color:var(--swm-flame)} /* Plus that rotates to an x when the panel opens. */ .swm-acc__x{position:relative;width:13px;height:13px;flex:0 0 auto;color:var(--swm-ink)} .swm-acc__x::before,.swm-acc__x::after{content:"";position:absolute;top:50%;left:0;width:13px;height:1.5px; background:currentColor;transition:transform var(--swm-dur) var(--swm-ease)} .swm-acc__x::after{transform:rotate(90deg)} .swm-acc[open] .swm-acc__x::before{transform:rotate(45deg)} .swm-acc[open] .swm-acc__x::after{transform:rotate(-45deg)} .swm-acc__body{padding:0 0 1.5rem;color:var(--swm-charcoal);line-height:1.7;max-width:70ch} .swm-spec{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.5rem;margin:0} .swm-spec dt{color:var(--swm-stone);font-size:.85rem} .swm-spec dd{margin:0;font-size:.9rem} .swm-pdp__reviews{max-width:900px;margin:clamp(2.5rem,5vw,4rem) 0 0} .swm-pdp__h{font-family:var(--swm-serif);font-size:clamp(1.5rem,3vw,2rem);margin:0 0 1.5rem} /* Modal (size guide) */ .swm-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%);z-index:100; width:min(680px,92vw);max-height:86vh;overflow:auto;background:var(--swm-paper);border-radius:8px; opacity:0;visibility:hidden;transition:opacity var(--swm-dur),transform var(--swm-dur) var(--swm-ease); box-shadow:0 40px 80px -40px rgba(12,12,13,.6)} .swm-modal.is-open{opacity:1;visibility:visible;transform:translate(-50%,-50%)} .swm-modal__head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.5rem;border-bottom:1px solid var(--swm-mist)} .swm-modal__head h2{font-family:var(--swm-serif);font-size:1.2rem;margin:0} .swm-modal__body{padding:1.5rem} .swm-modal__body table{width:100%;border-collapse:collapse} .swm-modal__body th,.swm-modal__body td{border:1px solid var(--swm-mist);padding:.6rem .8rem;text-align:left;font-size:.88rem} /* Mobile sticky add-to-cart bar */ .swm-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--swm-paper); border-top:1px solid var(--swm-mist);padding:.7rem var(--swm-gutter);display:none; align-items:center;gap:1rem;transform:translateY(100%);transition:transform .3s var(--swm-ease)} .swm-stickybar.is-shown{transform:translateY(0)} .swm-stickybar__price{font-weight:600;font-variant-numeric:tabular-nums;flex:1} .swm-stickybar .swm-btn{white-space:nowrap} @media(max-width:960px){.swm-stickybar{display:flex}} /* ================= PLP ================= */ .swm-plp{padding-block:var(--swm-page-top) clamp(3rem,6vw,5rem)} .swm-plp__head{margin-bottom:clamp(1.5rem,3vw,2.5rem)} .swm-plp__title{font-size:clamp(2rem,4.5vw,4rem);margin:0} .swm-plp__desc{color:var(--swm-stone);max-width:60ch;margin-top:.75rem} /* ---- Toolbar ---- 1fr auto 1fr so the item count sits dead-centre regardless of how many filters or how long the sort value is - same trick as the header wordmark. */ .swm-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem; padding-block:.75rem;border-top:1px solid var(--swm-mist);border-bottom:1px solid var(--swm-mist)} .swm-bar__left{display:flex;align-items:center;gap:.25rem;min-width:0} .swm-bar__right{display:flex;align-items:center;justify-content:flex-end;gap:1rem;min-width:0} .swm-bar__count{font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.14em; text-transform:uppercase;color:var(--swm-stone);white-space:nowrap;font-variant-numeric:tabular-nums} .swm-bar__mob{display:inline-flex;align-items:center;gap:.15rem;background:none;border:0;cursor:pointer; padding:.5rem .6rem;font-family:var(--swm-mono);font-weight:300;font-size:.6875rem; letter-spacing:.14em;text-transform:uppercase;color:var(--swm-ink)} .swm-bar__mob i{font-style:normal} /* ---- Dropdown: LABEL+ [VALUE] with a brush stroke behind the value ---- */ .swm-drop{position:relative} .swm-drop__btn{display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;cursor:pointer; padding:.5rem .6rem;font-family:var(--swm-mono);font-weight:300;font-size:.6875rem; letter-spacing:.14em;text-transform:uppercase;color:var(--swm-ink);white-space:nowrap} .swm-drop__label{display:inline-flex;align-items:center;gap:.15rem} .swm-drop__label i{font-style:normal;display:inline-block;transition:transform var(--swm-dur) var(--swm-ease)} .swm-drop.is-open .swm-drop__label i{transform:rotate(45deg)} /* + becomes x */ .swm-drop__val{position:relative;z-index:0;display:inline-flex;align-items:center; color:var(--swm-stone);transition:color var(--swm-dur) var(--swm-ease)} .swm-drop__val b{font-weight:inherit;display:inline-block;max-width:11ch;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom} /* The brush is a transparent PNG, so mask it and paint flame through - that keeps the accent tokenised instead of baked into the asset. */ .swm-drop__val::before{content:"";position:absolute;inset:-.5rem -.75rem;z-index:-1; background:var(--swm-flame); -webkit-mask:url(../images/brush-button.png) center/100% 100% no-repeat; mask:url(../images/brush-button.png) center/100% 100% no-repeat; transform:scaleX(0);transform-origin:left center; transition:transform .45s var(--swm-ease)} .swm-drop__btn:hover .swm-drop__val, .swm-drop.is-open .swm-drop__val, .swm-drop.has-value .swm-drop__val{color:var(--swm-ink)} .swm-drop__btn:hover .swm-drop__val::before, .swm-drop.is-open .swm-drop__val::before, .swm-drop.has-value .swm-drop__val::before{transform:scaleX(1)} .swm-drop__panel{position:absolute;top:calc(100% + .75rem);left:0;z-index:60;min-width:210px; max-height:min(58vh,420px);overflow-y:auto;padding:.5rem; background:var(--swm-paper);border:1px solid var(--swm-mist)} .swm-drop__panel[hidden]{display:none} .swm-bar__right .swm-drop__panel{left:auto;right:0} .swm-drop__list{list-style:none;margin:0;padding:0} .swm-drop__list a{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;white-space:nowrap; font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.14em; text-transform:uppercase;color:var(--swm-ink);transition:color var(--swm-dur) var(--swm-ease)} .swm-drop__opt{flex:1} .swm-drop__count{color:var(--swm-stone);font-variant-numeric:tabular-nums} .swm-drop__list a:hover{color:var(--swm-flame)} .swm-drop__list a:hover .swm-drop__count{color:inherit} .swm-drop__list a.is-active{color:var(--swm-flame);text-decoration:underline;text-underline-offset:4px} .swm-drop__dot{width:12px;height:12px;flex:none;display:block;border:1px solid var(--swm-mist)} .swm-drop__list.is-swatches a.is-active .swm-drop__dot{outline:1px solid var(--swm-ink);outline-offset:2px} .swm-pricefilter{padding:.35rem} .swm-pricefilter__row{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem} .swm-pricefilter__row input{width:100%;padding:.6rem .7rem;border:1px solid var(--swm-mist); border-radius:var(--swm-radius);background:var(--swm-paper);color:var(--swm-ink); font-variant-numeric:tabular-nums;font-family:var(--swm-mono);font-size:.75rem} .swm-pricefilter__row span{color:var(--swm-stone)} /* ---- Grid density ---- */ .swm-dense{display:none} @media(min-width:1000px){.swm-dense{display:inline-flex;align-items:center;gap:.1rem}} .swm-dense button{background:none;border:0;cursor:pointer;padding:.5rem .35rem; font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.14em; color:var(--swm-stone);transition:color var(--swm-dur) var(--swm-ease)} .swm-dense button i{font-style:normal;opacity:.45} .swm-dense button:hover{color:var(--swm-flame)} .swm-dense button[aria-pressed="true"]{color:var(--swm-ink)} .swm-dense button[aria-pressed="true"] i{opacity:1} .swm-plp__body{margin-top:clamp(1.75rem,3vw,2.5rem)} .swm-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.5rem} .swm-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .7rem; border-radius:var(--swm-radius);border:1px solid var(--swm-mist);background:transparent;color:var(--swm-ink); font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase; transition:border-color var(--swm-dur) var(--swm-ease),color var(--swm-dur) var(--swm-ease)} .swm-chip:hover{border-color:var(--swm-ink);color:var(--swm-flame)} .swm-chip .swm-ico{color:var(--swm-stone)} .swm-chip:hover .swm-ico{color:inherit} /* "Clear all" is an action, not a removable filter - read it as a quiet link. */ .swm-chip--clear{border-color:transparent;color:var(--swm-stone)} .swm-chip--clear:hover{border-color:transparent;color:var(--swm-flame);text-decoration:underline;text-underline-offset:4px} .swm-plp__empty{text-align:center;padding:clamp(3rem,8vw,6rem) 1rem} .swm-plp__empty h2{font-size:clamp(1.5rem,3vw,2.25rem);margin:0 0 .75rem} .swm-plp__empty p{color:var(--swm-stone);margin:0 0 1.75rem} .swm-pagination{margin-top:clamp(2.5rem,5vw,4rem)} .swm-pagination ul{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem;padding:0;margin:0;justify-content:center} .swm-pagination a,.swm-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px; padding:0 .5rem;border:1px solid var(--swm-mist);border-radius:var(--swm-radius);color:var(--swm-ink); font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.14em} .swm-pagination .current{background:var(--swm-ink);color:var(--swm-paper);border-color:var(--swm-ink)} .swm-pagination a:hover{border-color:var(--swm-ink);color:var(--swm-flame)} /* The inline filter row needs real width to stay on one line next to a centred count and the sort/density cluster. Below that it uses the drawer instead of wrapping - a wrapped bar pushes the count off-centre. */ @media(min-width:1280px){ .swm-bar__mob{display:none} .swm-plp__filters{display:flex;align-items:center;gap:.25rem;flex-wrap:nowrap} .swm-filters__head{display:none} } /* Narrow: same DOM, drawer layout - the dropdowns read as accordion rows. The accordion rules are scoped to the drawer on purpose: the sort dropdown lives in the toolbar, not in .swm-plp__filters, and a full-width button with a static panel there would run straight over the centred item count. */ @media(max-width:1279px){ .swm-plp__filters{position:fixed;top:0;left:0;height:100dvh;width:min(340px,88vw);background:var(--swm-paper); z-index:100;transform:translateX(-100%);transition:transform .32s var(--swm-ease);overflow-y:auto; padding:1.25rem;display:flex;flex-direction:column;align-items:stretch} .swm-plp__filters.is-open{transform:translateX(0);box-shadow:24px 0 60px -30px rgba(12,12,13,.5)} .swm-filters__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem} .swm-filters__head h2{font-size:1.35rem;margin:0} .swm-plp__filters .swm-drop{border-bottom:1px solid var(--swm-mist)} .swm-plp__filters .swm-drop__btn{width:100%;justify-content:space-between;padding:1rem 0} .swm-plp__filters .swm-drop__panel{position:static;border:0;padding:0 0 1rem;min-width:0; max-height:none;overflow:visible} } /* A three-column bar only balances while the outer cells fit their contents. Below that the count takes its own line so nothing has to overlap. */ @media(max-width:767px){ .swm-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem .75rem} .swm-bar__left,.swm-bar__right{flex:0 0 auto} .swm-bar__count{order:3;flex:1 0 100%;text-align:center;padding-block:.35rem} .swm-bar__mob,.swm-bar__right .swm-drop__btn{padding-inline:0} } /* Above the phone layout the outer cells size to their content and the count takes the space that is left. A fixed 1fr either side only balances while the filters happen to fit it: at five filters the row overflowed its track and ran straight over the centred count, and a sixth would do it again. */ @media(min-width:768px){ .swm-bar{grid-template-columns:auto minmax(0,1fr) auto} .swm-bar__count{text-align:center} } /* ================= Content pages ================= */ .swm-page{padding-block:var(--swm-page-top) clamp(3rem,6vw,5rem)} .swm-page__inner{padding-block:clamp(1.5rem,4vw,3rem) clamp(3rem,6vw,5rem)} .swm-page__title,.swm-page h1{font-family:var(--swm-serif);font-size:clamp(2rem,4.5vw,3.25rem); line-height:1.05;margin:0 0 1.5rem;text-wrap:balance} .swm-page :is(h2,h3){font-family:var(--swm-serif);font-weight:400;margin-top:2.5rem} .swm-page :is(p,li){max-width:70ch;line-height:1.75;color:var(--swm-charcoal)} .swm-page a{color:var(--swm-ink);text-underline-offset:3px} .swm-page__head{margin-bottom:clamp(2rem,4vw,3rem);max-width:60ch} .swm-page__head .ey{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--swm-stone);display:block;margin-bottom:.75rem} .swm-page__head h1{font-family:var(--swm-serif);font-size:clamp(2rem,4.5vw,3.25rem);line-height:1.05;margin:0 0 .75rem;text-wrap:balance} .swm-page__head p{color:var(--swm-stone);margin:0;font-size:1.05rem} .swm-muted{color:var(--swm-stone)} .swm-page__cta{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--swm-mist); display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap} .swm-page__cta p{margin:0;color:var(--swm-stone)} .swm-post__date{color:var(--swm-stone);font-size:.85rem;margin-bottom:1.5rem} /* Forms + notices */ .swm-form__row{margin-bottom:1rem;display:flex;flex-direction:column} .swm-form label{font-size:.8rem;color:var(--swm-charcoal);margin-bottom:.35rem} .swm-form input,.swm-form textarea{border:1px solid var(--swm-mist);border-radius:4px;padding:.8rem .9rem; font-family:var(--swm-sans);font-size:.95rem;background:var(--swm-paper);color:var(--swm-ink);width:100%} .swm-form input:focus,.swm-form textarea:focus{outline:2px solid var(--swm-bronze);outline-offset:1px;border-color:var(--swm-bronze)} .swm-hp{position:absolute!important;left:-9999px;height:0;overflow:hidden} .swm-notice{display:flex;align-items:center;gap:.5rem;border:1px solid var(--swm-mist);border-left:3px solid var(--swm-bronze); background:var(--swm-bone);border-radius:4px;padding:.9rem 1.1rem;font-size:.9rem;margin-bottom:1.25rem} .swm-notice.is-ok{border-left-color:var(--swm-green)} .swm-notice.is-ok .swm-ico{color:var(--swm-green)} .swm-notice.is-bad{border-left-color:var(--swm-oxblood);color:var(--swm-oxblood)} /* Contact */ .swm-contact{padding-block:var(--swm-page-top) clamp(3rem,6vw,5rem)} .swm-contact__grid{display:grid;gap:2.5rem;align-items:start} @media(min-width:880px){.swm-contact__grid{grid-template-columns:.8fr 1.2fr;gap:4rem}} .swm-contact__item{display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 0;border-bottom:1px solid var(--swm-mist)} .swm-contact__item .swm-ico{color:var(--swm-bronze);flex:0 0 auto;margin-top:2px} .swm-contact__item b{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--swm-stone);font-weight:600;margin-bottom:.25rem} .swm-contact__item a,.swm-contact__item span{color:var(--swm-ink);text-decoration:none;font-size:.95rem;line-height:1.6} .swm-contact__item a:hover{color:var(--swm-bronze)} .swm-contact__form{border:1px solid var(--swm-mist);border-radius:6px;padding:clamp(1.5rem,3vw,2rem);background:var(--swm-paper)} .swm-contact__map{margin-top:3rem;border-radius:6px;overflow:hidden;border:1px solid var(--swm-mist)} .swm-contact__map iframe{display:block;width:100%;min-height:340px;border:0} /* Editorial contact (big title, form left, image right, blurb + lines). */ .swm-contact--editorial{padding-block:var(--swm-page-top) clamp(3rem,6vw,5rem)} .swm-contact__wrap{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start} @media(min-width:700px){.swm-contact__wrap{grid-template-columns:1fr 1fr}} @media(min-width:1000px){.swm-contact__wrap{grid-template-columns:1.15fr .7fr .95fr}} .swm-contact__mid{align-self:end} @media(max-width:999px){.swm-contact__mid{align-self:start}} /* In 3-col the meta needs no top divider (it is its own column). */ @media(min-width:1000px){.swm-contact__meta{margin-top:0;border-top:0;padding-top:0}} .swm-contact__title{font-family:var(--swm-display);text-transform:uppercase;line-height:.88;margin:0 0 2rem; font-size:clamp(3rem,9vw,7rem)} .swm-contact__title span{color:var(--swm-flame)} .swm-contact--editorial .swm-contact__form{border:0;border-radius:0;padding:0;background:transparent} .swm-contact__fields{display:grid;grid-template-columns:1fr 1fr;gap:1.35rem 1.75rem;margin-bottom:1.9rem} .swm-contact__fields .swm-form__row--full{grid-column:1 / -1} @media(max-width:560px){.swm-contact__fields{grid-template-columns:1fr}} .swm-contact--editorial .swm-form__row{gap:.4rem;margin:0} .swm-contact--editorial .swm-form__row label{font-family:var(--swm-mono);font-weight:300;font-size:.68rem; letter-spacing:.12em;text-transform:uppercase;color:var(--swm-stone)} .swm-form__opt{opacity:.7} .swm-contact--editorial .swm-contact__form input, .swm-contact--editorial .swm-contact__form select, .swm-contact--editorial .swm-contact__form textarea{border:0;border-bottom:1px solid var(--swm-ink); background:transparent;border-radius:0;padding:.55rem 0;font-family:var(--swm-body);font-size:.95rem;color:var(--swm-ink)} .swm-contact--editorial .swm-contact__form input:focus, .swm-contact--editorial .swm-contact__form select:focus, .swm-contact--editorial .swm-contact__form textarea:focus{outline:none;border-bottom-color:var(--swm-flame)} .swm-contact--editorial .swm-contact__form select{appearance:none;cursor:pointer} .swm-contact__meta{margin-top:2.5rem;border-top:1px solid var(--swm-mist);padding-top:1.75rem} .swm-contact__blurb{text-transform:uppercase;font-size:.82rem;line-height:1.6;color:var(--swm-charcoal);max-width:46ch;margin:clamp(2rem,4vw,3rem) 0 1.25rem} .swm-contact__lines{list-style:none;margin:0 0 1.25rem;padding:0;display:flex;flex-direction:column;gap:.5rem;font-size:.85rem} .swm-contact__lines span{font-family:var(--swm-mono);font-weight:300;font-size:.68rem;letter-spacing:.1em; text-transform:uppercase;color:var(--swm-stone);margin-right:.5rem} .swm-contact__lines a:hover{color:var(--swm-flame)} /* serotoninn-style pairs: small mono label + parenthesised value. */ .swm-contact__lines--pair{gap:1.15rem} .swm-contact__lines--pair li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem} .swm-contact__lines--pair span{font-size:.6rem;letter-spacing:.14em;margin:0} .swm-contact__lines--pair a{font-size:1.02rem;font-weight:600;color:var(--swm-ink)} .swm-contact__lines--pair a::before{content:"("} .swm-contact__lines--pair a::after{content:")"} .swm-contact__lines--pair a:hover{color:var(--swm-flame)} .swm-contact--editorial .swm-contact__social{margin-top:0;flex-direction:row;align-items:center} .swm-contact__right{position:relative;background:var(--swm-mist);aspect-ratio:3/4;overflow:hidden} @media(min-width:900px){.swm-contact__right{position:sticky;top:calc(var(--swm-header-h) + 1.5rem); aspect-ratio:auto;height:min(82vh,780px)}} .swm-contact__right img{width:100%;height:100%;object-fit:cover;display:block} /* Search */ .swm-search-page{padding-block:var(--swm-page-top) clamp(3rem,6vw,5rem)} /* Same underline treatment as the contact, track-order and pincode fields. The rule belongs to the field, not the row, so it stops short of the button instead of running underneath it. */ .swm-searchform{display:flex;align-items:center;gap:clamp(1rem,2vw,1.75rem);border:0; padding:0;max-width:640px;margin-bottom:2.5rem;background:transparent} .swm-searchform__field{flex:1;min-width:0;display:flex;align-items:center;gap:.75rem; border-bottom:1px solid var(--swm-ink);transition:border-color var(--swm-dur) var(--swm-ease)} .swm-searchform__field:focus-within{border-bottom-color:var(--swm-flame)} .swm-searchform .swm-ico{color:var(--swm-stone);flex:0 0 auto} .swm-searchform input{flex:1;min-width:0;border:0;background:transparent;font-family:var(--swm-sans); font-size:1rem;padding:.55rem 0;color:var(--swm-ink)} .swm-searchform input:focus{outline:none} .swm-searchform .swm-btn{flex:0 0 auto;padding:.85rem 1.5rem} .swm-searchother{margin-top:2.5rem} .swm-searchother h2{font-family:var(--swm-serif);font-size:1.35rem;margin:0 0 1rem} .swm-searchother ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem} .swm-searchother a{color:var(--swm-ink)} /* 404 */ /* Editorial 404 - giant numerals with product imagery slotted between. */ .swm-404{padding-block:var(--swm-page-top) clamp(2rem,4vw,3rem)} .swm-404__top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:1rem; font-family:var(--swm-mono);font-weight:300;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase} .swm-404__nf{color:var(--swm-flame)} .swm-404__meta{display:flex;gap:2rem;color:var(--swm-stone)} /* overflow keeps the row from pushing the page sideways, but `hidden` also cut the round glyphs: Anton's 0 overshoots the cap height top and bottom, and a .78 line-height left the line box shorter than the glyph. Clip horizontally, give the digits room vertically. */ .swm-404__hero{display:flex;align-items:center;justify-content:center;gap:clamp(.4rem,1.8vw,1.4rem); margin:clamp(1.25rem,4vw,2.5rem) 0;flex-wrap:nowrap;overflow-x:clip;overflow-y:visible} .swm-404__digit{font-family:var(--swm-display);font-size:clamp(5rem,25vw,19rem);line-height:.92; color:var(--swm-ink);flex:0 0 auto;padding-block:.02em} .swm-404__slot{width:clamp(76px,13vw,210px);aspect-ratio:3/4;background:var(--swm-mist);overflow:hidden;flex:0 0 auto} .swm-404__slot img{width:100%;height:100%;object-fit:cover;display:block} .swm-404__tip{font-family:var(--swm-mono);font-weight:300;font-size:.72rem;letter-spacing:.1em; text-transform:uppercase;color:var(--swm-stone);margin:0 0 clamp(2rem,4vw,3rem)} .swm-404__tip b{color:var(--swm-flame);font-weight:400} .swm-404__foot{display:grid;gap:1.75rem;align-items:end;grid-template-columns:1fr} @media(min-width:900px){.swm-404__foot{grid-template-columns:1fr auto 1fr}} .swm-404__error{font-family:var(--swm-display);text-transform:uppercase;line-height:.85;margin:0; font-size:clamp(2.5rem,7vw,5rem)} .swm-404__error em{font-family:var(--swm-mono);font-style:normal;font-size:.26em;letter-spacing:.08em; color:var(--swm-stone);margin-left:.35em;vertical-align:baseline} .swm-404__foot .swm-btn--brush{justify-self:center} .swm-404__copy{color:var(--swm-charcoal);max-width:44ch;text-transform:uppercase;font-size:.8rem;line-height:1.55; justify-self:end;text-align:right;margin:0} @media(max-width:899px){.swm-404__copy{justify-self:start;text-align:left}} .swm-404 .swm-searchform{margin:clamp(2rem,4vw,3rem) auto 0;max-width:520px;width:100%} /* ---- Track order (editorial, 404-style shell) ---- */ .swm-track{padding-block:var(--swm-page-top) clamp(2.5rem,5vw,4rem)} .swm-track__top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:1rem; border-bottom:1px solid var(--swm-mist);padding-bottom:1rem;font-family:var(--swm-mono);font-weight:300; font-size:.72rem;letter-spacing:.14em;text-transform:uppercase} .swm-track__k{color:var(--swm-flame)} .swm-track__meta{display:flex;gap:2rem;color:var(--swm-stone)} /* Image sits in a right column spanning the heading AND the form, so a taller image never pushes the heading down or opens a gap above it. */ .swm-track__body{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start; margin:clamp(.5rem,2vw,1.25rem) 0 0} @media(min-width:820px){.swm-track__body{grid-template-columns:1.5fr .9fr}} .swm-track__main{min-width:0} .swm-track__headline{margin-bottom:clamp(1.5rem,3vw,2.5rem)} .swm-track__title{font-family:var(--swm-display);text-transform:uppercase;line-height:.85;margin:0; font-size:clamp(2.75rem,9vw,7rem)} .swm-track__title em{font-family:var(--swm-mono);font-style:normal;font-size:.16em;letter-spacing:.08em; color:var(--swm-stone);margin-left:.4em;vertical-align:baseline} .swm-track__lead{color:var(--swm-charcoal);max-width:44ch;margin:clamp(1.5rem,3vw,2.5rem) 0 0;font-size:1rem;line-height:1.6} .swm-track__slot{aspect-ratio:3/4;background:var(--swm-mist);overflow:hidden;height:clamp(360px,44vw,520px);width:auto;max-width:100%;justify-self:end} .swm-track__slot img{width:100%;height:100%;object-fit:cover;display:block} @media(max-width:767px){ /* Full width, natural height - no crop, no fixed box. */ .swm-track__slot{aspect-ratio:auto;height:auto;width:100%;justify-self:stretch} .swm-track__slot img{height:auto;object-fit:contain} } .swm-track__form{max-width:620px;margin-top:clamp(1.75rem,3vw,2.5rem)} .swm-track__form .woocommerce{margin:0} .swm-track__form form.track_order{display:grid;gap:1.25rem} .swm-track__form form.track_order p{margin:0;display:flex;flex-direction:column;gap:.4rem} /* Theme the WooCommerce order-tracking fields to match the rest of the store. */ .swm-track__form form.track_order label{font-family:var(--swm-mono);font-weight:300;font-size:.68rem; letter-spacing:.1em;text-transform:uppercase;color:var(--swm-stone);margin:0} /* Same underline treatment as the contact form - WooCommerce's own width and border rules need overriding to get there. */ .swm-track__form form.track_order p{width:100%!important;float:none!important} .swm-track__form form.track_order input.input-text{width:100%!important;border:0!important; border-bottom:1px solid var(--swm-ink)!important;border-radius:0!important;background:transparent!important; padding:.55rem 0!important;font-family:var(--swm-sans);font-size:.95rem;color:var(--swm-ink)} .swm-track__form form.track_order input.input-text:focus{outline:none;border-bottom-color:var(--swm-flame)!important} .swm-track__form form.track_order .button{display:inline-flex;align-items:center;justify-content:center; font-family:var(--swm-mono)!important;font-weight:400!important;font-size:.6875rem!important;letter-spacing:.14em;text-transform:uppercase!important; padding:1rem 2rem!important;border-radius:0!important;border:1px solid var(--swm-ink)!important; background:var(--swm-ink)!important;color:var(--swm-paper)!important;transform:none!important;justify-self:start; transition:background .3s var(--swm-ease),color .3s var(--swm-ease),border-color .3s var(--swm-ease)} .swm-track__form form.track_order .button:hover{background:var(--swm-flame)!important;border-color:var(--swm-flame)!important;color:var(--swm-ink)!important} .swm-track__foot{margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--swm-mist); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem} .swm-track__ctaline{margin:0;font-family:var(--swm-mono);font-weight:300;font-size:.75rem;letter-spacing:.08em; text-transform:uppercase;color:var(--swm-stone)} .swm-track__ctaline b{color:var(--swm-ink);font-weight:400} .swm-track__ctas{display:flex;flex-wrap:wrap;gap:.75rem} /* ---- About / Who we are (editorial) ---- */ .swm-about{padding-block:var(--swm-page-top) clamp(3rem,6vw,5rem)} .swm-about__top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:1rem; border-bottom:1px solid var(--swm-mist);padding-bottom:1rem;font-family:var(--swm-mono);font-weight:300; font-size:.72rem;letter-spacing:.14em;text-transform:uppercase} .swm-about__k{color:var(--swm-flame)} .swm-about__meta{display:flex;gap:2rem;color:var(--swm-stone)} /* The heading, the lead and the story are one column - they used to be a full-width block sitting above a two-column band, so the words started at the page edge, ran to different widths, and lined up with nothing. */ .swm-about__hero{margin:clamp(2rem,5vw,3.5rem) 0 clamp(1.75rem,4vw,2.75rem)} .swm-about__title{font-family:var(--swm-display);text-transform:uppercase;line-height:.92;margin:0; font-size:clamp(2.25rem,5vw,4.25rem);text-wrap:balance} .swm-about__lead{margin:clamp(1.5rem,3vw,2.25rem) 0 0;font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.55;color:var(--swm-charcoal)} /* Story + image band */ .swm-about__band{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:start} @media(min-width:900px){.swm-about__band{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(2.5rem,5vw,4.5rem)}} /* The column carries the measure, so the heading, the lead and the story all break on the same right edge instead of each choosing its own. */ .swm-about__col{max-width:62ch} .swm-about__story{color:var(--swm-charcoal)} .swm-about__story p{margin:0 0 1.15rem;font-size:1.02rem;line-height:1.8} .swm-about__story p:first-child{font-size:1.15rem;color:var(--swm-ink)} .swm-about__media{aspect-ratio:4/5;overflow:hidden;background:var(--swm-mist)} @media(min-width:900px){ .swm-about__media{position:sticky;top:calc(var(--swm-header-h) + 1.5rem); margin-top:clamp(2rem,5vw,3.5rem)} } .swm-about__media img{width:100%;height:100%;object-fit:cover;display:block} /* Pillars */ .swm-about__pillars{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,2.5rem); margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--swm-mist)} @media(min-width:640px){.swm-about__pillars{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.swm-about__pillars{grid-template-columns:repeat(4,1fr)}} .swm-about__pnum{font-family:var(--swm-mono);font-weight:300;font-size:.72rem;letter-spacing:.14em;color:var(--swm-flame)} .swm-about__pillar h3{font-family:var(--swm-display);text-transform:uppercase;font-size:clamp(1.1rem,1.8vw,1.4rem); line-height:1.05;margin:.6rem 0 .5rem} .swm-about__pillar p{color:var(--swm-stone);font-size:.9rem;line-height:1.6;margin:0} /* CTA */ .swm-about__cta{margin-top:clamp(3rem,6vw,5rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--swm-mist); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem} .swm-about__ctahead{font-family:var(--swm-display);text-transform:uppercase;line-height:.9;margin:0; font-size:clamp(2rem,5vw,3.75rem)} .swm-about__ctahead em{font-family:var(--swm-mono);font-style:normal;font-size:.18em;letter-spacing:.08em; color:var(--swm-stone);margin-left:.4em;vertical-align:baseline} /* ---- Wishlist / Favourites (saved left, auto-scroll product loop right) ---- */ .swm-wishlist{padding-block:var(--swm-page-top) clamp(3rem,6vw,5rem); display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,4vw,3.5rem);align-items:start} @media(min-width:900px){.swm-wishlist{grid-template-columns:1.5fr .85fr;align-items:start}} .swm-wishlist__head{margin-bottom:clamp(1.5rem,3vw,2.5rem)} .swm-wishlist__head .swm-label{display:block;color:var(--swm-stone);margin-bottom:.5rem} .swm-wishlist__title{font-family:var(--swm-display);text-transform:uppercase;line-height:1; font-size:clamp(2rem,5vw,3.5rem);margin:0} .swm-wishlist__count{color:var(--swm-stone);font-variant-numeric:tabular-nums;margin:.5rem 0 0; font-family:var(--swm-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase} .swm-wishlist__empty h2{font-family:var(--swm-display);text-transform:uppercase;font-size:clamp(1.4rem,3vw,2rem);margin:0 0 .6rem} .swm-wishlist__empty p{color:var(--swm-stone);max-width:42ch;margin:0 0 1.5rem;line-height:1.6} /* Right column: vertical auto-scrolling marquee of real products (loops seamlessly because the track holds two copies and translates -50%). Hidden on small screens. */ .swm-wishlist__right{display:none} /* On desktop the loop is a full-viewport-height sticky pane: it fills the whole column with no short clipping, runs UP behind the fixed header (negative margin cancels the header offset + the section's top padding) and DOWN behind the reveal footer, and stays put as the page scrolls. */ @media(min-width:900px){ .swm-wishlist__right{display:block;position:sticky;top:0;align-self:start;height:100vh; margin-top:calc(-1 * (var(--swm-hdr-offset,116px) + clamp(2rem,5vw,4rem)))} } .swm-vloop{position:relative;height:min(82vh,780px);overflow:hidden} @media(min-width:900px){.swm-vloop{position:absolute;inset:0;height:auto}} .swm-vloop__track{display:flex;flex-direction:column;align-items:center;gap:1.5rem; animation:swmVloop 48s linear infinite;will-change:transform} .swm-vloop:hover .swm-vloop__track{animation-play-state:paused} /* Compact cards, titles + prices kept (quick-actions hidden). */ .swm-vloop .swm-card{width:min(240px,80%)} .swm-vloop /* WooCommerce appends its own "View cart" link after an AJAX add; the card's own button takes that job instead (see interface.js). */ .swm-card .added_to_cart{display:none!important} .swm-card__quick .swm-btn.is-added{background:var(--swm-flame);border-color:var(--swm-flame); color:var(--swm-ink)} .swm-card__quick{display:none} .swm-vloop .swm-card__info{min-height:0;padding-top:.6rem} @keyframes swmVloop{to{transform:translateY(-50%)}} @media(prefers-reduced-motion:reduce){.swm-vloop__track{animation:none}} /* ---- Emblem cursor badge ---- */ .swm-cursor{position:fixed;top:0;left:0;z-index:110;width:104px;height:60px;pointer-events:none; display:grid;place-items:center;opacity:0; transform:translate3d(-999px,-999px,0) scale(.6); transition:opacity .25s var(--swm-ease),scale .35s var(--swm-ease)} .swm-cursor.is-on{opacity:1;scale:1} .swm-cursor__mark{position:absolute;inset:0;background:var(--swm-flame); -webkit-mask-image:var(--swm-cursor-img);mask-image:var(--swm-cursor-img); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain} .swm-cursor__label{position:relative;z-index:2;font-family:var(--swm-mono);font-weight:500; font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--swm-ink); background:var(--swm-bone);padding:.2rem .4rem;white-space:nowrap} @media (hover:none),(prefers-reduced-motion:reduce){.swm-cursor{display:none}} /* Hide the native pointer only where the badge takes over. */ .swm-cursor-zone{cursor:none} /* ---- Utilities ---- */ .swm-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} [hidden]{display:none!important} /* ---- Business identity block ([swm_identity]) ---- */ .swm-identity{display:flex;flex-direction:column;gap:.35rem;font-style:normal; font-size:.9rem;color:var(--swm-charcoal);line-height:1.5} .swm-identity__name{font-weight:600;color:var(--swm-ink)} .swm-identity__meta{display:flex;flex-wrap:wrap;gap:.15rem 1.25rem;margin-top:.3rem; color:var(--swm-stone);font-size:.8rem} .swm-identity__meta a:hover{color:var(--swm-flame)} /* ---- Newsletter sign-up card (floating) ---- */ .swm-signup{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:150; width:min(410px,92vw);background:var(--swm-paper);border:0;padding:2.1rem; transform:translateY(150%);opacity:0;visibility:hidden;overflow:visible; transition:transform .55s var(--swm-ease),opacity .4s var(--swm-ease),visibility .55s} .swm-signup.is-open{transform:translateY(0);opacity:1;visibility:visible} /* Dashed rectangle inset from the card edge, leaving white space around it. */ .swm-signup::before{content:"";position:absolute;inset:11px;border:1px dashed var(--swm-ink);pointer-events:none} /* Thread "holds" the card: ring lands just inside the right dashed line, cord spills out right. */ .swm-signup__holder{position:absolute;top:42%;right:-158px;left:auto;width:190px;height:auto;pointer-events:none; transform:none;z-index:1} .swm-signup__close{position:absolute;top:.85rem;right:.85rem;background:none;border:0;cursor:pointer; color:var(--swm-ink);display:inline-flex} .swm-signup__close:hover{color:var(--swm-flame)} .swm-signup__k{font-family:var(--swm-mono);font-weight:300;font-size:.7rem;letter-spacing:.16em; text-transform:uppercase;color:var(--swm-flame)} .swm-signup__lead{margin:.6rem 0 1.15rem;font-size:.92rem;line-height:1.5;color:var(--swm-charcoal)} .swm-signup__lead b{color:var(--swm-flame);font-weight:600} .swm-signup__form{display:flex;flex-direction:column;gap:.85rem} .swm-signup__form input{border:0;border-bottom:1px solid var(--swm-ink);background:transparent;padding:.6rem 0; font-family:var(--swm-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--swm-ink)} .swm-signup__form input::placeholder{color:var(--swm-stone)} .swm-signup__form input:focus{outline:none;border-bottom-color:var(--swm-flame)} .swm-signup__done{margin:.85rem 0 0;font-family:var(--swm-mono);font-size:.78rem;letter-spacing:.04em; text-transform:uppercase;line-height:1.5;color:var(--swm-ink)} .swm-signup__done b{color:var(--swm-flame)} @media(prefers-reduced-motion:reduce){.swm-signup{transition:opacity .3s,visibility .3s;transform:none}} /* The thread hangs 158px off the card's right edge - there is no room for that beside a card that already spans 92vw, so it goes on narrow screens. */ @media(max-width:720px){ .swm-signup{width:min(410px,calc(100vw - 2rem));padding:1.6rem} .swm-signup__holder{display:none} } /* ---- Journal (blog index) ---- */ .swm-journal{padding-block:var(--swm-page-top) clamp(2.5rem,6vw,5rem)} .swm-journal__head{margin-bottom:clamp(1.5rem,4vw,3rem)} .swm-journal__head .swm-label{color:var(--swm-stone);display:block;margin-bottom:.6rem} .swm-journal__head h1{font-family:var(--swm-display);font-size:clamp(2.25rem,5vw,4rem);margin:0;line-height:1} /* The journal is an index of writing. The card grid it replaces was built round a 3:4 image well with a grey ground, and not one of these pieces has a picture - so every card drew a large empty rectangle above two lines of type. */ .swm-journal__index{list-style:none;margin:0;padding:0;border-top:1px solid var(--swm-mist)} .swm-jrow{border-bottom:1px solid var(--swm-mist)} .swm-jrow__link{display:grid;grid-template-columns:auto 1fr auto;align-items:start; gap:clamp(1rem,3vw,2.5rem);padding:clamp(1.5rem,3vw,2.25rem) 0;color:var(--swm-ink); text-decoration:none;transition:padding-left .4s var(--swm-ease)} .swm-jrow__link:hover{padding-left:.75rem} .swm-jrow__n{font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.12em; color:var(--swm-flame);padding-top:.35rem;font-variant-numeric:tabular-nums} .swm-jrow__body{display:flex;flex-direction:column;gap:.55rem;min-width:0} .swm-jrow__meta{font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.12em; text-transform:uppercase;color:var(--swm-stone)} .swm-jrow__title{font-family:var(--swm-display);text-transform:uppercase;line-height:1; font-size:clamp(1.5rem,3.2vw,2.6rem);max-width:22ch;text-wrap:balance} /* On a wide row the single column left the title wrapping to six lines against an empty right half. Meta and title take the left of the row, the standfirst sits beside them, and the arrow keeps the grid's gap between itself and the text. */ @media(min-width:1024px){ .swm-jrow__body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); column-gap:clamp(2rem,4vw,4rem);row-gap:.6rem;align-items:start} .swm-jrow__meta{grid-column:1;grid-row:1} .swm-jrow__title{grid-column:1;grid-row:2;max-width:none} .swm-jrow__excerpt{grid-column:2;grid-row:1 / span 2;max-width:46ch;margin:0} .swm-jrow.has-media .swm-jrow__body{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} } .swm-jrow__link:hover .swm-jrow__title{color:var(--swm-flame)} .swm-jrow__excerpt{font-size:.95rem;color:var(--swm-charcoal);line-height:1.7;max-width:62ch} /* Only drawn when a post actually has a picture, so nothing reserves space for one that will never arrive. */ .swm-jrow__media{display:none} .swm-jrow.has-media .swm-jrow__media{display:block;width:clamp(90px,10vw,140px);aspect-ratio:3/4;overflow:hidden; background:var(--swm-mist)} .swm-jrow__media img{width:100%;height:100%;object-fit:cover;display:block} .swm-jrow__go{font-size:1rem;color:var(--swm-stone);padding-top:.3rem; transition:transform .4s var(--swm-ease),color .3s} .swm-jrow__link:hover .swm-jrow__go{transform:translateX(.35rem);color:var(--swm-flame)} @media(max-width:640px){ .swm-jrow__link{grid-template-columns:auto 1fr;gap:.9rem} .swm-jrow__go{display:none} } .swm-journal__pager{margin-top:clamp(2rem,4vw,3rem)} .swm-journal__pager ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0} .swm-journal__pager a,.swm-journal__pager span{display:inline-flex;align-items:center;justify-content:center; min-width:2.25rem;height:2.25rem;padding:0 .6rem;border:1px solid var(--swm-mist); font-family:var(--swm-mono);font-size:.75rem;color:var(--swm-ink)} .swm-journal__pager a:hover{border-color:var(--swm-ink)} .swm-journal__pager .current{background:var(--swm-ink);color:var(--swm-paper);border-color:var(--swm-ink)} /* ---- Article (single post) ---- */ .swm-article{padding-block:var(--swm-page-top) clamp(2.5rem,6vw,5rem)} .swm-article__inner{max-width:760px!important;margin-inline:auto} .swm-article__back a,.swm-article__more a{font-family:var(--swm-mono);font-weight:300;font-size:.6875rem; letter-spacing:.14em;text-transform:uppercase;color:var(--swm-stone)} .swm-article__back a:hover,.swm-article__more a:hover{color:var(--swm-flame)} .swm-article__cat{font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.14em; text-transform:uppercase;color:var(--swm-flame);margin:1.5rem 0 .5rem} .swm-article__cat a{color:var(--swm-flame)} .swm-article__title{font-family:var(--swm-display);text-transform:uppercase;line-height:1.02; font-size:clamp(1.9rem,4vw,3rem);margin:.2rem 0 .6rem} .swm-article__date{font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.12em; text-transform:uppercase;color:var(--swm-stone);margin-bottom:1.75rem} .swm-article__hero{margin:0 0 2rem} .swm-article__hero img{width:100%;height:auto;display:block} .swm-article__inner p{font-size:1.05rem;line-height:1.8;color:var(--swm-charcoal);margin:0 0 1.25rem} .swm-article__inner :is(h2,h3,h4,h5,h6),.swm-article__inner :is(h2,h3,h4,h5,h6).wp-block-heading{font-family:var(--swm-display); text-transform:uppercase;line-height:1.05;letter-spacing:-.01em;color:var(--swm-ink);margin:2.5rem 0 1rem} .swm-article__inner h2,.swm-article__inner h2.wp-block-heading{font-size:clamp(1.6rem,2.8vw,2.2rem)} /* h5/h6 in post content are authored as sub-heads; render them at h3 scale, not tiny. */ .swm-article__inner :is(h3,h5,h6),.swm-article__inner :is(h3,h5,h6).wp-block-heading{font-size:clamp(1.3rem,2.2vw,1.7rem)} .swm-article__inner h4,.swm-article__inner h4.wp-block-heading{font-size:clamp(1.05rem,1.6vw,1.3rem)} .swm-article__inner ul,.swm-article__inner ol{font-size:1.05rem;line-height:1.8;color:var(--swm-charcoal); margin:0 0 1.25rem;padding-left:1.25rem} .swm-article__inner li{margin-bottom:.5rem} .swm-article__foot{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--swm-mist); align-items:center;gap:1rem} .swm-article__tags a{font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.1em; text-transform:uppercase;color:var(--swm-stone);margin-right:.75rem} .swm-article__tags a:hover{color:var(--swm-ink)} /* ---- Parcel tracking panel (track-order page + account) ---- */ .swm-tracking{margin-top:clamp(1.5rem,3vw,2.5rem);padding-top:1.5rem;border-top:1px solid var(--swm-mist)} .swm-tracking--pending{margin-top:1.5rem;font-size:.85rem;color:var(--swm-stone)} .swm-tracking__title{font-family:var(--swm-display);text-transform:uppercase;font-size:1.1rem;margin:0 0 1rem} .swm-tracking__lines{list-style:none;margin:0 0 1.25rem;padding:0;display:flex;flex-direction:column;gap:.5rem; font-size:.9rem} .swm-tracking__lines span{display:inline-block;min-width:6.5rem;font-family:var(--swm-mono);font-weight:300; font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--swm-stone)} .swm-tracking__lines a{border-bottom:1px solid var(--swm-mist)} .swm-tracking__lines a:hover{color:var(--swm-flame);border-bottom-color:currentColor} .swm-tracking__link{margin:0} /* ---- Customer photos: a coverflow deck of real deliveries ---- The centre card sits square on; its neighbours are rotated away on the Y axis and dimmed, so depth comes from the photographs themselves rather than from shadows or gloss. Everything is driven by --swm-shot-i (the active index) and the per-card --i, set once in JS. */ /* The section does not clip: the emblem behind the photographs is bigger than it is and runs off its top, foot and sides on purpose. Horizontal spill is caught by `overflow-x:clip` on the body - `hidden` there would make the page a scroll container and break the sticky header. */ .swm-shots{position:relative;padding-block:clamp(2rem,4vw,3.25rem); border-top:1px solid var(--swm-mist)} .swm-shots__head{position:relative;z-index:1;max-width:52ch; margin:0 auto clamp(1rem,2vw,1.75rem);text-align:center;padding-inline:var(--swm-gutter)} .swm-shots__k{display:block;margin-bottom:.6rem;font-family:var(--swm-mono);font-weight:300; font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--swm-flame)} .swm-shots__title{font-family:var(--swm-display);text-transform:uppercase;line-height:1.05; font-size:clamp(1.5rem,3vw,2.4rem);margin:0} .swm-shots__lead{margin:.75rem auto 0;color:var(--swm-stone);max-width:46ch} /* The stage is a fixed-height field the sphere spins inside. Its height is what sets the globe's radius in JS, so the two can never disagree. */ /* Height comes off the viewport so the globe and its heading finish inside one screen; JS then sizes the sphere to whatever that leaves. */ .swm-shots__stage{position:relative;z-index:1;height:clamp(320px,62vh,640px);perspective:1500px; touch-action:pan-y;cursor:grab;overflow:hidden} .swm-shots__stage.is-dragging{cursor:grabbing} /* The sphere itself: one transform on this element turns every tile at once, so a drag costs a single composited change however many photos are on it. */ .swm-shots__deck{list-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%; width:0;height:0;transform-style:preserve-3d} /* Tiles are placed on the sphere's surface by JS - each one is rotated into its own latitude and longitude and then pushed out by the radius, so it faces outwards the way a panel on a globe does. */ /* Photographs stay square to the viewer wherever they sit in the cloud - they are moved in three dimensions but never turned, so none of them ever ends up edge-on. Margins pull each one back by half its own size (height is width x 4/3 at the 3:4 ratio), which centres it on its point. */ .swm-shots__item{position:absolute;top:0;left:0; margin:calc(var(--swm-tile,190px) * -0.6667) 0 0 calc(var(--swm-tile,190px) / -2); width:var(--swm-tile,190px);aspect-ratio:3/4; transition:opacity .3s linear} .swm-shots__img{width:100%;height:100%;object-fit:cover;display:block; background:var(--swm-mist);user-select:none;-webkit-user-drag:none;pointer-events:none} /* The emblem, drawn behind the photographs by a stroke that runs round it. The dash pattern is written in percentages because each path carries pathLength="100", so it survives the artwork being replaced. */ .swm-shots__mark{position:absolute;inset:0;pointer-events:none;z-index:0} /* Height is the measure: the emblem stands the full height of the section and no more, and its width follows from the artwork's own proportions - so on a wide screen it reaches past the sides, and it is never cropped top or bottom. Centred with a transform rather than by grid or flex alignment: an item larger than its container is pushed to the end by `place-items:center`, not centred, so the mark drifted right and low by a couple of hundred pixels. */ .swm-shots__mark svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); height:100%;width:auto;max-width:none;overflow:visible;opacity:.5} /* On a phone a full-height emblem would be four screens wide and read as two stray strokes, so there it is sized down to something recognisable. */ @media(max-width:640px){ .swm-shots__mark svg{height:auto;width:150vw} } .swm-shots__mark path{fill:none;stroke:var(--swm-flame);stroke-width:1.25; stroke-linejoin:round;vector-effect:non-scaling-stroke; stroke-dasharray:14 86;animation:swm-shots-run 11s linear infinite} /* The second path starts half a lap along, so the two strokes are never in step. */ .swm-shots__mark path:nth-of-type(2){animation-delay:-5.5s} @keyframes swm-shots-run{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}} /* The deck sits above the mark. */ .swm-shots__deck{z-index:1} /* A soft vignette in the page colour, so tiles fade out at the rim of the globe rather than ending on a hard edge. */ .swm-shots__stage::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse at 50% 50%, transparent 72%, var(--swm-bone) 99%)} @media(max-width:640px){ .swm-shots__stage{height:clamp(320px,86vw,420px)} } /* Reduced motion: no sphere, no spin. The photos become a plain scrollable row, which says exactly the same thing without moving on its own. */ @media(prefers-reduced-motion:reduce){ .swm-hero__slide{transition:none} .swm-shots__stage{height:auto;perspective:none;overflow-x:auto;scrollbar-width:none;cursor:default} .swm-shots__stage::after{display:none} .swm-shots__deck{position:static;width:auto;height:auto;transform:none!important; display:grid;grid-auto-flow:column;grid-auto-columns:clamp(200px,60vw,300px);gap:1rem; padding-inline:var(--swm-gutter)} .swm-shots__item{position:static;transform:none!important;margin:0!important;width:auto; backface-visibility:visible;border:0} .swm-shots__mark path{animation:none;stroke-dasharray:none;opacity:.5} .swm-shots__mark{display:none} } /* ---- Testimonials: one quote at a time ---- */ .swm-quotes{padding-block:clamp(3rem,7vw,6rem);border-top:1px solid var(--swm-mist); border-bottom:1px solid var(--swm-mist)} .swm-quotes__inner{display:grid;justify-items:center;text-align:center} .swm-quotes__head{max-width:52ch;margin-bottom:clamp(1.5rem,4vw,2.5rem)} .swm-quotes__head .ey{display:block;margin-bottom:.6rem;font-family:var(--swm-mono);font-weight:300; font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--swm-stone)} .swm-quotes__title{font-family:var(--swm-display);text-transform:uppercase;line-height:1.05; font-size:clamp(1.5rem,3vw,2.4rem);margin:0} .swm-quotes__summary{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap; margin:.9rem 0 0;font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.1em; text-transform:uppercase;color:var(--swm-stone)} .swm-stars{display:inline-flex;align-items:center;gap:.15rem;line-height:0} .swm-stars .is-on{color:var(--swm-flame)} .swm-stars .is-off{color:var(--swm-mist)} /* The stage keeps the height of the tallest quote so the page doesn't jump. */ .swm-quotes__stage{display:grid;width:min(100%,64ch)} .swm-quote{grid-area:1/1;margin:0;display:flex;flex-direction:column;align-items:center;gap:1rem} .swm-quote[hidden]{display:none} .swm-quote.is-current{animation:swm-quote-in .5s var(--swm-ease) both} @keyframes swm-quote-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .swm-quote__text{margin:0;quotes:none} /* Anton ships one heavy weight, which had the quote competing with the section title. The variable body face at medium keeps presence without shouting. */ .swm-quote__text p{margin:0;font-family:var(--swm-sans);font-weight:500;text-transform:none; line-height:1.4;font-size:clamp(1.15rem,2.2vw,1.75rem);letter-spacing:-.015em; color:var(--swm-ink);text-wrap:pretty} .swm-quote__text p::before{content:"\201C"} .swm-quote__text p::after{content:"\201D"} /* ---- Customer photos on a testimonial ---- Every photo is cropped to 3:4 whatever it arrives as, so a row of them reads as a set rather than a ragged strip. They sit between the quote and the name: the words are the review, the pictures are the evidence, the name signs it. Sized off the row rather than fixed, so two photos are not stretched wide and six do not shrink to stamps. */ .swm-quote__photos{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem; margin:1.5rem 0 0} .swm-quote__photo{margin:0;flex:0 0 auto;width:clamp(78px,20vw,116px)} .swm-quote__photo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover; background:var(--swm-mist)} /* A single photo can afford to be larger; it is the whole evidence, not one of a set. */ .swm-quote__photos[data-count="1"] .swm-quote__photo{width:clamp(104px,26vw,150px)} @media(max-width:520px){ .swm-quote__photos{gap:.45rem} .swm-quote__photo{width:clamp(68px,22vw,92px)} } .swm-quote__by{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap; font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.1em; text-transform:uppercase;color:var(--swm-stone)} .swm-quote__avatar{border-radius:50%;width:28px;height:28px;object-fit:cover} .swm-quote__name{color:var(--swm-ink)} .swm-quote__when::before,.swm-quote__src::before{content:"·";margin-right:.5rem;color:var(--swm-mist)} .swm-quote__src{color:var(--swm-stone);border-bottom:1px solid transparent} .swm-quote__src:hover{color:var(--swm-flame);border-bottom-color:currentColor} .swm-quotes__nav{display:flex;align-items:center;gap:1rem;margin-top:clamp(1.5rem,3vw,2.25rem)} .swm-quotes__arrow{appearance:none;background:none;border:1px solid var(--swm-mist);cursor:pointer; width:2.25rem;height:2.25rem;display:inline-flex;align-items:center;justify-content:center; color:var(--swm-ink);transition:border-color var(--swm-dur) var(--swm-ease),color var(--swm-dur) var(--swm-ease)} .swm-quotes__arrow:hover{border-color:var(--swm-ink);color:var(--swm-flame)} .swm-quotes__arrow:focus-visible,.swm-quotes__dot:focus-visible{outline:2px solid var(--swm-flame);outline-offset:2px} .swm-quotes__dots{display:flex;align-items:center;gap:.45rem} .swm-quotes__dot{appearance:none;border:0;cursor:pointer;padding:0;width:6px;height:6px;border-radius:50%; background:var(--swm-mist);transition:background-color var(--swm-dur) var(--swm-ease),transform var(--swm-dur) var(--swm-ease)} .swm-quotes__dot[aria-selected=true]{background:var(--swm-ink);transform:scale(1.4)} .swm-quotes__source{margin:1.25rem 0 0;font-family:var(--swm-mono);font-weight:300;font-size:.6875rem; letter-spacing:.12em;text-transform:uppercase} .swm-quotes__source a{color:var(--swm-stone);border-bottom:1px solid var(--swm-mist)} .swm-quotes__source a:hover{color:var(--swm-flame);border-bottom-color:currentColor} /* ---- Page sections (ACF builder; shared by every page) ---- */ .swm-sec{padding-block:clamp(2.5rem,6vw,5rem)} .swm-sec--bg-bone{background:var(--swm-bone)} .swm-sec--bg-ink{background:var(--swm-ink);color:var(--swm-paper)} .swm-sec--bg-ink :is(h1,h2,h3,.swm-sec__title){color:var(--swm-paper)} .swm-sec--bg-ink :is(p,li){color:color-mix(in srgb,var(--swm-paper) 78%,transparent)} .swm-sec--bg-ink .swm-btn{background:var(--swm-paper);color:var(--swm-ink);border-color:var(--swm-paper)} .swm-sec--spacer{padding-block:0} .swm-sec__head{margin-bottom:clamp(1.5rem,3vw,2.5rem);max-width:62ch} .swm-sec__head .ey{display:block;margin-bottom:.6rem;font-family:var(--swm-mono);font-weight:300;font-size:.6875rem; letter-spacing:.18em;text-transform:uppercase;color:var(--swm-stone)} .swm-sec__title{font-family:var(--swm-display);text-transform:uppercase;line-height:1.05; font-size:clamp(1.5rem,3vw,2.4rem);margin:0 0 .6rem;text-wrap:balance} .swm-sec__lead{margin:0;color:var(--swm-stone);font-size:1.02rem;line-height:1.7} /* Page header section */ .swm-sechero{position:relative} .swm-sechero--center{text-align:center} .swm-sechero--center .swm-sechero__body{margin-inline:auto} .swm-sechero--tall{padding-block:clamp(2rem,6vw,4.5rem)} .swm-sechero__media{position:absolute;inset:0;overflow:hidden;z-index:0} .swm-sechero__media img{width:100%;height:100%;object-fit:cover;opacity:.22} .swm-sechero__body{position:relative;z-index:1;max-width:64ch} .swm-sechero__body .ey{display:block;margin-bottom:.6rem;font-family:var(--swm-mono);font-weight:300; font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--swm-stone)} .swm-sechero__title{font-family:var(--swm-display);text-transform:uppercase;line-height:1.02; font-size:clamp(2rem,4.5vw,3.25rem);margin:0 0 .75rem;text-wrap:balance} .swm-sechero__lead{margin:0;color:var(--swm-stone);font-size:1.05rem;line-height:1.7} /* Text section */ .swm-sectext--narrow .swm-sectext__body{max-width:70ch} .swm-sectext--split{display:grid;gap:clamp(1.5rem,4vw,3rem)} @media (min-width:900px){.swm-sectext--split{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:start} .swm-sectext--split .swm-sec__head{margin-bottom:0}} .swm-sectext__body :is(p,li){color:var(--swm-charcoal);line-height:1.8} .swm-sectext__body p{margin:0 0 1.1rem} /* Image + text */ .swm-secmedia{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center} @media (min-width:900px){.swm-secmedia{grid-template-columns:repeat(2,minmax(0,1fr))} .swm-secmedia--right .swm-secmedia__media{order:2}} .swm-secmedia__media img{width:100%;height:auto;display:block} .swm-secmedia__text :is(p,li){color:var(--swm-charcoal);line-height:1.8} .swm-secmedia__text p{margin:0 0 1.1rem} .swm-secmedia .swm-sec__head{margin-bottom:1rem} /* Banner */ .swm-secbanner{position:relative;display:flex;align-items:flex-end;overflow:hidden; min-height:clamp(260px,32vw,380px);color:var(--swm-paper)} .swm-secbanner--tall{min-height:clamp(380px,52vw,620px)} .swm-secbanner__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .swm-secbanner::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.12) 62%)} .swm-secbanner__body{position:relative;z-index:2;padding-block:clamp(1.5rem,4vw,3rem);max-width:56ch} .swm-secbanner__body .ey{display:block;margin-bottom:.5rem;font-family:var(--swm-mono);font-weight:300; font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--swm-paper) 80%,transparent)} .swm-secbanner__title{font-family:var(--swm-display);text-transform:uppercase;line-height:1.03; font-size:clamp(1.7rem,3.6vw,2.8rem);margin:0 0 .6rem;color:var(--swm-paper)} .swm-secbanner__text{margin:0 0 1.2rem;color:color-mix(in srgb,var(--swm-paper) 84%,transparent);line-height:1.7} .swm-secbanner .swm-btn{background:var(--swm-paper);color:var(--swm-ink);border-color:var(--swm-paper)} /* Cards */ .swm-seccards{display:grid;gap:clamp(1rem,2.5vw,2rem);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} @media (min-width:900px){.swm-seccards{grid-template-columns:repeat(var(--swm-cols,3),minmax(0,1fr))}} .swm-seccard__media{margin-bottom:1rem;overflow:hidden} .swm-seccard__media img{width:100%;height:auto;display:block;transition:transform .6s var(--swm-ease)} .swm-seccard:hover .swm-seccard__media img{transform:scale(1.03)} .swm-seccard__title{font-family:var(--swm-display);text-transform:uppercase;font-size:1.05rem; letter-spacing:.01em;margin:0 0 .45rem} .swm-seccard__text{margin:0 0 .75rem;color:var(--swm-stone);line-height:1.7;font-size:.95rem} .swm-seccard__link{font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.14em; text-transform:uppercase;color:var(--swm-flame);border-bottom:1px solid currentColor;padding-bottom:2px} /* Gallery */ .swm-secgallery{display:grid;gap:clamp(.75rem,2vw,1.25rem);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} @media (min-width:900px){.swm-secgallery{grid-template-columns:repeat(var(--swm-cols,3),minmax(0,1fr))}} .swm-secgallery__item{margin:0} .swm-secgallery__item img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;display:block} /* Products carousel inside a section */ .swm-secproducts__track{display:flex;gap:clamp(.75rem,2vw,1.25rem);overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none} .swm-secproducts__track::-webkit-scrollbar{display:none} .swm-secproducts__track>*{flex:0 0 clamp(220px,42vw,300px);scroll-snap-align:start} /* CTA */ .swm-seccta{text-align:center;max-width:60ch;margin-inline:auto} .swm-seccta .ey{display:block;margin-bottom:.6rem;font-family:var(--swm-mono);font-weight:300;font-size:.6875rem; letter-spacing:.18em;text-transform:uppercase;color:var(--swm-stone)} .swm-seccta__title{font-family:var(--swm-display);text-transform:uppercase;line-height:1.05; font-size:clamp(1.6rem,3.4vw,2.6rem);margin:0 0 .7rem;text-wrap:balance} .swm-seccta__text{margin:0 0 1.4rem;color:var(--swm-stone);line-height:1.7} /* Spacer / rule */ .swm-secspacer--s{height:clamp(1rem,3vw,2rem)} .swm-secspacer--m{height:clamp(2rem,5vw,3.5rem)} .swm-secspacer--l{height:clamp(3rem,8vw,6rem)} .swm-secspacer.is-ruled{height:1px;background:var(--swm-mist);margin-block:clamp(1.5rem,4vw,3rem)} /* ---- FAQ topic tabs ---- */ .swm-faqtabs__tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:clamp(1.25rem,3vw,2rem); border-bottom:1px solid var(--swm-mist);padding-bottom:.6rem} .swm-faqtabs__tab{appearance:none;background:none;border:1px solid transparent;cursor:pointer; padding:.5rem .9rem;font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.14em; text-transform:uppercase;color:var(--swm-stone);transition:color var(--swm-dur) var(--swm-ease), background-color var(--swm-dur) var(--swm-ease),border-color var(--swm-dur) var(--swm-ease)} .swm-faqtabs__tab:hover{color:var(--swm-ink);border-color:var(--swm-mist)} .swm-faqtabs__tab[aria-selected=true]{background:var(--swm-ink);color:var(--swm-paper);border-color:var(--swm-ink)} .swm-faqtabs__tab:focus-visible{outline:2px solid var(--swm-flame);outline-offset:2px} .swm-faqtabs__panel:focus-visible{outline:2px solid var(--swm-flame);outline-offset:4px} /* The label repeats the tab for screen readers on narrow screens and no-JS. */ .swm-faqtabs__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .swm-faqtabs__panel[hidden]{display:none} .swm-faqtabs .swm-acc summary{padding-block:1.1rem} @media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}} /* ---- Empty cart: the 404 treatment, plus a horizontal product loop ---- */ .swm-empty{padding-block:clamp(2rem,5vw,3.5rem)} .swm-empty__top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem; padding-bottom:1rem;border-bottom:1px solid var(--swm-mist);font-family:var(--swm-mono); font-weight:300;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--swm-stone)} .swm-empty__meta{display:flex;gap:1rem} .swm-empty__hero{display:flex;align-items:center;justify-content:center;gap:clamp(.3rem,1.4vw,1rem); margin:clamp(1.5rem,4vw,3rem) 0 clamp(1rem,2vw,1.5rem);flex-wrap:nowrap; overflow-x:clip;overflow-y:visible} .swm-empty__letter{font-family:var(--swm-display);font-size:clamp(3rem,15vw,12rem);line-height:.92; letter-spacing:-.02em;color:var(--swm-ink);padding-block:.02em} .swm-empty__slot{width:clamp(48px,8vw,130px);aspect-ratio:3/4;background:var(--swm-mist); overflow:hidden;flex:0 0 auto} .swm-empty__slot img{width:100%;height:100%;object-fit:cover;display:block} .swm-empty__lead{max-width:46ch;margin:0 auto clamp(1.5rem,3vw,2rem);text-align:center; color:var(--swm-stone);font-size:1rem;line-height:1.7} .swm-empty__foot{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center} /* Horizontal marquee - the wishlist loop turned on its side. */ .swm-hloop,.swm-emptyloop{overflow:hidden;padding-block:clamp(1.5rem,3vw,2.5rem); border-top:1px solid var(--swm-mist);border-bottom:1px solid var(--swm-mist)} .swm-hloop__track,.swm-emptyloop__track{display:flex;align-items:flex-start;gap:1.5rem;width:max-content; animation:swmHloop 60s linear infinite;will-change:transform} .swm-emptyloop:hover .swm-hloop__track,.swm-emptyloop__track{animation-play-state:paused} .swm-hloop .swm-card,.swm-emptyloop .swm-card{width:clamp(180px,22vw,260px);flex:0 0 auto} .swm-hloop .swm-card__info,.swm-emptyloop .swm-card__info{min-height:0;padding-top:.6rem} @keyframes swmHloop{to{transform:translateX(-50%)}} /* Motion is decoration here; the rail stays readable and scrollable without it. */ @media(prefers-reduced-motion:reduce){ .swm-hloop__track,.swm-emptyloop__track{animation:none} .swm-hloop,.swm-emptyloop{overflow-x:auto} } /* ---- Mobile: trim the doubled gap above every page title ---- main already reserves the fixed header's height, then each page wrapper adds its own top padding on top of that, which reads as a dead band. Kept at the end of the file so it wins over the wrapper rules above at equal specificity. */ @media(max-width:767px){ .swm-plp,.swm-page,.swm-page__inner,.swm-contact,.swm-contact--editorial,.swm-404, /* Opening gap now comes from --swm-page-top, which already narrows on small screens. */ .swm-plp__head{margin-bottom:1.25rem} } /* ---- Size-guide drawer ---- A wide conversion table does not fit a centred modal on a laptop without either scrolling sideways or shrinking the type, so the guide slides in from the right at half the viewport and takes the full height. */ .swm-guide{position:fixed;top:0;right:0;z-index:100;width:min(50vw,760px);height:100dvh; background:var(--swm-paper);transform:translateX(100%);visibility:hidden; transition:transform .42s var(--swm-ease),visibility .42s; box-shadow:-24px 0 60px -30px rgba(12,12,13,.5);overflow-y:auto;overscroll-behavior:contain} .swm-guide.is-open{transform:translateX(0);visibility:visible} /* The dashed rule reads as a drawn measurement border rather than a UI panel. */ .swm-guide__inner{position:relative;min-height:100%;margin:1.25rem;padding:clamp(1.5rem,3vw,3rem); border:1px dashed var(--swm-ink)} .swm-guide__close{position:absolute;top:1.5rem;right:1.5rem;z-index:2;background:none;border:0; cursor:pointer;color:var(--swm-ink);display:inline-flex} .swm-guide__close:hover{color:var(--swm-flame)} /* The qualifier sits on the heading's own line - "(Women's footwear)" is longer than "(Men's footwear)", and a max-width in ch pushed only the longer one down, so the two charts did not look like the same design. */ .swm-guide__title{font-family:var(--swm-display);text-transform:uppercase;line-height:.95; font-size:clamp(1.75rem,3.6vw,3.25rem);margin:0 0 clamp(1.5rem,3vw,2.5rem); display:flex;flex-wrap:wrap;align-items:baseline;gap:.15em .4em} .swm-guide__title em{font-style:normal;font-size:.3em;letter-spacing:.02em;white-space:nowrap} .swm-guide__body{overflow-x:auto} /* Men's / Women's tabs - a unisex shoe carries two charts and only one applies to the shopper standing there, so they switch rather than stack. */ .swm-guide__tabs{display:flex;gap:2rem;margin:0 0 1.75rem;border-bottom:1px solid var(--swm-mist)} .swm-guide__tab{background:none;border:0;cursor:pointer;padding:0 0 .85rem;position:relative; font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.16em; text-transform:uppercase;color:var(--swm-stone);transition:color var(--swm-dur) var(--swm-ease)} .swm-guide__tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:var(--swm-ink);transform:scaleX(0);transform-origin:left center; transition:transform .35s var(--swm-ease)} .swm-guide__tab:hover{color:var(--swm-ink)} .swm-guide__tab.is-active{color:var(--swm-ink)} .swm-guide__tab.is-active::after{transform:scaleX(1)} .swm-guide__panel[hidden]{display:none} .swm-guide__body table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} .swm-guide__body th,.swm-guide__body td{padding:.85rem .6rem;text-align:left; border-bottom:1px solid var(--swm-mist);white-space:nowrap} .swm-guide__body th{font-family:var(--swm-mono);font-weight:300;font-size:.6875rem;letter-spacing:.14em; text-transform:uppercase;color:var(--swm-flame)} .swm-guide__body td{font-family:var(--swm-mono);font-weight:300;font-size:.8rem;letter-spacing:.06em} .swm-guide__body tr:last-child td{border-bottom:0} .swm-guide__body :is(h2,h3){font-family:var(--swm-display);text-transform:uppercase; font-size:1.1rem;margin:2rem 0 .75rem} .swm-guide__note{margin:1.75rem 0 0;padding-top:1.25rem;border-top:1px solid var(--swm-mist); color:var(--swm-stone);font-size:.82rem;line-height:1.6;max-width:52ch} /* Half a phone screen is unreadable, so it takes the screen. */ @media(max-width:900px){ .swm-guide{width:100%} .swm-guide__inner{margin:.75rem;padding:1.5rem 1.25rem} .swm-guide__close{top:1rem;right:1rem} } @media(prefers-reduced-motion:reduce){ .swm-guide{transition:visibility .2s,opacity .2s;opacity:0} .swm-guide.is-open{transform:none;opacity:1} } /* ---- Size scale switch (UK / EU / US) ---- Sits above the size row and only relabels it: same shoes, same stock. */ .swm-scaleswitch{display:inline-flex;align-items:center;gap:.9rem;margin:0 0 .6rem} .swm-scaleswitch__btn{background:none;border:0;padding:0 0 .2rem;cursor:pointer;position:relative; font-family:var(--swm-mono);font-weight:300;font-size:.625rem;letter-spacing:.16em; text-transform:uppercase;color:var(--swm-stone);transition:color var(--swm-dur) var(--swm-ease)} .swm-scaleswitch__btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:var(--swm-ink);transform:scaleX(0);transform-origin:left center; transition:transform .3s var(--swm-ease)} .swm-scaleswitch__btn:hover{color:var(--swm-ink)} .swm-scaleswitch__btn.is-active{color:var(--swm-ink)} .swm-scaleswitch__btn.is-active::after{transform:scaleX(1)} /* ---- Search overlay: the suggestions fit one fold ---- Placed at the end of the sheet on purpose. The rail rules further up carry the same specificity, so anything written beside them loses on load order - which is exactly what happened the first time these were added. The card is driven by its height here, not a width: the page rail's 340px card is ~450px of image before its text, more than the overlay has left once the bar, field and category row are counted. Width follows from the 3:4 ratio, so the row grows with the screen instead of overflowing it. */ /* Never clip: if a screen is too short for even the smallest card the panel scrolls, which is recoverable - a cut-off price is not. The card height below is derived from this same chrome, so in practice it does not engage. */ .swm-search__body{min-height:0;overflow-y:auto;overscroll-behavior:contain} .swm-search__rail{min-height:0;margin:48px 0; /* One source for the card box: the image height, and the width the 3:4 ratio gives it. The track column is set from the same value, so the text wraps inside the picture's width instead of stretching the column to fit it. */ /* Height left after the bar, field, category row, this margin and the card's own text - measured from the sheet rather than guessed, so the row hugs the fold at any window height instead of being cut off by it. */ /* A fifth smaller than it was, in both directions: the picture keeps its 3:4 shape, so narrowing the card shortens it too rather than cropping the sides harder. Ceiling 184px = the old 230px less a fifth. */ --swm-scard-h:clamp(96px,calc(100vh - 490px),184px); --swm-scard-w:calc(var(--swm-scard-h) * 0.75)} /* The label column carries two short lines; the width it gives back is worth roughly one more card on a laptop. */ @media(min-width:900px){ .swm-search__rail{grid-template-columns:minmax(120px,170px) 1fr;gap:1.5rem} } .swm-search__rail .swm-card__frame{height:var(--swm-scard-h);width:100%;aspect-ratio:auto} .swm-search__rail .swm-rail__track{grid-auto-columns:var(--swm-scard-w);gap:1.25rem} /* The hover swap is a page affordance. Leaving the detail block enabled while the resting block is forced visible drew both at once - the sizes and the drag badge landing on top of the title. The detail block is simply off here. */ /* Reserve the two-line title height, so a one-line name leaves the card the same height as its neighbours rather than the row stepping up and down. */ .swm-search__rail .swm-card__info{min-height:4.6rem;padding-top:.5rem} .swm-search__rail .swm-card__rest{opacity:1!important;transform:none!important} .swm-search__rail .swm-card__variants{display:none} .swm-search__rail .swm-card__cat{font-size:.6rem;letter-spacing:.12em} /* Two lines at most, wrapping rather than running past the card edge - a long product name must not decide the height of the whole row. */ .swm-search__rail .swm-card__title{font-size:.78rem;line-height:1.25;margin:.15rem 0 .2rem; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; overflow-wrap:anywhere} .swm-search__rail .swm-price{font-size:.78rem} .swm-search__rail .swm-card__low{display:none} /* Mobile: a phone shows two or three cards at a time whatever the size, so they can afford to be a fifth larger - both dimensions, keeping the 3:4 shape. The ceiling is the desktop 184px plus a fifth; the floor likewise. */ @media(max-width:640px){ /* 24px each side rather than 48: a phone has far less height to spend, and the margin is the cheapest place to find it. The budget below drops by the same 96px it frees, so a short phone gets a bigger card rather than dead space. */ .swm-search__rail{margin:24px 0;--swm-scard-h:clamp(115px,calc(100vh - 382px),221px)} .swm-search__rail .swm-rail__track{gap:1rem} } /* ---- The emblem in three dimensions ---- The SVG sits underneath as the placeholder and fades out once the model has loaded. If WebGL is missing or the fetch fails it simply stays, so the block is never an empty hole. */ .swm-logo3d{position:relative;display:grid;place-items:center; min-height:clamp(260px,42vh,460px)} .swm-logo3d__stage{position:absolute;inset:0;cursor:grab;touch-action:pan-y} .swm-logo3d__stage.is-dragging{cursor:grabbing} /* No width/height here: three.js sets both the buffer and the display size, and a second opinion in CSS is what stretched it. */ .swm-logo3d__stage canvas{display:block} /* Decorative, and it sits after the stage in the DOM: left taking the pointer it covers the middle of the mark once faded out, so the grab area survives only as two strips either side of the logo. */ .swm-logo3d__fallback{width:min(58%,320px);opacity:1;pointer-events:none; transition:opacity .6s var(--swm-ease)} .swm-logo3d__fallback svg{width:100%;height:auto;display:block} .swm-logo3d__fallback path{fill:var(--swm-ink)} .swm-logo3d.is-ready .swm-logo3d__fallback{opacity:0} .swm-logo3d__hint{position:absolute;left:50%;bottom:0;transform:translateX(-50%);margin:0; font-family:var(--swm-mono);font-weight:300;font-size:.62rem;letter-spacing:.14em; text-transform:uppercase;color:var(--swm-stone);opacity:0; transition:opacity .5s var(--swm-ease)} .swm-logo3d.is-ready .swm-logo3d__hint{opacity:1} /* Nothing to drag without WebGL, so the invitation goes away. */ .swm-logo3d.is-failed .swm-logo3d__hint{display:none} /* ---- Preloader ---- The same emblem, turned on its Y axis by a CSS transform. No library, no model, no request - it is the SVG that is already in the document, so it can paint on the first frame. */ .swm-preload{position:fixed;inset:0;z-index:9999;display:grid;place-items:center; background:var(--swm-bone);opacity:1;transition:opacity .45s var(--swm-ease)} .swm-preload.is-done{opacity:0;pointer-events:none} .swm-preload__mark{width:min(34vw,180px);perspective:600px} .swm-preload__mark svg{width:100%;height:auto;display:block; transform-style:preserve-3d;animation:swm-preload-spin 1.8s linear infinite} .swm-preload__mark path{fill:var(--swm-ink)} @keyframes swm-preload-spin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}} /* Reduced motion: the emblem holds still and the screen simply clears. */ @media(prefers-reduced-motion:reduce){ .swm-preload__mark svg{animation:none} } /* ---- The mark over the hero ---- Scenery, not layout: it sits above the photograph and below the copy, and only the model itself takes the pointer, so the words underneath stay selectable and the hero's own links keep working. */ .swm-hero__mark3d{position:absolute;z-index:3;pointer-events:none; top:50%;transform:translateY(-50%);right:clamp(1rem,5vw,5rem); width:clamp(140px,21vw,340px)} .swm-hero__mark3d .swm-logo3d{min-height:0;aspect-ratio:1;width:100%} .swm-hero__mark3d .swm-logo3d__stage{pointer-events:auto} /* On the hero the placeholder is white - it sits on a photograph, not on paper. */ .swm-logo3d--hero .swm-logo3d__fallback path{fill:#fff} .swm-logo3d--hero .swm-logo3d__hint{display:none} /* A phone hero is type from the eyebrow down to the buttons, with the slide counter under those - vertically centred put the mark straight through the headline. Up in the corner instead, below the header and above where the copy starts: the one band of the picture nothing else uses. */ @media(max-width:860px){ /* Left, on the container's own gutter, so it starts where the eyebrow and the headline start rather than floating in the opposite corner. */ .swm-hero__mark3d{top:clamp(4.5rem,13vh,7.5rem);transform:none; left:var(--swm-gutter);right:auto;width:clamp(100px,26vw,170px)} } /* ---- The mark in the footer ---- In place of the wordmark, at the size the wordmark had. Not a link: dragging it would end in a navigation. */ /* Left column, where the wordmark it replaces used to sit - not centred across the whole row. */ /* Its own layer inside the footer, and an explicit hit area: the footer is a fixed, transformed element that slides up over the page, and the canvas was not taking the cursor there the way it does in the hero. */ .swm-footer__mark3d{grid-column:1;justify-self:start;position:relative;z-index:3} .swm-footer__mark3d .swm-logo3d__stage{pointer-events:auto;touch-action:none} /* Near-square, because the frame has to hold the mark's widest turn in both directions. A letterbox 260x110 left it filling 93% of the height and 39% of the width, so it read as small with a lot of empty canvas beside it. */ /* The canvas is sized to the mark, not the column: it is the canvas that takes the cursor, so any spare canvas becomes grab area sitting beside the logo rather than on it. Near-square, because the frame holds the widest turn. */ .swm-footer__mark3d .swm-logo3d{width:min(100%,230px);min-height:clamp(180px,22vh,230px); /* The canvas starts at the column's left edge but the letters do not: the camera frames the model's bounding sphere, which leaves clear space either side of a wide wordmark. logo3d.js measures that gap and publishes it, so the box slides left by exactly as much as the mark is inset - and the mark lines up with the nav and the legal links above it. The canvas moves with it, so what you see and what you can grab stay the same rectangle. */ margin-left:calc(-1 * var(--swm-logo3d-inset, 0px))} /* The block is a centring grid, so the placeholder SVG sat in the middle of the canvas - half the gap in from the left, while the nav and the legal links above it start hard on the column edge. It is what shows before the model arrives and what stays if WebGL is missing, so it has to land where the mark lands: at the start of the column, with the parent's leftward inset shift cancelled so the two agree. */ .swm-logo3d--footer .swm-logo3d__fallback{justify-self:start; margin-left:var(--swm-logo3d-inset,0px)} .swm-logo3d--footer .swm-logo3d__fallback path{fill:#fff} /* No invitation to read: the mark is the point, not the interaction. */ .swm-logo3d--footer .swm-logo3d__hint{display:none} /* ---- The drag hand ---- A hand that drifts across the mark every few seconds, until the first time somebody actually spins it. Inert: pointer-events are off, so it can never sit between a finger and the thing it is advertising. */ .swm-logo3d__drag{position:absolute;left:50%;top:54%;z-index:2; /* A cursor, not a badge: no disc behind it, so the shadow is what lifts it off whatever it is sitting on. Under about 28px the fingers close up. */ width:clamp(28px,19%,42px);color:#fff;pointer-events:none;opacity:0; filter:drop-shadow(0 4px 10px rgba(12,12,13,.35)); animation:swm-drag-hand 6s var(--swm-ease) 2s infinite} .swm-logo3d__drag svg{width:100%;height:auto;display:block} /* Nothing to point at until the model is there, and nothing to teach once the visitor has done it once. */ .swm-logo3d:not(.is-ready) .swm-logo3d__drag, .swm-logo3d.is-touched .swm-logo3d__drag{display:none} @keyframes swm-drag-hand{ 0% {opacity:0;transform:translate(-80%,0) scale(.94)} 10% {opacity:1;transform:translate(-70%,0) scale(1)} 45% {opacity:1;transform:translate(0,0) scale(1)} 62% {opacity:0;transform:translate(14%,0) scale(.98)} 100% {opacity:0;transform:translate(14%,0) scale(.98)} } /* It is an animation whose whole purpose is to move; there is nothing to show a visitor who has asked for less of it. */ @media(prefers-reduced-motion:reduce){ .swm-logo3d__drag{display:none} }