/* ============================================================ ЯКТЫЛЫК — Design Tokens colors_and_type.css Тёмная премиальная тема. Графит + жёлтый свет + оранжевое свечение. Подключайте этот файл первым в любой макет бренда. ============================================================ */ /* Fonts: Onest (display+text) + JetBrains Mono (technical labels) via Google Fonts. Замена на самохостинг — см. README CAVEATS. */ @import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Unbounded:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ---------- BASE COLOR — тёплый графит (с лёгким янтарным подтоном) ---------- */ /* ---------- BASE COLOR — нейтральный графит (фон) ---------- */ /* ФОН — нейтральный тёмный (не коричневый, не холодно-синий). Тепло живёт в элементах — карточки (surface-*), акцент и свечение — а не во всём поле. */ --graphite-950: #0B0B0C; /* глубже фона — провалы, низ страницы */ --graphite-900: #0F0F11; /* фон страницы (deep) */ --graphite-850: #131316; /* фон страницы (base) */ --graphite-800: #18181B; /* секция-подложка */ /* SURFACE-* — «элементы»: тёплый уголь, чуть согретый в сторону акцента */ --surface-1: #1D1A14; /* карточка */ --surface-2: #252016; /* приподнятая карточка / hover */ --surface-3: #2C2619; /* инпуты, чипы на карточке */ /* ---------- TEXT — почти нейтральный, хаир тепла ---------- */ --fg-1: #F6F5F2; /* основной */ --fg-2: #AFACA5; /* вторичный */ --fg-3: #76736C; /* третичный / подписи */ --fg-on-accent: #1A1408; /* текст на жёлтой кнопке (тёплый почти-чёрный) */ /* ---------- ACCENT — жёлтый «свет» (Яктылык) ---------- */ --accent: #FFC24B; /* основной жёлтый-золото */ --accent-strong: #F5B02F; /* hover / press / насыщенный */ --accent-soft: #FFD683; /* подсветка текста, иконки на тёмном */ --accent-tint: rgba(255, 194, 75, 0.12); /* фон чипа/иконки */ --accent-tint-2: rgba(255, 194, 75, 0.06); /* ---------- GLOW — тёплое оранжевое свечение лампы ---------- */ --glow: #FF8A3D; --glow-strong: rgba(255, 138, 61, 0.28); --glow-mid: rgba(255, 138, 61, 0.16); --glow-faint: rgba(255, 138, 61, 0.07); /* Готовая атмосфера для hero / акцентных зон */ --hero-glow: radial-gradient(60% 50% at 50% 0%, var(--glow-mid), transparent 70%), radial-gradient(40% 40% at 80% 10%, var(--glow-faint), transparent 70%); /* ---------- SEMANTIC ---------- */ --success: #58C98A; --danger: #F2766B; /* ---------- BORDERS / GRANI — тёплый свет по граням ---------- */ --hairline: rgba(255, 247, 233, 0.07); /* волосяной разделитель */ --border-1: rgba(255, 247, 233, 0.09); /* граница карточки */ --top-edge: rgba(255, 248, 235, 0.12); /* светлая грань сверху */ --top-edge-strong: rgba(255, 248, 235, 0.18); --border-accent: rgba(255, 194, 75, 0.45); /* ---------- RADII — крупные скругления ---------- */ --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; /* карточка */ --r-xl: 32px; /* крупная плитка */ --r-2xl: 40px; /* hero-плитка */ --r-pill: 999px; /* ---------- SPACING (base 4px) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --section-y: clamp(64px, 9vw, 128px); /* @kind spacing */ /* вертикальный ритм секций */ --container: 1200px; /* @kind spacing */ --gutter: clamp(20px, 4vw, 40px); /* @kind spacing */ /* ---------- ELEVATION / SHADOWS ---------- */ /* Карточка: мягкая тень вниз + светлая грань сверху. Плоского чёрного нет. */ --shadow-card: inset 0 1px 0 var(--top-edge), 0 24px 48px -24px rgba(0, 0, 0, 0.6); --shadow-card-hover: inset 0 1px 0 var(--top-edge-strong), 0 32px 64px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--border-1); --shadow-raised: inset 0 1px 0 var(--top-edge), 0 12px 28px -16px rgba(0, 0, 0, 0.55); --shadow-btn: 0 8px 24px -10px rgba(255, 178, 47, 0.5); --shadow-glow-soft: 0 0 80px -20px var(--glow-mid); /* ---------- MOTION — спокойно, премиально, без баунса ---------- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --dur-1: 180ms; /* @kind other */ --dur-2: 320ms; /* @kind other */ --dur-3: 480ms; /* @kind other */ --dur-4: 640ms; /* @kind other */ /* ---------- TYPE FAMILIES ---------- */ --font-logo: 'Unbounded', 'Onest', system-ui, sans-serif; /* распознаваемый дисплей только для логотипа/реже — крупных акцентов */ --font-display: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-text: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; } /* ============================================================ TYPE SCALE — семантические токены Заголовки — Sentence case, плотный трекинг. Текст — спокойный. ============================================================ */ .t-display { /* hero h1 — логотипный Unbounded, броский */ font-family: var(--font-logo); font-weight: 700; font-size: clamp(40px, 6.2vw, 76px); line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; } .t-h1 { /* заголовки 1-го уровня — тоже Unbounded */ font-family: var(--font-logo); font-weight: 700; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.005em; text-wrap: balance; } .t-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; } .t-h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; letter-spacing: -0.01em; } .t-lead { /* подзаголовок под hero */ font-family: var(--font-text); font-weight: 400; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--fg-2); } .t-body { font-family: var(--font-text); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--fg-2); } .t-body-sm { font-family: var(--font-text); font-weight: 400; font-size: 14px; line-height: 1.55; color: var(--fg-2); } .t-eyebrow { /* моно-метка над заголовком: ЭТАП 02 */ font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .t-mono { /* технические цифры/подписи */ font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.02em; color: var(--fg-2); } .t-stat { /* крупная цифра преимущества */ font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -0.02em; color: var(--fg-1); } /* utility colors */ .fg-1 { color: var(--fg-1); } .fg-2 { color: var(--fg-2); } .fg-3 { color: var(--fg-3); } .accent { color: var(--accent); }