/* ========================================================================== ALGOMIX NOVA — Design tokens Art direction: премиальный минимализм / «технологичный организм» ========================================================================== */ :root { /* ---- Surfaces ---------------------------------------------------------- */ --void: #06060A; --base: #0A0A0F; --elev-1: #0E0E15; --elev-2: #14141D; --glass: rgba(255, 255, 255, 0.045); --glass-hi: rgba(255, 255, 255, 0.075); --glass-brd: rgba(255, 255, 255, 0.09); --glass-brd-hi:rgba(255, 255, 255, 0.18); /* ---- Text -------------------------------------------------------------- */ --txt: #F3F4F8; --txt-dim: #A0A4B4; --txt-mute: #7C8194; /* 5.2:1 на #06060A (было #676B7C — 3.8:1) */ /* ---- Accents ----------------------------------------------------------- */ --cyan: #00F0FF; --cyan-deep: #0090B8; --violet: #8A2BE2; --violet-soft: #A366F0; --lime: #D4FF4F; --grad-primary: linear-gradient(112deg, var(--cyan) 0%, var(--violet) 100%); --grad-text: linear-gradient(100deg, #FFFFFF 0%, #C9F4FF 38%, var(--cyan) 72%, var(--violet-soft) 100%); --grad-line: linear-gradient(90deg, transparent, var(--glass-brd-hi), transparent); /* ---- Glow -------------------------------------------------------------- */ --glow-cyan: 0 0 40px -8px rgba(0, 240, 255, 0.55); --glow-violet: 0 0 48px -6px rgba(138, 43, 226, 0.5); --shadow-card: 0 1px 0 0 rgba(255,255,255,0.05) inset, 0 24px 60px -32px rgba(0, 0, 0, 0.9); /* ---- Typography -------------------------------------------------------- */ --font-display: "Unbounded", "Inter Tight", system-ui, sans-serif; --font-body: "Inter Tight", -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; /* Нижние границы подобраны под кириллицу: «Калининграде», «Расскажите», «сопровождение» на 320–390px при прежнем минимуме не помещались в строку и рвались посередине слова. На широких экранах размер не изменился. */ --t-hero: clamp(1.75rem, 0.35rem + 4.4vw, 4.9rem); /* 28 → 78px */ --t-h2: clamp(1.7rem, 0.95rem + 3.3vw, 4.2rem); /* 27 → 67px */ --t-h3: clamp(1.25rem,1.05rem + 0.8vw, 1.75rem); --t-lead: clamp(1.05rem,0.97rem + 0.4vw, 1.3rem); --t-body: clamp(0.97rem,0.93rem + 0.2vw, 1.06rem); --t-small: 0.86rem; --t-micro: 0.74rem; --tracking-hero: -0.028em; --tracking-h2: -0.022em; --tracking-eyebrow: 0.18em; /* ---- Rhythm ------------------------------------------------------------ */ --space-section: clamp(5rem, 2.6rem + 7vw, 11.5rem); --gutter: clamp(1.15rem, 0.5rem + 2.4vw, 3rem); --maxw: 1320px; --maxw-text: 62ch; /* ---- Shape ------------------------------------------------------------- */ --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px; /* ---- Motion ------------------------------------------------------------ */ --d-fast: 160ms; --d-normal: 340ms; --d-slow: 720ms; --d-story: 1200ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- Layers ------------------------------------------------------------ */ --z-scene: 0; --z-grain: 1; --z-content: 2; --z-header: 40; --z-cursor: 90; --z-loader: 100; --header-h: 76px; /* ---- Зависят от темы ---------------------------------------------------- */ --veil-soft: rgba(6, 6, 10, 0.72); --veil-mid: rgba(6, 6, 10, 0.82); --veil-strong: rgba(6, 6, 10, 0.90); --header-bg: rgba(8, 8, 13, 0.62); --panel-bg: rgba(14, 14, 22, 0.88); --field-bg: rgba(255, 255, 255, 0.03); /* Непрозрачный вариант: браузер закрашивает автозаполненное поле своим фоном, и перекрыть его можно только сплошной внутренней тенью. */ --field-bg-solid: #12131A; --btn-fg: #05060A; --grain-blend: overlay; --grain-opacity: 0.10; /* Мягкая тень под крупным текстом: даёт объём, не трогая контраст */ --shadow-display: 0 1px 1px rgba(0, 0, 0, 0.32), 0 4px 18px rgba(0, 0, 0, 0.42), 0 0 64px rgba(0, 240, 255, 0.07); --shadow-display-soft: 0 1px 1px rgba(0, 0, 0, 0.26), 0 3px 12px rgba(0, 0, 0, 0.3); } /* Светлый режим — второй сценарий арт-дирекшена (чистый белый). 3D-сцена переключает HDRI-подложку и материал на матовый пластик. */ :root[data-theme="light"] { --void: #FFFFFF; --base: #F7F8FB; --elev-1: #FFFFFF; --elev-2: #EEF1F6; --glass: rgba(10, 10, 20, 0.028); --glass-hi: rgba(10, 10, 20, 0.05); --glass-brd: rgba(10, 10, 30, 0.09); --glass-brd-hi: rgba(10, 10, 30, 0.16); --txt: #0B0C12; --txt-dim: #4A4F60; --txt-mute: #5F6577; /* 5,8:1 на белом и 4,7:1 на карточках (было #686E80 — на карточках падало до 4,1:1) */ --cyan: #006B90; /* 6,0:1 на белом и 4,9:1 на карточках (было #00769F — на карточках падало до 4,2:1) */ --violet: #6A1FB8; /* Лайм из тёмной палитры на белом не читается — берём глубже */ --lime: #6E8F00; --grad-text: linear-gradient(100deg, #0B0C12 0%, #0083B0 62%, #6A1FB8 100%); --grad-line: linear-gradient(90deg, transparent, rgba(10,10,30,0.16), transparent); --shadow-card: 0 1px 0 0 rgba(255,255,255,0.9) inset, 0 18px 44px -28px rgba(12, 18, 44, 0.42); --glow-cyan: 0 0 34px -10px rgba(0, 131, 176, 0.5); --glow-violet: 0 0 40px -8px rgba(106, 31, 184, 0.42); --veil-soft: rgba(247, 248, 251, 0.74); --veil-mid: rgba(247, 248, 251, 0.86); --veil-strong: rgba(247, 248, 251, 0.94); --header-bg: rgba(255, 255, 255, 0.74); --panel-bg: rgba(255, 255, 255, 0.94); --field-bg: rgba(10, 10, 30, 0.025); --field-bg-solid: #F4F6FA; --btn-fg: #FFFFFF; --grain-blend: multiply; --grain-opacity: 0.035; --shadow-display: 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 14px rgba(14, 20, 46, 0.16), 0 1px 2px rgba(14, 20, 46, 0.12); --shadow-display-soft: 0 1px 8px rgba(14, 20, 46, 0.12), 0 1px 1px rgba(14, 20, 46, 0.09); }