/* ========================================================================== Nunito — the cross-platform face -------------------------------------------------------------------------- Until now the type stack was Apple system fonts with a bare `sans-serif` at the end, so an Apple device rendered SF Pro and an Android device fell through to Roboto: the same build looked like two different products, and no amount of care over tracking and the type ladder survived the substitution. Nunito is the fallback because it is rounded and humanist, which is the nearest widely-available match to SF Pro Rounded. It is loaded only where it is needed: Apple devices never fetch it, because -apple-system resolves first and the browser stops there. Variable weight 400-700 in one file per subset, so all four weights the design uses (400/500/600/700) cost nothing extra. 93 KB total, split by script so a Russian reader does not download Latin-Extended they will not see. SIL Open Font License 1.1 — commercial use and embedding permitted. The licence travels with the files in fonts/OFL.txt, as OFL requires. ========================================================================== */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 700; /* variable: one file covers the whole ladder */ font-display: swap; /* show text immediately in the fallback face */ src: url('fonts/nunito-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: 'Nunito'; font-style: normal; font-weight: 400 700; /* variable: one file covers the whole ladder */ font-display: swap; /* show text immediately in the fallback face */ src: url('fonts/nunito-latin-ext.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; } @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 700; /* variable: one file covers the whole ladder */ font-display: swap; /* show text immediately in the fallback face */ src: url('fonts/nunito-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* ========================================================================== Apple-native design tokens -------------------------------------------------------------------------- Defined from Apple's Human Interface Guidelines system values (iOS / macOS), not extracted from a competitor's site. Semantic names throughout — `--label-secondary`, not `--grey-2`. Font: no webfont. `-apple-system` resolves to SF Pro on Apple devices, which is the point: on iPhone and Mac this renders in the real system typeface. The fallbacks cover other platforms with the nearest available grotesque. ========================================================================== */ :root { /* ---------- type ---------------------------------------------------- */ /* Apple faces first, so iPhone and Mac are untouched. Nunito catches every other platform, which previously landed on Roboto or Segoe UI. */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Nunito, Inter, system-ui, sans-serif; /* Apple's ladder is not a fixed ratio — it is hand-tuned per role, and the tracking flips sign across it: negative on display sizes, positive on captions. That sign flip is the part most imitations miss. */ --t-large-title: 34px; --tr-large-title: -0.4px; --lh-large-title: 41px; --t-title1: 28px; --tr-title1: -0.3px; --lh-title1: 34px; --t-title2: 22px; --tr-title2: -0.2px; --lh-title2: 28px; --t-headline: 17px; --tr-headline: -0.1px; --lh-headline: 22px; --t-body: 17px; --tr-body: 0px; --lh-body: 22px; --t-subhead: 15px; --tr-subhead: 0px; --lh-subhead: 20px; --t-footnote: 13px; --tr-footnote: 0.1px; --lh-footnote: 18px; --t-caption: 12px; --tr-caption: 0.2px; --lh-caption: 16px; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* ---------- surfaces ------------------------------------------------ */ --bg-grouped: #F2F2F7; /* systemGroupedBackground */ --bg-elevated: #FFFFFF; /* card / row fill */ --bg-secondary: #F9F9FB; --fill-quaternary: rgba(116,116,128,0.08); --fill-tertiary: rgba(118,118,128,0.12); /* ---------- labels -------------------------------------------------- */ /* Apple layers label greys as one hue at descending opacity, which keeps them coherent over any background instead of drifting in tint. */ --label: #000000; --label-secondary: rgba(60,60,67,0.78); --label-tertiary: rgba(60,60,67,0.55); --label-quaternary: rgba(60,60,67,0.40); /* ---------- separators ---------------------------------------------- */ --separator: rgba(60,60,67,0.29); --separator-opaque: #C6C6C8; /* ---------- accents ------------------------------------------------- */ --blue: #007AFF; --indigo: #5856D6; --green: #34C759; --orange: #FF9500; --red: #FF3B30; --teal: #30B0C7; /* Tinted button fills: the accent at low alpha, as iOS uses for non-destructive secondary actions. */ --green-tint: rgba(52,199,89,0.14); --orange-tint: rgba(255,149,0,0.16); --red-tint: rgba(255,59,48,0.13); /* ---------- shape --------------------------------------------------- */ /* Apple uses continuous ("squircle") curvature, not a circular arc. CSS has no portable equivalent yet (`corner-shape: superellipse` is too new to rely on), so these approximate it — slightly larger than the true value, which reads closer to the real thing at these sizes. */ --r-row: 10px; --r-card: 12px; --r-panel: 18px; --r-glass: 26px; --r-capsule: 999px; /* ---------- spacing ------------------------------------------------- */ /* Gutter is 16px — the iOS content inset. Everything is a multiple of it. */ --gutter: 16px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --tap: 44px; /* HIG minimum touch target */ /* ---------- materials ----------------------------------------------- */ /* Vibrancy needs saturate() alongside blur — blur alone renders as flat grey fog rather than glass, because it loses the colour beneath. */ --glass-fill: rgba(255,255,255,0.62); --glass-blur: saturate(180%) blur(30px); --glass-edge: rgba(255,255,255,0.65); --glass-shadow: 0 1px 1px rgba(0,0,0,0.04), 0 8px 28px rgba(0,0,0,0.10); --bar-fill: rgba(249,249,251,0.80); --bar-blur: saturate(180%) blur(20px); /* ---------- elevation ----------------------------------------------- */ --shadow-card: 0 1px 2px rgba(0,0,0,0.04); --shadow-float: 0 4px 16px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.05); /* ---------- motion -------------------------------------------------- */ /* Budget: 200–400ms, and Apple's spring feel comes from an overshooting cubic-bezier rather than a linear ease. Transform and opacity only — animating layout properties is what makes an imitation feel cheap. */ --dur-fast: 0.18s; --dur-base: 0.28s; --dur-slow: 0.40s; --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); } @media (prefers-color-scheme: dark) { :root { --bg-grouped: #000000; --bg-elevated: #1C1C1E; --bg-secondary: #2C2C2E; --label: #FFFFFF; --label-secondary: rgba(235,235,245,0.80); --label-tertiary: rgba(235,235,245,0.60); --label-quaternary: rgba(235,235,245,0.45); --separator: rgba(84,84,88,0.65); --separator-opaque: #38383A; --blue: #0A84FF; --indigo: #5E5CE6; --green: #30D158; --orange: #FF9F0A; --red: #FF453A; --glass-fill: rgba(30,30,32,0.62); --glass-edge: rgba(255,255,255,0.14); --bar-fill: rgba(28,28,30,0.80); } } /* Zero every motion token in one place. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0s; --dur-base: 0s; --dur-slow: 0s; } }