:root{ /* ===== Palette - 60 / 30 / 5 / 5 ===== Paper #ffffff 60% page, cards, whitespace Tint #f1f2f3 alternate bands and image ground Ink #040f22 30% type, dark sections, buttons, footer Olive #5c752c 5% icons, rules, in-stock marks Sky #6aa6d5 5% hovers, dots, hairlines, accents on ink */ --white:#ffffff; --paper:#ffffff; --paper-2:#f1f2f3; --ink:#040f22; --ink-2:rgba(4,15,34,.70); --ink-soft:#0b1220; --stone:#757b82; --line:#dbdfe3; --line-dk:#1d232c; --mute-dk:#949aa1; /* --blue keeps its name but now carries the ink button role */ --blue:#040f22; --blue-deep:#04080e; --blue-tint:#e0edfb; --olive:#5c752c; --olive-deep:#4c6124; --olive-tint:#edf2e2; --olive-lt:#9bb65c; --sky:#6aa6d5; --sky-deep:#4e8bbc; --sky-tint:#e0edfb; --display:"Space Grotesk","Helvetica Neue",Arial,sans-serif; --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif; --mono:"Space Mono","SFMono-Regular",Menlo,monospace; --serif:var(--display); --btn-r:2px; --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:140px; --max:1200px; --ease:cubic-bezier(.22,.61,.36,1); } .para{ font-family: var(--sans); } .hidden{display: none} .shown{display: block} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--white);color:var(--ink);font-family:var(--sans); font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased} h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.07} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s4)} @media(max-width:700px){.wrap{padding:0 20px}} img{max-width:100%;display:block} /* ---------- TYPE ---------- */ .display{font-family:var(--sans);font-weight:700;line-height:1.07;letter-spacing:-.02em; font-size:clamp(42px,6.6vw,92px)} .h1{font-family:var(--sans);font-weight:700;line-height:1.07;letter-spacing:-.02em; font-size:clamp(30px,4vw,54px)} .h2{font-family:var(--sans);font-weight:700;line-height:1.07;letter-spacing:-.02em; font-size:clamp(22px,2.4vw,32px)} .h3{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.2} .eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink); display:inline-flex;align-items:center;gap:8px} .eyebrow::before{content:"";width:22px;height:1px;background:var(--olive);flex:0 0 22px} .lede{font-size:clamp(16px,1.35vw,19px);color:var(--ink-2);max-width:54ch;line-height:1.55} .small{font-size:13px;color:var(--stone);line-height:1.5} em{font-style:italic} .num{font-family:var(--sans);font-weight:700;font-size:clamp(34px,3.6vw,48px);line-height:1;letter-spacing:-.02em} /* ---------- BUTTONS ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; border:1px solid var(--ink);background:var(--ink);color:var(--white); padding:15px 28px;border-radius:999px;font-family:inherit; font-size:14px;font-weight:500;cursor:pointer;text-decoration:none; transition:all .35s var(--ease)} .btn:hover{background:transparent;color:var(--ink)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{background:var(--ink);color:var(--white);border-color:var(--ink)} .btn-light{background:var(--white);color:var(--ink);border-color:var(--white)} .btn-light:hover{background:transparent;color:var(--white);border-color:rgba(255,255,255,.6)} .btn-blue{background:var(--blue);border-color:var(--blue);color:#ffffff} .btn-blue:hover{background:transparent;color:var(--blue)} .btn-sm{padding:10px 20px;font-size:13px} .btn-block{width:100%} /* ---------- PLACEHOLDERS ---------- */ .ph{position:relative;background:var(--paper-2);overflow:hidden; background-image:linear-gradient(135deg,rgba(0,0,0,.028) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.028) 50%,rgba(0,0,0,.028) 75%,transparent 75%); background-size:14px 14px;display:flex;align-items:center;justify-content:center} .ph::after{content:attr(data-slot);font-size:10px;letter-spacing:.13em;text-transform:uppercase; color:var(--stone);border:1px dashed var(--line);background:rgba(244,249,255,.94); padding:8px 13px;border-radius:4px;text-align:center;max-width:84%;line-height:1.55} .ph-dark{background:#0b1220;background-image:linear-gradient(135deg,rgba(255,255,255,.032) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.032) 50%,rgba(255,255,255,.032) 75%,transparent 75%)} .ph-dark::after{color:#84898f;background:rgba(0,0,0,.9);border-color:#1d232c} .ph-gif::before{content:'GIF';position:absolute;top:10px;left:10px;z-index:2; background:var(--olive);color:#ffffff;font-size:9px;letter-spacing:.12em;padding:4px 8px;border-radius:3px} /* ---------- HEADER ---------- */ /*header{position:sticky;top:0;z-index:60;background:rgba(244,249,255,.88); backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}*/ .nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:var(--s4)} .logo{font-family:var(--sans);font-size:22px;font-weight:400;letter-spacing:.42em;text-transform:uppercase;padding-left:.42em;text-decoration:none;color:var(--ink)} .nav-links{display:flex;gap:30px;list-style:none} .nav-links a{text-decoration:none;color:var(--ink);font-size:14px;position:relative;padding:4px 0} .nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px; background:var(--blue);transition:width .35s var(--ease)} .nav-links a:hover::after{width:100%} .cart-btn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:transparent; border-radius:999px;padding:8px 16px;font-size:13px;font-family:inherit;cursor:pointer;transition:.3s var(--ease)} .cart-btn:hover{border-color:var(--ink)} .cart-count{background:var(--ink);color:#ffffff;border-radius:999px;min-width:19px;height:19px; display:inline-flex;align-items:center;justify-content:center;font-size:11px} @media(max-width:960px){.nav-links{display:none}} /* ---------- 2 · HERO ---------- */ .hero{position:relative;height:clamp(580px,88vh,880px);display:flex;align-items:flex-end; color:#ffffff;overflow:hidden} .hero-slides{position:absolute;inset:0} .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)} .hero-slide.on{opacity:1} .hero-slide .ph{position:absolute;inset:0} .hero-scrim{position:absolute;inset:0; background:linear-gradient(to top,rgba(8,7,6,.76) 0%,rgba(8,7,6,.3) 44%,rgba(8,7,6,.1) 100%)} .hero-inner{position:relative;z-index:3;width:100%;padding-bottom:var(--s5)} .hero .eyebrow{color:rgba(255,255,255,.72)} .hero .display{margin:16px 0 20px;max-width:13ch} .hero-sub{color:rgba(255,255,255,.86);max-width:46ch;font-size:17.5px;margin-bottom:var(--s3)} .hero-cta{display:flex;gap:12px;flex-wrap:wrap} .hero-dots{position:absolute;right:var(--s4);bottom:var(--s5);z-index:4;display:flex;gap:9px} .hero-dot{width:26px;height:2px;background:rgba(255,255,255,.35);border:0;cursor:pointer;padding:0;transition:.4s} .hero-dot.on{background:var(--blue);width:40px} @media(max-width:700px){.hero-dots{display:none}} /* ---------- SECTION HEAD ---------- */ /*section{padding:var(--s6) 0}*/ .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);margin-bottom:var(--s4)} .sec-head-text{max-width:62ch} .sec-head .h1{margin:12px 0 14px} @media(max-width:760px){.sec-head{flex-direction:column;align-items:flex-start}} /* ---------- 5 · HOW IT WORKS ---------- */ .how{background:var(--ink);color:#ffffff} .how .lede{color:var(--mute-dk)} .how .eyebrow{color:var(--olive-lt)} .hw-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:28px;align-items:start;margin-top:var(--s3)} /* video stage */ .hw-stage{position:relative;border-radius:14px;overflow:hidden; background:linear-gradient(150deg,#0b1220,#030910); /* border:1px solid #1d232c;*/ aspect-ratio: var(--wd-aspect-ratio)} .hw-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#757b82; text-align:center;padding:24px;transition:opacity .35s var(--ease)} .hw-screen::after{content:attr(data-slot)} .hw-screen.fade{opacity:0} .hw-watch{position:absolute;top:18px;left:18px;z-index:3;display:inline-flex;align-items:center;gap:8px; background:rgba(0,0,0,.82);backdrop-filter:blur(6px);border:1px solid #1d232c; border-radius:100px;padding:8px 15px;font-size:10.5px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:#ffffff} .hw-watch i{width:6px;height:6px;border-radius:50%;background:#d94f4f; box-shadow:0 0 0 0 rgba(229,72,77,.55);animation:rec 2s infinite} @keyframes rec{70%{box-shadow:0 0 0 7px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}} /* step cards */ .hw-steps{display:flex;flex-direction:column;gap:14px} .hw-card{display:flex;align-items:flex-start;gap:16px;width:100%;text-align:left; background:#0b1220;border:1px solid #1d232c;border-radius:14px; padding:22px;cursor:pointer;font-family:inherit;color:inherit; transition:border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)} .hw-card:hover{border-color:#262b33} .hw-card.on{border-color:var(--olive-lt);background:#0b1220; box-shadow:0 0 0 1px rgba(155,182,92,.28),0 0 26px -8px rgba(155,182,92,.30)} .hw-ico{flex:0 0 44px;width:44px;height:44px;border-radius:10px; background:rgba(155,182,92,.10);border:1px solid rgba(155,182,92,.22); display:flex;align-items:center;justify-content:center;color:var(--olive-lt); transition:background .4s var(--ease)} .hw-card.on .hw-ico{background:rgba(155,182,92,.17)} .hw-body{display:block;min-width:0} .hw-num{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em; color:var(--olive-lt);margin-bottom:5px} .hw-title{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:#ffffff} .hw-desc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease),opacity .35s var(--ease);opacity:0} .hw-desc>span{overflow:hidden;display:block;font-size:14px;line-height:1.55;color:#949aa1} .hw-card.on .hw-desc{grid-template-rows:1fr;opacity:1;margin-top:9px} @media(max-width:960px){ .hw-grid{grid-template-columns:1fr;gap:20px} .hw-stage{aspect-ratio:16/10} } @media(max-width:520px){ .hw-card{padding:18px;gap:13px} .hw-ico{flex:0 0 38px;width:38px;height:38px} .hw-title{font-size:17px} } /* ---------- 6 · FINDER ---------- */ #finder { background: var(--paper-2); border-top: 4px solid var(--ink); } .finder{display:grid;grid-template-columns:1fr .9fr;gap:52px;align-items:center;margin-top:var(--s4)} .finder-q{margin-bottom:26px} .qlabel{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);margin-bottom:14px} .opts{display:flex;gap:12px;flex-wrap:wrap} .opt{padding:12px 20px;border:1px solid var(--line);border-radius:100px;font-size:14px;font-weight:600; cursor:pointer;transition:all .22s var(--ease);background:transparent;color:var(--ink);font-family:inherit} .opt:hover,.opt.on{background:var(--blue);color:#ffffff;border-color:var(--blue)} .finder-note{margin-top:var(--s3);max-width:46ch} .finder-result{background:var(--ink);color:#ffffff;border-radius:18px;padding:32px} .finder-result .ph{height:200px;margin-bottom:22px;border-radius:12px} .finder-result h3{font-size:24px;font-weight:700;letter-spacing:-.02em;color:#ffffff;margin-bottom:6px} .finder-result .fr-meta{font-size:13px;color:var(--mute-dk);margin-bottom:20px} .fr-row{display:flex;justify-content:space-between;gap:16px;font-size:14px; padding:12px 0;border-top:1px solid var(--line-dk)} .fr-row span:first-child{color:var(--mute-dk)} .fr-row span:last-child{text-align:right} .btn-shop{display:block;width:100%;margin-top:26px;background:var(--blue);color:#ffffff; border:1px solid var(--blue);border-radius:100px;padding:15px 20px;text-align:center; font-size:14.5px;font-weight:700;text-decoration:none;transition:all .3s var(--ease)} .btn-shop:hover{background:var(--blue-deep);border-color:var(--blue-deep)} @media(max-width:960px){ .finder{grid-template-columns:1fr;gap:var(--s4)} } @media(max-width:520px){ .finder-result{padding:24px} .opt{padding:11px 17px;font-size:13.5px} } /* ---------- 8 · BUILDER FORM ---------- */ .builder{background:var(--olive);color:#ffffff} .builder-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center} @media(max-width:960px){.builder-grid{grid-template-columns:1fr}} .builder .eyebrow{color:rgba(255,255,255,.62)} .builder .lede{color:rgba(255,255,255,.8)} .builder-list{list-style:none;margin:var(--s3) 0} .builder-list li{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.17); font-size:15px;display:flex;gap:13px} .builder-list li::before{content:'—';color:rgba(255,255,255,.45)} .form{background:var(--white);color:var(--ink);padding:clamp(26px,3.4vw,44px)} .field{margin-bottom:var(--s2)} .field label{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase; color:var(--stone);margin-bottom:7px} .field input,.field select,.field textarea{width:100%;border:1px solid var(--line); background:var(--paper);padding:13px 15px;font-family:inherit;font-size:14.5px;color:var(--ink); border-radius:4px;transition:.25s} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--olive);background:var(--white)} .field textarea{min-height:88px;resize:vertical} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)} @media(max-width:520px){.field-row{grid-template-columns:1fr}} .form-note{font-size:12px;color:var(--stone);margin-top:14px;line-height:1.5} /* ---------- 9 · ABOUT ---------- */ .about{background:var(--white)} .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center} @media(max-width:960px){.about-grid{grid-template-columns:1fr}} .about-media{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)} .about-media .ph:nth-child(1){aspect-ratio:3/4;grid-row:span 2} .about-media .ph:nth-child(2){aspect-ratio:1/1} .about-media .ph:nth-child(3){aspect-ratio:1/1} .about-quote{font-size:clamp(18px,1.8vw,22px);font-weight:500;line-height:1.42; border-left:2px solid var(--olive);padding-left:var(--s3);margin:var(--s3) 0} .about-stats{display:flex;gap:var(--s4);margin-top:var(--s4);flex-wrap:wrap} .about-stats div strong{font-weight:700;letter-spacing:-.02em;font-size:clamp(22px,2.2vw,28px);display:block;line-height:1.05;color:var(--blue);margin-bottom:6px} .about-stats div span{font-size:12.5px;color:var(--stone)} /* ---------- 10 · FAQ ---------- */ .faq-list{border-top:1px solid var(--line);max-width:920px} .faq-item{border-bottom:1px solid var(--line)} .faq-q{width:100%;background:none;border:0;font-family:inherit;font-size:17.5px;text-align:left; padding:25px 0;cursor:pointer;display:flex;justify-content:space-between;gap:var(--s3);color:var(--ink)} .faq-ic{flex:0 0 auto;transition:transform .35s var(--ease);color:var(--olive);font-size:20px;line-height:1} .faq-item.on .faq-ic{transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)} .faq-a p{padding-bottom:25px;color:var(--ink-2);max-width:72ch} /* ---------- 11 · SOCIAL ---------- */ .social{background:var(--paper-2)} .social-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:var(--s4)} .social-tile{position:relative;aspect-ratio:1/1;overflow:hidden;cursor:pointer} .social-tile .ph{position:absolute;inset:0;transition:transform .7s var(--ease)} .social-tile:hover .ph{transform:scale(1.06)} .social-tile .ph::after{font-size:9px;padding:5px 8px} .social-ov{position:absolute;inset:0;background:rgba(18,16,14,.62);color:#ffffff; display:flex;align-items:center;justify-content:center;font-size:12px; opacity:0;transition:.35s var(--ease);z-index:2} .social-tile:hover .social-ov{opacity:1} .social-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--s3)} .soc{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:10px 20px; font-size:13px;text-decoration:none;color:var(--ink);transition:.3s var(--ease)} .soc:hover{border-color:var(--ink);background:var(--ink);color:#ffffff} @media(max-width:900px){.social-strip{grid-template-columns:repeat(3,1fr)}} /* ---------- 12 · FOOTER ---------- */ footer{background:var(--ink);color:var(--paper);padding:var(--s6) 0 var(--s3)} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s4);padding-bottom:var(--s5)} @media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.foot-grid{grid-template-columns:1fr}} .foot-brand .logo{color:var(--paper)} .foot-brand p{font-size:14px;color:#949aa1;max-width:34ch;margin:14px 0 var(--s2)} .foot-col h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-dk); font-weight:500;margin-bottom:17px} .foot-col ul{list-style:none; padding:0} .foot-col li{margin-bottom:10px} .foot-col a{font-size:14px;color:#c5cace;text-decoration:none;transition:.25s} .foot-col a:hover{color:#ffffff} .foot-news{display:flex;gap:8px;max-width:350px;margin-top:14px} .foot-news input{flex:1;border:1px solid #1d232c;background:#0b1220;padding:12px 17px; font-family:inherit;font-size:14px;border-radius:999px;color:#ffffff} .foot-news input::placeholder{color:#84898f} .foot-news input:focus{outline:none;border-color:var(--blue)} .foot-bot{border-top:1px solid #1d232c;padding-top:var(--s3);display:flex; justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-size:12.5px;color:#84898f} footer{background:var(--paper);color:var(--ink);padding:0} .foot-top{padding:var(--s6) 0 var(--s3)} .foot-brand .logo{color:var(--ink)} .foot-brand p{color:var(--stone)} .foot-brand .small{color:var(--stone) !important} .foot-news input{border:1px solid var(--line);background:var(--paper-2);color:var(--ink)} .foot-news input::placeholder{color:var(--stone)} .foot-news input:focus{border-color:var(--sky)} .foot-col a{color:#4b5158} .foot-col a:hover{color:var(--ink)} .foot-bot{border-top:1px solid var(--line);color:var(--stone)} .foot-koru{height:22px;width:100%; background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABCAAAAB/AgMAAABDFVvHAAAADFBMVEUCAgJ7e3stLS2BgYFgA3VfAAAABHRSTlMA////sy1AiAAAHOJJREFUeNrtXU2MHMd1/ro4u9uzJoiBLMsLgxbb1NJYS0bAQ34IIyAaPgmJ4RCxSBGRFY+BIGCsHBaGYDO2FJYkwiEUQVkgIqBD4IwRO1gtdSCMJNBJaPtE+BAQTuxszI3dsmllbcrCQFjvNJfD7hzq571XVUPfcto5kLszPd1Vr773ve+9+lko7L8AYN8O+4bYN8S+IfYNsW+IfUPsG2LfEPuG2DfEviH2DbFviH1D/L+9ejPe738KALrXAeADpX3zVqU+Y3/MNgDg2HEAuHM1cQPzpfeNAGSPuTevYO6U/dF86TQA4BGdbIO59sA6XQjgEW2aFrTuVpW4weXKf+Tb0L1O/eGtm4WI2xoAPgIAGLg3NboXbZsfBACsAgDGqRuYN3cAoOMI3LA/DAAgAwDk+l6D1AIAWD/Vor1+CgAo2b/B6xIAKPYke4N1+39NT+mkIdTI/dRWAFCXAHCTXfEl24gtAMhK2Ui1se4vNK3Mwl60Z+wPBTXijv/04Q1uk4lpog6NvauZrfvsorAN2wDQ9gCgZZZqz1pwVDTMU24I9fjdJ//E/bIGAMVxapC02BgA5jUAXHBvHrv7h4//euggCBqpBGRMy++jgQOgPvcf/3rhDLvouwCAIdlVvioAWAaAwn98+e7px3/trHJX02Ccj76eH6Xbq3FP0MLjG/63m8cB1HZEI+AtVABwCADwjGOF42cAYGhRde2Ex+XduBOm5ScBACP3/N2zOIMz1IZ3qQtdfIsjAIBzFYB67FmhAgBtTNHWZjAqADtFHXy/2QaArDYOQIhQj6lug5HEDFya14eYY9pP5ywWPqDviUtEsM60fb6l4bOBtQxJXItu8VkAUMI7j9kHOWpdJTrq6ugGzDs7RpYfbo4wO1iSmIXLbUZA5kK1ap9U78QksZaG9ZTz9bHGPnjOm60riIm2I+9cBYA5DSC3eMmu20HQmxbWjHSrtHcOAEAdJEP0fzf/XoL207hUwpgAgPd7i79loNENCTVbUSOYfc6ZTvyWh+z9/rIRALRrSfeaJ+9csiP1iiMoPFvy2JeGNQs6uiBDPIY7VeK6NmlNY8wlAMBB048hY3UweoqCF91cVczBHqAP6V6m8d9Mutcd+rKliD67xBjTfKmuk7AeU8suaG+IfhOCr7sHSewBAD5BnoaPkgsqG1W3CJdtNZsizHOyNxH2AsBUA8BbDD7kyrnpR0ED9RKLvZZ4TMOXyM9C7+y5u7obH8SRKnUhrqesaYzZAkDfPPHTjF3a32a4NCZvgshVEeOaey9zAfGWG9puRMP+NkMoo7qabCk6cJ3d/G0enNzrAhOLl7whslK9k9aGvRRJMGMacPQFJ/9C8+AFADtyOD4Y6dLj4vMl98M6tTZQMxlRnQ3gy1KfM7hNNAC8J2/wDAs6I2+IZbSjNJlkzL7SawaEUAKzGX+TUJh/TySCV6RL+/LRrYhOSMVgxfhllT3Of87j6pCGTI7zgvd/a4g1dScWf0WIS/cMxrdWlJ+QX70Y4bKKG2F0aWcHQuQbneu0iRUfSWhDG8A1gH5FyohseYLh7ZUErCsAOOwbagyRjdqEDJ6Fy5ZRnWlpMKAWtzNx2Y906Yo0hM/z2iGlPDsp79R+qJeDNvwPG4y3YlgfCbzTGKKnkEhjZ+IyMKYLoexVMxjUALCnI106pKZE4XUeCW14b+9cDbVOGaY8NyPvZP5jDDFoE1oe05wauVr4SGlv/kUGvUfDr94fBS8dwXoY8m4EKdf4fD5yL56CFwCgwja0A/alAQDcVt5qtm1zhFzHOc8kDNGdpadN65Bv3wRggZTZ6Pjw+sOWcg0WpwUA/BwAsBmJfB2OLNSGK1e0Q14XabrIvcZEEQsaABYshTysXSrfY4NxMVIzzDun3hAZcNVXBFj0OJ/G5aoPT+0FXuYqfnHguasrDIsmVjShyuaR7yBD1GL33GvvUxDMaH0ycq+KKHaHxy39kUey6wWLdwY6z7FsFgDwEOP7sTdED46rLv/g9JNnpR/FOUtFkvgZPqC3XgWeWOdsV5EmvB3qUgZri6jJhsbulYAk0u7VRULEWu7KEHjCjKpmJGHIYBp6pyagKNNqO+AfLM+cOb8wlPW6LKjHmWvPAsiLMfUpf2EEADeqnDg8jUsm8o0u7QFAnm8AQPu6pkf7xv+5ScULmauULGMxvXmfBoAbjyIH9IB8sg1hXVAAP0K6pLSP65/UQL3rKzxWGw5J9gPASz5qN9tkTDTWKX61lAP4KcsVTJ8HeaxLiz2Cz94Ba+c/FnYzjf9yCQDv1qJAZsjhLvODD1u//jO95KGchLXBwiGqa0CZmzDdwYntFCUK3Ujkxj0mlRdE5bH9dhOkbDZ47cUpeJ2zbNs94EYhKsbMvSayWLLMINMDAJ8mdGUN4EVWYQpgHetSG1GMzn1D6HT/kHmRs1iq0wDyLXaVr+nfAIC8DIPXpBU3rZguHYkSbjsSEfW9RCpubPkHOXVuIAdrBwD+SrMvSZJghSWbqykAPasMDwa5gtSGzpqm5FlqAB9ijXiIAvg1AM3AlibyCJeRLs2CtOsdkW/vIUzFLUdnf9rQbTUAfIUK4ENyLx77ijhrPAqGiF0mswRnM2041ZEx/5c1glUz3iG5N0ET4TLSpT0AOBKEhA6JcrjThlfDXMXc9Cq14RS51w7r0nqsS7fJECPTrDkW6ctE8LK9HoUpuGnEKJiPmGIGLuPItxJW866LKZuYJDjVsRw501J5Kv7AjA9XpEudIcaCnqDagfDnn1NT1IVI5GcUg+zrGqUPrwJAznE5DWMetn0c4PqlkEriImOWo1ENfTHMszsFzC8zS85zWLMAvqC9ITKL/ZOsHNATuGwIly2L4CiC2jqnIqWpTw3H5RgADrAikdHJVZhRecvcFbRfAe05esPUuowNRAL970DzFrNk07C6CAs6OxRHcmPcLJn0RNpwHKLNGG01LOlYpuLTI9t0xyU+NVTJ2q19x4eN2L2Yd95hJS2RQLNU08Bgjlwy9k5AAVMzJr1EwVLWkWv/wUFOEXnUiK7wpGHskVMd+Qir+5qbKx0V/McsTbTD8Dxpw+e0qDY6qSMT6NsEXDMMewTrZyLvBBSwYhTRQCTzxwVJUGGjY48fkyGCLH5EGOG4HAL4ywjWnY7q5FORnNwEgL+mGPwVRhEj8i5ZmWlLqvhVpLJv+6mhBYjgpIBtIx2H4jY3E8FrmqQ6jAhOio3oSqzJzntYt6RLDdFViaIoH1weg8fkl86FK9LDDkmaBvc9ObFgUHo/hMRSLtNQsuSXSR8ZuKEbx8Yc+XL9sWftZPiUwN6x9G1LpuBbpJiMvlKfsyUQlDx+BiRh+mHKGdbyikB1efIDigyWzU3+3ndE3rEyqxDdOTX4G1eufJ/lB37aqme7nDGKmEYTNld/OLQz8Vqbgfa4PGVlABP5zv1W/FP+fvfM3VOk0ZJ1kcq29DgAFFYXdNoRwlx1Rn/JV8JvgpFE4yx5MPJOAArKyGGTCr8I/HcFAEXB1ZEHSBtFcCjfiJc00Jisd6R9hsTo1kFHRvBtZ9S5CsAxHQxnoA3tLczsa13ScLYagDoF4POnQveqREW4DrNGc4vOfLICAHe0o7N6KYFL6TYVmbvVXo7OBTMmFji/4CMsdGlQuq5POYOHFRBR9lwQb/XcOwsA0H7U3WJRWLIXzyF9lhlikaUQ2wDQXQNQ+Hj2KsKY0kOoJTvAztoVzXU3oiX7LG+4JY9HrDb2FKxedj1cCUeUs9iy8M7WAcU47U9K+6VJgm7t6wR8/LCG2DPAHlJG+g78WhkA/ynTMG8UZ8zcufSqaezFcLaqAtAISxZCl1YWPQdM1jwpLc63AgoSExvnEGrJKQPuEo35DFhb76zEzFmrrbm/zmlhNi5LMY8wtQzgktcsSaQcl32EKVJbMdANomDuCmisH1INFUGsa215ySfUayGsI+9UFoGKD3IVZ3/5cAZF+JKW4z6v1weJXIHB2jfCfW/I2zgkB/eDsVcG/ei4rQdMzmTaWKNNlaGjrNEaYBtZmOfsighmtOH5oBG+EJOLUbPPaPlwD7XE5SUAyL3I12asvZDJLK4nQT6LdhD0YxpOrtkL2rbmvgmgywMQRlmj0xGKD/IurwYJbUiNOMfpd43jrhcKgVUtcGnqcw2vzrYCMmUwHwTglwxKUQCnDpV88Dre0zck3WaRdyrbjPmIFgqJy9ulbMSIP3PIu55Zm+YyEewFkY8/sOG1ORRRCijqdQnvrC0daIlaZqoxSRD6XCwyxRCNHfYFEa4oj72m4JZ0BRMSqXzVVSIIuFKTBZHPdz0XkGskqrqjYsRNP/4RnGY0H+GPhYRr5nEfdL9+G0F5EYpF5wY4dkZazlzfUokoorqw+zYELMU2cu1aiSIfbgpD3LR943T8b4L2B1QbdQ9oxQj/SJsHEqwbEhiA+nrE90qIlP7Z/lk3XIszgtdqyLdmpFh8XQt9fMCtm+WyEYuR4RdDGRnRfuCdIW+7tYf8HaGyE96p2DA1uH9zd07bhk2C4GW1oQobUUQ5kg4bscUVVq+JE235mgRxNdKGMdUhgOn5IkSlUDMJ71TMzjVOAM31+Bncmgv6N/UDPUO+Kq3JBrxKF5tPeNkMbSgmJMK6gbnZ2FDoVlCv6zNdWgjvVF0Ij3knA3TSmodDY2pWXiEoNALvnCSkLk2QrSGZYfDxGkuVBhHVRa+V0OHMLJiBtdGldRUiohE12c61ma67mwNuSddaTHUhe+4ZP2AmHheAnVpN6NLoNQqYLnAvWyCTFNHGnNKLbmpt2EuUwVTIUmbI5HiYFWrbJYCsmNEPc6MVbZ8gkTodehkQ6NLkXVZjjuDu1Z/lnXmESvZi9bqELhWGYJP0A9mONcBOZ/ZmNcKMyJZmIo31QnueDXRp8i5RLRlwu1hqyBW7CHUZcJ9KhXdTazEDNASCKSVAqcigK9b/inCSoJc0prXXPJtm0GkCaNdmRz5RqlhBwv/e9X1dTXkn9eNWmxwqO9FSumVswfpwl2sMqJi6JQRDoA3LGRRhx3JxE4kl6BaX6qKb4sr0LEP8Ps+hEql4G+5VSbhXhUT8dex23KH6CGZzxCyFQ1vpbA+qIOvz35hsphu3BwDtonve0cQl5hF/x4ciURfJnJ8tJD9OexVv6M2ghs4NMbVX9ecTdRmIiQy+XD6lAdQzs6UFsOvG9ceRY/t7zBzozPU3YworeaGT6FmiJIqpw/NyGhENgOZLJFHlVbSzYpS0ObX+O2nQ+0bE9a7WsZMGgJWl/B4yDVoly8mlaHUj/MO/hs6rE+XkwDW+43/alVcRT4/jejAPDG2rk1RYAnYiQyZgzP+XjHE2mxmGWAMAfQliWbLsiN0QmlnztmJQsiGAHJVbn9CUSbIE4KekdZrLMYbcSkmDzYRoGRTeOKy1t+TTcUc3cc+XGWJNtYr5QCxRGt6mEaUBNB0gVtvT/VuGqrlyhtcRRVIQ8km6jbTVLCsC6BUefdMwM8jsUMyTBywmSM945wUiMe5etZ3UvJclWeDfTsDaiY8mgRZijOeJl9cYRKgY5x6kkAx/g9rXKjuEltSmBcYbm2ZGODvKYmgFII+ykd8g3EtSUTGszfM6D6cZ4f1QS424yf711KRhN6iQhCj4g7iKuhaMtpM/XWQ/0RqeMI4BNOEm5xHsose+TFKEd5o6Bd9kFZLlPfNqrqJupxTRxTjq1kz5i4mMX4a41DbxvuYBt2vsU0cUYVb6ip2YvmmrAG7qmOhFAL/DteJAGkJFKAxxYRItXTGlmteB4rNRrUuidJnbfC8kidLe9J1EOPGvOS5xutRgrACYIAemqBNCccCziJsxSaisNT0fzsrjgN4QAP6JFyeaJsbdF329ZRiM2Bd4/YDvEPZ2LwBMisB+vKMPCKN/F3BLDfylWwDw/YYlU0qHEwCqwCxYq1mFEG5MzesgES4dtG8vIr+akIxmjwv18XwieI0B4KpWBzBDT8llHe+Cl5PN2tNFAPjRCh6sWEWrSQRwyF0gITkvCY+exhRRpOpu9ifjLxu4o1NHe/QlC4XTb34h/Y2qXedPLqNCXCUGIxP6b6IBdOu4Zfqk4RY8xN7pSGIpNMRA6JndpIqgiYyUNlwDgMmVdY5n39X7AH7Wxe0geG165fDUFePqPeOcOqQ6WpZcSEtl2rXrxpURXaZlgDe6lFnybWGIoUHjVDw0DyUZ21AVasMh6FAQZNrnyR6WJzTYWRfiQAY3FhPN9dlSWIIW+54S2rAVvy3GiSjTpcykEy0N0eRw06SuAwVo8nMt8OkQl8NQ1UqNj8yc71EFhYFG3E/UEOqo5CG9M9aGmv9Gq9O8a/RDjRDBmmTvWT7i23STqFQaasMBJ+BeLAznw+relswV5HBW/pd+GMDZNGOoDSt+/RLClbxClzJYvxIYQhGZsx7axy5EVf9AG9ak1YABoOwyA4eoQ2EjAlx23CwZjSPjql4NIGd1yFAb5jxBaOwtmH8/DNjJDgHrt7ghlmxTXMUmDxLpw4Bbi57GZQ+gZT0joLXTkMOELuW4rEmNy2VhcVVzEImbQBtu899KbVo99ZYyJzzoCjNhDYVNJwN4fXJEF8Wl0oAk2IpBr1hYoxMTGWMZvEaA3+u/4po34iWkEgAankLclOw5z1CVQXtEiMpyF+dnA+kaLUuw6ea2yhGXSgNt2DHeOaCtofb8+qXERAbfBeIs8jVmCC3ZNFiXSdpQ+U2Ru4A/Y2DZ2bpIpeByMHrMEPPuQoPuvJCZAKc6dxJLoA1L8ugBRQUXOwaEXZnheZ/eJOv2dcz4cmeFNmAzY+evMXe8X5YItj1/nqS+59ZAYexT2HXjMJEclkciX5XWlQNtqH0lzMBnCGDFP4NFvgNyn9tAAOQBAHjFpY+ZZt64Rv3I3OK0wL1KwJ6202fB2vJtpuipB932zYAkFDLfs29rYPEd18cJU0OGb/vOlQ2dHBAoa+9q4B+svYBt8liKfAM32hKXVrRvAnMnPD1zrVNQPw7J7c1vi8HY+x0N9fQl+Akt+wSzGcC78DwrDQ7IEC3cHvLb5cbG7UoqF7Mh/1LlFNtFyln8jn7Tpub06dNvUBqiljis3/PmHwJyh7B7r3729OlTGjD7QnK26ZCvRLgEsWvf43ecA2jrH5z+zGbjtEntaIbp0mzoNP6PJawNaJ43D731yGu072qZXTjx/eizSNLIkqZr04MAULZbUZzLfP7OdwgjORM6xYMeE2xnhaog3eu6u76JyuLKjzfzznkNtNepTxkzREXbkX/ItktshnybAW7Rp1xxGEzxbQGAzmNd2qP8XWqy7bjyuMKE5Vlypz41fizCdJdHuYlPPo0uNeeTHaKGPCoGIziugQ3xmhcnlojN1y0uNcflWlRbyHQzJl3KN5wa+LwrcDkVyUlnbPND35oaAIqKpDIbDH9y2ye4JZ4vuHf1aurpo2RJmUMp03BZCJ/3JStDEXzbjcXliAe4t+NSsraNOCyCDtgWFobLbhSpjBFFffPEn5DMsBtyJe2/zH3jb4ycsRF8jWBnT6oogXC1vTIPkvW/j/qL+cLMkjV+XPPgNYkGtKdtI1YDWMvt7mVKT4+Dd5aYd/IZHBmDxZzunjFax72zYBgcxJVPZTiP1/8sfsgnrDELNuD89JiAJKbmqV2kS+0UuEl05C6QXRUgKmOinlXp5jVr/HtaxGAuwC+ZVvdYFrvAUM3p1sU+ZS1zkVNE7eylWCWoVzNC4KfHiKqNrZ2ObQTmSxHOce1jTj9yvZi0AaLy3EdPfrjBIZ573pExeD2Y47BLit3E7Q6HIKfb87Ju8BynCP/TAhuAgfhU4pInyJV54Ba7gJ/5xE/4ah0uOaQOmmjYygqHEq60k3AvdtZepwGo2vZ0VehShHQ7T4aoAFxiFd2X/VWHWTdL/pRQG1JHDphCuloLU/C+7Nl3RYloJxjNAaWKLAXPZDlYutcksGXmzqBh3vlxd8VxE3I1/Gp7t7ywoRqkQeE4FvmsEBNqwx1ZrOi0USZ8T+GizCXfFWF7UghDQlPQKCOqcz4ZaMPv+yrNyGpm7RNia1ev3OwBetoLAr9ixtGal5Ql/MknFb3rBWWgDSe5wEbPnkM8H+jSCJctAimSbwdZfz/hneIAPT8YN5wxvwoOqqVAlzJY/zLwvYYJWbcvNdeBGlqFqDFabTsIqeod+/YFVqU7KBElgpczjzthZlJBBo1pwjvlAXrOvdqroi3P26+ejQK4h7W568e8IToUoJNm30+jeDBlTFwoCVwel3e+BwDqBXPZJ92ZHZpg7SNkfpAGfd6L0n8xl74Oe7F73tWUd4pDv72SupED/iwqdVKvAUD2U/JOtobtVRqMzdKzcVUDgDl+qj+k3pcUD9kiNnPQ1UTJtv1MrWOjszvlWgP1rGC61HtBc5votnE7hDE5tQg1umUx4w8R5N7ZC+v7O9K98C2lsZKNLPjtITBsPz7bSfpkGPsUK0ie0UD/6ZoSBhba+Bo0g8uTEq3ta+t4YsNH3VEo8ksEuAyXdN34Hrq/HbluTkUA76KUJqENgfZKhVvrvpHaT7PZAI60JXs0r2F2gl949vTjO5sk78wIXCCtJnAZzvvgiSv/7Ok2i3Qpb0STmrbDf11x5w4yilhOeqfzWqENAbRPXXnV/nifbfhJANDHAXGakDvYkWKfMjqxtrzi/9BAmIKPImveDMQXe50rjoaVJbEWoSVOawaJ7/cobLB9TwsckKYLRtE+nWrDSVY7sGeQHEIEa3OwXunhUsV1EU8Rq3F/WfAKtxyZoau3kym4D14lAGwXkYX8/bvEXIBcIcpov5+4Rd/SbEqXclg3LsKaS8Zhd4giuioypr37NRG82OuApQi+x6WMLXm3jnwGIUXwWfAXxTUsFd8r41scFtIjTzzJwDpn9SxEB9OrPlHE0UQ/MlZXOp8a0CPEInqcaMQ3mW+XidH0R9yYfpjDcb4uLvoxI4mEe53i0qMYJbBnYN04ujWGaOUfbWj3qBHngHg1/TChDcmMpT1tbkTzbMHC58+H5UzxOkgOx7wzWIWeSnl4Aq2YhHor9SBe+ax9SAnKp9s0VCPKpkPal9rQv+bslw4kdWlItyruxdBns4bP+eE4yRgcu9eyNi59OKlLo1S88YaQx4NnFfXDeFpgiPmUNqTk9aGw7qsqncKlBtBGvVigpVi9HED7EKvP0Otpot3YvU6NvoKZWSMvKRpLfo1ExvWo0nWUAagM+sEO/W4uhh5eWRoVulSncFkm6fbl2g/LoCHvDPvxXFrNGFDW28fvpUtDlf3l0htClPyuEpq309AzwUungtdLuFDhHro0hUthyJLK+yX1Zj4RW5BcMQnglIX4LF0aVT7XaF6WSYmvhvWM2I1ZKh4s4O6X5rQeEfkeTfciSbevaN8WQxFdrIaS2pA7lxVih2foUibNzWBcJP39K18aMX+Tis+zxcR+l6xUyE8/pV9gqUz+DGWAcS/MXwmTmuzYGysfl+pPzYiyvUS9zvTw08rUM9n2imjrk6t8uuPgvSHaq1ZF57cQpuAl0iM6BoBa4OUyND8ifO8qAMzHMdYg/c2In/rH859pWa3JZ+iujA2SWDH5GLqrCAtky/ENzJ+VszMdlJHdsIa4M2IUNsOYThtGwetyiSu8mWa0H0j0guGStbH/tHs+EtOFs0mCWVpdBja4tScpgUDsZkmCpaZPfXID2DB/Q1Ac8X84nRfF2vC1x7/g/0Ah16UnMAuXTO8AWLy8qw+sBzV06Z3tb0p5vvXkucyOBV/GllWzLGkSt4s8R/+LR5B9w7YjZxThp1q0mDz2kcWzy3N/9Jr/Q40FBR0lwUzZjMut3Hea+596YT3I/MJcRZMtuDb0/Zz7vW9s0LVEFOxLzqhmUZaJL+r/ACXGMql2sxhCAAAAAElFTkSuQmCC'); background-repeat:repeat-x;background-position:center;background-size:auto 22px; opacity:.85} @media(max-width:520px){.foot-koru{height:16px;background-size:auto 16px}} /* Koru divider sized to match the "5-year warranty / Duralloy / 31-day returns" ticker strip between Our Story and Complete your entrance (~103px desktop, ~69px mobile) so the two dark bands read as a matched pair. */ .foot-koru{height:103px;background-color:var(--ink);background-size:auto 68px;opacity:1} @media(max-width:700px){.foot-koru{height:69px;background-size:auto 46px}} .foot-bottom-strip{background:var(--ink)} .foot-bottom-strip .wrap{padding-top:var(--s3)} .foot-bot-dark{border-top:0;color:#9aa0a7;padding-top:0} .foot-bottom-strip .foot-wordmark{margin:var(--s3) auto 0} /* ---------- STICKY BAR ---------- */ .sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--white); border-top:1px solid var(--line);padding:12px 20px;display:none;align-items:center; justify-content:space-between;gap:16px;transform:translateY(110%);transition:transform .4s var(--ease)} .sticky-bar.show{transform:none} @media(max-width:760px){.sticky-bar{display:flex}} /* ---------- REVEAL ---------- */ .rv{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease)} .rv.in{opacity:1;transform:none} /* =================================================================== OPENING SECTION — announcement bar, header, hero, headline band Overrides the earlier runner/header/hero rules. =================================================================== */ /* --- announcement bar --- */ .announce{background:var(--ink);color:#ffffff;overflow:hidden;position:relative} .announce::before,.announce::after{content:'';position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none} .announce::before{left:0;background:linear-gradient(to right,var(--ink),transparent)} .announce::after{right:0;background:linear-gradient(to left,var(--ink),transparent)} .announce-track{display:flex;width:max-content;animation:marquee 62s linear infinite} .announce:hover .announce-track{animation-play-state:paused} .announce-set{display:flex;align-items:center} .announce-set span{font-size:11px;letter-spacing:.05em;color:rgba(255,255,255,.9); white-space:nowrap;padding:13px 0;display:flex;align-items:center} .announce-set span::after{content:'';width:3px;height:3px;border-radius:50%; background:var(--olive);margin:0 30px;flex:0 0 3px} @keyframes marquee{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.announce-track{animation:none}} /* --- header --- */ /* header{position:sticky;top:0;z-index:60;background:#ffffff; backdrop-filter:none;border-bottom:1px solid var(--line)} */ .nav{max-width:1560px;margin:0 auto;padding:0 34px; display:flex;align-items:center;height:56px;gap:34px} .logo{font-size:19px;font-weight:600;letter-spacing:.36em;text-transform:uppercase; padding-left:.36em;color:var(--ink);text-decoration:none;flex:0 0 auto} .nav-links{display:flex;gap:30px;list-style:none;margin:0} .nav-links a{font-size:13.5px;color:var(--ink);text-decoration:none;position:relative;padding:4px 0} .nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1.5px; background:var(--ink);transition:width .3s var(--ease)} .nav-links a:hover::after{width:100%} .nav-icons{margin-left:auto;display:flex;align-items:center;gap:2px; background:var(--ink);border-radius:100px;padding:5px 8px} .ic-btn{position:relative;display:flex;align-items:center;justify-content:center; width:30px;height:26px;background:none;border:0;color:#ffffff;cursor:pointer; opacity:.88;transition:opacity .2s} .ic-btn:hover{opacity:1} .cart-count{position:absolute;top:-2px;right:1px;background:var(--blue);color:#ffffff; border-radius:100px;min-width:15px;height:15px;font-size:9.5px;font-weight:700; display:inline-flex;align-items:center;justify-content:center;padding:0 3px} .burger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:8px;margin-left:14px} .burger span{width:20px;height:1.7px;background:var(--ink);display:block;transition:.3s var(--ease)} .burger.on span:nth-child(1){transform:translateY(5.7px) rotate(45deg)} .burger.on span:nth-child(2){opacity:0} .burger.on span:nth-child(3){transform:translateY(-5.7px) rotate(-45deg)} .nav-mobile{display:none;list-style:none;border-top:1px solid var(--line);background:#ffffff} .nav-mobile.open{display:block} .nav-mobile li{border-bottom:1px solid var(--line)} .nav-mobile a{display:block;padding:16px 20px;font-size:15px;color:var(--ink);text-decoration:none} @media(max-width:1040px){ .nav-links{display:none} .burger{display:flex} .nav-icons{margin-left:auto} .nav{padding:0 20px;gap:0} } /* --- hero --- */ .hero{height:auto;display:block;color:inherit;overflow:visible; padding:10px 10px 0;background:#ffffff} .hero-stage{position:relative;width:100%; height:clamp(420px,74vh,820px);overflow:hidden; border:1px solid var(--line);background:var(--paper)} .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)} .hero-slide.on{opacity:1} .hero-slide .ph{position:absolute;inset:0;border:0} .hero-dots{position:absolute;right:22px;bottom:22px;z-index:4;display:flex;gap:8px} .hero-dot{width:24px;height:2px;background:rgba(4,15,34,.22);border:0;padding:0;cursor:pointer;transition:.4s var(--ease)} .hero-dot.on{background:var(--ink);width:38px} /* --- black headline band --- */ .hero-band{background:var(--ink);color:#ffffff; display:flex;align-items:center;justify-content:space-between;gap:40px; padding:26px 34px} .hero-band-text{min-width:0} .hero-eyebrow{font-size:10px;font-weight:600;letter-spacing:.19em;text-transform:uppercase; color:rgba(255,255,255,.62);margin-bottom:10px} .hero-title{font-size:clamp(24px,3.1vw,40px);font-weight:700;letter-spacing:-.025em; line-height:1.06;color:#ffffff;max-width:22ch} .hero-band-cta{display:flex;gap:12px;flex:0 0 auto} .btn-hero{display:inline-flex;align-items:center;gap:10px; background:#ffffff;color:var(--ink);border:1px solid #ffffff; border-radius:100px;padding:13px 24px;font-size:13.5px;font-weight:600; text-decoration:none;white-space:nowrap;transition:all .3s var(--ease)} .btn-hero.btn-arw::after{content:"→";display:inline-block;transition:transform .38s var(--ease)} .btn-hero.btn-arw:hover::after{transform:translateX(5px)} .btn-hero:hover{background:transparent;color:#ffffff;border-color:rgba(255,255,255,.5)} @media(max-width:900px){ .hero{padding:8px 8px 0} .hero-band{flex-direction:column;align-items:flex-start;gap:22px;padding:24px 20px} .hero-band-cta{width:100%} .btn-hero{flex:1;justify-content:center;padding:14px 16px} } @media(max-width:420px){ .hero-band-cta{flex-direction:column} } /* =================================================================== DETAILS THAT MAKE THE DIFFERENCE — masonry gallery =================================================================== */ .details{padding-bottom:var(--s6)} .masonry{ column-count:5; column-gap:14px; /* padding:0 14px; */ margin-top:var(--s2); } /* .masonry-container.masonry{ display: grid; grid-template-rows:158px; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); } */ /* 2. Modern enhancement for browsers supporting Grid Lanes */ @supports (display: grid-lanes) { .masonry-container { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; column-count: auto; /* Resets the fallback */ } .masonry-container .tile { margin-bottom: 0; /* Let the grid gap handle spacing */ } } /* 3. Modern enhancement for browsers still on the early draft syntax */ @supports (grid-template-rows: masonry) { .masonry-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-template-rows: masonry; gap: 16px; column-count: auto; } .masonry-container .tile { margin-bottom: 0; } } .masonry>*{break-inside:avoid;margin:0 0 14px;display:block} .masonry .tile h4{ font-family: var(--display); } .masonry .tile p{ font-family: var(--sans); font-size:13px; } .m-tile{position:relative;overflow:hidden;background:var(--paper);height: 100%; min-height: 160px;} .m-tile .ph{position:absolute;inset:0} /* .m-tile.r-short{padding-top:76%} .m-tile.r-medium{padding-top:108%} .m-tile.r-tall{padding-top:134%} .m-tile.r-xtall{padding-top:162%} */ .m-tile.r-short{ min-height: 180px } .m-tile.r-wide{ min-height: 210px } .m-tile.r-medium{ min-height:275px; } .m-tile.r-square{ min-height: 250px; } .m-tile.r-tall{ min-height: 320px; } .m-tile.r-xtall{ min-height: 380px; } .m-tile .ph::after{font-size:9px;padding:6px 9px;letter-spacing:.1em} .m-tile::before{content:'';position:absolute;inset:0;z-index:3; background:rgba(4,15,34,0);transition:background .45s var(--ease)} .m-tile:hover::before{background:rgba(4,15,34,.06)} .m-tile.r-tall.inline-image{ padding: 0px } .m-tile.inline-image .ph, .m-tile.bg-image .ph{ position:absolute; bottom: 0px; left: 0px; background: transparent; } .m-tile.inline-image .ph:before{ content: ''; position:absolute; left: 0px; right: 0px; width:100%; height: 100%; background: rgba(255,255,255, 0.3); } /* video tile */ .m-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4; width:58px;height:58px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.92);color:var(--ink); display:flex;align-items:center;justify-content:center; transition:transform .3s var(--ease),background .3s} .m-play:hover{transform:translate(-50%,-50%) scale(1.08);background:#ffffff} /* copy cards */ .m-card{background:var(--blue-deep);color:#ffffff;padding:26px 24px} .m-card h3{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:12px} .m-card p{font-size:13px;line-height:1.55;color:rgba(255,255,255,.78)} .m-card-olive{background:var(--olive-deep)} @media(max-width:1200px){.masonry{column-count:4}} @media(max-width:900px){ .masonry{column-count:3} } @media(max-width:620px){ .masonry{column-count:2;column-gap:10px;padding:0 10px} .masonry>*{margin-bottom:10px} .m-card{padding:20px 18px} .m-card h3{font-size:17px} } /* =================================================================== SELINNO CARE — three-up icon strip =================================================================== */ /* icons use --olive #5c752c */ .care{background:#ffffff;padding:var(--s6) 0} .care-head{margin-bottom:var(--s4)} .care-head .h1{margin-top:12px} .care-grid{display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .care-item{display:flex;align-items:center;gap:22px; padding:30px 34px;border-right:1px solid var(--line)} .care-item:last-child{border-right:0} .care-ico{width:52px;height:52px;flex:0 0 52px;color:var(--olive)} .care-text{min-width:0} .care-text h3{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.2;margin-bottom:9px} .care-text p{font-size:13px;color:var(--ink-2);line-height:1.5;padding-left:18px} @media(max-width:900px){ .care-grid{grid-template-columns:1fr} .care-item{border-right:0;border-bottom:1px solid var(--line);padding:24px 4px} .care-item:last-child{border-bottom:0} } /* =================================================================== 7 · REVIEWS — vertical auto-scroll column + copy panel (from v6_2) =================================================================== */ #reviews, .reviews { background: var(--paper); border-top: 4px solid var(--sky); } .rev-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center} .rev-scroll{ height:520px; overflow:hidden; position:relative; } @media (min-width: 1200px){ .rev-scroll{ padding-right:50px; } } .rev-track{ --wd-animation-duration: 15s; --wd-gap: 16px; display:flex; flex-direction:column; gap: var(--wd-gap); animation:revscroll var(--wd-animation-duration) linear infinite } .rev-track .marquee{ display:flex; flex-direction:column; gap: var(--wd-gap); } @media (max-width: 991px){ .rev-track{ --wd-animation-duration-md: 15s; animation:revscroll var(--wd-animation-duration-md) linear infinite } } @media (max-width: 767px){ .rev-track{ --wd-animation-duration-sm: 15s; animation:revscroll var(--wd-animation-duration-sm) linear infinite } } .rev-scroll:hover .rev-track{animation-play-state:paused} @keyframes revscroll{to{transform:translateY(-50%)}} @media(prefers-reduced-motion:reduce){ .rev-track{animation:none} .rev-scroll{height:auto;-webkit-mask-image:none;mask-image:none;overflow:visible} } .review{background:var(--ink);border:1px solid var(--ink);border-radius:14px;padding:22px} .stars{ color: #f5c518; letter-spacing: 3px; font-size: 18px; margin-bottom:10px } .review p{font-size:15px;line-height:1.55; color: var(--white);} .review .who span{color: var(--white);} .review .who .place{margin-top:14px;font-size:13px;color:var(--stone);font-weight:700} .review .who span{font-weight:400} .rev-copy .h1{margin:14px 0 16px} .rev-metric{display:flex;gap:40px;margin-top:var(--s3);flex-wrap:wrap} .rev-metric b{font-size:34px;font-weight:700;letter-spacing:-.02em;display:block;color:var(--blue);line-height:1} .rev-metric span{font-size:13px;color:var(--stone)} @media(max-width:960px){ .rev-grid{grid-template-columns:1fr;gap:var(--s4)} .rev-copy{order:-1} .rev-scroll{height:430px} } /* =================================================================== STORY — framed images =================================================================== */ .frame{background:#ffffff;border:1px solid var(--line);border-radius:14px;padding:10px; box-shadow:0 1px 2px rgba(4,15,34,.05);transition:box-shadow .4s var(--ease)} .frame:hover{box-shadow:0 10px 30px -14px rgba(4,15,34,.22)} .frame .ph{border-radius:8px;position:relative;inset:auto} .frame-lead{grid-row:span 2} .frame-lead .ph{aspect-ratio:3/4} .about-media .frame:not(.frame-lead) .ph{aspect-ratio:1/1} .frame figcaption{font-size:11.5px;color:var(--stone);letter-spacing:.01em; padding:10px 4px 3px;line-height:1.4} .about-media .ph:nth-child(1),.about-media .ph:nth-child(2),.about-media .ph:nth-child(3){aspect-ratio:auto;grid-row:auto} /* =================================================================== CTA BAND =================================================================== */ .cta-wrap{padding:var(--s5) 0} .cta-band{background:var(--blue);color:#ffffff;border-radius:20px; padding:clamp(44px,6vw,72px) clamp(24px,4vw,48px);text-align:center;overflow:hidden} .cta-band h2{font-size:clamp(28px,4.4vw,50px);font-weight:700;letter-spacing:-.025em; line-height:1.08;max-width:16ch;margin:0 auto 16px} .cta-band p{font-size:16px;color:#c5cace;margin-bottom:30px} .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .btn-cta-dark,.btn-cta-ghost{display:inline-flex;align-items:center;gap:10px; border-radius:100px;padding:15px 28px;font-size:14px;font-weight:700; text-decoration:none;white-space:nowrap;transition:all .3s var(--ease)} .btn-cta-dark{background:var(--ink);color:#ffffff;border:1px solid var(--ink)} .btn-cta-dark:hover{background:#040f22;border-color:#040f22;transform:translateY(-2px)} .btn-cta-dark.btn-arw::after{content:"→";display:inline-block;transition:transform .38s var(--ease)} .btn-cta-dark.btn-arw:hover::after{transform:translateX(5px)} .btn-cta-ghost{background:transparent;color:#ffffff;border:1px solid rgba(255,255,255,.5)} .btn-cta-ghost:hover{border-color:#ffffff;background:rgba(255,255,255,.08);transform:translateY(-2px)} .cta-perks{display:flex;gap:34px;justify-content:center;flex-wrap:wrap; margin-top:34px;font-size:13px;color:#c5cace} .cta-perks span{display:inline-flex;align-items:center;gap:9px} @media(max-width:560px){ .cta-perks{gap:14px 22px} .cta-row{flex-direction:column} .btn-cta-dark,.btn-cta-ghost{justify-content:center} } /* =================================================================== FAQ — help CTA =================================================================== */ .help-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--s4); flex-wrap:wrap;max-width:970px;margin-top:var(--s4); background:var(--blue-tint);border-radius:16px;padding:28px 32px} .help-text h3{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px} .help-text p{font-size:14.5px;color:var(--ink-2);line-height:1.55;max-width:48ch} .help-actions{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto} @media(max-width:620px){ .help-cta{padding:24px 22px} .help-actions{width:100%} .help-actions .btn{flex:1;justify-content:center} } /* =================================================================== SOCIAL — creator programme CTA =================================================================== */ .creator-cta{display:grid;grid-template-columns:1.5fr .8fr;gap:var(--s5);align-items:center; margin-top:var(--s4);background:var(--ink);color:#ffffff;border-radius:18px; padding:clamp(28px,3.6vw,44px)} .creator-cta .eyebrow{color:var(--olive-lt)} .creator-text h3{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.025em; line-height:1.1;margin:12px 0 12px;color:#ffffff} .creator-copy{font-size:15px;line-height:1.55;color:var(--mute-dk);max-width:58ch} .creator-list{list-style:none;margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 26px} .creator-list li{font-size:13.5px;color:#c5cace;display:flex;align-items:center;gap:9px} .creator-list li::before{content:'';width:5px;height:5px;border-radius:50%; background:var(--olive-lt);flex:0 0 5px} .creator-action .btn{background:#ffffff;color:var(--ink);border-color:#ffffff} .creator-action .btn:hover{background:transparent;color:#ffffff;border-color:rgba(255,255,255,.5)} .creator-action .small{color:var(--mute-dk)} @media(max-width:860px){ .creator-cta{grid-template-columns:1fr;gap:var(--s3)} } /* =================================================================== BUILDER PROJECTS — Apple-style horizontal scroller =================================================================== */ .projects{background:var(--paper-2);padding:var(--s6) 0} .proj-nav{display:flex;gap:10px;flex:0 0 auto} .proj-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line); background:#ffffff;color:var(--ink);display:flex;align-items:center;justify-content:center; cursor:pointer;transition:all .28s var(--ease)} .proj-btn:hover:not(:disabled){background:var(--ink);color:#ffffff;border-color:var(--ink)} .proj-btn:disabled{opacity:.3;cursor:default} .proj-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;padding:4px 0 var(--s3); scrollbar-width:none;-ms-overflow-style:none} .proj-rail::-webkit-scrollbar{display:none} .proj-pad{flex:0 0 max(20px,calc((100vw - var(--max)) / 2));} .proj-card{flex:0 0 clamp(250px,26vw,330px);scroll-snap-align:center; background:#ffffff;border-radius:18px;overflow:hidden; transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .proj-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px -26px rgba(0,0,0,.4)} .proj-card .ph{aspect-ratio:3/4;border-radius:0} .proj-meta{padding:22px} .proj-meta h3{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:7px} .proj-type{font-size:13.5px;color:var(--ink-2);line-height:1.45} .proj-spec{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase; color:var(--olive);font-weight:700;margin-top:12px} .proj-bar{height:2px;background:var(--line);margin-top:var(--s2);overflow:hidden} .proj-bar-fill{height:100%;background:var(--ink);width:22%; transition:width .25s var(--ease),transform .25s var(--ease)} @media(max-width:760px){ .proj-nav{display:none} .proj-card{flex:0 0 78vw} .proj-pad{flex:0 0 20px} } /* =================================================================== PRODUCT COLLECTIONS =================================================================== */ .coll-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:var(--s4)} .coll-tab{padding:11px 20px;border:1px solid var(--line);border-radius:999px; background:transparent;color:var(--ink);font-family:inherit;font-size:13.5px; font-weight:600;cursor:pointer;transition:all .25s var(--ease)} .coll-tab:hover{border-color:var(--ink)} .coll-tab.on{background:var(--ink);color:#ffffff;border-color:var(--ink)} .prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3) var(--s2)} @media(max-width:1040px){.prod-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:800px){.prod-grid{grid-template-columns:repeat(2,1fr)}} .card{position:relative} .card.hide{display:none} .card-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--paper-2)} .card-media .ph{position:absolute;inset:0;transition:opacity .45s var(--ease)} .card-media .ph.alt{opacity:0} .card:hover .card-media .ph.main{opacity:0} .card:hover .card-media .ph.alt{opacity:1} .card-badge{position:absolute;top:11px;left:11px;z-index:3;background:#ffffff; font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:700; padding:6px 11px;border-radius:999px} .quick{position:absolute;left:11px;right:11px;bottom:11px;z-index:3;opacity:0; transform:translateY(8px);transition:.32s var(--ease)} .card:hover .quick{opacity:1;transform:none} @media(hover:none){.quick{opacity:1;transform:none}} .card-body{padding-top:15px} .card-cat{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--stone);font-weight:700} .card-name{font-size:16px;font-weight:700;letter-spacing:-.02em;margin:6px 0 3px} .card-name a{color:inherit;text-decoration:none} .card-price{font-size:15px;color:var(--ink)} .card-price small{font-size:12px;color:var(--stone);font-weight:400} .swatches{display:flex;gap:7px;align-items:center;margin-top:11px} .sw{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.18); cursor:pointer;transition:.22s var(--ease);padding:0} .sw:hover,.sw.on{box-shadow:0 0 0 1.5px #ffffff,0 0 0 3px var(--ink)} .sw-more{font-size:11px;color:var(--stone);margin-left:3px} /* =================================================================== FOOTER WORDMARK =================================================================== */ footer{overflow:hidden} .foot-wordmark{ font-size:clamp(72px,19.5vw,300px); font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:#191d24;line-height:.78;text-align:center;white-space:nowrap; user-select:none;pointer-events:none;margin:var(--s4) auto 0;padding:0 10px; transform:translateY(14%)} /* =================================================================== TYPE - superseded by the V22 block at the end of this stylesheet =================================================================== */ body{font-family:var(--sans);letter-spacing:-.005em} h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.018em;line-height:1.06; font-variation-settings:"opsz" 96} .display{font-family:var(--display);font-weight:500;letter-spacing:-.022em;line-height:1.02; font-size:clamp(40px,6.2vw,88px);font-variation-settings:"opsz" 144} .h1{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.05; font-size:clamp(30px,4.1vw,56px);font-variation-settings:"opsz" 120} .h2{font-family:var(--display);font-weight:500;letter-spacing:-.016em;line-height:1.1; font-size:clamp(22px,2.4vw,32px);font-variation-settings:"opsz" 72} .h3,.card-name,.faq-q,.care-text h3,.step h3,.pillar h3, .creator-text h3,.help-text h3,.proj-meta h3,.m-card h3, .finder-result h3,.rev-copy h2,.about-quote{font-family:var(--display);font-weight:500;letter-spacing:-.016em} .hero-title{font-family:var(--display);font-weight:500;letter-spacing:-.022em;line-height:1.05; font-variation-settings:"opsz" 144} .cta-band h2{font-family:var(--display);font-weight:500;letter-spacing:-.02em} .foot-wordmark{font-family:var(--display);font-weight:500} .logo{font-family:var(--sans);font-weight:500} /* numerals stay in the sans — serif figures read decorative at small sizes */ .num,.rev-metric b,.rev-stats div strong,.about-stats div strong,.card-price, .bundle-price,.fr-row,.proj-spec,.qlabel,.eyebrow,.small,.card-cat{font-family:var(--sans)} .lede{font-family:var(--sans);font-weight:400;color:var(--ink-2);line-height:1.6} .eyebrow{font-weight:600;letter-spacing:.2em} /* =================================================================== CTA BUTTONS — sharp, generous, sliding arrow =================================================================== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:11px; font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.005em; padding:17px 32px;border-radius:var(--btn-r); background:var(--blue);border:1px solid var(--blue);color:#ffffff; text-decoration:none;cursor:pointer;white-space:nowrap; transition:background .38s var(--ease),border-color .38s var(--ease), color .38s var(--ease),transform .38s var(--ease)} .btn:hover{background:var(--blue-deep);border-color:var(--blue-deep);transform:translateY(-2px)} .btn:active{transform:translateY(0)} /* arrow only on navigational CTAs, never on add-to-cart or submit */ .btn-arw::after{content:"→";display:inline-block;transition:transform .38s var(--ease)} .btn-arw:hover::after{transform:translateX(5px)} .btn-sm{padding:12px 22px;font-size:13px} .btn-block{width:100%} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)} .btn-ghost:hover{background:var(--ink);color:#ffffff;border-color:var(--ink)} .btn-light{background:#ffffff;color:var(--ink);border-color:#ffffff} .btn-light:hover{background:transparent;color:#ffffff;border-color:rgba(255,255,255,.6)} .btn-dark{background:var(--ink);border-color:var(--ink);color:#ffffff} .btn-dark:hover{background:#0e1420;border-color:#0e1420} /* everything else follows the same geometry */ .coll-tab,.opt,.soc,.card-badge,.btn-shop,.foot-news input,.foot-news .btn, .field input,.field select,.field textarea,.finder-result,.cta-band, .help-cta,.creator-cta,.m-card,.proj-card,.hw-card,.hw-stage, .frame,.tag,.cart-count{border-radius:var(--btn-r)} .sw{border-radius:var(--btn-r)} .btn-shop{padding:17px 24px;font-weight:600;font-family:var(--sans);letter-spacing:.005em} .btn-shop:hover{transform:translateY(-2px)} /* ---- geometry sweep: nothing pill-shaped, nothing over-rounded ---- */ .cart-btn,.cart-count,.hw-stage,.hw-watch,.hw-card,.opt,.finder-result,.btn-shop, .soc,.foot-news input,.nav-icons,.frame,.creator-cta,.proj-card, .coll-tab,.card-badge,.btn-hero,.btn-cta-dark,.btn-cta-ghost,.help-cta, .cta-band,.m-card,.tag,.sw,.m-play,.proj-btn,.foot-signup,.field input, .field select,.field textarea,.form{border-radius:var(--btn-r)} .m-play{border-radius:50%} .sym-mark,.hw-ico{border-radius:var(--btn-r)} /* =================================================================== DISPLAY TYPE - superseded by the V22 block at the end of this stylesheet =================================================================== */ h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.005em;line-height:1.08; font-variation-settings:normal} .display{font-family:var(--display);font-weight:700;letter-spacing:-.008em;line-height:1.04; font-size:clamp(38px,5.9vw,84px);font-variation-settings:normal} .h1{font-family:var(--display);font-weight:700;letter-spacing:-.006em;line-height:1.07; font-size:clamp(29px,3.9vw,53px);font-variation-settings:normal} .h2{font-family:var(--display);font-weight:700;letter-spacing:-.004em;line-height:1.12; font-size:clamp(21px,2.3vw,31px);font-variation-settings:normal} .hero-title{font-family:var(--display);font-weight:700;letter-spacing:-.008em;line-height:1.07; font-variation-settings:normal} .cta-band h2{font-family:var(--display);font-weight:700;letter-spacing:-.006em} .h3,.card-name,.faq-q,.care-text h3,.step h3,.pillar h3, .creator-text h3,.help-text h3,.proj-meta h3,.m-card h3, .finder-result h3,.rev-copy h2{ font-family:var(--display);font-weight:700;letter-spacing:-.004em;font-variation-settings:normal} /* pull quote reads better at regular weight in a geometric face */ .about-quote{font-family:var(--display);font-weight:400;letter-spacing:0;line-height:1.4} /* brand marks - wide tracking suits the caps */ .logo{font-family:var(--display);font-weight:600;letter-spacing:.34em} .foot-wordmark{font-family:var(--display);font-weight:700;letter-spacing:.08em} /* large numerals take the display face; small ones stay in the body face */ .num,.rev-metric b,.rev-stats div strong,.about-stats div strong{ font-family:var(--display);font-weight:700;letter-spacing:-.01em} /* buttons and labels carry the brand voice, slightly tracked out */ .btn,.btn-hero,.btn-cta-dark,.btn-cta-ghost,.btn-shop,.coll-tab,.foot-signup{ font-family:var(--display);font-weight:600;letter-spacing:.02em} .eyebrow{font-family:var(--display);font-weight:600;letter-spacing:.22em} .qlabel,.card-cat,.foot-col h4,.card-badge,.proj-spec,.hw-num{ font-family:var(--display);font-weight:600} /* everything small and read-heavy stays in the body face */ .lede,.small,p,li,input,select,textarea,.card-price,.bundle-price, .fr-row,.rev p,.review p,.step p,.care-text p,.creator-copy, .help-text p,.trade-list li,.faq-a p{font-family:var(--sans)} /* =================================================================== V26 - white ground, Space Grotesk + Instrument Sans + Space Mono =================================================================== */ body{background:var(--paper)} header,.nav-mobile,.hero,.care,.about,.sticky-bar{background:var(--paper)} .frame,.form,.proj-card,.proj-btn,.soc,.card-badge{background:var(--white)} .projects,.social{background:var(--paper-2)} .card-media,.m-tile,.reel-tile{background:var(--paper-2)} /* --- sky: the 5%. accent only, never a fill behind small text --- */ .nav-links a::after{background:var(--sky);height:1.5px} .hero-dot.on{background:var(--sky)} .cart-count{background:var(--sky);color:var(--ink)} .field input:focus,.field select:focus,.field textarea:focus, .foot-news input:focus{border-color:var(--sky)} .help-cta{background:var(--sky-tint)} .creator-list li::before{background:var(--sky)} .hw-num{color:var(--sky)} .hw-ico{color:var(--sky);background:rgba(106,166,213,.10);border-color:rgba(106,166,213,.24)} .hw-card.on .hw-ico{background:rgba(106,166,213,.18)} .hw-card.on{border-color:var(--sky); box-shadow:0 0 0 1px rgba(106,166,213,.30),0 0 26px -8px rgba(106,166,213,.34)} .cta-band{background:var(--ink)} .btn-cta-dark{background:var(--sky);border-color:var(--sky);color:var(--ink)} .btn-cta-dark:hover{background:var(--sky-deep);border-color:var(--sky-deep);color:var(--ink)} .m-card{background:var(--ink)} .m-card-olive{background:var(--olive-deep)} .proj-bar-fill{background:var(--sky)} /* --- type --- */ h1,h2,h3,.display,.h1,.h2,.hero-title,.cta-band h2, .h3,.card-name,.faq-q,.care-text h3,.step h3,.pillar h3, .creator-text h3,.help-text h3,.proj-meta h3,.m-card h3, .finder-result h3,.rev-copy h2{ font-family:var(--display);font-weight:500;letter-spacing:-.02em; font-variation-settings:normal} .display{font-size:clamp(40px,6.2vw,88px);line-height:1.02} .h1{font-size:clamp(30px,4.1vw,56px);line-height:1.05} .h2{font-size:clamp(22px,2.4vw,32px);line-height:1.1} .hero-title{line-height:1.04} .about-quote{font-family:var(--display);font-weight:400;letter-spacing:-.012em; line-height:1.4;border-left-color:var(--olive)} .logo{font-family:var(--display);font-weight:500;letter-spacing:.30em;padding-left:.30em} .foot-wordmark{font-family:var(--display);font-weight:500;letter-spacing:.06em;color:#191d24} .num,.rev-metric b,.rev-stats div strong,.about-stats div strong{ font-family:var(--display);font-weight:500;letter-spacing:-.02em;color:var(--ink)} .btn,.btn-hero,.btn-cta-dark,.btn-cta-ghost,.btn-shop,.coll-tab,.foot-signup,.opt{ font-family:var(--sans);font-weight:600;letter-spacing:.01em} .eyebrow{font-family:var(--sans);font-weight:700;letter-spacing:.2em;font-size:10.5px} .qlabel,.card-cat,.foot-col h4,.card-badge,.proj-spec,.hw-num{ font-family:var(--sans);font-weight:700} body,.lede,.small,p,li,input,select,textarea{font-family:var(--sans)} /* --- marquee strip divider --- */ .strip{background:var(--ink);color:var(--white);overflow:hidden;position:relative} .strip-track{display:flex;width:max-content;animation:marquee 46s linear infinite} .strip:hover .strip-track{animation-play-state:paused} .strip-set{display:flex;align-items:center} .strip-set span{font-family:var(--display);font-weight:500; font-size:clamp(19px,3.2vw,42px);letter-spacing:.01em;text-transform:uppercase; white-space:nowrap;padding:20px 0;display:flex;align-items:center} .strip-set span::after{content:'';width:9px;height:9px;border-radius:50%; background:var(--sky);margin:0 32px;flex:0 0 9px} .strip-olive .strip-set span::after{background:var(--olive-lt)} @media(prefers-reduced-motion:reduce){.strip-track{animation:none;width:auto}} /* --- statement block --- */ .stmt{background:var(--paper);padding:var(--s7) 0} .stmt-inner{max-width:1120px;margin:0 auto;padding:0 var(--s4)} .stmt .eyebrow{margin-bottom:var(--s3)} .stmt h2{font-family:var(--display);font-weight:400; font-size:clamp(27px,4.4vw,60px);line-height:1.12;letter-spacing:-.025em;max-width:19ch} .stmt h2 em{font-style:normal;color:var(--olive)} @media(max-width:700px){.stmt{padding:var(--s6) 0}.stmt-inner{padding:0 20px}} /* --- looping video reel --- */ .reel{padding:0 10px;background:var(--paper)} .reel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .reel-tile{position:relative;aspect-ratio:9/13;overflow:hidden} .reel-tile .ph{position:absolute;inset:0} .reel-tag{position:absolute;left:12px;top:12px;z-index:3;background:var(--ink); color:var(--white);font-family:var(--sans);font-size:9.5px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;padding:6px 10px} @media(max-width:700px){ .reel-grid{grid-template-columns:1fr 1fr} .reel-tile:nth-child(3){display:none} } /* --- softer ink line marks --- */ .care-ico{stroke-width:1.1} /* --- V26: Instrument Sans body, Space Mono for every technical string --- */ body,.lede,.small,p,li,input,select,textarea, .review p,.step p,.care-text p,.creator-copy,.help-text p, .trade-list li,.faq-a p,.proj-type{font-family:var(--sans);letter-spacing:0} .btn,.btn-hero,.btn-cta-dark,.btn-cta-ghost,.btn-shop,.coll-tab,.foot-signup,.opt{ font-family:var(--sans);font-weight:600;letter-spacing:.005em} .eyebrow,.qlabel,.card-cat,.card-badge,.proj-spec,.hw-num,.foot-col h4, .reel-tag,.card-price,.card-price small,.bundle-price,.fr-row, .announce-set span,.stars{font-family:var(--mono);font-weight:400} .eyebrow{font-weight:700;letter-spacing:.16em;font-size:10px} .qlabel,.card-cat,.proj-spec,.hw-num,.foot-col h4,.card-badge,.reel-tag{ font-weight:700;letter-spacing:.13em} .card-price{font-weight:700;letter-spacing:.01em;font-size:14px} .fr-row{letter-spacing:.01em;font-size:13px} .announce-set span{font-size:10.5px;letter-spacing:.08em} /* --- V27: Spec-Selinno band moves from olive to sky. White text fails on #6aa6d5 at 2.6:1, so the band flips to ink type. --- */ .builder{background:var(--sky);color:var(--ink)} .builder h2{color:var(--ink)} .builder .eyebrow{color:rgba(4,15,34,.62)} .builder .lede{color:rgba(4,15,34,.78)} .builder-list li{border-bottom-color:rgba(4,15,34,.20)} .builder-list li::before{color:rgba(4,15,34,.45)} .builder .form{background:var(--white);color:var(--ink)} /* --- V28: trade-band CTA takes ink, not olive --- */ .btn-trade{background:var(--ink);border-color:var(--ink);color:var(--white)} .btn-trade:hover{background:#0b1220;border-color:#0b1220;color:var(--white)} /* --- V29 --------------------------------------------------------- */ /* prices take olive; sky fails contrast at this size, ink is the body colour */ .card-price{color:var(--olive);font-weight:700} .card-price small{color:var(--stone);font-weight:400} .bundle-price{color:var(--olive)} /* review stars in muted yellow */ .stars{color:#b3922f;letter-spacing:3px} /* Three steps to a better entrance - light, hairline, no card chrome */ .how{background:var(--paper-2);color:var(--ink); border-top: 4px solid var(--olive);} .how .eyebrow{color:var(--ink)} .how .lede{color:var(--ink-2)} .hw-grid{grid-template-columns:1.04fr .96fr;gap:40px} .hw-stage{background:var(--paper-2);/*border:1px solid var(--line);*/border-radius:0} .hw-screen{color:var(--stone)} .hw-watch{background:var(--white);border:1px solid var(--line);color:var(--ink);border-radius:0} .hw-watch i{background:#b3922f;box-shadow:none;animation:none} .hw-steps{gap:0;border-top:1px solid var(--line)} .hw-card{background:transparent;border:0;border-bottom:1px solid var(--line); border-left:2px solid transparent;border-radius:0; padding:24px 0 24px 20px;gap:18px;align-items:flex-start;box-shadow:none; justify-content:flex-start;} .hw-card:hover{background:transparent;border-left-color:var(--line)} .hw-card.on{background:transparent;border-left-color:var(--ink);box-shadow:none} .hw-ico{flex:0 0 22px;width:22px;height:22px;background:none;border:0;border-radius:0; color:var(--olive);margin-top:2px} .hw-card.on .hw-ico{background:none;color:var(--olive)} .hw-num{color:var(--stone);font-size:11px;letter-spacing:.16em;margin-bottom:6px} .hw-card.on .hw-num{color:var(--ink)} .hw-title{color:var(--ink);font-size:18px;font-weight:500} .hw-desc>span{color:var(--ink-2)} @media(max-width:960px){.hw-grid{grid-template-columns:1fr;gap:28px}} /* --- V30 --------------------------------------------------------- */ /* trade band heading in white; supporting copy stays ink so it stays readable */ .builder h2{color:var(--white)} /* Selinno Care - stacked spec-sheet columns, indexed, larger marks */ .care{border-top:1px solid var(--line)} .care-head .h1{max-width:15ch} .care-grid{counter-reset:care} .care-item{position:relative;flex-direction:column;align-items:flex-start;gap:20px; padding:28px 30px;counter-increment:care} .care-item:first-child{padding-left:0} .care-item:last-child{padding-right:0} /* .care-item::before{content:counter(care,decimal-leading-zero); font-family:var(--mono);font-size:11px;font-weight:700; letter-spacing:.18em;color:var(--stone);line-height:1} */ .care-ico{width:64px;height:64px;flex:0 0 64px;color:var(--olive);stroke-width:1} .care-text h3{font-size:19px;font-weight:500;letter-spacing:-.015em;margin-bottom:10px} .care-text p{padding-left:0;font-size:14px;line-height:1.6;max-width:32ch} @media(max-width:900px){ .care-item{padding:30px 0 34px;border-right:0} .care-item:first-child{padding-top:36px} .care-ico{width:52px;height:52px;flex:0 0 52px} } /* --- V31: announcement rail + navigation ------------------------- */ .announce{display:flex;align-items:stretch;background: #040f22;} .announce::before{display:none} .announce::after{width:56px;background:linear-gradient(to left,var(--ink),transparent)} .announce-lead{display:flex;align-items:center;gap:8px;flex:0 0 auto; background:var(--sky);color:var(--ink);font-family:var(--mono);font-weight:700; font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:12px 16px; white-space:nowrap} .announce-lead i{width:5px;height:5px;border-radius:50%;background:var(--ink); flex:0 0 5px;animation:pulse 2.4s var(--ease) infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} @media(prefers-reduced-motion:reduce){.announce-lead i{animation:none}} .announce-rail{flex:1 1 auto;overflow:hidden;position:relative} .announce-set span{font-size:11px;letter-spacing:.09em;color:#ffffff; text-transform:uppercase;padding:12px 0} .announce-set span::after{content:'/';width:auto;height:auto;border-radius:0; background:none;color:var(--sky);margin:0 20px;font-weight:400;opacity:.85} @media(max-width:700px){.announce-lead{display:none}} /* --- navigation --- */ header{border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)} header.compact{box-shadow:0 1px 18px -10px rgba(4,15,34,.5)} .nav{height:68px;transition:height .3s var(--ease)} header.compact .nav{height:54px} .logo{font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:.34em} .nav-links{gap:34px;margin-left:12px} .nav-links a{font-family:var(--mono);font-weight:700;font-size:10.5px; letter-spacing:.15em;text-transform:uppercase;padding:6px 0} .nav-links a::after{height:2px;background:var(--sky)} .nav-cta{margin-left:auto;display:inline-flex;align-items:center; font-family:var(--mono);font-weight:700;font-size:10.5px;letter-spacing:.15em; text-transform:uppercase;text-decoration:none;color:#ffffff;background:var(--ink); padding:11px 18px;border:1px solid var(--ink);transition:background .2s var(--ease)} .nav-cta:hover{background:var(--sky);border-color:var(--sky);color:var(--ink)} .nav-icons{margin-left:16px;background:none;border-radius:0;padding:0;gap:0; border-left:1px solid var(--line);padding-left:12px} .ic-btn{color:var(--ink);width:34px;height:34px;opacity:1} .ic-btn:hover{color:var(--sky)} .cart-count{background:var(--sky);color:var(--ink);top:0;right:2px} .nav-mobile a{font-family:var(--mono);font-weight:700;font-size:11px; letter-spacing:.14em;text-transform:uppercase} @media(max-width:1040px){.nav-cta{display:none}.nav-icons{margin-left:auto}} /* --- V32: header and announcement bar back to the body face ------ */ .announce-lead,.announce-set span, .nav-links a,.nav-cta,.nav-mobile a{font-family:var(--sans)} .announce-lead{font-weight:700;font-size:10.5px;letter-spacing:.14em} .announce-set span{font-size:11.5px;letter-spacing:.07em} .nav-links a{font-weight:600;font-size:12px;letter-spacing:.12em} .nav-cta{font-weight:600;font-size:12px;letter-spacing:.1em} .nav-mobile a{font-weight:600;font-size:12.5px;letter-spacing:.12em} .logo{font-family:var(--sans);font-weight:600} /* =================================================================== PRODUCT PAGE — gallery, info panel, spec tabs, breadcrumb New page template, same tokens/components as the homepage (v32). =================================================================== */ .crumb{border-bottom:1px solid var(--line);background:var(--paper)} .crumb-row{display:flex;align-items:center;gap:8px;padding:14px 0;font-size:12.5px;color:var(--stone)} .crumb-row a{color:var(--stone);text-decoration:none} .crumb-row a:hover{color:var(--ink)} .crumb-row span.sep{opacity:.5} .crumb-row span.cur{color:var(--ink);font-weight:600} .pdp{padding-top:var(--s5)} .pdp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start} @media(max-width:960px){.pdp-grid{grid-template-columns:1fr;gap:28px}} .pdp-gallery{position:sticky;top:80px} @media(max-width:960px){.pdp-gallery{position:static}} .pdp-main{aspect-ratio:1/1;border:1px solid var(--line);margin-bottom:12px} .pdp-main .ph{position:relative;inset:auto;width:100%;height:100%} .pdp-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} .pdp-thumb{aspect-ratio:1/1;border:1px solid var(--line);cursor:pointer;padding:0;background:none;position:relative;overflow:hidden} .pdp-thumb.on{border-color:var(--ink);border-width:2px} .pdp-thumb .ph{position:absolute;inset:0} .pdp-thumb .ph::after{font-size:8px;padding:4px 6px} .pdp-info .eyebrow{margin-bottom:14px} .pdp-info h1{font-size:clamp(28px,3.2vw,42px)} .pdp-rating{display:flex;align-items:center;gap:10px;margin:14px 0} .pdp-rating .stars{color:#b3922f;font-size:15px;letter-spacing:2px;font-family:var(--mono)} .pdp-rating a{font-size:13px;color:var(--stone);text-decoration:none;border-bottom:1px solid var(--line)} .pdp-rating a:hover{color:var(--ink);border-color:var(--ink)} .pdp-price{font-family:var(--display);font-weight:700;font-size:32px;letter-spacing:-.02em;color:var(--olive);margin:16px 0 6px} .pdp-price small{font-family:var(--sans);font-weight:400;font-size:13px;color:var(--stone);margin-left:8px} .pdp-short{max-width:52ch;margin-bottom:24px} .pdp-opt{margin-bottom:22px} .pdp-opt-label{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);margin-bottom:12px} .pdp-opt-label b{color:var(--ink);font-weight:700;text-transform:none;letter-spacing:0;font-size:13px} .pdp-swatches{display:flex;gap:10px} .pdp-sw{width:36px;height:36px;border-radius:50%;border:1px solid rgba(0,0,0,.18);cursor:pointer;padding:0;position:relative;transition:.2s var(--ease)} .pdp-sw.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)} .pdp-sw[data-stock="low"]::after{content:'';position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:var(--olive);border:1.5px solid #fff} .pdp-ral-note{font-size:11.5px;color:var(--stone);margin-top:10px} .pdp-ral-note b{color:var(--ink-2);font-weight:600} .ar-block{margin-bottom:22px} .ar-trigger{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--ink);background:transparent; color:var(--ink);font-family:var(--sans);font-weight:600;font-size:13.5px;padding:12px 18px;cursor:pointer; transition:.22s var(--ease)} .ar-trigger:hover{background:var(--ink);color:#fff} .ar-badge{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;background:var(--olive); color:#fff;padding:2px 6px;border-radius:3px;margin-left:2px} .ar-copy{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:9px;max-width:44ch} .ar-pending{display:none;font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:12px;background:var(--paper-2); border:1px solid var(--line);border-left:3px solid var(--olive);padding:14px 16px;max-width:50ch} .ar-pending.show{display:block} .ar-pending strong{color:var(--ink);display:block;margin-bottom:3px} .ar-pending a{color:var(--ink);text-decoration:underline} .pdp-delivery{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);margin:-8px 0 22px} .pdp-delivery svg{flex:0 0 auto;color:var(--olive)} .pdp-delivery b{color:var(--ink);font-weight:700} .pdp-buy{display:flex;gap:12px;margin-bottom:22px} .pdp-qty{display:flex;align-items:center;border:1px solid var(--line);flex:0 0 auto} .pdp-qty button{width:44px;height:56px;border:0;background:none;font-size:17px;cursor:pointer;color:var(--ink);font-family:var(--sans)} .pdp-qty button:hover{background:var(--paper-2)} .pdp-qty span{width:34px;text-align:center;font-size:14px;font-weight:600} .pdp-buy .btn-shop{margin-top:0;flex:1} .pdp-trust{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin-bottom:22px} .pdp-trust div{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-2);line-height:1.4} .pdp-trust svg{color:var(--olive)} .pdp-meta{font-size:12px;color:var(--stone);display:flex;gap:18px;flex-wrap:wrap} .pdp-meta b{color:var(--ink-2);font-weight:600} /* --- description / spec tabs --- */ .pdp-tabs{margin-top:var(--s6)} .pdp-tab-nav{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:var(--s3);overflow-x:auto} .pdp-tab-btn{background:none;border:0;border-bottom:2px solid transparent;padding:14px 22px 14px 0;margin-right:26px; font-family:var(--sans);font-weight:600;font-size:13.5px;letter-spacing:.02em;color:var(--stone);cursor:pointer;white-space:nowrap;transition:.25s var(--ease)} .pdp-tab-btn:hover{color:var(--ink)} .pdp-tab-btn.on{color:var(--ink);border-bottom-color:var(--olive)} .pdp-tab-panel{display:none} .pdp-tab-panel.on{display:block} .pdp-feat-list{list-style:none;margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;max-width:760px} .pdp-feat-list li{font-size:14px;color:var(--ink-2);display:flex;gap:10px;align-items:flex-start;line-height:1.5} .pdp-feat-list li svg{flex:0 0 auto;margin-top:3px;color:var(--olive)} @media(max-width:620px){.pdp-feat-list{grid-template-columns:1fr}} .pdp-spec-table{max-width:640px;border-top:1px solid var(--line)} .pdp-spec-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px} .pdp-spec-row span:first-child{color:var(--stone)} .spec-tbc{color:var(--olive) !important;font-weight:600} .spec-tbc em{color:var(--stone);font-weight:400;font-style:normal;font-size:12px;margin-left:4px} .pdp-spec-row span:last-child{text-align:right;font-weight:600} .pdp-box-list{list-style:none;margin-top:6px;max-width:520px} .pdp-box-list li{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;display:flex;gap:12px;align-items:center} .pdp-box-list li svg{color:var(--olive);flex:0 0 auto} .pdp-note{background:var(--sky-tint);border-radius:var(--btn-r);padding:16px 18px;font-size:12.5px;color:var(--ink-2);max-width:640px;margin-top:20px;line-height:1.6} /* --- related products reuse .prod-grid / .card, only 2-up --- */ .related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3) var(--s2)} @media(max-width:960px){.related-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.related-grid{grid-template-columns:1fr}} /* =================================================================== FEATURE STRIP — fulfilment icons, replaces the generic brand-pillar "Selinno Care" block. This page is post-decision: no need to re-sell the brand, only to answer "what happens when I buy this." =================================================================== */ .feat-strip{background:var(--ink);color:#fff;padding:34px 0} .feat-strip-row{display:grid;grid-template-columns:repeat(6,1fr);gap:0} .feat-strip-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px; padding:6px 14px;border-left:1px solid #1d232c} .feat-strip-item:first-child{border-left:0} .feat-strip-item svg{color:var(--sky)} .feat-strip-item span{font-size:11.5px;line-height:1.35;color:#c5cace} @media(max-width:960px){.feat-strip-row{grid-template-columns:repeat(3,1fr);row-gap:22px} .feat-strip-item:nth-child(4){border-left:0}} @media(max-width:560px){.feat-strip-row{grid-template-columns:repeat(2,1fr)} .feat-strip-item:nth-child(3){border-left:0}} /* =================================================================== PURCHASE JOURNEY — what happens after you click buy =================================================================== */ .journey{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .journey-track{position:relative;margin-top:var(--s4)} .journey-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;position:relative} .journey-step{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;background:var(--paper); border:1px solid var(--line);padding:22px 18px 20px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .journey-step:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(20,20,20,.07);border-color:var(--olive)} .journey-icon-wrap{position:relative;width:46px;height:46px} .journey-icon{width:46px;height:46px;border-radius:50%;background:#eef1e6;border:1.5px solid var(--olive); color:var(--olive);display:flex;align-items:center;justify-content:center} .journey-step:nth-child(1) .journey-icon{background:var(--ink);border-color:var(--ink);color:#fff} .journey-num-chip{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;background:var(--ink); color:#fff;font-family:var(--mono);font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center; border:2px solid var(--paper)} .journey-step h3{font-size:14.5px;font-weight:700;letter-spacing:-.01em;line-height:1.25} .journey-step p{font-size:12.5px;color:var(--ink-2);line-height:1.5} .journey-tag{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--olive)} .journey-trust{margin-top:var(--s5);display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--paper); border:1px solid var(--line);padding:24px 26px} .journey-trust-avatar{width:50px;height:50px;border-radius:50%;background:var(--ink);color:#fff;flex:none; display:flex;align-items:center;justify-content:center} .journey-trust-body{flex:1;min-width:260px} .journey-trust-quote{font-size:14.5px;font-weight:600;line-height:1.4;color:var(--ink)} .journey-trust-quote::before{content:'\201C';color:var(--olive)} .journey-trust-quote::after{content:'\201D';color:var(--olive)} .journey-trust-who{font-size:11.5px;color:var(--ink-2);margin-top:5px} .journey-trust-note{font-size:12px;color:var(--ink-2);margin-top:9px;line-height:1.5;max-width:60ch} .journey-trust-cta{flex:none;display:flex;gap:10px;flex-wrap:wrap} @media(max-width:960px){ .journey-grid{grid-template-columns:1fr 1fr 1fr;row-gap:20px} } @media(max-width:620px){.journey-grid{grid-template-columns:1fr 1fr}} /* =================================================================== FEATURE DEEP-DIVE — alternating image/text, real product copy =================================================================== */ .feat-deep-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center; padding:var(--s5) 0;border-bottom:1px solid var(--line)} .feat-deep-row:last-child{border-bottom:0} .feat-deep-row.rev .feat-deep-media{order:2} .feat-deep-media .ph{aspect-ratio:4/3} .feat-deep-text .eyebrow{margin-bottom:14px} .feat-deep-text h3{font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.02em;margin-bottom:14px} .feat-deep-text p{font-size:15px;color:var(--ink-2);line-height:1.6;max-width:48ch} @media(max-width:860px){ .feat-deep-row{grid-template-columns:1fr;gap:22px;padding:var(--s4) 0} .feat-deep-row.rev .feat-deep-media{order:0} } /* =================================================================== COMPARE SIZES =================================================================== */ .compare-table{width:100%;border-collapse:collapse;margin-top:var(--s3);font-size:13.5px} .compare-table th,.compare-table td{border:1px solid var(--line);padding:14px 16px;text-align:left} .compare-table thead th{background:var(--paper-2);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--stone)} .compare-table thead th.cur{background:var(--ink);color:#fff} .compare-table tbody th{font-weight:600;color:var(--ink-2);background:var(--paper-2);width:180px} .compare-table td.cur{font-weight:700;background:var(--olive-tint)} .compare-table td.tbc{color:var(--stone);font-style:italic} .compare-wrap{overflow-x:auto} /* =================================================================== INSTALLATION RESOURCE + WHAT'S IN THE BOX =================================================================== */ .install-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start} @media(max-width:860px){.install-grid{grid-template-columns:1fr;gap:var(--s4)}} .install-card{border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:16px} .install-card h3{font-size:17px;font-weight:700;letter-spacing:-.01em} .install-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)} .install-row:first-of-type{border-top:0} .install-ico{width:38px;height:38px;flex:0 0 38px;border-radius:var(--btn-r);background:var(--paper-2); display:flex;align-items:center;justify-content:center;color:var(--olive)} .install-row div{min-width:0} .install-row b{display:block;font-size:13.5px;font-weight:600} .install-row span{font-size:12px;color:var(--stone)} .install-row a.btn-ghost{margin-left:auto;flex:0 0 auto} .box-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .box-grid .ph{aspect-ratio:1/1} .box-grid .ph:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:1/1} @media(max-width:520px){.box-grid{grid-template-columns:repeat(2,1fr)}.box-grid .ph:first-child{grid-column:span 2}} /* =================================================================== UPDATED — differentiate the three sections between "Simple by design" and the letterbox finder using ONLY colours already live elsewhere on the page — no new tints. The device is a chapter rhythm: alternating white/light-grey backgrounds (--paper / --paper-2, both already used sitewide) so neighbouring sections never share a background, plus a coloured top-rule pulled straight from each section's own existing accent (olive already marks stars and eyebrows; sky already colours the finder's own CTA; ink is the core brand colour used in the header and hero). The rule reads like a tab on a chapter divider rather than a colour wash. =================================================================== */ #how{background:var(--paper-2);border-top:4px solid var(--olive)} #reviews{background:var(--paper);border-top:4px solid var(--sky)} #finder{background:var(--paper-2);border-top:4px solid var(--ink)} /* =================================================================== UPDATED — review cards: black container, white wording, bigger yellow stars. Reusing var(--ink) for the container rather than a pure #000 keeps it consistent with the rest of the page's "black". =================================================================== */ .review{background:var(--ink);border-color:var(--ink)} .review p{color:#ffffff} .review .who{color:#ffffff} .review .who span{color:rgba(255,255,255,.7)} .review .stars{color:#f5c518;font-size:18px} /* The scroll track has a fade mask at its top/bottom edge for the old auto-scrolling marquee effect — on solid black cards that reads as a washed-out gradient rather than a clean edge, so it's turned off here. */ .rev-scroll{-webkit-mask-image:none;mask-image:none} /* UPDATED — make the review wording pop: each card now pops up into view on its own (staggered, instead of the whole block appearing at once), and the quote itself gets an oversized decorative mark plus the same display face used for the site's other pull-quotes, so the words carry more weight than a plain paragraph. */ .review{position:relative;overflow:hidden;transition:opacity .7s var(--ease),transform .7s var(--ease)} .review:nth-child(1){transition-delay:0s} .review:nth-child(2){transition-delay:.1s} .review:nth-child(3){transition-delay:.2s} .review:nth-child(4){transition-delay:.3s} .review:nth-child(5){transition-delay:.4s} .review::before{content:'\201C';position:absolute;top:-18px;right:16px;font-family:var(--display); font-size:88px;font-weight:700;line-height:1;color:#f5c518;opacity:.16;pointer-events:none} .review p{font-family:var(--display);font-weight:500;font-size:17px;line-height:1.42; letter-spacing:-.005em;position:relative;z-index:1} /* UPDATED — bringing the motion back, but faster and with a bit of sparkle so it actually catches the eye instead of quietly drifting: quicker scroll (20s vs the original 30s), no fade mask (a soft fade to white behind a black card just looked like a smudge — a clean hard edge reads better), and each card gets a slow yellow glow pulse so the moving column has something alive happening even between scroll ticks. Hover still pauses it for reading (rule already above). */ .rev-track{animation:revscroll 20s linear infinite} @keyframes revglow{0%,100%{box-shadow:0 0 0 rgba(245,197,24,0)}50%{box-shadow:0 0 26px rgba(245,197,24,.22)}} .review{animation:revglow 3.4s ease-in-out infinite} .review:nth-child(1){animation-delay:0s} .review:nth-child(2){animation-delay:.5s} .review:nth-child(3){animation-delay:1s} .review:nth-child(4){animation-delay:1.5s} .review:nth-child(5){animation-delay:2s} @media(prefers-reduced-motion:reduce){.review{animation:none}} /* ---------- 13 · FOOTER — koru/Maori pattern top border ---------- Your existing NZ-heritage koru + zigzag mark (currently only living on the footer artwork elsewhere) repeated as a thin tiled band across the very top of the footer, ahead of the brand/links grid. Kept small and subtle so it reads as a considered cultural detail rather than decoration for its own sake. */ .foot-koru{height:22px;width:100%; background-image:url('data:image/png;base64,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'); background-repeat:repeat-x;background-position:center;background-size:auto 22px; opacity:.85} @media(max-width:520px){.foot-koru{height:16px;background-size:auto 16px}} /* ---------- 14 · FOOTER — white link section, wider koru divider, dark wordmark strip ---------- Feedback: keep the brand/newsletter/link columns on white, run the koru band as a wider divider underneath, then a separate dark strip below it holding the giant "Selinno" watermark exactly as it was. */ footer{background:var(--paper);color:var(--ink);padding:0} .foot-top{padding:var(--s6) 0 var(--s3)} .foot-brand .logo{color:var(--ink)} .foot-brand p{color:var(--stone)} .foot-brand .small{color:var(--stone) !important} .foot-news input{border:1px solid var(--line);background:var(--paper-2);color:var(--ink)} .foot-news input::placeholder{color:var(--stone)} .foot-news input:focus{border-color:var(--sky)} .foot-col a{color:#4b5158} .foot-col a:hover{color:var(--ink)} .foot-bot{border-top:1px solid var(--line);color:var(--stone)} /* Koru divider sized to match the "5-year warranty / Duralloy / 31-day returns" ticker strip between Our Story and Complete your entrance (~103px desktop, ~69px mobile) so the two dark bands read as a matched pair. */ .foot-koru{height:103px;background-color:var(--ink);background-size:auto 68px;opacity:1} @media(max-width:700px){.foot-koru{height:69px;background-size:auto 46px}} .foot-bottom-strip{background:var(--ink)} .foot-bottom-strip .wrap{padding-top:var(--s3)} .foot-bot-dark{border-top:0;color:#9aa0a7;padding-top:0} .foot-bottom-strip .foot-wordmark{margin:var(--s3) auto 0} /* ---------- 15 · SELINNO CARE — smarter boxed row (matches reference) ---------- Back to a clean bordered row — icon beside the title/subtitle, thin dividers between columns, no index counters — rather than the larger stacked "spec sheet" version, per feedback. */ .care-item::before{content:none} .care-item{flex-direction:row;align-items:center;gap:20px;padding:28px 30px} .care-item:first-child{padding-left:0} .care-item:last-child{padding-right:0} .care-ico{width:48px;height:48px;flex:0 0 48px;stroke-width:1.4} .care-text h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px} .care-text p{padding-left:0;font-size:13.5px;max-width:none} @media(max-width:900px){ .care-item{flex-direction:row;align-items:center;padding:22px 4px} } /** Custom css override theme **/ .mb-0{ margin-bottom: 0px; } .mt-0{ margin-top:0px; } .mt-1{ margin-top: 1em; } .mt-2{ margin-top: 2em; } .mt-3{ margin-top: 3em; } .gap-0 { gap: 0px; } .gap-5 { gap: 5px; } .gap-10 { gap: 10px; } .gap-15 { gap: 15px; } .gap-20 { gap: 20px; } .gap-25 { gap: 25px; } .gap-30 { gap: 30px; } .gap-35 { gap: 35px; } .gap-40 { gap: 40px; } .d-flex{ display: flex; } .flex-row{ flex-direction: row; } .flex-column{ flex-direction: column; } .flex-wrap{ flex-wrap: wrap; } .flex-nowrap{ flex-wrap: nowrap; } .flex-grow-0{ flex-grow: 0; } .flex-grow-1{ flex-grow: 1; } .flex-shrink-0{ flex-shrink:0; } .flex-shrink-1{ flex-shrink:1; } .flex-auto{ flex-basis: auto; } .flex-w-100{ flex-basis: 100%; } .flex-w-75{ flex-basis: 75%; } .flex-w-60{ flex-basis: 60%; } .flex-w-50{ flex-basis: 50%; } .flex-w-25{ flex-basis: 25%; } .justify-content-start{ align-items: flex-start; } .justify-content-end{ justify-content: flex-end; } .justify-content-center{ justify-content: center!important; } .justify-content-between{ justify-content: space-between; } .justify-content-around{ justify-content: space-around; } .justify-content-evenly{ justify-content: space-evenly; } .justify-self-start{ align-self: flex-start; } .justify-self-end{ align-self: flex-end; } .justify-self-center{ align-self: center; } .align-content-start{ align-content: flex-start; } .align-content-end{ align-content: flex-end; } .align-content-center{ align-content: center; } .align-items-start{ align-items: flex-start; } .align-items-end{ align-items: flex-end; } .align-items-center{ align-items: center; } .align-self-start{ align-self: flex-start; } .align-self-end{ align-self: flex-end; } .align-self-center{ align-self: center; } .title-content{ display: flex; justify-content: space-between; align-items: center; } .title-content p { margin-bottom:0px; font-size: clamp(16px, 1.35vw, 19px); font-weight: 400; color: var(--ink-2); line-height: 1.6; } .sub-title .sub-head{ display: inline-flex; align-items: center; gap: 8px; } .sub-title .sub-head:not(.para){ font-family: var(--mono); font-weight: 700; letter-spacing: .16em; font-size: 10px; color: var(--ink); } .sub-title .sub-head.para{ font-family: var(--sans); } .sub-title.seperator .sub-head:before{ content: ""; width: 22px; height: 1px; background: var(--olive); flex: 0 0 22px; } .section-padding{ padding-top: 60px; padding-bottom: 60px; } .boxed-width{ max-width: 1200px; margin: 0 auto; padding-left: 40px; padding-right: 40px; } .boxed-fullwidth{ width:100%; } .boxed-fullwidth>.vc_row-fluid{ max-width: 1200px; width: clamp(1200px, 95%, 100%); margin: 0 auto !important; padding-left: 15px; padding-right: 15px; } .fullwidth{ width:100%; } .template-fullwidth main.container{ padding-left: 0px; padding-right: 0px; } .fullwidth.vc_section{ padding-left:0px; padding-right:0px; margin-left:0px; margin-right:0px; } .wrap>.vc_column_container>.vc_column-inner{ padding-left:0; padding-right:0; margin-left: 0; margin-right: 0; } .selinno-design .wd-header-nav .wd-nav-main li a{ font-family: var(--sans) !important; text-transform: uppercase; font-weight: 600; font-size: 12px; letter-spacing: .12em; } .selinno-design .wd-nav[class*="wd-style-underline"] .nav-link-text:after{ background-color: #6aa6d5; } .selinno-design .wd-content-layout{padding-top: 15px;} .selinno-design .vc_images_carousel .vc_carousel-control .icon-next, .selinno-design .vc_images_carousel .vc_carousel-control .icon-prev{ background: #333; border-radius: 15px; color: #fff; } .whb-header_667924.whb-sticky-prepared{ padding-top: calc(40px + 68px + .00001px + calc(.00001px + .00001px + .00001px)) } .whb-header_667924 .whb-general-header .whb-flex-row{ gap: 30px; } .whb-header_667924 .whb-general-header .whb-flex-row .whb-col-left, .whb-header_667924 .whb-general-header .whb-flex-row .whb-col-right { flex: 0 1 auto; } .whb-header_667924 .whb-general-header .whb-flex-row .whb-col-center{ flex: 1 1 auto; } @media (min-width: 1025px) { .whb-header_667924 .whb-general-header .whb-general-header-inner { height: 68px; } } .care-container{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .care-item .vc_column-inner{ padding:0 } .care-item:first-child { padding-left: 0; } .care-item:last-child { padding-right: 0; } .faq-wrap .faq-item .faq-q:hover{ background: transparent; border-color: none; box-shadow: none; } .selinno-design main{ padding-bottom:0; } .selinno-design footer{ padding:0; margin: 0; display: none; } /* .page-id-2596 #footer h4, .page-id-2596 #footer li, .page-id-2596 #footer a, .page-id-2596 #footer p, .page-id-2596 #footer .title-after_title{ color: #ffffff; } */ .projects .wd-product{ background: #fff; } .projects .wd-product .product-element-top{ max-height: 320px; } .projects .wd-product .product-element-top:hover .hover-img{ display:none; opacity: 1; } .projects .wd-product .product-element-bottom{ padding-block: 20px; } .projects .wd-product .product-element-bottom .price{ margin-top:0!important; } .projects .wd-carousel-inner .wd-nav-arrows.wd-pos-sep{ position: absolute; top: -15px; right: 52px; z-index:1050; } .projects .wd-carousel-inner .wd-nav-arrows.wd-pos-sep .wd-prev, .projects .wd-carousel-inner .wd-nav-arrows.wd-pos-sep .wd-next{ opacity: 1; transform:none; background: #fff; margin-inline: 2px; margin-bottom: 10px; z-index: 1090; } #tradeForm form { background: var(--white); color: var(--ink); padding: clamp(26px, 3.4vw, 44px); } .care-container .info-box-wrapper .wd-info-box h3, .care-container .info-box-wrapper .wd-info-box h4{ font-size: 17px; font-family: var(--display); font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; } @media (min-width: 768px){ .care-container .info-box-wrapper .wd-wpb{ margin-bottom: 0px; } } .projects .wd-products[class*="wd-stretch-cont"] .wd-carousel-item{ flex: 0 0 340px; max-width: 340px; } /** Product Page Design **/ .product-container > * { font-family: var(--sans); } .product-container :is(ul,ol){ padding: 0; margin: 0; } .product-container .wc-tab table{ max-width: 640px; margin: 0; } .product-container table :is(th, td){ font-family: var(--sans); font-size: 14px; } .product-container h1, .product-container h2, .product-container h3, .product-container h4, .product-container h5, .product-container h6{ font-family: var(--display); } .product-container .category .meta-label{ display: none; } .product-container .price .amount bdi{ font-family: var(--display); font-weight: 700; font-size: 32px; letter-spacing: -.02em; color: var(--olive); margin: 16px 0 6px; } .product-container .armvw-button{ margin-bottom: 10px; display: inline-flex; align-items: center; gap: 9px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-family: var(--sans); font-weight: 600; font-size: 13.5px; padding: 12px 18px; cursor: pointer; transition: .22s var(--ease); border-radius: 0px; } .product-container .price .woocommerce-price-suffix{ font-size: 12px; } .product-container .product_meta>span{ font-size:14px; } .product-container .quantity input.btn{ border-radius: 0px } .product-container .single_add_to_cart_button{ border-radius: 0px } .product-container .wd-buy-now-btn{ border-radius: 0px } .product-container .estimated-delivery-notice.pdp-delivery{ margin-top: 10px; } .product-container .woocommerce-product-details__short-description p { color: var(--ink-2); font-size: clamp(16px, 1.35vw, 19px); } .product-container .wd-nav-tabs-wrapper{ border-bottom: 1px solid #dbdfe3; } .product-container .wd-nav-tabs>li>a{ text-transform: none; font-family: var(--sans); font-weight: 600; font-size: 13.5px; letter-spacing: .02em; } .product-container .wd-nav-tabs>li>a>span:after{ display:none; } .product-container .wd-nav-tabs>li:is(.wd-active,.active)>a:after{ content: ''; position: absolute; top: 100%; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--wd-primary-color); transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1); } .pdp-box-list li{ position: relative; padding-left:30px; } .pdp-box-list li:before { content: ''; position: absolute; top: 14px; left: 0; width:16px; height: 16px; background-color: #5c752c; -webkit-mask: url(../../assets/images/svg/check-mark.svg) no-repeat center / contain; mask: url(../../assets/images/svg/check-mark.svg) no-repeat center / contain; } .product-faq{ background: var(--paper-2); border-top: 4px solid var(--sky); } .product-faq .wrap{ max-width: 840px; } .wc-product-faq .wc-product-faq-list{ border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); } .wc-product-faq .wc-product-faq-item{ border:0px; border-bottom: 1px solid var(--line); background: var(--paper); padding: 0 24px; margin-bottom: 0px; } .wc-product-faq .wc-product-faq-item:is(:last-child){ border-bottom: 0px; margin-bottom: 0px; } .wc-product-faq .wc-product-faq-question{ padding: 25px 0px; } .wc-product-faq .wc-product-faq-answer{ max-height: 100%; transition: max-height .45s var(--ease); padding:0 0 20px; }