/* ============================================================ INDIN ДЕКОДИТ · Дизайн-токены · Цвет + Типографика Авторское Telegram-медиа про технологии и ИИ — по-человечески. Фишка: латиница «INDIN» → кириллица «декодит» = декодинг алфавита. Палитра кодирует регистр: зелёный+циан = «декодит» (будни), красный = «шкодит» / срочное (дисциплинированный сигнал). ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"); :root { /* ========== БАЗА · тёплый чёрный (не сине-холодный) ========== */ --bg: #100E0B; /* тёплый чёрный — база */ --bg-2: #1A1712; /* приподнятая поверхность */ --bg-3: #221E18; /* hover / вложенная карточка */ --ink: #F3EFE6; /* тёплый бумажный текст */ --ink-2: #C9C2B3; /* вторичный */ --ink-3: #8E8675; /* мета / подсказка */ --mute: #5E574A; /* eyebrow / disabled */ --paper: #F5F1E8; /* светлая бумага */ --line: rgba(243,239,230,0.08); --line-2: rgba(243,239,230,0.14); /* ========== НЕОН · регистр «декодит» (зелёный + циан) ========== */ --accent: #00FF88; /* зелёный — primary, «расшифровано», CTA, статус */ --accent-d: #00CC6E; --accent-soft: rgba(0,255,136,0.10); --accent-border: rgba(0,255,136,0.32); --cyan: #36DEE6; /* циан — второй акцент: ссылки, активные состояния */ --cyan-soft: rgba(54,222,230,0.12); --cyan-border: rgba(54,222,230,0.34); /* ========== РЕГИСТР «шкодит» / СРОЧНОЕ (красный, дисциплина) ========== */ --red: #FF3D3A; /* только смысловой сигнал: горячее, срочное, ирония */ --red-d: #E22B28; --red-soft: rgba(255,61,58,0.12); --red-border: rgba(255,61,58,0.36); /* ========== ТОЧКИ РУБРИК (скан-цвет бейджа, прохладная гамма) ========== */ --r-primeneniye: #00FF88; /* Применение ИИ */ --r-zapad: #36DEE6; /* Запад */ --r-kitay: #6FA8FF; /* Китай */ --r-rossiya: #E0B864; /* Россия */ --r-giga: #C8A6FF; /* GigaChat · Яндекс */ --blue: #6FA8FF; --blue-soft: rgba(111,168,255,0.12); --blue-border: rgba(111,168,255,0.32); --gold: #E0B864; --gold-soft: rgba(224,184,100,0.12); --gold-border: rgba(224,184,100,0.32); --purple: #C8A6FF; --purple-soft: rgba(200,166,255,0.12); --purple-border: rgba(200,166,255,0.32); /* ========== ТИПОГРАФИКА ========== Unbounded — заголовки (характерный дисплей, кириллица). Inter — текст. IBM Plex Mono — метки, бейджи, цифры, глагол бренда. */ --font-display: "Unbounded", "Inter", system-ui, sans-serif; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Шкала */ --t-display: 700 54px/1.05 var(--font-display); --t-display-sm: 700 38px/1.08 var(--font-display); --t-headline: 600 30px/1.18 var(--font-display); /* заголовок новости */ --t-h1: 700 25px/1.14 var(--font-display); /* заголовок экрана */ --t-h2: 600 19px/1.22 var(--font-display); /* секция */ --t-h3: 600 16px/1.3 var(--font-sans); /* подсекция (Inter — читаемость) */ --t-body: 400 15px/1.58 var(--font-sans); --t-body-sm: 400 13.5px/1.55 var(--font-sans); --t-caption: 400 12.5px/1.45 var(--font-sans); /* Mono */ --t-mono-verb: 600 34px/1.0 var(--font-mono); --t-mono-num: 500 28px/1.0 var(--font-mono); --t-mono-chip: 600 11px/1.0 var(--font-mono); --t-mono-eyebrow: 600 11px/1.4 var(--font-mono); /* Трекинг */ --ls-display: -0.01em; /* Unbounded и так широкий */ --ls-head: -0.005em; --ls-h2: 0em; --ls-body: -0.006em; --ls-mono: 0em; --ls-eyebrow: 0.2em; --ls-chip: 0.06em; /* ========== ПРОСТРАНСТВО ========== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 22px; --space-6: 28px; --space-7: 40px; --space-8: 56px; --space-9: 80px; --pad: 16px; --gap: 8px; /* ========== РАДИУСЫ ========== */ --r-pill: 999px; --r-chip: 12px; --r-card: 18px; --r-glass: 22px; --r-glass-sm: 14px; --r-device: 46px; --r-mark: 14px; /* ========== СТЕКЛО / ЭЛЕВАЦИЯ ========== */ --glass-tint: rgba(255,255,255,0.04); --glass-tint-strong: rgba(255,255,255,0.06); --glass-border: rgba(255,255,255,0.08); --glass-border-strong: rgba(255,255,255,0.11); --glass-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 -1px 0 rgba(0,0,0,0.32) inset, 0 18px 36px -18px rgba(0,0,0,0.55); --glass-shadow-strong: 0 1px 0 rgba(255,255,255,0.10) inset, 0 -1px 0 rgba(0,0,0,0.42) inset, 0 24px 50px -20px rgba(0,0,0,0.68); --shadow-card-inner: 0 4px 10px -6px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.05) inset; /* ========== НЕОН / GLOW — один на экран ========== */ --glow-neon: 0 0 18px rgba(0,255,136,0.55); --glow-neon-lg: 0 0 34px rgba(0,255,136,0.42), 0 12px 30px -8px rgba(0,255,136,0.36); --glow-cta: 0 12px 28px -10px rgba(0,255,136,0.50), 0 0 0 1px rgba(255,255,255,0.10) inset; --glow-cyan: 0 0 18px rgba(54,222,230,0.5); --glow-red: 0 0 18px rgba(255,61,58,0.55); /* ========== ДВИЖЕНИЕ ========== */ --ease-out: cubic-bezier(.2,.7,.3,1); --ease-soft: cubic-bezier(.4,0,.2,1); --t-fast: 0.12s; --t-base: 0.2s; --t-slow: 0.4s; } /* ========== БАЗОВЫЕ ПРАВИЛА ========== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--ink); font: var(--t-body); letter-spacing: var(--ls-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--accent); color: var(--bg); } .eyebrow { font: var(--t-mono-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--mute); } .num, .date, .count, .stat-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-mono); } /* ========== ЛОКАП БРЕНДА — INDIN (латиница) + декодит (кириллица) ========== Декодинг алфавита: дисплейная латиница → терминальная кириллица. */ .wm { display: inline-flex; align-items: baseline; gap: 0.32em; white-space: nowrap; } .wm .lat { font-family: var(--font-display); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .wm .cyr { font-family: var(--font-mono); font-weight: 600; color: var(--accent); letter-spacing: -0.01em; } .wm.shk .cyr { color: var(--red); } .wm .caret { display: inline-block; width: 0.46em; height: 0.92em; transform: translateY(0.04em); background: var(--accent); margin-left: -0.16em; border-radius: 1px; animation: wm-blink 1.2s steps(1) infinite; } .wm.shk .caret { background: var(--red); } @keyframes wm-blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } } /* ========== СТЕКЛО-УТИЛИТА ========== */ .glass { background: var(--glass-tint); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--r-glass); box-shadow: var(--glass-shadow); } /* ========== АМБИЕНТНЫЕ ОРБЫ ========== */ .ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .ambient .orb { position: absolute; border-radius: 9999px; filter: blur(130px); opacity: 0.5; }