/* ВЕНДОРНАЯ КОПИЯ design-system/skins/alfa.css (скин «Группа Альфа»). Источник: C:/Users/User/website-crew/design-system/skins/alfa.css, снято 2026-09-10. Подключать ПОСЛЕ core.css. */ /* =========================================================================== design-system/skins/alfa.css — СКИН «ГРУППА АЛЬФА». Поверхности: gruppa-alfa.ru (собранная Astro-статика), gruppa-alfa.tech, gruppa-alfa-products (Next.js — те же значения через tailwind.config). Подключать ПОСЛЕ core.css. 🔴 Бренды НЕ смешиваются: Альфа — отдельное юрлицо и свой оранжевый. Ни один токен Апекса сюда не переносится и наоборот. Характер: строгий · воздушный · точный (та же дисциплина), но на фиолетовых поверхностях бренда, а не на графитовых. Что убираем из текущей сборки (визуальный шум без функции): • два radial-gradient-пятна на body и на .sl-hero — глянец «лендинга», который и породил ощущение «оба акцента сосуществуют»; • бесконечные пульсации @keyframes sl-pulse (точка срочности, tg-fab) — вне бюджета движения, реальной информации не несут; • разнобой радиусов 4/8/12/16/100px по файлу — остаётся шкала ниже. 🔴 Контраст каждой пары посчитан по формуле WCAG 2.x, числа рядом. =========================================================================== */ /* --- Шрифты ----------------------------------------------------------------- Golos Text и Oswald — кириллица ПОДТВЕРЖДЕНА фактически: в сборке лежат self-host субсеты sites/gruppa-alfa/site/_astro/fonts/golos-cyrillic.woff2 и oswald-cyrillic.woff2 с unicode-range U+0400–045F. Не по памяти — по файлам. Третью гарнитуру ради моноширинных цифр НЕ тянем (бюджет Lighthouse ≥90): в .surface-calc и в часах приёма работает системный моно + tabular-nums. */ :root { --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif; --font-text: 'Golos Text', 'Inter', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'JetBrains Mono', Consolas, 'Liberation Mono', monospace; } :root { /* --- Поверхности: фиолетовый бренда сохранён, глянец убран --- */ --color-bg: #1A1030; --color-bg-alt: #241744; --color-surface-1: #2D1E54; --color-surface-2: #241744; --color-line: #2E2447; /* декоративный разделитель — требование 3:1 к нему не относится */ /* 🔴 DS-3 (QA 10.09.2026, находка на gruppa-alfa-products): прежний #6D5F8C считали только к --color-bg (3.16:1) и проглядели, что интерактивные рамки чаще лежат на КАРТОЧКЕ: #6D5F8C на --color-surface-1 = 2.57:1 — провал 1.4.11. Новое значение проверено на всех четырёх подложках скина, худшая — подложка метки. Замер: sites/gruppa-alfa/_ds-contrast.py --pairs */ --color-line-strong: #8478A6; /* 4.50 к bg · 4.07 к bg-alt · 3.66 к surface-1 · 3.12 к category-bg ✓ */ /* --- Текст. Контраст на bg / bg-alt / surface-1 --- Чистый #FFFFFF заменён на #F2EEFA: на фиолетовом он мягче, а запас контраста избыточен и без него (15.8:1 против 18.1:1). */ --color-text: #F2EEFA; /* 15.8 / 14.4 / 12.9 :1 ✓ */ --color-text-muted: #CFC6E4; /* 11.1 / 10.0 / 9.0 :1 ✓ */ --color-text-subtle: #9E92B8; /* 6.3 / 5.7 / 5.1 :1 ✓ 🔴 Заменяет прежние rgba(255,255,255,.72/.45): прозрачность нельзя посчитать без знания подложки, поэтому у неё не бывает числа контраста. */ /* --- ЦВЕТ ДЕЙСТВИЯ — один. Кнопки, CTA, ключевые цифры, ссылки. --- */ --color-action: #FF7A1A; /* 6.94:1 к bg · 5.65:1 к surface-1 ✓ */ --color-action-hover: #E66A0D; /* тёмный текст на нём 5.54:1 ✓ */ --color-action-active: #D46212; /* тёмный текст на нём 4.79:1 ✓ 🔴 Прежний #CC5E10 давал 4.46:1 — провал AA. Заменён по замеру. */ --color-on-action: #1A1030; /* 6.94:1 на базовом оранжевом ✓. Белым по оранжевому было бы 2.61:1 — поэтому надпись на кнопке ТЁМНАЯ. */ --color-action-quiet: rgba(255, 122, 26, .14); --action-fill: var(--color-action); --action-fill-hover: var(--color-action-hover); --action-fill-active: var(--color-action-active); /* --- 🔴 СЛУЖЕБНЫЙ ЦВЕТ КАТЕГОРИИ / СРОЧНОСТИ — ГИПОТЕЗА ------------------- Что: фиолетовый используется как МЕТКА (категория кейса, тип услуги, срочность/дедлайн), и НИКОГДА — на кнопке, CTA или цене. Основание: research.md R11 ← находка F5 («один акцент на действие + один служебный цвет на категорию»). 🔴 Опора слабая и названа честно: два первичных голоса (B1-192, B2-197) плюс встречные голоса в обеих комнатах; это решение владельца, а не вывод данных. Панель синтетическая — [V] синтетика. ДАТА ПЕРЕСМОТРА: 09.12.2026. Не подтвердилось живым материалом — --color-category приравнивается к --color-text-subtle, и Альфа возвращается к правилу «ровно один акцент», как в apex. Проверка на приёмке: grep по --color-category в правилах .btn/.cta/.price должен давать НОЛЬ совпадений. --------------------------------------- */ --color-category: #A890D4; /* 6.55:1 к bg · 5.34:1 к surface-1 · 4.55:1 к --color-category-bg ✓ */ --color-category-bg: #3A2A5E; /* подложка метки; текст --color-text-muted на ней 7.68:1 ✓ */ --color-on-category: #F2EEFA; /* --- Ссылки и фокус --- */ --color-link: #FF7A1A; /* 6.94:1 к bg ✓ */ --color-link-hover: #FF9445; /* 8.25:1 к bg ✓ */ --color-focus: #FF7A1A; /* кольцо 6.94:1 к bg, требование ≥3:1 перекрыто */ /* --- Семантика --- warn взят жёлтым, а не оранжевым: рядом с цветом действия оранжевое предупреждение неразличимо. Плюс обязательный глиф из core (!/✓/✕). */ --color-success: #4ADE9E; /* 10.5:1 к bg ✓ */ --color-warn: #F5C518; /* 11.1:1 к bg ✓ */ --color-error: #FF6B6B; /* 6.5:1 к bg ✓ */ --color-success-bg: rgba(74, 222, 158, .12); --color-warn-bg: rgba(245, 197, 24, .12); --color-error-bg: rgba(255, 107, 107, .12); /* --- Выключенное --- */ --color-disabled-bg: #2A2142; --color-disabled-text: #9E92B8; /* 5.20:1 */ /* --- Внешний бренд-канал: Telegram ------------------------------------ Синий не принадлежит Альфе, но живёт на её страницах (FAB, кнопка «Написать в Телеграм», иконка в шапке). Держим ТОКЕНОМ, а не хексом по файлу, и с посчитанным контрастом — иначе это второй акцент явочным порядком. Надпись/глиф на синей заливке — ТЁМНАЯ по той же причине, что и на оранжевой: белый на #229ED9 даёт 3.02:1, а --color-text (#F2EEFA) и вовсе 2.64:1 — для текста не годится ни то, ни другое. */ --color-tg: #229ED9; /* 6.00:1 к --color-bg — заливка/граница ✓ (1.4.11) */ --color-tg-ink: #4FBDE8; /* 8.48:1 к --color-bg — синий КАК ТЕКСТ ✓ */ --color-tg-quiet: rgba(34, 158, 217, .12); --color-on-tg: #1A1030; /* 6.00:1 на #229ED9 ✓ (белый там был бы 3.02:1 ✗) 🔴 Числа 5.94 и 6.80 в прежних комментариях были из разных прогонов и противоречили друг другу: это ОДНА пара #229ED9/#1A1030, контраст симметричен. Пересчитано _ds-contrast.py 10.09.2026 — 6.00:1 в обе стороны. */ /* Затемнение под модалкой согласия на cookie. Прозрачность здесь уместна: это не текстовая подложка, контраст к ней никто не читает. */ --color-scrim: rgba(10, 5, 22, .72); --shadow-1: rgba(10, 5, 22, .38); --shadow-2: rgba(10, 5, 22, .58); /* --- 🔴 Светлая поверхность «считаемого» (R1 ← F2/F3): цена, стоимость сопровождения, смета, сроки этапов, любые таблицы цифр. Оранжевый как ТЕКСТ на бумаге не проходит (2.43:1), поэтому действие внутри светлой карточки — затемнённый бренд-оранжевый. --- */ --surface-light-bg: #F6F7F5; --surface-light-surface: #FFFFFF; --surface-light-text: #14181E; /* 16.6:1 ✓ */ --surface-light-muted: #4A5462; /* 7.1:1 ✓ */ --surface-light-line: #E1E4DF; --surface-light-line-strong: #7E847B; /* 3.6:1 ✓ */ --surface-light-action: #A34400; /* 5.77:1 на #F6F7F5; белый текст на нём 6.21:1 ✓ */ --surface-light-on-action: #FFFFFF; --surface-light-success: #1F7A4D; /* 4.95:1 ✓ */ --surface-light-warn: #8A5A00; /* 5.52:1 ✓ */ --surface-light-error: #B3261E; /* 6.08:1 ✓ */ /* --- Форма бренда: у Альфы она жёстче, чем у Апекса (Oswald, прямые углы, узкие кнопки). Радиусы уменьшены, но это по-прежнему ШКАЛА. --- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; } /* --- Кнопка Альфы: узкая, прописными, как сейчас на сайте ------------------ */ .btn { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius-sm); } /* --- Метка категории / срочности. Единственное место фиолетового. На кнопку этот класс не вешать ни при каких условиях. ---------------- */ .badge--category { background: var(--color-category-bg); color: var(--color-category); border-color: transparent; } .badge--urgent { background: var(--color-category-bg); color: var(--color-category); border-color: var(--color-category); } .badge--urgent::before { content: "!"; } /* --- Telegram: два места, где синий заливается сплошняком ------------------ 🔴 Находка QA 10.09.2026 (M-2): токен --color-on-tg был объявлен и НИ РАЗУ не применён, а обе сплошные заливки красили глиф/надпись через --color-text (#F2EEFA на #229ED9 = 2.64:1 — провал и 4.5, и 3:1). Правило живёт в скине, чтобы его получили все поверхности Альфы (собранная статика gruppa-alfa.ru, gruppa-alfa.tech, Next-витрина продуктов), а не только та, где находку нашли. */ /* ⚠️ Ровно два селектора: только у них фон СПЛОШНОЙ синий. У .btn--tg в покое фон — --color-tg-quiet (почти прозрачный), там тёмная надпись утонула бы, и работает --color-tg-ink (8.48:1). Поэтому :focus-visible/:active сюда НЕ добавлять: они фон не заливают. */ .tg-fab, .btn--tg:hover { color: var(--color-on-tg); } /* 6.00:1 на #229ED9 ✓ */ /* --- 🔴 БЛОК ДОВЕРИЯ (R4 ← F7) -------------------------------------------- Главный названный фактор доверия оказался вне осей «цвет» и «тон»: во сколько берут трубку ПО МЕСТНОМУ ВРЕМЕНИ клиента, как зовут человека и что происходит, когда его нет. Каркас .trust живёт в core, здесь — бренд-подача и три обязательных слота. ⚠️ Значения (часы, имя, замена) — ФАКТЫ КЛИЕНТА. Пока их не назвал владелец (open_question OQ-2), блок в вёрстку не идёт: выдуманное имя специалиста хуже отсутствующего блока. */ /* Рамка ровная со всех сторон: цветная полоса слева (border-left 3px) — ленивый акцент, который прикрывает отсутствие иерархии. Здесь иерархию держат имя специалиста цветом действия и моноширинные часы. */ .trust { background: var(--color-surface-1); border: var(--border-w) solid var(--color-line-strong); border-radius: var(--radius-lg); padding: var(--space-6); } .trust__label { color: var(--color-text-subtle); } .trust__value { font-family: var(--font-display); font-weight: 500; } /* Часы приёма — табличные цифры, чтобы «09:00–18:00» не плясало */ .trust__value--time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-h3); } /* Имя ведущего специалиста — цвет действия: это единственная «цифра», ради которой звонят (F7). Второго акцента здесь не появляется. */ .trust__value--person { color: var(--color-action); } /* «Что происходит, когда его нет» — обязательная третья строка блока */ .trust__note { color: var(--color-text-muted); } .trust__note:empty { display: none; } /* --- Проверяемость цифр (R5 ← F8): цифра без даты/источника не верстается. Класс требует подпись, иначе блок схлопывается и дефект видно. ------- */ .fact { display: grid; gap: var(--space-1); } .fact__value { font-family: var(--font-display); font-size: var(--fs-num); line-height: var(--lh-num); color: var(--color-action); font-variant-numeric: tabular-nums; } .fact__source { font-size: var(--fs-caption); color: var(--color-text-subtle); } .fact__source:empty { outline: 2px dashed var(--color-error); } /* видимый дефект вместо тихой пустоты */ /* --- ПЕЧАТЬ. Основание — находка QA пилота N-5 (10.09.2026): сброса на `body` не хватает, потому что цвета текста заданы на компонентах через var(). Значения переопределяет СКИН: его :root грузится после ядра. Без этого блока страница Альфы на бумаге либо льёт фиолетовую заливку, либо (если пользователь отключил печать фонов) даёт светлый текст по белому. Контрасты к белому посчитаны и подписаны. -------------------- */ @media print { :root { --color-bg: #FFFFFF; --color-bg-alt: #FFFFFF; --color-surface-1: #FFFFFF; --color-surface-2: #FFFFFF; --color-line: #BBBBBB; --color-line-strong: #555555; --color-text: #000000; /* 21:1 к белому */ --color-text-muted: #333333; /* 12.63:1 */ --color-text-subtle: #555555; /* 7.46:1 */ --color-link: #000000; --color-link-hover: #000000; --color-action: #000000; --color-action-hover: #000000; --color-action-active: #000000; --color-on-action: #FFFFFF; --color-action-quiet: transparent; --action-fill: var(--color-action); --action-fill-hover: var(--color-action); --action-fill-active: var(--color-action); --color-category: #333333; /* метка категории читается как текст */ --color-category-bg: #FFFFFF; --color-on-category: #000000; --color-tg: #000000; --color-tg-ink: #000000; /* #229ED9 на белом = 3.02:1, для текста мало */ --color-tg-quiet: transparent; --color-on-tg: #FFFFFF; --color-success: #1F7A4D; /* 4.95:1 */ --color-warn: #8A5A00; /* 5.52:1 */ --color-error: #B3261E; /* 6.08:1 */ --color-success-bg: #FFFFFF; --color-warn-bg: #FFFFFF; --color-error-bg: #FFFFFF; --color-disabled-bg: #FFFFFF; --color-disabled-text: #555555; --shadow-1: transparent; --shadow-2: transparent; --shadow-sm: none; --shadow-md: none; } body { background: #FFFFFF; color: #000000; } } /* --- Фон: плоский. Radial-пятна убраны намеренно --------------------------- Было: два radial-gradient на body + два на .sl-hero (оранжевое и фиолетовое). Они и создавали ощущение двух конкурирующих акцентов, а на мобильном в ярком свете (R9 ← F18) превращались в грязь. */ body { background-image: none; background-attachment: initial; } .hero { background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%); }