/* ============================================================ MATERIAL 3 (MATERIAL YOU) — ТОКЕНЫ ДИЗАЙН-СИСТЕМЫ Тональные палитры выведены из seed-цвета #1A73E8 (чистый синий). Тёмная тема — нейтральная почти-чёрная, с расширенными шагами тонов. ============================================================ */ :root { /* --- reference typefaces --- */ --md-ref-typeface-plain: 'Noto Sans', system-ui, 'Segoe UI', sans-serif; --md-ref-typeface-brand: 'Noto Sans', system-ui, 'Segoe UI', sans-serif; --md-ref-typeface-greek: 'Noto Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Times New Roman', serif; /* Греческая антиква не покрывает огласовку: в 'Noto Serif' нет ни одного знака иврита, и браузер подставил бы под каждое слово что придётся. */ --md-ref-typeface-hebrew: 'Noto Serif Hebrew', 'SBL Hebrew', 'Ezra SIL', 'Times New Roman', serif; /* Рукописный иврит — для курсива в упражнении «Написание буквы». Гверет Левин набрана на тех же кодовых точках, что и печатные буквы (включая конечные ך ם ן ף ץ), поэтому отдельных данных для курсива не нужно: в разметке та же буква, отличается только гарнитура. Токен, а не имя семейства по месту, — имя семейства должно стоять в одном месте. */ --md-ref-typeface-cursive-hebrew: 'Gveret Levin', cursive; /* --- шрифт интерфейса и русского текста --- */ /* Выбор пользователя (экран настроек) кладёт один токен --font-ru на — js/fontpicker.js. По умолчанию он равен прежнему стеку, поэтому без выбора не меняется ничего, и «системный» вариант — это ровно то, что было раньше. Свои имена семейств у самодельных гарнитур (суффикс … Anticus), а не имена самих шрифтов, и на то две причины. Первая: 'Noto Sans' уже загружен из Google — одноимённое семейство подменило бы его, в том числе у «системного» варианта, который обязан остаться прежним. Вторая: фамилия с суффиксом не даёт локально установленному шрифту перебить наши файлы, от которых зависит офлайн. Текст изучаемого языка сюда не смотрит: у него собственный токен --md-ref-typeface-script, который берут .script/.greek/.hebrew. */ --font-ru-system: var(--md-ref-typeface-plain); --font-ru-pt-sans: 'PT Sans Anticus', var(--md-ref-typeface-plain); --font-ru-noto-sans: 'Noto Sans Anticus', var(--md-ref-typeface-plain); --font-ru-inter: 'Inter Anticus', var(--md-ref-typeface-plain); --font-ru-pt-serif: 'PT Serif Anticus', var(--md-ref-typeface-plain); --font-ru-literata: 'Literata Anticus', var(--md-ref-typeface-plain); --font-ru-source-serif-4: 'Source Serif 4 Anticus', var(--md-ref-typeface-plain); --font-ru: var(--font-ru-system); /* --- письмо изучаемого языка --- */ /* Два токена вместо двух наборов правил: элемент, в котором лежит текст изучаемого языка, объявляет их один раз — а какой именно это язык, решают атрибуты data-script и data-script-dir на . Их ставит applyCourseChrome() (js/course.js) по полям script и dir курса из data/courses.js, поэтому новый курс — это запись в реестре плюс, если письмо новое, шрифт здесь. */ --md-ref-typeface-script: var(--md-ref-typeface-greek); --md-ref-script-direction: ltr; /* Физическая сторона, соответствующая направлению письма. Нужна там, где start/end использовать нельзя: в ячейках таблиц стоит unicode-bidi: plaintext, и при нём start разрешается по направлению текста САМОЙ ячейки, а не таблицы. Русский заголовок тогда прижимается влево, еврейская форма под ним — вправо, и колонка расходится с собственной шапкой. Подробнее — в styles/screens.css у .md-table-scroll. */ --md-ref-script-align: left; /* Нижняя граница кегля для текста изучаемого языка. Огласовка иврита — это точки под буквой и внутри неё, и мелкий кегль их съедает: на 15px, каким набраны фишки банка слов, дагеш сливается с буквой, в которой стоит, а камец от сегола не отличается — при том что упражнения главы 3 только об этом различии и спрашивают. Греческие диакритики стоят над строкой и столько места не требуют, поэтому по умолчанию 0: max() с ним ничего не меняет. Применяется там, где текст изучаемого языка набран мелко; крупное (слово на карточке, условие задания) и так выше границы. 0px, а НЕ 0: в max() все слагаемые должны быть одного типа, и голый ноль — это , а не длина. max(1.0625rem, 0) браузер отвергает целиком, и правило пропадает вместе с кеглем — в греческом курсе, где предел равен нулю, весь мелкий текст молча съезжал на унаследованный размер, а в еврейском (1.25rem) работал. Единица измерения тут — не косметика. */ --md-ref-script-min-size: 0px; /* --- масштаб текста --- */ /* Три ползунка в настройках, но множителя в вёрстке два, и это не одно и то же. Общий масштаб применяется к font-size корня (styles/base.css), а вся шкала типографики M3 задана в rem — значит он уже доехал до всего, включая текст изучаемого языка. Поэтому греческий и еврейский множители здесь ОТНОСИТЕЛЬНЫЕ: это добавка поверх общего, а не размер сам по себе. Считает её js/fontscale.js как «нужный / общий», и при «как общий» она равна ровно 1. По умолчанию общий — единица, а оба языка стоят на верхнем делении своего ползунка, 1.6: изучаемый текст и есть предмет, и по умолчанию он крупнее русского вокруг него (FONT_SCALE_DEFAULT в js/fontscale.js). Значения здесь совпадают с тем, что поставит initFontScale(), — иначе до запуска скриптов текст успел бы показаться мелким и дёрнуться. */ --app-font-scale: 1; --app-greek-scale: 1.6; --app-hebrew-scale: 1.6; /* Какой из двух берёт текст изучаемого языка — решает курс, ровно как со шрифтом и направлением ниже. Разметке ветвиться не нужно. */ --md-ref-script-scale: var(--app-greek-scale); /* Шаг кегля: во сколько раз текст изучаемого языка крупнее русского вокруг него. Это не ползунок — ползунок выше, — а постоянная величина, и она своя у каждого письма: иврит мельче не набрать, огласовка сливается с буквой, а греческое слово длиннее, и та же прибавка заставила бы его переноситься в каждой второй строке. Итоговый кегль — произведение двух: шаг × множитель ползунка. Поэтому ползунок продолжает работать в обе стороны, а величина шага ничего о нём не знает: у иврита при «как общий» выходит 1.6 × 1.2 = 1.92. Токен ставят себе только те правила, где текст изучаемого языка — сам предмет (проза материала, условие задания, варианты ответа); мелкий текст — фишки банка слов, ячейки парадигм, разбор ошибок — обходится пределом кегля ниже. */ --md-ref-script-size-greek: 1.5; --md-ref-script-size-hebrew: 1.6; /* Который из двух берёт текст — решает курс, ровно как со шрифтом и направлением: атрибут на ставит applyCourseChrome(). */ --md-ref-script-size: var(--md-ref-script-size-greek); /* Кегль словарной статьи — исключение из всего, что сказано выше, и намеренное: слово в словаре не читают, а узнают. Оно стоит в списке из десятков таких же строк, и это список, который листают, а не читают; поэтому кегль у него закреплён в px и не едет ни за общим ползунком, ни за языковым (просьба владельца). При шаге и ползунке по умолчанию прежняя формула давала 38.4px у греческого и 40.96px у иврита, а строка вырастала до 66/69px — редко и пестро для словаря. 24/40px: у греческого строка укладывается в M3-минимум списка (56px), у иврита выходит заметно выше (~68px) — но так и просили (просьба владельца), и изучаемое слово главенствует над русским переводом рядом (0.875rem). Греческие 24px выбраны по длине: самое длинное слово с артиклем должно помещаться в строку, а не разрываться на «артикль» и «слово» (артикль потому и приклеен к слову неразрывным пробелом — js/vocab.js и js/lesson.js). Иврит крупнее греческого на 16px, и это не косметика: огласовка сидит внутри буквы и под ней, и тот же кегль читается теснее — при равном кегле ивритская строка выглядела мельче греческой, а просили обратное. Значение своё у каждого письма, потому что ветку выбирает курс (data-script на ), а не разметка, — тем же приёмом, что у гарнитуры, шага и направления. Предел огласовки (--md-ref-script-min-size) тут не нужен: 40px выше его 20px при любом положении ползунков, а сам он не ползунок. */ --md-ref-script-headword-size: 24px; /* Пример употребления — тот же случай, что статья выше, и по той же причине: он живёт в карточке под строкой словаря и в «в словосочетании» под карточкой, а список листают, а не читают подряд. Кегль поэтому тоже закреплён в px и со своим значением у каждого письма. Прежняя формула давала 40.8px у греческого и 32px у иврита (а в раскрытой статье — те же 40.8), то есть пример перекрывал саму статью. 22/24px — шаг ниже статьи (26/40): слово видно сразу, пример читается вторым планом. Ивритские 24px при этом выше предела огласовки (20px), поэтому пример с огласовкой читается и на мелком положении ползунка — впрочем, ползунков тут больше нет. */ --md-ref-script-example-size: 22px; /* Кегль буквы в таблице алфавита (греческий урок 1 и глава 1 иврита) — тот же случай, что статья и пример: букву в таблице узнают, а не читают подряд, поэтому кегль закреплён в px и не едет за ползунками размера. Значение у каждого письма своё, потому что ветку выбирает курс (data-script на ), а не разметка. Греческие 44.8px — тот кегль, что давала прежняя формула (1.75rem × 1.6); на экране по умолчанию ничего не изменилось. Ивриту нужно больше: в греческой ячейке стоят прописная со строчной («Αα») и она вдвое шире, а буква иврита в той же ячейке — один узкий знак, и при равном кегле ивритская таблица выглядела мельче греческой, а просили обратное (просьба владельца). 1.25 × 44.8 ≈ 56px выравнивает высоту буквы с греческой парой. Предел огласовки не нужен — 56px выше его 20px. */ --md-ref-script-alphabet-size: 44.8px; /* --- shape scale --- */ --md-sys-shape-corner-none: 0px; --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-large-increased: 20px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-extra-large-increased: 32px; --md-sys-shape-corner-full: 9999px; /* --- motion: easing --- */ --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1); --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); /* --- motion: duration --- */ --md-sys-motion-duration-short1: 50ms; --md-sys-motion-duration-short2: 100ms; --md-sys-motion-duration-short3: 150ms; --md-sys-motion-duration-short4: 200ms; --md-sys-motion-duration-medium1: 250ms; --md-sys-motion-duration-medium2: 300ms; --md-sys-motion-duration-medium3: 350ms; --md-sys-motion-duration-medium4: 400ms; --md-sys-motion-duration-long1: 450ms; --md-sys-motion-duration-long2: 500ms; --md-sys-motion-duration-long3: 550ms; --md-sys-motion-duration-long4: 600ms; /* --- state layer opacities --- */ --md-sys-state-hover-opacity: 0.08; --md-sys-state-focus-opacity: 0.10; --md-sys-state-pressed-opacity: 0.10; --md-sys-state-disabled-content-opacity: 0.38; --md-sys-state-disabled-container-opacity: 0.12; /* --- colour roles: light --- */ --md-sys-color-primary: #0B57D0; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #D3E3FD; --md-sys-color-on-primary-container: #041E49; --md-sys-color-secondary: #565E71; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #DAE2F9; --md-sys-color-on-secondary-container: #131C2B; --md-sys-color-tertiary: #5B5891; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #E3DFFF; --md-sys-color-on-tertiary-container: #171634; --md-sys-color-error: #BA1A1A; --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #FFDAD6; --md-sys-color-on-error-container: #410002; --md-sys-color-surface: #FAFAFD; --md-sys-color-on-surface: #131316; --md-sys-color-surface-variant: #E1E2EC; --md-sys-color-on-surface-variant: #44474E; --md-sys-color-surface-dim: #D9DAE0; --md-sys-color-surface-bright: #FAFAFD; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #F3F4F8; --md-sys-color-surface-container: #EDEEF3; --md-sys-color-surface-container-high: #E7E8EE; --md-sys-color-surface-container-highest: #E1E3E9; --md-sys-color-outline: #74777F; --md-sys-color-outline-variant: #C4C6D0; --md-sys-color-inverse-surface: #2F3033; --md-sys-color-inverse-on-surface: #F1F0F4; --md-sys-color-inverse-primary: #A8C7FA; --md-sys-color-shadow: #000000; --md-sys-color-scrim: #000000; /* --- extended custom colour: «успех» (правильный ответ) --- */ --md-extended-color-success: #266C29; --md-extended-color-on-success: #FFFFFF; --md-extended-color-success-container: #ABF5A2; --md-extended-color-on-success-container: #002204; /* --- elevation (light) --- */ --md-sys-elevation-level0: none; --md-sys-elevation-level1: 0px 1px 2px rgba(0,0,0,0.16), 0px 1px 3px 1px rgba(0,0,0,0.08); --md-sys-elevation-level2: 0px 1px 2px rgba(0,0,0,0.16), 0px 2px 6px 2px rgba(0,0,0,0.08); --md-sys-elevation-level3: 0px 1px 3px rgba(0,0,0,0.16), 0px 4px 8px 3px rgba(0,0,0,0.08); --md-sys-elevation-level4: 0px 2px 3px rgba(0,0,0,0.16), 0px 6px 10px 4px rgba(0,0,0,0.08); --md-sys-elevation-level5: 0px 4px 4px rgba(0,0,0,0.16), 0px 8px 12px 6px rgba(0,0,0,0.08); color-scheme: light; } [data-theme="dark"] { --md-sys-color-primary: #A8C7FA; --md-sys-color-on-primary: #062E6F; --md-sys-color-primary-container: #0842A0; --md-sys-color-on-primary-container: #D3E3FD; --md-sys-color-secondary: #BEC6DC; --md-sys-color-on-secondary: #283141; --md-sys-color-secondary-container: #3E4759; --md-sys-color-on-secondary-container: #DAE2F9; --md-sys-color-tertiary: #C5C0F0; --md-sys-color-on-tertiary: #2D2A5D; --md-sys-color-tertiary-container: #434074; --md-sys-color-on-tertiary-container: #E3DFFF; --md-sys-color-error: #FFB4AB; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000A; --md-sys-color-on-error-container: #FFDAD6; /* нейтральная почти-чёрная база; шаги между уровнями увеличены, чтобы карточки и панели явно отделялись от фона */ --md-sys-color-surface: #0E1116; --md-sys-color-on-surface: #F3F4F8; --md-sys-color-surface-variant: #44474E; --md-sys-color-on-surface-variant: #C7CBD4; --md-sys-color-surface-dim: #0E1116; --md-sys-color-surface-bright: #343841; --md-sys-color-surface-container-lowest: #090B0F; --md-sys-color-surface-container-low: #171A20; --md-sys-color-surface-container: #1B1F26; --md-sys-color-surface-container-high: #262A33; --md-sys-color-surface-container-highest: #313640; --md-sys-color-outline: #A0A7B4; --md-sys-color-outline-variant: #4A4E57; --md-sys-color-inverse-surface: #E3E2E6; --md-sys-color-inverse-on-surface: #2F3033; --md-sys-color-inverse-primary: #0B57D0; --md-extended-color-success: #90D889; --md-extended-color-on-success: #00390A; --md-extended-color-success-container: #0C5214; --md-extended-color-on-success-container: #ABF5A2; --md-sys-elevation-level1: 0px 1px 2px rgba(0,0,0,0.30), 0px 1px 3px 1px rgba(0,0,0,0.15); --md-sys-elevation-level2: 0px 1px 2px rgba(0,0,0,0.30), 0px 2px 6px 2px rgba(0,0,0,0.15); --md-sys-elevation-level3: 0px 1px 3px rgba(0,0,0,0.30), 0px 4px 8px 3px rgba(0,0,0,0.15); --md-sys-elevation-level4: 0px 2px 3px rgba(0,0,0,0.30), 0px 6px 10px 4px rgba(0,0,0,0.15); --md-sys-elevation-level5: 0px 4px 4px rgba(0,0,0,0.30), 0px 8px 12px 6px rgba(0,0,0,0.15); color-scheme: dark; } [data-theme="sepia"] { /* Тёплая «бумажная» палитра — как страница старой книги. Схема светлая (color-scheme: light) и построена по тем же правилам M3, что и :root: семь тональных палитр с постоянными тоном/насыщенностью, из которых роли берутся по табличным тонам светлой схемы (акцент 40, on-акцент 100, container 90, on-container 10; поверхности 98/96/94/92/90/87, контур 50/80, инверсия 20/95/80). Палитры: primary — золотисто-коричневая (тон охры), secondary — она же вполовину насыщенности, tertiary — приглушённый винный, error — кирпично-красная, neutral / neutral-variant — пергамент. Третичная палитра нарочно уведена из тёплого сектора: и она, и error, и «успех» встречаются на одном экране (разбор молитвы рядом с разбором ошибок), а на тоне 90 весь тёплый сектор вырождается в один и тот же бледно-персиковый — терракота и error-container отличались на ΔE 4,6, то есть не отличались. Вино даёт ΔE 17 против error и 51 против «успеха». */ --md-sys-color-primary: #82542D; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #FFDCC3; --md-sys-color-on-primary-container: #2B1700; --md-sys-color-secondary: #725947; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #FBDDC8; --md-sys-color-on-secondary-container: #2A1702; --md-sys-color-tertiary: #824C75; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #FFD7F3; --md-sys-color-on-tertiary-container: #37052E; --md-sys-color-error: #AE2F2D; --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #FFDAD5; --md-sys-color-on-error-container: #3C0700; /* Лестница поверхностей идёт сверху вниз, как в светлой схеме: страница (surface, тон 98) — самая светлая, а чем выше уровень контейнера, тем он темнее. Бумажный оттенок держится не темнотой, а тем, что вся нейтральная палитра стоит на тёплом тоне. */ --md-sys-color-surface: #FFF9E9; --md-sys-color-on-surface: #1F1B0E; --md-sys-color-surface-variant: #ECE2C6; --md-sys-color-on-surface-variant: #4D462F; --md-sys-color-surface-dim: #E0DAC9; --md-sys-color-surface-bright: #FFF9E9; /* Тон 99, а не 100: чистый белый — единственный цвет без насыщенности, и на пергаменте он выпадал бы из палитры белой заплатой. */ --md-sys-color-surface-container-lowest: #FFFCF4; --md-sys-color-surface-container-low: #FAF3E2; --md-sys-color-surface-container: #F4EDDD; --md-sys-color-surface-container-high: #EEE8D7; --md-sys-color-surface-container-highest: #E9E2D1; --md-sys-color-outline: #7F775E; --md-sys-color-outline-variant: #D0C6AB; --md-sys-color-inverse-surface: #343023; --md-sys-color-inverse-on-surface: #F7F0DF; --md-sys-color-inverse-primary: #F5BB8F; --md-extended-color-success: #356A24; --md-extended-color-on-success: #FFFFFF; --md-extended-color-success-container: #BAF2A2; --md-extended-color-on-success-container: #0F2000; /* shadow и scrim не переопределяем: роль тени в M3 чёрная во всех схемах, а :root уже задал её — как и уровни elevation, которые сепии, светлой схеме, подходят без изменений. */ color-scheme: light; } /* ============================================================ ПИСЬМО ИЗУЧАЕМОГО ЯЗЫКА ============================================================ Тема и письмо разведены нарочно: тем три, а курсов два, и пересечения между ними нет. Атрибуты ставит applyCourseChrome() (js/course.js). data-script — какой шрифт брать для текста изучаемого языка; data-script-dir — в какую сторону этот текст пишется. Интерфейс от них не зависит: подписи, кнопки и меню остаются русскими и слева направо в любом курсе. Разворачивается только то, что несёт текст изучаемого языка, — см. .script в styles/base.css. */ :root[data-script="hebrew"] { --md-ref-typeface-script: var(--md-ref-typeface-hebrew); --md-ref-script-min-size: 1.25rem; --md-ref-script-scale: var(--app-hebrew-scale); --md-ref-script-size: var(--md-ref-script-size-hebrew); --md-ref-script-headword-size: 40px; --md-ref-script-example-size: 24px; --md-ref-script-alphabet-size: 56px; } :root[data-script-dir="rtl"] { --md-ref-script-direction: rtl; --md-ref-script-align: right; } /* ============================================================ СВОИ ШРИФТЫ ИНТЕРФЕЙСА (fonts/) ============================================================ Приложение — PWA и обязано работать офлайн, поэтому шрифты лежат у нас, а не тянутся с внешней CDN: @font-face с локальным src и font-display: swap, чтобы текст не пропадал, пока файл грузится. Внешние ссылки Google (Material Symbols, греческий и ивритский Noto) остаются как были — здесь только интерфейсные гарнитуры, из которых выбирает пользователь. Только латиница и кириллица: интерфейс русский, больше этим шрифтам ничего не нужно, а полный набор весит кратно больше. Каждое семейство — не больше двух файлов (latin + cyrillic) с unicode-range, поэтому браузер скачивает лишь тот поднабор, который реально встретил на странице. PT Sans и PT Serif вариативных версий не имеют — у них по файлу на начертание (400 и 700); остальные вариативные по оси wght. */ /* --- PT Sans (ParaType) --- */ @font-face { font-family: 'PT Sans Anticus'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/pt-sans-cyrillic-400.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'PT Sans Anticus'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/pt-sans-latin-400.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'PT Sans Anticus'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/pt-sans-cyrillic-700.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'PT Sans Anticus'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/pt-sans-latin-700.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Noto Sans (Google / The Noto Project) --- */ @font-face { font-family: 'Noto Sans Anticus'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/noto-sans-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Noto Sans Anticus'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/noto-sans-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Inter (Rasmus Andersson) --- */ @font-face { font-family: 'Inter Anticus'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter Anticus'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- PT Serif (ParaType) --- */ @font-face { font-family: 'PT Serif Anticus'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/pt-serif-cyrillic-400.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'PT Serif Anticus'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/pt-serif-latin-400.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'PT Serif Anticus'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/pt-serif-cyrillic-700.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'PT Serif Anticus'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/pt-serif-latin-700.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Literata (TypeTogether) --- */ @font-face { font-family: 'Literata Anticus'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/literata-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Literata Anticus'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/literata-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Source Serif 4 (Adobe) --- */ @font-face { font-family: 'Source Serif 4 Anticus'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/source-serif-4-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Source Serif 4 Anticus'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/source-serif-4-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }