/* ============================================================ CAR-SERVICE68 — DESIGN TOKENS Единственный источник правды по цвету, типографике, сетке, скруглениям, теням и анимации. ============================================================ */ :root { /* ---------- Бренд / акцент ---------- */ --brand-500: #e35300; /* основной оранжевый (кнопки, цены) */ --brand-400: #ff6a10; /* светлее — верх градиента, hover */ --brand-300: #ff8a3d; /* подсветка, иконки на тёмном */ --brand-600: #c44400; /* низ градиента, active */ --brand-700: #8f3100; /* глубокая тень бренда */ --brand-tint-08: rgba(227, 83, 0, 0.08); --brand-tint-14: rgba(227, 83, 0, 0.14); --brand-tint-24: rgba(227, 83, 0, 0.24); --brand-tint-40: rgba(227, 83, 0, 0.40); /* ---------- Свечение бренда ---------- */ /* Одна тёплая подсветка на всю страницу: угол панели и фон секции. */ --glow-panel: rgba(227, 83, 0, 0.22); /* из угла панели, заметное */ --glow-section: rgba(227, 83, 0, 0.10); /* фоновая подсветка секции */ /* Блик на границе (градиентная обводка): светится не весь контур, а два участка — холодный сверху слева и тёплый снизу справа. */ --gleam: linear-gradient(135deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.05) 14%, rgba(255, 255, 255, 0) 30%, rgba(227, 83, 0, 0) 62%, rgba(227, 83, 0, 0.55) 84%, rgba(227, 83, 0, 0.10) 100%); --gleam-soft: linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 26%, rgba(227, 83, 0, 0) 68%, rgba(227, 83, 0, 0.34) 90%, rgba(227, 83, 0, 0) 100%); /* ---------- Поверхности (угольно-чёрная шкала) ---------- */ --bg-base: #050506; /* фон страницы */ --bg-band: #0a0b0d; /* широкие секции-полосы */ --bg-surface: #0f1113; /* панели */ --bg-card: #121417; /* карточки */ --bg-card-hover: #171a1e; --bg-field: #16181b; /* поля ввода */ --bg-field-focus: #1b1e22; --bg-header: rgba(5, 5, 6, 0.72); /* ---------- Границы и разделители ---------- */ --line-soft: rgba(255, 255, 255, 0.06); --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.16); --line-brand: rgba(227, 83, 0, 0.45); /* ---------- Текст ---------- */ --text-strong: #eef0f3; /* мягкий белый, не чистый #fff */ --text: #dee1e5; --text-muted: #a1a5ac; /* 6.4:1 на --bg-card */ --text-faint: #7f848c; /* только для крупного/вторичного */ --text-on-brand: #ffffff; /* Металлический отблеск на крупных заголовках: сверху светлее, снизу серее */ --text-sheen: linear-gradient(180deg, #f8fafc 0%, /* светлая верхняя кромка */ #cbd1d8 30%, /* спад начинается рано — переход виден в верхней части */ #fbfcfd 46%, /* блик поперёк, как на шлифованном металле */ #e6e9ed 55%, #a5acb5 78%, #7b838e 100%); /* нижняя кромка, 5.3:1 — в пределах читаемости */ /* ---------- Состояния ---------- */ --success: #35c07a; --success-tint: rgba(53, 192, 122, 0.12); --danger: #ff5c5c; --danger-tint: rgba(255, 92, 92, 0.10); --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--brand-400); /* ---------- Типографика ---------- */ --font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif; --font-text: 'Inter', 'Segoe UI', system-ui, sans-serif; --fs-hero: clamp(2.5rem, 1.15rem + 5.6vw, 5.25rem); --fs-h2: clamp(1.65rem, 1.05rem + 2.4vw, 2.75rem); --fs-h3: clamp(1.15rem, 0.95rem + 0.8vw, 1.5rem); --fs-lead: clamp(1rem, 0.94rem + 0.28vw, 1.175rem); --fs-body: 1rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-label: 0.75rem; --lh-tight: 1.02; --lh-heading: 1.14; --lh-body: 1.6; --tracking-display: -0.03em; --tracking-tight: -0.015em; --tracking-label: 0.14em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* ---------- Сетка и ритм ---------- */ --container-base: 1280px; /* ширина контента до 1440px вьюпорта */ --container-wide: 1440px; /* потолок на широких экранах */ /* растёт плавно с 1280 до 1440 на диапазоне вьюпорта 1440…1920, без скачка */ --container: clamp( var(--container-base), var(--container-base) + (100vw - 1440px) / 3, var(--container-wide) ); --gutter: clamp(1rem, 0.4rem + 2.4vw, 2.5rem); --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); --header-h: 84px; --header-h-scrolled: 68px; --header-scale: 0.81; /* 68 / 84 — сжатие шапки без анимации layout */ /* ---------- Форма ---------- */ --radius-xs: 6px; --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; --control-h: 52px; --control-h-sm: 44px; /* ---------- Глубина ---------- */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-md: 0 12px 28px -10px rgba(0, 0, 0, 0.7); --shadow-lg: 0 28px 60px -22px rgba(0, 0, 0, 0.85); --shadow-brand: 0 14px 30px -12px rgba(227, 83, 0, 0.55); --shadow-brand-hover: 0 18px 40px -12px rgba(227, 83, 0, 0.68); /* ---------- Движение ---------- */ /* мягкий выход — база для наведения и всех состояний */ --ease-out: cubic-bezier(0.33, 1, 0.68, 1); /* экспоненциальный выход — крупные появления (герой, карточки) */ --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 180ms; /* мелкие контролы, нажатие */ --dur: 340ms; /* база: наведение, цвет, сдвиг */ --dur-slow: 900ms; /* масштаб фото, крупные переходы */ --dur-enter: 1150ms; /* вход главного экрана */ --dur-reveal: 1400ms; /* появление блоков при скролле */ --reveal-shift: 55px; /* насколько блок выезжает снизу */ /* ---------- Слои ---------- */ --z-base: 1; --z-sticky: 50; --z-header: 100; --z-menu: 200; --z-toast: 300; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; --dur-enter: 0ms; --dur-reveal: 0ms; } }