/* ========================================================================== KAVITA TRADERS — Nail Art, Cosmetics & Make Up Vadodara, Gujarat · Wholesale to salons & academies · Pan-India Design system: "quiet luxury" — porcelain, ink, champagne gold ========================================================================== */ :root{ /* ---- surface: deep olive · sage · brass ---- */ --ink: #2B2B24; --ink-2: #35352D; --ink-3: #4E4F44; --porcelain: #F8F7F2; --porcelain-2:#EFEEE6; --porcelain-3:#E2E1D7; --blush: #DDE3DC; /* sage pale */ --white: #FFFFFF; /* ---- accent ---- */ --sage: #818F86; --sage-lt: #A3AEA1; --gold: #C8B26C; --gold-lt: #E2D3A0; --gold-dp: #9A8846; --rose: #9C5F4A; /* muted brick, used only for savings */ --taupe: #7C7A6C; --taupe-lt: #9B9A8B; --gold-grad: linear-gradient(115deg,#9A8846 0%,#E2D3A0 42%,#C8B26C 74%,#F0E6C4 100%); --gold-rule: linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold-lt) 50%,var(--gold) 78%,transparent); --line: rgba(43,43,36,.13); --line-2: rgba(43,43,36,.07); --line-gold: rgba(200,178,108,.42); --line-dark: rgba(255,255,255,.14); --wa: #25D366; --wa-dp: #146B57; --amz: #C8B26C; --sh-xs: 0 1px 3px rgba(35,35,28,.05); --sh-sm: 0 3px 14px rgba(35,35,28,.07); --sh-md: 0 14px 40px rgba(35,35,28,.11); --sh-lg: 0 34px 80px rgba(35,35,28,.18); --r: 2px; /* luxury = sharp, not bubbly */ --r-md: 3px; --maxw: 1280px; --gutter: clamp(20px,5vw,56px); --ease: cubic-bezier(.22,.68,.28,1); --ease-out: cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box} /* `overflow-x:clip` NOT `hidden`. `hidden` turns the element into a scroll container, which makes it the nearest scrollport for `position:sticky` descendants — that silently breaks the pinned product gallery and leaves a blank screen. `clip` crops identically without creating a scrollport. */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } body{ margin:0; font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16px;line-height:1.68;font-weight:300; color:var(--ink-2);background:var(--porcelain); overflow-x:clip; /* see the note on above — must not be `hidden` */ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:none;color:inherit} input,textarea,select{font-family:inherit;font-size:inherit;color:inherit} ul{margin:0;padding:0;list-style:none} ::selection{background:var(--gold-lt);color:var(--ink)} /* Playfair sets considerably wider than the Cormorant this replaced, so the scale is pulled back and the leading opened up to suit it. */ h1,h2,h3,h4{ font-family:"Playfair Display",Georgia,"Times New Roman",serif; font-weight:400;line-height:1.1;margin:0;color:var(--ink); letter-spacing:-.012em; } h1{font-size:clamp(2.35rem,5.2vw,4.25rem);line-height:1.06} h2{font-size:clamp(1.85rem,3.5vw,2.85rem)} h3{font-size:clamp(1.08rem,1.7vw,1.32rem)} em,.it{font-style:italic} /* ---------- layout utilities ---------- */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .wrap-narrow{max-width:940px;margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:clamp(64px,9vw,132px)} .section-tight{padding-block:clamp(44px,6vw,84px)} .center{text-align:center} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} .eyebrow{ display:inline-flex;align-items:center;gap:.7em; font-size:.66rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase; color:var(--gold-dp); } .eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.7} .eyebrow.no-rule::before{display:none} .eyebrow.c{justify-content:center} .gold-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .serif{font-family:"Playfair Display",serif} .muted{color:var(--taupe)} .lead{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--ink-3);font-weight:300;line-height:1.75;max-width:min(56ch,100%)} /* Grid/flex children default to min-width:auto, which lets long words and ch-based max-widths blow out the track on narrow screens. Opt them out. */ .hero-grid > *,.feature > *,.trade > *,.about-hero > *,.contact-grid > *, .cta-band > *,.shead > *,.why > *,.card > *,.ci > *,.timeline li > *{min-width:0} .shead .st,.cta-band .ct{max-width:100%} /* gold hairline with a diamond */ .rule{display:flex;align-items:center;justify-content:center;gap:1rem;margin-block:1.6rem} .rule::before,.rule::after{content:"";height:1px;flex:1;max-width:130px;background:var(--gold-rule)} .rule i{color:var(--gold);font-style:normal;font-size:.5rem;letter-spacing:.4em} /* ---------- buttons ---------- */ .btn{ --bg:var(--ink);--fg:#fff;--bd:var(--ink); position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em; padding:1.02em 2.1em;border:1px solid var(--bd);border-radius:var(--r); font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase; color:var(--fg);background:var(--bg); overflow:hidden;isolation:isolate;white-space:nowrap; transition:color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease); } .btn::before{ content:"";position:absolute;inset:0;z-index:-1;background:var(--gold-grad); transform:translateY(100%);transition:transform .55s var(--ease-out); } .btn:hover{color:#fff;border-color:transparent;transform:translateY(-2px)} .btn:hover::before{transform:translateY(0)} .btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .btn-ghost{--bg:transparent;--fg:var(--ink);--bd:var(--ink)} .btn-line{--bg:transparent;--fg:var(--ink);--bd:var(--line-gold)} .btn-light{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.4)} .btn-wa{--bg:var(--wa-dp);--fg:#fff;--bd:var(--wa-dp)} .btn-wa::before{background:linear-gradient(115deg,#25D366,#146B57)} .btn-sm{padding:.75em 1.35em;font-size:.63rem;letter-spacing:.18em} .btn-lg{padding:1.15em 2.6em;font-size:.75rem} .btn-block{display:flex;width:100%} .tlink{ position:relative;display:inline-flex;align-items:center;gap:.55em; font-size:.7rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink); padding-bottom:.35em; } .tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)} .tlink:hover::after{transform:scaleX(1);transform-origin:left} .tlink svg{transition:transform .4s var(--ease)} .tlink:hover svg{transform:translateX(5px)} .tlink.light{color:#fff} /* ---------- announcement marquee ---------- */ .announce{background:var(--ink);color:#E6E4D8;overflow:hidden;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase} .announce .track{display:flex;width:max-content;gap:3.2rem;padding-block:.72rem;animation:marq 46s linear infinite} .announce span{display:inline-flex;align-items:center;gap:.75rem;white-space:nowrap;font-weight:300} .announce b{color:var(--gold-lt);font-weight:500} .announce i{color:var(--gold);font-style:normal;font-size:.45rem} @keyframes marq{to{transform:translateX(-50%)}} .announce:hover .track{animation-play-state:paused} /* ---------- header ---------- */ .site-header{ position:sticky;top:0;z-index:70; background:rgba(248,247,242,.88); backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3); border-bottom:1px solid transparent;transition:border-color .4s,box-shadow .4s; } .site-header.scrolled{border-color:var(--line-2);box-shadow:var(--sh-xs)} .nav{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;height:82px} .brand{display:flex;align-items:center;gap:.85rem;flex-shrink:0} .brand .mark{ width:44px;height:44px;flex-shrink:0;display:grid;place-items:center; border:1px solid var(--line-gold);border-radius:50%; font-family:"Playfair Display",serif;font-size:1.35rem;font-weight:300;color:var(--gold-dp); transition:border-color .4s,color .4s; } .brand:hover .mark{border-color:var(--gold);color:var(--gold)} .brand .bt{display:flex;flex-direction:column;line-height:1;gap:5px} .brand .bt b{font-family:"Playfair Display",serif;font-size:1.32rem;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)} .brand .bt small{font-size:.53rem;letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);font-weight:400} .nav-links{display:flex;align-items:center;gap:2.1rem} .nav-links a{position:relative;font-size:.71rem;font-weight:400;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);padding-block:.4rem;transition:color .35s} .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)} .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)} .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left} .nav-actions{display:flex;align-items:center;gap:.3rem} .icon-btn{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--ink);transition:background .3s,color .3s} .icon-btn:hover{background:var(--porcelain-2);color:var(--gold-dp)} .icon-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px} .icon-btn .badge{ position:absolute;top:5px;right:3px;min-width:18px;height:18px;padding:0 5px; display:grid;place-items:center;border-radius:999px; background:var(--ink);color:var(--gold-lt);font-size:.58rem;font-weight:500;letter-spacing:.02em; } .hamburger{display:none} /* ---------- mobile drawer ---------- */ .drawer{ position:fixed;inset:0 0 0 auto;width:min(88vw,368px);z-index:95; background:var(--porcelain);box-shadow:var(--sh-lg); transform:translateX(101%);transition:transform .55s var(--ease-out); display:flex;flex-direction:column;padding:1.5rem 1.6rem 2.2rem;overflow-y:auto; } .drawer.open{transform:translateX(0)} .drawer .dclose{align-self:flex-end;width:42px;height:42px;display:grid;place-items:center;font-size:1.5rem;color:var(--ink);font-weight:300} .drawer .dbrand{font-family:"Playfair Display",serif;font-size:1.2rem;letter-spacing:.1em;text-transform:uppercase;padding-bottom:1.1rem;border-bottom:1px solid var(--line);margin-bottom:.4rem} .drawer nav a{ display:flex;align-items:center;justify-content:space-between; padding:1.02rem .1rem;border-bottom:1px solid var(--line-2); font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2); transition:color .3s,padding-left .35s var(--ease); } .drawer nav a:hover{color:var(--gold-dp);padding-left:.5rem} .drawer nav a span{color:var(--gold);font-size:.8rem} .drawer .dcta{margin-top:1.8rem;display:flex;flex-direction:column;gap:.7rem} .scrim{position:fixed;inset:0;z-index:85;background:rgba(43,43,36,.55);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s} .scrim.show{opacity:1;visibility:visible} /* ========================================================================== HERO ========================================================================== */ .hero{position:relative;background:var(--ink);color:#EDEBE0;overflow:hidden} .hero::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background:radial-gradient(120% 80% at 78% 18%,rgba(200,178,108,.20),transparent 62%), radial-gradient(90% 70% at 8% 92%,rgba(129,143,134,.26),transparent 60%); } .hero-grid{ position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr; gap:clamp(2rem,5vw,5rem);align-items:center; padding-block:clamp(70px,10vw,142px); } .hero .eyebrow{color:var(--gold-lt)} .hero .eyebrow::before{background:var(--gold-lt)} .hero h1{color:#FAF9F3;margin-block:1.5rem 1.4rem;font-weight:300} .hero h1 em{font-style:italic;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .hero .lead{color:rgba(237,235,224,.74);max-width:50ch} .hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.4rem} .hero-stats{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:clamp(1.4rem,3vw,2.6rem);margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line-dark)} .hero-stats div{display:flex;flex-direction:column;gap:.25rem} .hero-stats b{font-family:"Playfair Display",serif;font-size:1.7rem;font-weight:400;color:var(--gold-lt);line-height:1;white-space:nowrap} .hero-stats small{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(237,235,224,.5)} .hero-media{position:relative} .hero-media .frame{ position:relative;overflow:hidden;border-radius:var(--r); aspect-ratio:5/4;box-shadow:var(--sh-lg); } .hero-media .frame::after{content:"";position:absolute;inset:0;border:1px solid rgba(226,211,160,.28);pointer-events:none} .hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.4s var(--ease-out)} .hero-media:hover img{transform:scale(1.07)} .hero-tag{ position:absolute;left:-26px;bottom:-24px;z-index:3; display:flex;align-items:center;gap:.85rem; background:var(--porcelain);color:var(--ink); padding:.95rem 1.4rem;box-shadow:var(--sh-md);border-radius:var(--r); border-left:2px solid var(--gold); } .hero-tag b{font-family:"Playfair Display",serif;font-size:1.2rem;font-weight:500;display:block;line-height:1.1} .hero-tag small{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)} .hero-verified{ display:inline-flex;align-items:center;gap:.5em;margin-top:2.2rem; padding:.5em 1em .5em .8em;border:1px solid var(--line-dark);border-radius:999px; color:var(--gold-lt);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase; transition:border-color .4s,color .4s; } .hero-verified:hover{border-color:var(--gold);color:#FAF9F3} .hero-verified + .hero-stats{margin-top:1.6rem} /* ---------- brand strip ---------- */ .brandstrip{background:var(--porcelain-2);border-block:1px solid var(--line-2);overflow:hidden} .brandstrip .inner{display:flex;align-items:center;gap:clamp(2rem,5vw,4.5rem);padding-block:1.5rem;width:max-content;animation:marq 38s linear infinite} .brandstrip span{ font-family:"Playfair Display",serif;font-size:clamp(1.05rem,1.9vw,1.5rem); letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);white-space:nowrap; transition:color .4s; } .brandstrip span:hover{color:var(--gold-dp)} .brandstrip i{color:var(--gold);font-size:.4rem;font-style:normal} .brandstrip:hover .inner{animation-play-state:paused} /* ---------- section heads ---------- */ .shead{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:clamp(2rem,4vw,3.4rem);flex-wrap:wrap} .shead .st{max-width:62ch} .shead h2{margin-block:.9rem .7rem} .shead p{color:var(--taupe);margin:0;font-size:.98rem;max-width:52ch} .shead.c{flex-direction:column;align-items:center;text-align:center} .shead.c .st{display:flex;flex-direction:column;align-items:center} /* ========================================================================== CATEGORY EDITORIAL GRID ========================================================================== */ .catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.3vw,18px)} .cat{ position:relative;overflow:hidden;border-radius:var(--r); aspect-ratio:3/4;display:block;background:var(--ink-2); box-shadow:var(--sh-sm); } .cat.tall{grid-row:span 2;aspect-ratio:3/8.2} .cat.wide{grid-column:span 2;aspect-ratio:3/2} .cat img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease-out),filter .7s} .cat:hover img{transform:scale(1.075)} .cat .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(28,28,22,.85) 4%,rgba(28,28,22,.22) 46%,transparent 76%);transition:background .5s} .cat:hover .veil{background:linear-gradient(to top,rgba(28,28,22,.9) 8%,rgba(28,28,22,.36) 56%,rgba(28,28,22,.08) 100%)} .cat .cnum{position:absolute;top:1.15rem;left:1.3rem;z-index:2;font-size:.6rem;letter-spacing:.28em;color:var(--gold-lt);opacity:.85} .cat .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.5rem 1.4rem} .cat .cap h3{color:#fff;font-size:clamp(1.15rem,1.8vw,1.62rem);font-weight:400} .cat .cap span{display:block;margin-top:.35rem;font-size:.63rem;letter-spacing:.19em;text-transform:uppercase;color:rgba(255,255,255,.62)} .cat .cap .go{display:inline-flex;align-items:center;gap:.45em;margin-top:.9rem;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lt);opacity:0;transform:translateY(7px);transition:opacity .45s var(--ease),transform .45s var(--ease)} .cat:hover .cap .go{opacity:1;transform:translateY(0)} .cat .ph{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(145deg,var(--porcelain-3),var(--blush))} .cat .ph svg{width:34%;max-width:96px;color:var(--gold-dp);opacity:.5} /* ========================================================================== PRODUCT CARD ========================================================================== */ .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,34px)} .prail{ display:grid;grid-auto-flow:column;grid-auto-columns:minmax(252px,1fr); gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory; padding-bottom:1.4rem;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter); scrollbar-width:thin;scrollbar-color:var(--line-gold) transparent; } .prail > *{scroll-snap-align:start} .prail::-webkit-scrollbar{height:2px} .prail::-webkit-scrollbar-track{background:var(--line-2)} .prail::-webkit-scrollbar-thumb{background:var(--gold)} .card{position:relative;display:flex;flex-direction:column;background:transparent} .card .media{ position:relative;overflow:hidden;border-radius:var(--r); aspect-ratio:1/1;background:var(--porcelain-2); } .card .media::after{content:"";position:absolute;inset:0;border:1px solid var(--line-2);pointer-events:none;transition:border-color .5s} .card:hover .media::after{border-color:var(--line-gold)} .card .media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform 1.2s var(--ease-out),opacity .6s var(--ease); } .card .img-alt{opacity:0} .card:hover .img-main{opacity:0;transform:scale(1.05)} .card:hover .img-alt{opacity:1;transform:scale(1.05)} .card:hover .media img:only-of-type{opacity:1;transform:scale(1.06)} .card .ph{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(145deg,var(--porcelain-2),var(--blush))} .card .ph svg{width:38%;max-width:104px;color:var(--gold-dp);opacity:.42} .badges{position:absolute;top:.85rem;left:.85rem;z-index:3;display:flex;flex-direction:column;gap:.34rem;align-items:flex-start} .pill{ font-size:.53rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500; padding:.4em .78em;border-radius:var(--r);background:var(--porcelain);color:var(--ink); box-shadow:var(--sh-xs); } .pill-signature{background:var(--ink);color:var(--gold-lt)} .pill-best{background:var(--ink);color:#fff} .pill-new{background:var(--gold);color:#fff} .pill-whole{background:var(--porcelain);color:var(--gold-dp);border:1px solid var(--line-gold)} .pill-counter{background:var(--blush);color:var(--ink-3)} .pill-off{background:var(--rose);color:#fff} .wish{ position:absolute;top:.8rem;right:.8rem;z-index:3;width:34px;height:34px; display:grid;place-items:center;border-radius:50%; background:rgba(248,247,242,.92);color:var(--ink-3);backdrop-filter:blur(6px); opacity:0;transform:translateY(-5px);transition:opacity .4s,transform .4s,color .3s,background .3s; } .card:hover .wish,.wish.on,.wish:focus-visible{opacity:1;transform:translateY(0)} .wish:hover{color:var(--rose)} .wish.on{color:var(--rose)} .wish.on svg{fill:currentColor} .quick{ position:absolute;left:.7rem;right:.7rem;bottom:.7rem;z-index:3; opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease); } .card:hover .quick,.card:focus-within .quick{opacity:1;transform:translateY(0)} /* On touch there is no hover, so the quick actions would sit permanently across the product photo. motion.js moves them into the card body instead; this only needs to un-hide them. */ @media (hover:none){.quick{opacity:1;transform:none}.wish{opacity:1;transform:none}} .card .body .quick.quick-inline{position:static;opacity:1;transform:none;margin-top:.9rem} .card .body .quick-inline .buys{margin-top:0} .card .body{padding-top:1.05rem;display:flex;flex-direction:column;flex:1} .card .blabel{font-size:.55rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dp);margin-bottom:.5rem} .card .pname{font-size:1.06rem;font-weight:400;line-height:1.26;color:var(--ink);margin-bottom:.42rem} .card .pack{font-size:.72rem;color:var(--taupe);letter-spacing:.03em;margin-bottom:.65rem} .card .prow{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;margin-top:auto;padding-top:.35rem} .card .now{font-family:"Playfair Display",serif;font-size:1.4rem;font-weight:500;color:var(--ink)} .card .mrp{font-size:.8rem;color:var(--taupe-lt);text-decoration:line-through} .card .save{font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--rose)} .card .ask{ display:inline-flex;align-items:center;gap:.45em;margin-top:auto;padding-top:.35rem; font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dp); } .card .ask i{font-style:normal;font-size:.42rem} .card .stars{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;color:var(--taupe);margin-bottom:.6rem} .card .stars b{color:var(--gold-dp);font-weight:500;letter-spacing:.06em} .card .note{font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rose);margin-top:.5rem} .card .buys{display:flex;gap:.5rem;margin-top:.95rem} .card .buys .btn{flex:1;padding-inline:.6em} .amz-badge{ display:inline-flex;align-items:center;gap:.4em;margin-top:.55rem; font-size:.57rem;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe); } .amz-badge i{width:5px;height:5px;border-radius:50%;background:var(--amz);font-style:normal} /* ========================================================================== SIGNATURE / FEATURE BANDS ========================================================================== */ .feature{ display:grid;grid-template-columns:1.06fr .94fr;align-items:center; gap:clamp(2rem,5vw,5.5rem); } .feature.flip{direction:rtl} .feature.flip > *{direction:ltr} .feature .fimg{position:relative;overflow:hidden;border-radius:var(--r);box-shadow:var(--sh-md)} .feature .fimg::after{content:"";position:absolute;inset:0;border:1px solid var(--line-gold);pointer-events:none} .feature .fimg img{width:100%;transition:transform 1.4s var(--ease-out)} .feature:hover .fimg img{transform:scale(1.05)} .feature h2{margin-block:1.1rem 1.2rem} .feature .fbullets{margin-top:1.7rem;display:flex;flex-direction:column;gap:.85rem} .feature .fbullets li{display:flex;gap:.85rem;align-items:flex-start;font-size:.92rem;color:var(--ink-3)} .feature .fbullets svg{flex-shrink:0;margin-top:.36rem;color:var(--gold)} .feature .fcta{margin-top:2.1rem;display:flex;gap:.8rem;flex-wrap:wrap} /* shade chips */ .chips{display:flex;flex-wrap:wrap;gap:7px;margin-block:1.6rem} .chips i{width:26px;height:26px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)} /* ---------- dark band ---------- */ .band-dark{background:var(--ink);color:#E8E6DA;position:relative;overflow:hidden} .band-dark::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 70% at 15% 0%,rgba(200,178,108,.16),transparent 58%),radial-gradient(80% 60% at 92% 100%,rgba(129,143,134,.22),transparent 60%)} .band-dark h2,.band-dark h3{color:#FAF9F3} .band-dark .eyebrow{color:var(--gold-lt)} .band-dark .eyebrow::before{background:var(--gold-lt)} .band-dark p{color:rgba(232,230,218,.72)} .band-dark .inner{position:relative;z-index:2} /* ---------- why / value props ---------- */ .why{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,2.6vw,2.6rem)} .why .item{padding-top:1.7rem;border-top:1px solid var(--line-dark)} .why .n{font-family:"Playfair Display",serif;font-size:1.05rem;color:var(--gold-lt);letter-spacing:.14em;margin-bottom:1rem;display:block} .why h3{font-size:1.28rem;margin-bottom:.65rem;font-weight:400} .why p{font-size:.88rem;line-height:1.72;margin:0} /* ---------- wholesale / trade panel ---------- */ .trade{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .trade-steps{display:flex;flex-direction:column;gap:0;margin-top:1.8rem} .trade-steps li{display:flex;gap:1.4rem;padding-block:1.25rem;border-bottom:1px solid var(--line-dark)} .trade-steps li:first-child{border-top:1px solid var(--line-dark)} .trade-steps .sn{font-family:"Playfair Display",serif;font-size:1.15rem;color:var(--gold-lt);flex-shrink:0;width:2rem} .trade-steps b{display:block;font-weight:400;font-size:1.02rem;color:#FAF9F3;margin-bottom:.2rem;font-family:"Playfair Display",serif;font-size:1.2rem} .trade-steps span{font-size:.85rem;color:rgba(232,230,218,.65);line-height:1.66} /* ---------- instagram ---------- */ .iggrid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.1vw,14px)} .iggrid a{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:1/1;display:block;background:var(--porcelain-2)} .iggrid img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out),filter .5s} .iggrid a:hover img{transform:scale(1.09)} .iggrid .mark{position:absolute;inset:0;display:grid;place-items:center;background:rgba(43,43,36,.45);color:#fff;opacity:0;transition:opacity .4s} .iggrid a:hover .mark{opacity:1} /* ---------- CTA band ---------- */ .cta-band{display:flex;align-items:center;justify-content:space-between;gap:2.4rem;flex-wrap:wrap} .cta-band .ct{max-width:56ch} /* ========================================================================== FOOTER ========================================================================== */ .footer{background:var(--ink);color:rgba(232,230,218,.72);padding-top:clamp(56px,7vw,92px)} .fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.25fr;gap:clamp(2rem,4vw,3.6rem);padding-bottom:3.4rem} .footer .brand .mark{border-color:rgba(226,211,160,.42);color:var(--gold-lt)} .footer .brand .bt b{color:#FAF9F3} .footer .brand .bt small{color:rgba(232,230,218,.5)} .fabout{margin-top:1.4rem;font-size:.88rem;line-height:1.78;max-width:40ch} .footer h4{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:1.3rem;font-family:"Jost",sans-serif;font-weight:500} .footer li{margin-bottom:.72rem} .footer li a,.fcontact li{font-size:.87rem;color:rgba(232,230,218,.68);transition:color .3s;display:inline-flex;align-items:center;gap:.6rem} .footer li a:hover{color:var(--gold-lt)} .fcontact li{align-items:flex-start;margin-bottom:1rem;line-height:1.6} .fcontact svg{flex-shrink:0;margin-top:.28rem;color:var(--gold)} .socials{display:flex;gap:.55rem;margin-top:1.7rem} .socials a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-dark);border-radius:50%;color:rgba(232,230,218,.75);transition:border-color .4s,color .4s,transform .4s} .socials a:hover{border-color:var(--gold);color:var(--gold-lt);transform:translateY(-3px)} .fbottom{ display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap; padding-block:1.7rem;border-top:1px solid var(--line-dark);font-size:.72rem;letter-spacing:.06em;color:rgba(232,230,218,.45); } .fbottom .credit a{color:rgba(232,230,218,.62)} .fbottom .credit a:hover{color:var(--gold-lt)} /* ========================================================================== ENQUIRY DRAWER ========================================================================== */ .cart{ position:fixed;inset:0 0 0 auto;width:min(93vw,432px);z-index:95; background:var(--porcelain);box-shadow:var(--sh-lg); transform:translateX(101%);transition:transform .55s var(--ease-out); display:flex;flex-direction:column; } .cart.open{transform:translateX(0)} .chead{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 1.6rem 1.2rem;border-bottom:1px solid var(--line)} .chead h3{font-size:1.3rem;font-weight:400;letter-spacing:.04em} .chead .cx{width:40px;height:40px;display:grid;place-items:center;font-size:1.45rem;color:var(--ink);font-weight:300} .citems{flex:1;overflow-y:auto;padding:1.3rem 1.6rem} .cempty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;height:100%;color:var(--taupe);text-align:center;padding:2rem 0} .cempty svg{color:var(--line-gold)} .cempty p{margin:0;font-size:.9rem;max-width:26ch} .ci{display:grid;grid-template-columns:78px 1fr;gap:1rem;padding-block:1.15rem;border-bottom:1px solid var(--line-2)} .ci .cim{width:78px;height:78px;object-fit:cover;border-radius:var(--r);background:var(--porcelain-2)} .ci .cim.ph{display:grid;place-items:center;color:var(--gold-dp);opacity:.5} .ci .cim.ph svg{width:44%} .ci .cinfo b{display:block;font-weight:400;font-size:.92rem;line-height:1.34;color:var(--ink);margin-bottom:.25rem;font-family:"Playfair Display",serif;font-size:1.05rem} .ci .cinfo em{display:block;font-style:normal;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-dp);margin-bottom:.55rem} .qty{display:flex;align-items:center;gap:.2rem;margin-top:.35rem} .qty button{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);font-size:.9rem;transition:border-color .3s,color .3s} .qty button:hover{border-color:var(--gold);color:var(--gold-dp)} .qty span{min-width:30px;text-align:center;font-size:.85rem} .qty .rm{width:auto;padding-inline:.7rem;border:0;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe);margin-left:.4rem} .qty .rm:hover{color:var(--rose)} .cfoot{padding:1.4rem 1.6rem 1.7rem;border-top:1px solid var(--line);background:var(--porcelain-2)} .cfoot .crow{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)} .cfoot .crow b{font-family:"Playfair Display",serif;font-size:1.3rem;letter-spacing:0;color:var(--ink);text-transform:none;font-weight:500} .cfoot small{display:block;margin-top:.85rem;font-size:.7rem;color:var(--taupe);text-align:center;line-height:1.6} /* ---------- toast ---------- */ .toast-wrap{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:120;pointer-events:none} .toast{ display:flex;align-items:center;gap:.7rem; background:var(--ink);color:var(--gold-lt); padding:.9rem 1.5rem;border-radius:var(--r);box-shadow:var(--sh-md); font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;white-space:nowrap; opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .4s var(--ease); } .toast.show{opacity:1;transform:translateY(0)} /* ---------- floating whatsapp ---------- */ .wa-float{ position:fixed;right:22px;bottom:22px;z-index:80; width:58px;height:58px;display:grid;place-items:center;border-radius:50%; background:var(--wa-dp);color:#fff;box-shadow:0 10px 30px rgba(20,107,87,.34); transition:transform .45s var(--ease),box-shadow .45s var(--ease); } .wa-float:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 16px 40px rgba(20,107,87,.44)} .wa-float::after{ content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--wa); animation:pulse 2.8s var(--ease-out) infinite; } @keyframes pulse{0%{transform:scale(1);opacity:.65}70%{transform:scale(1.45);opacity:0}100%{opacity:0}} /* ========================================================================== SHOP PAGE ========================================================================== */ .page-head{background:var(--porcelain-2);border-bottom:1px solid var(--line-2);padding-block:clamp(46px,6.5vw,86px)} .page-head .eyebrow{margin-bottom:1rem} .page-head h1{font-size:clamp(2.4rem,5.4vw,4.2rem)} .page-head p{margin-top:1rem;color:var(--taupe);max-width:56ch} .crumbs{display:flex;gap:.55rem;align-items:center;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-bottom:1.4rem} .crumbs a:hover{color:var(--gold-dp)} .crumbs i{font-style:normal;color:var(--line-gold)} .shopbar{ position:sticky;top:82px;z-index:50;background:rgba(248,247,242,.95); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line-2); } .filters{display:flex;gap:.5rem;overflow-x:auto;padding-block:1.1rem;scrollbar-width:none} .filters::-webkit-scrollbar{display:none} .chip{ flex-shrink:0;padding:.62em 1.25em;border:1px solid var(--line);border-radius:var(--r); font-size:.63rem;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3); background:transparent;transition:border-color .35s,color .35s,background .35s;white-space:nowrap; } .chip:hover{border-color:var(--gold);color:var(--gold-dp)} .chip.active{background:var(--ink);border-color:var(--ink);color:var(--gold-lt)} .shoptools{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;padding-bottom:1.05rem} .shopcount{font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;color:var(--taupe)} .sortsel{ border:1px solid var(--line);border-radius:var(--r);padding:.55em 2em .55em .9em; font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);background:transparent; appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B7A6E' fill='none' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .8em center; } .sortsel:focus{outline:none;border-color:var(--gold)} .shop-empty{grid-column:1/-1;text-align:center;padding:5rem 1rem;color:var(--taupe)} .shop-empty svg{color:var(--line-gold);margin-bottom:1.5rem} .shop-empty h3{margin-bottom:.7rem} .shop-empty p{max-width:44ch;margin:0 auto 1.7rem} /* ========================================================================== ABOUT PAGE ========================================================================== */ .about-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center} .about-hero .aimg{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-md)} .about-hero .aimg::after{content:"";position:absolute;inset:0;border:1px solid var(--line-gold)} .pullquote{ font-family:"Playfair Display",serif;font-size:clamp(1.5rem,3vw,2.35rem); font-style:italic;font-weight:300;line-height:1.34;color:var(--ink); max-width:24ch; } .counters{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.5vw,2.4rem)} .counters .c{text-align:center;padding:2.2rem 1rem;border:1px solid var(--line);border-radius:var(--r);transition:border-color .5s,transform .5s var(--ease)} .counters .c:hover{border-color:var(--line-gold);transform:translateY(-4px)} .counters b{display:block;font-family:"Playfair Display",serif;font-size:clamp(2rem,4vw,2.9rem);font-weight:400;color:var(--ink);line-height:1} .counters small{display:block;margin-top:.7rem;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe)} .timeline{display:flex;flex-direction:column} .timeline li{display:grid;grid-template-columns:auto 1fr;gap:1.8rem;padding-block:1.9rem;border-bottom:1px solid var(--line-2)} .timeline li:first-child{border-top:1px solid var(--line-2)} .timeline .tn{font-family:"Playfair Display",serif;font-size:1.2rem;color:var(--gold-dp);width:2.4rem} .timeline h3{font-size:1.35rem;margin-bottom:.5rem;font-weight:400} .timeline p{margin:0;color:var(--taupe);font-size:.93rem;max-width:60ch} /* ========================================================================== CONTACT PAGE ========================================================================== */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,5vw,5rem)} .ccards{display:grid;gap:1rem} .ccard{ display:flex;gap:1.2rem;padding:1.6rem;border:1px solid var(--line);border-radius:var(--r); transition:border-color .5s,transform .5s var(--ease),box-shadow .5s; } .ccard:hover{border-color:var(--line-gold);transform:translateY(-3px);box-shadow:var(--sh-sm)} .ccard .ci2{flex-shrink:0;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-gold);border-radius:50%;color:var(--gold-dp)} .ccard h3{font-size:1.15rem;margin-bottom:.3rem;font-weight:400} .ccard p,.ccard a{font-size:.9rem;color:var(--taupe);margin:0;line-height:1.6} .ccard a:hover{color:var(--gold-dp)} .ccard .big{font-family:"Playfair Display",serif;font-size:1.35rem;color:var(--ink);letter-spacing:.02em} .form{display:flex;flex-direction:column;gap:1.15rem} .field{display:flex;flex-direction:column;gap:.5rem} .field label{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe)} .field input,.field textarea,.field select{ padding:.92rem 1rem;border:1px solid var(--line);border-radius:var(--r); background:var(--white);font-size:.94rem;font-weight:300;color:var(--ink); transition:border-color .35s,box-shadow .35s; } .field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,178,108,.16); } .field textarea{resize:vertical;min-height:132px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem} .formnote{font-size:.76rem;color:var(--taupe);line-height:1.65} .mapwrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--porcelain-2)} .mapwrap iframe{display:block;width:100%;height:340px;border:0;filter:grayscale(.35) contrast(.95)} .faq{display:flex;flex-direction:column} .faq details{border-bottom:1px solid var(--line-2)} .faq summary{ display:flex;align-items:center;justify-content:space-between;gap:1.4rem; padding-block:1.4rem;cursor:pointer;list-style:none; font-family:"Playfair Display",serif;font-size:1.24rem;color:var(--ink); } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--gold);font-size:1.25rem;font-family:"Jost",sans-serif;font-weight:300;transition:transform .4s var(--ease)} .faq details[open] summary::after{transform:rotate(45deg)} .faq p{margin:0 0 1.5rem;color:var(--taupe);font-size:.93rem;max-width:70ch;line-height:1.75} /* ========================================================================== REVEAL ANIMATION ========================================================================== */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease-out),transform .95s var(--ease-out)} .reveal.in{opacity:1;transform:none} .reveal-d1{transition-delay:.09s} .reveal-d2{transition-delay:.18s} .reveal-d3{transition-delay:.27s} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}} /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:1080px){ .nav-links{display:none} .hamburger{display:grid} .hero-grid{grid-template-columns:1fr;gap:3rem} .hero-media{max-width:520px;width:100%;order:-1} .hero-tag{left:auto;right:14px;bottom:-18px} .hero-stats{gap:1.4rem 2.2rem} .catgrid{grid-template-columns:repeat(2,1fr)} .cat.tall{grid-row:span 1;aspect-ratio:3/4} .cat.wide{grid-column:span 2;aspect-ratio:3/1.5} .pgrid{grid-template-columns:repeat(3,1fr)} .why{grid-template-columns:repeat(2,1fr)} .feature,.trade,.about-hero,.contact-grid{grid-template-columns:1fr} .feature.flip{direction:ltr} .fgrid{grid-template-columns:1fr 1fr;gap:2.4rem} .iggrid{grid-template-columns:repeat(3,1fr)} .shopbar{top:0} } @media (max-width:720px){ body{font-size:15.5px} .nav{height:70px;gap:.6rem} /* the brand must be allowed to shrink or it pushes the actions off-screen */ .brand{flex-shrink:1;min-width:0} .brand .bt{min-width:0} .brand .bt b{font-size:1.02rem;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .brand .bt small{display:none} .brand .mark{width:38px;height:38px;font-size:1.12rem} .nav-actions{flex-shrink:0} .nav-actions .icon-btn[data-ig]{display:none} .icon-btn{width:38px;height:38px} .pgrid{grid-template-columns:repeat(2,1fr);gap:16px} .counters{grid-template-columns:repeat(2,1fr)} .field-row{grid-template-columns:1fr} .cta-band{flex-direction:column;align-items:flex-start} .hero-stats{gap:1.6rem 2rem} .hero-stats b{font-size:1.5rem} .card .buys{flex-direction:column} .wa-float{width:52px;height:52px;right:16px;bottom:16px} .toast-wrap{bottom:84px} } @media (max-width:520px){ .catgrid{grid-template-columns:1fr} .cat.wide{grid-column:span 1;aspect-ratio:3/2.2} .fgrid{grid-template-columns:1fr} .why{grid-template-columns:1fr} .iggrid{grid-template-columns:repeat(2,1fr)} .counters{grid-template-columns:repeat(2,1fr)} } /* ---------- print ---------- */ @media print{ .site-header,.drawer,.cart,.scrim,.wa-float,.announce,.quick,.wish{display:none!important} body{background:#fff;color:#000} }