/* Theme Name: COCOON Theme URI: https://shopcocoon.com Author: COCOON Author URI: https://shopcocoon.com Description: Editorial luxe theme for COCOON — rechargeable electric hot water bottles. WooCommerce-ready, built for shopcocoon.com. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: cocoon WC requires at least: 6.0 */ /* ============================================================ COCOON — editorial luxury design system (bespoke, no framework) Display: Cormorant Garamond · UI/body: Jost ============================================================ */ :root{ /* white + pink, luxe — pink-led, with a deep dusty-rose for contrast sections */ --paper:#FDF4F1; --paper-2:#F9E6E1; --blush:#F6D8D1; --blush-2:#EFC2B9; --rose:#D9837A; --rose-deep:#C2655A; --deep:#4A2E34; --ink:#3A2A2E; --ink-2:#705B58; --ink-3:#A18E8A; --slate:#7C766E; --brass:#B79A6A; --line:rgba(58,42,46,.16); --line-2:rgba(58,42,46,.07); --serif:'Bodoni Moda',Didot,'Times New Roman',serif; --sans:'Jost',system-ui,-apple-system,sans-serif; --ease:cubic-bezier(.22,1,.36,1); --pad:clamp(20px,5vw,80px); --max:1380px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-weight:300;font-size:17px;line-height:1.65;overflow-x:hidden} img{display:block;max-width:100%;background:var(--blush);object-fit:cover} a{color:inherit;text-decoration:none} ::selection{background:var(--rose);color:var(--paper)} /* type */ .serif{font-family:var(--serif)} h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.01em} .display{font-family:var(--serif);font-weight:400;font-size:clamp(3.2rem,9vw,8.5rem);line-height:.95;letter-spacing:-.02em} .display em{font-style:italic;color:var(--rose)} .h2{font-size:clamp(2.4rem,5.5vw,5rem);line-height:.98} .kicker{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--rose)} .idx{font-family:var(--sans);font-size:12px;letter-spacing:.3em;color:var(--ink-3)} .lead{font-size:clamp(18px,2vw,22px);color:var(--ink-2);font-weight:300;max-width:48ch} .muted{color:var(--ink-2)} .u-serif-it{font-family:var(--serif);font-style:italic} /* layout */ .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)} .rule{height:1px;background:var(--line);width:100%} .rule-brass{height:1px;background:linear-gradient(90deg,transparent,var(--brass),transparent)} section{position:relative} /* understated editorial CTA (NOT a candy button) */ .cta{display:inline-flex;align-items:center;gap:14px;font-family:var(--sans);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);padding:18px 0;border-bottom:1.5px solid var(--ink);transition:.4s var(--ease);cursor:pointer;background:none;border-top:none;border-left:none;border-right:none} .cta .arw{transition:transform .4s var(--ease)} .cta:hover{color:var(--rose);border-color:var(--rose)} .cta:hover .arw{transform:translateX(8px)} .cta-fill{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);padding:18px 34px;border-radius:100px;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;transition:.4s var(--ease);cursor:pointer;border:none} .cta-fill:hover{background:var(--rose)} .link-ul{position:relative;font-size:13px;letter-spacing:.18em;text-transform:uppercase} .link-ul::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:currentColor;transition:width .4s var(--ease)} .link-ul:hover::after{width:100%} /* ===== announcement ===== */ .announce{background:var(--ink);color:var(--paper);text-align:center;font-size:11px;letter-spacing:.34em;text-transform:uppercase;padding:11px;font-weight:300} .announce b{color:var(--blush-2);font-weight:400} /* ===== custom header ===== */ .hdr{position:fixed;top:0;left:0;right:0;z-index:50;transition:.5s var(--ease)} .hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px var(--pad);transition:.5s var(--ease)} .hdr.solid{background:rgba(245,236,228,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-2)} .hdr.solid .hdr-in{padding-block:16px} .brand{grid-column:2;font-family:var(--sans);font-weight:400;font-size:clamp(18px,1.8vw,24px);letter-spacing:.4em;padding-left:.4em;text-align:center;color:var(--ink);white-space:nowrap} .nav-l,.nav-r{display:flex;gap:28px;align-items:center} .nav-r{justify-content:flex-end} .nav-l a,.nav-r a{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:400;white-space:nowrap} .bag{display:inline-flex;align-items:center;gap:8px} .bag .dot{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--ink);border-radius:50%;font-size:10px;letter-spacing:0} .burger{display:none;background:none;border:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px} .burger span{width:26px;height:1.5px;background:var(--ink);transition:.3s} /* ===== hero ===== */ .hero{min-height:100svh;display:flex;align-items:flex-end;padding-bottom:6vh;padding-top:120px;position:relative;overflow:hidden} .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(135% 105% at 70% 12%,var(--blush) 0%,var(--paper-2) 46%,var(--paper) 82%);z-index:-2} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:end;width:100%} .hero-copy .kicker{display:block;margin-bottom:26px} .hero-copy .display{margin-bottom:30px} .hero-copy .lead{margin-bottom:40px} .hero-meta{display:flex;gap:40px;margin-top:54px;border-top:1px solid var(--line);padding-top:26px} .hero-meta div{flex:1} .hero-meta .n{font-family:var(--sans);font-weight:300;font-size:34px;color:var(--rose);line-height:1;letter-spacing:.01em} .hero-meta .t{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-top:8px} .hero-img{position:relative} .hero-img img{width:100%;aspect-ratio:1122/1402;border-radius:6px;box-shadow:0 50px 90px -40px rgba(51,37,42,.45)} .hero-img .tag{position:absolute;left:-26px;bottom:38px;background:var(--paper);padding:14px 22px;border-radius:100px;box-shadow:0 20px 40px -20px rgba(51,37,42,.4);font-size:11px;letter-spacing:.2em;text-transform:uppercase} .scrollcue{position:absolute;bottom:30px;left:var(--pad);display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)} .scrollcue i{width:40px;height:1px;background:var(--ink-2);position:relative;overflow:hidden} .scrollcue i::after{content:"";position:absolute;inset:0;background:var(--rose);animation:slide 2.4s var(--ease) infinite} @keyframes slide{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}} /* ===== hero slideshow (full-bleed, no text) ===== */ .hero-slideshow{position:relative;width:100%;aspect-ratio:3/2;max-height:92svh;overflow:hidden;background:var(--blush)} .hero-slideshow .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 1.4s var(--ease)} .hero-slideshow .slide.on{opacity:1} .slide-dots{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:10px;z-index:4} .slide-dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.65);box-shadow:0 1px 5px rgba(58,42,46,.22);cursor:pointer;transition:.3s;padding:0} .slide-dots button.on{background:var(--rose);width:28px;border-radius:6px} @media(max-width:680px){.hero-slideshow{aspect-ratio:3/2;max-height:none}} /* ===== marquee ===== */ .marquee{border-block:1px solid var(--line);background:var(--paper-2);overflow:hidden;padding:22px 0} .marquee-track{display:flex;gap:0;white-space:nowrap;width:max-content;animation:marq 38s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee span{font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);font-style:italic;color:var(--ink);padding:0 40px;display:inline-flex;align-items:center;gap:40px} .marquee span::after{content:"❋";font-style:normal;color:var(--rose);font-size:.7em} @keyframes marq{to{transform:translateX(-50%)}} /* ===== manifesto ===== */ .manifesto{padding:clamp(90px,13vw,180px) 0} .manifesto-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center} .manifesto-img{position:relative} .manifesto-img img{width:100%;aspect-ratio:1536/1024;border-radius:6px} .manifesto-img .cap{position:absolute;right:-20px;top:34px;writing-mode:vertical-rl;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)} .manifesto h2{font-size:clamp(2rem,4vw,3.7rem);margin:22px 0 28px} .manifesto h2 em{font-style:italic;color:var(--rose)} /* ===== trust / social proof ===== */ .trust{padding:clamp(90px,13vw,170px) 0;background:var(--paper)} .bignum{font-family:var(--serif);font-weight:500;font-size:clamp(5rem,17vw,14rem);line-height:.86;color:var(--rose);letter-spacing:-.02em;margin:20px 0 6px} .trust-head{font-size:clamp(2rem,4.6vw,3.7rem);margin-bottom:18px} .trust-sub{margin:0 auto 60px;max-width:46ch} .trust-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px);max-width:1040px;margin:0 auto 50px} .tstat{padding:clamp(26px,3vw,40px) 16px;border:1px solid var(--line);border-radius:16px;background:var(--paper);transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease);cursor:default} .tstat:hover{transform:translateY(-9px);border-color:var(--rose);background:var(--blush);box-shadow:0 26px 54px -30px rgba(58,42,46,.45)} .tn{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.2rem);color:var(--ink);line-height:1;margin-bottom:12px;transition:color .45s var(--ease)} .tstat:hover .tn{color:var(--rose-deep)} .tl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)} .trust-badges{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px} .trust-badges span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)} .trust-badges span:not(:last-child)::after{content:"·";margin-left:20px;color:var(--rose)} @media(max-width:760px){.trust-stats{grid-template-columns:repeat(2,1fr)}} /* ===== slim trust bar ===== */ .trustbar{padding:clamp(22px,3vw,34px) 0;background:linear-gradient(180deg,var(--blush) 0%,var(--paper-2) 100%);border-bottom:1px solid var(--line-2)} .trustbar-row{display:flex;justify-content:center;align-items:center;gap:clamp(10px,1.6vw,22px);flex-wrap:wrap} .tpill{display:flex;align-items:center;gap:14px;background:#fff;padding:14px 24px;border-radius:100px;box-shadow:0 14px 30px -18px rgba(58,42,46,.4);transition:transform .4s var(--ease),box-shadow .4s var(--ease)} .tpill:hover{transform:translateY(-6px);box-shadow:0 24px 44px -20px rgba(190,120,104,.55)} .tpill svg{width:26px;height:26px;color:var(--rose);flex:none;transition:transform .4s var(--ease)} .tpill:hover svg{transform:scale(1.12) rotate(-4deg)} .tpill b{font-family:var(--serif);font-weight:500;font-size:23px;color:var(--ink);display:block;line-height:1} .tpill span{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);display:block;margin-top:3px} /* ===== catalog ===== */ .catalog{padding:clamp(80px,11vw,150px) 0} .cat-head{margin-bottom:14px} .cat-head .h2{margin:16px 0 14px} .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,46px);margin-top:48px} .prod{display:block;color:inherit} .prod-no{font-family:var(--serif);font-size:14px;color:var(--rose);display:block;margin-bottom:14px} .prod-media{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:1122/1402;background:var(--blush)} .prod-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)} .prod:hover .prod-media img{transform:scale(1.055)} .prod-view{position:absolute;left:50%;bottom:22px;transform:translateX(-50%) translateY(12px);background:rgba(255,251,250,.94);backdrop-filter:blur(4px);color:var(--ink);padding:14px 28px;border-radius:100px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:.45s var(--ease);box-shadow:0 16px 34px -18px rgba(58,42,46,.5);white-space:nowrap} .prod:hover .prod-view{opacity:1;transform:translateX(-50%) translateY(0)} .prod-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)} .prod-foot h3{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1} .prod-sub{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);display:block;margin-top:6px} .prod-price{font-family:var(--serif);font-size:1.7rem;color:var(--rose-deep)} @media(max-width:820px){.cat-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}} /* ===== product detail page (PDP) ===== */ .pdp{padding:clamp(130px,15vw,190px) 0 clamp(70px,9vw,110px)} .pdp-back{display:inline-flex;gap:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:40px;transition:.3s} .pdp-back:hover{color:var(--rose)} .pdp-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,6vw,84px);align-items:start} .pdp-media img{width:100%;border-radius:16px;aspect-ratio:1122/1402;object-fit:cover} .pdp-info{position:sticky;top:120px} .pdp-info .idx{display:block;margin-bottom:16px} .pdp-title{font-family:var(--serif);font-size:clamp(2.6rem,5vw,4.2rem);line-height:.98;margin-bottom:18px} .pdp-price{font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.6rem);color:var(--ink);margin-bottom:8px} .pdp-price s{font-size:.6em;color:var(--ink-3);margin-left:12px} .pdp-afterpay{font-size:13px;color:var(--ink-2);margin-bottom:30px} .pdp-desc{font-size:16px;color:var(--ink-2);max-width:50ch;margin-bottom:34px} .pdp-colours{margin-bottom:32px} .pdp-colours .cl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);display:block;margin-bottom:14px} .pdp-colours .cl b{color:var(--ink)} .cl-swatches{display:flex;gap:14px} .cl-sw{width:42px;height:42px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);border:2px solid transparent;outline-offset:3px;transition:.3s var(--ease)} .cl-sw:hover{transform:scale(1.08)} .cl-sw.active{border-color:var(--ink)} .pdp-add{width:100%;justify-content:center;margin-bottom:34px} .pdp-feats{list-style:none;border-top:1px solid var(--line)} .pdp-feats li{padding:14px 0 14px 26px;border-bottom:1px solid var(--line-2);position:relative;font-size:15px;color:var(--ink-2)} .pdp-feats li::before{content:"✓";position:absolute;left:0;color:var(--rose);font-family:var(--serif)} /* coloured spec box (replaces tick list) */ .pdp-specs{background:var(--blush);border-radius:16px;padding:clamp(8px,1.5vw,16px) clamp(24px,3vw,36px);display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,44px);margin-top:6px;box-shadow:0 20px 44px -30px rgba(190,120,104,.6)} .spec{display:flex;justify-content:space-between;align-items:baseline;padding:15px 0;border-bottom:1px solid rgba(58,42,46,.12)} .spec:nth-last-child(-n+2){border-bottom:none} .sk{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)} .sv{font-family:var(--serif);font-size:1.1rem;color:var(--ink)} .pdp-guarantee{margin-top:22px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-align:center} @media(max-width:520px){.pdp-specs{grid-template-columns:1fr}.spec:nth-last-child(-n+2){border-bottom:1px solid rgba(58,42,46,.12)}.spec:last-child{border-bottom:none}} /* also-in / other colours */ .also{padding:clamp(60px,8vw,110px) 0} .also .h2{text-align:center;margin-bottom:48px} .also-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);max-width:780px;margin:0 auto} @media(max-width:820px){.pdp-grid{grid-template-columns:1fr;gap:36px}.pdp-info{position:static}.pdp-media{max-width:460px}} /* ===== ritual / steps ===== */ .ritual{padding:clamp(80px,11vw,150px) 0;background:var(--blush)} .ritual-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:60px} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)} .step{position:relative} .step .si{font-family:var(--serif);font-size:18px;color:var(--rose-deep);margin-bottom:20px;display:flex;align-items:center;gap:14px} .step .si::after{content:"";flex:1;height:1px;background:var(--line)} .step img{width:100%;aspect-ratio:4/5;border-radius:6px;margin-bottom:24px;transition:transform 1s var(--ease)} .step:hover img{transform:scale(1.03)} .step h3{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:10px} .step p{font-size:15px;color:var(--ink-2);max-width:32ch} /* ===== colour story (interactive) ===== */ .colours{padding:clamp(90px,13vw,170px) 0;overflow:hidden} .colours-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,90px);align-items:center} .swatch-stage{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:1536/1024;background:var(--blush)} .swatch-stage img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s var(--ease),transform 1.2s var(--ease);transform:scale(1.04)} .swatch-stage img.on{opacity:1;transform:scale(1)} .swatches{display:flex;flex-direction:column;gap:0} .sw{display:flex;align-items:center;gap:22px;padding:26px 0;border-top:1px solid var(--line);cursor:pointer;transition:.4s var(--ease)} .sw:last-child{border-bottom:1px solid var(--line)} .sw .dot{width:34px;height:34px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)} .sw .nm{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.6rem);transition:.4s var(--ease);color:var(--ink-3)} .sw .meta{margin-left:auto;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);opacity:0;transition:.4s} .sw.active .nm{color:var(--ink)} .sw.active .meta{opacity:1} .sw:hover .nm{color:var(--ink)} /* ===== full-bleed banner ===== */ .banner{position:relative;height:88svh;min-height:560px;display:grid;place-items:center;overflow:hidden} .banner img{position:absolute;inset:0;width:100%;height:100%;will-change:transform} .banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(51,37,42,.22),rgba(51,37,42,.42))} .banner .b-copy{position:relative;z-index:2;text-align:center;color:var(--paper);padding:0 24px} .banner .b-copy .kicker{color:#fff;display:block;margin-bottom:24px;text-shadow:0 1px 20px rgba(51,37,42,.4)} .banner .b-copy h2{font-size:clamp(2.4rem,6vw,6rem);text-shadow:0 2px 40px rgba(0,0,0,.25)} /* ===== features editorial list ===== */ .feat{padding:clamp(90px,13vw,170px) 0} .feat-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,7vw,100px);align-items:center} .feat-img img{width:100%;aspect-ratio:1122/1402;border-radius:6px} .feat-list{margin-top:30px} .frow{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:30px 0;border-top:1px solid var(--line);align-items:baseline} .frow:last-child{border-bottom:1px solid var(--line)} .frow .fi{font-family:var(--serif);font-size:15px;color:var(--rose)} .frow h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:6px} .frow p{font-size:15px;color:var(--ink-2);max-width:46ch} /* ===== pull-quote reviews ===== */ .quotes{padding:clamp(90px,13vw,170px) 0;background:var(--deep);color:var(--paper);text-align:center} .quotes .kicker{color:var(--blush-2)} .qmark{font-family:var(--serif);font-size:120px;line-height:.5;color:var(--rose);height:60px;display:block} .quote{font-family:var(--serif);font-style:italic;font-size:clamp(1.8rem,4vw,3.4rem);line-height:1.18;max-width:18ch;margin:0 auto 36px;font-weight:400} .quotes .who{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--blush-2)} .qdots{display:flex;gap:12px;justify-content:center;margin-top:54px} .qdots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(245,236,228,.3);cursor:pointer;transition:.3s;padding:0} .qdots button.on{background:var(--rose);width:26px;border-radius:6px} /* ===== then / now spread ===== */ .compare{padding:clamp(90px,13vw,170px) 0} .cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:54px} .cmp-col{padding:clamp(34px,4vw,60px)} .cmp-col:first-child{background:var(--paper-2)} .cmp-col h3{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:6px} .cmp-col .sub{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-bottom:30px} .cmp-col:last-child{background:var(--blush)} .cmp-col:last-child h3{color:var(--rose-deep)} .cmp-li{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line);font-size:15px} .cmp-li:first-of-type{border-top:none} .cmp-li .k{flex:none;width:34px;font-family:var(--serif);color:var(--rose)} /* ===== offer ===== */ .offer{padding:clamp(90px,13vw,170px) 0;background:var(--blush)} .offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,100px);align-items:center} .offer-img img{width:100%;aspect-ratio:1/1;border-radius:8px} .price{display:flex;align-items:baseline;gap:14px;margin:24px 0 8px} .price .now{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.4rem)} .price .was{font-family:var(--serif);font-size:1.5rem;color:var(--ink-3);text-decoration:line-through} .afterpay{font-size:13px;color:var(--ink-2);margin-bottom:30px} .olist{list-style:none;margin:30px 0} .olist li{display:flex;gap:14px;padding:11px 0;border-top:1px solid var(--line-2);font-size:15px;color:var(--ink-2)} .olist li .k{color:var(--rose);font-family:var(--serif)} /* ===== faq ===== */ .faq{padding:clamp(80px,11vw,150px) 0} .faq-list{max-width:880px;margin:50px auto 0} .fitem{border-top:1px solid var(--line)} .fitem:last-child{border-bottom:1px solid var(--line)} .fq{width:100%;background:none;border:none;text-align:left;font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,2rem);color:var(--ink);padding:30px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px} .fq .pm{font-family:var(--sans);font-weight:200;font-size:30px;color:var(--rose);transition:.4s var(--ease);flex:none} .fa{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)} .fa p{padding-bottom:30px;color:var(--ink-2);max-width:60ch} .fitem.open .pm{transform:rotate(45deg)} /* ===== footer ===== */ footer{background:var(--deep);color:var(--paper);padding:clamp(70px,9vw,120px) 0 40px} .foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px;border-bottom:1px solid rgba(245,236,228,.14)} .foot-brand{font-family:var(--sans);font-weight:200;font-size:clamp(40px,7vw,84px);letter-spacing:.36em;padding-left:.36em;line-height:1;color:var(--paper)} .foot-brand+p{color:var(--blush-2);max-width:30ch;margin-top:24px;font-size:14px} .foot h4{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--blush-2);margin-bottom:20px;font-weight:400} .foot a{display:block;padding:7px 0;font-size:14px;color:var(--paper);opacity:.78} .foot a:hover{opacity:1;color:var(--rose)} .foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:30px;font-size:12px;letter-spacing:.1em;color:var(--blush-2)} /* ===== reveal on scroll (fail-visible: content shows even without JS) ===== */ @keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}} .rv{opacity:1} html.js .rv:not(.in){opacity:0;transform:translateY(34px)} .rv.in{animation:rise 1.05s var(--ease) both} .rv-2.in{animation-delay:.12s}.rv-3.in{animation-delay:.24s} /* ===== responsive ===== */ @media(max-width:1000px){ .hero-grid,.manifesto-grid,.colours-grid,.feat-grid,.offer-grid{grid-template-columns:1fr;gap:48px} .hero{min-height:auto;padding-top:130px;padding-bottom:60px} .hero-img{max-width:460px} .steps{grid-template-columns:1fr} .cmp-grid,.foot-top{grid-template-columns:1fr} .cmp-col:last-child{border-top:1px solid var(--line)} .manifesto-img .cap{display:none} } @media(max-width:680px){ .announce{font-size:8.5px;letter-spacing:.08em;padding:10px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nav-l,.nav-r a:not(.bag){display:none} .burger{display:flex} .hdr-in{grid-template-columns:auto 1fr auto} .brand{grid-column:auto;text-align:left;justify-self:start;margin-left:14px} .nav-r{grid-column:3} .hero-meta{flex-wrap:wrap;gap:24px} .hero-meta div{flex:1 1 40%} .marquee span{font-size:18px} .foot-bot{flex-direction:column} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} .rv{opacity:1;transform:none} } /* ===== focus visibility (a11y) ===== */ a:focus-visible,button:focus-visible,.cl-sw:focus-visible,.pdp-thumb:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:3px} /* ===== cart drawer ===== */ .cart-overlay{position:fixed;inset:0;background:rgba(42,37,33,.5);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.4s var(--ease);z-index:90} .cart-overlay.on{opacity:1;visibility:visible} .cart-drawer{position:fixed;top:0;right:0;height:100%;width:min(430px,92vw);background:var(--paper);box-shadow:-30px 0 90px -40px rgba(42,37,33,.55);transform:translateX(101%);transition:transform .5s var(--ease);z-index:91;display:flex;flex-direction:column} .cart-drawer.on{transform:none} .cart-head{display:flex;justify-content:space-between;align-items:center;padding:26px 28px;border-bottom:1px solid var(--line)} .cart-head span{font-family:var(--serif);font-size:1.6rem} .cart-x{background:none;border:none;font-size:30px;line-height:1;color:var(--ink);cursor:pointer;padding:0 4px} .cart-body{flex:1;overflow-y:auto;padding:6px 28px} .cart-empty{text-align:center;padding:70px 0;font-family:var(--serif);font-size:1.5rem;color:var(--ink-2);line-height:1.5} .cart-empty span{font-size:.7rem;font-family:var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)} .cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:16px;padding:22px 0;border-bottom:1px solid var(--line-2)} .cart-item img{width:64px;height:80px;border-radius:8px;object-fit:cover} .ci-name{font-family:var(--serif);font-size:1.1rem} .ci-colour{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:3px 0 13px} .ci-qty{display:inline-flex;align-items:center;gap:15px;border:1px solid var(--line);border-radius:100px;padding:5px 13px} .ci-qty button{background:none;border:none;font-size:16px;color:var(--ink);cursor:pointer;line-height:1;padding:0} .ci-qty span{font-size:14px;min-width:12px;text-align:center} .ci-right{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end} .ci-price{font-family:var(--serif);font-size:1.15rem} .ci-rm{background:none;border:none;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);cursor:pointer;text-decoration:underline;text-underline-offset:3px} .ci-rm:hover{color:var(--rose-deep)} .cart-foot{padding:22px 28px 28px;border-top:1px solid var(--line)} .cart-sub{display:flex;justify-content:space-between;font-family:var(--serif);font-size:1.35rem;margin-bottom:6px} .cart-note{font-size:11px;letter-spacing:.05em;color:var(--ink-2);margin-bottom:18px} .cart-checkout{width:100%;justify-content:center} .bag .dot{transition:.3s var(--ease)} .bag .dot.has{background:var(--rose);color:#fff;border-color:var(--rose)} .cart-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);padding:15px 26px;border-radius:100px;font-size:13px;letter-spacing:.03em;box-shadow:0 20px 44px -18px rgba(42,37,33,.6);opacity:0;visibility:hidden;transition:.45s var(--ease);z-index:95;max-width:90vw;text-align:center} .cart-toast.on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} /* ===== PDP gallery / payment / sticky ===== */ .pdp-main{width:100%;border-radius:16px;aspect-ratio:1122/1402;object-fit:cover;display:block} .pdp-thumbs{display:flex;gap:12px;margin-top:14px} .pdp-thumb{width:72px;height:90px;border-radius:10px;overflow:hidden;border:2px solid transparent;cursor:pointer;padding:0;background:var(--blush);transition:border-color .3s var(--ease)} .pdp-thumb img{width:100%;height:100%;object-fit:cover;border-radius:0;aspect-ratio:auto;display:block} .pdp-thumb.active{border-color:var(--ink)} .pdp-thumb:hover{border-color:var(--rose)} .pay-line{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:18px 0 10px;display:flex;align-items:center;gap:9px} .pay-line svg{width:15px;height:15px;color:var(--sage)} .pay-icons{display:flex;flex-wrap:wrap;gap:8px} .pay-icons span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line);border-radius:7px;padding:7px 11px;background:#fff} .pdp-sticky{display:none} @media(max-width:820px){ .pdp-sticky{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:80;background:rgba(253,244,241,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:13px 18px;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 -16px 34px -22px rgba(42,37,33,.45)} .pdp-sticky .ps-name{font-family:var(--serif);font-size:1.05rem;line-height:1.1} .pdp-sticky .ps-name small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} .pdp-sticky .cta-fill{padding:14px 22px;font-size:11px;white-space:nowrap} .pdp{padding-bottom:96px} } /* ============================================================ WooCommerce — on-brand styling (shop / product / cart / checkout) ============================================================ */ .woo-wrap{padding:clamp(130px,15vw,185px) 0 clamp(70px,9vw,110px);min-height:64vh} .woocommerce .woocommerce-breadcrumb{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:30px} .woocommerce .price,.woocommerce-Price-amount{font-family:var(--serif);color:var(--ink)} .woocommerce div.product .product_title,.woocommerce h1,.woocommerce h2{font-family:var(--serif)} .woocommerce div.product .product_title{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.02} .woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--ink);font-size:1.7rem} .woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--serif);font-size:1.3rem} .woocommerce ul.products li.product a img{border-radius:14px} .woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce .single_add_to_cart_button,.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{background:var(--ink)!important;color:var(--paper)!important;border-radius:100px!important;padding:16px 32px!important;font-family:var(--sans)!important;font-size:12px!important;letter-spacing:.18em!important;text-transform:uppercase!important;font-weight:400!important;line-height:1.1!important;transition:background .4s var(--ease)!important;border:none!important} .woocommerce #respond input#submit:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .single_add_to_cart_button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--rose-deep)!important} .woocommerce span.onsale{background:var(--rose)!important;color:#fff!important;border-radius:100px!important;font-family:var(--sans)!important;min-height:auto;line-height:1;padding:8px 14px} .woocommerce .quantity .qty{border:1px solid var(--line);border-radius:8px;padding:10px;font-family:var(--sans)} .woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--rose)!important;background:var(--paper-2);font-family:var(--sans)} .woocommerce-message::before,.woocommerce-info::before{color:var(--rose)!important} .woocommerce table.cart img,.woocommerce #content table.cart img{border-radius:8px} .woocommerce .cart-collaterals .cart_totals>h2,.woocommerce-checkout h3{font-family:var(--serif)} .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.select2-container--default .select2-selection--single{border:1px solid var(--line)!important;border-radius:8px!important;padding:12px!important} .woocommerce-checkout #payment{background:var(--paper-2);border-radius:14px} .woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)} .woocommerce ul.products::before,.woocommerce ul.products::after{display:none} .woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;text-align:left} @media(max-width:820px){.woocommerce ul.products{grid-template-columns:1fr 1fr}} @media(max-width:520px){.woocommerce ul.products{grid-template-columns:1fr}} /* ============================================================ Content pages (Our Story / Shipping / Guarantee) ============================================================ */ .pagehead{padding:clamp(130px,15vw,195px) 0 clamp(28px,4vw,46px)} .pagehead .idx{display:block;margin-bottom:20px} .pagehead-title{font-family:var(--serif);font-size:clamp(2.6rem,6vw,5rem);line-height:1.0;letter-spacing:-.01em} .page-sub{font-size:clamp(1rem,1.6vw,1.2rem);color:var(--ink-2);max-width:50ch;margin-top:24px} /* story */ .story-intro{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,6vw,84px);align-items:center;padding:clamp(40px,6vw,80px) 0 clamp(60px,8vw,110px)} .story-img img{width:100%;border-radius:18px;aspect-ratio:4/5;object-fit:cover} .story-copy p{margin-bottom:20px;color:var(--ink-2);font-size:16px} .story-copy p.lead{color:var(--ink);font-size:clamp(1.15rem,1.8vw,1.4rem);font-family:var(--sans);font-weight:300} .story-copy p:last-child{margin-bottom:0} .story-quote-sec{background:var(--blush);padding:clamp(72px,11vw,140px) 24px;text-align:center} .story-quote{font-family:var(--serif);font-style:italic;font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.28;max-width:18ch;margin:0 auto;color:var(--ink)} .story-quote-by{margin-top:26px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--rose-deep)} .story-values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,54px);padding:clamp(72px,10vw,130px) 0} .sv-item .num{font-family:var(--serif);color:var(--rose);font-size:1.15rem;display:block;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line)} .sv-item h3{font-family:var(--serif);font-size:1.55rem;margin-bottom:10px} .sv-item p{color:var(--ink-2);font-size:15px;max-width:30ch} .story-sign{text-align:center;max-width:620px;margin:0 auto;padding-bottom:clamp(80px,11vw,150px)} .story-sign p{font-size:clamp(1.1rem,1.7vw,1.35rem);color:var(--ink-2);line-height:1.6} .story-sign .sign{font-family:var(--serif);font-style:italic;font-size:1.4rem;margin-top:26px;color:var(--rose-deep)} /* shared promise bar */ .promise-bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 30px;background:var(--blush);border-radius:18px;padding:24px 32px;margin-bottom:clamp(40px,6vw,70px);box-shadow:0 24px 50px -34px rgba(190,120,104,.6)} .promise-bar span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)} .promise-bar span:not(:last-child)::after{content:"·";margin-left:30px;color:var(--rose)} /* policy cards */ .policy-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);padding-bottom:clamp(50px,7vw,90px)} .policy-card{background:var(--paper-2);border-radius:18px;padding:clamp(28px,4vw,46px)} .policy-card .pc-ic{width:30px;height:30px;color:var(--rose);margin-bottom:18px} .policy-card h3{font-family:var(--serif);font-size:1.7rem;margin-bottom:18px} .policy-card ul{list-style:none} .policy-card li{padding:13px 0;border-bottom:1px solid var(--line-2);color:var(--ink-2);font-size:15px;line-height:1.5} .policy-card li:last-child{border-bottom:none} .policy-card li b{color:var(--ink)} .policy-note{text-align:center;color:var(--ink-3);font-size:13px;padding-bottom:clamp(70px,9vw,120px)} .policy-note a{color:var(--rose-deep);text-decoration:underline;text-underline-offset:3px} /* guarantee */ .guarantee-seal{width:clamp(170px,22vw,220px);height:clamp(170px,22vw,220px);border-radius:50%;border:1.5px solid var(--rose);display:flex;flex-direction:column;align-items:center;justify-content:center;margin:10px auto clamp(40px,6vw,60px);text-align:center;background:radial-gradient(circle at 50% 30%,var(--blush),var(--paper))} .guarantee-seal .gs-num{font-family:var(--serif);font-size:clamp(3.4rem,7vw,4.6rem);line-height:.85;color:var(--rose-deep)} .guarantee-seal .gs-lbl{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2);margin-top:10px} .guarantee-lead{text-align:center;max-width:620px;margin:0 auto clamp(60px,8vw,100px);font-size:clamp(1.1rem,1.8vw,1.4rem);color:var(--ink-2);line-height:1.6} .gsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);padding-bottom:clamp(60px,8vw,100px)} .gstep .gnum{font-family:var(--serif);font-size:1.2rem;color:var(--rose);margin-bottom:18px;display:flex;align-items:center;gap:14px} .gstep .gnum::after{content:"";flex:1;height:1px;background:var(--line)} .gstep h3{font-family:var(--serif);font-size:1.4rem;margin-bottom:10px} .gstep p{color:var(--ink-2);font-size:15px} .guarantee-fine{background:var(--sage-pale,#EAE2D6);background:var(--paper-2);border-radius:18px;padding:clamp(28px,4vw,44px);text-align:center;max-width:780px;margin:0 auto clamp(80px,11vw,140px)} .guarantee-fine h3{font-family:var(--serif);font-size:1.5rem;margin-bottom:12px} .guarantee-fine p{color:var(--ink-2);font-size:15px;max-width:56ch;margin:0 auto} @media(max-width:820px){ .story-intro{grid-template-columns:1fr;gap:32px} .story-values{grid-template-columns:1fr;gap:36px} .policy-grid{grid-template-columns:1fr} .gsteps{grid-template-columns:1fr;gap:34px} } /* ========================================================================== COCOON — PRICE COMPONENT (treatment D) $59 in display serif · former price in a soft grey hairline · save chip. Replaces WooCommerce's red and its default green (#77a464). ========================================================================== */ .woocommerce .price, .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce-cart-form__cart-item .product-price, .woocommerce-cart-form__cart-item .product-subtotal { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 10px; color: #1A1A1A; /* kill Woo's green */ } /* current price — the one that carries the weight */ .woocommerce .price ins, .woocommerce div.product p.price ins, .woocommerce ul.products li.product .price ins { font-family: var(--serif); font-size: 32px; line-height: 1; font-weight: 400; color: #1A1A1A; text-decoration: none; background: none; /* Woo/WP sets a highlight on */ } /* a product with no sale price still needs the same treatment */ .woocommerce .price > .amount, .woocommerce div.product p.price > .amount { font-family: var(--serif); font-size: 32px; line-height: 1; color: #1A1A1A; } /* former price — grey, 1px hairline, never red */ .woocommerce .price del, .woocommerce div.product p.price del, .woocommerce ul.products li.product .price del { font-family: "Jost", Futura, "Century Gothic", sans-serif; font-size: 13px; line-height: 1; color: #6F6560; opacity: 1; /* Woo dims to .5 — undo it */ text-decoration: line-through; text-decoration-color: rgba(111, 101, 96, 0.45); text-decoration-thickness: 1px; } .woocommerce .price del .amount, .woocommerce .price ins .amount { color: inherit; font-size: inherit; } /* the save chip (printed by the PHP below) */ .cc-save { font-family: "Jost", Futura, "Century Gothic", sans-serif; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #9A4B37; border: 1px solid rgba(154, 75, 55, 0.4); border-radius: 99px; padding: 4px 9px; line-height: 1; white-space: nowrap; align-self: center; } /* smaller in the shop grid */ .woocommerce ul.products li.product .price ins, .woocommerce ul.products li.product .price > .amount { font-size: 19px; } .woocommerce ul.products li.product .price del { font-size: 11px; } .woocommerce ul.products li.product .cc-save { font-size: 9px; padding: 3px 7px; } /* smaller again in the cart */ .woocommerce-cart-form__cart-item .price ins, .woocommerce-cart-form__cart-item .price > .amount { font-size: 17px; } .woocommerce-cart-form__cart-item .cc-save { display: none; } /* cart shows its own saving */ /* variable products print a range — keep it calm */ .woocommerce div.product p.price .woocommerce-Price-currencySymbol { font-size: 0.62em; vertical-align: 0.32em; } @media (max-width: 520px) { .woocommerce div.product p.price ins, .woocommerce div.product p.price > .amount { font-size: 30px; } } /* ========================================================================== COCOON — MOBILE HOME REDESIGN (approved prototype: mobile-home-proposed) 1. Hero — full-bleed photo, gradient scrim, REAL HTML

2. Trust — blush band, Didot numerals, hairline dividers 3. Hygiene — 16px body copy, 44px tap targets, two-up grid at <=520px Appended after the PRICE COMPONENT block — do not reorder. ========================================================================== */ /* ---------- 1. HERO ------------------------------------------------------ */ .hero-slideshow.hero-v2{ position:relative; height:520px; aspect-ratio:auto; max-height:none; overflow:hidden; background:var(--blush); } .hero-v2 .hero-v2-media{position:absolute;inset:0;overflow:hidden;z-index:1} /* The three source photos carry a baked-in COCOON wordmark and icon captions in their LEFT ~43%. Doubling the image box and shifting it one frame left shows only the RIGHT half of the source at every viewport width, so the baked-in text never enters the frame. (A clean, text-free hero photo is still the proper fix — see notes.) */ .hero-v2 .hero-v2-media .slide{ position:absolute; top:0; left:-100%; width:200%; max-width:none; /* beats the global img{max-width:100%} */ height:100%; object-fit:cover; object-position:center center; opacity:0; transition:opacity 1.4s var(--ease); } .hero-v2 .hero-v2-media .slide.on{opacity:1} .hero-v2 .hero-v2-scrim{ position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(to bottom, rgba(58,42,46,0) 20%, rgba(58,42,46,.34) 36%, rgba(58,42,46,.74) 48%, rgba(58,42,46,.88) 74%, rgba(58,42,46,.95) 100%); } .hero-v2 .hero-v2-copy{ position:absolute;left:0;right:0;bottom:0;z-index:3; padding:0 22px 26px; color:#FFF8F5; text-shadow:0 1px 14px rgba(40,26,30,.5); } .hero-v2 .hero-v2-kick{ font-family:var(--sans);font-weight:400; font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:#F7DED4;margin:0 0 11px; } .hero-v2 .hero-v2-h1{ font-family:var(--serif); font-size:38px;line-height:1.08;font-weight:400;letter-spacing:0; color:#FFF8F5;margin:0 0 12px; } .hero-v2 .hero-v2-lede{ font-family:var(--sans);font-weight:300; font-size:16px;line-height:1.5;color:#F2E2DB; margin:0 0 20px;max-width:19em; } .hero-v2 .hero-v2-cta{ display:flex;align-items:center;justify-content:center; height:54px;min-height:54px;border-radius:99px; background:#9A4B37;color:#fff;text-decoration:none; font-family:var(--sans);font-weight:400; font-size:13px;letter-spacing:.16em;text-transform:uppercase; border:none;transition:background .4s var(--ease); } .hero-v2 .hero-v2-cta:hover, .hero-v2 .hero-v2-cta:focus{background:var(--rose-deep);color:#fff} /* dots: 44x44 targets, moved clear of the headline block */ .hero-v2 .slide-dots{ top:clamp(116px,15vh,168px);bottom:auto; left:auto;right:10px;transform:none; gap:0;z-index:4; } .hero-v2 .slide-dots button, .hero-v2 .slide-dots button.on{ width:44px;height:44px;min-width:44px;min-height:44px; padding:0;border:none;border-radius:0; background:transparent;box-shadow:none; display:flex;align-items:center;justify-content:center;cursor:pointer; } .hero-v2 .slide-dots button::after{ content:"";display:block;width:9px;height:9px;border-radius:50%; background:rgba(255,255,255,.7);box-shadow:0 1px 6px rgba(58,42,46,.4); transition:.3s var(--ease); } .hero-v2 .slide-dots button.on::after{ background:#C97B6A;width:28px;border-radius:6px; } @media(min-width:681px){ .hero-slideshow.hero-v2{height:620px} .hero-v2 .hero-v2-copy{padding:0 var(--pad) 54px} .hero-v2 .hero-v2-h1{font-size:clamp(46px,5.2vw,74px)} .hero-v2 .hero-v2-lede{font-size:18px;max-width:26em} .hero-v2 .hero-v2-cta{display:inline-flex;height:58px;padding:0 42px} .hero-v2 .slide-dots{right:calc(var(--pad) - 12px)} } @media(min-width:1100px){ .hero-slideshow.hero-v2{height:720px} } /* ---------- 2. TRUST STRIP ----------------------------------------------- */ .trust-v2{ position:relative; display:grid;grid-template-columns:repeat(4,1fr); background:#F3E4DE; padding:20px 6px 19px; border-bottom:1px solid var(--line-2); } .trust-v2::before{ content:"";position:absolute;top:0;left:22px;right:22px;height:1px; background:rgba(154,75,55,.28); } .trust-v2-c{text-align:center;position:relative;padding:0 3px} .trust-v2-c + .trust-v2-c::before{ content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px; background:rgba(154,75,55,.22); } .trust-v2-n{ font-family:var(--serif);font-weight:400; font-size:29px;line-height:1;letter-spacing:.01em; color:#9A4B37; } .trust-v2-n small{font-size:15px;letter-spacing:.06em} .trust-v2-l{ font-family:var(--serif);font-style:italic; font-size:13px;line-height:1.28;color:#6F6560;margin-top:7px; } @media(min-width:681px){ .trust-v2{padding:34px var(--pad) 32px} .trust-v2::before{left:var(--pad);right:var(--pad)} .trust-v2-n{font-size:38px} .trust-v2-n small{font-size:19px} .trust-v2-l{font-size:15px} } /* ---------- 3. MOBILE HYGIENE -------------------------------------------- */ @media(max-width:680px){ /* 16px floor on genuine body copy (uppercase micro-labels keep the prototype's 10-13px eyebrow scale by design) */ .step p, .frow p, .cmp-li, .fa p, .pdp-feats li, .olist li, .sv-item p, .policy-card li, .gstep p, .guarantee-fine p, .foot-brand + p, .foot a{font-size:16px;line-height:1.6} .lead{font-size:17px;line-height:1.6} /* announcement bar was 8.5px — prototype sets 11px and lets it wrap */ .announce{ font-size:11px;letter-spacing:.1em;line-height:1.45; padding:10px 14px; white-space:normal;overflow:visible;text-overflow:clip; } /* 44px tap targets */ .foot a{padding:12px 0} .brand{min-height:44px;display:flex;align-items:center} .burger{ min-width:44px;min-height:44px;padding:9px; align-items:center;justify-content:center; } .nav-r .bag{min-height:44px;display:inline-flex;align-items:center;padding:0 6px} .fq{min-height:44px} } /* two-up collection + shop grid on phones */ @media(max-width:520px){ .cat-grid{ grid-template-columns:1fr 1fr; gap:14px; max-width:none;margin-inline:0;margin-top:28px; } .prod-no{margin-bottom:8px;font-size:12px} .prod-foot{ flex-direction:column;align-items:flex-start;gap:2px; margin-top:14px;padding-top:12px; } .prod-foot h3{font-size:1.15rem;line-height:1.15} .prod-sub{font-size:10px;margin-top:4px;letter-spacing:.14em} .prod-price{font-size:1.15rem} .woocommerce ul.products{grid-template-columns:1fr 1fr;gap:14px} .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:1.05rem;line-height:1.2; } /* Woo gives the onsale badge a negative right margin; in a two-up grid the right-hand column pushed it 7px past the viewport. Tuck it inside. */ .woocommerce ul.products li.product .onsale{ margin:0;top:8px;right:8px;left:auto; font-size:11px;padding:6px 10px;min-width:0; } } /* --- hygiene addendum: measured in a 390x844 frame --- */ @media(max-width:680px){ .foot-bot{font-size:16px;letter-spacing:.04em;line-height:1.6} .quotes .who a{display:inline-flex;align-items:center;min-height:44px;padding:6px 0} /* Woo sort dropdown was a 19px target; 16px also stops iOS focus-zoom */ .woocommerce .woocommerce-ordering select, .woocommerce-ordering select{min-height:44px;font-size:16px;padding:0 12px;max-width:100%} } /* ========================================================================== COCOON — THE PAIR: honest comparison line $118 is 2 x $59 (bundle arithmetic), never a former selling price, so the /"was" treatment is replaced by a plain "bought separately" comparison. .cc-now deliberately inherits font-family from .woocommerce-Price-amount so the bundle's price matches the singles' exactly. ========================================================================== */ .woocommerce .price .cc-now, .woocommerce div.product p.price .cc-now, .woocommerce ul.products li.product .price .cc-now{ font-size: 32px; line-height: 1; font-weight: 400; color: #1A1A1A; text-decoration: none; } .woocommerce .price .cc-now .amount{ color: inherit; font-size: inherit; } .woocommerce ul.products li.product .price .cc-now{ font-size: 19px; } .woocommerce-cart-form__cart-item .price .cc-now{ font-size: 17px; } .cc-compare{ font-family: "Jost", Futura, "Century Gothic", sans-serif; font-size: 13px; line-height: 1; color: #6F6560; text-decoration: none; } .woocommerce ul.products li.product .price .cc-compare{ font-size: 11px; } @media (max-width: 520px){ .woocommerce div.product p.price .cc-now{ font-size: 30px; } } /* ========================================================================== ROUND 3 — gutter, header separation, section rhythm, slide-dot contrast Measured in a 390x844 frame. The notes say WHY, so a later pass does not quietly undo them. ========================================================================== */ /* --- 1. Horizontal gutter ------------------------------------------------- .wrap gives every section its gutter with `padding-inline: var(--pad)`. Four rules further down use the `padding` SHORTHAND with 0 sides, which silently resets that to zero: .woo-wrap, .feat, .compare, .faq. Above 1380px the max-width centring hides it; at every width below, the copy sits flush against the screen edge. Restore the inline padding only — the vertical padding each rule set is left exactly as it was. NOTE: .hero-v2, .trust-v2 and .announce are children of /
, NOT of .wrap. They are already full-bleed; no breakout rule is needed and adding negative margins here would push them off-canvas. */ .woo-wrap, .feat, .compare, .faq{ padding-inline: var(--pad); } /* --- 2. Header separation ------------------------------------------------- .hdr is position:fixed and a SIBLING of .hero-v2, not a child, so a scrim on the hero cannot sit behind it. The wordmark and BAG count render straight onto pale product photography. Give the header bar its own cream plate on phones and tablets: contrast then holds on every slide, whichever photo happens to be showing. .announce keeps its own dark background. */ @media (max-width: 900px){ .hdr{ z-index: 60; } .hdr .hdr-in{ background: rgba(249,238,232,.95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-2); } } /* --- 3. Rhythm below the trust strip -------------------------------------- front-page.php was inspected first: there is no empty
and no orphaned slideshow container between and "( 01 — The Collection )". .catalog holds exactly one child, .wrap. The 87px of dead cream is real section padding (.catalog padding-top clamps to 80px at 390px), so it is correct to tighten it here rather than delete markup. */ @media (max-width: 680px){ .catalog{ padding-top: 34px; } } /* --- 4. Slide dots — WCAG 1.4.11 non-text contrast ------------------------- The active dot was a bare #C97B6A fill on pink hero photography: measured 1.53:1 to 2.44:1 depending on the slide, i.e. a control you cannot find. Darkening the hue does not help, because the thing behind it keeps changing. Fixed structurally instead — every dot carries a white ring AND a dark drop shadow, so one edge or the other always separates it from the photo. The 44x44 hit area set above is untouched. */ .hero-v2 .slide-dots button::after, .hero-v2 .slide-dots button.on::after{ /* Measured over all three hero photos. A white ring alone only reaches 2.97-3.11:1 against the terracotta fill, and a BLURRED shadow gives no crisp outer edge at all (2.75-3.13:1 at its darkest point, less at the true boundary). Two hard hairlines instead: white against the fill, ink against the photo. Both boundaries then clear 3:1 on every slide. */ box-shadow: 0 0 0 1px #fff, 0 0 0 2.5px rgba(58,42,46,.85), 0 1px 3px rgba(0,0,0,.45); } /* ================================================================== CHECKOUT FRICTION - added 2026-07-29 Mobile checkout put Place Order 1930px down the page (2.3 screens). Everything below trims chrome AROUND the WooCommerce Blocks checkout. No Blocks control is restyled, so the custom checkbox/radio appearance is untouched. ================================================================== */ /* 4 - Drop the order-note step. One less decision before paying. */ .wc-block-checkout__add-note{ display: none !important; } /* 3 - 44px hit areas. The 20x20 inputs are Blocks markup: the tick is an SVG pinned position:absolute to the top-left of the