andreypr207andClaude Opus 5.5
20491d1ba4
- Страницы обоих брендов из блоков Payload (D-029): главная, цены, локации, поддержка, 4 юридические, 404 и 500. Коллекции pages (черновики и версии) и faq с местами показа, 12 типов блоков; поля sites — почта и Telegram поддержки, часы работы, SEO по умолчанию. - Карта и глобус рисуются на сервере (d3-geo), контуры во внешнем SVG через <use>; выбор локации синхронизирован между картой и сеткой. - Тексты сайта и юридические черновики на 5 языках: de, fr, es — перевод с глоссарием; seed создаёт страницы и FAQ, только если их нет, SEED_CONTENT=reset пересоздаёт. - SEO: title и описания, canonical, hreflang с x-default, sitemap.xml и robots.txt на каждый домен, картинки для соцсетей. - Статическая сборка и пересборка через revalidatePath из хуков Payload (D-030); /svc/internal/revalidate для проверки. - 404 — статичная страница со статусом 404 через proxy; на сайте только опубликованные страницы. - Производительность: Client Hints темы Payload только в админке, предзагрузка 2 файлов шрифтов вместо 6; Lighthouse mobile 97–99. - Контраст --ink-3 по WCAG AA, радиокнопки вместо div role=button. - Документация: итоги 1b, глоссарий de/fr/es, трактовки юридических черновиков подтверждены, переносимые вопросы — в этапах 3e–3h. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
118 lines
4.5 KiB
CSS
118 lines
4.5 KiB
CSS
/*
|
|
* Токены брендов из <style> прототипов design/handoff/project.
|
|
* Бренд — атрибут data-site на <html>, тема — data-theme (ставит скрипт в <head> до отрисовки).
|
|
* --sel — подсветка выбранного пункта: у Вейликса это --accent-soft, у ВейликсВПН свой цвет.
|
|
* Цвета карты (--land, --land-line, --ocean) — плоская карта локаций (Locations). Глобус на главной
|
|
* (--globe-*) у Вейликса светлее, как в Main: он лежит под стеклянными пластинами. У ВейликсВПН
|
|
* значения в макетах одинаковые.
|
|
* --ink-3 светлее или темнее, чем в макетах (60/63/60/65%): так вторичный текст даёт контраст
|
|
* не ниже 4,5:1 (WCAG AA) на всех фонах темы, включая выделенные карточки (решение этапа 1b).
|
|
*/
|
|
|
|
[data-site='dedicated'] {
|
|
--bg: oklch(99% 0.005 296);
|
|
--surface: oklch(100% 0 0);
|
|
--surface-2: oklch(97.5% 0.01 296);
|
|
--ink: oklch(24% 0.04 296);
|
|
--ink-2: oklch(45% 0.03 296);
|
|
--ink-3: oklch(53% 0.025 296);
|
|
--border: oklch(92% 0.014 296);
|
|
--accent: oklch(45% 0.17 296);
|
|
--accent-hover: oklch(38% 0.17 296);
|
|
--accent-soft: oklch(95.5% 0.028 296);
|
|
--sel: var(--accent-soft);
|
|
--on-accent: oklch(99% 0.01 296);
|
|
--glow-1: oklch(86% 0.1 296);
|
|
--glow-2: oklch(89% 0.09 266);
|
|
--glow-3: oklch(91% 0.08 332);
|
|
--veil: oklch(100% 0 0 / 0.55);
|
|
--warn: oklch(62% 0.14 62);
|
|
--tg: oklch(62% 0.15 250);
|
|
--land: oklch(93% 0.015 296);
|
|
--land-line: oklch(87% 0.02 296);
|
|
--ocean: oklch(97.5% 0.007 296);
|
|
--globe-land: oklch(95% 0.012 296);
|
|
--globe-line: oklch(90% 0.018 296);
|
|
--globe-ocean: var(--ocean);
|
|
--shadow: 0 1px 2px oklch(24% 0.04 296 / 0.05), 0 12px 32px -12px oklch(24% 0.04 296 / 0.14);
|
|
}
|
|
|
|
[data-site='dedicated'][data-theme='dark'] {
|
|
--bg: oklch(17% 0.022 296);
|
|
--surface: oklch(21% 0.026 296);
|
|
--surface-2: oklch(24% 0.03 296);
|
|
--ink: oklch(96% 0.01 296);
|
|
--ink-2: oklch(79% 0.02 296);
|
|
--ink-3: oklch(66% 0.025 296);
|
|
--border: oklch(31% 0.032 296);
|
|
--accent: oklch(74% 0.15 296);
|
|
--accent-hover: oklch(80% 0.13 296);
|
|
--accent-soft: oklch(27% 0.05 296);
|
|
--on-accent: oklch(17% 0.03 296);
|
|
--glow-1: oklch(45% 0.16 296);
|
|
--glow-2: oklch(40% 0.14 266);
|
|
--glow-3: oklch(42% 0.13 332);
|
|
--veil: oklch(100% 0 0 / 0.07);
|
|
--warn: oklch(78% 0.13 62);
|
|
--tg: oklch(70% 0.13 250);
|
|
--land: oklch(27% 0.03 296);
|
|
--land-line: oklch(34% 0.035 296);
|
|
--ocean: oklch(24% 0.025 296);
|
|
--globe-land: oklch(27% 0.028 296);
|
|
--globe-line: oklch(32% 0.032 296);
|
|
--shadow: 0 1px 2px oklch(10% 0.02 296 / 0.4), 0 16px 40px -16px oklch(8% 0.02 296 / 0.7);
|
|
}
|
|
|
|
[data-site='mass'] {
|
|
--bg: oklch(99.6% 0.0015 215);
|
|
--surface: oklch(100% 0 0);
|
|
--surface-2: oklch(98.4% 0.003 215);
|
|
--ink: oklch(24% 0.04 204);
|
|
--ink-2: oklch(45% 0.03 204);
|
|
--ink-3: oklch(53% 0.025 204);
|
|
--border: oklch(92% 0.014 200);
|
|
--accent: oklch(48% 0.105 178);
|
|
--accent-hover: oklch(41% 0.1 178);
|
|
--accent-soft: oklch(95.5% 0.032 180);
|
|
--sel: oklch(96.5% 0.016 190);
|
|
--on-accent: oklch(99% 0.01 180);
|
|
--glow-1: oklch(86% 0.085 190);
|
|
--glow-2: oklch(88% 0.075 205);
|
|
--glow-3: oklch(89% 0.07 172);
|
|
--veil: oklch(100% 0 0 / 0.55);
|
|
--warn: oklch(62% 0.14 62);
|
|
--tg: oklch(62% 0.15 250);
|
|
--land: oklch(95% 0.012 196);
|
|
--land-line: oklch(90% 0.018 196);
|
|
--ocean: oklch(97.5% 0.007 196);
|
|
--globe-land: var(--land);
|
|
--globe-line: var(--land-line);
|
|
--globe-ocean: var(--ocean);
|
|
--shadow: 0 1px 2px oklch(24% 0.04 204 / 0.05), 0 12px 32px -12px oklch(24% 0.04 204 / 0.14);
|
|
}
|
|
|
|
[data-site='mass'][data-theme='dark'] {
|
|
--bg: oklch(23% 0.026 210);
|
|
--surface: oklch(26.5% 0.028 210);
|
|
--surface-2: oklch(30% 0.03 210);
|
|
--ink: oklch(96% 0.012 196);
|
|
--ink-2: oklch(80% 0.02 196);
|
|
--ink-3: oklch(69% 0.025 196);
|
|
--border: oklch(36% 0.04 204);
|
|
--accent: oklch(76% 0.105 190);
|
|
--accent-hover: oklch(83% 0.09 190);
|
|
--accent-soft: oklch(31% 0.05 190);
|
|
--sel: oklch(30% 0.03 195);
|
|
--on-accent: oklch(20% 0.04 204);
|
|
--glow-1: oklch(52% 0.09 200);
|
|
--glow-2: oklch(47% 0.085 215);
|
|
--glow-3: oklch(50% 0.08 180);
|
|
--veil: oklch(100% 0 0 / 0.07);
|
|
--warn: oklch(78% 0.13 62);
|
|
--tg: oklch(70% 0.13 250);
|
|
--land: oklch(31% 0.035 204);
|
|
--land-line: oklch(37% 0.04 204);
|
|
--ocean: oklch(27% 0.035 204);
|
|
--shadow: 0 1px 2px oklch(12% 0.03 204 / 0.4), 0 16px 40px -16px oklch(9% 0.03 204 / 0.7);
|
|
}
|