/* ========================================================================== KINO — палитра, гарнитуры и основание страницы. Значения взяты из макета kino_v2: фон #0A0A0B, две поверхности над ним, две толщины линии, приглушённый текст, лаймовый акцент. Разница с макетом в одном месте, и она принципиальная: акцент здесь не литерал, а то, что владелец выбрал в панели. По умолчанию это тот самый лайм; смена цвета в «Внешний вид → Общие» перекрашивает страницу целиком и макет от этого не ломается — он и построен на одной акцентной краске. --kt-accent и --kt-accent-rgb приходят из layout.blade.php инлайном на .k-site. --kt-on-accent считает контраст сам: на лайме белые буквы не читаются вовсе, а на тёмно-синем не читаются чёрные. Оба случая должны быть правильными без правки кода. ========================================================================== */ /* ⚠️ И на корне тоже: сценарии переносят часть полос на , а там имена, объявленные только на `.k-site`, не видны — гарнитура подменялась системной, а краска падала на запасной оранжевый. */ :root, .k-site { /* Поверхности. --kt-bg / --kt-ink уже были и на них опирается вся разметка через rgba(var(--kt-*-rgb), a). */ --kt-bg: #0A0A0B; --kt-bg-rgb: 10, 10, 11; /* Прежние виджеты (предложение пробного периода, подсказки) просят --kt-paper-rgb: это подложка карточки поверх страницы. Без него они падали на запасное тёмное значение и на светлой теме выходили чёрными плашками. */ --kt-paper-rgb: 16, 16, 18; --kt-ink: #F4F3F0; --kt-ink-rgb: 244, 243, 240; --kt-inv: #0A0A0B; --kt-surface: #101012; --kt-surface-2: #17171A; --kt-surface-3: #1E1E22; --kt-foot: #101012; --kt-line: rgba(255, 255, 255, .09); --kt-line-2: rgba(255, 255, 255, .16); --kt-muted: #8B8B93; --kt-glass: rgba(12, 12, 14, .72); --kt-shadow: 0 22px 48px rgba(0, 0, 0, .45); --kt-shadow-pop: 0 26px 70px rgba(0, 0, 0, .55); /* Гарнитуры. См. kino/fonts.css — файлы наши. */ --kt-font: 'Manrope', 'Manrope Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; --kt-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif; --kt-font-mono: 'IBM Plex Mono', 'IBM Plex Mono Fallback', ui-monospace, 'SF Mono', Menlo, monospace; /* Ширина полосы содержимого и её поля — одни на все блоки страницы. */ --kt-wrap: 1480px; --kt-gutter: clamp(16px, 3vw, 40px); /* Радиусы макета. */ --kt-r-xs: 7px; --kt-r-sm: 10px; --kt-r-md: 14px; --kt-r-lg: 18px; --kt-r-xl: 28px; --kt-ease: cubic-bezier(.2, .7, .2, 1); /* Цвет текста поверх акцента. Пересчитывается в PHP по WCAG и приходит инлайном; значение здесь — запасное, на случай старого кэша вида. */ --kt-on-accent: #0F1005; /* * Акцент, которым пишут буквы прямо по фону страницы: рукописная строка * баннера, номер открытого вопроса, подписи в меню. На тёмном фоне это * сам акцент; на светлом он затемняется в PHP до читаемого — иначе * лаймовые буквы на светлой теме исчезают со страницы целиком. */ --kt-accent-ink: var(--kt-accent); background: var(--kt-bg); color: var(--kt-ink); font-family: var(--kt-font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .k-site[data-theme="light"] { --kt-bg: #FBFBF9; --kt-bg-rgb: 251, 251, 249; --kt-paper-rgb: 255, 255, 255; --kt-ink: #111113; --kt-ink-rgb: 17, 17, 19; --kt-inv: #FBFBF9; --kt-surface: #FFFFFF; --kt-surface-2: #F3F3EF; --kt-surface-3: #E9E9E3; --kt-foot: #F3F3EF; --kt-line: rgba(16, 16, 18, .10); --kt-line-2: rgba(16, 16, 18, .20); --kt-muted: #6C6C74; --kt-glass: rgba(251, 251, 249, .78); --kt-shadow: 0 18px 40px rgba(16, 16, 18, .12); --kt-shadow-pop: 0 24px 60px rgba(16, 16, 18, .16); --kt-accent-ink: var(--kt-accent-ink-light, var(--kt-accent)); } /* -------------------------------------------------------------------------- Основание. Страница главной не подключает ни одного прежнего листа, поэтому сброс живёт здесь, а не приходит из site-v404a.css. -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { background: #0A0A0B; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; background: var(--kt-bg, #0A0A0B); color: var(--kt-ink, #F4F3F0); font-family: 'Manrope', 'Manrope Fallback', system-ui, sans-serif; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4, p, figure, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } ::selection { background: var(--kt-accent, #C6F24A); color: var(--kt-on-accent, #0F1005); } :focus-visible { outline: 2px solid var(--kt-accent, #C6F24A); outline-offset: 2px; border-radius: 4px; } /* Полосу прокрутки у горизонтальных лент не показываем: у них свои стрелки и своя полоса под шапкой блока. */ [data-k-rail] { scrollbar-width: none; -ms-overflow-style: none; } [data-k-rail]::-webkit-scrollbar { display: none; } /* Скрытое от глаз, но не от чтения вслух. */ .k-h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Полосы прокрутки — по теме, а не по вкусу браузера. Хром рисует их светло-серыми: на тёмной странице это яркая полоса у правого края, самое светлое пятно на всём экране. Красим в те же линии, которыми нарисован сайт, и переворачиваем вместе с темой — переменные уже знают, светлая она или тёмная. Толщину страницы не трогаем: тонкая полоса на всю страницу — это про вкус, а промахнуться по ней мышью — про удобство. Тоньше только внутри выпадающих списков, где полоса на всю ширину съела бы половину. -------------------------------------------------------------------------- */ .k-site { scrollbar-color: var(--kt-line-2) transparent; } .k-site ::-webkit-scrollbar { width: 12px; height: 12px; } .k-site ::-webkit-scrollbar-track { background: transparent; } .k-site ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; background-color: var(--kt-line-2); } .k-site ::-webkit-scrollbar-thumb:hover { background-color: var(--kt-muted); } .k-site ::-webkit-scrollbar-corner { background: transparent; } .k-hide { display: none !important; } [hidden] { display: none !important; } /* Общая полоса содержимого. */ .kt-wrap { max-width: var(--kt-wrap); margin: 0 auto; padding-left: var(--kt-gutter); padding-right: var(--kt-gutter); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- Смена темы — круговое раскрытие из точки нажатия. Там, где View Transitions нет, остаётся обычный переход цвета: ничего не прыгает. -------------------------------------------------------------------------- */ html, body { transition: background-color .4s ease, color .4s ease; } @keyframes kThemeReveal { from { clip-path: circle(0% at var(--tx, 90%) var(--ty, 32px)); } to { clip-path: circle(145% at var(--tx, 90%) var(--ty, 32px)); } } ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 1; } ::view-transition-new(root) { z-index: 2; animation: kThemeReveal .6s cubic-bezier(.4, 0, .2, 1); } /* Подтверждение действия с карточкой. */ .k-toast, .kt-cardtoast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 210; padding: 13px 20px; border-radius: 999px; background: var(--kt-surface); border: 1px solid var(--kt-line-2); box-shadow: var(--kt-shadow-pop); font-size: 13.5px; font-weight: 600; opacity: 0; visibility: hidden; transition: opacity .22s ease, transform .3s var(--kt-ease), visibility .22s; } .k-toast.is-visible, .kt-cardtoast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }