@font-face{font-family:Soria;src:url("assets/fonts/soria-font.ttf") format("truetype");font-display:swap}@font-face{font-family:Basics;src:url("assets/fonts/Basics Serif - Free.ttf") format("truetype");font-display:swap} :root{--paper:#fbfaf7;--cream:#f2ece3;--maroon:#5A1825;--maroon2:#5b1822;--ink:#171311;--muted:#776e65;--line:#d9d0c5;--serif:Soria,Basics,Georgia,serif;--sans:Inter,Arial,sans-serif;--headerH:72px;--cardR:14px;--section-y:clamp(72px,8vw,112px); /* Global content gutter — the single horizontal inset for content-only sections and page wrappers (homepage content blocks, inner pages, shop, product). Full-bleed sections (hero, footer video, carousels, Founder's Pick, waitlist) intentionally do not use it. */ --gutter:5vw; /* ---- Sitaara typographic scale (shared site-wide) ---- micro : legal, meta, counters, badges (smallest readable) label : kickers, eyebrow labels, nav, form labels ui : buttons, CTAs, interface rows body : default body / supporting copy lead : intro + editorial paragraphs name : product names inside grids Display and section headings keep their own fluid clamp() scale. */ --fs-micro:13px;--fs-label:14px;--fs-ui:15px;--fs-body:16px;--fs-lead:18px;--fs-name:24px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:var(--fs-body)/1.6 var(--sans);overflow-x:hidden}body,button,input{font-family:var(--sans)}a{color:inherit;text-decoration:none}button{border:0;background:none;color:inherit;cursor:pointer}img,video{max-width:100%}small{display:block;text-transform:uppercase;letter-spacing:.16em;font-size:var(--fs-label);color:var(--muted)}[hidden]{display:none!important} .site-header{position:fixed;inset:0 0 auto;height:var(--headerH);z-index:1000;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;padding:0 3vw;color:var(--ink);background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .35s ease}.site-header.scrolled{background:#fff;color:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line);box-shadow:0 10px 30px rgba(23,19,17,.07)}.header-side{display:flex;align-items:center;gap:8px}.header-left{justify-self:start}.header-right{justify-self:end}.header-side button{position:relative;width:38px;height:38px;display:grid;place-items:center}.header-side svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .header-side b{position:absolute;right:0;top:0;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:currentColor;color:var(--paper);font-size:11px} .desktop-nav{display:flex;gap:20px;margin-left:8px}.desktop-nav a{font-size:12px;letter-spacing:.15em;text-transform:uppercase;opacity:.9}.logo-center{width:125px;display:grid;place-items:center}.logo-center img{display:block;width:auto;max-width:125px;max-height:30px} .drawer{position:fixed;top:0;right:0;width:min(420px,92vw);height:100dvh;z-index:1200;padding:100px 32px 40px;background:rgba(251,250,247,.97);backdrop-filter:blur(18px);transform:translateX(105%);transition:transform .4s ease;overflow:auto;box-shadow:-20px 0 60px rgba(0,0,0,.12)}.drawer.open{transform:translateX(0)}.drawer>button:first-child{position:absolute;top:22px;right:24px;font-size:28px}.drawer h2{font:40px/1 var(--serif);font-weight:400}.drawer input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:16px 0;outline:none;font-size:var(--fs-body)}.mini{display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.mini img{width:58px;height:72px;object-fit:contain;background:var(--cream)}.drawer-action{margin-top:24px;padding:14px 20px;background:var(--ink);color:#fff;text-transform:uppercase;letter-spacing:.13em;font-size:var(--fs-ui)}#backdrop{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.28);opacity:0;visibility:hidden;transition:.3s}#backdrop.show{opacity:1;visibility:visible} /* Compact dropdown panels — the search and hamburger controls open small rounded panels anchored just below the fixed header. They are never a full-screen sheet, never a top shutter and never cover the page. Panels size with min()/max() so they can't exceed the viewport, and the menu scrolls when its items are taller than the visible area. The wishlist/bag keep the right-hand drawer + backdrop above. */ .drawer#search,#mobileNav{position:fixed;top:calc(var(--headerH) + 10px);z-index:1200;width:min(360px,88vw);max-width:92vw;height:auto;padding:22px 22px 16px;background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--line);border-radius:var(--cardR);box-shadow:0 22px 60px rgba(23,19,17,.14);overflow-y:auto;overscroll-behavior:contain;max-height:min(70vh,560px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px) scale(.98);transition:opacity .22s ease,transform .24s cubic-bezier(.22,.61,.36,1),visibility .22s} .drawer#search{left:max(14px,3vw);transform-origin:top left} #mobileNav{right:max(14px,3vw);transform-origin:top right} .drawer#search.open,#mobileNav.open{opacity:1;visibility:visible;pointer-events:auto;transform:none} .drawer#search>button:first-child{top:12px;right:14px;font-size:24px} .drawer#search input{padding:12px 0} #mobileNav .mobile-nav-group{display:flex;flex-direction:column;gap:0;margin-top:16px}#mobileNav .mobile-nav-group:first-of-type{margin-top:0}#mobileNav .mobile-nav-group small{color:var(--muted);font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase;padding:0 2px 6px;border-bottom:1px solid var(--line)}#mobileNav .mobile-nav-group a,#mobileNav .mobile-nav-panel button{display:block;width:100%;text-align:left;padding:11px 2px;border:0;border-bottom:1px solid var(--line);background:none;font:var(--serif);font-size:16px;color:var(--ink);cursor:pointer}#mobileNav .mobile-nav-group a:active,#mobileNav .mobile-nav-panel button:active{color:var(--maroon)}#mobileNav .menu-guest{font-size:var(--fs-micro);padding:10px 2px 2px} #mobileNav #closeMenu{position:absolute;top:12px;right:14px;width:34px;height:34px;font-size:22px;display:grid;place-items:center;background:none;border:0;cursor:pointer} .product-showcase{position:relative;padding:var(--section-y) 0;background:var(--maroon);color:#fff;overflow:hidden}.showcase-head{display:flex;justify-content:space-between;align-items:end;gap:30px;max-width:1500px;margin:0 auto 20px;padding:0 5vw}.showcase-head small,.product-showcase .view-all{color:rgba(255,255,255,.62)}.showcase-head h2,.founder-pick-header h2,.categories-section h2,.karigars-head h2{margin:6px 0 0;font:clamp(42px,5.8vw,82px)/.95 var(--serif);font-weight:400}.showcase-head h2 i,.founder-pick-header h2 i,.categories-section h2 i,.karigars-head h2 i{font-style:italic}.site-header button.is-wished svg path{fill:none;stroke:var(--maroon)}.site-header button.is-wished svg{color:var(--maroon)}.view-all{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase}.coverflow-shell{--cover-w:min(24vw,380px);position:relative;height:calc(var(--cover-w)*1.5 + clamp(110px,12vw,180px));touch-action:pan-y;outline:none}.coverflow-swiper{width:100%;height:100%;padding:0 7vw;overflow:hidden}.coverflow-swiper .swiper-wrapper{align-items:center;pointer-events:none}.coverflow-swiper .swiper-slide{width:var(--cover-w);height:auto;aspect-ratio:var(--ar,2/3);pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform}.coverflow-swiper .swiper-slide.swiper-slide-active{pointer-events:auto}.cover-link{position:absolute;inset:0;display:block;overflow:hidden;background:var(--cream);border:0;border-radius:var(--cardR);box-shadow:0 20px 56px rgba(0,0,0,.26);transition:box-shadow .5s ease;isolation:isolate;transform:translateZ(0);-webkit-transform:translateZ(0)}.coverflow-swiper .swiper-slide-active .cover-link{cursor:grab;box-shadow:0 38px 96px rgba(0,0,0,.46)}.coverflow-swiper .swiper-slide-active .cover-link:active{cursor:grabbing}.coverflow-swiper .swiper-slide:not(.swiper-slide-active) .cover-link{cursor:default}.cover-image{display:block;width:100%;height:100%;object-fit:cover;background:var(--cream);filter:blur(calc(var(--d,0) * 4px));opacity:calc(1 - var(--d,0) * .2);transition:filter .25s linear,opacity .8s ease-in-out,.28s ease;will-change:opacity} /* Hover shots whose shape differs from image 1 are shown whole on the card's cream ground rather than cropped. The frame keeps image 1's --ar, so the coverflow geometry never shifts while hovering. */ .cover-image.is-contain{object-fit:contain}.cover-overlay{position:absolute;left:0;right:0;bottom:0;padding:60px 22px 22px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72));text-shadow:0 2px 16px rgba(0,0,0,.35)}.cover-overlay small{color:rgba(255,255,255,.7);margin-bottom:5px}.cover-overlay h3{margin:0;font:clamp(22px,2.3vw,32px)/1 var(--serif);font-weight:400}.cover-overlay span{display:block;margin-top:9px;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase}.carousel-arrow,.founder-pick-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:50;width:44px;height:44px;border:1px solid rgba(255,255,255,.35);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);backdrop-filter:blur(12px);font-size:20px}.carousel-arrow:hover,.founder-pick-arrow:hover{background:rgba(255,255,255,.22)}.carousel-arrow.prev,.founder-pick-prev{left:3vw}.carousel-arrow.next,.founder-pick-next{right:3vw}.carousel-meta{max-width:1500px;padding:0 5vw;display:flex;justify-content:space-between;gap:20px;color:rgba(255,255,255,.72);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase}.carousel-meta #productTitle{font:17px var(--serif);letter-spacing:0;text-transform:none;color:#fff} .waitlist-section{padding:var(--section-y) 5vw;background:var(--paper)}.waitlist-card{max-width:1200px;margin:auto;padding:clamp(38px,6vw,74px);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(35px,7vw,100px);background:#fff;border:1px solid rgba(23,19,17,.07);border-radius:14px;box-shadow:0 18px 50px -32px rgba(23,19,17,.18)}.waitlist-copy h2{margin:8px 0 18px;font:clamp(38px,4.8vw,65px)/.98 var(--serif);font-weight:400}.waitlist-copy p{max-width:560px;color:var(--muted);font-size:var(--fs-lead)}.waitlist-form-wrap{display:grid;align-content:center;min-width:0;min-height:340px}.waitlist-form{display:grid;gap:20px;align-content:center;width:100%;min-width:0}.waitlist-field{display:grid;gap:8px;min-width:0}.waitlist-field label{font-size:var(--fs-label);letter-spacing:.13em;text-transform:uppercase}.waitlist-field input{width:100%;min-width:0;max-width:100%;box-sizing:border-box;border:0;border-bottom:1px solid var(--line);background:transparent;padding:12px 0;outline:none}.waitlist-field input:focus{border-color:var(--ink)}.waitlist-submit{padding:15px 22px;background:var(--maroon);color:#fff;text-transform:uppercase;letter-spacing:.13em;font-size:var(--fs-ui)}.waitlist-submit:disabled{opacity:.6}.waitlist-success{display:grid;gap:10px;align-content:center;justify-items:start;width:100%;min-width:0;min-height:340px;padding:0;overflow:visible}.waitlist-success strong{font:30px var(--serif);font-weight:400}.waitlist-success span{color:var(--muted)} .founder-pick-section{padding:clamp(75px,8vw,115px) 0 90px;background:#4a111b;color:#fff;overflow:hidden}.founder-pick-header{max-width:900px;margin:0 auto 20px;padding:0 5vw;text-align:center}.founder-pick-header small{color:rgba(255,255,255,.62)}.founder-pick-carousel{position:relative;height:calc(var(--founder-w)*1.5 + clamp(110px,12vw,180px));--founder-w:min(22vw,350px);touch-action:pan-y}.founder-swiper{width:100%;height:100%;padding:0 7vw;overflow:hidden}.founder-swiper .swiper-wrapper{align-items:center}.founder-swiper .swiper-slide{width:var(--founder-w);height:auto;aspect-ratio:var(--ar,2/3);pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform}.founder-swiper .swiper-slide.swiper-slide-active{pointer-events:auto}.founder-pick-card{position:absolute;inset:0;overflow:hidden;background:var(--cream);border:0;border-radius:var(--cardR);box-shadow:0 20px 56px rgba(0,0,0,.26);transition:box-shadow .5s ease;isolation:isolate;transform:translateZ(0);-webkit-transform:translateZ(0)}.founder-swiper .swiper-slide-active .founder-pick-card{box-shadow:0 38px 96px rgba(0,0,0,.46)}.founder-pick-image{width:100%;height:100%;display:block;object-fit:cover;object-position:center;background:var(--cream);filter:blur(calc(var(--d,0) * 4px));opacity:calc(1 - var(--d,0) * .2);transition:filter .25s linear,opacity .25s linear} .karigars-section{padding:var(--section-y) var(--gutter);background:var(--paper)}.karigars-head{max-width:1280px;margin:0 auto 40px;padding:0 var(--gutter);text-align:center}.karigars-head h2{text-wrap:nowrap;font-size:clamp(30px,5.8vw,82px)}.karigars-line{display:block;white-space:nowrap}.karigars-head p{max-width:640px;margin-left:auto;margin-right:auto;color:var(--muted);font-size:var(--fs-lead)}.karigars-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}.karigar-card{background:var(--cream);overflow:hidden}.karigar-card img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .8s ease}.karigar-card:hover img{transform:scale(1.025)}.contact-icon{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round} .site-footer{position:relative;min-height:620px;color:#fff;background:#1b0e0f;overflow:hidden}.footer-video-wrap{position:absolute;inset:0}.footer-video{width:100%;height:100%;display:block;object-fit:cover}.footer-video-wrap:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,5,7,.06),rgba(20,5,7,.26))}.footer-glass{position:relative;z-index:2;margin:clamp(40px,7vw,90px) 5vw 40px;padding:clamp(30px,4vw,60px);background:rgba(226,222,216,.9);backdrop-filter:blur(26px) saturate(115%);-webkit-backdrop-filter:blur(26px) saturate(115%);border:1px solid rgba(255,255,255,.5);box-shadow:0 24px 80px rgba(0,0,0,.18);color:#191513} /* ~95% translucent glass where backdrop blur is supported so the loop film shows through; browsers without backdrop support keep the opaque cream panel above. Only the panel's fill changes — text stays opaque #191513, no parent opacity pass. Dark ink over the film stays the risk noted in the audit. */ @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.footer-glass{background:rgba(226,222,216,.05)}} .footer-brand img{width:165px;height:auto;display:block}.footer-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;border-top:1px solid rgba(25,21,19,.15);padding-top:28px}.footer-columns>div{display:grid;align-content:start;gap:10px}.footer-columns small{color:rgba(25,21,19,.66);font-size:var(--fs-ui)}.footer-columns a{font-size:var(--fs-body)}.footer-link{display:inline-flex;align-items:center;gap:8px;max-width:100%}.footer-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.footer-link .contact-icon{width:14px;height:14px;flex:0 0 auto}.footer-columns a:hover{text-decoration:underline}.footer-legal{margin-top:35px;padding-top:16px;border-top:1px solid rgba(25,21,19,.15);font-size:var(--fs-micro);letter-spacing:.1em;color:rgba(25,21,19,.64)}.footer-priority{display:none}.footer-more-toggle{display:none}.footer-more-body{display:contents}.footer-more-inner{display:contents} .reveal-section{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}.reveal-section.is-visible{opacity:1;transform:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(max-width:900px){:root{--headerH:64px}.desktop-nav{display:none}.hero-content h1{font-size:clamp(38px,7vw,62px)}.waitlist-card{grid-template-columns:1fr}.karigars-grid{grid-template-columns:repeat(3,minmax(220px,1fr));overflow-x:auto;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter);scrollbar-width:none}.karigars-grid::-webkit-scrollbar{display:none}.karigars-head{padding:0}.footer-columns{grid-template-columns:1fr 1fr}.coverflow-shell{--cover-w:min(27vw,260px)}.founder-pick-carousel{--founder-w:min(26vw,260px)}} @media(max-width:600px){.header-side button{width:44px;height:44px}.hero-banner{height:calc(100svh - var(--headerH));min-height:520px}.coverflow-shell{--cover-w:min(62vw,235px)}.coverflow-swiper{padding:0 4vw}.founder-pick-carousel{--founder-w:min(60vw,225px)}.founder-swiper{padding:0 4vw}.carousel-arrow,.founder-pick-arrow{width:38px;height:38px}.carousel-arrow.prev,.founder-pick-prev{left:3vw}.carousel-arrow.next,.founder-pick-next{right:3vw}.footer-columns{grid-template-columns:1fr 1fr}.footer-glass{margin:24px 3vw 24px;padding:28px 22px}.footer-columns{gap:22px}.waitlist-section{padding-left:3vw;padding-right:3vw}.waitlist-card{padding:30px 24px} .waitlist-field input{font-size:16px;min-height:44px} .footer-priority .footer-link{min-height:44px} .footer-more-legal-links a{display:flex;align-items:center;min-height:44px}.footer-columns a{display:flex;align-items:center;min-height:44px}} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto}.reveal-section{opacity:1;transform:none;transition:none}.cover-image,.founder-pick-card,.founder-pick-image,.karigar-card img,.site-header{transition:none!important}.hero-track{transition:none!important}.coverflow-swiper .swiper-wrapper,.founder-swiper .swiper-wrapper,.category-swiper .swiper-wrapper{transition:none!important}.hero-slide.active>img{animation:none!important}.footer-more-body,#mobileNav,.drawer,#backdrop{transition:none!important} } /* V4 — Featured Pieces controls are removed visually. The coverflow, centre focus, blur, image rotation, autoplay, swipe/drag, keyboard and product links all keep working (they are driven by the Swiper + app.js, not by these buttons); only the arrow buttons are no longer rendered. No pagination dots exist on the Featured coverflow, so nothing else is hidden. */ .product-showcase .carousel-arrow{display:none} /* Header is hard pure white in every state on every page — no translucency, no backdrop blur, no bleed-through. */ .site-header,.site-header.scrolled{background:#fff;background-color:#fff;opacity:1;backdrop-filter:none;-webkit-backdrop-filter:none} /* Artisans heading: deliberate centred composition, never an accidental wrap. .karigars-head h2 (text-wrap:nowrap) and .karigars-line (display:block; white-space:nowrap) above are what guarantee the two-line "The Artisans Behind / the Weave" heading. They are shared by the homepage section AND artisans.html, so keep them in this shared stylesheet. */ /* Mobile refinement — header, search + menu dropdowns, and footer. Desktop is untouched above 900px. */ @media(max-width:900px){ .site-footer{min-height:480px} .footer-glass{display:flex;flex-direction:column;background:rgba(226,222,216,.9);backdrop-filter:blur(14px) saturate(115%);-webkit-backdrop-filter:blur(14px) saturate(115%);text-align:center} @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.footer-glass{background:rgba(226,222,216,.05)}} .footer-brand{order:0} .footer-glass .footer-brand img{margin:0 auto} .footer-video-wrap:after{background:linear-gradient(180deg,rgba(20,5,7,.04),rgba(20,5,7,.16))} .footer-priority{order:1;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;padding:18px 0 4px;border-top:1px solid rgba(25,21,19,.15);margin-top:18px} .footer-priority .footer-link{justify-content:center} .footer-more-toggle{order:2;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin:22px 0 0;padding:14px 2px;background:transparent;border:0;border-top:1px solid rgba(25,21,19,.15);color:var(--ink);font:var(--serif);font-size:18px;text-transform:uppercase;letter-spacing:.22em;cursor:pointer} .footer-more-toggle i{font-style:normal;font-size:20px;line-height:1} .footer-more-body{order:3;display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease} .footer-more-body.open{grid-template-rows:1fr} .footer-more-inner{display:block;overflow:hidden;min-height:0} .footer-more-body .footer-columns{grid-template-columns:1fr;gap:26px;padding-top:22px;text-align:left} .footer-more-body .footer-columns>div:nth-child(2) .footer-link{display:none} .footer-more-body .footer-columns>div:nth-child(3){display:none} .footer-more-body .footer-legal{text-align:center;margin-top:26px} } /* Mobile wishlist triggers: the left-hand heart is a phone-only control (the right trio covers ≥601px), so both classes are always in the DOM but only one is visible per breakpoint. */ .header-side .header-wish-mobile{display:none} @media(max-width:600px){ /* V6 §2 — unified mobile header geometry, identical on every page. The wishlist now lives in the LEFT icon group, so both side groups carry identical content on phones: button(44) + 3px gap + button(44), plus an 8px outer gutter each. Header is a 1fr auto 1fr grid — equal-content outer tracks mean the centre auto column (the logo) sits exactly on the viewport centre at every width with no container-query shim. Side groups never overlap the logo: their combined flex width (91px) plus gutters leaves ~17px clearance @320 and grows with the viewport. */ .site-header{padding:0 6px} .header-side{gap:0} .header-side.header-left{margin-left:0;justify-self:start} .header-side.header-right{margin-right:0;justify-self:end} .logo-center{position:relative;width:clamp(68px,20vw,92px)} .logo-center img{max-width:100%;max-height:24px} /* 15-18px tall wordmark: pad the hit area to 45px without moving layout */ .logo-center::after{content:"";position:absolute;inset:-15px -6px} /* One wishlist control at a time: mobile left pair (search + wish) on phones, right trio (wish + bag + menu) above 600px. */ .header-side .header-wish-mobile{display:grid} .header-side .header-wish-desktop{display:none} } /* Completion-pass chrome: results-to-page links, guest label, footer legal links. */ .search-see-all,.drawer-page-link{display:inline-block;margin-top:18px;padding-bottom:4px;border-bottom:1px solid var(--ink);font-size:var(--fs-label);letter-spacing:.13em;text-transform:uppercase;transition:opacity .25s ease} .search-see-all:hover,.drawer-page-link:hover{opacity:.65} .drawer-hold-note{margin-top:20px;color:var(--muted);font-size:var(--fs-micro);line-height:1.65} .menu-guest{display:block;padding:10px 2px 2px;color:var(--muted);font-size:var(--fs-micro);letter-spacing:.1em;font-style:italic} .footer-more-legal{display:none} @media(max-width:900px){.footer-more-legal{display:block;margin-top:28px;padding-top:18px;border-top:1px solid rgba(25,21,19,.15);text-align:left}.footer-more-legal small{font-size:var(--fs-label);letter-spacing:.16em;color:rgba(25,21,19,.66)}.footer-more-legal-links{display:grid;gap:10px;margin-top:14px}.footer-more-legal-links a{font-size:var(--fs-body);color:rgba(25,21,19,.9)}.footer-more-legal-links a:hover{text-decoration:underline}} /* ===== FINAL MOTION / INTERACTION / VISUAL-POLISH PASS ===== Additive-only layer on the frozen baseline. Everything here is a subtle transition/transform; reduced-motion keeps it fully static. */ /* Carousel refinement: flattens sublayers and masks sub-pixel edge seams so extreme coverflow positions keep the 14px radius without corner artifacts. Shadows are untouched (mask sits only on the photography layer). */ .coverflow-shell .coverflow-swiper .swiper-slide,.founder-pick-carousel .founder-swiper .swiper-slide{transform-style:flat;-webkit-transform-style:flat;-webkit-transform:translateZ(0);transform:translateZ(0)} .cover-image,.founder-pick-image{-webkit-mask-image:linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0)} /* Featured Pieces + Founder's Pick arrows -> minimal white chevrons (positioning kept). */ .carousel-arrow,.founder-pick-arrow{width:50px;height:50px;border:0;border-radius:0;background:transparent;backdrop-filter:none;font-size:0;color:#fff;transition:opacity .2s ease,transform .2s ease} .carousel-arrow svg,.founder-pick-arrow svg{width:30px;height:30px;display:block;pointer-events:none} .carousel-arrow path,.founder-pick-arrow path{stroke-width:1.5} .carousel-arrow:hover,.founder-pick-arrow:hover{opacity:.55} .carousel-arrow.prev:hover,.founder-pick-prev:hover{transform:translateY(-50%) translateX(-5px)} .carousel-arrow.next:hover,.founder-pick-next:hover{transform:translateY(-50%) translateX(5px)} .carousel-arrow:focus-visible,.founder-pick-arrow:focus-visible{outline:2px solid #fff;outline-offset:3px} /* Founder's Pick is now navigable: the masthead and every card open the journal at /founders-pick/. These rules only neutralise the anchor's own styling so the restored section stays pixel-identical to the original non-linked markup — colour, type and box all continue to come from .founder-pick-header h2 and .founder-pick-card. */ .founder-pick-header h2 a{color:inherit;text-decoration:none} .founder-pick-card{color:inherit;text-decoration:none;cursor:pointer} .founder-pick-card:focus-visible{outline:2px solid #fff;outline-offset:3px} /* Section reveals: a tighter drop plus a restrained fabric-style unfold. */ .reveal-section{transform:translateY(20px);transition:opacity .65s ease,transform .65s ease,clip-path .7s ease;clip-path:inset(0 0 5% 0)} .reveal-section.is-visible{transform:none;clip-path:inset(0 0 0 0)} /* Editorial stagger for the artisan trio. */ .karigar-card{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease} .karigars-section.is-visible .karigar-card{opacity:1;transform:none} .karigars-section.is-visible .karigar-card:nth-child(2){transition-delay:90ms} .karigars-section.is-visible .karigar-card:nth-child(3){transition-delay:170ms} /* Restrained micro-interactions: header icons, nav underline, primary buttons. */ .header-side button{transition:opacity .2s ease,transform .2s ease} .header-side button:hover,.header-side button:focus-visible{opacity:.72} .header-side button svg{transition:transform .2s ease} .header-side button:hover svg,.header-side button:focus-visible svg{transform:scale(1.08)} .desktop-nav a{position:relative;transition:opacity .22s ease} .desktop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s ease} .desktop-nav a:hover,.desktop-nav a:focus-visible{opacity:.78} .desktop-nav a:hover::after,.desktop-nav a:focus-visible::after{transform:scaleX(1)} .p-body .p-btn,.contact-body .enquiry-submit,.waitlist-body .waitlist-submit,.notfound-body .notfound-primary,.artisans-body .artisans-cta{transition:opacity .2s ease,transform .2s ease} .p-body .p-btn:hover,.contact-body .enquiry-submit:hover,.waitlist-body .waitlist-submit:hover,.notfound-body .notfound-primary:hover,.artisans-body .artisans-cta:hover{transform:translateY(-1px)} .karigar-card img{transition:transform .6s ease} .karigar-card:hover img{transform:scale(1.02)} /* Subtle page transitions: fade in on arrival, dim on departure. */ body.page-enter{animation:pageEnter .32s ease both} @keyframes pageEnter{0%{opacity:0}100%{opacity:1}} body.page-leave{transition:opacity .24s ease;opacity:.98} /* Reduced-motion: this block loads last so it always wins on every page. */ @media(prefers-reduced-motion:reduce){ .reveal-section{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important} .karigar-card{opacity:1;transform:none;transition:none} .karigar-card img,.header-side button,.header-side button svg,.desktop-nav a,.desktop-nav a::after,.carousel-arrow,.founder-pick-arrow{transition:none!important} .desktop-nav a::after{transform:scaleX(1)} .page-enter,.page-leave{animation:none!important;transition:none!important} } /* =================================================================== HOMEPAGE MOBILE REFINEMENT Phones only. Every rule below sits inside a max-width query, so no desktop or tablet layout is altered. Verified at 320 / 360 / 390 / 430. 1 HEADER The logo is the grid's `auto` column, i.e. mathematically centred, while the three right-hand controls are 144px wide. A centred 100px wordmark therefore overlapped the wishlist button by 46px @320, 26px @360 and 11px @390. The wordmark is now fluid and the icon group tighter; where centring still cannot clear the group, the logo takes the smallest optical shift that does (never an overlap). 2 HERO Measured white-text contrast against the composited backdrop was 2.04:1-3.04:1 (WCAG fail) because the scrim only reached 22% black over a bright lower third. The scrim is deepened on the lower band only, leaving the top of the photograph clean. The CTA and the slide dots gain 44px hit areas via pseudo-elements, so neither the type nor the layout moves. 3 FEATURED 42px display type was oversized at 320 and crowded the view-all link; the overlay gains width on a narrow card. 4 FOUNDER The photograph is the editorial subject here, so the active card is enlarged; still only founder photography, uncropped. 5 WAITLIST Was 908px tall at 320, largely from a 340px min-height on an otherwise short form. Compacted without touching the form. 6 CATEGORY The third card sat entirely off-screen at 360-430, so the carousel looked like a dead end. Arrows move below the track, which frees the full width and always leaves a visible sliver. 7 ARTISANS Three fixed 220px cards in a bare overflow box; now a snap-scroller with one dominant card and a clear peek. 8 FOOTER Reduced type scale, tighter spacing, smaller foreground logo. =================================================================== */ /* ---- 1. MOBILE HEADER ---------------------------------------------- V6 §2 — the header geometry (padding, gaps, fluid logo, optical shift) is now UNIFIED for all pages in the V6 header block near line 77; the old home-body-scoped fluid logo + stepped -32/-14/-2px shift bands were replaced by one continuous formula that applies site-wide and clears the right icon group by >=2px at every width. The section rules below still need no scope because those classes exist only in front-page.php. */ /* ---- 2. HERO --------------------------------------------------------- Moved to hero.css: it loads after this file (it depends on sitaara-styles) and owns .hero-dot / .hero-dots, so equal-specificity rules here would silently lose. */ /* ---- 3. FEATURED PIECES --------------------------------------------- */ @media(max-width:600px){ .product-showcase{padding:clamp(56px,15vw,70px) 0 clamp(64px,17vw,90px)} .showcase-head{gap:14px} .showcase-head h2{font-size:clamp(32px,9vw,42px)} .cover-overlay{padding:44px 16px 16px} .cover-overlay span{letter-spacing:.12em} } /* ---- 4. FOUNDER'S PICK ---------------------------------------------- */ @media(max-width:600px){ .founder-pick-section{padding:clamp(56px,15vw,75px) 0 clamp(60px,16vw,90px)} .founder-pick-header{margin:0 auto 14px} .founder-pick-header h2{font-size:clamp(32px,9vw,42px)} .founder-pick-carousel{--founder-w:min(66vw,248px)} } /* ---- 5. WAITLIST ----------------------------------------------------- */ @media(max-width:600px){ .waitlist-section{padding:clamp(52px,14vw,66px) 4vw} .waitlist-card{padding:26px 20px;gap:18px} .waitlist-copy h2{margin:6px 0 12px;font-size:clamp(27px,7.4vw,32px);line-height:1.06} .waitlist-copy p{font-size:15.5px;line-height:1.6} /* the 340px floors reserved desktop-height space for a short form */ .waitlist-form-wrap{min-height:0} .waitlist-success{min-height:0;padding:0} .waitlist-form{gap:14px} .waitlist-field{gap:6px} .waitlist-field input{font-size:16px;min-height:48px} .waitlist-submit{min-height:48px} } /* ---- 6. CATEGORIES --------------------------------------------------- Moved to categories.css: it loads after this file (both depend on sitaara-styles), so equal-specificity rules here would lose. */ /* ---- 7. ARTISANS ----------------------------------------------------- */ @media(max-width:600px){ .karigars-section{padding:clamp(54px,14vw,68px) 0} .karigars-head{padding:0 var(--gutter);margin:0 auto 26px} .karigars-head h2{font-size:clamp(25px,7.2vw,30px)} .karigars-head p{font-size:15.5px;line-height:1.65} /* one dominant card + a clear peek, with snap so it never feels accidental */ .karigars-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0 var(--gutter) 6px;margin-right:0;scrollbar-width:none} .karigars-grid::-webkit-scrollbar{display:none} .karigar-card{flex:0 0 68vw;max-width:250px;scroll-snap-align:center} } /* ---- 8. FOOTER ------------------------------------------------------- Also shared chrome, so scoped to the front page for the same reason. */ @media(max-width:600px){ body.home-body .site-footer{min-height:400px} body.home-body .footer-glass{margin:18px 3vw 22px;padding:24px 18px} body.home-body .footer-brand img{width:132px} body.home-body .footer-priority{gap:18px;padding:14px 0 2px;margin-top:14px} body.home-body .footer-more-toggle{font-size:15px;letter-spacing:.18em;margin:18px 0 0;padding:12px 2px} body.home-body .footer-columns a,body.home-body .footer-more-legal-links a{font-size:15px} body.home-body .footer-more-body .footer-legal{margin-top:18px} body.home-body .footer-more-legal{margin-top:20px;padding-top:14px} } /* ---- 9. WISHLIST HEART (shared product-card component) --------------- Moved out of shop.css in V6 so EVERY surface that renders a product card styles one identical circular save-heart: /shop/, the Collections "All pieces" grid, the textile archives, the homepage Featured coverflow, the product-page related row and the liked-collection page. Behaviour stays with app.js: cards outside /shop/ carry data-wish (the one global delegated handler) while /shop/ keeps data-shop-wish + its own binding, and renderUtilities() paints is-wished/aria-pressed on every state change — one visual system, one wishlist state. */ .shop-wish { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(23, 19, 17, .14); border-radius: 50%; background: rgba(251, 250, 247, .84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; transition: background .2s ease, transform .2s ease; } .shop-wish:hover, .shop-wish:focus-visible { background: rgba(251, 250, 247, .99); } .shop-wish:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .shop-wish:active { transform: scale(.94); } /* Heart drawn with the same inline SVG the header and product page use: every renderer carries the shared .shop-wish-icon class (now the itself), so no icon-toggling logic changes and the accessible name stays on the button. */ .shop-wish-icon { display: block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .shop-wish.is-wished .shop-wish-icon { fill: var(--maroon); stroke: var(--maroon); } /* Whole-tile anchors: the heart sits on a positioned wrapper OUTSIDE the link (a button inside an is invalid HTML and would navigate), so toggling never follows the card. */ .collection-card-wrap { position: relative; } .collection-card-wrap > a { display: block; height: 100%; } /* Featured coverflow: side frames are defocused via --d (see the .cover-image coverflow rule above); the heart follows the exact same blur/opacity so no crisp glyph floats over a blurred card. Clicks already gate to the centre frame through the swiper slides' pointer-events. */ .coverflow-swiper .swiper-slide .shop-wish { filter: blur(calc(var(--d, 0) * 4px)); opacity: calc(1 - var(--d, 0) * .2); transition: filter .25s linear, opacity .8s ease-in-out, background .2s ease, transform .2s ease; } @media (prefers-reduced-motion: reduce) { .shop-wish, .shop-wish-icon { transition: none; } } /* Waitlist consent + inline errors + honeypot (Phase 2 consent-aware build). */ .waitlist-consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-micro);color:var(--muted);line-height:1.55;cursor:pointer} .waitlist-consent input{width:auto;margin:2px 0 0;accent-color:var(--maroon)} .waitlist-error{margin:-4px 0 0;color:#a43a2c;font-size:var(--fs-micro);line-height:1.5;font-weight:500} .sitaara-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden} .waitlist-submit:disabled{opacity:.55;cursor:wait} @media(max-width:600px){.waitlist-consent{font-size:13px}} /* =================================================================== FEATURED PIECES — "SHOP BY COLLECTION" tabs + The Boardroom Boss Additive-only layer. Banarasi Edit (default) keeps the existing maroon coverflow untouched; The Boardroom Boss swaps to an ivory stage with a blurred, looping Founder's Pick film behind a sharp COMING SOON message. Only presentation changes — the coverflow markup, Swiper and every product link are untouched, and switching back restores Banarasi Edit exactly. Reduced motion stays static. =================================================================== */ .product-showcase{transition:background-color .35s ease,color .35s ease} /* Heading — small label promoted to a real h2 (keeps the section in the document outline) and styled as the established kicker. */ .product-showcase .pf-kicker{margin:0;font:var(--fs-label)/1 var(--sans);font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62)} .pf-tabs{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px} .pf-tab{position:relative;padding:6px 0;font:clamp(22px,2.6vw,34px)/1 var(--serif);color:rgba(255,255,255,.55);text-align:left;transition:color .25s ease} .pf-tab::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s ease} .pf-tab:hover,.pf-tab:focus-visible{color:#fff} .pf-tab.is-active{color:#fff} .pf-tab.is-active::after{transform:scaleX(1)} .pf-tab:focus-visible{outline:2px solid currentColor;outline-offset:4px} .pf-panel{position:relative} .pf-panel--banarasi.is-active{animation:pfFadeIn .4s ease both} /* The Boardroom Boss stage — full-bleed within the section; layers fill it. */ .pf-panel--boardroom{isolation:isolate;overflow:hidden;min-height:min(72vh,620px);display:grid;place-items:center} .pf-blur{position:absolute;inset:0;z-index:0;overflow:hidden} /* No track gap: the right margin on each frame keeps one set's width exact, so translateX(-50%) lands precisely one identical set along and loops seamlessly. */ .pf-blur-track{position:absolute;top:0;left:0;height:100%;width:max-content;display:flex;align-items:center;animation:pfMarquee 64s linear infinite} .pf-blur-track img{height:min(78%,520px);width:auto;object-fit:contain;border-radius:var(--cardR);filter:blur(16px) saturate(.9);opacity:.5;margin-right:clamp(14px,2vw,28px)} /* Soft veil so the sharp message always clears contrast over the film. */ .pf-blur::after{content:"";position:absolute;inset:0;background:rgba(251,250,247,.35)} .pf-soon{position:relative;z-index:1;text-align:center;padding:clamp(60px,12vw,150px) 5vw;max-width:760px} .pf-soon-kicker{color:var(--muted)} .pf-soon-title{margin:10px 0 18px;font:clamp(46px,8vw,104px)/.94 var(--serif);font-weight:400;color:var(--ink);text-transform:uppercase;letter-spacing:.04em} .pf-soon-title i{font-style:italic} .pf-soon-copy{color:var(--muted);font-size:var(--fs-lead);max-width:520px;margin:0 auto 26px} .pf-soon-link{display:inline-block;padding-bottom:5px;border-bottom:1px solid var(--ink);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;transition:opacity .25s ease} .pf-soon-link:hover{opacity:.6} /* Boardroom STATE on the section: ivory stage with ink text. */ .product-showcase.is-boardroom{background:var(--paper);color:var(--ink)} .product-showcase.is-boardroom .pf-kicker{color:var(--muted)} .product-showcase.is-boardroom .pf-tab{color:rgba(23,19,17,.5)} .product-showcase.is-boardroom .pf-tab:hover,.product-showcase.is-boardroom .pf-tab:focus-visible,.product-showcase.is-boardroom .pf-tab.is-active{color:var(--ink)} .product-showcase.is-boardroom .view-all{color:var(--muted)} @keyframes pfFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes pfMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(max-width:600px){ .pf-tabs{gap:6px 16px} .pf-panel--boardroom{min-height:min(64vh,520px)} .pf-blur-track img{height:min(70%,360px);filter:blur(12px)} .pf-soon{padding:clamp(48px,13vw,90px) 6vw} } @media(prefers-reduced-motion:reduce){ .product-showcase{transition:none} .pf-panel--banarasi.is-active{animation:none} .pf-blur-track{animation:none} } /* Header "Categories" disclosure dropdown (Phase 5). Reuses the header nav type scale; opens on hover, focus-within (keyboard) and JS click. */ .nav-drop{position:relative;display:inline-flex;align-items:center} .nav-drop-toggle{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;letter-spacing:.15em;text-transform:uppercase;line-height:1;opacity:.9;color:inherit;background:none;border:0;padding:0;cursor:pointer;min-height:38px;transition:opacity .22s ease} .nav-drop-toggle:hover,.nav-drop-toggle:focus-visible{opacity:.72} .nav-drop-chevron{width:11px;height:11px;stroke-width:1.6;transition:transform .25s ease} .nav-drop:hover .nav-drop-chevron,.nav-drop.is-open .nav-drop-chevron{transform:rotate(180deg)} .nav-drop-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);min-width:236px;padding:12px 0;border-top:14px solid transparent;background:var(--paper);background-clip:padding-box;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;box-shadow:0 24px 55px rgba(23,19,17,.16);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,transform .22s ease,visibility .22s ease;z-index:30} .nav-drop:hover .nav-drop-panel,.nav-drop.is-open .nav-drop-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} .nav-drop-panel a{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 22px;white-space:nowrap;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:.9;transition:background .18s ease,opacity .18s ease,padding-left .18s ease} .nav-drop-panel a:hover,.nav-drop-panel a:focus-visible{opacity:1;background:rgba(90,24,37,.06);padding-left:26px} .nav-drop-panel a em{font-style:normal;font-size:9px;letter-spacing:.18em;color:var(--maroon);opacity:.72;border:1px solid currentColor;border-radius:999px;padding:1px 7px} .nav-drop-all{border-top:1px solid var(--line);margin-top:8px;padding-top:13px} .mobile-nav-group em{font-style:normal;font-size:9px;letter-spacing:.18em;color:var(--maroon);opacity:.72;border:1px solid currentColor;border-radius:999px;padding:1px 7px;margin-left:6px} /* Card purchase UI (Phase 6) — price + add-to-bag, shown only when commerce is live (helpers in inc/catalog.php emit nothing while catalogue mode is on). */ .shop-buy{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;margin:6px 0 0;flex-wrap:wrap} .shop-price{font-family:var(--serif);font-size:var(--fs-body);color:var(--ink);letter-spacing:.02em} .shop-price del{color:var(--muted);opacity:.7;margin-right:6px} .shop-price ins{text-decoration:none} .shop-add{display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border-radius:999px;background:var(--maroon);color:var(--paper);font-family:var(--sans);font-size:var(--fs-label);line-height:1;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .2s ease,transform .2s ease} .shop-add:hover,.shop-add:focus-visible{background:var(--maroon2);transform:translateY(-1px)} .collection-price{display:block;margin-top:8px;font-family:var(--serif);font-size:var(--fs-body);color:var(--ink)} .collection-card-wrap .shop-add{margin-top:12px;width:100%;justify-content:center} /* The shared whole-tile rule `.collection-card-wrap > a{display:block;height:100%}` also matches this , which would stretch the button over the whole card and mislead the contrast checker — keep the pill geometry. */ .collection-card-wrap > a.shop-add{display:inline-flex;height:auto} .collections-filter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto clamp(24px,3vw,38px);max-width:920px} .collections-filter button{appearance:none;border:1px solid var(--line);background:transparent;color:var(--muted);font-family:var(--sans);font-size:var(--fs-micro);line-height:1;letter-spacing:.14em;text-transform:uppercase;padding:9px 16px;border-radius:999px;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease} .collections-filter button:hover{border-color:var(--maroon);color:var(--maroon)} .collections-filter button:focus-visible{outline:2px solid var(--maroon);outline-offset:2px} .collections-filter button.is-active{background:var(--maroon);border-color:var(--maroon);color:var(--paper)} .collection-card-wrap.is-filtered-out{display:none} @media(prefers-reduced-motion:reduce){.shop-add{transition:none}.shop-add:hover,.shop-add:focus-visible{transform:none}} /* Accessibility (Phase 12). */ /* A-03: skip repeated navigation. The target span sits between the fixed header and
; reveal the link only when focused. */ .skip-link{position:absolute;left:12px;top:-64px;z-index:2000;background:var(--ink);color:var(--paper);padding:11px 20px;font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;border-radius:0 0 12px 12px;transition:top .2s ease} .skip-link:focus{top:0;outline:2px solid var(--maroon);outline-offset:2px} #maincontent{outline:none} /* The artisan strip is horizontally scrollable on phones; make the region keyboard-focusable and give it a visible focus ring (scrollable-region-focusable). */ .karigars-grid:focus-visible{outline:2px solid var(--maroon);outline-offset:2px} /* A-04: where a field's outline was removed for the underline treatment, keep a visible keyboard focus ring (focus-visible only, so pointer users are unaffected). */ .drawer input:focus-visible, .p-field input:focus-visible,.p-field select:focus-visible,.p-field textarea:focus-visible, .waitlist-field input:focus-visible, .enquiry-field input:focus-visible,.enquiry-field select:focus-visible,.enquiry-field textarea:focus-visible, .woocommerce input:focus-visible,.woocommerce select:focus-visible,.woocommerce textarea:focus-visible, .woocommerce a:focus-visible,.woocommerce button:focus-visible{outline:2px solid var(--maroon);outline-offset:2px} @media(prefers-reduced-motion:reduce){.skip-link{transition:none}} /* ===================================================================== ITERATION 2 / 3 — HEADER + HAMBURGER ACCORDION The desktop primary nav carries exactly three links in v1.3: SHOP / COLLECTIONS / FOUNDER'S PICK (the Iteration-2 "Categories" dropdown was removed — categories now live in the Shop filter drawer and the hamburger's Categories accordion). These rules stop the side groups reaching the centred logo and stop the three links wrapping at any desktop width. ===================================================================== */ .header-side{min-width:0} .desktop-nav{white-space:nowrap;align-items:center} .desktop-nav a,.nav-drop-toggle{white-space:nowrap} @media(min-width:901px) and (max-width:1180px){ .desktop-nav{gap:14px;margin-left:4px} } /* The 901–1000px band is the tightest: the three links plus the search button sit closest to the centred logo here. Trim the gap and tracking slightly so the clearance never drops below ~28px (measured: 11px at 901 before this). */ @media(min-width:901px) and (max-width:1000px){ .desktop-nav{gap:10px} .desktop-nav a{letter-spacing:.12em} } /* Real accordion groups inside the hamburger menu. Each toggle is a full-width row with a chevron; its panel is hidden until opened and the panel scrolls with the menu, so the menu can never grow past its own max-height. */ #mobileNav .mobile-nav-group{margin-top:6px} #mobileNav .mobile-nav-group:first-of-type{margin-top:0} #mobileNav .mobile-nav-toggle{ display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%;min-height:48px;padding:12px 2px;border:0;border-bottom:1px solid var(--line); background:none;cursor:pointer;text-align:left;color:var(--ink); font-family:var(--sans);font-size:var(--fs-label);font-style:normal;font-weight:400; line-height:1.2;letter-spacing:.18em;text-transform:uppercase; } #mobileNav .mobile-nav-toggle:hover, #mobileNav .mobile-nav-toggle:focus-visible{color:var(--maroon)} #mobileNav .mobile-nav-toggle:focus-visible{outline:2px solid var(--maroon);outline-offset:2px} #mobileNav .mobile-nav-chevron{flex:0 0 auto;width:12px;height:12px;stroke-width:1.7;transition:transform .25s ease} #mobileNav .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-chevron{transform:rotate(180deg)} #mobileNav .mobile-nav-panel{display:flex;flex-direction:column;padding:4px 0 6px} #mobileNav .mobile-nav-panel[hidden]{display:none} @media(prefers-reduced-motion:reduce){#mobileNav .mobile-nav-chevron{transition:none}} /* Iteration 2 — the page behind a full-height side drawer (bag / wishlist / shop filter) must not scroll. The class is toggled from assets/app.js. */ body.sitaara-scroll-lock{overflow:hidden}