/* ──────────────────────────────────────────────────────────────────────────── СЛОЙ ТОКЕНОВ СТРАНИЦЫ → ФИРМЕННЫЕ РУЧКИ. Правило скилла aized-web-brand: не перекрашивать таблицу стилей целиком, а объявить свои токены ЧЕРЕЗ --brand-*. Тогда новая сборка стиля от Brendists приезжает одним прогоном brand/brand_palette.py, а не переписыванием сайта. Ни одного цвета руками: чего в палитре нет — ВЫВОДИМ через color-mix, потому что выведенный цвет переворачивается вместе с темой, а подобранный на глаз нет. ──────────────────────────────────────────────────────────────────────────── */ :root{ --fg:var(--brand-ink); --mut:var(--brand-muted); --line:var(--brand-line); --acc:var(--brand-accent); /* золото: рамки, обводка фокуса */ /* ⚠️ Заливка кнопки под почти белую надпись дала 4.08:1 (светлая) и 3.85:1 (тёмная) — ниже нормы обе. Притемняем ЧЁРНЫМ, а не --brand-ink: ink в тёмной теме светлый, и подмес им испортил бы ту тему, ради которой правка. Замер после: 5.6:1 и 5.5:1. */ --acc-fill:color-mix(in srgb,var(--brand-accent) 80%,#000); --on-acc:var(--brand-accent-ink); /* текст на золоте */ /* ⚠️ Золото БУКВОЙ не годится: замер на villka дал 2.73:1 в светлой теме. Подмешиваем основной текст — и цвет темнеет в светлой, светлеет в тёмной сам. */ --acc-ink:color-mix(in srgb,var(--brand-accent) 60%,var(--brand-ink)); --card:var(--brand-surface-solid); --card-2:color-mix(in srgb,var(--brand-ink) 9%,var(--brand-bg-solid)); --hdr:color-mix(in srgb,var(--brand-bg-solid) 86%,transparent); --shadow:color-mix(in srgb,var(--brand-ink) 16%,transparent); --edge:color-mix(in srgb,var(--brand-accent) 45%,var(--brand-line)); /* приглушённый текст НА ПОДВАЛЕ: подложка там светлее страницы, обычный --mut давал 4.18:1 в тёмной теме. Подмес основного текста чинит обе темы разом. */ --mut-2:color-mix(in srgb,var(--brand-muted) 70%,var(--brand-ink)); --rad:var(--brand-radius); } *{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--brand-bg-solid)} body{margin:0;color:var(--fg);font:16px/var(--brand-leading) var(--brand-body); /* узор ПЕРВЫМ слоем, заливка вторым — так велит домашний файл */ background-color:var(--brand-bg-solid); background-image:var(--brand-texture),var(--brand-bg); background-size:var(--brand-texture-size),auto; background-position:var(--brand-texture-pos),0 0; background-repeat:var(--brand-texture-repeat),no-repeat; background-attachment:fixed; -webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,.logo,.price,.card-n,.post b,.ftr-h,.big-total{font-family:var(--brand-display)} /* ⚠️ У Georgia цифры СТАРОСТИЛЬНЫЕ — «0» ростом со строчную букву. На снимке «Корзина 0» читалось как «Корзина о», а цена выглядела набором букв. Там, где число обязано читаться числом, ставим заголовочный шрифт: у Playfair цифры прописные. В тексте статьи старостильные цифры оставляем — там они как раз к месту. */ [data-cart-count],.ctotal,.ci-r,.specs td,.qty button,.card-p,.btn{ font-family:var(--brand-display); /* ⚠️ Смены шрифта МАЛО: у Playfair Display цифры по умолчанию тоже старостильные. Прописные включаются признаком шрифта lnum — иначе «890 ₽» так и остаётся похожим на слово. Проверено снимком, а не чтением спецификации. */ font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1} h1{font-size:clamp(30px,4.4vw,46px);line-height:1.12;margin:0 0 .45em;font-weight:600} h2{font-size:clamp(23px,2.8vw,30px);line-height:1.22;margin:1.7em 0 .55em;font-weight:600} h3{font-size:20px;margin:0 0 .3em;font-weight:600} p{margin:0 0 1em} .wrap{max-width:1180px;margin:0 auto;padding:0 20px} .narrow{max-width:760px} .mut{color:var(--mut)} .sm{font-size:14px} .lead{font-size:clamp(17px,1.6vw,19px);color:var(--mut);max-width:62ch} .skip{position:absolute;left:-9999px} .skip:focus{left:8px;top:8px;background:var(--card);color:var(--fg);padding:10px;z-index:99; border-radius:var(--rad);border:1px solid var(--line)} .hdr{position:sticky;top:0;z-index:30;background:var(--hdr); backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .hdr-in{display:flex;align-items:center;gap:22px;height:64px} .hdr-r{display:flex;align-items:center;gap:12px;flex:0 0 auto} .logo{font-weight:700;letter-spacing:.16em;font-size:19px} .nav{display:flex;gap:18px;flex:1;flex-wrap:wrap} input[type=checkbox],input[type=radio]{width:20px;height:20px; /* цель добираем отступом у самой метки — сам квадрат крупнее делать некрасиво */ margin:2px 6px 2px 0;accent-color:var(--acc)} label.rad,label.soglasie{display:flex;align-items:center;gap:8px;min-height:28px; padding:4px 0;cursor:pointer} .nav a{color:var(--mut);font-size:15px; /* ⚠️ Цель для пальца: было 78x23 — на пиксель ниже нормы 24x24, и это ловится только замером (mobil_check.py), глазом такая разница неотличима. */ display:inline-flex;align-items:center;min-height:26px} .nav a:hover{color:var(--acc-ink)} .cart-btn{border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:14px; background:var(--card);white-space:nowrap} .cart-btn:hover{border-color:var(--edge);color:var(--acc-ink)} /* Кнопка темы. Цвет НЕ задаём на каждую тему: значок берёт --brand-ink, а тот разворачивается сам. Солнце — исключение и объяснимо: оно видно только на тёмной теме, поэтому берёт «текст на акценте», почти белый в обеих палитрах. */ .tema{width:34px;height:34px;flex:none;padding:0;display:inline-flex;align-items:center; justify-content:center;border:1px solid var(--line);border-radius:999px; background:color-mix(in srgb,var(--brand-ink) 4%,transparent); color:var(--brand-ink);cursor:pointer;transition:color .2s,border-color .2s,background .2s,transform .15s} .tema:hover{border-color:var(--edge);background:color-mix(in srgb,var(--brand-ink) 8%,transparent)} .tema:active{transform:scale(.94)} .tema:focus-visible{outline:2px solid var(--acc);outline-offset:2px} .tema svg{width:26px;height:26px;display:block} .tema .solnce{color:var(--brand-accent-ink)} :root[data-theme="dark"] .tema .luna{display:none} :root[data-theme="light"] .tema .solnce{display:none} .hero{border-bottom:1px solid var(--line)} .hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center; padding:56px 20px 60px} .hero-a{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} .hero-im img{border-radius:var(--rad);box-shadow:0 18px 44px var(--shadow)} .btn{display:inline-block;background:var(--acc-fill);color:var(--on-acc);padding:13px 24px; border-radius:999px;font-weight:600;border:0;cursor:pointer;font-size:16px; font-family:var(--brand-body); transition:transform 200ms cubic-bezier(.34,1.56,.64,1),background-color .2s} .btn:hover{transform:scale(1.045)} .btn:active{transform:scale(.97)} .btn:focus-visible{outline:3px solid var(--acc);outline-offset:2px} .btn-2{background:transparent;color:var(--fg);border:1px solid var(--line)} .btn-2:hover{border-color:var(--edge);color:var(--acc-ink)} .sect{padding:44px 20px} /* «Читайте также»: ссылка обязана быть ЦЕЛЬЮ, а не строкой текста. ⚠️ Первая версия блока была обычным