/* ============================================================ СТРАНИЦЫ УСЛУГ — палитра поверх home.css Источник: photo/политра1.jpg. Подключается ПОСЛЕ home.css и переопределяет только цветовые токены — компоненты (.card, .btn, .bullets, .faq, .miniform, .figs, .points) берутся оттуда как есть. Логика: тёмно-синий вместо чёрного главной. Сайт остаётся узнаваемым, но услуги визуально отделены от главной. Контраст (проверено): cream на navy 10.57, gold на navy 8.35, orange на navy 5.26, navy на cream/gold/orange 10.57/8.35/5.26. ЖЁСТКО: red #D62828 как ТЕКСТ не проходит нигде (2.77 на navy, 3.82 на креме) — только заливки, плашки и цифры от 24px. И на самом красном как на фоне текст только белый (4.99), не кремовый (3.82). Поэтому красного нет среди акцентов услуг — см. блок ниже. ============================================================ */ :root{ --u-navy: oklch(0.294 0.066 238.5); /* #003049 — база */ --u-navy-1: oklch(0.345 0.062 238.5); /* карточка на navy */ --u-navy-2: oklch(0.395 0.058 238.5); /* приподнятая карточка */ --u-red: oklch(0.568 0.208 27.1); /* #D62828 — только заливкой */ --u-orange: oklch(0.719 0.179 54.4); /* #F77F00 */ --u-gold: oklch(0.840 0.147 80.5); /* #FCBF49 */ --u-cream: oklch(0.908 0.057 98.6); /* #EAE2B7 */ --u-cream-hi: oklch(0.955 0.032 98.6); /* карточка на крем-поле */ /* второстепенный текст: на navy и на креме считаются отдельно, потому что подложки разной светлоты */ --u-muted-on-navy: oklch(0.760 0.030 238.5); --u-muted-on-cream: oklch(0.430 0.030 238.5); --u-line-navy: oklch(0.400 0.045 238.5); --u-line-cream: oklch(0.800 0.040 98.6); /* Акцент услуги. Перекрывается классом на — так одна вёрстка обслуживает все шесть услуг, меняется одна строка. */ --u-accent: var(--u-orange); --u-accent-ink: var(--u-navy); /* текст НА заливке акцентом */ } /* Акценты по услугам — шесть штук, по одному на направление. Контраст замерен по фактически отрисованным цветам (contrast.py) в обе стороны: акцент как текст на navy и navy как текст на заливке акцентом. Минимум — orange 5.26, максимум — gold 8.35, все проходят AA. Поэтому --u-accent-ink нигде не переопределяется: базовый navy из :root верен для всех шести, а лишние строки — лишние места для ошибки. Красного среди акцентов нет намеренно: #D62828 как текст даёт 2.77 на navy, а через строку `--orange: var(--u-accent)` ниже акцент растекается по всем компонентам home.css — страница развалилась бы целиком, не только CTA. */ body.u-accent--orange{ --u-accent: var(--u-orange); } /* #F77F00 5.26 */ body.u-accent--lime { --u-accent: oklch(0.800 0.150 130); } /* #9DD163 7.72 */ body.u-accent--coral { --u-accent: oklch(0.750 0.160 25); } /* #FF8179 5.71 */ body.u-accent--sky { --u-accent: oklch(0.780 0.120 225); } /* #51C7F1 7.10 */ body.u-accent--gold { --u-accent: var(--u-gold); } /* #FCBF49 8.35 */ body.u-accent--violet{ --u-accent: oklch(0.760 0.130 300); } /* #BE9DF7 6.16 */ /* ---- ПЕРЕОПРЕДЕЛЕНИЕ ТОКЕНОВ ГЛАВНОЙ ---- home.css построен на --ink-black/--cream/--orange. Подменяем их значения, и все его компоненты автоматически перекрашиваются. */ body.tb-usluga{ --ink-black: var(--u-navy); --surface-1: var(--u-navy-1); --surface-2: var(--u-navy-2); --cream: var(--u-cream); --cream-deep: var(--u-cream); --cream-hi: var(--u-cream-hi); --orange: var(--u-accent); --orange-soft: var(--u-gold); --gold: var(--u-gold); --muted: var(--u-muted-on-navy); --line: var(--u-line-navy); --line-on-cream: var(--u-line-cream); --navy: var(--u-navy); background:var(--u-navy); color:var(--u-cream); } /* На крем-поле второстепенный текст берётся из home.css формулой под чёрную главную — здесь она даёт мутный оттенок, задаём явно. */ body.tb-usluga .field-cream .muted, body.tb-usluga .field-cream .sec-head p, body.tb-usluga .field-cream .lead, body.tb-usluga .field-cream .card p, body.tb-usluga .field-cream .points li, body.tb-usluga .field-cream .note{color:var(--u-muted-on-cream)} body.tb-usluga .field-cream{background:var(--u-cream);color:var(--u-navy)} body.tb-usluga .field-cream h2, body.tb-usluga .field-cream h3, body.tb-usluga .field-cream .points li b, body.tb-usluga .field-cream .bullets li b{color:var(--u-navy)} /* FAQ на крем-поле: в home.css аккордеон рассчитан на тёмную секцию и берёт surface-1 как фон. На креме получался синий текст на синем (1.21). */ body.tb-usluga .field-cream .faq details{ background:var(--u-cream-hi); border-color:var(--u-line-cream); } body.tb-usluga .field-cream .faq details[open]{border-color:var(--u-accent)} /* вопросы строчными: в uppercase длинные фразы в Wadik занимают по три строки и читаются как крик */ body.tb-usluga .faq summary{ color:var(--u-navy); text-transform:none;letter-spacing:0; font-size:16px;line-height:1.35; } body.tb-usluga .field-cream .faq summary{color:var(--u-navy)} body.tb-usluga .field-cream .faq summary:after{color:var(--u-accent)} body.tb-usluga .field-cream .faq .a{color:var(--u-muted-on-cream)} /* ---- HERO страницы услуги ---- Без картинки: заголовок живой текст (в отличие от главной, где он вшит в фото). Экономит вес и позволяет размножать страницы. */ .u-hero{ position:relative; padding-top:clamp(48px,9vh,110px); padding-bottom:clamp(44px,8vh,96px); background: radial-gradient(120% 90% at 88% 8%, color-mix(in oklch, var(--u-accent) 26%, transparent) 0%, transparent 62%), var(--u-navy); } .u-hero h1{ font-family:var(--f-h1);font-weight:400; /* Кегль ограничен длиной самого длинного слова, как и на главной. В AKONY «Перформанс-» = 15.04em, контейнер ≈92vw → потолок ≈6vw. Названия услуг длинные, поэтому мельче giant главной. */ font-size:clamp(19px,5.6vw,68px); line-height:.9;letter-spacing:-.03em;text-transform:uppercase; color:var(--u-cream);text-wrap:balance; /* Перенос только в точках , расставленных в разметке по дефисам. break-word рвал бы слово в произвольном месте — на живой странице получалось «ПЕРФОРМАН-С-МАРКЕТИНГ». */ overflow-wrap:normal; word-break:normal; } .u-hero .lead{color:var(--u-cream);max-width:46ch;margin-top:18px} .u-price{ display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-top:22px; font-family:var(--f-cta);font-weight:800; font-size:clamp(18px,2.2vw,28px);color:var(--u-gold); font-variant-numeric:tabular-nums; white-space:nowrap; /* «от 40 000 ₽/мес» не разрывается посередине */ } .u-price small{ font-family:var(--f-body);font-weight:600;font-size:13px; color:var(--u-muted-on-navy);letter-spacing:0; } /* ---- ПЛАШКА-БОЛЬ (единственное место красного) ---- red здесь фон, а не текст. Текст белый, не кремовый: кремовый на красном даёт 3.83 — ниже нормы, белый 5.01. */ .u-pain{ display:inline-flex;align-items:center;gap:8px; padding:7px 14px;border-radius:var(--radius-pill); background:var(--u-red);color:#fff; font-family:var(--f-cta);font-weight:700;font-size:12px; text-transform:uppercase;letter-spacing:.06em; } /* ---- JTBD-карточки: боль → что на самом деле нужно ---- */ .u-jtbd{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} .u-jtbd .card{display:flex;flex-direction:column;gap:10px} .u-jtbd .card .job{ font-family:var(--f-h2h3);font-weight:700; font-size:clamp(17px,1.6vw,20px);line-height:1.25; color:var(--u-navy); text-transform:none;letter-spacing:0; /* формулировки задач, не лозунги */ } .u-jtbd .card .job-why{color:var(--u-muted-on-cream);font-size:15px;line-height:1.6} .u-jtbd .card .job-do{ margin-top:auto;padding-top:12px; border-top:1px solid var(--u-line-cream); font-size:14px;line-height:1.55;color:var(--u-navy); } .u-jtbd .card .job-do b{font-family:var(--f-h2h3);text-transform:none} /* ---- СОСТАВ РАБОТ + РЕЗУЛЬТАТ ---- */ .u-split{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start} @media(max-width:900px){.u-split{grid-template-columns:minmax(0,1fr)}} .u-result{ background:var(--u-navy-1);border:1px solid var(--u-line-navy); border-radius:var(--radius-card);padding:clamp(20px,2.4vw,28px); } .u-result h3{color:var(--u-cream);margin-bottom:16px} .u-result .figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .u-result .fig{background:transparent;border-color:var(--u-line-navy);padding:16px} .u-result .fig b{color:var(--u-gold)} .u-result .fig span{color:var(--u-muted-on-navy)} /* ---- ЦЕНА: из чего складывается ---- */ .u-pricing{ background:var(--u-cream-hi);border:1px solid var(--u-line-cream); border-radius:var(--radius-card);padding:clamp(22px,2.6vw,32px); } .u-pricing .u-price{margin-top:0;color:var(--u-navy)} .u-pricing .u-price small{color:var(--u-muted-on-cream)} .u-pricing .points{margin-top:18px} /* ---- ФИНАЛЬНЫЙ CTA ---- */ .u-cta{background:var(--u-accent);color:var(--u-accent-ink)} .u-cta h2,.u-cta .lead{color:var(--u-accent-ink)} .u-cta .lead{opacity:.86;max-width:52ch} .u-cta .btn-primary{background:var(--u-navy);color:var(--u-cream)} .u-cta .miniform input{background:var(--u-cream-hi);border-color:transparent;color:var(--u-navy)} /* сноска на оранжевом: полупрозрачный navy давал 4.07 — ниже нормы, берём полный цвет */ .u-cta .note{color:var(--u-accent-ink)} /* ---- ОБЩАЯ ШАПКА САЙТА НА СТРАНИЦАХ УСЛУГ ---- header.php один на все внутренние страницы, менять его нельзя, не задев остальные разделы. Поэтому перекрываем стилями только под .tb-usluga: шапка приводится к Kinetic Editorial, а её обёртки (.tb-wrap max-width 880px и .tb-main с отступами) распускаются — иначе full-bleed секции зажимаются в узкую колонку. */ body.tb-usluga .tb-main{padding:0} body.tb-usluga .tb-main > .tb-wrap{max-width:none;padding:0;margin:0} body.tb-usluga .tb-site-header{ position:sticky;top:0;z-index:50; padding:0; /* базовые 28px сверху и снизу здесь лишние */ background:color-mix(in oklch, var(--u-navy) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--u-line-navy); } body.tb-usluga .tb-site-header .tb-wrap{ max-width:var(--wrap); padding:0 var(--gutter); display:flex;align-items:center;gap:20px;min-height:64px; } body.tb-usluga .tb-brand{ display:inline-flex;align-items:center;min-height:44px; font-family:var(--f-cta);font-weight:800;font-size:15px; text-transform:uppercase;letter-spacing:.01em; color:var(--u-cream);line-height:1.2; /* имя сайта длинное — на планшете переносим, а не выдавливаем меню */ max-width:min(52vw, 420px); } body.tb-usluga .tb-brand span{color:var(--u-accent)} body.tb-usluga .tb-nav{margin-left:auto} /* display:flex обязателен явно: без него пункты встают в столбик и шапка растягивается до 300px (в базовом style.css flex задан, но порядок каскада с нашими правилами это не гарантирует) */ body.tb-usluga .tb-nav .tb-menu{ display:flex;flex-wrap:wrap;align-items:center;gap:22px; list-style:none;margin:0;padding:0; } body.tb-usluga .tb-nav .tb-menu a{ display:inline-flex;align-items:center;min-height:44px; font-family:var(--f-body);font-size:14px;font-weight:600; color:var(--u-muted-on-navy); } body.tb-usluga .tb-nav .tb-menu a:hover{color:var(--u-cream)} body.tb-usluga .tb-nav .tb-menu .current-menu-item > a{color:var(--u-accent)} @media(max-width:900px){ /* меню в строку не помещается — переносим под бренд и поджимаем */ body.tb-usluga .tb-site-header .tb-wrap{ flex-wrap:wrap;gap:2px 16px;padding-top:10px;padding-bottom:10px;min-height:0; } /* Полное имя из bloginfo («Маркетинговое ИИ-агентство Термос Беспалова») на мобилке 512px при экране 390 — оно и распирало страницу, и растягивало шапку на 304px. Прячем текст, рисуем короткий вордмарк псевдоэлементом: доступное имя ссылки остаётся полным. */ body.tb-usluga .tb-brand{ font-size:0;line-height:0;white-space:normal;min-height:0; display:inline-flex;align-items:center; } body.tb-usluga .tb-brand span{display:none} body.tb-usluga .tb-brand::after{ content:"Термос Беспалова"; font-family:var(--f-cta);font-weight:800;font-size:13px;line-height:1.2; text-transform:uppercase;color:var(--u-cream);white-space:nowrap; } body.tb-usluga .tb-nav{ margin-left:0;width:100%; /* меню в одну строку со свайпом: перенос на вторую строку раздувал шапку до 129px и съедал первый экран */ overflow-x:auto;scrollbar-width:none; } body.tb-usluga .tb-nav::-webkit-scrollbar{display:none} body.tb-usluga .tb-nav .tb-menu{gap:16px;flex-wrap:nowrap;width:max-content} body.tb-usluga .tb-nav .tb-menu a{font-size:13px;min-height:36px;white-space:nowrap} } /* ---- мобильная плотность ---- */ @media(max-width:640px){ .u-hero{padding-top:34px;padding-bottom:38px} .u-hero .lead{font-size:16px} .u-result .figs{grid-template-columns:minmax(0,1fr)} .u-jtbd{gap:12px} /* home.css на ≤560px опускает базовый h2 до clamp(22px,5.6vw,30px) — расчёт под главную, где h1 тоже поджат под слово в hero-картинке. На услуге h1 живой текст с тем же нижним порогом 22px — на узких экранах оба совпадают и иерархия схлопывается. Держим h2 услуги ниже. */ h2{font-size:18px} }