/* ========================================================================== TicketUp — дизайн-токены Единственное место, где живут цвета, размеры, радиусы, тени и ритм. Значения подобраны под визуальную систему информационного сайта: светлый фон, графитовые «плиты» секций, один синий акцент. Акцент — фирменный синий TicketUp #0064B4: тот самый цвет, которым залита основа логотипа (assets/images/logo.svg, он же в favicon и apple-touch-icon). Вся синяя палитра ниже выведена из него: это один тон 206.7° с разной светлотой, поэтому оттенки не расходятся между собой. ========================================================================== */ :root { color-scheme: light; /* --- Бренд-акцент. В палитре ровно один цветной тон --- primary — точный цвет логотипа, заливка кнопок и активных элементов; одинаков в обеих темах, primary-hover — та же краска на 6% темнее, наведение, primary-active — ещё темнее, момент нажатия, primary-light — светлая ступень: акцент поверх графитовой плиты и вся тёмная тема, где сам primary уже не читается, primary-soft — мягкая подложка: бледно-синяя в светлой теме, primary-ink — акцент как текст/иконка на подложке текущей темы. */ --color-primary: #0064b4; --color-primary-hover: #005294; --color-primary-active: #004378; --color-primary-light: #369ef2; /* Ещё светлее: акцентный текст и штрихи поверх синей плиты первого экрана — там #369ef2 не добирает нужный контраст */ --color-primary-lighter: #7cc1f8; --color-primary-soft: #e6f0fa; --color-primary-ink: var(--color-primary); --color-primary-gradient: linear-gradient( 135deg, var(--color-primary-active) 0%, var(--color-primary-hover) 48%, var(--color-primary) 100% ); /* Текст поверх синей заливки — только белый: синий тёмный (6.0:1 у белого на #0064b4). Эти два токена одинаковы в обеих темах: сам синий не меняется */ --color-on-primary: #ffffff; --color-on-primary-muted: rgba(255, 255, 255, 0.78); /* --- Акцент как отдельная роль. accent — тот же фирменный синий (выделение текста, фокус, декоративные метки), soft/line — его прозрачные версии для мягких подложек и волосяных рамок поверх любой поверхности --- */ --color-accent: var(--color-primary); --color-accent-soft: rgba(0, 100, 180, 0.18); --color-accent-line: rgba(0, 100, 180, 0.32); --color-focus: var(--color-primary); /* --- Графит: тёмные секции, подвал, «плиты» --- Раньше этот цвет назывался --color-accent; имя освободили под фирменный синий, а роль осталась прежней --- */ --color-slab: #14161c; --color-slab-gradient: linear-gradient(152deg, #2b313d 0%, #14161c 72%); /* --- Поверхности --- */ --color-background: #ffffff; --color-background-alt: #f6f7f9; --color-surface: #ffffff; /* Иконка на бледно-синей подложке карточки */ --color-icon-ink: var(--color-primary); /* --- Текст на светлом --- */ --color-text: #14161c; --color-text-body: #575b68; --color-text-muted: #6b6f7c; --color-text-label: #8a8e9b; /* --- Текст и линии на графитовой плите --- */ --color-on-dark: #ffffff; --color-on-dark-body: rgba(255, 255, 255, 0.74); --color-on-dark-muted: rgba(255, 255, 255, 0.62); --color-on-dark-label: #b8bcc8; --line-on-dark: rgba(255, 255, 255, 0.22); --line-on-dark-soft: rgba(255, 255, 255, 0.12); --fill-on-dark: rgba(255, 255, 255, 0.06); --fill-on-dark-strong: rgba(255, 255, 255, 0.12); /* --- Границы --- */ --color-border: #ececf1; --color-border-strong: #dcdce3; /* --- Состояния форм --- */ --color-success: #15803d; --color-success-bg: rgba(34, 197, 94, 0.1); --color-success-border: rgba(34, 197, 94, 0.34); --color-danger: #b42318; --color-danger-bg: rgba(214, 40, 40, 0.08); --color-danger-border: rgba(214, 40, 40, 0.38); /* --- WhatsApp. Цвет фирменный, поэтому в тёмной теме он тот же: узнаваемость важнее подгонки под палитру. Меняется только тень под кнопкой. --- */ --color-whatsapp: #25d366; --color-whatsapp-hover: #1eb556; --shadow-whatsapp: 0 10px 26px rgba(37, 211, 102, 0.36); /* --- Сетка и ритм. Все отступы сайта живут здесь и растут вместе с окном через clamp(): отдельных значений «под телефон» и «под десктоп» в правилах нет. --container-padding — поля контейнера, --section-spacing — вертикальный ритм между секциями, --content-gap — зазор между смысловыми блоками внутри секции, --split-gap — зазор между колонками «текст + иллюстрация», --grid-gap — зазор в сетках карточек. --- */ --container-width: 1320px; --container-padding: clamp(16px, 4vw, 48px); --section-spacing: clamp(56px, 8vw, 120px); --content-gap: clamp(24px, 5vw, 64px); --split-gap: clamp(32px, 5vw, 72px); --grid-gap: clamp(16px, 2vw, 24px); --header-height: 72px; /* Ширина иллюстрации, когда парная секция схлопнулась в одну колонку: без неё картинка растягивается на всю ширину планшета */ --figure-stacked-width: 560px; /* --- Скругления --- */ --radius-small: 14px; --radius-medium: 18px; --radius-large: 26px; --radius-pill: 999px; /* --- Тени. Мягкие и редкие: глубину держит граница, а не размытие --- */ --shadow-card: 0 4px 24px rgba(16, 18, 27, 0.06); --shadow-card-hover: 0 18px 44px rgba(16, 18, 27, 0.12); --shadow-header: 0 2px 16px rgba(16, 18, 27, 0.06); --shadow-primary: 0 8px 22px rgba(0, 100, 180, 0.34); --shadow-panel: 0 30px 70px rgba(16, 18, 27, 0.28); /* --- Типографика --- */ --font-sans: "Inter", "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", system-ui, sans-serif; --text-h1: clamp(38px, 5.6vw, 72px); --text-h2: clamp(30px, 4.4vw, 50px); --text-h3: clamp(19px, 1.6vw, 22px); --text-lead: clamp(16px, 1.5vw, 19px); --text-body: 16px; --text-label: 14px; /* --- Анимация --- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 0.2s; --duration: 0.35s; --duration-slow: 0.6s; /* --- Затемнение под мобильным меню --- */ --scrim: rgba(16, 18, 27, 0.55); --z-header: 100; /* Плавающая кнопка: выше содержимого, но ниже шапки и мобильного меню */ --z-float: 90; --z-menu: 200; } /* ========================================================================== Тёмная тема. Переопределяются только токены — правила остаются прежними. Атрибут data-theme ставит js/theme.js (и небольшой скрипт в , чтобы при загрузке не мелькал светлый экран). ========================================================================== */ [data-theme="dark"] { color-scheme: dark; --color-background: #0f1115; --color-background-alt: #15181e; --color-surface: #171a21; /* Выделенные плиты в тёмной теме не тонут в фоне, а становятся светлее его: смысл «эта секция выделена» сохраняется, направление контраста меняется */ --color-slab: #1c2028; --color-slab-gradient: linear-gradient(152deg, #262c37 0%, #1c2028 72%); /* Чистый белый на тёмном «звенит» на длинных абзацах */ --color-text: #e7e9ee; --color-text-body: #b5bbc6; --color-text-muted: #a1a8b5; --color-text-label: #8b93a1; --color-border: #262b34; --color-border-strong: #333944; /* Бледно-синяя подложка на тёмном превращается в тёмно-синюю, а акцент на ней — в светлую ступень: сам #0064b4 на тёмном фоне даёт всего 3:1 и для текста уже не годится */ --color-primary-soft: #102a42; --color-icon-ink: var(--color-primary-light); --color-primary-ink: var(--color-primary-light); --color-focus: var(--color-primary-light); --color-accent-soft: rgba(54, 158, 242, 0.16); --color-accent-line: rgba(54, 158, 242, 0.34); /* Тёмные #15803d и #b42318 на тёмном фоне нечитаемы */ --color-success: #4ade80; --color-success-bg: rgba(74, 222, 128, 0.12); --color-success-border: rgba(74, 222, 128, 0.32); --color-danger: #ff6b6b; --color-danger-bg: rgba(255, 107, 107, 0.1); --color-danger-border: rgba(255, 107, 107, 0.4); /* Зелёное свечение на тёмном фоне выглядит грязно — берём обычную тень */ --shadow-whatsapp: 0 10px 26px rgba(0, 0, 0, 0.5); /* Тень на тёмном фоне не видна — её роль берёт на себя кант */ --shadow-card: 0 0 0 1px var(--color-border); --shadow-card-hover: 0 0 0 1px var(--color-border-strong), 0 24px 48px rgba(0, 0, 0, 0.5); --shadow-header: 0 1px 0 0 var(--color-border), 0 4px 20px rgba(0, 0, 0, 0.45); --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.6); --shadow-primary: 0 8px 22px rgba(0, 0, 0, 0.5); --scrim: rgba(0, 0, 0, 0.7); }