/* ========================================================================== ШРИФТ Приложение набрано системным SF Pro Rounded (.system(design: .rounded)). На вебе он достаётся не всем: • Safari и iOS понимают generic-имя `ui-rounded` и отдают ТОТ ЖЕ шрифт, что в приложении; • Chrome его игнорирует. Замерено: `ui-rounded`, `-apple-system`, "SF Pro Rounded" и ".SF NS Rounded" дают одну и ту же ширину строки (287.77 px при 60px/800) — то есть обычный SF Pro, без округлости. Файл на диске есть (/System/Library/Fonts/SFNSRounded.ttf), но имя семейства начинается с точки, и macOS прячет такие шрифты от страниц. Поэтому вторым номером идёт Nunito — свободный округлый шрифт (SIL OFL 1.1, лицензия в assets/fonts/OFL.txt), лежит на своём же домене, внешних запросов не добавляет. Safari до него не доходит и не скачивает: там уже сработал ui-rounded. Подмножества — только те, на которых написан сайт: latin, latin-ext (pl, tr) и cyrillic (ru). Браузер качает лишь нужный диапазон. ========================================================================== */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 500 800; /* вариативный: все нужные веса в одном файле */ font-display: swap; src: url("../assets/fonts/nunito-latin.woff2?v=acfce21e") 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: "Nunito"; font-style: normal; font-weight: 500 800; /* вариативный: все нужные веса в одном файле */ font-display: swap; src: url("../assets/fonts/nunito-latin-ext.woff2?v=cd5cabf5") 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; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 500 800; /* вариативный: все нужные веса в одном файле */ font-display: swap; src: url("../assets/fonts/nunito-cyrillic.woff2?v=f228e29c") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* ========================================================================== Witto — design tokens Каждое значение взято из приложения. Источник указан над группой. Ничего не «подобрано на глаз»: если значения не было в коде, токена нет. ========================================================================== */ :root { /* ------------------------------------------------------------------ ЦВЕТ — БРЕНД Источник: Focora/Core/DesignSystem/Theme.swift:18-24 (Theme.Colors) Светлая тема. Тёмной темы у сайта нет намеренно: приложение открывает онбординг и пейволл в светлой, и сайт продолжает именно их. ------------------------------------------------------------------ */ --primary: #EF9F27; /* Theme.swift:18 янтарь — заливка CTA, полосы, акценты */ --primary-deep: #BA7517; /* Theme.swift:19 объём («ledge») под CTA */ --primary-soft: #FCE9C8; /* Theme.swift:20 светлая подложка акцента */ --accent: #F0997B; /* Theme.swift:22 коралл — стрик, награды */ --accent-deep: #D85A30; /* Theme.swift:23 */ /* ------------------------------------------------------------------ ЦВЕТ — СЕМАНТИКА Источник: Theme.swift:28-30 ------------------------------------------------------------------ */ --success: #2BB673; /* Theme.swift:28 */ --warning: #F2C94C; /* Theme.swift:29 */ --danger: #E5484D; /* Theme.swift:30 */ /* ------------------------------------------------------------------ ЦВЕТ — ПОВЕРХНОСТИ И ТЕКСТ Источник: Theme.swift:33-49, значения light-варианта. Сверено пипеткой по docs/web-export/screens/05-progress.png: фон страницы (20,700) = #FBF6EF, карточка (600,700) = #FFFFFF ------------------------------------------------------------------ */ /* Фон сайта задан владельцем и НЕ равен фону приложения (Theme.swift:33 — #FBF6EF): на вебе полотно теплее и темнее, карточки на нём читаются как карточки. Все контрасты пересчитаны под это значение. */ --bg: #E9E1D6; --surface: #FFFFFF; /* Theme.swift:34 карточка */ --surface-alt: #F3ECE0; /* Theme.swift:35 плоская плашка */ --surface-alt-deep:#E8DDCC; /* Theme.swift:46 объём серой кнопки */ --bar-track: #E6DCC9; /* Theme.swift:40 трек полосы прогресса */ --stroke: #E8DDCC; /* Theme.swift:41 кромка */ --text: #2A2015; /* Theme.swift:48 текст primary */ /* Вторичный текст затемнён относительно приложения (#7A6C58): на фоне сайта #E9E1D6 прежнее значение даёт 3.94:1 — ниже 4.5:1. Здесь 4.93 на фоне и 6.39 на белой карточке. */ --text-muted: #6B5D49; --text-on-color: #412402; /* Theme.swift:60 текст на янтаре */ /* ------------------------------------------------------------------ ЦВЕТ — ПЯТЬ КОГНИТИВНЫХ ЗОН Источник: Focora/Features/Dashboard/ProgressStyle.swift:88-99 (ProgressPalette.domainColor), light-вариант. ------------------------------------------------------------------ */ --zone-focus: #4E9E6A; /* ProgressStyle.swift:90 */ --zone-selfcontrol: #C96A48; /* ProgressStyle.swift:91 (inhibition) */ --zone-speed: #A8874A; /* ProgressStyle.swift:92 */ --zone-memory: #6C55C4; /* ProgressStyle.swift:93 */ --zone-logic: #B07640; /* ProgressStyle.swift:94 */ /* ------------------------------------------------------------------ ЦВЕТ — СПЛЕШ Источник: Assets.xcassets/LaunchBackground.colorset/Contents.json (R 0xF7, G 0x9C, B 0x86) и SplashLogoTint.colorset (#391612). Внимание: коралл сплеша (#F79C86) НЕ равен Theme.Colors.coral (#F0997B). ------------------------------------------------------------------ */ --splash-bg: #F79C86; --splash-ink: #391612; /* ------------------------------------------------------------------ СКРУГЛЕНИЯ Источник: Theme.swift:108-121 (Theme.Radius) + литералы вью: 28 — PaywallView.swift:161 (карточка таймлайна) 24 — PaywallView.swift:236 (плашка тарифа) ------------------------------------------------------------------ */ --r-button: 14px; /* Theme.swift:109 */ --r-card: 20px; /* Theme.swift:110 */ --r-plate: 24px; /* PaywallView.swift:236 */ --r-panel: 28px; /* PaywallView.swift:161 */ --r-section: 32px; /* Theme.swift:113 sheetSection */ --r-chip: 12px; /* Theme.swift:115 */ --r-pill: 999px; /* Theme.swift:120 */ /* ------------------------------------------------------------------ СЕТКА ОТСТУПОВ Источник: Theme.swift:127-134 (Theme.Spacing). Частота использования в коде приложения: l 290, m 289, s 220, xs 37, xl 34, xxl 8 — поэтому ритм сайта держится на l и m. ------------------------------------------------------------------ */ --sp-xs: 4px; --sp-s: 8px; --sp-m: 12px; --sp-l: 16px; --sp-xl: 24px; --sp-xxl: 32px; /* ------------------------------------------------------------------ ТИПОГРАФИКА Источник: Theme.swift:141-146 (Theme.Typography) + литералы вью: 28/heavy — OnboardingSimpleScreens.swift:120 (заголовок экрана) 30/bold — OnboardingRevealScreen.swift:31 (заголовок над числом) 56/heavy — OnboardingRevealScreen.swift:35 (диапазон возраста) Кастомного шрифта в проекте НЕТ (нет .ttf/.otf, нет UIAppFonts, Font.custom не вызывается) — приложение использует системный SF Rounded через .system(design: .rounded). На вебе это `ui-rounded`. ------------------------------------------------------------------ */ --font: ui-rounded, "SF Pro Rounded", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fs-display: 34px; /* Theme.swift:141 heavy */ --fs-screen: 28px; /* OnboardingSimpleScreens.swift:120 heavy */ --fs-title: 24px; /* Theme.swift:142 bold */ --fs-headline: 18px; /* Theme.swift:143 bold */ --fs-body: 16px; /* Theme.swift:144 medium */ --fs-caption: 13px; /* Theme.swift:145 semibold */ --fs-number: 44px; /* Theme.swift:146 heavy */ --fs-range: 56px; /* OnboardingRevealScreen.swift:35 heavy */ --fw-heavy: 800; /* .heavy */ --fw-bold: 700; /* .bold */ --fw-semibold: 600; /* .semibold */ --fw-medium: 500; /* .medium */ /* Надстрочная строка «MODULE 1 · FOCUS»: 13pt heavy + kerning 0.5pt. Источник: MapView.swift:647 (.kerning(0.5)), кегль — Theme caption. */ --ls-eyebrow: 0.5px; /* ------------------------------------------------------------------ ГЛУБИНА У карточек приложения тени НЕТ намеренно (Card.swift:16-19: «НИ КРОМКИ, НИ ТЕНИ»). Объём делается сплошной подложкой снизу. Глубина CTA = 6pt (DepthActionButton.swift:20), измерено на скриншоте 06-reveal.png: грань 161px, подложка 18px при @3x → 53.7pt и 6.0pt. ------------------------------------------------------------------ */ --depth-button: 6px; /* DepthActionButton.swift:20 */ --depth-plate: 4px; /* DepthActionButton.swift:162 (MapPlateButton) */ --btn-height: 54px; /* измерено: 161px @3x = 53.7pt ≈ 18pt текст + 16+16 */ /* ------------------------------------------------------------------ ПОЛОСА-«СТАКАН» (FluidBar) Источник: Focora/Core/DesignSystem/Components/FluidBar.swift + FluidMetrics (там же, строки 96-115). ------------------------------------------------------------------ */ --bar-h: 20px; /* DomainBars.swift:241 height: 20 */ --bar-inset: 0.14; /* FluidMetrics.inset */ --bar-gloss-a: 0.22; /* FluidMetrics.glossOpacity */ /* ------------------------------------------------------------------ ДВИЖЕНИЕ Источник: Theme.swift:152-161 (Theme.Motion) и MapNodeButton.swift:82-85 (нажатие кнопки). ------------------------------------------------------------------ */ --dur-press-down: 0.13s; /* MapNodeButton.swift:82 */ --dur-press-up: 0.22s; /* MapNodeButton.swift:83 */ --ease-down: cubic-bezier(0.42, 0, 0.58, 1); /* .easeInOut */ --ease-up: cubic-bezier(0.16, 0.6, 0.32, 1);/* .easeOut */ /* Ширина контента: поля экрана в приложении — 16pt с каждой стороны (OnboardingComponents.swift:67 .padding(Theme.Spacing.l)), подтверждено замером CTA на скриншоте: 48px @3x = 16pt. */ /* Поля по бокам растут вместе с окном, но остаются полями, а не провалами: 16px на телефоне, ~3% ширины дальше, потолок 56px. На 13-дюймовом мониторе это 40px вместо прежних сотен. */ --gutter: clamp(16px, 3vw, 56px); /* Ширина контейнера. На телефоне её задаёт сам экран, значение работает начиная с планшета; на десктопе расширяется в адаптиве. */ --wrap: 880px; /* Высота липкой шапки: поля 12+12 плюс самый высокий её элемент (кнопка 36). Нужна, чтобы первый экран занимал ровно остаток окна. */ --head-h: 60px; --measure: 640px; /* предел строки текста, чтобы плотность абзаца оставалась как на экране телефона */ }