/* Шрифты свои, из /fonts. До 29.08.2026 обе страницы подключали их со стилевого файла Google — то есть браузер каждого посетителя и каждого вошедшего пользователя сам ходил на серверы Google и отдавал им IP, User-Agent и адрес открытой страницы, ещё до первого нажатия. На странице о персональных данных про этот канал не было сказано ни слова. Оба шрифта переменные: один файл покрывает всю линейку насыщенности, поэтому объявлений четыре, а не десяток. unicode-range оставлен от Google — по нему латинский файл не качается, пока латиница не встретилась. Пути относительные: файл лежит рядом с каталогом fonts и на лендинге (/var/www/callen), и в приложении (/var/www/app). Абсолютный /fonts/… сломался бы на предпросмотре из подкаталога. Лицензия — fonts/README.md. */ @font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/onest-cyrillic.woff2) format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/onest-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304, U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap; src:url(fonts/manrope-cyrillic.woff2) format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap; src:url(fonts/manrope-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304, U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* Callen — единственный файл токенов на лендинг и приложение. Канонический экземпляр лежит здесь, в web/; app/tokens.css — его точная копия, потому что лендинг и приложение выкладываются в разные каталоги на сервере (/var/www/callen и /var/www/app) и общего пути у них нет. Правим всегда этот файл, копию обновляем командой: cp web/tokens.css app/tokens.css Здесь только значения: цвета, шрифты, размеры, отступы, радиусы, тени и длительности. Ни одного правила для конкретного элемента — иначе файл перестанет быть общим и разъедется вслед за экранами. Две темы. Тёмная — основная и лежит в :root; светлая включается системной настройкой и переключателем в профиле (атрибут data-theme на ). Класс .theme-dark возвращает тёмную палитру внутри светлой темы: им помечен экран звонка, который тёмный всегда. Работает это не на специфичности, а на наследовании переменных: у элемента с .theme-dark свои значения, и весь его поддерево берёт их, что бы ни стояло на :root. */ :root, .theme-dark { color-scheme: dark; /* поверхности */ --bg: #14151A; --surface: #1B1D24; --surface-2: #22252E; --line: #2B2F3A; --line-soft: #23262F; --scrim: rgba(9,10,13,.72); --glass: rgba(27,29,36,.72); /* текст */ --ink: #F5F0E8; --muted: #9AA0AC; --dim: #71767F; /* акцент — один и тот же оранжевый в обеих темах */ --accent: #F2994A; --accent-text: #FFB871; --accent-soft: rgba(242,153,74,.13); --accent-line: rgba(242,153,74,.42); --on-accent: #1A1006; --grad-accent: linear-gradient(135deg,#FFB166 0%,#F2994A 55%,#E0813A 100%); --btn-bg: var(--grad-accent); --btn-ink: #1A1006; /* состояния */ --ok: #4CC38A; --ok-text: #6FD3A3; --ok-soft: rgba(76,195,138,.12); --ok-line: rgba(76,195,138,.38); --danger: #D9483B; --danger-text: #F0A79F; --danger-soft: rgba(217,72,59,.12); --danger-line: rgba(217,72,59,.42); /* тени: карточка лежит, поднятая светится акцентом */ --sh-card: 0 1px 1px rgba(0,0,0,.5), 0 14px 34px -22px rgba(0,0,0,.9); --sh-up: 0 2px 2px rgba(0,0,0,.5), 0 22px 48px -24px rgba(0,0,0,.95); --sh-lift: 0 0 0 1px var(--accent-line), 0 18px 40px -20px rgba(242,153,74,.32), 0 22px 46px -28px rgba(0,0,0,.9); --sh-glow: 0 10px 26px -12px rgba(242,153,74,.75); } /* Светлая тема: тёплый кремовый, не белый. Тот же оранжевый, но для текста берётся его тёмный извод — #F2994A на креме не читается. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #F5EDE2; --surface: #FDF9F3; --surface-2: #F3E9DB; --line: #E7DACA; --line-soft: #EFE5D7; --scrim: rgba(36,28,22,.55); --glass: rgba(253,249,243,.82); --ink: #241C16; --muted: #6E6357; --dim: #8C8172; --accent: #F2994A; --accent-text: #A25C10; --accent-soft: #F6DCBB; --accent-line: rgba(162,92,16,.34); --on-accent: #241C16; /* Главная кнопка в светлой теме тёмная, а не оранжевая: на кремовом листе оранжевая заливка спорит с персиковыми плашками и перестаёт быть единственным сильным пятном. В тёмной теме всё ровно наоборот. */ --btn-bg: #241C16; --btn-ink: #FDF9F3; --ok: #2E9E6B; --ok-text: #1E7A50; --ok-soft: rgba(46,158,107,.13); --ok-line: rgba(46,158,107,.40); --danger: #C63B2F; --danger-text: #A02A20; --danger-soft: rgba(198,59,47,.10); --danger-line: rgba(198,59,47,.38); --sh-card: 0 1px 1px rgba(84,64,36,.05), 0 10px 24px -20px rgba(84,64,36,.40); --sh-up: 0 2px 3px rgba(84,64,36,.07), 0 18px 38px -22px rgba(84,64,36,.45); --sh-lift: 0 0 0 1px var(--accent-line), 0 14px 30px -20px rgba(162,92,16,.38), 0 16px 34px -26px rgba(84,64,36,.45); --sh-glow: 0 10px 22px -14px rgba(36,28,22,.55); } } /* Переключатель в профиле. Повтор значений, а не @import: файл должен оставаться одним и читаться сверху вниз без переходов по ссылкам. */ :root[data-theme="light"] { color-scheme: light; --bg: #F5EDE2; --surface: #FDF9F3; --surface-2: #F3E9DB; --line: #E7DACA; --line-soft: #EFE5D7; --scrim: rgba(36,28,22,.55); --glass: rgba(253,249,243,.82); --ink: #241C16; --muted: #6E6357; --dim: #8C8172; --accent: #F2994A; --accent-text: #A25C10; --accent-soft: #F6DCBB; --accent-line: rgba(162,92,16,.34); --on-accent: #241C16; /* Главная кнопка в светлой теме тёмная, а не оранжевая: на кремовом листе оранжевая заливка спорит с персиковыми плашками и перестаёт быть единственным сильным пятном. В тёмной теме всё ровно наоборот. */ --btn-bg: #241C16; --btn-ink: #FDF9F3; --ok: #2E9E6B; --ok-text: #1E7A50; --ok-soft: rgba(46,158,107,.13); --ok-line: rgba(46,158,107,.40); --danger: #C63B2F; --danger-text: #A02A20; --danger-soft: rgba(198,59,47,.10); --danger-line: rgba(198,59,47,.38); --sh-card: 0 1px 1px rgba(84,64,36,.05), 0 10px 24px -20px rgba(84,64,36,.40); --sh-up: 0 2px 3px rgba(84,64,36,.07), 0 18px 38px -22px rgba(84,64,36,.45); --sh-lift: 0 0 0 1px var(--accent-line), 0 14px 30px -20px rgba(162,92,16,.38), 0 16px 34px -26px rgba(84,64,36,.45); --sh-glow: 0 10px 22px -14px rgba(36,28,22,.55); } /* Тёмный островок внутри светлой страницы должен ещё и перекрасить текст: цвет наследуется от body и сам собой за переменными не пойдёт. */ .theme-dark{color:var(--ink)} /* Общее для обеих тем: то, что от цвета не зависит. */ :root { /* шрифты: Onest — заголовки, Manrope — текст. Третьего нет намеренно */ --font-display: 'Onest', system-ui, sans-serif; --font-text: 'Manrope', system-ui, sans-serif; /* размеры текста */ --fs-xs: 12px; --fs-sm: 13.5px; --fs-md: 15px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 21px; --fs-2xl: 26px; --fs-3xl: clamp(28px, 4.2vw, 38px); --fs-display: clamp(38px, 7.5vw, 70px); /* отступы */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px; --sp-7: 40px; --sp-8: 56px; --sp-9: 80px; /* радиусы */ --rad-sm: 10px; --rad-md: 14px; --rad-lg: 20px; --rad-xl: 28px; --rad-pill: 999px; /* движение: 200–250 мс на переход экрана, 40 мс задержки между карточками */ --dur-fast: 120ms; --dur: 200ms; --dur-slow: 250ms; /* Появление секции на лендинге: амплитуда там больше, чем у смены экрана в приложении, и на 250 мс такой путь выглядит рывком. */ --dur-reveal: 420ms; --ease: cubic-bezier(.2,.7,.3,1); --ease-out: cubic-bezier(.16,1,.3,1); /* Мягкий разгон и мягкое торможение. Для длинных переходов, где резкий старт --ease заметен: свет на карточке разгорается секунду, и начинаться он должен незаметно. */ --ease-soft: cubic-bezier(.4,0,.2,1); --stagger: 40ms; --stagger-slow: 80ms; /* карточки персонажей: их шесть, и лесенка длиннее */ /* раскладка */ --tap: 48px; /* меньше этого пальцем не попасть */ /* Колонка контента на десктопе. Тысяча сорок, а не 960: на 960 вторая колонка «Сегодня» выходила уже карточки и складывалась в столбик подписей. Шире 1080 не берём — строка текста перестаёт читаться. */ --content: 1040px; --rail: 96px; /* узкая панель навигации слева */ --tabs: 64px; /* нижняя навигация на телефоне */ }