/* Design tokens: the only place with raw colours, sizes and motion values. Light is the default; theme.js sets data-theme on before the first paint (from Telegram, else from the device). Every opaque text/background pair is checked for contrast by tests/front.test.mjs (text >= 4.5:1, interface parts >= 3:1) in both themes, and so is every translucent material (--glass-*, --card-*, --hero-*) composited over the worst backdrop that can sit under it (sky extremes, chips, filled buttons): when you add a pair or a material, add it to the matrix there. RULES: the palette names (--bg ... --danger-soft, --ok ..., --warn ...) stay OPAQUE #RRGGBB (Telegram's header colour and paintBelow() read them); anything with transparency is a new --glass-* / --card-* / --sky-* token. --bg is also the colour of html, body and the edges of the sky. */ :root { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* type scale; fields use --t-body (16px): smaller and iOS zooms the page on focus (zoom is not disabled here) */ --t-mini: 11px; --t-cap: 12px; --t-meta: 13px; --t-sm: 15px; --t-body: 16px; --t-headline: 17px; --t-title: 20px; --t-title2: 22px; --t-large: 28px; --t-time: 30px; --t-xl: 34px; --t-hero: 46px; /* spacing (4px grid), radii, motion, sizes */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px; --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 24px; --r-pill: 999px; --r-card: 24px; --r-group: 20px; --r-sheet: 34px; --ease: cubic-bezier(.2, .8, .2, 1); --ease-out: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --d1: 120ms; --d2: 200ms; --d3: 320ms; --d4: 460ms; --bar-h: 52px; --fab: 56px; --column: 640px; --dock-gap: 12px; --hit: 44px; /* Safe areas, in CSS only: the phone's own (env) and the ones Telegram reports (>= 8.0). The Telegram variables do not exist until the client sends an event, so every use has a fallback: without one the whole declaration is dropped. */ --sat: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)); --sab: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)); --sal: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px)); --sar: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px)); /* palette: light (dawn) */ color-scheme: light; --bg: #F2F3F7; --surface: #FFFFFF; --surface-2: #E9EAF0; --text: #14151A; --muted: #5A5D6B; --border: #7C8091; --line: rgba(20, 22, 30, .10); /* border: field outlines (3:1); line: hairline dividers */ --accent: #0A5AD0; --accent-contrast: #FFFFFF; --accent-soft: #E1EBFC; --danger: #C4281E; --danger-contrast: #FFFFFF; --danger-soft: #FCE5E3; --ok: #18794A; --ok-contrast: #FFFFFF; --ok-soft: #DDF3E6; /* on time, landed, the switch */ --warn: #975400; --warn-contrast: #FFFFFF; --warn-soft: #FFEFD3; /* delays, early arrivals, "soon" */ --knob: #FFFFFF; /* the thumb of a switch */ --scrim: rgba(16, 18, 28, .32); --scrim-blur: 6px; --shadow: 0 10px 34px rgba(20, 22, 34, .16), 0 2px 8px rgba(20, 22, 34, .07); /* materials, light. Glass = controls and navigation (blur + saturation, bright rim, soft shadow); card = content (frosted, no blur). */ --glass-filter: blur(22px) saturate(1.55); /* the recipe of the owner's graphics library; "none" in reduced effects */ --glass-filter-strong: blur(30px) saturate(1.7); /* sheets without fields, the hero card */ --glass-fill: rgba(255, 255, 255, .62); /* regular: the top bar when scrolled, segments, toasts */ --glass-thin: rgba(255, 255, 255, .45); /* round buttons and chips floating on the sky */ --glass-thick: rgba(250, 250, 253, .82); /* toasts */ --glass-sheet: rgba(246, 247, 250, .88); /* sheets WITHOUT a text field (a sheet with one is --surface) */ --glass-lens: rgba(255, 255, 255, .92); /* the sliding lens of the segmented control */ --glass-tint: rgba(8, 86, 200, .90); /* the tinted pill ("+ Nuovo volo"): text --accent-contrast */ --glass-edge: rgba(255, 255, 255, .62); /* 1px luminous border */ --glass-rim: rgba(255, 255, 255, .90); /* inner top highlight (inset box-shadow) */ --glass-shade: rgba(20, 24, 44, .07); /* inner bottom shade (inset box-shadow) */ --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 52%); /* the inner reflection at the top */ --glass-sheen-tint: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 46%); /* a softer one on the tinted pill (white text) */ --glass-shadow: 0 10px 30px -10px rgba(22, 26, 48, .28), 0 2px 6px rgba(22, 26, 48, .07); --card-fill: rgba(255, 255, 255, .78); /* flight cards, settings groups: content, almost opaque */ --card-edge: rgba(255, 255, 255, .75); --card-shadow: 0 1px 2px rgba(22, 26, 48, .05), 0 10px 28px -14px rgba(22, 26, 48, .22); --hero-fill: rgba(255, 255, 255, .58); /* the next pickup: the only card with a real blur */ --hero-glow: rgba(10, 90, 208, .10); /* the sky: one fixed layer, static orbs that fade out before the screen edges (edges = --bg) */ --sky-a: rgba(255, 186, 140, .55); /* dawn: apricot, top right */ --sky-b: rgba(246, 168, 210, .45); /* rose, left */ --sky-c: rgba(140, 186, 255, .50); /* morning blue, bottom right */ } /* Full screen (Bot API 8.0): Telegram hides its header and keeps its own buttons (close, menu) over the top of the page. The space they take is the content safe area; it is added to the device's own (notch). Whether Telegram reports it as an addition or already inside the device's is not documented: the phone test records both numbers (js/trace.js). */ html.fullscreen { --sat: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px)); } :root[data-theme="dark"] { color-scheme: dark; --bg: #0B0C12; --surface: #1B1C24; --surface-2: #272834; --text: #F2F3F7; --muted: #A4A7B6; --border: #7D8192; --line: rgba(255, 255, 255, .10); --accent: #6AAEFF; --accent-contrast: #04142E; --accent-soft: #1A2A45; --danger: #FF7A70; --danger-contrast: #2A0503; --danger-soft: #3B1D1C; --ok: #4FD38A; --ok-contrast: #032113; --ok-soft: #14301F; --warn: #FFBE5C; --warn-contrast: #2A1A00; --warn-soft: #35270F; --knob: #FFFFFF; --scrim: rgba(0, 0, 0, .55); --scrim-blur: 6px; --shadow: 0 12px 38px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35); /* materials, dark (night) */ --glass-filter: blur(22px) saturate(1.55); --glass-filter-strong: blur(30px) saturate(1.7); --glass-fill: rgba(24, 26, 36, .64); --glass-thin: rgba(255, 255, 255, .10); --glass-thick: rgba(36, 38, 50, .82); --glass-sheet: rgba(28, 29, 40, .84); --glass-lens: rgba(255, 255, 255, .16); --glass-tint: rgba(106, 174, 255, .92); --glass-edge: rgba(255, 255, 255, .12); --glass-rim: rgba(255, 255, 255, .22); --glass-shade: rgba(0, 0, 0, .30); --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 52%); --glass-sheen-tint: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 46%); --glass-shadow: 0 12px 32px -8px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .40); --card-fill: rgba(24, 25, 34, .78); --card-edge: rgba(255, 255, 255, .07); --card-shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 12px 30px -16px rgba(0, 0, 0, .75); --hero-fill: rgba(30, 32, 46, .56); --hero-glow: rgba(106, 174, 255, .12); --sky-a: rgba(88, 96, 230, .38); /* night: indigo, top right */ --sky-b: rgba(150, 70, 200, .30); /* violet, left */ --sky-c: rgba(20, 150, 170, .30); /* teal, bottom right */ } /* Reduced effects ("Effetti: Ridotti" in Settings, or chosen automatically by js/fx.js when the first scroll is slow): no blur, solid materials. The same for people who asked their phone for less transparency. :root[...] has the specificity of the dark palette and comes after it, so it wins in both themes. */ :root[data-fx="lite"] { --glass-filter: none; --glass-filter-strong: none; --glass-fill: var(--surface); --glass-thin: var(--surface-2); --glass-thick: var(--surface); --glass-sheet: var(--surface); --glass-lens: var(--surface); --glass-tint: var(--accent); --card-fill: var(--surface); --hero-fill: var(--surface); --glass-sheen: linear-gradient(transparent, transparent); --glass-sheen-tint: linear-gradient(transparent, transparent); } @media (prefers-reduced-transparency: reduce) { :root, :root[data-theme] { --glass-filter: none; --glass-filter-strong: none; --glass-fill: var(--surface); --glass-thin: var(--surface-2); --glass-thick: var(--surface); --glass-sheet: var(--surface); --glass-lens: var(--surface); --glass-tint: var(--accent); --card-fill: var(--surface); --hero-fill: var(--surface); --glass-sheen: linear-gradient(transparent, transparent); --glass-sheen-tint: linear-gradient(transparent, transparent); } }