/* NOCTS v2 tokens. The palette below is the only place a colour value is written: every other rule reaches a colour through these properties (alpha through color-mix). Dark only. Brand source: brand/brandkit/spec.md (version 1). Gold is one flat colour, never a gradient. */ :root { color-scheme: dark; /* ---------- Palette ---------- */ --night: #0B0B0C; /* the canvas */ --surface-1: #141416; --surface-2: #1C1C1F; --gold: #C79A5B; /* the mark and the one action that matters */ --gold-hover: #D4A96B; --gold-deep: #8A6420; /* Bronze */ --ivory: #F3EFE7; /* text */ --ash: #A8A196; /* secondary text, captions, timestamps */ --lume: #2F8A73; /* only the single "NOCTS noticed something" moment: a dot, never a button */ /* ---------- Roles ---------- */ --canvas: var(--night); --text: var(--ivory); --text-muted: var(--ash); --accent: var(--gold); --accent-hover: var(--gold-hover); --on-accent: var(--night); --focus: var(--gold); --hairline: color-mix(in srgb, var(--ivory) 10%, transparent); /* Interactive borders need 3:1 on the canvas; ivory at 40% measures 3.3:1. */ --border-strong: color-mix(in srgb, var(--ivory) 40%, transparent); --scrim: var(--night); /* Surface 3, a step above Surface 2 (the nav's menu button and the current language in its card, 065/015): Surface 2 raised by 5% Ivory, within a level of the Figma kit's #26262A. */ --surface-3: color-mix(in srgb, var(--ivory) 5%, var(--surface-2)); /* ---------- Type ---------- Each web face is followed by its metric-matched fallback (fonts.css), so a swap never borrows a neighbour's metrics. The page reads only --font-heading, --font-body, --font-label and --font-mono; the language blocks below switch them. */ --font-sora: 'Sora', 'Sora Fallback'; --font-plex: 'IBM Plex Sans', 'Plex Sans Fallback'; --font-kufi: 'Reem Kufi', 'Reem Kufi Fallback'; --font-plex-arabic: 'IBM Plex Sans Arabic', 'Plex Arabic Fallback'; --font-system: 'Helvetica Neue', Arial, sans-serif; --font-heading: var(--font-sora), var(--font-plex), var(--font-kufi), var(--font-system); --font-body: var(--font-plex), var(--font-plex-arabic), var(--font-system); --font-mono: 'IBM Plex Mono', 'Plex Mono Fallback', Menlo, Consolas, monospace; --font-label: var(--font-mono); /* eyebrows, chips, the switcher: Plex Mono caps */ /* Scale 1.25 (brand spec): Display 61, H1 49, H2 39, H3 31, H4 25, Lead 20, Body 16, Caption 13. */ --fs-display: clamp(2.5rem, 1.55rem + 3.1vw, 3.8125rem); --fs-h1: clamp(2.25rem, 1.55rem + 2.2vw, 3.0625rem); --fs-h2: clamp(1.875rem, 1.4rem + 1.5vw, 2.4375rem); --fs-h3: clamp(1.5rem, 1.25rem + 0.8vw, 1.9375rem); --fs-h4: 1.5625rem; --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); --fs-body: 1rem; --fs-caption: 0.8125rem; --leading-body: 1.6; --leading-heading: 1.12; --track-heading: -0.02em; /* Sora: -1% to -2.5% */ --track-label: 0.12em; /* Plex Mono caps labels: +12% */ /* Measures are in em, not ch: ch follows the width of the zero, which no size-adjusted fallback matches (Sora's is 0.76em, its fallback's 0.59em), so a ch measure re-wraps the text when the web font arrives. 37em is about 62 characters of Plex Sans. */ --measure: 37em; /* ---------- Space and shape ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --gutter: clamp(1rem, 4vw, 2.5rem); --section-pad: clamp(5rem, 9vw, 8.5rem); --container: 72rem; --header-h: 4.5rem; --radius-1: 0.375rem; --radius-2: 0.75rem; --tap: 2.75rem; /* 44px touch target */ /* ---------- Components (design package, section 2) ---------- */ --radius-sm: 8px; /* buttons inside the app UI */ --radius-md: 14px; /* app cards, windows */ --radius-lg: 22px; /* ladder, prices, dialog, FAQ panel */ --radius-pill: 999px; --glass-bg: color-mix(in srgb, var(--surface-2) 58%, transparent); --glass-border: color-mix(in srgb, var(--ivory) 13%, transparent); --glass-filter: blur(22px) saturate(160%); /* Frost: the content surfaces over the background arc (owner's round-2 picks, 2026-10-15). Surface 1 at 72% (panels, pills, cards), at 80% where text is dense, and Surface 2 at 80% for a raised or open item; all blurred, so the arc glows softly through. */ --frost-bg: color-mix(in srgb, var(--surface-1) 72%, transparent); --frost-bg-dense: color-mix(in srgb, var(--surface-1) 80%, transparent); --frost-raised: color-mix(in srgb, var(--surface-2) 80%, transparent); --frost-filter: blur(24px); --shadow-device: 0 40px 110px color-mix(in srgb, var(--night) 88%, transparent); --shadow-float: 0 18px 50px color-mix(in srgb, var(--night) 70%, transparent); /* ---------- Devices (design package 6.3, 6.5): read by devices.css and phone.css alone ---------- Colours of the things the devices show, not of NOCTS: never use them outside a device. */ /* The MacBook's macOS chrome. */ --mac-menu-bg: #1C1C1E; /* the menu bar over a dark desktop */ --mac-strip-bg: #000000; /* the strip beside the notch, for a full-screen app */ --mac-red: #FF5F57; /* the traffic lights */ --mac-yellow: #FEBC2E; --mac-green: #28C840; --mac-app-bg: #0C0C0C; /* the app's own canvas: a title bar with no screenshot class */ /* The app window's title bar continues its screenshot's top edge (.mac-bar--, the file's first two rows sampled in 16 bands from static/img/app). Every screenshot's top edge really is a gradient: the app's warm glow at the top left, 17 levels above the #0C0C0C it fades to at two thirds of the width (10 under a dialog's scrim), so a flat bar would show a seam. Files whose edges match within one level share a value. Re-sample after a recapture. */ --mac-bar-calendar-day: linear-gradient( 90deg, #110F0D 3.1%, #16120F 9.4%, #18140F 15.6%, #1C1710 21.9%, #1D1810 28.1% 34.4%, #1B1610 40.6%, #17130F 46.9%, #14110D 53.1%, #100E0C 59.4%, #0C0C0C 65.6% ); --mac-bar-calendar-week: var(--mac-bar-calendar-day); --mac-bar-chat-approval: var(--mac-bar-calendar-day); --mac-bar-chat-brief: var(--mac-bar-calendar-day); --mac-bar-composer-models: var(--mac-bar-calendar-day); --mac-bar-mail-inbox: var(--mac-bar-calendar-day); --mac-bar-messengers: var(--mac-bar-calendar-day); --mac-bar-sources: linear-gradient( 90deg, #110F0D 3.1%, #14110E 9.4%, #17130F 15.6%, #1A1510 21.9%, #1C1610 28.1%, #1C1611 34.4%, #19150F 40.6%, #17130F 46.9%, #13100D 53.1%, #0F0E0D 59.4%, #0C0C0C 65.6% ); /* A dialog's scrim over the app. */ --mac-bar-needs-you: linear-gradient( 90deg, #0B0B0A 3.1%, #0C0C0C 9.4%, #0E0C0B 15.6%, #100D0C 21.9%, #120E0D 28.1%, #110E0D 34.4%, #0F0C0B 40.6%, #0D0C0B 46.9%, #0C0C0B 53.1%, #0A0A0A 59.4%, #080808 65.6% ); --mac-bar-proactivity-digest: var(--mac-bar-needs-you); /* Telegram's dark theme, for the phone's 21:00 screen (.ph-tg) and nothing else (6.5). */ --tg-bg: #0E1621; --tg-bar: #17212B; --tg-bubble: #182533; --tg-link: #6AB2F2; --tg-muted: #7D8B99; --tg-inline: color-mix(in srgb, #2B5278 75%, var(--tg-bg)); --tg-button: #5288C1; --tg-text: #FFFFFF; /* The desktop scene (8a) and nothing else: the app's symbol glow (src/styles/accent-gold.css, .glow-mark) and the two dock tiles that aren't the page's palette. */ --apps-glow-near: rgb(232 196 130 / 0.7); --apps-glow-far: rgb(160 115 50 / 0.5); --apps-tile-light: #FFFFFF; --apps-tile-whatsapp: #25D366; /* The background arc (arc.js, read once as its shader's colours) and nothing else: the owner's Originkit settings, base, accent and highlight (Bronze). */ --arc-base: #906F41; --arc-accent: #BA9861; --arc-highlight: var(--gold-deep); /* ---------- Motion: two curves, used everywhere ---------- */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-1: 160ms; --dur-2: 320ms; --dur-3: 640ms; /* ---------- Legibility over footage (scrub-pipeline.md, layer 3) ---------- */ --tshadow: 0 1px 2px color-mix(in srgb, var(--scrim) 95%, transparent), 0 3px 12px color-mix(in srgb, var(--scrim) 78%, transparent), 0 10px 44px color-mix(in srgb, var(--scrim) 80%, transparent); /* ---------- Layers ---------- */ --z-env: -1; --z-header: 50; --z-skip: 100; /* Writing direction as a number: transforms and gradients multiply by it to mirror in RTL. */ --dir: 1; } [dir='rtl'] { --dir: -1; } [dir='ltr'] { --dir: 1; } /* Russian: headings in Plex Sans (Sora has no Cyrillic), so a heading never mixes faces. */ :root:lang(ru) { --font-heading: var(--font-plex), var(--font-kufi), var(--font-system); --track-heading: -0.01em; } /* Arabic: Reem Kufi headings, Plex Sans Arabic text with the longer line the brand asks for. No tracking anywhere: letter-spacing breaks Arabic joining. */ :root:lang(ar) { --font-heading: var(--font-kufi), var(--font-sora), var(--font-plex), 'Geeza Pro', var(--font-system); --font-body: var(--font-plex-arabic), var(--font-plex), 'Geeza Pro', var(--font-system); /* Mono stays for times and amounts, with Arabic words in Plex Sans Arabic. Labels are not mono caps in Arabic (there are no capitals, and mono spaces gape between Arabic words). */ --font-mono: 'IBM Plex Mono', 'Plex Mono Fallback', var(--font-plex-arabic), 'Geeza Pro', monospace; --font-label: var(--font-body); --leading-body: 1.8; --leading-heading: 1.35; --track-heading: 0; --track-label: 0; }