/* ========================================================================== Leh Personal Shopper — shared stylesheet -------------------------------------------------------------------------- The palette and type scale are carried over verbatim from the original "em construção" page (site/em-construcao.html), which sampled its colours straight out of site/leh-shop-pronto.jpg. Rebranding is still a few edits in the :root block below and nowhere else. The one deliberate departure from that page: vertical rhythm here is in rem, not vh. The placeholder was engineered to land inside one viewport with no scrollbar; these pages scroll by design, so vh-based spacing would only make sections jump around between screen sizes. Sections 01 tokens 02 reset + page ground 03 typography 04 layout helpers 05 header + navigation 06 buttons 07 image placeholders <- the "drop your photo in later" component 08 cards + grids 09 step flow (Como Funciona) 10 products 11 agenda / events 12 FAQ accordion 13 forms 14 footer 15 motion 19 texto corrido (política de privacidade) ========================================================================== */ /* --- 01 tokens ---------------------------------------------------------- */ :root{ --ivory:#FAF5F2; --ivory-lift:#FEFBF3; --card:#FFFDF9; --sand:#EFE9E2; --sand-deep:#E2D5CB; --taupe:#A38D7B; --taupe-deep:#675444; --cognac:#A87A5C; --ink:#14100C; --ink-soft:#45403A; --muted:#7A6E63; --gold:#B08343; --gold-mid:#B59A71; --gold-pale:#E9D7BE; --bronze:#6B5941; --pink:#C9366B; --green:#3F7D58; /* Fundo de botão: o --green com texto branco fica em 4.9:1, apertado para um rótulo de 11px em caixa alta. Este tom dá 7:1. */ --green-deep:#2F6244; --green-deeper:#254E37; --display:"Playfair Display", Georgia, "Times New Roman", serif; --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif; --sans:"Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --edge:1px solid rgba(20,16,12,.10); --radius:14px; --radius-lg:20px; --shadow-card:0 18px 34px -28px rgba(103,84,68,.6); --shadow-lift:0 30px 50px -34px rgba(103,84,68,.55); --header-h:76px; --gutter:clamp(1.5rem,5vw,4rem); --section-y:clamp(3.5rem,8vw,6.5rem); } /* --- 02 reset + page ground --------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; background:var(--ivory); color:var(--ink-soft); font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.68; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* Warm washes + fine grain, so the ivory never reads as flat. Fixed rather than scrolling: the light stays put while content moves through it. */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(115% 65% at 50% -10%, rgba(233,215,190,.55), transparent 62%), radial-gradient(85% 55% at 6% 92%, rgba(163,141,123,.14), transparent 66%), radial-gradient(70% 50% at 96% 78%, rgba(168,122,92,.12), transparent 70%); } body::after{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; opacity:.28;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } .shell{position:relative;z-index:1;display:flex;flex-direction:column;flex:1 0 auto;width:100%} main{flex:1 0 auto} .skip{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--bronze);color:var(--ivory-lift); padding:.75rem 1.25rem;border-radius:0 0 8px 0; font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none; } .skip:focus{left:0} /* --- 03 typography ------------------------------------------------------- */ h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;letter-spacing:-.015em;font-weight:600} h1{font-size:clamp(2.1rem,5.2vw,3.7rem);line-height:1.05} h2{font-size:clamp(1.75rem,3.6vw,2.7rem);line-height:1.12} h3{font-size:clamp(1.12rem,1.9vw,1.4rem);line-height:1.25;font-weight:500} h4{font-size:1rem;line-height:1.3;font-weight:500} h1 em,h2 em,h3 em{font-style:normal;font-weight:400;color:var(--gold)} p{margin:0 0 1.1rem} p:last-child{margin-bottom:0} a{color:var(--bronze)} strong{font-weight:400;color:var(--ink)} .eyebrow{ font-size:.62rem;letter-spacing:.36em;text-transform:uppercase;color:var(--bronze); margin:0 0 1rem;display:flex;align-items:center;gap:1rem;font-weight:400; } .eyebrow::after{content:"";height:1px;flex:1;max-width:6rem;background:linear-gradient(90deg,var(--gold-mid),transparent)} .eyebrow.center{justify-content:center} .eyebrow.center::before{content:"";height:1px;flex:1;max-width:6rem;background:linear-gradient(270deg,var(--gold-mid),transparent)} .lede{font-size:clamp(1rem,1.7vw,1.12rem);line-height:1.65;color:var(--ink-soft);max-width:34rem} .lede.center{margin-left:auto;margin-right:auto} /* Hairline rule with the small gold lozenge lifted from the source graphic. */ .rule{display:flex;align-items:center;gap:.75rem;margin:1.4rem 0;max-width:19rem} .rule::before,.rule::after{content:"";height:1px;flex:1} .rule::before{background:linear-gradient(90deg,var(--sand-deep),var(--gold-pale))} .rule::after{background:linear-gradient(90deg,var(--gold-pale),transparent)} .rule i{width:6px;height:6px;flex:none;background:var(--gold);transform:rotate(45deg)} .rule.center{margin-inline:auto} .rule.center::before{background:linear-gradient(90deg,transparent,var(--gold-pale))} /* --- 04 layout helpers --------------------------------------------------- */ .wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 var(--gutter)} .wrap-narrow{max-width:820px} .section{padding:var(--section-y) 0} .section-tight{padding:clamp(2.5rem,5vw,4rem) 0} .section-sand{background:linear-gradient(180deg,transparent,rgba(239,233,226,.7) 12%,rgba(239,233,226,.7) 88%,transparent)} .section-head{max-width:44rem;margin-bottom:clamp(2rem,4vw,3rem)} .section-head.center{margin-inline:auto;text-align:center} .center{text-align:center} .stack>*+*{margin-top:1.1rem} /* --- 05 header + navigation ---------------------------------------------- */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(250,245,242,.82); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s ease, box-shadow .3s ease; } /* .is-stuck is toggled from site.js once the page has scrolled — the border only earns its keep when there is content passing underneath. */ .site-header.is-stuck{border-bottom-color:var(--sand-deep);box-shadow:0 10px 30px -26px rgba(103,84,68,.8)} .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--header-h)} .mark{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--ink);flex:none} .ring{ width:40px;height:40px;flex:none;border-radius:50%; border:1px solid var(--gold-mid);display:grid;place-items:center; font-family:var(--display);font-size:1.05rem;letter-spacing:.06em; color:var(--bronze);background:rgba(255,255,255,.4); } .mark .m1{font-family:var(--display);font-weight:500;font-size:1.02rem;letter-spacing:.2em;text-transform:uppercase;line-height:1.2;display:block} .mark .m2{font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:var(--bronze);font-weight:400;display:block;margin-top:.15rem} .nav{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2rem)} .nav a{ position:relative;text-decoration:none;color:var(--ink-soft); font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400; padding:.35rem 0;transition:color .25s ease;white-space:nowrap; } .nav a::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:var(--gold);transform:scaleX(0);transform-origin:left; transition:transform .3s cubic-bezier(.22,.61,.36,1); } .nav a:hover{color:var(--bronze)} .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)} .nav a[aria-current="page"]{color:var(--bronze)} .nav .btn{padding:.6rem 1.3rem} .nav .btn::after{display:none} /* `.nav a` acima define uma cor de texto e tem especificidade maior que a classe do botão — sem estas linhas o "Contato" fica com tinta escura em cima do verde. Vale para o estado normal, o hover e a página atual. */ .nav a.btn-wa,.nav a.btn-wa:hover,.nav a.btn-wa[aria-current="page"]{color:#fff;font-weight:500} .nav a.btn-primary,.nav a.btn-primary:hover,.nav a.btn-primary[aria-current="page"]{color:var(--ivory-lift)} /* Atalho da lista de compras. Mora fora do