/* ============================================================ ДИЗАЙН-СИСТЕМА «Поводок» — токены Единственный источник значений для портала И админки: оба подключают этот файл первым, поэтому перекрасить бренд можно правкой одного слоя, а не двух наборов CSS. Слой 1 — примитивы (сырые значения бренда). Слой 2 — семантические алиасы: компоненты используют ИХ, а не сырьё. ============================================================ */ /* ============================================================ Шрифт. Golos Text лежит у нас, а не приезжает с fonts.gstatic.com: аудитория портала российская, и до недавнего внешнего origin у неё уходили два рукопожатия (DNS + TLS) и один блокирующий рендер запрос ещё до первой отрисовки — при том, что доступность стороннего CDN в RU никем не гарантирована. Файл один на все начертания: на Google Fonts Golos Text вариативный, и 400/500/700/800 берутся из одного файла подсета. Поэтому здесь четыре файла (по подсетам), а не шестнадцать (вес × подсет). unicode-range обязателен: без него браузер тянет все четыре подсета, хотя русской странице нужны ровно cyrillic и latin. Диапазоны взяты из ответа Google Fonts дословно. Пути относительные — ManifestStaticFilesStorage при collectstatic переписывает их на хэшированные имена сам. ============================================================ */ @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 800; /* вариативная ось wght */ font-display: swap; src: url("../fonts/golos-text-cyrillic.2b8fbbb33a14.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/golos-text-latin.f57df9832ab8.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: "Golos Text"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/golos-text-cyrillic-ext.c7635a080bad.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/golos-text-latin-ext.b0503aa2cc13.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Палитра из логотипа: фиолетовый #7d5bf7, индиго #27276c, лаванда */ :root { /* --- Слой 1: палитра бренда --- */ --violet: #7d5bf7; --violet-deep: #6a45f0; --violet-soft: #9d84f9; --indigo: #27276c; --ink: #11141f; --muted: #625f78; --faint: #726e88; /* было #918da6 (3.2:1) — не проходило AA; теперь 4.9:1 */ --lav-1: #f5f3fd; --lav-2: #e7e3fc; --lav-3: #d9d2fa; /* Фон страницы холоднее белого: при #fdfdff белые карточки отличались от подложки на 2 единицы из 255 и визуально сливались с ней. */ --bg: #f2f0fa; --card: #ffffff; --line: #eae7f6; --amber-bg: #fff6e8; --amber-ink: #8a5b00; --rose-bg: #fdeef2; --rose-ink: #a52a4a; --green-bg: #eaf7ef; --green-ink: #1d7a45; /* --- Слой 2: семантические роли (использовать в компонентах) --- */ --accent: var(--violet); /* фон акцентных кнопок, активные состояния */ --accent-strong: var(--violet-deep); /* ссылки, ховер акцента */ --accent-soft: var(--violet-soft); /* кольцо фокуса, тонкие обводки */ --accent-ink: var(--indigo); /* глубокий бренд для текста на светлом */ --on-accent: #ffffff; /* текст на акцентной заливке */ --page: var(--bg); /* фон страницы */ --surface: var(--card); /* карточки, панели */ --surface-1: var(--lav-1); /* мягкая подложка (ghost-кнопки, hover-строки) */ --surface-2: var(--lav-2); /* подложка активнее */ --surface-3: var(--lav-3); /* обводка при наведении на карточку */ --border: var(--line); --text: var(--ink); /* основной текст */ --text-muted: var(--muted); /* вторичный текст */ --text-subtle: var(--faint); /* счётчики, мета, крошки */ --focus: var(--violet-soft); /* цвет кольца фокуса */ /* --- Шкала отступов (4px-сетка) --- */ --space-2xs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 20px; --space-2xl: 24px; --space-3xl: 32px; --space-4xl: 40px; --space-5xl: 48px; --space-6xl: 64px; /* --- Типографика --- */ --font: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Ступени кегля. До этого по файлу было 83 объявления и 31 разный размер на страницах: между 12.5 и 16px помещалось семнадцать значений с шагом 0.7–1.5%. Такой «шаг» глаз не читает как иерархию, он читает его как грязь. */ --text-2xs: 0.75rem; /* 12 — счётчики, uppercase-метки */ --text-xs: 0.8125rem; /* 13 — мета, даты, подписи */ --text-sm: 0.875rem; /* 14 — вторичный текст и UI */ --text-base: 1rem; /* 16 — основной текст */ --text-lg: 1.125rem; /* 18 — лиды, названия карточек */ --text-xl: 1.375rem; /* 22 — h3, крупные числа */ --text-3xl: 2.5rem; /* 40 — инициалы в крупном аватаре */ /* Заголовки: один текучий корень, остальные — его деления. Раньше у каждого уровня был свой коэффициент vw (3.4 / 2.4 / фикс), поэтому отношение h1/h2 плыло от 2.17 на десктопе до 1.52 на планшете — контраст заголовков зависел от ширины окна. Через деление пропорция постоянна на любой ширине. */ --t-display: clamp(1.75rem, 1rem + 2vw, 2.5rem); /* 28 → 40 */ --t-h1: var(--t-display); --t-h2: calc(var(--t-display) / 1.4); /* 20 → 28.6 */ /* h3 не текучий: на 360px деление текучего корня давало 15.8px — мельче основного текста. Заголовок, который мельче абзаца, — не заголовок. */ --t-h3: var(--text-lg); /* 18 */ --leading-tight: 1.2; /* крупные заголовки */ --leading-snug: 1.3; /* мелкие заголовки, названия в карточках */ --leading-normal: 1.5; /* интерфейсный текст */ --leading-relaxed: 1.65; /* длинный читаемый текст */ /* --- Радиусы --- */ /* Ступень для мелких контролов внутри блоков: чипы фасетов, плашки, кнопки фильтров. По файлу она уже существовала явочным порядком — 8px стояли сырым числом в шести местах, — просто не была названа. */ --r-xs: 8px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px; /* --- Тени: тонированы в индиго, без фиолетового «AI-глоу» --- */ --shadow-sm: 0 1px 2px rgba(39, 39, 108, 0.06), 0 2px 8px rgba(39, 39, 108, 0.05); --shadow-md: 0 2px 4px rgba(39, 39, 108, 0.06), 0 10px 28px rgba(39, 39, 108, 0.09); --shadow-lg: 0 4px 10px rgba(39, 39, 108, 0.07), 0 18px 48px rgba(39, 39, 108, 0.12); /* --- Движение --- */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --t-fast: 140ms; --t-med: 200ms; /* --- Ступени ширины --- Шкала намеренно короткая: 400 / 560 / 700 / 880 / 1000 / 1100. До неё по файлам было двадцать два разных порога (420, 460, 480, 560, 620, 700, 701, 720, 760, 860, 880, 881, 900, 901, 980, 1080, 1081, 1100, 1240, 1241, 1360, 1699). Это та же болезнь, что была у кеглей выше: между 700 и 760 помещалось четыре значения, и ни одно из них не отвечало на вопрос «что именно здесь перестаёт помещаться». У каждой ступени своя работа — это и есть проверка, что она нужна: 400 узкий телефон — 4.7″ и старые Android 560 телефон — граница одноколоночной раскладки 700 крупный телефон и портретный планшет 880 ГРАНИЦА СЛОЁВ — ниже неё раскладку ведёт mobile.css 1000 сетки карточек — четыре колонки перестают помещаться 1100 шапка и подвал — сжимаются логотип и колонки ссылок 1000 и 1100 стоят рядом намеренно: это разные решения о разных вещах. Ступень «на всякий случай», которой нечего назвать, — лишняя. Значения нельзя вынести в переменные: @media (max-width: var(--bp-sm)) не работает ни в одном браузере — условие медиазапроса вычисляется до каскада, а custom properties живут в каскаде. Спецификация custom media (@custom-media) осталась черновиком и требует сборщика, которого у проекта намеренно нет. Поэтому шкала — договорённость, а не механизм: новый порог берём отсюда, а не придумываем. Парные min-width пишем как N+1 (881, 1101), чтобы диапазоны стыковались без дырки и без нахлёста в один пиксель. Верхних порогов больше нет вовсе: .container упирается в 1140px, поэтому при любом окне шире ~1180px содержимое имеет одну и ту же ширину, и медиазапрос на 1240 или 1699 менял раскладку элемента, ширина которого не менялась. */ --header-h: 68px; --anchor-nav-h: 50px; /* высота прилипшей строки разделов */ --cl-card-overlap: 56px; /* насколько карточка клиники наезжает на полотно */ /* --- Мобильная раскладка --- Портал на телефоне работает как приложение: снизу панель вкладок, сверху компактная шапка, всплывающие слои выезжают листом. Высоты нужны в токенах, потому что от них считают отступы страницы, точки прилипания и место под панель — см. mobile.css. */ --tabbar-h: 56px; /* панель вкладок без учёта безопасной зоны */ /* Безопасные зоны iPhone (вырез, полоса жеста). env() внутри токена, чтобы не повторять fallback в двух десятках мест; в браузерах без поддержки подставляется 0px. */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); /* Полная высота нижней панели вместе с полосой жеста — ею отбивается низ страницы, чтобы подвал не уезжал под панель. */ --tabbar-total: calc(var(--tabbar-h) + var(--safe-b)); --sheet-r: 20px; /* скругление верхних углов выезжающего листа */ /* Минимальная тач-цель. 44px — граница, ниже которой палец промахивается; держим её единым числом, чтобы «чуть-чуть меньше» не расползлось по файлу. */ --tap: 44px; }