/* ========================================================================== A3 — ДИЗАЙН-ТОКЕНЫ. Единственный источник правды по цвету, шрифту, ритму. ========================================================================== ПРАВИЛО, КОТОРОЕ НЕЛЬЗЯ НАРУШАТЬ: в вёрстке блоков не должно быть ни одного цвета «руками» (#hex, rgb). Только var(--a3-*). Тогда ночная тема подхватывает новый блок сама, без отдельных правил и без «страховочных» костылей. Тема переключается атрибутом на : data-theme="day" — светлая принудительно data-theme="night" — тёмная принудительно атрибут не задан — авто по системной настройке устройства (те же имена, что на continentalclub.ae — один мысленный образ на два сайта) ========================================================================== */ :root { color-scheme: light dark; /* --- ПАЛИТРА: светлая тема (значения по умолчанию) --- */ /* Поверхности: от самой светлой к «утопленной» */ --a3-bg: #ffffff; --a3-bg-alt: #f6f7f8; /* чередующиеся секции, подложки карточек */ --a3-bg-sunken: #eef1f3; /* поля ввода, «вдавленные» области */ --a3-bg-inverse: #12181c; /* тёмные секции внутри светлой темы */ /* Текст: три уровня важности, больше не заводить. Вторичный и тихий подтянуты темнее прежнего — на светлом фоне они выглядели выцветшими, страница читалась вяло. */ --a3-text: #14181b; --a3-text-muted: #46525a; /* подписи, вторичное */ --a3-text-subtle: #6a747b; /* совсем тихое: даты, счётчики */ --a3-text-inverse: #f2f5f7; /* текст на тёмной подложке */ /* Линии и границы */ --a3-line: #e3e7ea; --a3-line-strong: #cfd6db; /* --- АКЦЕНТ --- Заливка — фирменный #00aeef из брендбука компании (папка «A3 фирменный стиль, брендбук», Логотип/Logo_Blue-01.svg; вторая фирменная — #263d4e). На сайте Tilda стоял осветлённый вариант #71ccfc, это не эталон. Приглушённый вариант (#2e6f8e) был отвергнут: «ни цвет логотипа, ничего, как стандартный дешёвый WordPress». Белый текст на этом голубом давал бы контраст 1.9, поэтому текст на нём тёмный — ровно так же сделана кнопка на нынешнем сайте компании. */ --a3-accent: #00aeef; --a3-accent-hover: #0b9ad2; --a3-accent-soft: #e6f7fe; /* заливка «мягкого» состояния */ /* ★ Текст НА заливке акцентом. Отдельный токен нужен потому, что цвет заливки светлый — белым по нему писать нельзя ни днём, ни ночью. */ --a3-on-accent: #0d1519; /* ★ Ссылка-ТЕКСТ на светлом фоне — отдельный токен: фирменный голубой как текст на белом нечитаем (контраст 1.7), нужен тот же тон глубже. */ --a3-link: #0b7ba8; --a3-link-hover: #076183; /* Статусы */ --a3-success: #2f7d52; --a3-danger: #b3463c; /* ★ Зависит от темы, но цветом не является. Держим ЗДЕСЬ, рядом с фоном, а не в вёрстке — тогда фон и логотип всегда из одного блока и разойтись не могут. Пока это жило в a3-flat.css, Safari подтянул один файл свежий, другой из кэша — и вышел белый логотип на белом фоне. Логотип НЕ красим фильтром: brightness(0) invert(1) выбеливает и фирменный голубой тоже, превращая знак в сплошное белое пятно, а в Safari вместе с backdrop-filter даёт чёрную плашку. Вместо этого — два готовых файла, переключаем показом. */ --a3-logo-day: block; --a3-logo-night: none; --a3-icon-sun: none; /* какую иконку показывает переключатель */ --a3-icon-moon: block; /* --- ТЁМНАЯ ПОЛОСА --- Секция, которая держит ритм страницы. Тёмная в ОБЕИХ темах: иначе днём она контрастная, а ночью сливается с фоном и ритм пропадает. Поэтому у неё свои токены, а не --a3-bg-inverse (тот переворачивается вместе с темой). */ --a3-band-bg: #12181c; --a3-band-text: #f2f5f7; --a3-band-muted: #a8b3ba; --a3-band-line: rgba(255, 255, 255, 0.14); /* --- ПОВЕРХНОСТЬ КАРТОЧКИ --- ★ Задел под будущий «стеклянный» режим. Сейчас значения плоские, но карточки и панели ходят ЧЕРЕЗ эти токены, а не красятся напрямую. Чтобы включить стекло, надо будет поменять только эти четыре строки: полупрозрачный фон + --a3-blur: 14px. Вёрстку трогать не придётся. */ --a3-surface: #ffffff; --a3-surface-line: #e3e7ea; --a3-surface-shadow: none; --a3-blur: none; /* в стеклянном режиме — blur(14px) */ /* --- ПОВЕРХ ФОТОГРАФИИ --- Единственная группа, у которой НЕТ ночного варианта, и это правильно: фотография остаётся фотографией при любой теме, текст на ней всегда светлый. Объявлена здесь, чтобы в вёрстке hero не появилось «белого руками» — правило про отсутствие цветов в блоках держится. */ --a3-on-media: #ffffff; --a3-on-media-muted: rgba(255, 255, 255, 0.78); --a3-media-line: rgba(255, 255, 255, 0.22); --a3-media-tint: rgba(10, 12, 15, 0.38); /* ровная тонировка кадра */ --a3-media-fade: rgba(10, 12, 15, 0.78); /* сгущение к низу под текст */ --a3-media-side: rgba(10, 12, 15, 0.62); /* боковая вуаль под колонку текста */ /* --- ТИПОГРАФИКА --- */ --a3-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; /* Размеры заданы через clamp(): минимум для телефона, максимум для десктопа. На основном сайте ровно из-за отсутствия мобильных значений заголовки на телефоне выходили гигантскими — здесь это невозможно. */ --a3-fs-display: clamp(2.25rem, 1.30rem + 4.2vw, 4.5rem); --a3-fs-h1: clamp(1.90rem, 1.25rem + 2.9vw, 3.25rem); --a3-fs-h2: clamp(1.50rem, 1.15rem + 1.6vw, 2.25rem); --a3-fs-h3: clamp(1.20rem, 1.05rem + 0.7vw, 1.55rem); --a3-fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.35rem); --a3-fs-body: 1rem; --a3-fs-small: 0.9375rem; --a3-fs-caption: 0.8125rem; --a3-lh-tight: 1.1; --a3-lh-heading: 1.18; --a3-lh-body: 1.65; --a3-fw-regular: 400; --a3-fw-medium: 500; --a3-fw-semibold: 600; --a3-tracking-tight: -0.02em; /* крупные заголовки */ --a3-tracking-wide: 0.08em; /* капслок в мелком тексте */ /* --- РИТМ И РАЗМЕРЫ (шаг 4px) --- */ --a3-space-1: 0.25rem; --a3-space-2: 0.5rem; --a3-space-3: 0.75rem; --a3-space-4: 1rem; --a3-space-5: 1.5rem; --a3-space-6: 2rem; --a3-space-7: 3rem; --a3-space-8: 4rem; --a3-space-9: 6rem; --a3-space-10: 8rem; --a3-container: 1240px; --a3-container-text: 720px; /* комфортная длина строки для чтения */ --a3-gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem); /* Плоский стиль: скругления скромные, теней нет. Тень оставлена одна и только для всплывающих слоёв. */ --a3-radius-sm: 8px; --a3-radius: 14px; --a3-radius-lg: 20px; --a3-radius-xl: 32px; /* крупные кадры и полосы во всю ширину */ --a3-shadow-overlay: 0 12px 32px rgba(10, 20, 28, 0.16); --a3-header-h: 76px; --a3-transition: 160ms ease; } /* --- ПАЛИТРА: тёмная тема --- Блок ОДИН. Раньше их было два (по системной настройке и по атрибуту), с одинаковыми значениями — и правку в один я забыл перенести во второй. Теперь атрибут на проставляется всегда: скрипт в шапке до отрисовки спрашивает систему и пишет day или night. CSS про системную настройку больше не знает, дублировать нечего. Переопределяются ТОЛЬКО переменные. Ни одного правила вёрстки здесь быть не должно — иначе тема начнёт расходиться со светлой. */ :root[data-theme='night'] { --a3-bg: #0f1417; --a3-bg-alt: #161c21; --a3-bg-sunken: #1d252b; --a3-bg-inverse: #e9eef1; --a3-text: #e7ecef; --a3-text-muted: #a3aeb5; --a3-text-subtle: #7a858c; --a3-text-inverse: #12181c; --a3-line: #2a343b; --a3-line-strong: #3b464e; /* Заливка остаётся фирменной — на тёмном фоне она и так яркая. */ --a3-accent: #00aeef; --a3-accent-hover: #33c0f4; --a3-accent-soft: #14242e; --a3-on-accent: #0d1519; /* Ссылка-текст ночью может быть светлее: фон тёмный. */ --a3-link: #7fc9f5; --a3-link-hover: #a3daf9; --a3-success: #6cc08c; --a3-danger: #e08b82; --a3-band-bg: #1a2229; /* светлее фона страницы — иначе не видна */ --a3-surface: #161c21; --a3-surface-line: #2a343b; --a3-logo-day: none; --a3-logo-night: block; --a3-icon-sun: block; --a3-icon-moon: none; --a3-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.5); } /* Служебное: подсказка браузеру для полос прокрутки и системных полей. */ :root[data-theme='night'] { color-scheme: dark; } :root[data-theme='day'] { color-scheme: light; }