/* ============================================================ SAGROD — Shared Design System Tokens · 3 palettes · light/dark · type sets · components Drives off ============================================================ */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&display=swap'); /* ============================================================ TYPE SETS ============================================================ */ :root{ --font-display: 'Zilla Slab', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --tracking-display: -0.01em; } :root[data-type="serif"]{ --font-display: 'Spectral', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --tracking-display: -0.005em; } :root[data-type="grotesk"]{ --font-display: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --tracking-display: -0.02em; } /* ============================================================ PALETTES (semantic tokens, set per palette + mode) --bg surface surface-2 text muted faint line --brand brand-2 brand-ink accent accent-ink halo ============================================================ */ /* ---- EVOLVED (warm terracotta-red, cream) ---- */ :root[data-palette="evolved"][data-mode="light"]{ --bg:oklch(0.987 0.006 70); --surface:oklch(1 0 0); --surface-2:oklch(0.965 0.011 70); --text:oklch(0.24 0.02 48); --muted:oklch(0.50 0.02 48); --faint:oklch(0.66 0.02 60); --line:oklch(0.90 0.012 70); --line-strong:oklch(0.82 0.015 60); --brand:oklch(0.58 0.172 38); --brand-2:oklch(0.50 0.16 36); --brand-ink:oklch(0.99 0.01 70); --accent:oklch(0.66 0.12 62); --accent-ink:oklch(0.22 0.03 50); --halo:oklch(0.58 0.172 38 / 0.12); } :root[data-palette="evolved"][data-mode="dark"]{ --bg:oklch(0.185 0.012 48); --surface:oklch(0.225 0.015 48); --surface-2:oklch(0.265 0.017 48); --text:oklch(0.95 0.01 70); --muted:oklch(0.74 0.015 62); --faint:oklch(0.60 0.015 55); --line:oklch(0.32 0.016 48); --line-strong:oklch(0.40 0.018 48); --brand:oklch(0.67 0.165 41); --brand-2:oklch(0.60 0.155 39); --brand-ink:oklch(0.16 0.012 48); --accent:oklch(0.74 0.115 66); --accent-ink:oklch(0.18 0.02 50); --halo:oklch(0.67 0.165 41 / 0.18); } /* ---- BUTCHER (oxblood, charcoal, cream, brass) ---- */ :root[data-palette="butcher"][data-mode="light"]{ --bg:oklch(0.962 0.013 78); --surface:oklch(0.99 0.006 80); --surface-2:oklch(0.935 0.018 78); --text:oklch(0.22 0.022 30); --muted:oklch(0.45 0.03 32); --faint:oklch(0.62 0.03 40); --line:oklch(0.88 0.02 78); --line-strong:oklch(0.80 0.025 70); --brand:oklch(0.41 0.125 28); --brand-2:oklch(0.34 0.11 27); --brand-ink:oklch(0.97 0.012 80); --accent:oklch(0.68 0.092 82); --accent-ink:oklch(0.24 0.03 40); --halo:oklch(0.41 0.125 28 / 0.12); } :root[data-palette="butcher"][data-mode="dark"]{ --bg:oklch(0.165 0.018 28); --surface:oklch(0.215 0.022 28); --surface-2:oklch(0.255 0.024 28); --text:oklch(0.94 0.014 78); --muted:oklch(0.72 0.022 70); --faint:oklch(0.58 0.022 50); --line:oklch(0.30 0.022 28); --line-strong:oklch(0.38 0.025 28); --brand:oklch(0.54 0.135 28); --brand-2:oklch(0.46 0.125 27); --brand-ink:oklch(0.96 0.012 80); --accent:oklch(0.75 0.10 83); --accent-ink:oklch(0.18 0.02 40); --halo:oklch(0.75 0.10 83 / 0.16); } /* ---- FRESH (clean cool white, confident red) ---- */ :root[data-palette="fresh"][data-mode="light"]{ --bg:oklch(0.992 0.003 250); --surface:oklch(1 0 0); --surface-2:oklch(0.972 0.005 250); --text:oklch(0.20 0.012 255); --muted:oklch(0.52 0.014 255); --faint:oklch(0.68 0.014 255); --line:oklch(0.92 0.006 250); --line-strong:oklch(0.85 0.008 250); --brand:oklch(0.56 0.19 27); --brand-2:oklch(0.49 0.175 26); --brand-ink:oklch(0.99 0.005 250); --accent:oklch(0.56 0.19 27); --accent-ink:oklch(0.99 0.005 250); --halo:oklch(0.56 0.19 27 / 0.10); } :root[data-palette="fresh"][data-mode="dark"]{ --bg:oklch(0.155 0.006 255); --surface:oklch(0.205 0.009 255); --surface-2:oklch(0.245 0.01 255); --text:oklch(0.96 0.004 250); --muted:oklch(0.71 0.012 255); --faint:oklch(0.56 0.012 255); --line:oklch(0.29 0.01 255); --line-strong:oklch(0.37 0.012 255); --brand:oklch(0.64 0.185 28); --brand-2:oklch(0.57 0.175 27); --brand-ink:oklch(0.15 0.006 255); --accent:oklch(0.64 0.185 28); --accent-ink:oklch(0.15 0.006 255); --halo:oklch(0.64 0.185 28 / 0.16); } /* ============================================================ RESET / BASE ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background-color:var(--bg); color:var(--text); font-family:var(--font-body); font-size:17px; line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased; transition:background-color .4s ease, color .4s ease; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:var(--tracking-display);line-height:1.04;margin:0;text-wrap:balance} p{margin:0;text-wrap:pretty} ::selection{background:var(--brand);color:var(--brand-ink)} :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px} /* ============================================================ LAYOUT HELPERS ============================================================ */ .wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(20px,4vw,48px)} .eyebrow{font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);display:inline-flex;align-items:center;gap:10px} .eyebrow::before{content:"";width:22px;height:2px;background:var(--brand);display:inline-block} .muted{color:var(--muted)} /* ============================================================ BUTTONS ============================================================ */ .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;font-weight:600;font-size:15px;transition:transform .15s ease, background .25s ease, color .25s ease, border-color .25s;line-height:1} .btn svg{width:16px;height:16px} .btn-primary{background:var(--brand);color:var(--brand-ink)} .btn-primary:hover{transform:translateY(-2px);background:var(--brand-2)} .btn-ghost{border:1.5px solid var(--line-strong);color:var(--text)} .btn-ghost:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)} .btn-light{background:var(--surface);color:var(--text)} .btn-light:hover{transform:translateY(-2px)} /* ============================================================ IMAGE PLACEHOLDER (handoff slots) ============================================================ */ .ph{position:relative;background: repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 11px,transparent 11px,transparent 22px), var(--surface); border:1px solid var(--line);overflow:hidden;display:flex;align-items:flex-end} .ph::after{content:attr(data-label);font-family:'Hanken Grotesk',monospace;font-size:11px;letter-spacing:.04em;color:var(--faint); background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:5px 9px;margin:12px;font-weight:600} .ph[data-center]{align-items:center;justify-content:center} /* real product photo dropped into a slot — fills the box, hides the handoff label. No positive z-index: floating siblings (badges, seals, figcaptions) must paint on top. */ .ph>img,.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0} .ph.has-photo{background:var(--surface-2)} .ph.has-photo::after,.ph:has(>img)::after{display:none} /* embedded map iframe dropped into a slot (contact location) */ .ph>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:0} .ph:has(>iframe){background:var(--surface-2)} .ph:has(>iframe)::after{display:none} .map-open{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px; padding:9px 13px;border-radius:999px;background:color-mix(in oklab,var(--surface) 90%,transparent); -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:var(--text);border:1px solid var(--line); font-size:13px;font-weight:600;box-shadow:0 8px 22px -12px rgba(0,0,0,.5);transition:transform .15s,color .2s,border-color .2s} .map-open:hover{transform:translateY(-2px);color:var(--brand);border-color:var(--brand)} .map-open svg{width:15px;height:15px;flex:none;color:var(--brand)} /* ============================================================ THEME WIDGET ============================================================ */ #sg-fab{position:fixed;right:22px;bottom:22px;z-index:90;width:54px;height:54px;border-radius:50%; background:var(--brand);color:var(--brand-ink);display:grid;place-items:center; box-shadow:0 10px 30px -8px var(--halo),0 4px 12px rgba(0,0,0,.18);transition:transform .2s ease} #sg-fab:hover{transform:rotate(30deg) scale(1.06)} #sg-fab svg{width:24px;height:24px} #sg-panel{position:fixed;right:22px;bottom:88px;z-index:91;width:312px;max-width:calc(100vw - 44px); background:var(--surface);border:1px solid var(--line);border-radius:20px; box-shadow:0 24px 60px -20px rgba(0,0,0,.35);padding:18px;opacity:0;transform:translateY(12px) scale(.97); pointer-events:none;transition:opacity .22s ease,transform .22s ease} #sg-panel.open{opacity:1;transform:none;pointer-events:auto} .sg-h{font-family:var(--font-display);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:4px} .sg-h button{color:var(--muted);font-size:18px;line-height:1} .sg-grp{margin-top:16px} .sg-lbl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .sg-row{display:flex;gap:7px;flex-wrap:wrap} .sg-seg{flex:1;min-width:0;padding:9px 6px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg); font-size:12.5px;font-weight:600;color:var(--muted);transition:all .18s;text-align:center;white-space:nowrap} .sg-seg[aria-pressed="true"]{border-color:var(--brand);background:var(--halo);color:var(--text)} .sg-swatch{width:40px;height:40px;border-radius:11px;border:2px solid var(--line);padding:0;position:relative;overflow:hidden;flex:none} .sg-swatch[aria-pressed="true"]{border-color:var(--text);box-shadow:0 0 0 2px var(--bg) inset} .sg-swatch span{position:absolute;inset:0;display:block} .sg-swatch i{position:absolute;right:0;bottom:0;width:50%;height:50%;display:block} /* language pill */ .sg-lang{display:flex;gap:6px} .sg-lang button{padding:7px 11px;border-radius:9px;border:1.5px solid var(--line);font-size:12.5px;font-weight:700;color:var(--muted)} .sg-lang button[aria-pressed="true"]{border-color:var(--brand);background:var(--brand);color:var(--brand-ink)} .sg-lang button:disabled{opacity:.4;cursor:not-allowed} /* reveal on scroll */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms !important;animation-duration:.01ms !important} .reveal{opacity:1;transform:none} } /* ============================================================ SITE CHROME (shared header / utility bar / footer / dropdown) ============================================================ */ .ub{background:var(--brand);color:var(--brand-ink)} .ub-in{display:flex;align-items:center;gap:28px;height:40px;font-size:13px;font-weight:600;flex-wrap:wrap;overflow:hidden} .ub-i{display:inline-flex;align-items:center;gap:8px;opacity:.92;transition:opacity .2s} .ub-i:hover{opacity:1} .ub-i svg{width:15px;height:15px} .ub-tel{margin-left:auto} .v1-header{position:sticky;top:0;z-index:50;background-color:color-mix(in oklab,var(--bg) 88%,transparent); backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:background-color .4s,border-color .4s} .v1-nav{display:flex;align-items:center;gap:30px;height:74px} .brand{display:flex;align-items:center;gap:12px;margin-right:auto} .brand .seal{width:42px;height:42px;border-radius:50%;background:var(--brand);color:var(--brand-ink); display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:22px;flex:none} .brand .wm{display:flex;flex-direction:column;line-height:1} .brand .wm b{font-family:var(--font-display);font-size:21px;letter-spacing:.04em;font-weight:700} .brand .wm small{font-size:9.5px;letter-spacing:.26em;color:var(--muted);font-weight:700;margin-top:3px} .v1-links{display:flex;gap:28px;font-weight:600;font-size:15px;align-items:center} .v1-links>a,.nav-dd>a{white-space:nowrap} .v1-links>a,.nav-dd>a{color:var(--text);opacity:.78;transition:opacity .2s,color .2s} .v1-links>a:hover,.nav-dd>a:hover,.v1-links a[aria-current="page"],.nav-dd>a[aria-current="page"]{opacity:1;color:var(--brand)} .nav-cta{display:flex;align-items:center;gap:14px} .burger{display:none} /* dropdown */ .nav-dd{position:relative;display:flex;align-items:center;gap:4px} .dd-caret{width:14px;height:14px;color:var(--muted);transition:transform .2s;cursor:pointer} .nav-dd:hover .dd-caret,.nav-dd.open .dd-caret{transform:rotate(180deg);color:var(--brand)} .dd-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px); background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;min-width:230px; box-shadow:0 24px 50px -22px rgba(0,0,0,.35);display:grid;gap:2px;opacity:0;pointer-events:none; transition:opacity .2s,transform .2s;transition-delay:.12s;z-index:60} /* invisible bridge: keeps :hover alive while the cursor crosses the gap to the menu */ .dd-menu::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px} .nav-dd:hover .dd-menu,.nav-dd.open .dd-menu{opacity:1;pointer-events:auto;transform:translateX(-50%);transition-delay:0s} .dd-menu a{padding:10px 14px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--text);opacity:.85;transition:.15s} .dd-menu a:hover{background:var(--halo);color:var(--brand);opacity:1} /* horizontally-scrollable strips (produse filter chips) — drag + edge-fade affordance */ [data-hscroll]{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--hs-l,0px),#000 calc(100% - var(--hs-r,0px)),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 var(--hs-l,0px),#000 calc(100% - var(--hs-r,0px)),transparent 100%)} [data-hscroll].is-scrollable{cursor:grab} [data-hscroll].is-scrollable.dragging{cursor:grabbing;user-select:none;scroll-behavior:auto} [data-hscroll].dragging a,[data-hscroll].dragging button{pointer-events:none} @media (hover:none){[data-hscroll].is-scrollable{cursor:auto}} /* mobile menu */ .m-menu{display:none;flex-direction:column;gap:4px;padding:0 clamp(20px,4vw,48px) 0;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;border-top:0 solid var(--line)} .m-menu.open{max-height:380px;padding-block:16px 22px;border-top:1px solid var(--line)} .m-menu a{padding:12px 4px;font-weight:600;font-size:16px;color:var(--text);border-bottom:1px solid var(--line)} .m-menu a.btn{border:none;justify-content:center} /* footer */ .foot{background:var(--surface);border-top:1px solid var(--line);padding-block:56px 32px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px} .foot h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-family:var(--font-body);font-weight:700} .foot a,.foot p{display:block;color:var(--text);opacity:.8;font-size:14.5px;margin-bottom:10px;transition:opacity .2s,color .2s} .foot a:hover{opacity:1;color:var(--brand)} .foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)} @media (max-width:860px){ .ub-in{gap:18px;font-size:12px} .ub-i span{white-space:nowrap} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .v1-links{display:none} .m-menu{display:flex} .burger{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;border:1.5px solid var(--line)} .nav-cta .btn-primary{display:none} .ub-i:not(.ub-tel){display:none} .ub-tel{margin-left:0} .foot-grid{grid-template-columns:1fr 1fr} }