/* ========================================================================== THE ADORÉE — COMPONENTS Every reusable component. Nothing here is bound to one page. Moved verbatim from the approved prototype (adoree-prototype-v3.html). Declarations are unchanged. Every value that can be a token is a token; the tokens themselves live in tokens.css and are never edited here. ========================================================================== */ /* ---------- Announcement bar ---------- WP-01 A1. The dark prototype ribbon is gone. The announcement bar becomes a permanent feature: a seamless right-to-left marquee that pauses on hover and stops entirely under prefers-reduced-motion, showing the static text. Height, type size, tracking and colour are unchanged from the original bar — only the overflow and the scrolling track are new. It reuses the `slide` keyframe the section marquee already establishes. */ .announce{background:var(--c-accent);color:var(--c-white);font-size:var(--t-eyebrow);letter-spacing:var(--ls-ui); text-transform:uppercase;text-align:center;padding:9px var(--s-4);overflow:hidden} .announce__track{display:flex;width:max-content;animation:slide 44s linear infinite} .announce__track span{white-space:nowrap;padding-inline:var(--s-5)} .announce:hover .announce__track,.announce:focus-within .announce__track{animation-play-state:paused} @media(prefers-reduced-motion:reduce){ .announce__track{animation:none;width:auto;justify-content:center} .announce__track span+span{display:none} } /* ---------- Header ---------- */ /* ---------- header ---------- */ header{position:sticky;top:0;z-index:80;transition:background var(--d-mid) var(--e-soft),border-color var(--d-mid); border-bottom:1px solid transparent;isolation:isolate} header.solid{background:rgba(249,244,245,.95);backdrop-filter:blur(14px);border-bottom-color:var(--c-line)} header.over{background:transparent} header.over::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1; background:linear-gradient(180deg,rgba(51,44,45,.5),rgba(51,44,45,0))} .bar{display:flex;align-items:center;gap:var(--s-6);padding:var(--s-4) var(--gutter);max-width:var(--maxw);margin:0 auto; transition:padding-block var(--d-fast) var(--e-soft)} .brand img{width:var(--logo-w-header);height:auto;transition:filter var(--d-mid)} header.over .brand img{filter:brightness(0) invert(1)} /* Dark page header scoping */ .dark header.solid, header.solid.dark{ background:rgba(34,29,30,.95); border-bottom-color:var(--c-line); } .dark header.solid .brand img, header.solid.dark .brand img{ filter:brightness(0) invert(1); } .dark header.solid nav.main a, .dark header.solid nav.main button, .dark header.solid .utils, .dark header.solid .utils a, .dark header.solid .burger{ color:var(--c-text); } .dark header.solid nav.main a:hover, .dark header.solid nav.main button:hover, .dark header.solid .utils a:hover, .dark header.solid .burger:hover{ color:var(--c-accent); border-bottom-color:var(--c-accent); } /* Scroll-driven header bar condensation */ @supports (animation-timeline: scroll()) { @keyframes header-condense-bar { to { padding-block: 8px; } } header.condensed .bar, header.solid .bar { animation: header-condense-bar linear both; animation-timeline: scroll(root block); animation-range: 0px 80px; } } /* Fallback for browsers without CSS scroll-driven animation support */ @supports not (animation-timeline: scroll()) { header.condensed .bar { padding-block: 8px; } } nav.main{display:flex;gap:var(--s-6);font-size:var(--t-micro);letter-spacing:var(--ls-ui);text-transform:uppercase;margin-inline:auto} nav.main a{padding-block:4px;border-bottom:1px solid transparent;transition:border-color var(--d-fast),opacity var(--d-fast),color var(--d-fast);opacity:.72;display:inline-block;color:var(--c-text)} nav.main a:hover,nav.main a.on{opacity:1;border-bottom-color:var(--c-accent);color:var(--c-btn)} nav.main button{padding-block:4px;border-bottom:1px solid transparent;transition:border-color var(--d-fast),opacity var(--d-fast),color var(--d-fast);opacity:.72;color:var(--c-text)} nav.main button:hover,nav.main button.on{opacity:1;border-bottom-color:var(--c-accent);color:var(--c-btn)} header.over nav.main button,header.over nav.main a,header.over .utils{color:var(--c-white)} header.over nav.main a:hover,header.over nav.main button:hover{color:var(--c-white);opacity:1;border-bottom-color:var(--c-white)} header.over .utils a:hover{color:var(--c-white);opacity:.85} .utils{display:flex;align-items:center;margin-left:auto;gap:var(--s-2);font-size:var(--t-micro);letter-spacing:var(--ls-ui);text-transform:uppercase} .utils a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;position:relative;color:inherit; transition:color var(--d-fast),opacity var(--d-fast)} .utils a:hover{color:var(--c-btn)} .utils a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1;transition:stroke var(--d-fast)} .utils .num{position:absolute;top:5px;right:3px;font-size:10px;line-height:1;font-weight:500;font-family:var(--f-body); transition:opacity var(--d-fast),visibility var(--d-fast)} .utils .num.is-zero,.utils .num[data-count="0"]{opacity:0;visibility:hidden} .pill{display:none;align-items:center;gap:var(--s-2);background:var(--c-surface);border:1px solid var(--c-line); border-radius:var(--r-pill);padding:5px 12px;font-size:var(--t-eyebrow);letter-spacing:var(--ls-ui); text-transform:uppercase;color:var(--c-text)} .pill.show{display:inline-flex} .burger{display:none} @media(max-width:960px){ nav.main{display:none} .utils .hide-m{display:none} .utils a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;position:relative} .burger{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px; font-size:var(--t-micro);letter-spacing:var(--ls-ui);text-transform:uppercase;margin-inline:auto 0; background:none;border:0;padding:0 2px;position:relative} .burger::after{content:'';position:absolute;inset:0} } /* ---------- Palette dots — the brand signature mark ---------- */ /* ---------- signature: palette dots ---------- */ .dots{display:inline-flex;gap:5px;align-items:center;flex-shrink:0} .dot{width:8px;height:8px;border-radius:var(--r-pill);border:1px solid var(--c-accent);background:transparent} .dot.f{background:var(--c-accent)} .dot.lg{width:14px;height:14px;border-width:1.5px} .on-dark .dot{border-color:var(--c-on-dark)} .on-dark .dot.f{background:var(--c-on-dark)} /* ---------- Marquee ---------- */ /* ---------- marquee ---------- */ .marquee{overflow:hidden;border-block:1px solid var(--c-line);padding-block:var(--s-5);background:var(--c-surface)} .marquee__track{display:flex;gap:var(--s-8);width:max-content;animation:slide 34s linear infinite} .marquee span{font-family:var(--f-display);font-size:clamp(28px,3.8vw,48px);letter-spacing:var(--ls-display); color:var(--c-text);white-space:nowrap;display:flex;align-items:center;gap:var(--s-8)} .marquee i{width:11px;height:11px;border-radius:var(--r-pill);background:var(--c-accent);display:inline-block; flex-shrink:0;font-style:normal} @keyframes slide{to{transform:translateX(-50%)}} /* ---------- Section head, with arrows ---------- */ /* ---------- section head ---------- */ .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-6);margin-bottom:var(--s-8);flex-wrap:wrap} .sec-head h2{margin-top:var(--s-3)} .sec-head .side{display:flex;align-items:center;gap:var(--s-4)} .arrow{width:42px;height:42px;border:1px solid var(--c-inactive);border-radius:var(--r-pill);display:flex; align-items:center;justify-content:center;transition:var(--d-fast)} .arrow:hover{border-color:var(--c-accent);background:var(--c-accent);color:var(--c-white)} .sec-head.center{flex-direction:column;align-items:center;text-align:center} .sec-head.center .lead{margin-inline:auto;text-align:center} /* ---------- Product card, and the grid it sits in ---------- */ /* ---------- product card ---------- */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,26px)} .grid.g3{grid-template-columns:repeat(3,1fr)} @media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:840px){.grid,.grid.g3{grid-template-columns:repeat(2,1fr)}} .card{cursor:pointer;display:flex;flex-direction:column} .card__shot{position:relative;overflow:hidden;background:var(--c-surface-2);aspect-ratio:4/5} .card__shot img{width:100%;height:100%;object-fit:cover;display:block} /* Crossfade to second image on hover over ~0.6s with slight scale. If no second image exists, single image has no transform, degrading cleanly to no hover change. */ .card__img--alt, .card__shot picture:nth-of-type(2) img, .card__shot > img:nth-of-type(2){ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;pointer-events:none; transition:opacity .6s var(--e-ui),transform .8s var(--e-ui); transform:scale(1)} .card:hover .card__img--alt, .card:hover .card__shot picture:nth-of-type(2) img, .card:hover .card__shot > img:nth-of-type(2){ opacity:1;transform:scale(1.02)} .card__tags{position:absolute;top:var(--s-3);left:var(--s-3);display:flex;flex-direction:column;align-items:flex-start;gap:4px;z-index:2;pointer-events:none} .card__tags .card__tag{position:static;display:inline-block;width:auto} .card__tag{position:absolute;top:var(--s-3);left:var(--s-3);background:rgba(249,244,245,.20);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(61,53,54,.15);color:var(--c-text);padding:5px 11px; font-size:10px;font-weight:500;letter-spacing:var(--ls-ui);text-transform:uppercase} .card__fav{position:absolute;top:var(--s-2);right:var(--s-2);width:44px;height:44px;min-width:44px;min-height:44px; background:transparent;border:0;border-radius:0;display:flex;align-items:center;justify-content:center; color:var(--c-text);opacity:.75;cursor:pointer;z-index:2; transition:opacity var(--d-fast),color var(--d-fast),transform var(--d-fast)} .card:hover .card__fav{opacity:1} .card__fav:hover{opacity:1;color:var(--c-btn);transform:scale(1.08)} .card__fav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1;transition:fill var(--d-fast),stroke var(--d-fast)} .card__fav.on svg{fill:var(--c-btn);stroke:var(--c-btn)} .card__fav.on{opacity:1;color:var(--c-btn)} .card__meta{padding-top:var(--s-4);display:flex;flex-direction:column;gap:6px} .card__nm{font-family:var(--f-h4);font-size:var(--t-h4);line-height:var(--lh-tight)} .card__nm a{color:inherit;transition:color var(--d-fast)} .card__nm a:hover,.card:hover .card__nm a{color:var(--c-btn)} .card__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)} .card__pr{font-size:var(--t-small);color:var(--c-muted)} .card__pr del{opacity:.75;margin-right:6px;text-decoration:line-through} .card__pr ins{text-decoration:none;color:var(--c-text);font-weight:600} .card__offer{display:inline-block;font-size:10px;letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--c-btn);font-weight:500;line-height:1.2;margin-top:1px} @media(hover:none){.card__fav{opacity:1}} /* ---------- WP-00.8 A6 — collection card treatment ------------------------ A modifier on the same card, not a second card. Applied by shop.js -> card() from COLLECTIONS[].cardTreatment, so it reaches all seven placements at once: shop archive, category views, the homepage rail and editorial grid, Luxe, Complete the Look, search and the wishlist. The language is lifted from the .dark scope — dark ground, accent as a single hairline, type pulled back. The image keeps the same 4/5 box, so a Luxe piece reads differently inside the grid without breaking its rhythm. Contrast on the dark card, light pages: name --c-on-dark 12.53:1, marker --c-on-dark 12.53:1, price --c-on-dark-muted 5.95:1. Inside .dark, where the scope drops --c-dark to its darker value: 16.59:1, 16.59:1 and 7.87:1. The marker is never taupe — it is 11px, and taupe is accents at 18px and up. The accent appears only as the hairline, which is not text. */ .card--lx{background:var(--c-dark)} .card--lx .card__shot{background:var(--c-dark)} .card--lx .card__tag{background:rgba(26,21,22,.20);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(249,244,245,.25);color:var(--c-on-dark)} .card--lx .card__fav{background:transparent;color:var(--c-on-dark);opacity:.8} .card--lx .card__fav:hover{opacity:1;color:var(--c-accent)} .card--lx .card__fav.on svg{fill:var(--c-accent);stroke:var(--c-accent)} .card--lx .card__meta{padding:var(--s-4);border-top:1px solid var(--c-accent);gap:var(--s-2)} .card--lx .card__coll{display:flex;align-items:center;gap:var(--s-2); font-size:var(--t-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase; color:var(--c-on-dark)} .card--lx .card__coll::before{content:'';width:14px;height:1px;background:var(--c-accent);flex:none} .card--lx .card__nm{color:var(--c-on-dark);font-size:var(--t-body);letter-spacing:var(--ls-body)} .card--lx .card__nm a{color:inherit} .card--lx .card__nm a:hover,.card--lx:hover .card__nm a{color:var(--c-accent)} .card--lx .card__pr{color:var(--c-on-dark);font-weight:500} .card--lx .card__pr del{color:rgba(249,244,245,.55);opacity:1} .card--lx .card__pr ins{color:#FFFFFF;font-weight:600} .card--lx .card__offer{color:#DFB28E} .card--lx .dot{border-color:var(--c-on-dark-muted)} .card--lx .dot.f{background:var(--c-on-dark-muted)} /* ---------- Luxe Teaser & Product Slider ---------- */ .luxe-teaser{position:relative;background:var(--c-dark);color:var(--c-on-dark);display:block} .luxe-teaser.has-bg{clip-path:inset(0);overflow:hidden} .luxe-teaser.bleed{overflow:hidden} .luxe-teaser__bg{position:fixed;top:0;left:0;width:100vw;height:100vh;object-fit:cover;z-index:0;pointer-events:none;animation:none!important;transform:none!important;will-change:transform} .luxe-teaser__overlay{position:absolute;inset:0;background:rgba(34,29,30,.82);z-index:1;pointer-events:none} .luxe-teaser .split{position:relative;z-index:2;align-items:center;gap:clamp(32px,5vw,80px)} .luxe-teaser .split--solo{grid-template-columns:1fr;max-width:680px;margin-inline:auto;text-align:center} .luxe-teaser .split--solo .luxe-teaser__copy{margin-inline:auto} .luxe-teaser .split--solo .btn{margin-inline:auto} .luxe-slider{position:relative;width:100%;min-width:0} .luxe-slider__track{display:flex;gap:var(--s-4);overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:var(--s-2)} .luxe-slider__track::-webkit-scrollbar{display:none} .luxe-slider__item{flex:0 0 clamp(220px,26vw,280px);scroll-snap-align:start;min-width:0} .luxe-slider__nav{display:flex;gap:var(--s-2);justify-content:flex-end;margin-top:var(--s-3)} .luxe-slider__nav .arrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:var(--c-white)} .luxe-slider__nav .arrow:hover{background:var(--c-btn);border-color:var(--c-btn);color:var(--c-white)} @media(max-width:900px){ .luxe-teaser .split{grid-template-columns:1fr} .luxe-slider{margin-top:var(--s-6)} .luxe-slider__item{flex:0 0 75vw;max-width:320px} } /* ---------- Luxe Options Band (Repeater 2–6 items) ---------- */ .luxe-options{background:var(--c-surface);border-top:1px solid var(--c-line)} .luxe-options__grid{display:grid;gap:clamp(24px,3vw,48px);align-items:start} .luxe-options__grid[data-count="2"]{grid-template-columns:repeat(2,1fr)} .luxe-options__grid[data-count="3"]{grid-template-columns:repeat(3,1fr)} .luxe-options__grid[data-count="4"]{grid-template-columns:repeat(4,1fr)} .luxe-options__grid[data-count="5"]{grid-template-columns:repeat(5,1fr)} .luxe-options__grid[data-count="6"]{grid-template-columns:repeat(3,1fr)} @media(min-width:641px) and (max-width:1023px){ .luxe-options__grid[data-count="3"], .luxe-options__grid[data-count="4"], .luxe-options__grid[data-count="5"], .luxe-options__grid[data-count="6"]{grid-template-columns:repeat(2,1fr)} } @media(max-width:640px){ .luxe-options__grid, .luxe-options__grid[data-count="2"], .luxe-options__grid[data-count="3"], .luxe-options__grid[data-count="4"], .luxe-options__grid[data-count="5"], .luxe-options__grid[data-count="6"]{grid-template-columns:1fr} } .luxe-options__item{display:flex;flex-direction:column;text-decoration:none;color:inherit} .luxe-options__media{margin-bottom:var(--s-3);width:48px;height:48px;display:flex;align-items:center;justify-content:center} .luxe-options__media img{max-width:100%;max-height:100%;object-fit:contain} .luxe-options__title{margin:0 0 var(--s-2);font-size:var(--t-h4);color:var(--c-text);transition:color var(--d-fast)} @media(hover:hover) and (pointer:fine){ .luxe-options__item:hover .luxe-options__title{color:var(--c-btn)} } .luxe-options__text{margin:0;color:var(--c-muted);font-size:var(--t-small);line-height:var(--lh-body)} /* ---------- Editorial tile ---------- */ .edit__tile{position:relative;overflow:hidden;min-height:520px;background:var(--c-surface-2)} .edit__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--e-out)} .edit__tile:hover img{transform:scale(1.04)} .edit__tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(51,44,45,.34),rgba(51,44,45,.06) 50%)} .edit__cap{position:absolute;z-index:2;top:0;left:0;padding:clamp(24px,3vw,42px);color:var(--c-white)} .edit__cap .eyebrow{color:rgba(255,255,255,.82)} .edit__cap h3{color:var(--c-white);font-size:var(--t-h2);margin:var(--s-3) 0 var(--s-5);max-width:9ch} .edit__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,26px)} /* ---------- Category card ---------- */ .cat{position:relative;overflow:hidden;background:var(--c-surface);display:flex;flex-direction:column; justify-content:flex-start;padding:clamp(26px,3vw,44px);min-height:250px;isolation:isolate; text-decoration:none;color:inherit} .cat:visited,.cat:active{color:inherit} .cat--tall{grid-row:span 2;min-height:520px;justify-content:flex-end} .cat__in{position:relative;z-index:2} .cat h3,.cat .t-h3{margin:var(--s-3) 0 var(--s-5);max-width:11ch;transition:color var(--d-fast);color:var(--c-text)} .cat img{position:absolute;right:0;top:0;bottom:0;width:46%;height:100%;object-fit:cover;object-position:center 20%; z-index:0;pointer-events:none;transition:transform 1.4s var(--e-out)} .cat::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,var(--c-surface) 46%,rgba(255,255,255,.35) 62%,transparent 78%)} .cat--tall img{width:58%} @media(hover:hover) and (pointer:fine){ .cat:hover h3,.cat:hover .t-h3,.cat:hover .cat__in .t-h3{color:var(--c-btn)} .cat:hover img{transform:scale(1.05)} } .cat .btn{align-self:flex-start;position:relative;z-index:2} /* ---------- Float card ---------- */ .floatcard{background:var(--c-surface);padding:var(--s-3);width:250px;display:flex;flex-direction:column;gap:var(--s-3); box-shadow:0 18px 50px rgba(51,44,45,.13);cursor:pointer;transition:transform var(--d-mid) var(--e-ui)} .floatcard:hover{transform:translateY(-6px)} .floatcard img{aspect-ratio:1;object-fit:cover;width:100%} .floatcard .r{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:0 var(--s-1) var(--s-1)} /* ---------- Filter chip ---------- */ /* ---------- filter chips ---------- */ .chips{display:flex;flex-wrap:wrap;gap:var(--s-2)} .chip{border:1px solid var(--c-line);border-radius:var(--r-none);padding:10px 18px;font-size:var(--t-micro); letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--c-muted);background:var(--c-surface); min-height:44px;display:inline-flex;align-items:center;justify-content:center; transition:border-color var(--d-fast),color var(--d-fast),background var(--d-fast)} .chip:hover{border-color:var(--c-accent);color:var(--c-text)} .chip.on{background:var(--c-text);border-color:var(--c-text);color:var(--c-white)} .chip .dots{margin-right:7px;vertical-align:-1px} .chip.on .dot{border-color:var(--c-white)} .chip.on .dot.f{background:var(--c-white)} /* ---------- Filter sidebar ---------- */ .filters{position:sticky;top:96px;max-height:calc(100vh - 112px);max-height:calc(100dvh - 112px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-right:var(--s-3);padding-bottom:var(--s-5);scrollbar-width:thin;scrollbar-color:var(--c-line) transparent} @supports not (scrollbar-color: auto) { .filters::-webkit-scrollbar{width:4px} .filters::-webkit-scrollbar-track{background:transparent} .filters::-webkit-scrollbar-thumb{background:var(--c-line);border-radius:4px} } .fgroup{border-bottom:1px solid var(--c-line);padding-block:var(--s-5)} .fgroup:first-child{padding-top:0} .fgroup>.eyebrow{margin-bottom:var(--s-4)} .fopt{display:flex;align-items:center;gap:var(--s-3);padding-block:7px;font-size:var(--t-small);color:var(--c-muted); cursor:pointer;transition:color var(--d-fast);width:100%;text-align:left} .fopt:hover{color:var(--c-text)} .fopt .box{width:15px;height:15px;border:1px solid var(--c-inactive);flex-shrink:0;display:flex;align-items:center; justify-content:center;font-size:10px;color:var(--c-white)} .fopt.on{color:var(--c-text)} .fopt.on .box{background:var(--c-accent);border-color:var(--c-accent)} /* ---------- Shop bar + search field ---------- */ .shopbar{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);margin-bottom:var(--s-6); flex-wrap:wrap} div.search,form.search{display:flex;align-items:center;gap:var(--s-3);border:1px solid var(--c-inactive);padding:12px var(--s-4); border-radius:var(--r-pill);min-width:260px;flex:1;max-width:400px} div.search input,form.search input{border:0;background:none;font:inherit;color:var(--c-text);width:100%} div.search input::placeholder,form.search input::placeholder{color:var(--c-muted)} .mobfilter{display:none} /* ---------- Search form & widgets (16px minimum on mobile, iOS zoom guard) ---------- */ .searchform.field{display:flex;gap:var(--s-2);position:relative;max-width:520px;margin-top:var(--s-5)} .searchform.field input, .searchform input, .widget_search input, .wp-block-search input, .wp-block-search__input, .ct-search-form input, div.search input, form.search input, input[type="search"]{ font-size:var(--t-body); font-family:var(--f-body); } .searchform.field input{ flex:1;border:0;border-bottom:1px solid var(--c-inactive);background:transparent;padding:10px 0; color:var(--c-text);border-radius:0;transition:border-bottom-color var(--d-fast) var(--e-ui); } .searchform.field input:focus{ border-bottom:2px solid var(--c-btn); margin-bottom:-1px; } .searchform.field input:focus-visible{ outline:2px solid var(--c-btn); outline-offset:3px; border-radius:2px; } .searchform.field input::placeholder{ color:var(--c-muted); } .searchform button, .searchform .btn, .widget_search button, .wp-block-search button, .wp-block-search__button{ font-size:var(--t-ui); } /* ---------- USP band ---------- */ /* ---------- usp band ---------- */ .usp{background:var(--c-surface);padding:clamp(32px,4vw,64px);display:grid;grid-template-columns:repeat(4,1fr);gap:0} .usp>div{padding-inline:clamp(16px,2vw,32px);border-left:1px solid var(--c-line)} .usp>div:first-child{border-left:0;padding-left:0} .usp h4{font-family:var(--f-h4);font-size:var(--t-h4);margin-bottom:var(--s-3)} .usp p{color:var(--c-muted);font-size:var(--t-small);margin:0} .usp .ic{width:26px;height:2px;background:var(--c-accent);margin-bottom:var(--s-4);display:block;font-size:0} @media(max-width:900px){.usp{grid-template-columns:1fr 1fr;gap:var(--s-6)}.usp>div{border-left:0;padding-left:0}} @media(max-width:520px){.usp{grid-template-columns:1fr}} /* ---------- Quote card ---------- */ /* ---------- testimonials ---------- */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)} .quote{background:var(--c-surface);padding:clamp(26px,3vw,42px);display:flex;flex-direction:column;gap:var(--s-4)} .quote .st{color:var(--c-accent);letter-spacing:.2em;font-size:var(--t-small)} .quote blockquote{margin:0;font-family:var(--f-h4);font-size:var(--t-h4);line-height:1.45} .quote .who{font-size:var(--t-small);color:var(--c-muted);margin-top:auto} @media(max-width:900px){.quotes{grid-template-columns:1fr}} /* ---------- Post card ---------- */ /* ---------- journal ---------- */ .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)} .post__img{aspect-ratio:4/3;overflow:hidden;background:var(--c-surface-2)} .post__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--e-out)} .post:hover .post__img img{transform:scale(1.05)} .post h3{font-size:var(--t-h4);margin:var(--s-4) 0 var(--s-3);transition:color var(--d-fast)} .post:hover h3,.post:hover h3 a{color:var(--c-btn)} .post h3 a{color:inherit} .post p{color:var(--c-muted);font-size:var(--t-small);margin-bottom:var(--s-4)} .post .r{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--c-line);padding-top:var(--s-3)} @media(max-width:900px){.posts{grid-template-columns:1fr}} /* ---------- Form field (Underline floating labels) ---------- */ .formgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6)} .formgrid .full{grid-column:1/-1} label.f{display:block;position:relative;padding-top:18px;margin-bottom:var(--s-3)} label.f span{position:absolute;top:28px;left:0;font-size:var(--t-body);letter-spacing:var(--ls-body); color:var(--c-muted);pointer-events:none;transition:top .2s var(--e-soft),font-size .2s var(--e-soft),color .2s var(--e-soft),letter-spacing .2s var(--e-soft); transform-origin:left top} label.f input,label.f select,label.f textarea{width:100%;border:0;border-bottom:1px solid var(--c-inactive);background:transparent; padding:10px 0;font-size:var(--t-body);color:var(--c-text);border-radius:0; transition:border-bottom-color var(--d-fast) var(--e-soft)} label.f input:focus,label.f select:focus,label.f textarea:focus{border-bottom:2px solid var(--c-btn);margin-bottom:-1px} label.f input:focus-visible,label.f select:focus-visible,label.f textarea:focus-visible{outline:2px solid var(--c-btn);outline-offset:3px;border-radius:2px} label.f input::placeholder,label.f textarea::placeholder{color:transparent;transition:color .2s var(--e-soft)} label.f input:focus::placeholder,label.f textarea:focus::placeholder{color:var(--c-muted)} /* Floating state */ label.f:focus-within span, label.f:has(input:not(:placeholder-shown)) span, label.f:has(textarea:not(:placeholder-shown)) span, label.f:has(select) span{top:0;font-size:var(--t-eyebrow);letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--c-text)} label.f:focus-within span{color:var(--c-text)} /* Inline email field (newsletter + footer) */ .field{display:flex;gap:var(--s-2);margin-top:var(--s-6);position:relative} .field input{flex:1;border:0;border-bottom:1px solid rgba(255,255,255,.45);background:transparent;padding:12px 0; font:inherit;color:var(--c-white);border-radius:0;transition:border-bottom-color var(--d-fast)} .field input:focus{border-bottom-color:var(--c-white)} .field input:focus-visible{outline:2px solid var(--c-white);outline-offset:3px;border-radius:2px} .field input::placeholder{color:rgba(255,255,255,.66)} /* WooCommerce Underline Floating Labels (Classic Form Rows) */ .form-row:has(input.input-text), .form-row:has(textarea){ position:relative; padding-top:18px; margin-bottom:var(--s-4); } .form-row:has(input.input-text) label, .form-row:has(textarea) label{ position:absolute; top:28px; left:0; font-size:var(--t-body); letter-spacing:var(--ls-body); color:var(--c-text); pointer-events:none; transition:top .2s var(--e-ui),font-size .2s var(--e-ui),color .2s var(--e-ui),letter-spacing .2s var(--e-ui); transform-origin:left top; margin:0; line-height:1; } .woocommerce-input-wrapper{display:block;width:100%} .form-row input.input-text, .form-row select, .form-row textarea{ width:100%; border:0;border-bottom:1px solid var(--c-inactive);background:transparent;border-radius:0;padding:10px 0; font-size:var(--t-body);font-family:var(--f-body);color:var(--c-text); transition:border-bottom-color var(--d-fast) var(--e-ui); } .form-row input.input-text:focus, .form-row select:focus, .form-row textarea:focus{ border-bottom:2px solid var(--c-btn); margin-bottom:-1px; } .form-row input.input-text:focus-visible, .form-row select:focus-visible, .form-row textarea:focus-visible{ outline:2px solid var(--c-btn); outline-offset:3px; border-radius:2px; } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible{ outline:2px solid var(--c-btn); outline-offset:2px; } .form-row input.input-text::placeholder, .form-row textarea::placeholder{ color:transparent; transition:color .2s var(--e-ui); } .form-row input.input-text:focus::placeholder, .form-row textarea:focus::placeholder{ color:var(--c-muted); } /* Floating label state: focused, non-empty (has value), or select */ .form-row:has(input.input-text):focus-within label, .form-row:has(input.input-text:not(:placeholder-shown)) label, .form-row:has(textarea):focus-within label, .form-row:has(textarea:not(:placeholder-shown)) label, .form-row:has(select) label{ top:0; font-size:var(--t-eyebrow); letter-spacing:var(--ls-ui); text-transform:uppercase; color:var(--c-text); } .form-row:has(input.input-text):focus-within label, .form-row:has(textarea):focus-within label{ color:var(--c-text); } @media(max-width:560px){ .field{flex-direction:column} .formgrid{grid-template-columns:1fr} } /* ---------- Footer ---------- */ /* ---------- footer ---------- */ footer{background:var(--c-dark);color:var(--c-on-dark);padding-top:clamp(48px,6vw,96px);overflow:hidden} .fgrid{display:grid;grid-template-columns:1.1fr .7fr .7fr .7fr 1.3fr;gap:clamp(24px,3vw,48px)} footer h4{font-family:var(--f-body);font-size:var(--t-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase; color:var(--c-on-dark-muted);margin-bottom:var(--s-5);font-weight:400} footer ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3);font-size:var(--t-small)} footer li a,footer li{color:var(--c-on-dark);opacity:.86;transition:opacity var(--d-fast),color var(--d-fast)} footer li a:hover{opacity:1;color:var(--c-accent)} footer .brand img{filter:brightness(0) invert(1);opacity:.94;width:var(--logo-w)} footer .fdesc{color:var(--c-on-dark-muted);font-size:var(--t-small);max-width:30ch;margin-top:var(--s-4)} footer .fsocial{margin-top:var(--s-3);display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap} footer .fsocial a{color:var(--c-on-dark);opacity:.86;display:inline-flex;align-items:center;text-decoration:none; font-size:var(--t-micro);letter-spacing:var(--ls-ui);text-transform:uppercase;transition:color var(--d-fast),opacity var(--d-fast)} footer .fsocial a:hover{color:var(--c-accent);opacity:1} footer .fsocial a svg{flex-shrink:0;vertical-align:-2px;margin-right:6px} .fbot{display:flex;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;font-size:var(--t-micro); color:var(--c-on-dark-muted);border-top:1px solid rgba(255,255,255,.14);margin-top:clamp(32px,4vw,64px);padding-top:var(--s-5)} /* A8 — the review link lives in this line. --c-on-dark on --c-dark is 12.53:1, and the accent underline is not text. Hover --c-accent is 4.96:1. */ .fbot a{color:var(--c-on-dark);border-bottom:1px solid var(--c-accent);padding-bottom:2px; transition:color var(--d-fast),border-color var(--d-fast)} .fbot a:hover{color:var(--c-accent)} .fmark{padding-top:clamp(24px,3vw,48px);opacity:.1} .fmark img{filter:brightness(0) invert(1);width:100%;max-width:none} @media(max-width:1000px){.fgrid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.fgrid{grid-template-columns:1fr}} /* ---------- Accordion ---------- */ .acc details{border-bottom:1px solid var(--c-line)} .acc details:first-child{border-top:1px solid var(--c-line)} .acc summary{list-style:none;cursor:pointer;padding-block:var(--s-5);font-size:var(--t-micro); letter-spacing:var(--ls-ui);text-transform:uppercase;display:flex;justify-content:space-between;align-items:center} .acc summary::-webkit-details-marker{display:none} .acc summary::after{content:'+';color:var(--c-accent);font-size:17px} .acc details[open] summary::after{content:'–'} .acc .body{padding-bottom:var(--s-5);color:var(--c-muted);font-size:var(--t-small)} /* ---------- Size table ---------- */ table.size-t{width:100%;border-collapse:collapse;font-size:var(--t-small)} table.size-t th,table.size-t td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--c-line);color:var(--c-text);font-weight:400} table.size-t th{font-size:var(--t-eyebrow);letter-spacing:var(--ls-ui);text-transform:uppercase;color:var(--c-muted)} /* ---------- Sticky buy bar ---------- */ .stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--c-surface);border-top:1px solid var(--c-line); padding:var(--s-3) var(--gutter);display:none;align-items:center;gap:var(--s-4);justify-content:space-between} /* ---------- Summary panel ---------- */ .panel{background:var(--c-surface);padding:clamp(24px,3vw,40px);position:sticky;top:104px} .srow{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);padding-block:var(--s-3);font-size:var(--t-small)} .srow.total{border-top:1px solid var(--c-line);margin-top:var(--s-3);padding-top:var(--s-4); font-size:var(--t-lead);font-family:var(--f-display-sub)} /* ---------- Step indicator ---------- */ .steps{display:flex;gap:var(--s-5);font-size:var(--t-micro);letter-spacing:var(--ls-ui);text-transform:uppercase; color:var(--c-inactive);margin-bottom:var(--s-7);flex-wrap:wrap} .steps .on{color:var(--c-text)} .steps .done{color:var(--c-accent)} /* ---------- Note callout ---------- */ .note{background:var(--c-surface-2);padding:var(--s-4);font-size:var(--t-small);color:var(--c-muted); border-left:2px solid var(--c-accent)} /* ---------- Empty state ---------- */ .empty{text-align:center;padding-block:clamp(48px,7vw,120px)} .empty h2{margin-bottom:var(--s-4)} .empty h3{margin-bottom:var(--s-4)} .empty p{margin:0 auto var(--s-6);max-width:var(--measure);line-height:var(--lh-body);color:var(--c-muted)} .empty .btn{margin-top:var(--s-2)} /* ---------- FAQ accordion ---------- */ .faq details{border-bottom:1px solid var(--c-line)} .faq summary{list-style:none;cursor:pointer;padding-block:var(--s-5);font-family:var(--f-h4); font-size:var(--t-h4);display:flex;justify-content:space-between;gap:var(--s-4)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';color:var(--c-accent)} .faq details[open] summary::after{content:'–'} .faq .body{padding-bottom:var(--s-5);color:var(--c-muted)} /* ---------- WhatsApp float ---------- */ .wa{position:fixed;right:18px;bottom:18px;width:52px;height:52px;border-radius:var(--r-pill);background:var(--c-accent); color:var(--c-white);display:flex;align-items:center;justify-content:center;font-size:var(--t-eyebrow); letter-spacing:.06em;z-index:75;box-shadow:0 8px 26px rgba(61,53,54,.2)} .wa.is-hidden{display:none!important} /* ---------- Toast ---------- */ .toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,90px);background:var(--c-dark);color:var(--c-white); padding:13px 24px;font-size:var(--t-micro);letter-spacing:var(--ls-ui);text-transform:uppercase;z-index:90; transition:transform var(--d-mid) var(--e-ui),opacity var(--d-mid);pointer-events:none;opacity:0} .toast.on{transform:translate(-50%,0);opacity:1} /* ---------- Structural rules added by this build (not in the prototype) ---------- 1. Product card. The prototype navigated with `onclick` on a
. A static, crawlable, WordPress-ready card needs a real , and a