/* ========================================================================= variables.css — ЕДИНСТВЕННАЯ ТОЧКА ПРАВОК ------------------------------------------------------------------------- Здесь и только здесь меняются цвета, шрифты, размеры, отступы, скругления, тени и длительности анимаций всего сайта. Во всех остальных CSS-файлах допустимы ТОЛЬКО var(--...). Ни одного hex-кода и ни одного font-family за пределами этого файла. ========================================================================= */ :root { /* --------------------------------------------------------------------- 1. ЦВЕТА (имена по смыслу, а не по оттенку) --------------------------------------------------------------------- */ /* Бренд */ --color-primary: #0B3C7A; /* основной синий: шапка, кнопки */ --color-primary-dark: #082B58; /* hover/active основной кнопки */ --color-primary-light: #1256A8; /* светлее основного */ /* Акцент */ --color-accent: #2E9BE6; /* активные состояния, иконки */ --color-accent-light: #4FC3F7; /* градиенты, подсветка */ /* Фоны */ --color-bg: #FFFFFF; /* основной фон контента */ --color-bg-soft: #F5F9FF; /* очень светлая секция */ --color-bg-tint: #EAF2FC; /* голубая секция */ --color-bg-dark: #0A2A55; /* тёмная синяя секция, футер */ --color-bg-dark-soft: #123763; /* блоки внутри тёмной секции */ /* Текст */ --color-text: #0F1B2D; /* заголовки и основной текст */ --color-text-muted: #5A6B80; /* подписи, вторичный текст */ --color-text-invert: #FFFFFF; /* текст на тёмном/синем */ --color-text-invert-muted: #C3D8F2; /* вторичный текст на тёмном */ /* Линии и разделители */ --color-border: #D7E6F7; --color-border-strong: #B9D3F0; --color-border-invert: #23507F; /* Статусы */ --color-success: #2E9E5B; /* «в наличии» */ --color-success-soft: #E7F6ED; --color-warning: #C97A0A; /* «под заказ» */ --color-warning-soft: #FDF2E2; --color-danger: #C0392B; --color-price: #0F1B2D; /* цена */ --color-star: #F2A93B; /* звёзды рейтинга */ /* Полупрозрачные (для теней, оверлеев, стеклянных подложек) */ --color-shadow-tint: rgba(11, 60, 122, 0.10); --color-shadow-tint-sm: rgba(11, 60, 122, 0.06); --color-shadow-tint-lg: rgba(11, 60, 122, 0.16); --color-overlay: rgba(10, 42, 85, 0.55); --color-white-a10: rgba(255, 255, 255, 0.10); --color-focus: #1256A8; /* Градиенты (сигнатурные) */ --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 55%, var(--color-accent) 100%); --gradient-tint: linear-gradient(180deg, var(--color-bg-tint) 0%, var(--color-bg-soft) 100%); --gradient-line: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-light) 100%); --gradient-media: linear-gradient(140deg, var(--color-bg-soft) 0%, var(--color-bg-tint) 100%); /* --------------------------------------------------------------------- 2. ШРИФТЫ И ТИПОГРАФИКА --------------------------------------------------------------------- */ --ff-base: /* 'Golos Text', */ 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; --ff-heading: var(--ff-base); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Шкала: минимум для мобильных — 16px, десктоп — 18px основного текста */ --fs-h1: clamp(2rem, 1.35rem + 2.6vw, 3.5rem); /* 32 → 56 */ --fs-h2: clamp(1.625rem, 1.30rem + 1.4vw, 2.5rem); /* 26 → 40 */ --fs-h3: clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem); /* 20 → 24 */ --fs-h4: clamp(1.0625rem,1.00rem + 0.3vw, 1.25rem); /* 17 → 20 */ --fs-lead: clamp(1.0625rem,1.00rem + 0.5vw, 1.1rem); /* 17 → 22 */ --fs-body: clamp(1rem, 0.96rem + 0.25vw, 1.125rem); /* 16 → 18 */ --fs-small: 0.9375rem; /* 15 */ --fs-tiny: 0.8125rem; /* 13 */ --fs-price: clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem); /* 20 → 24 */ --lh-tight: 1.15; --lh-heading: 1.22; --lh-base: 1.55; --lh-loose: 1.5; --ls-tight: -0.02em; --ls-wide: 0.06em; /* --------------------------------------------------------------------- 3. ОТСТУПЫ (шаг 4px) --------------------------------------------------------------------- */ --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px; --space-80: 80px; --space-96: 96px; --space-120: 120px; /* Вертикальные отступы секций */ --section-py: clamp(var(--space-48), 5vw, var(--space-96)); --section-py-tight: clamp(var(--space-32), 3.5vw, var(--space-64)); /* --------------------------------------------------------------------- 4. РАЗМЕРЫ И РАСКЛАДКА --------------------------------------------------------------------- */ --container-max: 1620px; /* включая боковые отступы */ --container-pad: 10px; --wrap-narrow: 760px; /* ширина текстовых блоков */ --wrap-mid: 980px; --search-max: 640px; /* строка поиска в шапке */ --cookie-banner-max: 800px; --gutter: clamp(var(--space-16), 1.6vw, var(--space-32)); /* Минимальная ширина колонок в auto-fit сетках */ --grid-min-product: 260px; --grid-min-category: 240px; --grid-min-feature: 268px; --grid-min-post: 300px; --grid-min-team: 216px; --grid-min-footer: 200px; /* Шапка */ --header-top-h: 40px; --header-main-h: 72px; --header-nav-h: 52px; --drawer-w: 320px; /* Элементы интерфейса */ --tap-min: 44px; /* минимальная кликабельная область */ --control-h: 48px; /* высота полей и кнопок */ --control-h-sm: 40px; --control-h-lg: 56px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; --logo-mark: 42px; --avatar: 88px; --badge-dot: 20px; /* Внутренние страницы */ --sidebar-w: 296px; /* колонка фильтров и меню кабинета */ --sticky-offset: 120px; /* липкий блок ниже липкой строки шапки */ --thumb-h: 84px; /* миниатюры галереи товара */ --qty-w: 56px; /* поле количества */ --score-size: 3.5rem; /* крупная средняя оценка в отзывах */ --bar-h: 8px; /* полоса распределения оценок */ /* Медиа-блоки */ --media-product-ratio: 3 / 2; --media-category-ratio: 3 / 2; --media-post-ratio: 8 / 5; --media-team-ratio: 4 / 5; --media-hero-ratio: 4 / 3; --map-h: clamp(280px, 38vw, 460px); /* Линии */ --border-width: 1px; --border-width-thick: 2px; --rule-h: 4px; /* сигнатурная волна-разделитель */ --focus-width: 3px; --focus-offset: 2px; /* --------------------------------------------------------------------- 5. СКРУГЛЕНИЯ И ТЕНИ --------------------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px; --shadow-sm: 0 1px 2px var(--color-shadow-tint-sm), 0 2px 8px var(--color-shadow-tint-sm); --shadow-md: 0 4px 12px var(--color-shadow-tint-sm), 0 12px 28px var(--color-shadow-tint); --shadow-lg: 0 10px 24px var(--color-shadow-tint), 0 28px 64px var(--color-shadow-tint-lg); --shadow-header: 0 2px 12px var(--color-shadow-tint-sm); /* --------------------------------------------------------------------- 6. АНИМАЦИИ --------------------------------------------------------------------- */ --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 320ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --lift: -4px; /* подъём карточки при наведении */ --reveal-shift: 18px; /* сдвиг при появлении секции */ /* --------------------------------------------------------------------- 7. СЛОИ --------------------------------------------------------------------- */ --z-header: 100; /* Затемнение выше липкой строки, но ниже панели меню */ --z-overlay: 150; --z-drawer: 200; } /* ========================================================================= ШРИФТЫ Локальные файлы Golos Text лежат в /assets/fonts. ========================================================================= */ /* @font-face { font-family: 'Golos Text'; src: url('../fonts/GolosText-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } */ /* @font-face { font-family: 'Golos Text'; src: url('../fonts/GolosText-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } */ /* @font-face { font-family: 'Golos Text'; src: url('../fonts/GolosText-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } */ /* @font-face { font-family: 'Golos Text'; src: url('../fonts/GolosText-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } */