/* ============================================================= LOJAL BILPLEIE — DESIGN TOKENS v0.1 — финализируется итеративно ============================================================= */ :root { /* =========================================================== 1. COLOR — палитра выведена из лого (lime green LB на чёрном) ----------------------------------------------------------- */ /* Brand — точный hex снят пипеткой с Logo.PNG (rgb 191,241,48) */ --color-brand: #BFF130; --color-brand-hover: #CFF558; /* +свет, для :hover на CTA */ --color-brand-active: #A8D925; /* −свет, для :active (pressed) */ --color-brand-dim: rgba(191, 241, 48, 0.55); /* приглушённый акцент */ --color-brand-rgb: 191, 241, 48; /* для rgba()-композиций */ /* Backgrounds — multi-tier dark stack, не чистый #000 (мягче на OLED) */ --color-bg: #0A0A0A; /* page */ --color-bg-raised: #111111; /* карточки, sticky-header */ --color-bg-raised-2: #181818; /* nested внутри карточек */ --color-bg-inset: #1F1F1F; /* input fields, hover-surface */ --color-bg-inverse: #FFFFFF; /* контрастные «белые» секции */ /* Foreground (text + icons) */ --color-fg: #FFFFFF; /* основной текст на тёмном */ --color-fg-muted: #B3B3B3; /* вторичный текст, мета */ --color-fg-subtle: #7E7E7E; /* tertiary, captions, placeholders (AA 4.88:1) */ --color-fg-disabled: #3F3F3F; --color-fg-inverse: #0A0A0A; /* текст на белых секциях */ /* Borders / dividers */ --color-border: #262626; /* hairline по умолчанию */ --color-border-strong: #3A3A3A; /* акцентированный */ --color-border-brand: var(--color-brand); /* Semantic — для форм. Success намеренно = brand (один зелёный язык) */ --color-success: var(--color-brand); --color-error: #FF4D4D; --color-error-bg: rgba(255, 77, 77, 0.10); --color-warning: #FFB020; --color-info: #4DA3FF; /* Overlay для модалок / lightbox галереи */ --color-overlay: rgba(0, 0, 0, 0.78); /* Sweep — цвет vertical-reveal слоя по кнопке на hover */ --color-sweep: #0A0A0A; /* совпадает с --color-bg, но отдельная переменная для гибкости */ /* =========================================================== 2. TYPOGRAPHY Display: Chakra Petch — геометричный technical / automotive гротеск из ProMotors-шаблона. Имеет sport-tuner характер, диагональные резы, пары к монограмме LB. Body: Mulish — humanist sans-serif, отличная читаемость в лёгких весах (300–400). Большой диапазон весов 200–1000. Mono: JetBrains Mono — для цен и Org.nr, «spec-sheet feel». ВСЁ self-hosted (.woff2) — Google Fonts CDN в EU нежелательно после немецкого решения 2022 (LG München). ----------------------------------------------------------- */ --font-display: 'Chakra Petch', 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-body: 'Mulish', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Веса */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* Fluid type scale — clamp(min, preferred, max). Один scale на всё приложение, никаких ad-hoc размеров в компонентах. */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12 → 13 */ --fs-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem); /* 14 → 15 */ --fs-base: clamp(1rem, 0.96rem + 0.20vw, 1.0625rem); /* 16 → 17 */ --fs-lg: clamp(1.125rem, 1.07rem + 0.30vw, 1.25rem); /* 18 → 20 */ --fs-xl: clamp(1.375rem, 1.27rem + 0.50vw, 1.625rem); /* 22 → 26 */ --fs-2xl: clamp(1.75rem, 1.55rem + 1.00vw, 2.25rem); /* 28 → 36 */ --fs-3xl: clamp(2.25rem, 1.90rem + 1.75vw, 3.25rem); /* 36 → 52 */ --fs-4xl: clamp(3rem, 2.30rem + 3.50vw, 4.75rem); /* 48 → 76 */ --fs-5xl: clamp(4rem, 2.80rem + 6.00vw, 6.75rem); /* 64 → 108 — только hero */ /* Line-heights — display плотный, body просторный */ --lh-display: 0.98; --lh-heading: 1.10; --lh-snug: 1.30; --lh-body: 1.55; --lh-loose: 1.75; /* Tracking (letter-spacing) */ --tracking-tight: -0.02em; /* для крупных display заголовков */ --tracking-normal: 0; --tracking-wide: 0.04em; /* UI-лейблы */ --tracking-wider: 0.12em; /* ALL CAPS eyebrows, CTA */ --tracking-widest: 0.20em; /* мелкие caps (Org.nr, MVA-метка) */ /* =========================================================== 3. SPACING — 4px base scale Используем числовые токены, не «small/medium/large» — при posekционной вёрстке проще быть точным. ----------------------------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px; --space-48: 192px; /* Section spacing — значения из референса ProMotors (KARAD). section_space_lg: 50/50 desktop, 120/120 tablet, 90/90 mobile section_space_md: 120/120 (постоянно) — основной отступ Используем _md как дефолт. _lg — тесные секции. */ --section-py-md: 120px; /* default section vertical padding */ --section-py-lg: 50px; /* tighter sections */ --section-py: var(--section-py-md); /* Container — 1390px max с 15px гаттерами (как в референсе) */ --container-max: 1390px; --container-px: 15px; /* gutter обеих сторон, как Bootstrap */ --gutter: var(--container-px); /* Container max-widths по брейкпойнтам (Bootstrap 5) */ --container-sm: 540px; --container-md: 720px; --container-lg: 960px; --container-xl: 1140px; --container-xxl: 1390px; /* override Bootstrap default 1320 */ /* Row gutters (CSS Grid column-gap) */ --row-gx: 30px; /* 15+15 как у Bootstrap */ /* =========================================================== 4. RADIUS По умолчанию SHARP (0) — бруталистский каркас. Кнопки используют асимметричный corner-cut (top-left + bottom-right скруглены, top-right + bottom-left острые) — это и есть фирменный shape-language CTA, рифма с диагональным движением sweep-анимации. Pill оставлен для chips/badges, но НЕ для кнопок. ----------------------------------------------------------- */ --r-none: 0; --r-xs: 2px; /* input fields — еле заметный hair */ --r-sm: 4px; /* chips, small badges */ --r-md: 8px; /* cards, если нужны (по умолчанию 0) */ --r-lg: 16px; --r-pill: 999px; /* badges/tags (не кнопки) */ --r-full: 50%; /* avatars */ /* Button asymmetric corners — применять как: border-radius: var(--btn-corner-cut) 0 var(--btn-corner-cut) 0; порядок углов: top-left | top-right | bottom-right | bottom-left */ --btn-corner-cut: 12px; /* =========================================================== 5. BORDERS ----------------------------------------------------------- */ --border-w: 1px; --border-w-2: 2px; --border-w-4: 4px; /* акцентные сепараторы секций */ /* =========================================================== 6. ELEVATION — на dark классические shadows исчезают. Используем (а) lime glow для focus/hover, (б) комбо inset-highlight + чёрный drop для физической depth. ----------------------------------------------------------- */ /* Glow — основной язык акцента */ --glow-sm: 0 0 16px rgba(var(--color-brand-rgb), 0.25); --glow-md: 0 0 32px rgba(var(--color-brand-rgb), 0.40); --glow-lg: 0 0 64px rgba(var(--color-brand-rgb), 0.55); /* Focus ring — accessibility-критично */ --ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-brand); /* Elevation (для редких случаев — модалки, dropdowns) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.04) inset; --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.06) inset; /* =========================================================== 7. MOTION Кривые подобраны под характер бренда: snappy out, без bouncy overshoot (не cartoony). Время короткое — sport-feel. ----------------------------------------------------------- */ --t-fast: 120ms; --t: 200ms; --t-slow: 360ms; --t-slower: 600ms; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* default — snappy ease-out */ --ease-in: cubic-bezier(0.55, 0, 0.85, 0.1); --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1); --ease-emphatic: cubic-bezier(0.85, 0, 0.15, 1); /* для больших движений (modal, drawer) */ /* Sweep — vertical reveal от bottom-left на hover (skewY + scale Y) */ --t-sweep: 200ms; --ease-sweep: ease; /* CSS keyword === cubic-bezier(0.25, 0.1, 0.25, 1) */ /* Zoom — фото в карточках на hover */ --t-zoom: 700ms; --ease-zoom: cubic-bezier(0.25, 1, 0.5, 1); /* =========================================================== 8. Z-INDEX ----------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-dropdown: 300; --z-backdrop: 900; --z-modal: 1000; --z-toast: 1100; --z-tooltip: 1200; /* =========================================================== 9. BREAKPOINTS — Bootstrap 5 (что использует референс). В @media пишем числа напрямую: эти токены — для справки. ----------------------------------------------------------- */ --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; --bp-xxl: 1400px; /* =========================================================== 10. TRANSITION — bootstrap-style universal transition которую референс использует для anchor:hover и т.п. ----------------------------------------------------------- */ --transition-bs: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); } /* ============================================================= RESET / DEFAULTS — на уровне токенов, не компонентов ============================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Selection — lime на чёрном тексте → читаемо */ ::selection { background: var(--color-brand); color: var(--color-fg-inverse); } /* Focus-visible — глобальный ring для клавиатурной навигации */ :focus { outline: none; } :focus-visible { outline: none; box-shadow: var(--ring); } /* Reduced motion — Datatilsynet/WCAG: уважаем prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================= COMPONENT PATTERNS — переиспользуемые утилиты, завязанные на токены ============================================================= */ /* ------------------------------------------------------------- .has-sweep — vertical reveal на hover. Тёмный слой растёт снизу-слева вверх с лёгким skewY-наклоном, текст синхронно меняется на белый. Использование: ... ------------------------------------------------------------- */ .has-sweep { position: relative; overflow: hidden; isolation: isolate; /* собственный stacking context */ z-index: 0; /* НЕ ставим transition на background самой кнопки — иначе остаётся залитая полоса после hover (баг). */ transition: color var(--t-sweep) var(--ease-sweep); } .has-sweep::before { content: ''; position: absolute; inset: 0; background: var(--color-sweep); transform: translateX(-101%); transition: transform var(--t-sweep) var(--ease-sweep); z-index: -1; pointer-events: none; } .has-sweep:hover::before, .has-sweep:focus-visible::before { transform: translateX(0); } .has-sweep:hover, .has-sweep:focus-visible { color: var(--color-fg); /* белый текст по мере того, как слой накрывает */ } /* ------------------------------------------------------------- .zoom-frame — кадрирующий контейнер для фото в карточках. На hover фото внутри плавно zoom-in (scale 1.06) за 700ms. Использование:
...
Любой , .zoom-target или внутри подхватывает transition автоматически. ------------------------------------------------------------- */ .zoom-frame { overflow: hidden; position: relative; } .zoom-frame > img, .zoom-frame > picture > img, .zoom-frame > .zoom-target { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-zoom) var(--ease-zoom); will-change: transform; } .zoom-frame:hover > img, .zoom-frame:hover > picture > img, .zoom-frame:hover > .zoom-target, .zoom-frame:focus-within > img, .zoom-frame:focus-within > picture > img, .zoom-frame:focus-within > .zoom-target { transform: scale(1.06); }