/* Design tokens + reset. Loaded first on every page. */ /* ============ TOKENS ============ */ :root{ --ink:#0F1112; --graphite:#171A20; --paper:#FFFFFF; --mist:#F4F5F6; --cloud:#EAECEE; --silver:#5C5E62; --line:#E3E5E7; /* АКЦЕНТ МАГАЗИНУ — синій електрик. * * Був червоний #E31937. Це не «просто червоний»: це фірмовий колір Tesla, і * магазин запчастин мав на нього право, бо говорив про ті машини. Тут його * підстава зникла, а сам колір лишився б чужим брендом на кожній кнопці. * * Чому синій, а не зелений чи бурштиновий, хоча «енергія» просилася саме в * них: --go-ink уже означає «є в наявності», --warn — «увага». Акцент бренду, * який збігається зі станом, робить нечитаними обидва — покупець не знає, чи * зелена плашка це наявність, чи просто кнопка. * * --volt це ЗАЛИВКА, МЕЖА і КІЛЬЦЕ ФОКУСУ. Для тексту завжди --volt-ink, * і саме тому пара, а не один колір: заливці досить 3:1, тексту потрібно * 4.5:1 на кожній поверхні, а кошик тонований. Числа перевірені розрахунком, * не на око. */ --volt:#0A66D6; --volt-ink:#0B57B8; /* 6.84 on paper, 6.27 on mist, 5.87 on --volt-bg */ --volt-bg:#E8EEF9; /* Scoped to --graphite surfaces only. */ --volt-on-dark:#8FBEFF; /* Same split for green: --go is a fill (3:1 is all a fill needs), --go-ink is the text colour. --go was 3.93:1 on --go-bg, which failed AA. */ --go:#128A4B; --go-ink:#0E7440; /* 5.85 on paper, 5.36 on mist, 5.21 on --go-bg */ --go-bg:#E8F5ED; /* No warning colour existed. Stock limits and "pending" must not reuse red, which means error. */ --warn:#8A5A00; /* 5.93 on paper, 5.43 on mist, 5.39 on --warn-bg */ --warn-bg:#FDF3E2; /* --line is 1.26:1 on white — fine for a decorative rule, a straight 1.4.11 failure for anything that is the visible boundary of a control. This is the lightest grey clearing 3:1 on every surface these pages use. */ --ctrl-line:#7E8185; /* 3.91 paper, 3.59 mist, 3.30 cloud */ --r-sm:14px; --r-md:22px; --r-lg:32px; --r-xl:44px; --pill:999px; --pad:clamp(20px,5vw,64px); --maxw:1320px; --shadow-1:0 2px 8px rgba(15,17,18,.05); --shadow-2:0 12px 40px rgba(15,17,18,.10); --shadow-3:0 24px 70px rgba(15,17,18,.16); --ease:cubic-bezier(.22,.61,.36,1); /* Height of the consent banner, written by consent.js from a ResizeObserver and reset to 0 when it goes. Everything fixed to the bottom of the viewport offsets from this. Not a design token — a measurement — but it has to live where every stylesheet can see it. */ --cc-h:0px; } *{box-sizing:border-box;margin:0;padding:0} /* scroll-padding, not scroll-margin, and on html rather than body — it does not propagate from body to the viewport, and the two are additive, so declaring both over-scrolls by a full banner height. This is only half of 2.4.11. It fixes the case where the browser scrolls a focused element flush to the bottom edge. It cannot fix an element already at maximum scroll — every footer link on every page — because there is no scroll range left to spend. That half is fixed by .foot reserving the strip. The +10px clears the 3px focus ring at its 3px offset, which buys 2.4.12 AAA at no cost. */ html{scroll-behavior:smooth;scroll-padding-bottom:calc(var(--cc-h) + 10px)} body{ font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4,.font-display{font-family:'Outfit','Manrope',sans-serif;letter-spacing:-.02em} .mono{font-family:'JetBrains Mono',ui-monospace,monospace} /* height:auto ОБОВʼЯЗКОВИЙ поруч із max-width. Без нього картинка з атрибутами width/height у вужчому контейнері стискається по ширині, а висоту лишає з атрибута — і розплющується. Атрибути при цьому потрібні: з них браузер бере співвідношення й резервує коробку до декодування, тож вміст під картинкою не стрибає. Місцеві обхідні height:auto по файлах лишаються — вони нічого не коштують і переживуть редагування цього рядка. */ img,svg{display:block;max-width:100%;height:auto} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} select,input{font:inherit;color:inherit} a{color:inherit;text-decoration:none} :focus-visible{outline:3px solid var(--volt);outline-offset:3px;border-radius:6px} /* The nav is position:fixed and 70px tall, so a focused element scrolled to the very top of the viewport lands underneath it. WCAG 2.2 SC 2.4.11. І знизу теж — цього рядка бракувало. Табом УПЕРЕД браузер підкручує елемент до НИЖНЬОГО краю вікна, а на сторінці товару там висить .stickybar: близько 76px, увімкнена на весь час, поки блок купівлі прокручено вгору, тобто на весь підвал. Посилання в підвалі заввишки ~38px ховалося під нею повністю — рівно те, що 2.4.11 забороняє. Верхню половину цієї проблеми колись помітили, нижню ні. */ a,button,input,select,textarea,summary,[tabindex]{scroll-margin-top:86px; scroll-margin-bottom:96px} /* Available to screen readers, invisible on screen. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* Skip link. The nav is fixed, so this is fixed too rather than scrolled away. */ .skip{position:fixed;top:10px;left:10px;z-index:200;padding:12px 20px;border-radius:var(--pill); background:var(--graphite);color:#fff;font-weight:600;font-size:14px; transform:translateY(-200%);transition:transform .18s var(--ease)} .skip:focus{transform:translateY(0)} .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)} /* Хто увімкнув «підвищений контраст» у системі, має щось від цього отримати. * * Межа елементів керування — найтонший сигнал в інтерфейсі: один піксель на * 3,91:1 при потрібних 3:1. Запас у 0,91 і є тим, що тут варто витратити. * Решту чіпати нема сенсу: --silver на папері дає 6,50:1, --graphite 17,43:1, * і «більше» їм нічого не додасть. */ @media (prefers-contrast: more) { :root { --ctrl-line:#595C60; } /* 6,72:1 на --paper, 6,16:1 на --mist */ }