/* ============================================================ Sirmos Bebe — design tokens + base Ported from the Claude Design (styles.css :root + globals). Loaded FIRST, globally, in common/header.twig. ============================================================ */ :root{ /* palette */ --sb-ink:#17130D; /* primary text / brand near-black */ --sb-ink-soft:#5C5346; /* body copy */ --sb-ink-2:#3A342B; /* review body */ --sb-muted:#8A7F70; /* muted text / link hover */ --sb-faint:#A0968A; /* faint labels, eyebrows */ --sb-cream:#F6F0E8; /* section background */ --sb-cream-2:#FBF7F1; /* card background */ --sb-tint:#F4EFE7; /* image placeholder background */ --sb-line:#ECE4D8; /* hairline borders */ --sb-line-strong:#DCD2C4; /* stronger borders */ --sb-line-2:#E4DACB; /* track / divider */ --sb-peach:#E0A87A; /* stars, logo accent */ --sb-peach-tint:#F7E3D0; /* chip hover */ --sb-caramel:#B76A2E; /* sale price / mega hover */ --sb-sale:#B23A2E; /* cart badge, remove, close */ --sb-sale-dark:#8E2C22; /* sale hover */ --sb-green:#7BA05B; /* free-shipping reached */ --sb-white:#FFFFFF; --sb-black:#000000; /* radii */ --sb-r-sm:3px; --sb-r-md:7px; --sb-r-lg:12px; --sb-r-xl:22px; /* type */ --sb-font:'Syne',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; /* layout */ --sbmax:100%; /* content max-width (design is full-bleed w/ side padding) */ --sb-pad:clamp(20px,3.2vw,60px); /* horizontal page padding */ --sb-gap-sec:clamp(84px,9vw,150px);/* vertical rhythm between sections */ --hh:64px; /* header height */ /* easing */ --sb-ease:cubic-bezier(.16,1,.3,1); } *{box-sizing:border-box} /* `hidden` must win over component display rules (.am-pill{display:inline-flex}, .sb-badge{display:grid}, …) — otherwise hidden elements still paint. */ [hidden]{display:none !important} html,body{margin:0;padding:0;overscroll-behavior-y:none} html{scroll-behavior:smooth;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--sb-ink) var(--sb-line)} body{ font-family:var(--sb-font); background:var(--sb-white); color:var(--sb-ink); font-weight:400; -webkit-font-smoothing:antialiased; /* clip (NOT hidden): stops stray horizontal overflow WITHOUT turning into a scroll container. `overflow-x:hidden` here made a scroller that swallowed mouse-wheel events, so the page didn't scroll by wheel — only must be the scroller. */ overflow-x:clip; --sbmax:100%; } a{color:var(--sb-ink);text-decoration:none} a:hover{color:var(--sb-muted)} img{display:block;max-width:100%} h1,h2,h3,h4{font-family:var(--sb-font)} input,button,select,textarea{font-family:var(--sb-font)} /* scrollbars */ .no-sb::-webkit-scrollbar{display:none} .no-sb{scrollbar-width:none;-ms-overflow-style:none} body::-webkit-scrollbar{width:11px;height:11px} body::-webkit-scrollbar-track{background:var(--sb-line)} body::-webkit-scrollbar-thumb{background:var(--sb-ink);border-radius:20px;border:2px solid var(--sb-line)} body::-webkit-scrollbar-thumb:hover{background:var(--sb-black)} /* page container + section rhythm */ .sb-wrap{max-width:var(--sbmax);margin:0 auto;padding-left:var(--sb-pad);padding-right:var(--sb-pad)} .sb-section{max-width:var(--sbmax);margin:0 auto;padding:var(--sb-gap-sec) var(--sb-pad) 0} /* reveal-on-scroll (JS toggles .is-in) Fail-safe: elements are VISIBLE by default (like the design's opacity:var(--rv,1)). They only start hidden once main.js has confirmed JS + IntersectionObserver are live (adds `sb-js` to ). No-JS / IO failure ⇒ content stays visible. */ html.sb-js [data-reveal], html.sb-js [data-reveal-child]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--sb-ease),transform .9s var(--sb-ease)} html.sb-js [data-reveal].is-in, html.sb-js [data-reveal-child].is-in{opacity:1;transform:none} /* keyframes */ @keyframes sbToastIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}} @keyframes sbDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}} @keyframes sbFadeIn{from{opacity:0}to{opacity:1}} @keyframes sbPreFade{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}} @keyframes sbBarUp{from{transform:translateY(100%)}to{transform:translateY(0)}} @keyframes sbMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes sbModalIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes sbCardFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} [data-reveal],[data-reveal-child]{opacity:1 !important;transform:none !important} } /* form range (shared) */ input[type="range"]{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--sb-line-2);outline:none} input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--sb-ink);cursor:pointer;border:none} input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--sb-ink);cursor:pointer;border:none} input[type="range"]::-moz-range-track{height:4px;border-radius:2px;background:var(--sb-line-2)} input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none} /* splash loader */ .sb-loader{position:fixed;inset:0;z-index:9999;background:var(--sb-white);display:grid;place-items:center;transition:opacity .5s ease,visibility .5s ease} .sb-loader.is-done{opacity:0;visibility:hidden;pointer-events:none} .sb-loader__logo{width:clamp(120px,16vw,180px);height:auto;display:block;animation:sbLoaderPulse 1.15s ease-in-out infinite} .sb-loader__bar{position:absolute;left:50%;bottom:38%;transform:translateX(-50%);width:120px;height:2px;background:#EDE5D8;border-radius:2px;overflow:hidden} .sb-loader__bar::after{content:"";position:absolute;left:0;top:0;height:100%;width:40%;background:var(--sb-ink);border-radius:2px;animation:sbLoaderSlide 1.1s ease-in-out infinite} @keyframes sbLoaderPulse{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1)}} @keyframes sbLoaderSlide{0%{left:-40%}100%{left:100%}}