/* ============================================================ ANUBYS v5 Grounded in what premium pet brands actually do: warm off-white canvas, one geometric sans, modest sentence-case headings, pill buttons, quiet metadata, square imagery. Gold is an accent, not a theme. ============================================================ */ :root{ /* The colourways are the theme, not an accent */ --c-orange:#ff5c1a; --c-magenta:#c31f6b; --c-emerald:#0f6b4f; --c-azure:#2f7fd1; --c-lime:#c6f230; --c-red:#d4262f; --paper:#faf9f7; --paper-2:#f2f0ec; --paper-3:#e8e5df; --white:#fff; --ink:#15202b; /* near-black with a blue cast, not pure black */ --ink-2:#3d4854; --ink-3:#6b7480; --line:#e3e0da; --line-2:#d2cec6; --gold:#c9a227; /* readable gold for text/rules on light */ --gold-bright:#f9d913;/* the brand yellow, for fills only */ --good:#2f7d52; --sale:#c0392b; /* Nunito: every stroke ends in a rounded cap, so there is no hard terminal anywhere in the face. ui-rounded next in the stack keeps that character on Apple hardware if the webfont is slow or blocked. */ --sans:'Nunito',ui-rounded,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* Was referenced in six places and never defined, so every big stat numeral, story number and pull quote had been falling back to the browser's Times. Now the same family, carried at a heavier weight where it is used. */ --serif:var(--sans); --gut:clamp(1.15rem,4vw,3.5rem); --sec:clamp(3.5rem,7vw,7rem); --maxw:1440px; --ease:cubic-bezier(.4,0,.2,1); --r:8px; --r-pill:999px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--sans);font-size:16px;line-height:1.55; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--ink);outline-offset:2px} ::selection{background:var(--gold-bright);color:var(--ink)} /* ---------- type: one sans, sentence case, modest sizes ---------- */ h1,h2,h3,h4{font-family:var(--sans);font-weight:800;letter-spacing:-.012em; line-height:1.14;margin:0;text-transform:none} .h-xl{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.08} .h-l {font-size:clamp(1.75rem,3vw,2.6rem);line-height:1.12} .h-m {font-size:clamp(1.35rem,2.1vw,1.85rem)} .h-s {font-size:clamp(1.1rem,1.5vw,1.3rem)} h1 em,h2 em{font-style:normal;color:var(--gold)} /* quiet label — small caps, only lightly tracked */ .lbl,.eyebrow{font-family:var(--sans);font-weight:600;font-size:.78rem; letter-spacing:.02em;line-height:1.3;text-transform:none;color:var(--ink-3)} .eyebrow{display:block;margin:0 0 .7rem} .eyebrow::before{display:none} .eyebrow.is-centred{text-align:center} .num{display:none} /* the numbered-section tic was a tell */ .lede{font-size:clamp(1rem,1.2vw,1.12rem);color:var(--ink-2);max-width:62ch; margin:.9rem 0 0;line-height:1.62} .muted{color:var(--ink-3)} .accent{color:var(--gold)} /* ---------- layout ---------- */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} /* Narrow measure, but anchored to the SAME left gutter as .wrap so section edges line up down the page. .wrap-n.is-mid re-centres where that's wanted. */ .wrap-n{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} .wrap-n > *{max-width:900px} .wrap-n.is-mid > *{margin-inline:auto} .section{padding-block:var(--sec);position:relative} .section--tight{padding-block:clamp(2.2rem,4vw,3.5rem)} .centred{text-align:center} .centred .lede{margin-inline:auto} .tint{background:var(--paper-2)} .dark{background:var(--ink);color:var(--paper)} .dark .lede,.dark .muted,.dark .eyebrow{color:#a8b0b8} .dark h1 em,.dark h2 em{color:var(--gold-bright)} /* ---------- buttons: pill, solid, quiet type ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; background:var(--ink);color:var(--paper); font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:-.005em; text-transform:none;padding:.95rem 1.9rem;border-radius:var(--r-pill); transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease); } .btn:hover{background:#0b1017;transform:translateY(-1px)} .btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2} .btn--gold{background:var(--gold-bright);color:var(--ink)} .btn--gold:hover{background:#e9ca0e} .btn--out{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)} .btn--out:hover{background:var(--ink);color:var(--paper);box-shadow:none} .dark .btn{background:var(--paper);color:var(--ink)} .dark .btn:hover{background:#fff} .dark .btn--out{color:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(250,249,247,.35)} .dark .btn--out:hover{background:var(--paper);color:var(--ink)} .btn--block{display:flex;width:100%} .btn--lg{padding:1.1rem 2.2rem;font-size:1rem} .btn[disabled]{opacity:.4;pointer-events:none} .lnk{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.95rem; border-bottom:1.5px solid currentColor;padding-bottom:2px;transition:gap .2s var(--ease)} .lnk:hover{gap:.65rem} .lnk svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2} /* ---------- pills / badges ---------- */ .pill{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;font-size:.78rem; letter-spacing:0;padding:.4rem .8rem;border-radius:var(--r-pill); background:var(--paper-2);color:var(--ink-2);text-transform:none} .pill--accent{background:var(--gold-bright);color:var(--ink)} .pill--sale{background:var(--sale);color:#fff} .pill--out{background:var(--paper-3);color:var(--ink-3)} .dark .pill{background:rgba(250,249,247,.12);color:var(--paper)} /* ---------- stars ---------- */ .stars{display:inline-flex;gap:1px;color:#f5b301;flex:none} .stars svg{width:15px;height:15px;fill:currentColor;stroke:none} .rating{display:inline-flex;align-items:center;gap:.45rem;font-size:.88rem;color:var(--ink-2)} .dark .rating{color:#a8b0b8} /* ---------- header ---------- */ .announce{background:var(--ink);color:var(--paper);overflow:hidden;display:flex;padding:.55rem 0} .announce__track{display:flex;gap:3rem;flex:none;padding-right:3rem;will-change:transform} .announce span{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap; font-weight:500;font-size:.82rem} .announce svg{width:15px;height:15px;stroke:var(--gold-bright);fill:none;stroke-width:1.8;flex:none} .hdr{position:sticky;top:0;z-index:80;background:rgba(250,249,247,.94); backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .25s} .hdr[data-stuck="true"]{border-bottom-color:var(--line)} /* Three tracks: nav left, brand dead centre, actions right. A flex row centres the logo only when both sides happen to weigh the same, which they never do. */ .hdr__in{max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut); height:72px;display:grid;grid-template-columns:1fr auto 1fr; align-items:center;gap:1.6rem} .hdr__in > .nav{grid-column:1;justify-self:start} .hdr__in > .hdr__logo{grid-column:2;justify-self:center} .hdr__in > .hdr__end{grid-column:3;justify-self:end} .hdr__in > .burger{grid-column:1;justify-self:start} .hdr__logo{display:flex;align-items:center;gap:.55rem;flex:none} .hdr__logo img{height:28px;width:auto} .hdr__logo b{font-weight:700;font-size:1.15rem;letter-spacing:.02em;text-transform:none} .nav{display:flex;gap:1.8rem;margin-left:1.4rem} .nav a{font-weight:500;font-size:.95rem;color:var(--ink-2);transition:color .2s} .nav a::after{display:none} .nav a:hover{color:var(--ink)} .hdr__end{margin-left:auto;display:flex;align-items:center;gap:.7rem} .hdr__trust{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--ink-2); padding-right:.9rem;border-right:1px solid var(--line)} .icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%; position:relative;transition:background .2s} .icon-btn:hover{background:var(--paper-2)} .icon-btn svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.7} .cart-count{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 5px; background:var(--ink);color:var(--paper);border-radius:var(--r-pill); font-weight:600;font-size:.66rem;display:grid;place-items:center} .cart-count[hidden]{display:none} .burger{display:none} @media (max-width:1050px){ .nav,.hdr__trust{display:none} .burger{display:grid} .hdr__in{height:60px;gap:.4rem} .hdr__logo{position:absolute;left:50%;transform:translateX(-50%)} .hdr__end{margin-left:auto} } .mnav{position:fixed;inset:0;z-index:95;background:var(--paper);padding:var(--gut); display:flex;flex-direction:column;overflow-y:auto;transform:translateX(-100%); transition:transform .35s var(--ease);pointer-events:none} .mnav[data-open="true"]{transform:none;pointer-events:auto} .mnav__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem} .mnav__link{font-size:1.5rem;font-weight:600;padding:1rem 0;border-bottom:1px solid var(--line); display:flex;justify-content:space-between;align-items:center} /* ---------- hero ---------- */ .hero{background:var(--paper-2)} .hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem); align-items:center;padding-block:clamp(2.5rem,5vw,4.5rem)} .hero__copy{max-width:34rem} .hero h1{margin-bottom:.6rem} .hero h1 .ln{display:block} .hero h1 .ln i{font-style:normal;display:inline} .hero__cta{display:flex;gap:.7rem;margin-top:1.8rem;flex-wrap:wrap;align-items:center} .hero__media{position:relative;aspect-ratio:var(--ar,4/5);overflow:hidden; border-radius:var(--r);background:var(--paper-3)} .hero__card{position:relative;aspect-ratio:var(--ar,4/5);overflow:hidden; border-radius:var(--r);background:var(--paper-3)} .hero__media img,.hero__card img{width:100%;height:100%;object-fit:cover} .hero__badge{position:absolute;left:.9rem;bottom:.9rem} @media (max-width:900px){ .hero__grid{grid-template-columns:1fr;gap:1.5rem;padding-block:2rem} .hero__copy{order:1}.hero__card,.hero__media,.spin{order:2} .hero__cta .btn{flex:1 1 auto} .hero__strip{grid-template-columns:repeat(2,1fr)} } /* ---------- marquee (kept small and quiet) ---------- */ .mq{border-block:1px solid var(--line);padding:.9rem 0;overflow:hidden;display:flex;background:var(--paper)} .mq__track{display:flex;gap:2.5rem;flex:none;padding-right:2.5rem;will-change:transform} .mq span{display:flex;align-items:center;gap:2.5rem;white-space:nowrap; font-size:.95rem;font-weight:500;color:var(--ink-2)} .mq span::after{content:"";width:5px;height:5px;background:var(--gold);border-radius:50%;flex:none} /* ---------- spread ---------- */ .spread{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4.5rem);align-items:center} .spread--flip .spread__media{order:2} .spread__media{position:relative;overflow:hidden;aspect-ratio:var(--ar,4/5); background:var(--paper-3);border-radius:var(--r)} .spread__media img{width:100%;height:100%;object-fit:cover} .spread__tag{position:absolute;left:.9rem;bottom:.9rem;z-index:2} @media (max-width:880px){.spread{grid-template-columns:1fr;gap:1.4rem} .spread--flip .spread__media{order:0}} /* ---------- product plate / PDP ---------- */ .wall__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:start} .wall__sticky{position:sticky;top:92px} .wall__stage{position:relative;aspect-ratio:1;background:#fff;border-radius:0; overflow:hidden;border:0} .wall__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:7%; opacity:0;transition:opacity .13s linear} /* A 300ms ease meant a fast scroll had four or five colourways part-way through a cross-fade at once, which blended into a wash. Short and linear so each swap has finished before the next one starts. */ .wall__stage img.is-on{opacity:1} .wall__name{position:absolute;left:.9rem;bottom:.9rem;z-index:3} .wall__big{display:none} /* The colour wall is a tall scroll track; the panel pins inside it and the scroll position scrubs through the fourteen colourways. */ .wall{position:relative} .wall__pin{position:sticky;top:0;min-height:100svh;display:grid; grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center; padding-block:clamp(3rem,7vw,5rem)} @media (max-width:900px){ .wall{height:auto!important} .wall__pin{position:static;min-height:0;grid-template-columns:1fr;gap:1.6rem} .wall__in{grid-template-columns:1fr;gap:1.6rem} .wall__sticky{position:static} } .wall__swatches{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.6rem} .sw-lg{width:34px;height:34px;border-radius:50%;flex:none;position:relative; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);transition:transform .18s var(--ease),box-shadow .18s} .sw-lg:hover{transform:scale(1.1)} .sw-lg[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 0 0 2px var(--ink)} .sw-lg[data-out="true"]::after{content:"";position:absolute;inset:0;border-radius:50%; background:linear-gradient(45deg,transparent 47%,rgba(255,255,255,.9) 48%,rgba(255,255,255,.9) 52%,transparent 53%)} /* ---------- feature list ---------- */ .feats{list-style:none;padding:0;margin:0} .feats li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start; padding:1rem 0;border-bottom:1px solid var(--line)} .feats li:first-child{border-top:1px solid var(--line)} .feats b{display:block;font-size:.98rem;font-weight:600;margin-bottom:.15rem} .feats p{margin:0;font-size:.92rem;color:var(--ink-2)} .dark .feats li{border-color:rgba(250,249,247,.16)} .dark .feats p{color:#a8b0b8} /* ---------- category tiles: product-led, light plate ---------- */ .cats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,1.4vw,1.1rem)} .cat{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line); border-radius:var(--r);overflow:hidden;transition:border-color .25s,transform .35s var(--ease)} .cat:hover{border-color:var(--ink);transform:translateY(-4px)} .cat__shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:#fff} .cat__shot img{width:100%;height:100%;object-fit:contain;padding:5%; transition:transform .6s var(--ease)} .cat:hover .cat__shot img{transform:scale(1.05)} .cat__b{padding:1.15rem 1.2rem 1.35rem;display:flex;flex-direction:column;flex:1;color:var(--ink)} .cat__b h3{font-size:1.35rem;margin-bottom:.25rem} .cat__b p{margin:0 0 1rem;font-size:.92rem;color:var(--ink-2);max-width:30ch;flex:1} .cat__b .lnk{color:var(--ink);align-self:flex-start} @media (max-width:820px){.cats{grid-template-columns:1fr}.cat__shot{aspect-ratio:5/3}} /* ---------- product card ---------- */ .grid-p{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.6vw,1.4rem)} @media (max-width:1150px){.grid-p{grid-template-columns:repeat(3,1fr)}} @media (max-width:760px){.grid-p{grid-template-columns:repeat(2,1fr);gap:.8rem}} .card{display:flex;flex-direction:column;position:relative;background:transparent} .card__media{position:relative;aspect-ratio:1;overflow:hidden;background:#fff; border-radius:0;border:0} .card__media img{width:100%;height:100%;object-fit:contain;padding:6%; transition:opacity .3s,transform .5s var(--ease)} .card__media img.is-alt{position:absolute;inset:0;opacity:0} .card:hover .card__media img.is-alt{opacity:1} .card:hover .card__media img{transform:scale(1.03)} .card{background:transparent} .card__flags{position:absolute;top:.6rem;left:.6rem;z-index:2;display:flex;flex-direction:column; gap:.3rem;align-items:flex-start} .card__body{padding:.85rem .1rem 0;display:flex;flex-direction:column;gap:.3rem;flex:1} .card__body h3{font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1.25} .card__price{display:flex;align-items:baseline;gap:.45rem;font-size:.92rem;font-weight:500} .card__price .was{color:var(--ink-3);text-decoration:line-through;font-weight:400;font-size:.85rem} .card__sw{display:flex;gap:4px;flex-wrap:wrap;margin-top:auto;padding-top:.45rem} .sw{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16); transition:transform .15s} .sw:hover{transform:scale(1.25)} .sw--more{width:auto;padding:0 5px;border-radius:var(--r-pill);display:grid;place-items:center; font-size:.62rem;font-weight:500;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line-2)} /* ---------- stats ---------- */ @media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}} /* ---------- comparison ---------- */ .vs{width:100%;border-collapse:collapse} .vs th,.vs td{padding:1rem .9rem;text-align:left;border-bottom:1px solid var(--line);font-size:.95rem} .vs thead th{font-weight:600;font-size:.86rem;color:var(--ink-3);border-bottom-color:var(--line-2)} .vs th:nth-child(2),.vs td:nth-child(2),.vs th:nth-child(3),.vs td:nth-child(3){text-align:center;width:18%} .vs thead th:nth-child(2){color:var(--ink)} .vs td:nth-child(2){background:var(--paper-2)} .vs tbody th{font-weight:400} .tick,.cross{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%} .tick{background:var(--good);color:#fff} .cross{background:var(--paper-3);color:var(--ink-3)} .tick svg,.cross svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:3} /* ---------- reviews ---------- */ .rev{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem; display:flex;flex-direction:column;gap:.7rem} .rev p{margin:0;flex:1;font-size:.95rem;color:var(--ink-2);line-height:1.6} .rev__prod{font-size:.82rem;color:var(--ink-3);padding-top:.6rem;border-top:1px solid var(--line)} .rev__who{display:flex;align-items:center;gap:.6rem;font-size:.88rem} .rev__av{width:34px;height:34px;border-radius:50%;background:var(--paper-2);color:var(--ink); display:grid;place-items:center;font-weight:600;font-size:.85rem;flex:none} .rev__ver{display:inline-flex;align-items:center;gap:.25rem;color:var(--good);font-size:.8rem} .rev__ver svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:3} /* ---------- carousel ---------- */ .caro{position:relative} .caro__head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem; flex-wrap:wrap;margin-bottom:1.6rem} .caro__nav{display:flex;gap:.5rem;flex:none} .caro__btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center; border:1px solid var(--line-2);transition:background .2s,color .2s} .caro__btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2} .caro__btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} .caro__btn[disabled]{opacity:.3;pointer-events:none} .caro__viewport{overflow:hidden;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut)} .caro__track{display:flex;gap:clamp(.8rem,1.6vw,1.2rem);scroll-snap-type:x mandatory; overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;padding-bottom:.3rem} .caro__track::-webkit-scrollbar{display:none} .caro__track > *{flex:0 0 min(340px,80vw);scroll-snap-align:start} /* height:100% on a flex item in an auto-height track resolves to auto, which cancels align-items:stretch and lets every card size to its own text. */ .caro .rev{height:auto;align-self:stretch;min-height:260px} .caro__prog{height:2px;background:var(--line);margin-top:1.2rem;border-radius:2px;overflow:hidden} .caro__prog i{display:block;height:100%;background:var(--ink);width:20%; transition:transform .25s var(--ease),width .25s var(--ease)} /* ---------- ugc ---------- */ .ugc{overflow:hidden;display:flex;flex-direction:column;gap:clamp(.5rem,1vw,.8rem)} .ugc__row{display:flex;gap:clamp(.5rem,1vw,.8rem);flex:none;will-change:transform} .ugc__t{position:relative;flex:none;height:clamp(150px,18vw,240px);overflow:hidden; background:var(--paper-3);border-radius:var(--r)} .ugc__t img{height:100%;width:auto;object-fit:cover;display:block} .ugc__t figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .7rem .6rem; background:linear-gradient(to top,rgba(21,32,43,.85),transparent); color:#fff;font-size:.78rem;font-weight:500;opacity:0;transition:opacity .25s} .ugc__t:hover figcaption{opacity:1} /* ---------- FAQ ---------- */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;padding:1.25rem 2.5rem 1.25rem 0;position:relative; font-size:1.08rem;font-weight:600;line-height:1.4} .faq summary::-webkit-details-marker{display:none} .faq summary::after,.faq summary::before{content:"";position:absolute;right:.4rem;top:50%; width:13px;height:1.5px;background:var(--ink);transform:translateY(-50%);transition:transform .25s,opacity .25s} .faq summary::before{transform:translateY(-50%) rotate(90deg)} .faq details[open] summary::before{transform:translateY(-50%);opacity:0} .faq__a{padding:0 2.5rem 1.4rem 0;color:var(--ink-2);max-width:70ch;margin:0;font-size:.98rem} .dark .faq,.dark .faq details{border-color:rgba(250,249,247,.16)} .dark .faq summary::after,.dark .faq summary::before{background:var(--paper)} .dark .faq__a{color:#a8b0b8} /* ---------- guarantee / trust ---------- */ .gtee{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.4vw,2.2rem)} .gtee div{text-align:center} .gtee svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.6;margin:0 auto .8rem} .gtee b{display:block;font-size:1rem;font-weight:600;margin-bottom:.3rem} .gtee p{margin:0;font-size:.9rem;color:var(--ink-2)} .dark .gtee p{color:#a8b0b8} @media (max-width:760px){.gtee{grid-template-columns:repeat(2,1fr);gap:1.8rem 1rem}} @media (max-width:760px){.trustrow{grid-template-columns:repeat(2,1fr)}} .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem; flex-wrap:wrap;margin-bottom:1.8rem} /* ---------- footer ---------- */ .ftr{background:var(--ink);color:var(--paper);padding-block:clamp(3rem,5vw,4.5rem) 0} .ftr__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.2rem} .ftr h4{font-size:.9rem;font-weight:600;margin:0 0 1rem;color:var(--paper)} .ftr ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem} .ftr a{font-size:.92rem;color:#a8b0b8;transition:color .2s} .ftr a:hover{color:var(--paper)} .ftr__news{display:flex;gap:.5rem;margin-top:1rem;max-width:340px} .ftr__news input{flex:1;background:rgba(250,249,247,.08);border:1px solid rgba(250,249,247,.18); border-radius:var(--r-pill);padding:.8rem 1.1rem;color:var(--paper);font:inherit;font-size:.92rem;min-width:0} .ftr__news input::placeholder{color:#8b939c} .ftr__news input:focus{outline:none;border-color:var(--paper)} .ftr__btm{margin-top:2.8rem;border-top:1px solid rgba(250,249,247,.14);padding-block:1.3rem; display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center; font-size:.85rem;color:#8b939c} .pay{display:flex;gap:.4rem;flex-wrap:wrap} .pay i{width:40px;height:26px;border-radius:4px;background:rgba(250,249,247,.1);display:grid; place-items:center;font-style:normal;font-size:.52rem;font-weight:600;color:#a8b0b8} @media (max-width:860px){.ftr__grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.ftr__grid{grid-template-columns:1fr}} /* ---------- cart drawer ---------- */ .scrim{position:fixed;inset:0;background:rgba(21,32,43,.4);z-index:96;opacity:0; pointer-events:none;transition:opacity .3s} .scrim[data-open="true"]{opacity:1;pointer-events:auto} .drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);z-index:100;background:var(--paper); display:flex;flex-direction:column;transform:translateX(100%);transition:transform .35s var(--ease)} .drawer[data-open="true"]{transform:none} .drawer__hd{display:flex;align-items:center;justify-content:space-between;padding:1.2rem var(--gut); border-bottom:1px solid var(--line);flex:none} .drawer__ship{padding:1rem var(--gut);border-bottom:1px solid var(--line);flex:none;background:var(--paper-2)} .bar{height:5px;background:var(--paper-3);border-radius:var(--r-pill);overflow:hidden;margin-top:.5rem} .bar i{display:block;height:100%;background:var(--good);border-radius:var(--r-pill);transition:width .4s var(--ease)} .drawer__body{flex:1;overflow-y:auto;padding:var(--gut);display:flex;flex-direction:column;gap:1.1rem} .drawer__ft{padding:var(--gut);border-top:1px solid var(--line);flex:none;background:var(--white)} .li{display:grid;grid-template-columns:74px 1fr;gap:.9rem;align-items:start} .li__img{background:var(--white);border:1px solid var(--line);border-radius:var(--r);aspect-ratio:1;overflow:hidden} .li__img img{width:100%;height:100%;object-fit:contain;padding:8%} .li h4{font-size:.92rem;font-weight:600;line-height:1.3;margin:0 0 .15rem} .li__meta{font-size:.85rem;color:var(--ink-3);margin-bottom:.5rem} .qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-pill)} .qty button{width:30px;height:30px;display:grid;place-items:center;font-size:1rem;color:var(--ink-2)} .qty span{min-width:24px;text-align:center;font-size:.88rem;font-weight:600} .li__rm{font-size:.82rem;color:var(--ink-3);text-decoration:underline;margin-left:.6rem} .empty{text-align:center;padding:3rem 1rem;color:var(--ink-3)} .upsell{border-top:1px solid var(--line);padding-top:1rem;margin-top:.3rem} .upsell__row{display:grid;grid-template-columns:52px 1fr auto;gap:.7rem;align-items:center;margin-top:.8rem} .upsell__row img{width:52px;aspect-ratio:1;object-fit:contain;background:var(--white); border:1px solid var(--line);border-radius:6px;padding:5%} .upsell__row b{display:block;font-size:.88rem;font-weight:600;line-height:1.2} .upsell__row small{color:var(--ink-3);font-size:.82rem} .upsell__add{font-weight:600;font-size:.82rem;border:1px solid var(--line-2);border-radius:var(--r-pill); padding:.45rem .85rem;white-space:nowrap} .upsell__add:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)} /* ---------- sticky buy bar ---------- */ .buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--paper); border-top:1px solid var(--line);padding:.7rem var(--gut);display:none;gap:.8rem;align-items:center; transform:translateY(110%);transition:transform .3s var(--ease); padding-bottom:calc(.7rem + env(safe-area-inset-bottom))} .buybar[data-show="true"]{transform:none} .buybar__p b{display:block;font-size:1rem;font-weight:700;line-height:1.1} .buybar__p small{font-size:.8rem;color:var(--ink-3);text-decoration:line-through} .buybar .btn{flex:1} @media (max-width:860px){.buybar{display:flex}} /* ---------- motion: restrained ---------- */ .rv{opacity:0;transform:translateY(14px)} .js .rv{transition:opacity .5s var(--ease),transform .5s var(--ease)} .rv.is-in{opacity:1;transform:none} .words span,.words span i{display:inline;overflow:visible;transform:none!important} .hero h1 .ln i{transform:none!important} .prog,.load,.cur{display:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} .rv{opacity:1!important;transform:none!important} } /* ============================================================ Backgrounds + scroll response ============================================================ */ /* ---------- surface grain (barely there) ---------- */ /* Only grain-bearing sections need their own stacking context. Isolating every section trapped mix-blend-mode on product images. */ .section,.hero{position:relative} .grain{isolation:isolate} .grain::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:var(--grain);background-size:cover;background-position:center; opacity:.30;mix-blend-mode:multiply; } .dark.grain::before{opacity:.5;mix-blend-mode:normal} /* ---------- product plate: soft sweep behind cut-outs ---------- */ /* No plate behind product shots: the white in the source image multiplies away, so the product reads as sitting straight on the page. */ .card__media,.wall__stage{background:#fff} /* ---------- full-bleed material divider ---------- */ .band{ position:relative;height:clamp(150px,20vw,260px);overflow:hidden; background:var(--ink);isolation:isolate; } .band img{ position:absolute;left:0;right:0;top:-14%;width:100%;height:128%; object-fit:cover;will-change:transform; } .band::after{ content:"";position:absolute;inset:0; /* darkest under the centred caption, easing out to the edges */ background: radial-gradient(58% 120% at 50% 50%,rgba(12,18,25,.78),rgba(12,18,25,.42) 62%,rgba(12,18,25,.5) 100%), linear-gradient(rgba(12,18,25,.18),rgba(12,18,25,.3)); } .band__cap{ position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center; padding-inline:var(--gut); } .band__cap b{ display:block;color:#fff;font-size:clamp(1.15rem,2.2vw,1.9rem);font-weight:700; letter-spacing:-.02em;text-shadow:0 1px 18px rgba(0,0,0,.55); } .band__cap span{ display:block;margin-top:.4rem;color:rgba(255,255,255,.92);font-size:.92rem; text-shadow:0 1px 14px rgba(0,0,0,.6); } /* ---------- scroll response ---------- */ [data-par]{will-change:transform} /* staggered card entrance */ .js .stagger > *{opacity:0;transform:translateY(18px); transition:opacity .55s var(--ease),transform .55s var(--ease)} .stagger.is-in > *{opacity:1;transform:none} .stagger.is-in > *:nth-child(2){transition-delay:.06s} .stagger.is-in > *:nth-child(3){transition-delay:.12s} .stagger.is-in > *:nth-child(4){transition-delay:.18s} .stagger.is-in > *:nth-child(5){transition-delay:.24s} .stagger.is-in > *:nth-child(6){transition-delay:.30s} /* Image reveal on spreads. The start state scales INWARD: the frame is overflow:visible so nothing may crop, and an outward scale would spill the image past the panel's rounded edge for the length of the transition. */ .js .spread__media img,.js .cat img{ transform:scale(.965);opacity:.001; transition:transform 1.1s var(--ease),opacity .7s var(--ease); } .spread__media.is-in img,.cat.is-in img{transform:none;opacity:1} /* No JS, no reveal: never leave an image invisible. */ html:not(.js) .spread__media img,html:not(.js) .cat img{transform:none;opacity:1} /* sticky section label on tall sections */ .stick-label{position:sticky;top:96px;align-self:start} @media (prefers-reduced-motion:reduce){ .band img,[data-par]{transform:none!important} .js .stagger > *{opacity:1!important;transform:none!important} .js .spread__media img,.js .cat img{transform:none!important} } /* ---------- PDP thumbnail strip ---------- */ .thumbs{display:flex;gap:.5rem;margin-top:.6rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.2rem} .thumbs::-webkit-scrollbar{display:none} .thumbs button{ flex:0 0 68px;height:68px;border-radius:6px;overflow:hidden;background:#fff; border:1px solid transparent;transition:border-color .2s,transform .2s var(--ease);padding:0; } .thumbs button:hover{transform:translateY(-2px)} .thumbs button[aria-pressed="true"]{border-color:var(--ink)} .thumbs img{width:100%;height:100%;object-fit:contain;padding:6%} .thumbs button[data-kind="lifestyle"] img{object-fit:cover;padding:0;mix-blend-mode:normal} @media (max-width:900px){.thumbs button{flex-basis:58px;height:58px}} /* lifestyle shots fill the plate; cut-outs stay contained */ .wall__stage img[data-kind="lifestyle"]{ object-fit:cover;padding:0;mix-blend-mode:normal;border-radius:var(--r); } /* ============================================================ .factbar — one component for every proof strip on the site. Desktop: an even row. Mobile: a swipeable, snapping carousel so four facts never squash into a cramped 2x2. ============================================================ */ .factbar{ display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--line);border-block:1px solid var(--line); } .fact{ background:var(--paper);padding:clamp(1.5rem,3vw,2.4rem) 1.2rem; display:flex;flex-direction:column;align-items:center;justify-content:flex-start; text-align:center;gap:.15rem;transition:background .35s var(--ease); } .fact:hover{background:var(--paper-2)} .fact svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.6;margin-bottom:.7rem} .fact b{ display:block;font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:700; letter-spacing:-.028em;line-height:1;white-space:nowrap; } .fact b .u{font-size:.55em;font-weight:600;margin-left:.04em} .fact > span{display:block;margin-top:.4rem;font-size:.86rem;color:var(--ink-3);line-height:1.35} /* the service variant leads with a label, not a figure */ .factbar--service .fact b{font-size:clamp(.95rem,1.5vw,1.05rem);letter-spacing:-.01em;white-space:normal} .factbar--service .fact > span{font-size:.84rem;margin-top:.25rem} /* hero placement sits flush under the copy */ .factbar--figures{border-top:1px solid var(--line);border-bottom:0;background:var(--line)} .factbar--figures .fact{background:var(--paper-2)} .factbar--figures .fact:hover{background:var(--paper)} @media (max-width:760px){ /* becomes a carousel rather than a squashed grid */ .factbar{ display:flex;grid-template-columns:none;background:transparent; overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none; gap:.7rem;padding:1rem var(--gut);max-width:100%; border-block:1px solid var(--line); } /* only bleed out of a padded container, never out of the viewport */ .wrap > .factbar{margin-inline:calc(var(--gut) * -1)} .factbar::-webkit-scrollbar{display:none} .fact{ flex:0 0 min(66vw,240px);scroll-snap-align:center; border:1px solid var(--line);border-radius:var(--r); padding:1.4rem 1rem;background:var(--paper); } .factbar--figures .fact{background:var(--paper)} } /* ============================================================ v6 — colour-blocked. Sections become full-bleed colour fields, type gets big, edges get hard, badges get loud. ============================================================ */ /* ---------- colour fields ---------- */ .block{--on:#fff;background:var(--bg);color:var(--on);position:relative} .block--orange {--bg:var(--c-orange); --on:#1a0a02} .block--magenta{--bg:var(--c-magenta);--on:#fff} .block--emerald{--bg:var(--c-emerald);--on:#fff} .block--navy {--bg:#1f2b45; --on:#fff} .block--red {--bg:#b5202c; --on:#fff} .block--teal {--bg:#1fb6ad; --on:#04201e} .block--lime {--bg:var(--c-lime); --on:#12180a} .block--ink {--bg:var(--ink); --on:var(--paper)} .block .lede,.block .eyebrow,.block .muted,.block .feats p{color:var(--on);opacity:.82} .block h1,.block h2,.block h3,.block b{color:var(--on)} .block h1 em,.block h2 em{color:var(--on);opacity:.62} .block .feats li{border-color:color-mix(in srgb,var(--on) 22%,transparent)} .block .btn{background:var(--on);color:var(--bg)} .block .btn:hover{background:#fff;color:var(--bg)} .block .lnk{color:var(--on)} .block .rating{color:var(--on);opacity:.85} .block .pill{background:color-mix(in srgb,var(--on) 14%,transparent); border-color:color-mix(in srgb,var(--on) 34%,transparent);color:var(--on)} .block .pill--accent{background:var(--on);color:var(--bg);border-color:var(--on)} /* ---------- type gets loud ---------- Sizes stepped down about 11% and the tracking opened up from the values that suited Inter Tight. Nunito sets roughly that much wider at the same size, so the old numbers pushed the hero headline from four lines onto five, and round bowls crammed at -.045em start touching each other. */ .h-xl{font-size:clamp(2.7rem,8vw,7.5rem);line-height:.96;letter-spacing:-.022em} .h-l {font-size:clamp(2.2rem,5.3vw,4.9rem);line-height:.99;letter-spacing:-.02em} .h-m {font-size:clamp(1.6rem,2.9vw,2.55rem);letter-spacing:-.016em} .eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .lede{font-size:clamp(1.05rem,1.5vw,1.35rem)} /* ---------- hard edges everywhere ---------- */ :root{--r:0px} .card__media,.cat,.cat__shot,.spread__media,.hero__card,.wall__stage, .rev,.thumbs button,.ugc__t,.li__img{border-radius:0} /* ---------- loud badges ---------- */ .pill{font-weight:700;letter-spacing:.02em;border-radius:0;padding:.5rem .9rem; text-transform:uppercase;font-size:.72rem} .pill--sale{background:var(--c-red);color:#fff;border-color:var(--c-red)} .pill--accent{background:var(--gold-bright);color:var(--ink);border-color:var(--gold-bright)} .card__flags .pill{box-shadow:3px 3px 0 rgba(0,0,0,.16)} /* ---------- buttons: blocky ---------- */ .btn{border-radius:0;font-weight:700;letter-spacing:.04em;text-transform:uppercase; font-size:.82rem;padding:1.15rem 2.2rem} .btn--lg{padding:1.35rem 2.8rem;font-size:.9rem} .btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 currentColor} .block .btn:hover{box-shadow:4px 4px 0 color-mix(in srgb,var(--on) 40%,transparent)} /* ---------- factbar on colour ---------- */ .block .factbar{background:color-mix(in srgb,var(--on) 20%,transparent); border-color:color-mix(in srgb,var(--on) 20%,transparent)} .block .fact{background:var(--bg)} .block .fact:hover{background:color-mix(in srgb,var(--on) 8%,transparent)} .block .fact svg{stroke:var(--on)} .block .fact b,.block .fact > span{color:var(--on)} .block .fact > span{opacity:.8} /* ---------- section headers get scale ---------- */ .sec-head{align-items:flex-end;margin-bottom:2.4rem} .spread{gap:clamp(1.5rem,4vw,5rem)} /* ---------- colour-field spreads run to the edge ---------- */ .block .spread__media{box-shadow:none} .block--lime .stars,.block--orange .stars,.block--azure .stars{color:var(--on)} @media (max-width:760px){ .block .factbar .fact{background:var(--bg); border-color:color-mix(in srgb,var(--on) 26%,transparent)} } /* ============================================================ v7 — Amii idioms carried across: generous curves, gradients, soft shadows, hairline borders, frosted blur, seamless transitions between colour fields. No hard cuts. ============================================================ */ :root{ --r-sm:12px; --r-md:20px; --r-lg:28px; --r-xl:36px; --shadow-soft:0 18px 50px -22px rgba(20,24,30,.35); --shadow-lift:0 28px 70px -26px rgba(20,24,30,.45); --hair:1.5px solid color-mix(in srgb,var(--ink) 10%,transparent); --spring:cubic-bezier(.34,1.4,.5,1); } /* ---------- curves back, everywhere ---------- */ .card__media,.cat,.cat__shot,.spread__media,.hero__card,.hero__media, .wall__stage,.rev,.ugc__t,.li__img,.band,.fact{border-radius:var(--r-md)} .cat,.spread__media,.hero__card{border-radius:var(--r-lg)} .btn,.pill,.thumbs button{border-radius:999px} .factbar{border-radius:var(--r-lg);overflow:hidden} .card__media,.spread__media,.cat,.hero__card{box-shadow:var(--shadow-soft)} .card:hover .card__media{box-shadow:var(--shadow-lift)} /* ---------- blocky button style retired, back to soft pills ---------- */ .btn{text-transform:none;letter-spacing:-.005em;font-size:.98rem;font-weight:600; padding:1.05rem 2.1rem;transition:transform .45s var(--spring),box-shadow .45s var(--spring), background .3s,color .3s} .btn--lg{padding:1.2rem 2.5rem;font-size:1.05rem} .btn:hover{transform:translateY(-3px) scale(1.015);box-shadow:var(--shadow-lift)} .block .btn:hover{box-shadow:0 22px 50px -20px rgba(0,0,0,.45)} .pill{text-transform:none;letter-spacing:.01em;font-weight:600;font-size:.8rem; padding:.5rem 1rem} .card__flags .pill{box-shadow:var(--shadow-soft)} /* ---------- colour fields become gradients, not flat slabs ---------- */ .block{background:var(--bg)} /* ---------- seamless joins: each field fades into the next ---------- */ /* Seamlessness without gradients: each colour field is a rounded panel that rises over the one before it, so sections interlock like stacked cards instead of butting together as flat slabs. */ /* Sections sit flush. No overlap, no negative margins. Separation comes from generous space and a soft rounded panel inset from the page edge. */ .block{overflow:hidden} .block > *{position:relative} :root{--r-panel:clamp(20px,3vw,40px)} /* ---------- frosted chips ---------- */ .block .pill{backdrop-filter:blur(10px) saturate(140%)} .hdr{backdrop-filter:blur(18px) saturate(160%)} /* ---------- THE PARALLAX BUG ---------- Images translate inside their frame. If the frame is only as tall as the image, the move exposes the container behind it as a white band. Give every parallax image headroom and kill the frame background. */ .spread__media,.hero__card,.hero__media,.cat{background:transparent} .spread__media img,.cat img{ width:100%;height:122%;position:absolute;top:-11%;left:0;object-fit:cover; } .spread__media{position:relative;overflow:hidden} .band img{top:-18%;height:136%} /* ---------- spring reveals ---------- */ .js .rv{transition:opacity .7s var(--spring),transform .7s var(--spring)} .js .stagger > *{transition:opacity .65s var(--spring),transform .65s var(--spring)} .card{transition:transform .5s var(--spring)} .cat{transition:transform .5s var(--spring),box-shadow .5s var(--spring)} .cat:hover{transform:translateY(-6px)} /* ---------- soft hairlines instead of hard rules ---------- */ .feats li{border-bottom:var(--hair)} .feats li:first-child{border-top:var(--hair)} .faq details{border-bottom:var(--hair)} .faq{border-top:var(--hair)} .vs th,.vs td{border-bottom:var(--hair)} .rev{border:var(--hair);box-shadow:var(--shadow-soft)} /* ---------- section rhythm softened ---------- */ .section{padding-block:clamp(4rem,8vw,8rem)} /* product plate inside a colour field */ .block .spread__media{ background:#fff;padding:clamp(1.2rem,3vw,2.6rem); box-shadow:0 30px 70px -30px rgba(0,0,0,.45); } .block .spread__media img{ position:static;width:100%;height:auto;object-fit:contain; mix-blend-mode:multiply; } /* ============================================================ v8 — quieter and more precise. Generous space, exact alignment, no cropping: every frame takes its image's native ratio. ============================================================ */ /* images are never cropped: the frame matches the file */ .spread__media{aspect-ratio:var(--ar);background:transparent;overflow:visible} .spread__media img{ position:static;width:100%;height:auto;display:block; border-radius:var(--r-lg);object-fit:fill; } .block .spread__media{background:transparent;padding:0;box-shadow:none} .block .spread__media img{mix-blend-mode:normal;box-shadow:0 30px 70px -34px rgba(0,0,0,.5)} /* calmer buttons */ .btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(20,24,30,.4)} .block .btn:hover{box-shadow:0 14px 34px -14px rgba(0,0,0,.4)} /* more air, tighter rhythm */ .sec-head{margin-bottom:clamp(2rem,4vw,3.2rem)} .spread{gap:clamp(2rem,5vw,6rem);align-items:center} .lede{margin-top:1.1rem;max-width:46ch} .h-l{letter-spacing:-.024em} .h-xl{letter-spacing:-.026em} /* restrained badges */ .pill{font-size:.78rem;padding:.45rem .95rem;font-weight:600} .card__flags .pill{box-shadow:0 6px 18px -8px rgba(0,0,0,.3)} /* softer cards */ .card__media{box-shadow:none;border:var(--hair)} .card:hover .card__media{box-shadow:0 20px 44px -22px rgba(20,24,30,.3)} /* ============================================================ v9 — one spacing rhythm, plus the rebuilt ledger, duel and social-proof components. ============================================================ */ /* ---- 1. ONE rhythm. Every top-level section uses the same block padding, so the gaps between sections are equal regardless of variant. ---- */ /* Every seam between two sections must be the SAME width, whatever the two section types are. Adjacent margins COLLAPSE and padding sums, so mixing the two can never give a uniform seam. Instead the page column owns the rhythm: a flex gap applies once between every pair of children and cannot collapse. Sections then carry only the internal padding their own background needs. */ :root{--gap:clamp(4rem,7vw,7rem);--pad:clamp(3.5rem,6vw,5.5rem)} /* Not flex: .wrap uses margin-inline:auto, and an auto cross-axis margin cancels flex/grid stretch, so sections would collapse to their content width and a carousel track would widen the page. Sibling top-margins give the same guarantee in normal flow: only top margins exist, so there is no bottom margin for them to collapse against, and every seam is exactly one --gap. flow-root stops a child's margin escaping through a zero-padding section. */ main > *{display:flow-root} main > * + *:not(#_){margin-top:var(--gap)} /* Plain sections have no background, so the gap alone separates them. */ .section, .section--tight{padding-block:0} /* Sections that paint a background become inset rounded panels with their own internal padding. The outer gap still comes from the flex column. */ .section.tint, .section.dark, .section.block, .wall{ padding-block:var(--pad); border-radius:var(--r-panel); margin-inline:clamp(0px,2vw,28px); overflow:hidden; } /* The wall is a scroll track; its sticky pin supplies the internal padding. */ .wall{padding-block:0;overflow:visible} .wall__pin{border-radius:var(--r-panel)} /* Hero and the closing CTA sit flush to the page edges. */ .hero,.close-cta{margin-inline:0;border-radius:0} /* ---- 2. LEDGER (sustainability) ---- */ .ledger{display:grid;gap:0;border-top:var(--hair)} .ledger__row{display:grid;grid-template-columns:auto 1fr 1.6fr; gap:clamp(1rem,3vw,3rem);align-items:start; padding-block:clamp(1.8rem,3.5vw,2.8rem);border-bottom:var(--hair)} .ledger__n{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem); line-height:1;opacity:.3;font-variant-numeric:tabular-nums} .ledger__lbl{display:block;font-size:.68rem;letter-spacing:.14em; text-transform:uppercase;opacity:.55;margin-bottom:.5rem} .ledger__strike{font-size:clamp(1rem,1.7vw,1.25rem);line-height:1.35; text-decoration:line-through;text-decoration-thickness:1px;opacity:.5} .ledger__fix b{display:block;font-size:clamp(1.05rem,1.9vw,1.4rem); letter-spacing:-.02em;margin-bottom:.5rem} .ledger__fix p{opacity:.78;max-width:52ch;line-height:1.6} .ledger__note{margin-top:2rem;max-width:60ch;opacity:.6;font-size:.92rem;line-height:1.65} @media (max-width:760px){ .ledger__row{grid-template-columns:auto 1fr;gap:.6rem 1rem} .ledger__n{grid-row:span 2} } /* ---- 3. DUEL (why anubys) ---- */ .duel{--duel-cols:1fr 130px 210px;border-top:var(--hair);max-width:1080px} .duel__head{display:grid;grid-template-columns:var(--duel-cols); gap:clamp(.6rem,2vw,1.6rem);padding-block:.9rem;border-bottom:var(--hair); font-size:.7rem;letter-spacing:.14em;text-transform:uppercase} .duel__brand{font-weight:700;color:var(--ink);text-align:center} .duel__other{opacity:.45;text-align:center} .duel__row{display:grid;grid-template-columns:var(--duel-cols); gap:clamp(.6rem,2vw,1.6rem);align-items:center; padding-block:clamp(1.1rem,2.2vw,1.5rem);border-bottom:var(--hair); transition:background .2s var(--ease)} .duel__row:hover{background:rgba(20,24,30,.028)} .duel__feat b{display:block;font-size:clamp(1rem,1.6vw,1.15rem); letter-spacing:-.015em;margin-bottom:.28rem} .duel__feat p{font-size:.9rem;opacity:.62;line-height:1.5;max-width:46ch} .duel__us,.duel__them{display:flex;flex-direction:column;align-items:center; justify-content:center;gap:.4rem;text-align:center} .duel__us{background:var(--ink);color:#fff;border-radius:var(--r-md); align-self:stretch;justify-content:center;padding:.9rem .5rem} .duel__tick{display:grid;place-items:center;width:26px;height:26px;border-radius:50%; background:var(--gold,#F9D913);color:#15202B} .duel__tick svg{width:15px;height:15px;stroke-width:3} .duel__lbl{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75} .duel__us .duel__lbl{opacity:.6} .duel__x{display:block;width:16px;height:1.5px;background:currentColor;opacity:.3} .duel__them{opacity:.55;padding:.9rem .5rem} .duel__them em{font-style:normal;font-size:.76rem;line-height:1.35;opacity:.85} @media (max-width:760px){ .duel{--duel-cols:1fr auto} .duel__head{display:none} .duel__row{grid-template-columns:1fr;gap:.7rem;padding-block:1.3rem} .duel__us,.duel__them{flex-direction:row;justify-content:flex-start; align-self:start;padding:.5rem .8rem;gap:.55rem;text-align:left} .duel__us{border-radius:999px;display:inline-flex;width:auto} .duel__them{padding-left:0} } /* ---- 4. QUOTE TICKER ---- */ .qt{display:grid;gap:.7rem;overflow:hidden} .qt__row{display:flex;gap:.7rem;width:max-content;will-change:transform} .qt__q{display:inline-flex;align-items:baseline;gap:.5rem;flex:none; max-width:44ch;padding:.75rem 1.15rem;border-radius:999px; border:var(--hair);background:var(--paper,#fff); font-size:.92rem;line-height:1.4} .qt__q i{font-family:var(--serif);font-style:normal;font-size:1.3rem; line-height:0;opacity:.35;transform:translateY(.2rem)} .qt__q b{font-weight:600;opacity:.5;font-size:.8rem;white-space:nowrap} .qt__q b::before{content:"— ";opacity:.6} /* ---- 5. PHOTO REVIEWS ---- */ .pr__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:clamp(1rem,2vw,1.6rem)} .pr{display:flex;flex-direction:column;background:var(--paper,#fff); border:var(--hair);border-radius:var(--r-lg);overflow:hidden} .pr__img{width:100%;overflow:hidden;background:#f2f1ee} .pr__img img{width:100%;height:100%;object-fit:cover;display:block} .pr__body{padding:1.1rem 1.15rem 1.25rem;display:flex;flex-direction:column;gap:.55rem;flex:1} .pr__body p{font-size:.94rem;line-height:1.55} .pr__who{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:auto} .pr__who b{font-size:.9rem} .pr__prod{font-size:.74rem;opacity:.5;letter-spacing:.02em} /* ---- 6. MOST REVIEWED ---- */ .loved__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:clamp(.8rem,1.6vw,1.2rem)} .loved{display:flex;align-items:center;gap:1rem;padding:.85rem; border:var(--hair);border-radius:var(--r-lg);background:var(--paper,#fff); transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .loved:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(20,24,30,.35)} .loved__img{width:74px;height:74px;flex:none;border-radius:var(--r-md); background:#fff;display:grid;place-items:center;overflow:hidden} .loved__img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .loved b{display:block;font-size:.98rem;letter-spacing:-.01em;margin-bottom:.15rem} .loved em{display:block;font-style:normal;font-size:.78rem;opacity:.55;margin-top:.15rem} /* ---- 7. BIG STAT BAR ---- */ .fact__big{font-family:var(--serif);font-size:clamp(1.9rem,4vw,3rem); line-height:1;display:block;margin-bottom:.35rem} .fact__lbl{display:block;font-size:.86rem;font-weight:600} .fact__sub{display:block;font-size:.76rem;opacity:.5;margin-top:.15rem} /* ---- 8. TRUSTPILOT ---- */ .tp{min-height:140px;display:grid;place-items:center} /* ---- brandmark: traced jackal + ANUBYS with the gold Y ---- */ .hdr__logo{display:inline-flex;align-items:center;gap:.5em;text-decoration:none; color:inherit;font-size:1.06rem;line-height:1} .bm__mark{display:block;width:1.75em;flex:none} .bm__mark svg{display:block;width:100%;height:auto} .bm__word{font-weight:700;letter-spacing:.2em;text-transform:uppercase; font-size:.82em;padding-left:.06em} .bm__word i{font-style:normal;color:#F9D913} .hdr__logo--lg{font-size:1.3rem} .hdr__logo--light,.dark .hdr__logo,.ftr .hdr__logo{color:#fff} .hdr__logo:hover .bm__mark{transform:translateY(-1px)} .bm__mark{transition:transform .2s var(--ease)} /* ============================================================ v10 — customer photo mosaic, illustrated feature cards ============================================================ */ /* ---- masonry collage: columns keep every native ratio, no crop ---- */ .mos{columns:4;column-gap:clamp(.8rem,1.4vw,1.15rem)} @media (max-width:1100px){.mos{columns:3}} @media (max-width:760px){.mos{columns:2}} @media (max-width:330px){.mos{columns:1}} .mos__i{break-inside:avoid;margin:0 0 clamp(.8rem,1.4vw,1.15rem); background:var(--paper,#fff);border:var(--hair);border-radius:var(--r-lg); overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .mos__i:hover{transform:translateY(-3px);box-shadow:0 20px 46px -24px rgba(20,24,30,.34)} .mos__ph{background:#eceae5} .mos__ph img{display:block;width:100%;height:auto} .mos__c{padding:.85rem .95rem 1rem;display:grid;gap:.45rem} .mos__c p{font-size:.9rem;line-height:1.5;margin:0} .mos__who{display:flex;flex-wrap:wrap;gap:.1rem .5rem;align-items:baseline} .mos__who b{font-size:.85rem} .mos__who em{font-style:normal;font-size:.73rem;opacity:.5} .mos .stars{font-size:.72rem} /* ---- illustrated feature cards ---- */ .feat__grid{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem);margin-bottom:clamp(2rem,3.5vw,3rem)} @media (max-width:900px){.feat__grid{grid-template-columns:1fr}} .feat{display:flex;flex-direction:column;background:var(--paper,#fff); border:var(--hair);border-radius:var(--r-lg);overflow:hidden} /* One ratio for all three cards so they line up, with object-fit:contain so a 2.47:1 hardware macro and a 0.91:1 harness macro both sit whole inside it. The products are shot on white, so the letterboxing is invisible. */ .feat__ph{aspect-ratio:4/3;background:#fff;display:grid;place-items:center;padding:4%} .feat__ph img{max-width:100%;max-height:100%;width:auto;height:auto; object-fit:contain;display:block} .feat__b{padding:1.1rem 1.2rem 1.3rem;display:grid;gap:.5rem;align-content:start} .feat__b h3{font-size:clamp(1.05rem,1.7vw,1.25rem);letter-spacing:-.02em;margin:0} .feat__b p{font-size:.92rem;line-height:1.55;margin:0;opacity:.78} .feat__vs{font-size:.82rem!important;opacity:.5!important;padding-top:.5rem; border-top:var(--hair);margin-top:.25rem!important} /* ---- brandmark: traced jackal + ANUBYS with the gold Y ---- */ .hdr__logo{display:inline-flex;align-items:center;gap:.5em;text-decoration:none; color:inherit;font-size:1.06rem;line-height:1} .bm__mark{display:block;width:1.75em;flex:none} .bm__mark svg{display:block;width:100%;height:auto} .bm__word{font-weight:700;letter-spacing:.2em;text-transform:uppercase; font-size:.82em;padding-left:.06em} .bm__word i{font-style:normal;color:#F9D913} .hdr__logo--lg{font-size:1.3rem} .hdr__logo--light,.dark .hdr__logo,.ftr .hdr__logo{color:#fff} .hdr__logo:hover .bm__mark{transform:translateY(-1px)} .bm__mark{transition:transform .2s var(--ease)} /* ============================================================ v10 — customer photo mosaic, illustrated feature cards ============================================================ */ /* ---- masonry collage: columns keep every native ratio, no crop ---- */ .mos{columns:4;column-gap:clamp(.8rem,1.4vw,1.15rem)} @media (max-width:1100px){.mos{columns:3}} @media (max-width:760px){.mos{columns:2}} @media (max-width:330px){.mos{columns:1}} .mos__i{break-inside:avoid;margin:0 0 clamp(.8rem,1.4vw,1.15rem); background:var(--paper,#fff);border:var(--hair);border-radius:var(--r-lg); overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .mos__i:hover{transform:translateY(-3px);box-shadow:0 20px 46px -24px rgba(20,24,30,.34)} .mos__ph{background:#eceae5} .mos__ph img{display:block;width:100%;height:auto} .mos__c{padding:.85rem .95rem 1rem;display:grid;gap:.45rem} .mos__c p{font-size:.9rem;line-height:1.5;margin:0} .mos__who{display:flex;flex-wrap:wrap;gap:.1rem .5rem;align-items:baseline} .mos__who b{font-size:.85rem} .mos__who em{font-style:normal;font-size:.73rem;opacity:.5} .mos .stars{font-size:.72rem} /* ---- illustrated feature cards ---- */ .feat__grid{display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem);margin-bottom:clamp(2rem,3.5vw,3rem)} @media (max-width:900px){.feat__grid{grid-template-columns:1fr}} .feat{display:flex;flex-direction:column;background:var(--paper,#fff); border:var(--hair);border-radius:var(--r-lg);overflow:hidden} /* One ratio for all three cards so they line up, with object-fit:contain so a 2.47:1 hardware macro and a 0.91:1 harness macro both sit whole inside it. The products are shot on white, so the letterboxing is invisible. */ .feat__ph{aspect-ratio:4/3;background:#fff;display:grid;place-items:center;padding:4%} .feat__ph img{max-width:100%;max-height:100%;width:auto;height:auto; object-fit:contain;display:block} .feat__b{padding:1.1rem 1.2rem 1.3rem;display:grid;gap:.5rem;align-content:start} .feat__b h3{font-size:clamp(1.05rem,1.7vw,1.25rem);letter-spacing:-.02em;margin:0} .feat__b p{font-size:.92rem;line-height:1.55;margin:0;opacity:.78} .feat__vs{font-size:.82rem!important;opacity:.5!important;padding-top:.5rem; border-top:var(--hair);margin-top:.25rem!important} /* ---- the remaining differences, stated plainly ---- */ .duel__rest{list-style:none;margin:0;padding:0;border-top:var(--hair);max-width:1080px} .duel__rest li{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem; align-items:center;padding-block:clamp(.85rem,1.6vw,1.1rem);border-bottom:var(--hair)} .duel__rest b{font-size:clamp(.98rem,1.5vw,1.08rem);font-weight:600} .duel__rest em{font-style:normal;font-size:.82rem;opacity:.45;text-align:right} @media (max-width:640px){ .duel__rest li{grid-template-columns:auto 1fr;gap:.5rem .8rem} .duel__rest em{grid-column:2;text-align:left} } /* ---- review carousel: uniform cards ---- One 986-character review was making the track 839px tall and leaving a dead band under every short card. Clamp the quote and let the cards stretch. */ .caro__track{align-items:stretch} .rev{display:flex;flex-direction:column;gap:.6rem} .rev p{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical; overflow:hidden;margin:0} .rev__who{margin-top:auto} .rev__prod{margin:0} /* ---- comparison rows: no decorative icon, just the two claims side by side ---- */ .cmp__list{list-style:none;margin:0;padding:0;max-width:1080px; border-top:2px solid var(--ink);} .cmp{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:clamp(.8rem,2vw,2rem); align-items:stretch;padding-block:clamp(1rem,1.8vw,1.35rem);border-bottom:var(--hair)} .cmp__t{font-size:clamp(1rem,1.6vw,1.12rem);font-weight:600;letter-spacing:-.015em; align-self:center} .cmp__us,.cmp__them{display:flex;flex-direction:column;gap:.15rem; padding:.55rem .85rem;border-radius:var(--r-md)} .cmp__us{background:var(--ink);color:#fff} .cmp__us b{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--gold,#F9D913);font-weight:700} .cmp__them{background:rgba(20,24,30,.045);color:inherit;opacity:.72} .cmp__them b{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; opacity:.55;font-weight:700} .cmp__us span,.cmp__them span{font-size:.88rem;line-height:1.4} @media (max-width:720px){ .cmp{grid-template-columns:1fr 1fr;gap:.5rem .6rem} .cmp__t{grid-column:1/-1;margin-bottom:.15rem} } /* ---- most-reviewed tiles ---- */ .loved__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:clamp(.7rem,1.4vw,1rem)} .loved{display:grid;grid-template-columns:auto 1fr auto;align-items:center; gap:1rem;padding:.8rem 1rem .8rem .8rem;border:var(--hair); border-radius:var(--r-lg);background:var(--paper,#fff);text-decoration:none; color:inherit;transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .loved:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(20,24,30,.35)} .loved__img{width:66px;height:66px;flex:none;border-radius:var(--r-md); background:#fff;display:grid;place-items:center;overflow:hidden} .loved__img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .loved__b{display:grid;gap:.1rem;min-width:0} .loved__b b{font-size:.98rem;letter-spacing:-.01em} .loved__st .stars{font-size:.7rem} .loved__b em{font-style:normal;font-size:.78rem;opacity:.55} .loved__go{opacity:.3;display:grid;place-items:center} .loved__go svg{width:17px;height:17px} .loved:hover .loved__go{opacity:.7;transform:translateX(2px)} .loved__go{transition:opacity .2s var(--ease),transform .2s var(--ease)} /* Auto-driven carousels cannot use scroll snapping: mandatory snap pulls every sub-pixel step back to the previous snap point and the track never moves. */ .caro__track.is-auto{scroll-snap-type:none;scroll-behavior:auto} .caro__track.is-auto > *{scroll-snap-align:none} /* ============================================================ v11 — one proof band under the hero, and a bigger, more visual customer photo wall on phones. ============================================================ */ /* ---- proof band: score leads, promises follow, one object ---- */ .proofbar{background:var(--ink);color:#fff;border-radius:var(--r-panel); margin-inline:clamp(0px,2vw,28px);padding-block:clamp(1.6rem,3vw,2.4rem); overflow:hidden} .proofbar__in{display:grid;grid-template-columns:auto 1fr; gap:clamp(1.4rem,4vw,4rem);align-items:center} .proofbar__score{display:grid;gap:.15rem;padding-right:clamp(1.4rem,4vw,4rem); border-right:1px solid rgba(255,255,255,.16)} .proofbar__score .stars{font-size:.9rem;color:var(--gold-bright)} .proofbar__n{display:flex;align-items:baseline;gap:.45rem;margin:0} .proofbar__n b{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.4rem); line-height:1;font-weight:400} .proofbar__n span{font-size:.82rem;opacity:.55} .proofbar__sub{margin:0;font-size:.85rem;opacity:.7} .proofbar__sub b{font-weight:600;opacity:1} .proofbar__stats{list-style:none;display:flex;gap:1.4rem;margin:.7rem 0 0;padding:0} .proofbar__stats li{display:flex;align-items:baseline;gap:.3rem} .proofbar__stats b{font-size:1.02rem;font-weight:700} .proofbar__stats span{font-size:.74rem;opacity:.55} .proofbar__list{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,2vw,1.8rem)} .proofbar__list li{display:flex;gap:.65rem;align-items:flex-start} .proofbar__list svg{width:19px;height:19px;flex:none;margin-top:.1rem; color:var(--gold,#F9D913);stroke:currentColor;fill:none;stroke-width:1.8} .proofbar__list b{display:block;font-size:.88rem;font-weight:600;line-height:1.25} .proofbar__list span{display:block;font-size:.76rem;opacity:.55;margin-top:.1rem} @media (max-width:980px){ .proofbar__in{grid-template-columns:1fr;gap:1.5rem} .proofbar__score{border-right:0;border-bottom:1px solid rgba(255,255,255,.16); padding-right:0;padding-bottom:1.2rem} .proofbar__list{grid-template-columns:repeat(2,1fr)} } @media (max-width:460px){ .proofbar__list{grid-template-columns:1fr} .proofbar__stats{flex-wrap:wrap;gap:.5rem 1.2rem} } /* ---- customer wall: one big photo per row on phones, caption over the image ---- */ @media (max-width:640px){ .mos{columns:1;column-gap:0} .mos__i{margin-bottom:1rem;position:relative;border:0;border-radius:var(--r-lg)} .mos__ph{border-radius:var(--r-lg);overflow:hidden} .mos__c{position:absolute;inset:auto 0 0 0;padding:2.6rem 1.1rem 1.05rem; color:#fff;border-radius:0 0 var(--r-lg) var(--r-lg); background:linear-gradient(to top,rgba(8,12,16,.92) 12%,rgba(8,12,16,.62) 55%,rgba(8,12,16,0));} /* A 986-character review would otherwise cover the whole photograph. */ .mos__c p{font-size:1rem;line-height:1.45; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .mos__who b{font-size:.9rem} .mos__who em{opacity:.72} .mos .stars{color:var(--gold,#F9D913)} } /* ============================================================ v12 — BRAND COLOUR, NOT A MUTED PALETTE. v5 decided "gold is an accent, not a theme" and desaturated the colourways to sit politely on bone. That reads flat. These are the real product colours, sampled from the lit face of the webbing in the studio photography and pushed back to the saturation the physical product actually has, plus the logo's own #F9D913. Every pairing below clears 4.5:1 against its foreground. ============================================================ */ :root{ --gold-bright:#F9D913; /* straight off the logo */ --gold:#a8790a; /* deep enough to read as text on bone */ --c-turquoise:#14ccaf; --c-lime:#96e32d; --c-azure:#11b6d9; --c-orange:#fa7d0f; --c-indigo:#6433b8; /* The white-text panels are deepened a touch, because the 12% transparency that makes them glass lightens them: at #e0226a magenta composited to 4.04:1 against white, under the 4.5 floor. These clear it as rendered. */ --c-magenta:#cc1f60; --c-emerald:#11715b; --c-red:#d31d26; --paper:#fbfaf7; --ink:#10171f; } /* ---- colour blocks, saturated ---- */ .block--teal {--bg:var(--c-turquoise); --on:#04211c} .block--turquoise{--bg:var(--c-turquoise); --on:#04211c} .block--magenta {--bg:var(--c-magenta); --on:#fff} .block--emerald {--bg:var(--c-emerald); --on:#fff} .block--azure {--bg:var(--c-azure); --on:#04222b} .block--lime {--bg:var(--c-lime); --on:#10230a} .block--orange {--bg:var(--c-orange); --on:#200d00} .block--red {--bg:var(--c-red); --on:#fff} .block--indigo {--bg:var(--c-indigo); --on:#fff} .block--navy {--bg:#1b2a4a; --on:#fff} .block--ink {--bg:var(--ink); --on:var(--paper)} /* ---- the primary action is the logo's own black-and-gold ---- */ .btn{background:var(--gold-bright);color:#10171f;font-weight:700} .btn:hover{background:#ffe62e;color:#10171f} .btn--dark{background:var(--ink);color:var(--paper)} .btn--dark:hover{background:#000} /* Inside a colour field the gold would fight the panel, so the button flips to the panel's own contrast colour instead. */ .block .btn{background:var(--on);color:var(--bg)} .block .btn:hover{background:var(--on);color:var(--bg);filter:brightness(1.06)} .dark .btn,.proofbar .btn{background:var(--gold-bright);color:#10171f} /* ---- accents that were previously grey ---- */ .stars{color:var(--gold-bright)} .rating b{color:inherit} .eyebrow .num{color:var(--gold);font-weight:700} .block .eyebrow .num{color:var(--on);opacity:.75} .dark .eyebrow .num,.proofbar .eyebrow .num{color:var(--gold-bright)} h1 em,h2 em{color:var(--gold)} .dark h1 em,.dark h2 em,.block h1 em,.block h2 em{color:inherit;opacity:.72} .pill--accent{background:var(--gold-bright);color:#10171f;border-color:var(--gold-bright)} .pill--sale{background:var(--c-red);color:#fff;border-color:var(--c-red)} .lnk{text-decoration-color:var(--gold-bright);text-decoration-thickness:2px} .lnk:hover{color:var(--gold)} .block .lnk:hover{color:inherit} ::selection{background:var(--gold-bright);color:#10171f} /* ---- gold hairline under each section eyebrow, so colour carries down ---- */ .eyebrow{color:var(--ink-2)} .duel__tick,.cmp__us b{color:var(--gold-bright)} .loved__st .stars{color:var(--gold-bright)} .mos .stars,.pr .stars,.rev .stars{color:var(--gold-bright)} /* ============================================================ v13 — GLASS, SCALE AND OVERLAP Frosted surfaces only read as glass if there is something behind them, so a fixed field of soft brand-colour light sits under the whole page and every panel blurs it. Panels then overlap slightly at the seams so the page reads as one continuous surface rather than a stack of separate cards. ============================================================ */ :root{ --glass-blur:22px; --glass-brd:1px solid rgba(255,255,255,.55); --glass-brd-dark:1px solid rgba(255,255,255,.10); --glass-hi:inset 0 1px 0 rgba(255,255,255,.65); --glass-hi-dark:inset 0 1px 0 rgba(255,255,255,.14); } /* ---- the light behind the glass ---- */ body{position:relative;background:var(--paper)} body::before{ content:"";position:fixed;inset:-10vmax;z-index:-1;pointer-events:none; background: radial-gradient(38vmax 38vmax at 12% 8%, rgba(20,204,175,.30), transparent 62%), radial-gradient(34vmax 34vmax at 88% 22%, rgba(249,217,19,.28), transparent 62%), radial-gradient(40vmax 40vmax at 78% 68%, rgba(224,34,106,.22), transparent 64%), radial-gradient(34vmax 34vmax at 18% 88%, rgba(150,227,45,.24), transparent 62%); filter:saturate(1.1); } /* ---- frosted panels ---- */ .section.tint{ background:rgba(255,255,255,.42); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5); backdrop-filter:blur(var(--glass-blur)) saturate(1.5); border:var(--glass-brd);box-shadow:var(--glass-hi),0 30px 70px -46px rgba(16,23,31,.30); } .section.dark,.proofbar{ background:rgba(16,23,31,.78); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4); backdrop-filter:blur(var(--glass-blur)) saturate(1.4); border:var(--glass-brd-dark);box-shadow:var(--glass-hi-dark),0 30px 70px -44px rgba(0,0,0,.5); } /* Colour panels stay saturated. They gain the glass edge and a top highlight, but not enough transparency to grey the colourway off. */ .section.block{ background:color-mix(in srgb,var(--bg) 88%,transparent); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.6); backdrop-filter:blur(var(--glass-blur)) saturate(1.6); border:1px solid color-mix(in srgb,var(--on) 16%,transparent); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--on) 22%,transparent), 0 34px 80px -48px rgba(16,23,31,.45); } /* ---- frosted cards ---- */ .rev,.feat,.mos__i,.loved,.pr,.qt__q,.fact,.cmp__us,.cmp__them{ background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); border:var(--glass-brd); } .cmp__us{background:rgba(16,23,31,.86);border:var(--glass-brd-dark)} .hdr,.announce{ -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5); } .hdr{background:rgba(251,250,247,.62);border-bottom:var(--glass-brd)} /* Product cut-outs blend with multiply, and a backdrop-filter ancestor traps that. These wells stay opaque white, where multiply is a no-op anyway. */ .card__media,.loved__img,.cat__shot{background:#fff;backdrop-filter:none} /* ---- 14 COLOURWAYS: same plate, far bigger product ---- */ .wall__stage{ overflow:visible; background:rgba(255,255,255,.5); /* saturate() on top of blur is a second full-surface pass on every composite, and this panel composites on every colour swap. The blur alone carries the glass read. */ -webkit-backdrop-filter:blur(var(--glass-blur)); backdrop-filter:blur(var(--glass-blur)); border:var(--glass-brd);box-shadow:var(--glass-hi),0 30px 70px -46px rgba(16,23,31,.3); } /* The container keeps its size; the product is scaled up and allowed to break out of it, which is also the page's main overlap moment. */ .wall__stage img{ padding:0;transform:scale(1.62);transform-origin:50% 50%; /* A 40px blur on a 900px image had to be rasterised fresh on every swap, which cost exactly one dropped frame per colour change. 22px reads the same at this size and halves the blur work. */ filter:drop-shadow(0 20px 22px rgba(16,23,31,.30)); will-change:opacity; } @media (max-width:900px){.wall__stage img{transform:scale(1.14)}} /* The scaled product deliberately breaks out of its plate. overflow-x:clip stops that spill widening the page, and unlike overflow:hidden it does not create a scroll container, so the pinned colour wall keeps working. */ main{overflow-x:clip} /* ---- overlap, so the seams stitch instead of stack ---- */ /* The proof band previously overlapped the hero by ~49px. Put it back on the uniform seam so the spacing under the hero matches every other section. */ .proofbar{position:relative;z-index:3} .hero{position:relative;z-index:1} .hero__card{position:relative;z-index:2} .block .spread__media{position:relative;z-index:2} .section.block,.section.tint,.section.dark{position:relative} /* ============================================================ v14 — gold not bronze, no plate behind section images, the colour wall contained again, and two photographic section backgrounds behind glass. ============================================================ */ /* ---- 3. every accent is the logo gold, no bronze ---- */ :root{ /* #a8790a read as bronze. This is the logo yellow darkened only as far as it must go to stay legible as text on bone, keeping the hue. */ --gold:#8a6f00; --gold-bright:#F9D913; --gold-mid:#e0c211; } .eyebrow .num,h1 em,h2 em,.accent,.lnk:hover{color:var(--gold)} .duel__tick,.pill--accent{color:#10171f} .stars{color:var(--gold-bright)} .proofbar__list svg,.announce svg{color:var(--gold-bright);stroke:var(--gold-bright)} .mq span::after{background:var(--gold-bright)} .rev__ver svg{color:var(--gold)} /* ---- 4. no plate behind the section images, corners kept ---- */ .spread__media{background:transparent!important;overflow:visible} .spread__media img{border-radius:var(--r-lg)} .block .spread__media{background:transparent!important;box-shadow:none} /* ---- 6. the colour wall product is big, but stays inside its plate ---- */ .wall__stage{overflow:hidden} .wall__stage img{transform:none;padding:2%} @media (max-width:900px){.wall__stage img{transform:none}} /* ---- 7 + 8. photographic section backgrounds, read through glass ---- */ .bg-shot{position:relative;isolation:isolate;overflow:hidden} /* The img sits inside a , so it is not a direct child of the section. The picture wrapper is made a full-bleed layer and the img fills it. */ .bg-shot > picture{position:absolute;inset:0;z-index:-2;display:block} .bg-shot .bg-shot__img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block; } /* The glass sheet over the photograph. Light enough that the forest and the park still read as photographs, dark enough to hold white text. */ .bg-shot::after{ content:"";position:absolute;inset:0;z-index:-1; -webkit-backdrop-filter:blur(7px) saturate(1.2); backdrop-filter:blur(7px) saturate(1.2); } .bg-shot--forest{background:transparent} .bg-shot--forest::after{background:rgba(6,24,16,.58)} .bg-shot--park::after{background:rgba(9,18,13,.64)} .bg-shot,.bg-shot h2,.bg-shot p,.bg-shot .ledger__fix b{color:#fff} .bg-shot .eyebrow{color:rgba(255,255,255,.75)} .bg-shot .ledger,.bg-shot .ledger__row{border-color:rgba(255,255,255,.22)} .bg-shot .ledger__note,.bg-shot .ledger__strike,.bg-shot .ledger__fix p{color:rgba(255,255,255,.82)} .bg-shot .ledger__n{color:var(--gold-bright);opacity:.9} .bg-shot .ledger__lbl{color:rgba(255,255,255,.7)} /* ---- comparison rows: explicit colours, no stacked opacity ---- The "Anubys" label was inheriting ink onto the dark chip (1.49:1), and the "Most brands" label was fading twice over (.72 on the cell x .55 on the label = .40 effective). Both now state their colour outright. */ .cmp__us{background:rgba(16,23,31,.92);color:#fff} .cmp__us b{color:var(--gold-bright)!important;opacity:1} .cmp__us span{color:rgba(255,255,255,.88);opacity:1} .cmp__them{background:rgba(16,23,31,.06);color:#3d4854;opacity:1} .cmp__them b{color:#5b6570;opacity:1} /* 3.95:1 was under the floor */ .cmp__them em{color:#4a5560;opacity:1} .cmp__t{color:var(--ink)} /* ============================================================ v15 — Anubys Gold everywhere it can actually be seen. #F9D913 on the bone page is 1.34:1, below even the 3:1 large-text floor, so as *text* it only goes on dark grounds. Where the ground is light it becomes the highlight instead: the real brand gold on screen, with ink text on top of it. ============================================================ */ :root{--gold:#857200} /* exact logo hue, darkened only to 4.57:1 */ /* Text gold, on grounds that carry it */ .ink h1 em,.ink h2 em, .dark h1 em,.dark h2 em, /* Bright gold as TEXT only holds on a genuinely dark ground. .close-cta carries the .ink class but has no dark background rule, so it renders on paper and its headline was gold-on-bone at 1.33:1. Dropped from this list; it takes the highlight-fill treatment like every other light-ground headline. */ .bg-shot h1 em,.bg-shot h2 em, .block--ink h2 em,.block--magenta h2 em,.block--emerald h2 em{ color:var(--gold-bright)!important;opacity:1;background:none;padding:0; } .ink .eyebrow .num,.dark .eyebrow .num,.bg-shot .eyebrow .num, .close-cta .eyebrow .num,.proofbar .eyebrow .num{color:var(--gold-bright)} .ink .lnk,.dark .lnk,.bg-shot .lnk{text-decoration-color:var(--gold-bright)} /* Highlight gold, where text gold would vanish */ h1 em,h2 em{ color:var(--ink);font-style:normal; background:linear-gradient(to bottom,transparent 58%,var(--gold-bright) 58%,var(--gold-bright) 94%,transparent 94%); padding-inline:.08em; } /* Inside a colour panel the heading keeps the panel's own contrast colour. */ .block h1 em,.block h2 em{background:none;padding:0;color:inherit;opacity:.78} .block--ink h2 em,.block--magenta h2 em,.block--emerald h2 em{opacity:1} /* .lede keeps its muted ink on the photographic sections unless told otherwise */ .bg-shot .lede,.bg-shot p.lede{color:rgba(255,255,255,.92)} /* ============================================================ v16 — product pages carry the same system as the homepage ============================================================ */ /* ---- colourway grid ---- */ .cw__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:clamp(.6rem,1.2vw,.9rem)} .cw{display:flex;flex-direction:column;gap:.55rem;padding:.6rem;text-align:left; border:var(--glass-brd);border-radius:var(--r-lg);background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4); cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .cw:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(16,23,31,.35)} .cw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)} .cw__img{display:block;aspect-ratio:1;background:#fff;border-radius:var(--r-md);overflow:hidden} .cw__img img{width:100%;height:100%;object-fit:contain;padding:6%;mix-blend-mode:multiply} .cw__n{display:flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:600} .cw__n i{width:12px;height:12px;border-radius:50%;flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)} .cw[data-out]{opacity:.45} .cw[data-out] .cw__n::after{content:"Sold out";font-weight:400;opacity:.7;font-size:.72rem} /* ---- the full photo strip ---- */ .gal__i{flex:0 0 clamp(210px,26vw,320px);margin:0;background:#fff; border:var(--hair);border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1} .gal__i img{width:100%;height:100%;object-fit:contain;padding:6%;mix-blend-mode:multiply;display:block} .gal__i--life img{object-fit:cover;padding:0;mix-blend-mode:normal} /* ---- spec list ---- */ .spec{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:0 clamp(1.5rem,4vw,3rem);margin:0} .spec > div{display:grid;gap:.2rem;padding-block:1rem;border-bottom:var(--hair)} .spec dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin:0} .spec dd{margin:0;font-size:.96rem;line-height:1.5} /* ---- size pills: dead options are dead ---- */ [data-size]{transition:opacity .15s var(--ease),box-shadow .15s var(--ease)} [data-size][disabled],[data-size][data-out="true"]{ opacity:.38;text-decoration:line-through;cursor:not-allowed;pointer-events:none} [data-size][aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)} .pill[data-size]{padding:.75rem 1.3rem;font-size:.72rem;letter-spacing:.06em; text-transform:uppercase;font-weight:700} /* ---- PDP gallery plate matches the rest of the glass ---- */ #pdpStage{background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5); backdrop-filter:blur(var(--glass-blur)) saturate(1.5); border:var(--glass-brd);border-radius:var(--r-panel);overflow:hidden} #pdpStage img{padding:4%} .thumbs button{border-radius:var(--r-md);background:#fff} .thumbs button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)} /* ============================================================ v17 — PDP: nothing moves when you change colour, and a mobile layout built for a thumb rather than a shrunken desktop one. ============================================================ */ /* ---- 1. the gallery column must not resize ---- `1fr` is minmax(auto,1fr), so a column can be pushed wider by its own content. Changing colour swaps the stock line and the button label, which changed the right column's min-content and shoved the gallery from 388px to 454px. minmax(0,1fr) pins both columns to an even split. */ .wall__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .wall__in > *{min-width:0} /* ---- 2. reserve the slots that toggle ---- */ #pdpStock,#pdpSold{min-height:1.25rem} .pdp__status{min-height:1.25rem;display:block} #pdpAdd,#barAdd{min-height:56px} /* ---- 3. the thumb row keeps one height whatever the count ---- */ .thumbs{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none; padding:.65rem 0 .2rem;min-height:74px;scroll-snap-type:x proximity} .thumbs::-webkit-scrollbar{display:none} .thumbs button{flex:0 0 62px;height:62px;padding:0;border:var(--hair); scroll-snap-align:start;overflow:hidden} /* ---- 4. the stage cross-fades instead of cutting ---- */ #pdpStage img{transition:opacity .28s var(--ease)} /* ============================================================ MOBILE: the PDP was a desktop two-column layout squeezed down. ============================================================ */ @media (max-width:900px){ .wall__in{grid-template-columns:1fr;gap:1.1rem} .wall__sticky{position:static} /* gallery leads, full width, edge to edge */ #pdpStage{border-radius:var(--r-lg);margin-inline:calc(var(--gut) * -1); border-left:0;border-right:0;border-radius:0} #pdpStage img{padding:7%} .thumbs{margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)} /* buying decisions come before the essay */ .pdp__buy{order:2} .wall__swatches{gap:.55rem} .sw-lg{width:38px;height:38px} /* 34px is under the 44px touch target */ .pill[data-size]{flex:1 1 0;min-width:0;min-height:52px;padding:.9rem .6rem; font-size:.78rem;display:inline-flex;align-items:center;justify-content:center} /* one honest column of specs, not a squeezed two-up */ .spec{grid-template-columns:1fr;gap:0} .cw__grid{grid-template-columns:repeat(2,1fr)} .gal__i{flex-basis:min(78vw,300px)} /* the sticky buy bar is the primary action on a phone */ .buybar{padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom))} .buybar .btn{min-height:52px;flex:1} .feats li{gap:.7rem} } @media (max-width:520px){ .cw__grid{grid-template-columns:repeat(2,1fr)} .thumbs button{flex-basis:56px;height:56px} h1.h-l{font-size:clamp(2rem,9vw,2.6rem)} } /* ---- touch targets ---- A 14px colour dot is a 14px target. Rather than inflate the dots and wreck the card layout, each one keeps its size and gains a centred 44px hit area through a pseudo-element, which is what the finger actually lands on. */ @media (max-width:900px){ .sw,.sw-lg,.icon-btn,.caro__btn,.thumbs button,.cw{position:relative} /* ::before, not ::after: ::after already draws the sold-out strike and this overlay was silently replacing it on every small screen. */ .sw::before,.sw-lg::before,.icon-btn::before,.caro__btn::before{ content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:max(100%,44px);height:max(100%,44px);border-radius:50%; } /* the dots sit in a row, so widen the row's gap to stop the hit areas overlapping each other */ .card__sw,.sw-row{gap:.85rem} .sw-lg{width:44px;height:44px} .wall__swatches{gap:.6rem} .icon-btn{min-width:44px;min-height:44px} .lnk,.muted[href],a[href]:not(.card):not(.cw):not(.loved):not(.mos__i){ min-height:24px} /* standalone links get real height; links inside prose keep the text flow */ .sec-head .lnk,.pdp__buy a,a.lnk{display:inline-flex;align-items:center;min-height:44px} } /* ---- sold-out colour swatches ---- The old treatment was a faint white band inside a 45deg gradient, which vanished on pale colourways and never reached the edges of the dot. This is a real diagonal drawn corner to corner, white with a dark outline so it reads on every one of the fourteen colours. */ .sw-lg[data-out="true"],.sw[data-out="true"]{opacity:.55;cursor:not-allowed} .sw-lg[data-out="true"]::after,.sw[data-out="true"]::after{ content:"";position:absolute;left:50%;top:50%; width:141%;height:2px;border-radius:2px; transform:translate(-50%,-50%) rotate(-45deg); background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.6); inset:auto; } .sw-lg[data-out="true"]:hover{transform:none} /* ============================================================ v19 — CHECKOUT: drawer, cut-off countdown, full checkout page ============================================================ */ /* ---- cut-off countdown ---- */ .cd{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap; padding:.7rem .9rem;margin:0 0 .9rem;border-radius:var(--r-md); background:rgba(249,217,19,.16);border:1px solid rgba(249,217,19,.5); font-size:.82rem;line-height:1} .cd__lbl{opacity:.85} .cd__t{font-variant-numeric:tabular-nums;font-weight:700;font-size:.95rem; letter-spacing:.02em} .cd__t span{display:inline-block;min-width:1.35ch;text-align:center} .cd__off{opacity:.8} .co__cut{margin-bottom:1.2rem} /* ---- payment badges ---- */ .paybadges{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center; margin:.8rem 0 0;padding:0} .paybadges li{font-size:.66rem;letter-spacing:.06em;text-transform:uppercase; font-weight:700;opacity:.6;border:var(--hair);border-radius:4px;padding:.28rem .45rem} } /* Remaining commerce controls that were still under the touch minimum. */ @media (max-width:900px){ .upsell__add{min-height:44px;min-width:64px;padding-inline:1rem} [data-inc],[data-dec]{min-width:44px;min-height:44px;font-size:1.05rem} .li__rm{min-height:44px;display:inline-flex;align-items:center} .co__row .co__img{width:56px;height:56px} } /* ============================================================ v20 — CHECKOUT AS A SET, NOT A RECEIPT The page takes the colourway of whatever is in the cart. The order is three slots, because the range is three things, and an empty slot is a visible gap in the set rather than a "you may also like" strip. ============================================================ */ .ck{--ck:var(--ink);--ck-on:#fff;position:relative;isolation:isolate; padding-block:clamp(1.2rem,3vw,2.4rem) 0} .ck__wash{position:absolute;inset:0 0 auto;height:min(78vh,900px);z-index:-1; background: radial-gradient(120% 80% at 50% -20%, color-mix(in srgb,var(--ck) 58%,transparent), transparent 70%), radial-gradient(90% 60% at 90% 10%, color-mix(in srgb,var(--ck) 30%,transparent), transparent 72%); transition:background .6s var(--ease)} /* ---- the set ---- */ .ck__top{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem; flex-wrap:wrap;margin-bottom:clamp(1.4rem,3vw,2.2rem)} .ck__h{font-size:clamp(2.6rem,8vw,5.5rem);line-height:.92;letter-spacing:-.045em; margin:.2rem 0 0;font-weight:700} .ck__h em{font-style:normal;color:var(--ck)} .ck__h span{display:inline-block;font-size:.28em;letter-spacing:.06em; text-transform:uppercase;opacity:.45;vertical-align:middle;margin-left:.6rem; font-weight:700} .ck__cd{margin:0} .ck__slots{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;counter-reset:s} .ck__slot{display:grid; grid-template-columns:auto minmax(88px,132px) minmax(0,1fr) auto auto; gap:clamp(.8rem,2.5vw,1.6rem);align-items:center; padding:clamp(.7rem,1.6vw,1rem);border-radius:var(--r-lg); border:var(--glass-brd);background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4); transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s} .ck__slot.is-in{box-shadow:0 22px 54px -30px rgba(16,23,31,.5)} .ck__slot.is-out{background:rgba(255,255,255,.34);border-style:dashed} .ck__slot.is-out:hover{background:rgba(255,255,255,.5);transform:translateY(-2px)} .ck__n{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.1rem);line-height:1; opacity:.28;font-variant-numeric:tabular-nums;width:1.4em;text-align:center} .ck__shot{display:block;aspect-ratio:1;border-radius:var(--r-md);background:#fff; overflow:hidden;position:relative} .ck__shot img{width:100%;height:100%;object-fit:contain;padding:8%;mix-blend-mode:multiply} .ck__shot--ghost{background:rgba(16,23,31,.04)} .ck__shot--ghost img{opacity:.26;filter:grayscale(1)} .ck__shot--ghost::after{content:"+";position:absolute;inset:0;display:grid;place-items:center; font-size:clamp(1.6rem,4vw,2.4rem);font-weight:300;color:var(--ck);opacity:.85} .ck__info{min-width:0} .ck__info b{display:block;font-size:clamp(1rem,2vw,1.3rem);letter-spacing:-.02em;line-height:1.2} .ck__info small{display:block;font-size:.82rem;opacity:.55;margin-top:.2rem} .ck__price{font-weight:700;font-size:clamp(.95rem,1.8vw,1.15rem);white-space:nowrap; font-variant-numeric:tabular-nums} .ck__rm{font-size:.74rem;opacity:.5;text-decoration:underline;padding:.5rem} .ck__rm:hover{opacity:1} .ck__add{font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase; padding:.85rem 1.4rem;border-radius:999px;background:var(--ck);color:var(--ck-on); transition:transform .2s var(--ease),filter .2s} .ck__add:hover{transform:translateY(-2px);filter:brightness(1.08)} .ck__note{margin:1.1rem 0 0;font-size:.92rem;opacity:.65;max-width:60ch} /* ---- payment ---- */ .ck__pay{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(1.5rem,4vw,3.5rem);align-items:start; padding-block:clamp(2.5rem,6vw,5rem)} .ck__paycol{min-width:0} .ck__mount{min-height:420px;margin-top:1.2rem} .ck__err{color:var(--alert);font-size:.86rem;margin-top:1rem} .ck__fallback{margin-top:1.2rem;padding:1.2rem;border:var(--hair);border-radius:var(--r-lg); background:rgba(255,255,255,.6)} .ck__fallback p{margin:0 0 1rem;font-size:.92rem} .ck__bill{position:sticky;top:92px;display:grid;gap:.9rem;min-width:0} .ck__tot{padding:1.2rem;border-radius:var(--r-lg);background:var(--ink);color:#fff; display:grid;gap:.55rem} .ck__line{display:flex;justify-content:space-between;align-items:baseline;font-size:.92rem} .ck__line span{opacity:.6} .ck__line b{font-variant-numeric:tabular-nums} .ck__line--big{padding-top:.7rem;margin-top:.2rem;border-top:1px solid rgba(255,255,255,.16); font-size:1.3rem} .ck__line--big span{opacity:.75;font-size:.92rem} .ck__ship{font-size:.78rem;opacity:.75;margin:.3rem 0 .2rem} .ck__ship .bar{height:5px;border-radius:999px;background:rgba(255,255,255,.16); overflow:hidden;margin-top:.45rem} .ck__ship .bar i{display:block;height:100%;background:var(--gold-bright); transition:width .45s var(--ease)} .ck__trust{list-style:none;margin:0;padding:1rem 1.1rem;display:grid;gap:.6rem; border:var(--glass-brd);border-radius:var(--r-lg);background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)} .ck__trust li{display:flex;gap:.6rem;align-items:flex-start;font-size:.8rem} .ck__trust svg{width:17px;height:17px;flex:none;margin-top:.05rem;color:var(--gold); stroke:currentColor;fill:none;stroke-width:1.8} .ck__trust b{display:block;font-size:.85rem;color:var(--ink)} .ck__trust span{opacity:.6} .ck__quote{margin:0;padding:1rem 1.1rem;border-radius:var(--r-lg); background:rgba(255,255,255,.6);border:var(--glass-brd);font-size:.88rem;line-height:1.5} .ck__quote cite{display:block;font-style:normal;font-size:.76rem;opacity:.5;margin-top:.5rem} .ck__rating{justify-content:center;font-size:.82rem} .ck__rating span{opacity:.55} @media (max-width:860px){ .ck__slot{grid-template-columns:auto 74px minmax(0,1fr) auto; grid-template-areas:"n s i p" "n s i a";row-gap:.5rem;align-items:center} .ck__n{grid-area:n} .ck__shot{grid-area:s} .ck__info{grid-area:i} .ck__price{grid-area:p;text-align:right} .ck__add,.ck__rm{grid-area:a;justify-self:end} .ck__add{min-height:44px;padding:.7rem 1.1rem} .ck__rm{min-height:44px;display:inline-flex;align-items:center} .ck__pay{grid-template-columns:1fr} .ck__bill{position:static;order:-1} .ck__mount{min-height:520px} .ck__top{align-items:flex-start} } /* The v15 rule gives every heading a gold marker highlight. On the checkout title the is a full stop, so it rendered as a floating gold square. Here the em takes the cart's colourway instead. */ .ck__h em{background:none;padding:0;color:var(--ck)} /* ---- colour groups: one card per colourway, in the drawer and on /checkout ---- */ .ck__group{--ck:var(--ink);--ck-on:#fff;margin:0 0 1.1rem} .ck__group:last-child{margin-bottom:0} .ck__ghead{display:flex;align-items:baseline;gap:.55rem;margin:0 0 .6rem; padding-bottom:.5rem;border-bottom:2px solid color-mix(in srgb,var(--ck) 45%,transparent)} .ck__dot{width:12px;height:12px;border-radius:50%;flex:none;align-self:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)} .ck__ghead b{font-size:1rem;letter-spacing:-.01em} .ck__count{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;opacity:.5;font-weight:700} .ck__gval{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;font-size:.95rem} .ck__qty{position:absolute;top:4px;right:4px;min-width:20px;height:20px;border-radius:999px; background:var(--ink);color:#fff;font-style:normal;font-size:.7rem;font-weight:700; display:grid;place-items:center;padding:0 5px;z-index:2} .ck__empty{padding:2rem 0;opacity:.7} /* compact variant, for the drawer */ .ck__group--sm .ck__slot{grid-template-columns:auto 56px minmax(0,1fr) auto; grid-template-areas:"n s i p" "n s i a";gap:.5rem .7rem;padding:.6rem;row-gap:.3rem} .ck__group--sm .ck__n{grid-area:n;font-size:1.05rem;width:1.1em} .ck__group--sm .ck__shot{grid-area:s} .ck__group--sm .ck__info{grid-area:i} .ck__group--sm .ck__info b{font-size:.9rem} .ck__group--sm .ck__info small{font-size:.74rem} .ck__group--sm .ck__price{grid-area:p;text-align:right;font-size:.9rem} .ck__group--sm .ck__add,.ck__group--sm .ck__rm{grid-area:a;justify-self:end} .ck__group--sm .ck__add{padding:.5rem .9rem;font-size:.7rem} .ck__group--sm .ck__shot--ghost::after{font-size:1.4rem} /* the drawer picks up the cart's colourway too */ .drawer{--ck:var(--ink)} .drawer[data-colour] .drawer__hd{border-bottom:2px solid color-mix(in srgb,var(--ck) 50%,transparent)} .drawer[data-colour] .bar i{background:var(--ck)} /* ---- set discount: the reward, and the nudge toward it ---- */ .ck__won,.ck__near{margin:.5rem 0 .7rem;font-size:.8rem;padding:.55rem .8rem; border-radius:var(--r-md);line-height:1.35} .ck__won{background:color-mix(in srgb,var(--ck) 16%,transparent); border:1px solid color-mix(in srgb,var(--ck) 45%,transparent);color:var(--ink)} .ck__won b{color:var(--ck)} .ck__near{background:rgba(249,217,19,.15);border:1px dashed rgba(249,217,19,.65)} .ck__near b{color:var(--gold)} .ck__gval s{opacity:.4;font-weight:400;margin-right:.3rem;font-size:.85em} .ck__line--save{color:var(--good)} .ck__line--save span{opacity:.85} .drawer__save{display:flex;justify-content:space-between;font-size:.85rem; color:var(--good);margin-bottom:.5rem} /* a shot whose image never arrived keeps its plate rather than showing a broken-image glyph */ .ck__shot.is-blank{background:rgba(16,23,31,.05)} .ck__shot.is-blank::before{content:"";position:absolute;inset:28%;border-radius:4px; background:rgba(16,23,31,.09)} /* Stars are the brand gold everywhere, never the darkened text gold. */ .stars{color:var(--gold-bright)!important} /* ============================================================ v23 — FIT FINDER ============================================================ */ .ff{margin-block:clamp(1.2rem,3vw,2rem);margin-inline:clamp(0px,2vw,28px); border-radius:var(--r-panel);overflow:hidden; background:linear-gradient(135deg,rgba(249,217,19,.16),rgba(20,204,175,.14)); border:var(--glass-brd); -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4); box-shadow:0 30px 70px -46px rgba(16,23,31,.4)} .ff__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(1.4rem,3.5vw,3rem);padding:clamp(1.4rem,3.5vw,2.6rem)} .ff__ico{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%; background:var(--gold-bright);color:#10171f;margin-right:.4rem;vertical-align:-.3em} .ff__ico svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:3} .ff__h{font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.05;letter-spacing:-.03em;margin:.3rem 0 .5rem} .ff__sub{font-size:.92rem;opacity:.7;max-width:46ch;margin:0 0 1.3rem} .ff__grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem} .ff__f{display:grid;gap:.35rem;min-width:0} .ff__f--wide{grid-column:1/-1} .ff__f > span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;opacity:.6} .ff__f i{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;opacity:.75; font-size:.72rem;margin-left:.35rem} .ff select,.ff input{width:100%;min-height:48px;padding:.7rem .85rem;border-radius:var(--r-md); border:1px solid rgba(16,23,31,.18);background:rgba(255,255,255,.85); font:inherit;font-size:.95rem;color:var(--ink);appearance:none} .ff select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%), linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%; background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2rem} .ff select:focus,.ff input:focus{outline:2px solid var(--ink);outline-offset:1px} .ff__meas{display:flex;align-items:center;gap:.5rem} .ff__meas span{font-size:.85rem;opacity:.6;font-weight:600} .ff__err{color:var(--alert);font-size:.84rem;margin:.7rem 0 0} .ff__out{display:block;background:rgba(255,255,255,.72);border-radius:var(--r-lg); padding:clamp(1.1rem,2.5vw,1.6rem);border:var(--glass-brd);align-self:start} .ff__tbl{width:100%;border-collapse:collapse;font-size:.88rem} .ff__tbl caption{text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; opacity:.55;font-weight:700;padding-bottom:.6rem} .ff__tbl th,.ff__tbl td{text-align:left;padding:.5rem 0;border-bottom:var(--hair)} .ff__tbl th{font-weight:700} .ff__tbl td{text-align:right;font-variant-numeric:tabular-nums;opacity:.75} .ff__hint{font-size:.84rem;opacity:.6;margin:.9rem 0 0} .ff__lbl{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700; color:var(--gold);margin:0 0 .3rem} .ff__res h3{font-size:clamp(1.4rem,3vw,2rem);margin:0 0 .3rem;letter-spacing:-.02em;font-weight:400} .ff__res h3 b{font-weight:700} .ff__band{font-size:.85rem;opacity:.6;margin:0 0 .9rem} ul.ff__why{margin:0 0 1rem;padding:0;list-style:none;display:grid;gap:.4rem} ul.ff__why li{font-size:.88rem;line-height:1.45;padding-left:1.1rem;position:relative} ul.ff__why li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px; border-radius:50%;background:var(--gold-bright)} p.ff__why{font-size:.9rem;line-height:1.5;opacity:.75;margin:0} .ff__nudge{font-size:.82rem;opacity:.65;margin:0 0 1rem} .ff__act{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap} .ff__safe{font-size:.76rem;opacity:.55} .ff__res--ask h3{font-size:1.25rem} .ff__link{font-size:.82rem;font-weight:600;display:inline-flex;align-items:center;gap:.3rem; text-decoration:underline;text-decoration-color:var(--gold-bright);text-underline-offset:3px} .ff__link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2} @media (max-width:900px){ .ff__in{grid-template-columns:1fr;gap:1.2rem} .ff__grid{grid-template-columns:1fr} .ff select,.ff input{min-height:52px;font-size:16px} /* 16px stops iOS zooming */ .ff__link{min-height:44px} } /* ============================================================ v24 — ONE MOBILE GUTTER Panels were sitting 7.5px from the screen edge (clamp(0px,2vw,28px) collapses on a phone) and the PDP gallery, thumb rail and marquees were deliberately full-bleed. On a phone everything now holds the same margin so nothing is jammed against the bezel. ============================================================ */ @media (max-width:900px){ :root{--edge:1.15rem} /* the single mobile bleed */ /* every surface that paints a background sits on the gutter */ .section.tint,.section.dark,.section.block,.wall,.proofbar,.ff, .bg-shot,.ck__wash{ margin-inline:var(--edge); } /* the wash is positioned, so give it insets rather than margins */ .ck__wash{margin-inline:0;left:var(--edge);right:var(--edge); border-radius:var(--r-panel)} /* inside a panel the content only needs breathing room, not the full gutter again, or it ends up doubly indented on a narrow screen */ .section.tint > .wrap,.section.dark > .wrap,.section.block > .wrap, .proofbar > .wrap,.wall > .wrap, .section.tint > .wrap-n,.section.dark > .wrap-n,.section.block > .wrap-n{ padding-inline:1rem; } /* the PDP gallery and its thumb rail were pulled full-bleed; put them back */ #pdpStage{margin-inline:0;border-radius:var(--r-lg); border-left:var(--glass-brd);border-right:var(--glass-brd)} .thumbs{margin-inline:0;padding-inline:0} /* scrolling rails clip at the gutter, not the bezel */ .ugc,.qt,.mq{margin-inline:var(--edge);border-radius:var(--r-md);overflow:hidden} /* the customer wall goes full width inside the gutter, not outside it */ .mos{margin-inline:0} } @media (max-width:640px){ .mos__i{margin-bottom:.9rem} } /* ============================================================ v25 — PDP gallery: no plate, brand radii, gold selection The product now sits on the page rather than inside a glass container, and the selected thumbnail is marked in Anubys gold instead of a hard black ring. ============================================================ */ /* ---- the main shot loses its container ---- */ #pdpStage{ background:transparent; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-radius:var(--r-lg); overflow:hidden; } #pdpStage img{padding:0} /* Cut-outs are shot on white, so they keep a white plate behind the product itself. Lifestyle frames fill the corner radius edge to edge. */ #pdpStage img:not([data-kind="lifestyle"]){ background:#fff;padding:5%;border-radius:var(--r-lg); } #pdpStage img[data-kind="lifestyle"]{ object-fit:cover;padding:0;border-radius:var(--r-lg); } /* the colour chip floats on the image, not on a plate edge */ .wall__name{border-radius:999px} /* ---- thumbnails: gold selection, no black ring ---- */ .thumbs button{ border-radius:var(--r-md); border:1px solid var(--line); background:#fff; box-shadow:none; overflow:hidden; transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease); } .thumbs button:hover{border-color:var(--line-2);transform:translateY(-2px)} .thumbs button[aria-pressed="true"]{ border-color:var(--gold-bright); box-shadow:0 0 0 2px var(--gold-bright); } .thumbs button img{border-radius:calc(var(--r-md) - 3px)} @media (max-width:900px){ #pdpStage{border-radius:var(--r-lg);border:0} #pdpStage img:not([data-kind="lifestyle"]){padding:6%} } /* ============================================================ v28 — the product gallery gets room to breathe, and the lifestyle frame is given the space it deserves. ============================================================ */ /* One offset shared by both columns, so the product title starts on exactly the same line as the top of the image rather than riding higher than it. */ @media (min-width:901px){ .wall__in > *{padding-top:clamp(1.5rem,3.5vw,3rem)} #pdpStage{margin-top:0} } @media (max-width:900px){ .wall__sticky{padding-top:1.1rem} #pdpStage{margin-top:.4rem} } /* ============================================================ v29 — product story, and every customer photo in three rows ============================================================ */ /* ---- the narrative ---- */ .story{list-style:none;margin:0;padding:0;display:grid;gap:0; counter-reset:st;border-top:var(--hair)} .story li{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2.4rem); padding-block:clamp(1.4rem,3vw,2.2rem);border-bottom:var(--hair);align-items:start} .story__n{font-family:var(--serif);font-size:clamp(1.6rem,3.5vw,2.6rem);line-height:1; opacity:.28;font-variant-numeric:tabular-nums} .story h3{font-size:clamp(1.1rem,2.2vw,1.5rem);letter-spacing:-.02em;margin:0 0 .5rem} .story p{margin:0;font-size:clamp(.95rem,1.7vw,1.05rem);line-height:1.62;opacity:.78;max-width:62ch} /* ---- the wall: dense, tappable, cheap on height ---- */ .pw{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:5px} .pw__t{aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:#eceae5; padding:0;border:0;cursor:zoom-in;position:relative; transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .pw__t img{width:100%;height:100%;object-fit:cover;display:block} .pw__t:hover{transform:scale(1.06);z-index:2;box-shadow:0 12px 28px -12px rgba(16,23,31,.5)} .pw__t:focus-visible{outline:2px solid var(--ink);outline-offset:2px;z-index:2} /* ---- lightbox ---- */ .pw__lb{border:0;padding:0;background:transparent;max-width:min(880px,94vw);width:100%} .pw__lb::backdrop{background:rgba(8,12,16,.82);backdrop-filter:blur(6px)} .pw__in{position:relative;background:var(--paper);border-radius:var(--r-lg);overflow:hidden} .pw__fig{margin:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)} .pw__fig img{width:100%;height:100%;max-height:70vh;object-fit:cover;display:block;background:#eceae5} .pw__fig figcaption{padding:clamp(1.1rem,2.5vw,1.8rem);display:grid;gap:.5rem;align-content:center} .pw__fig b{font-size:1.05rem} .pw__fig figcaption span{font-size:.78rem;opacity:.55} .pw__fig p{margin:.3rem 0 0;font-size:.95rem;line-height:1.55} .pw__x{position:absolute;top:.5rem;right:.6rem;z-index:3;width:44px;height:44px; border-radius:999px;background:rgba(255,255,255,.9);font-size:1.4rem;line-height:1; display:grid;place-items:center} .pw__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:44px;height:44px;border-radius:999px;background:rgba(255,255,255,.9); font-size:1.6rem;line-height:1;display:grid;place-items:center} .pw__nav--prev{left:.5rem} .pw__nav--next{right:.5rem} /* Top left, over the photo. Centred at the bottom it landed on the review text once the layout stacked on a phone. */ .pw__count{position:absolute;top:.6rem;left:.6rem;z-index:3;margin:0; font-size:.74rem;font-weight:700;color:var(--ink);background:rgba(255,255,255,.92); padding:.3rem .7rem;border-radius:999px; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} @media (max-width:760px){ .pw{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:4px} .pw__fig{grid-template-columns:1fr} .pw__fig img{max-height:52vh} .story li{grid-template-columns:1fr;gap:.4rem} .story__n{font-size:1.3rem} } /* The wall collapses to about four rows. 73 thumbnails is a lot of height to spend on something most people only glance at, so the rest is one tap away. */ .pw__wrap{position:relative} .pw{max-height:clamp(180px,26vw,300px);overflow:hidden; transition:max-height .45s var(--ease)} .pw.is-open{max-height:2400px} /* Masking the grid itself fades the last row whatever colour sits behind the section, which a painted gradient overlay could not do. */ .pw:not(.is-open){-webkit-mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.12)); mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.12))} .pw__more{display:block;margin:.9rem auto 0;padding:.7rem 1.4rem;min-height:44px; border-radius:999px;border:var(--hair);background:rgba(255,255,255,.7); font-size:.82rem;font-weight:700;letter-spacing:.02em; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .pw__more:hover{background:var(--ink);color:#fff;border-color:var(--ink)} /* ============================================================ v30 — the scroll-driven turntable ============================================================ */ .spin{position:relative;display:grid;justify-items:center} .spin__stage{position:relative;width:100%; max-width:min(100%, calc(var(--sw) * 1px + 6rem)); aspect-ratio:var(--sw) / var(--sh)} /* Seed image and canvas occupy the same cell so the swap cannot shift layout. */ .spin__seed,.spin__c{position:absolute;inset:0;width:100%;height:100%; object-fit:contain;display:block} .spin__c{opacity:0;transition:opacity .25s var(--ease)} .spin.is-live .spin__c{opacity:1} .spin.is-live .spin__seed{opacity:0} .spin__seed{transition:opacity .25s var(--ease)} /* No drop-shadow on the stage. On a cutout this strappy, drop-shadow traces every individual strap and D-ring, and the overlapping blurs read as a grey outline rather than depth. The grounding shadow is a separate ellipse underneath. */ .spin__stage::after{content:"";position:absolute;left:50%;bottom:-2%; width:62%;height:7%;transform:translateX(-50%);border-radius:50%; background:radial-gradient(ellipse at center, rgba(16,23,31,.20) 0%, rgba(16,23,31,.10) 45%, transparent 72%); pointer-events:none;z-index:-1} .spin__badge{margin-top:.2rem} @media (max-width:900px){ /* Small enough that the headline and the buy button still clear the fold. */ .spin__stage{max-width:min(70vw, 320px)} .spin__stage::after{width:58%;height:6%} } /* The turntable as a product-page band: wider stage, centred, no badge. */ .spinband .spin{margin-top:clamp(1.4rem,3vw,2.4rem)} /* Capped below the frame's own pixel width, not above it. At 1.25x the 520px frames were being stretched to 650 CSS px and then shown on a 2x screen, an effective 0.8 device pixels per image pixel, which is why the collar and lead looked soft while they turned. */ .spinband .spin__stage{max-width:min(100%, calc(var(--sw) * 0.72px))} @media (max-width:900px){ .spinband .spin__stage{max-width:min(86vw, calc(var(--sw) * 0.72px))} } /* ============================================================ v31 — turntables in the category tiles ============================================================ */ /* A SQUARE stage inside the tile, holding tightly-cropped frames. object-fit:contain fits a frame's longest side to the box, so when the box is square every product lands at the same major-axis size no matter its shape, which is what makes the three tiles read as equal. Doing that by padding the frames out to a square instead wasted the pixels: the collar was using 30% of its canvas and the leash 27.6% against the harness's 66%, so for identical file sizes they carried less than half the product resolution and looked soft. The frames are tight now and the squaring happens here, for free. */ .cat__shot--spin{display:grid;place-items:center;padding:0} .cat__shot--spin .spin{width:100%;height:100%;display:grid;place-items:center} .cat__shot--spin .spin__stage{height:100%;width:auto;aspect-ratio:1;max-width:100%; transition:transform .5s var(--ease)} /* The frames are square with their own 6% margin baked in and the product scaled to a shared major axis, so all three tiles now show the product at identical size. Only a hair of CSS padding on top, or it floats in a lot of nothing. */ /* Tight frames carry no margin of their own, so the breathing room lives here. */ .cat__shot--spin .spin__seed, .cat__shot--spin .spin__c{padding:5%;box-sizing:border-box} /* The ellipse grounds a product, not a tile, so it has no meaning here. */ .cat__shot--spin .spin__stage::after{display:none} .cat:hover .cat__shot--spin .spin__stage{transform:scale(1.04)} @media (max-width:820px){ .cat__shot--spin .spin__seed, .cat__shot--spin .spin__c{padding:4%} } /* ============================================================ v32 — Nunito The numeral accents used to be a serif contrast against a grotesque. With a single rounded family the contrast has to come from weight and width instead, so they carry 800 and tabular figures to stop prices jittering as digits change. ============================================================ */ /* .fact b already sets 700 at a higher specificity, so the stat selector has to match it rather than relying on source order. */ .ledger__n,.fact .fact__big,.proofbar__n b,.ck__n,.story__n{ font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .qt__q i{font-weight:700;font-style:italic} /* Prices and any figure that updates in place. */ .price,.money,.cart__line b,.sum__row b{font-variant-numeric:tabular-nums} /* ============================================================ v33 — carousels must not scroll vertically Setting overflow-x alone does not keep the other axis alone: per spec, when one axis is not visible the other computes from visible to auto. So every horizontal carousel was quietly a vertical scroller as well, waiting for something to overflow. Something did. Cards enter with .rv, which starts them 14px down under a spring, and mid-animation that hangs roughly 9px below the track and counts as scrollable overflow. Inside a horizontal strip the fade carries the entrance on its own, so the travel goes and the axis is pinned behind it. ============================================================ */ .caro__track{overflow-y:hidden} .js .caro__track > .rv{transform:none} /* The water clip replaces a photo inside a .spread, so it takes the media column's place but keeps the cutout's transparency rather than sitting in a plate the way the old image did. */ .spread__spin{position:relative} .spread__spin .spin__stage{max-width:min(100%, calc(var(--sw) * 0.78px));margin-inline:auto} .spread__spin .spin__stage::after{width:56%;height:5%;bottom:0} @media (max-width:900px){ .spread__spin .spin__stage{max-width:min(86vw, calc(var(--sw) * 0.78px))} } /* ============================================================ v34 — scannable bullets Sections were carrying 40 to 70 word paragraphs. The claims inside them are enumerable, so they read far faster as a list. ============================================================ */ .ticks{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.62rem} .ticks li{display:grid;grid-template-columns:auto 1fr;gap:.62rem;align-items:start; font-size:clamp(.95rem,1.4vw,1.05rem);line-height:1.45} .ticks svg{width:18px;height:18px;margin-top:.18em;flex:none;stroke:var(--gold); stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round} .ticks b{font-weight:700} /* On a dark or coloured band the gold tick goes muddy; use the panel's own ink. */ .block .ticks svg{stroke:var(--on)} @media (max-width:600px){ .ticks{gap:.55rem} } /* A hook line, not a paragraph: it introduces the bullets under it. */ .lede--tight{max-width:38ch;margin-bottom:.2rem} /* ============================================================ v35 — the brand gold, used where it can actually be the brand gold --gold had been darkened to #8a6f00 to survive as text on bone. It passes contrast at 4.58:1 and reads as olive bronze, which is the opposite of the brand. Brand yellow cannot be text on a light ground at all: #F9D913 on paper is 1.33:1. So gold stops being a text colour. It becomes a FILL with ink on top, which is 12.85:1 and unmistakably the logo yellow. Where a mark has to be a stroke rather than a fill it uses a dark amber that clears the 3:1 graphics threshold. ============================================================ */ :root{ --gold-ink:#9a7b0a; /* 3.83:1, strokes and rules only, never body text */ } /* Highlighted words in a headline: marker pen, not coloured type. */ h1 em,h2 em,h3 em{ font-style:normal;color:var(--ink); background:linear-gradient(var(--gold-bright),var(--gold-bright)); background-size:100% .38em;background-position:0 86%;background-repeat:no-repeat; padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone} /* On a coloured or dark panel the ink-on-gold pairing still holds. */ .block h1 em,.block h2 em,.dark h1 em,.dark h2 em{ color:#10171f;opacity:1; background:linear-gradient(var(--gold-bright),var(--gold-bright)); background-size:100% .38em;background-position:0 86%;background-repeat:no-repeat} /* Section numbers become a solid gold chip. */ .eyebrow .num,.block .eyebrow .num,.dark .eyebrow .num,.proofbar .eyebrow .num{ background:var(--gold-bright);color:#10171f;opacity:1; border-radius:999px;padding:.14em .5em;font-weight:800; font-variant-numeric:tabular-nums;letter-spacing:0} /* Links keep readable ink and carry the gold in the underline. */ .lnk:hover,.block .lnk:hover{color:var(--ink);text-decoration-color:var(--gold-bright); text-decoration-thickness:3px} .block .lnk:hover{color:var(--on);text-decoration-color:var(--on)} /* Ticks are the brand gold, not an amber compromise. A thin gold stroke on bone is 1.33:1 and vanishes, so the tick becomes a filled gold disc with the check cut through it in ink: 12.85:1, and it works identically on paper, on a photo and on a coloured panel because it carries its own ground. */ .ticks svg,.rev__ver svg,.ck__trust svg{ width:20px;height:20px;padding:3.5px;border-radius:999px; background:var(--gold-bright);stroke:#10171f;color:#10171f; stroke-width:3.2;box-sizing:border-box} .block .ticks svg,.dark .ticks svg{background:var(--gold-bright);stroke:#10171f} .ff__lbl{color:var(--ink-2)} .ck__near b{color:var(--ink)} .accent{color:var(--ink); background:linear-gradient(var(--gold-bright),var(--gold-bright)); background-size:100% .38em;background-position:0 86%;background-repeat:no-repeat} /* ============================================================ v36 — checkout progress Baymard's checkout research finds a visible sense of "where am I and how much is left" reduces abandonment. This checkout is a single embedded page, so the steps are honest about that: the bag is behind you, payment is here, confirmation follows. ============================================================ */ .ck__steps{list-style:none;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap; margin:0 0 1.4rem;padding:0;font-size:.8rem;font-weight:600} .ck__steps li{display:flex;align-items:center;gap:.45rem;opacity:.42; color:var(--on,var(--ink))} .ck__steps li span{width:22px;height:22px;border-radius:999px;display:grid; place-items:center;font-size:.72rem;font-weight:800; border:1.5px solid currentColor;flex:none} .ck__steps li + li::before{content:"";width:18px;height:1.5px;background:currentColor; opacity:.4;margin-right:.05rem} .ck__steps .is-done{opacity:.8} .ck__steps .is-done span{background:var(--gold-bright);color:#10171f; border-color:var(--gold-bright)} .ck__steps .is-now{opacity:1} .ck__steps .is-now span{background:var(--gold-bright);color:#10171f; border-color:var(--gold-bright);box-shadow:0 0 0 4px rgba(249,217,19,.28)} @media (max-width:520px){ .ck__steps{font-size:.74rem} .ck__steps li + li::before{width:12px} } /* ============================================================ v37 — the closing CTA was never given its background The section carries class "ink" and rules like .ink h2 em paint its headline in bright gold, which only works on a dark ground. No .ink rule ever set one, so it rendered on bone and the headline sat at 1.33:1. Giving it the dark ground the class always implied: gold on ink is 12.85:1, the gold buttons carry far harder, and it lands as the page's full stop into the footer. ============================================================ */ .close-cta{--on:#fff;background:var(--ink);color:var(--on)} .close-cta .lede{color:rgba(255,255,255,.82)} .close-cta .eyebrow{color:rgba(255,255,255,.6)} .close-cta h2{color:var(--on)} .close-cta h2 em{color:var(--gold-bright)!important;background:none;padding:0} /* --ink-3 was tuned to exactly 4.50:1 on the lightest paper, so on paper-2 it fell to 4.16 and on paper-3 to 3.77. Muted captions and struck-through compare-at prices sit on those darker shades. #5c646e clears 4.5 on all three. */ :root{ --ink-3:#5c646e } /* .was and .muted sit on tinted card grounds, not flat paper, so even the darkened --ink-3 landed at 2.13:1 and 4.16:1 there. A struck compare-at price is a price claim, so it has to be legible rather than merely decorative. */ .was,.card__price .was{color:var(--ink-2)} .rating .muted,.card__meta .muted{color:var(--ink-2)} /* Not inside a dark or coloured panel, where .block already sets light text and forcing ink here put dark grey on a dark ground at 1.37:1. */ .block .was,.dark .was,.block .muted,.dark .muted, .block .card__price .was,.block .card__meta .muted{color:var(--on);opacity:.72} /* This rating sits on a DARK ground, so the light grey is right and forcing ink here put dark-on-dark at 1.02:1. The shortfall was the 0.72 opacity thinning it to 4.16:1; full opacity on the same hue clears 4.5. */ .sec-head .rating .muted,.sec-head .rating b{opacity:1;color:#c3c9d0} /* ============================ v38 ============================ Repricing removed every strikethrough on the site. Two rules were styling a figure that no longer exists, and the buy bar's small line now carries the fit promise rather than a was-price, so striking it through read as a withdrawn offer. The only survivor is the set, where the struck figure is a genuine "bought separately" total and is labelled as such. */ .buybar__p small{text-decoration:none;color:var(--ink-2);font-weight:600} .pill--fit{background:var(--gold-bright);color:var(--ink);font-weight:700} .pill--fit svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4} /* ============================ v39 ============================ Policy pages. Deliberately the plainest thing on the site: a policy that looks designed looks like it is selling you something, and these two pages exist to be read and relied on. Measure capped near 68ch, generous leading, and the statutory-rights callouts given a gold edge so they cannot be skimmed past. */ .legal{padding:clamp(2.5rem,6vw,5rem) 0 clamp(4rem,9vw,7rem)} .legal .lede{max-width:56ch} .legal__date{font-size:.82rem;color:var(--ink-3);margin:.9rem 0 0} .legal__toc{margin:2.6rem 0 3.4rem;padding:1.4rem 1.6rem;border-radius:var(--r-md,14px); background:var(--paper-2);border:1px solid var(--line,rgba(21,32,43,.1))} .legal__toc ol{margin:0;padding:0;list-style:none;counter-reset:toc; display:grid;gap:.55rem} .legal__toc li{counter-increment:toc;font-size:.92rem} .legal__toc li::before{content:counter(toc,decimal-leading-zero); font-weight:800;color:var(--gold);margin-right:.7rem;font-variant-numeric:tabular-nums} .legal__toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent} .legal__toc a:hover{border-bottom-color:var(--gold)} .legal__s{max-width:68ch;margin:0 0 3.2rem;scroll-margin-top:6rem} .legal__s h2{font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.25; letter-spacing:-.012em;margin:0 0 1rem;display:flex;gap:.8rem;align-items:baseline} .legal__s h2 .num{display:inline;color:var(--gold);font-weight:800;font-size:.8em; font-variant-numeric:tabular-nums;flex:none} /* .num is display:none globally because a numbered-section tic reads as decoration in marketing copy. On a policy page it is the opposite: you need to be able to say "clause 04" on the phone, so it comes back here only. */ .legal__s p{margin:0 0 1rem;line-height:1.7;color:var(--ink-2)} .legal__s b{color:var(--ink);font-weight:700} .legal__s ul{margin:0 0 1.3rem;padding:0 0 0 1.1rem;display:grid;gap:.6rem} .legal__s li{line-height:1.65;color:var(--ink-2)} .legal__s li::marker{color:var(--gold)} /* The statutory-rights notes. These are the sentences that stop a goodwill condition reading as a limit on a legal right, so they get weight. */ .legal__note{border-left:3px solid var(--gold-bright);background:var(--paper-2); padding:1rem 1.2rem;border-radius:0 10px 10px 0;margin:0 0 1.3rem !important; color:var(--ink) !important;font-size:.95rem} /* ============================ v40 ============================ Trade page. A buyer at a desk deciding in ninety seconds, not a dog owner being persuaded. So: numbers early, a real table, and none of the scroll theatre the retail pages carry. It still has to look like Anubys, which is why the type and the gold are unchanged and only the pacing differs. */ .trade .h-xl{margin-bottom:1rem} .trade .lede{max-width:54ch} /* the four qualifying facts, above the fold */ .facts{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;gap:1px; background:var(--line);border:1px solid var(--line);border-radius:var(--r-md); overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .facts li{background:var(--paper);padding:1.3rem 1.2rem} .facts b{display:block;font-size:clamp(1.7rem,4vw,2.4rem);line-height:1; letter-spacing:-.02em;color:var(--ink)} .facts span{display:block;font-weight:700;font-size:.9rem;margin-top:.35rem;color:var(--ink)} .facts small{display:block;font-size:.78rem;color:var(--ink-3);margin-top:.4rem;line-height:1.45} /* trade price list */ .tbl__scroll{overflow-x:auto;overflow-y:hidden;margin-top:2rem; border:1px solid var(--line);border-radius:var(--r-md)} .tbl{width:100%;border-collapse:collapse;font-size:.94rem;min-width:460px} .tbl th,.tbl td{text-align:right;padding:.85rem 1rem;white-space:nowrap} .tbl th:first-child,.tbl td:first-child{text-align:left;white-space:normal} .tbl thead th{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em; color:var(--ink-3);background:var(--paper-2);font-weight:800} .tbl tbody tr+tr td{border-top:1px solid var(--line)} .tbl tbody td{color:var(--ink-2);font-variant-numeric:tabular-nums} .tbl tbody td b{color:var(--ink)} /* opening-order suggestions */ .pk__grid{display:grid;gap:1.1rem;margin-top:2.2rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .pk{border:1px solid var(--line);border-radius:var(--r-md);padding:1.5rem 1.4rem; background:var(--paper)} .pk__v{font-size:clamp(1.6rem,3.4vw,2.1rem);line-height:1;margin:.5rem 0 .2rem; letter-spacing:-.02em} .pk__v small{font-size:.62em;color:var(--ink-3);font-weight:600;letter-spacing:0} .pk__u{font-size:.82rem;color:var(--gold);font-weight:700;margin:0 0 .9rem} .pk p:last-child{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-2)} /* four steps */ .steps{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .steps li{display:flex;gap:.9rem;align-items:flex-start} .steps .num{display:block;font-weight:800;font-size:.82rem;color:var(--ink); opacity:.45;font-variant-numeric:tabular-nums;padding-top:.15rem} .steps b{display:block;margin-bottom:.3rem} .steps p{margin:0;font-size:.9rem;line-height:1.6;opacity:.85} /* a heavier tick list, for the one section that carries the argument */ .ticks--lg li{font-size:1.02rem;line-height:1.6} /* ---------- the application form ---------- */ .tf{margin-top:2.4rem} .tf__grid{display:grid;gap:1.1rem 1.2rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .tf__f{margin:0;display:flex;flex-direction:column;gap:.4rem} .tf__f--wide{margin-top:1.1rem} .tf__f label{font-size:.84rem;font-weight:700;color:var(--ink)} .tf__f label i{color:var(--gold);font-style:normal;margin-left:.25rem} .tf__f small{font-size:.76rem;color:var(--ink-3)} .tf input,.tf select,.tf textarea{ font:inherit;font-size:.95rem;color:var(--ink);background:var(--paper); border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;width:100%; -webkit-appearance:none;appearance:none} .tf textarea{resize:vertical;min-height:110px} .tf select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2315202b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .85rem center; background-size:12px;padding-right:2.2rem} .tf input:focus,.tf select:focus,.tf textarea:focus{ outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--gold-bright)} /* Honeypot: out of sight, out of the tab order, and hidden from the a11y tree by aria-hidden on the wrapper. display:none would let some bots skip it. */ .tf__pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .tf__foot{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin-top:1.8rem} .tf__legal{margin:0;font-size:.78rem;color:var(--ink-3);max-width:44ch;line-height:1.55} .tf__legal a{color:var(--ink-2)} .tf__msg{margin:1.1rem 0 0;font-size:.9rem;font-weight:600} .tf__msg.is-bad{color:#a3241b} .tf__done{border-left:3px solid var(--gold-bright);background:var(--paper-2); padding:1.6rem 1.6rem;border-radius:0 12px 12px 0} .tf__done h3{margin:0 0 .5rem;font-size:1.25rem} .tf__done p{margin:0;color:var(--ink-2);line-height:1.65;max-width:52ch} /* Under 620px the four-column trade sheet needs 479px and scrolls sideways, which hides "Your margin" behind the right edge. That is the one number a buyer opened the page for, so below that width each row becomes a card and nothing scrolls at all. */ @media (max-width:620px){ .tbl__scroll{overflow-x:visible;border:0;border-radius:0} .tbl{min-width:0;display:block} .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .tbl tbody,.tbl tr{display:block} .tbl tr{border:1px solid var(--line);border-radius:var(--r-md); padding:.4rem .2rem;margin-bottom:.7rem;background:var(--paper)} .tbl tbody tr+tr td{border-top:0} .tbl td{display:flex;justify-content:space-between;align-items:baseline;gap:1rem; text-align:right;padding:.45rem .9rem;white-space:normal} .tbl td::before{content:attr(data-l);font-size:.78rem;font-weight:700; color:var(--ink-3);text-align:left;flex:none} .tbl td:first-child{font-weight:800;color:var(--ink);font-size:1.02rem; padding-top:.7rem;padding-bottom:.55rem} .tbl td:first-child::before{content:none} } /* ============================ v41 ============================ The trade facts grid dropped from four items to three when the lead time came off the page. auto-fit then left a dead cell showing the 1px gap colour as a grey block. There are exactly three facts, so the count is pinned rather than inferred: three abreast, stacked on a phone. */ .facts{grid-template-columns:repeat(3,1fr)} @media (max-width:640px){ .facts{grid-template-columns:1fr} } /* ============================ v42 ============================ Reps page. Same register as /trade/ — it is a commercial proposition being assessed, not a brand being admired — so it reuses .facts, .tbl and the form wholesale. Two things it needs that trade did not: a rules grid, and a two-column "we give / you bring" split. */ .rl__grid{display:grid;gap:1.1rem;margin-top:2.2rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} .rl{border-left:3px solid var(--gold-bright);background:var(--paper-2); padding:1.1rem 1.3rem;border-radius:0 12px 12px 0} .rl b{display:block;margin-bottom:.4rem} .rl p{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-2)} .two{display:grid;gap:2.4rem;margin-top:2rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .two h3{font-size:1.1rem;margin:0 0 1rem} /* ============================ v43 ============================ Trade brochure download. Sits beside the apply button as a peer, not a footnote: a buyer who is not ready to fill in a form still wants something to take to whoever signs off the order. */ .cta2{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;margin-top:2rem} .dl{display:inline-flex;align-items:center;gap:.8rem;text-decoration:none; color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md); padding:.85rem 1.2rem;background:var(--paper);transition:border-color .15s,background .15s} .dl:hover{border-color:var(--ink);background:var(--paper-2)} .dl svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none} .dl b{display:block;font-size:.92rem;line-height:1.25} .dl small{display:block;font-size:.76rem;color:var(--ink-3);margin-top:.15rem} /* ============================ v44 ============================ Stockist agreement. It reuses the policy-page layout, because the thing someone is signing should look like the thing they were shown, and the trade-form controls, because it is a form. What it adds is the terms strip, the acceptance box, and print rules: a signatory is entitled to a paper copy that carries what they typed. */ .ag .legal__s{max-width:none} .ag .legal__s p,.ag .legal__s ul{max-width:68ch} .ag__terms{list-style:none;display:grid;gap:1px;margin:1.4rem 0 0;padding:0; background:var(--line);border:1px solid var(--line);border-radius:var(--r-md); overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .ag__terms li{background:var(--paper);padding:1rem 1.1rem} .ag__terms b{display:block;font-size:1.35rem;line-height:1.1;letter-spacing:-.02em} .ag__terms span{display:block;font-size:.78rem;color:var(--ink-3);margin-top:.3rem} .ag__accept{display:flex;gap:.8rem;align-items:flex-start;cursor:pointer; border:1px solid var(--line);border-left:3px solid var(--gold-bright); background:var(--paper-2);padding:1.1rem 1.2rem;border-radius:0 12px 12px 0} .ag__accept input{width:20px;height:20px;flex:none;margin-top:.1rem;accent-color:var(--ink)} .ag__accept span{font-size:.95rem;line-height:1.55;color:var(--ink)} @media print{ .announce,.hdr,.ftr,.drawer,.mnav,.prog,.tf__foot,.tf__msg{display:none!important} .ag .legal__toc{display:none} /* Inputs render as boxes with no visible value in most print engines unless the border is kept and the background dropped. Keep both, so a printed copy shows what was typed rather than a row of empty rectangles. */ .tf input,.tf select,.tf textarea{border:0;border-bottom:1px solid #999; border-radius:0;background:transparent;padding:.2rem 0} .ag__accept{break-inside:avoid} .legal__s{break-inside:avoid;page-break-inside:avoid} a[href^="/"]::after{content:" (anubys.co.uk" attr(href) ")";font-size:.8em;color:#666} } .ag__acts{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.2rem 0 0!important} .ag__acts .btn{text-decoration:none} /* ---- opening order table on the agreement ---- */ .ord tfoot td{border-bottom:0;padding-top:.6rem;color:var(--ink-2)} .ord tfoot tr:first-child td{border-top:1.5px solid var(--ink);padding-top:.9rem} .ord__tot td{font-weight:800;color:var(--ink);font-size:1.05rem} .ord__q{width:72px;text-align:right;font:inherit;font-size:.95rem;padding:.45rem .55rem; border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)} .ord__q:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--gold-bright)} .ord tbody tr.is-on td{background:color-mix(in srgb,var(--gold-bright) 9%,transparent)} .ord__msg{margin:.9rem 0 0;font-size:.9rem;font-weight:600;color:var(--ink-3)} .ord__msg.is-bad{color:#a3241b} .ord__msg.is-ok{color:#1f6b3a} @media (max-width:620px){ .ord tfoot tr{display:block;border:1px solid var(--line);border-radius:var(--r-md); margin-bottom:.5rem;background:var(--paper)} .ord tfoot td[colspan]{display:none} }