/* * Основа сцены: сброс, типографика, сетка, кнопки, атмосферный фон. * Тёмная терминальная студия телешоу — см. DESIGN.md и tokens.css. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--stage-1); /* Отсечение именно здесь, а не только на body: диагональная лента шире экрана, а перенос overflow с body на вьюпорт срабатывает не всегда — страница уезжала вбок на вылет ленты. clip, а не hidden: hidden сделал бы html прокручиваемым контейнером и сломал position: sticky у шапки. */ overflow-x: clip; } /* Класс вешает smooth-scroll.js, когда берёт прокрутку на себя: две плавности разом дерутся друг с другом. Скрипта нет — работает CSS. */ html.is-smooth { scroll-behavior: auto; } body { margin: 0; min-height: 100vh; font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh-base); font-weight: var(--fw-normal); color: var(--c-text); background: var(--stage-1); overflow-x: clip; /* горизонтального скролла быть не должно */ position: relative; isolation: isolate; } body.is-locked { overflow: hidden; } /* ---------- фон: зернистый градиент ---------- */ /* Холст рисует grainient.js. Пока скрипт не отработал (или если WebGL недоступен) фон держит CSS-подложка на body — те же три цвета, тот же угол, только без движения и зерна. */ body { background-color: #000; background-image: radial-gradient(58% 62% at 8% 45%, rgba(138, 47, 166, .9) 0%, rgba(78, 31, 94, .55) 38%, rgba(0, 0, 0, 0) 78%), linear-gradient(118deg, #1d0c24 0%, #0b040e 42%, #000000 100%); background-attachment: fixed; } .grainient { position: fixed; inset: 0; z-index: -3; /* самый нижний слой сцены: над ним фишка, над ней вуаль */ width: 100%; height: 100%; display: block; pointer-events: none; } /* Затемняющая вуаль поверх фона. Без неё фиолет спорит с текстом: к низу страницы, где идёт длинное чтение, она плотнее. */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .22) 55%, rgba(0, 0, 0, .45) 100%); } /* ---------- 3D-фишка ---------- */ /* Холст во весь экран в глубине сцены: фишка плывёт по фону, а не внутри блока. Кликам не мешает, размеры держит CSS — three.js рисует в буфер того же размера. Расфокус (filter: blur) вешает скрипт по ходу движения — см. assets/js/chip.js. */ .chip3d { position: fixed; inset: 0; z-index: var(--z-chip); width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity 1.1s var(--ease-out); } .chip3d.is-ready { opacity: 1; } /* Иначе display у .btn и подобных перебивает атрибут hidden */ [hidden] { display: none !important; } img, video { max-width: 100%; display: block; } img { height: auto; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } ::selection { background: var(--signal); color: #fff; } /* скроллбар в фирменной сцене */ * { scrollbar-color: var(--signal-line) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--stage-3); border-radius: 999px; border: 2px solid var(--stage-1); } ::-webkit-scrollbar-thumb:hover { background: var(--signal-line); } :focus-visible { outline: 2px solid var(--signal-2); outline-offset: 3px; border-radius: 4px; } /* ---------- сетка ---------- */ .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .wrap--wide { max-width: var(--wrap-wide); } .section { position: relative; padding: var(--section-y) 0; } .section + .section { border-top: var(--border); } .section > .wrap { position: relative; z-index: 2; } .cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--gap) * 2); align-items: start; } .grid { display: grid; gap: var(--gap); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid > * { min-width: 0; } @media (max-width: 1099px) { .cols-2 { grid-template-columns: 1fr; gap: var(--gap); } .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 699px) { .grid--2 { grid-template-columns: 1fr; } } /* ---------- типографика ---------- */ /* Дисплейный Oks Free — только прописные: в шрифте нет строчных знаков. Поэтому h1/h2 всегда в капсе, а h3 и мельче живут в TT Hoves. */ .h1, .h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; color: var(--c-text); } .h1 { font-size: var(--fs-h1); line-height: .92; } .h2 { font-size: var(--fs-h2); line-height: .96; } .h3 { font-family: var(--font); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: 1.2; letter-spacing: var(--tracking-tight); color: var(--c-text); } .lead { font-size: var(--fs-lead); line-height: 1.5; } .muted { color: var(--c-text-2); } .fine { font-size: var(--fs-sm); color: var(--c-text-2); } .section__head { margin-bottom: calc(var(--gap) * 1.6); max-width: 62ch; } .section__sub { color: var(--c-text-2); margin-top: 14px; font-size: var(--fs-lead); } /* Базовые 1.6 рассчитаны на длинный текст в широкой колонке. Подзаголовок на телефоне — две-три строки во всю ширину экрана, и такой интерлиньяж разрывает их на отдельные фразы. */ @media (max-width: 699px) { .section__sub { line-height: 1.3; } } .empty { color: var(--c-text-3); font-style: italic; } /* акцентное слово — подставляется скриптом в конце каждого предложения */ .accent { color: var(--signal); } /* предложение заголовка = строка (только там, где хватает ширины) */ @media (min-width: 1100px) { .hl-line { display: block; } } /* ---------- reveal: сцена появляется по прокрутке ---------- */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); } [data-reveal].is-visible { opacity: 1; transform: none; } /* курсор-прожектор на интерактивных карточках */ .spot { position: relative; overflow: hidden; } .spot::after { content: ''; position: absolute; inset: 0; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--signal-dim), transparent 70%); opacity: 0; transition: opacity var(--dur) var(--ease); pointer-events: none; } .spot:hover::after, .spot:focus-within::after { opacity: 1; } /* ---------- кнопки ---------- */ /* Плоская заливка акцентом. По наведению заливка гаснет — остаётся только обводка и акцентный цвет текста. Никакого градиента, блика и неонового ореола. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: var(--btn-py) var(--btn-px); background: var(--signal); color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-sm); letter-spacing: .01em; border: 1px solid var(--signal); border-radius: var(--radius-btn); text-decoration: none; text-align: center; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn:hover { background: transparent; color: var(--signal-2); border-color: var(--signal-2); } .btn:active { opacity: .85; } .btn--ghost { background: transparent; color: var(--ink-0); border-color: var(--ink-line-2); } .btn--ghost:hover { background: transparent; border-color: var(--signal); color: var(--signal-2); } .btn--wide { width: 100%; } .btn:disabled { opacity: .5; cursor: default; } /* ---------- заглушки медиа ---------- */ .ph { background: linear-gradient(160deg, var(--stage-2), var(--stage-1)); border: var(--border); border-radius: var(--radius); aspect-ratio: var(--ph-ratio, 16 / 9); display: grid; place-items: center; padding: var(--gap-sm); } .ph__in { text-align: center; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-3); } .ph__ratio { display: block; margin-bottom: 6px; color: var(--signal-2); } .ph__need { display: block; max-width: 34ch; margin: 0 auto; } /* ---------- иконки первой сборки ---------- */ .ico { width: 42px; height: 42px; /* среди иконок есть