/* ========================================================================== AirCrewCentral — токены дизайн-системы Источник правды: C:\xampp\update\project-2026\02-DESIGN-SYSTEM.md Только переменные. Ничего не перекрашивает само по себе — подключение этого файла не меняет внешний вид ни одной страницы. ДВА РЕЖИМА, ОДНА ИДЕНТИЧНОСТЬ тёмный — стеклянная кабина ночью светлый — навигационная карта при дневном свете И то и другое пилот видит своими глазами, просто в разное время суток. Поэтому пара честная, а не «тёмная тема и её осветлённая копия». ГЛАВНОЕ ПРАВИЛО ПЕРЕХОДА, нарушать нельзя: у цвета сохраняются ОТТЕНОК и РОЛЬ, переворачивается СВЕТЛОТА. Цвет не остаётся «тем же самым», когда фон меняется на противоположный. Тем же остаётся его смысл. Наш cyan — это оттенок 186°, и он им остаётся в обоих режимах; но светлота падает с 50% до 27%, иначе он нечитаем. Цифры, ради которых всё это (контраст к фону карточки): цвет тёмный режим светлый режим порог для текста основной текст 16,0 15,0 4,5 тусклый текст 7,2 6,5 4,5 cyan 12,2 5,3 4,5 gold 8,7 5,4 4,5 До правки на светлом фоне было: cyan 1,41, gold 1,97, текст 1,07. 1,07 — это невидимо. Светлый режим был не «на любителя», он был сломан. ПРАВИЛО РОЛЕЙ, тоже нерушимое: cyan — всё рабочее: кнопки, ссылки, графики, приборы, активные состояния gold — только достижения: медали, ранги, сертификаты, премиальные контракты Золото не используется для навигации и обычных кнопок. Никогда. Оно должно оставаться редким — тогда оно и читается как награда. КАК ВЫБИРАЕТСЯ РЕЖИМ. Атрибут data-bs-theme на ставит покупная тема: следует за настройкой системы, запоминается в localStorage, переключается кнопкой в шапке. Мы к этому цепляемся, а не заводим своё. ========================================================================== */ /* --- Общее для обоих режимов -------------------------------------------- */ :root { /* --- Шрифты --- Работают сразу, без загрузок. Подробности в fonts/acc-fonts.css. ACC Text = Roboto, уже лежит в теме локально ACC Display = необязательный узкий шрифт, иначе Arial Narrow ACC Mono = необязательный, иначе системный моноширинный Порядок в каждом стеке: сначала наш шрифт, потом системные аналоги. Если файла нет, браузер молча идёт дальше по списку. */ --acc-font-display: "ACC Display", "Barlow Condensed", "Oswald", "Arial Narrow", "Roboto Condensed", "Roboto", sans-serif; --acc-font-text: "ACC Text", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --acc-font-mono: "ACC Mono", ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace; /* --- Шкала кеглей --- */ --acc-fs-12: 12px; --acc-fs-14: 14px; --acc-fs-16: 16px; --acc-fs-20: 20px; --acc-fs-26: 26px; --acc-fs-34: 34px; --acc-fs-48: 48px; --acc-fs-64: 64px; /* --- Отступы --- */ --acc-sp-1: 4px; --acc-sp-2: 8px; --acc-sp-3: 12px; --acc-sp-4: 16px; --acc-sp-6: 24px; --acc-sp-8: 32px; --acc-sp-12: 48px; --acc-sp-16: 64px; --acc-sp-24: 96px; /* --- Радиусы --- */ --acc-r-card: 16px; --acc-r-ctrl: 12px; --acc-r-pill: 999px; /* --- Движение --- */ --acc-dur-fast: 150ms; --acc-dur-base: 250ms; --acc-dur-slow: 400ms; --acc-ease: cubic-bezier(0.4, 0, 0.2, 1); --acc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* --- ТЁМНЫЙ: стеклянная кабина ночью ------------------------------------ Он же значение по умолчанию. Если атрибута нет вообще — например, JS темы не отработал — сайт всё равно получит рабочую палитру, а не пустые переменные и чёрный текст на чёрном. */ :root, [data-bs-theme="dark"] { --acc-bg-900: #070b12; --acc-bg-800: #0c1220; --acc-bg-700: #111a2b; --acc-glass: rgba(18, 27, 45, 0.55); --acc-glass-brd: rgba(255, 255, 255, 0.08); --acc-glass-hi: rgba(255, 255, 255, 0.14); --acc-cyan: #00e5ff; --acc-cyan-dim: #0fa9bd; --acc-cyan-glow: rgba(0, 229, 255, 0.35); --acc-cyan-soft: rgba(0, 229, 255, 0.08); --acc-on-cyan: #05202a; --acc-gold: #f59e0b; --acc-gold-dim: #c9820a; --acc-gold-glow: rgba(245, 158, 11, 0.3); --acc-gold-soft: rgba(245, 158, 11, 0.09); --acc-text: #e8eef7; --acc-text-dim: #93a2b8; --acc-text-mute: #5d6b82; --acc-ok: #22c55e; --acc-warn: #f59e0b; --acc-err: #ef4444; --acc-info: #00e5ff; --acc-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45); --acc-shadow-inset: inset 0 1px 0 var(--acc-glass-hi); /* Служебные полупрозрачные слои. В тёмном они высветляют, в светлом затемняют — поэтому и вынесены в переменные, а не написаны на месте. Написанное на месте rgba(255,255,255,.05) на бумаге не видно вообще. */ --acc-hover: rgba(255, 255, 255, 0.07); --acc-raise: rgba(255, 255, 255, 0.04); --acc-ghost: rgba(255, 255, 255, 0.05); --acc-nav-bg: rgba(12, 18, 32, 0.62); --acc-nav-bg-solid: rgba(9, 14, 24, 0.94); --acc-nav-brd-solid: rgba(255, 255, 255, 0.12); --acc-ok-soft: rgba(34, 197, 94, 0.12); --acc-ok-brd: rgba(34, 197, 94, 0.3); --acc-err-soft: rgba(239, 68, 68, 0.12); --acc-err-brd: rgba(239, 68, 68, 0.3); --acc-gold-brd: rgba(245, 158, 11, 0.3); /* Подложка карты и плитки. Читает acc-hero.js. */ --acc-map-bg1: #0b1424; --acc-map-bg2: #070b12; --acc-map-tiles: World_Dark_Gray_Base; --acc-map-tile-opacity: 0.5; --acc-map-tile-filter: grayscale(0.5) brightness(0.75) contrast(1.1); --acc-scrim: 7, 11, 18; } /* --- СВЕТЛЫЙ: навигационная карта при дневном свете ---------------------- Фон не белый, а бумажный и тёплый. Белый лист рядом с чёрно-синими силуэтами даёт слишком резкий стык и режет глаз при долгом чтении; бумага смягчает и заодно попадает в тему — карту печатают не на снегу. cyan здесь петрольный: тот же оттенок 186°, светлота 27% вместо 50%. gold — охра: тот же оттенок 38°, светлота 31%. */ [data-bs-theme="light"] { --acc-bg-900: #efebe0; --acc-bg-800: #f7f4ed; --acc-bg-700: #fffdf8; --acc-glass: rgba(255, 253, 248, 0.74); --acc-glass-brd: rgba(20, 32, 43, 0.14); --acc-glass-hi: rgba(255, 255, 255, 0.75); --acc-cyan: #00707e; --acc-cyan-dim: #00929f; --acc-cyan-glow: rgba(0, 112, 126, 0.22); --acc-cyan-soft: rgba(0, 112, 126, 0.09); --acc-on-cyan: #fffdf8; --acc-gold: #8a5a08; --acc-gold-dim: #a97210; --acc-gold-glow: rgba(138, 90, 8, 0.2); --acc-gold-soft: rgba(138, 90, 8, 0.1); --acc-text: #14202b; --acc-text-dim: #4a5a69; --acc-text-mute: #7a8894; --acc-ok: #1a7f37; --acc-warn: #8a5a08; --acc-err: #b3261e; --acc-info: #00707e; /* Тень на бумаге мягкая и без черноты: жёсткая чёрная тень на светлом выглядит грязным пятном, а не глубиной. */ --acc-shadow-card: 0 6px 24px rgba(20, 32, 43, 0.12); --acc-shadow-inset: inset 0 1px 0 var(--acc-glass-hi); /* На бумаге высветлять нечего — тут те же слои затемняют. Это и есть переворот светлоты в служебных слоях. */ --acc-hover: rgba(20, 32, 43, 0.06); --acc-raise: rgba(20, 32, 43, 0.035); --acc-ghost: rgba(20, 32, 43, 0.07); --acc-nav-bg: rgba(255, 253, 248, 0.7); --acc-nav-bg-solid: rgba(255, 253, 248, 0.96); --acc-nav-brd-solid: rgba(20, 32, 43, 0.16); --acc-ok-soft: rgba(26, 127, 55, 0.1); --acc-ok-brd: rgba(26, 127, 55, 0.35); --acc-err-soft: rgba(179, 38, 30, 0.1); --acc-err-brd: rgba(179, 38, 30, 0.35); --acc-gold-brd: rgba(138, 90, 8, 0.35); --acc-map-bg1: #f3efe4; --acc-map-bg2: #e7e2d5; --acc-map-tiles: World_Light_Gray_Base; --acc-map-tile-opacity: 0.55; --acc-map-tile-filter: grayscale(0.35) brightness(1.02) contrast(0.95) sepia(0.12); --acc-scrim: 239, 235, 224; } /* Уважаем системную настройку «меньше движения». Без этого анимации мешают людям с вестибулярными нарушениями. */ @media (prefers-reduced-motion: reduce) { :root { --acc-dur-fast: 0ms; --acc-dur-base: 0ms; --acc-dur-slow: 0ms; } }