/* ============================================================================ * TRIVX PUBLIC — DESIGN TOKENS * ---------------------------------------------------------------------------- * The single source of truth for colour, type, space, shape, depth and motion * on the public site. Change a value here and it changes everywhere. * * Nothing else in the public CSS may hold a literal colour, radius, shadow or * duration. If you need a value that is not here, add it here first. * * This file replaces the old variables.css, which had grown to 348 tokens of * which 193 were never used by anything, several were broken * (`--card-bg:var()`, `--transition-base:var(--transition-base)`), and the * same ideas were defined three times over in three naming schemes. * * Structure: * 1. FONTS the two families the site loads * 2. CANONICAL the design system proper — light * 3. DARK the same tokens, dark scheme * 4. COMPATIBILITY old names kept alive for stylesheets not yet migrated * 5. PREFERENCES reduced transparency / contrast * * Section 4 is the only part that should ever shrink. When a stylesheet stops * using an old name, delete the alias. * ========================================================================== */ /* == 1. FONTS ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap'); @font-face { font-family: 'Mehr Nastaliq Web'; src: url('../../../../shared/assets/fonts/MehrNastaliqWeb.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 112%; /* Urdu/Arabic only — Latin keeps Plus Jakarta Sans. */ unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } /* == 2. CANONICAL (light) ================================================= */ :root, [data-theme] { /* -- Surfaces ----------------------------------------------------------- * canvas the page itself * surface a card sitting on the canvas * sunken a band or well set into the page */ --canvas: #F5F5F7; --surface: #FFFFFF; --surface-soft: #F0F0F3; --surface-sunken: #EAEAEE; --surface-hover: rgba(38, 38, 45, 0.05); --sand: #ECECF0; --sand-strong: #DFDFE5; /* -- Lines -------------------------------------------------------------- * hairline separates things that belong together; strong separates things * that do not. There is no third weight. */ --border-hairline: rgba(38, 38, 45, 0.08); --border-strong: rgba(38, 38, 45, 0.14); /* -- Ink ---------------------------------------------------------------- * strong headings · ink body · soft secondary · muted labels and captions */ --ink-strong: #26262D; --ink: #33333B; --ink-soft: #55555F; --ink-muted: #73737F; --ink-inverse: #FFFFFF; --ink-on-solid: #FFFFFF; --ink-rgb: 38, 38, 45; /* -- Brand -------------------------------------------------------------- * accent is the one brand colour. accent-text is the readable version for * text on light surfaces; never use --accent for body-size text. */ --accent: #F35B25; --accent-rgb: 243, 91, 37; --accent-soft: rgba(243, 91, 37, 0.12); --accent-contrast: #FFFFFF; --accent-text: #C2410C; --accent-hover: #DC4A17; /* -- Solid: the inverted surface (dark CTA panels, chips, step numbers) -- */ --solid: #26262D; --solid-hover: #3A3A44; --solid-soft: rgba(38, 38, 45, 0.06); /* -- Material: translucent chrome (header, overlays, floating chips) ----- */ --material-bar: rgba(255, 255, 255, 0.72); --material-thick: rgba(255, 255, 255, 0.86); --material-filter: saturate(180%) blur(20px); /* -- Status: always the soft tint behind the solid colour, never a * saturated block --------------------------------------------------- */ --positive: #16A34A; --positive-soft: rgba(22, 163, 74, 0.12); --negative: #E5484D; --negative-soft: rgba(229, 72, 77, 0.12); --caution: #F59E0B; --caution-soft: rgba(245, 158, 11, 0.12); --info: #3B82F6; --info-soft: rgba(59, 130, 246, 0.12); --neutral: #8A8F98; --neutral-soft: rgba(138, 143, 152, 0.12); /* -- Type --------------------------------------------------------------- * One family. Urdu glyphs come from Mehr Nastaliq via the unicode-range * above, so --font covers both scripts. */ --font: 'Mehr Nastaliq Web', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-urdu: 'Mehr Nastaliq Web'; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold:800; /* Size and leading move together: the bigger the type, the tighter it sets */ --leading-display: 1.1; --leading-title: 1.25; --leading-body: 1.5; --leading-prose: 1.75; /* descriptions and long copy */ --leading-tight: 1.25; --leading-relaxed: 1.625; --tracking-display: -0.025em; --tracking-title: -0.018em; --tracking-body: -0.006em; --tracking-label: 0.08em; /* eyebrows and uppercase labels */ --tracking-wide: 0.025em; /* -- Space (4px base) ---------------------------------------------------- */ --space-1: 0.25rem; --space-1_5: 0.375rem; --space-2: 0.5rem; --space-2_5: 0.625rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* Vertical rhythm of a page section, and the page gutter */ --section-y: clamp(3.5rem, 6vw, 6rem); --gutter: clamp(1rem, 2.5vw, 2rem); /* -- Shape -------------------------------------------------------------- * card outer containers inner things inside a card * field inputs and controls pill chips, badges, icon buttons */ --r-card: 18px; --r-inner: 12px; --r-field: 12px; --r-control: 12px; --r-pill: 999px; /* -- Depth -------------------------------------------------------------- * soft resting card card a card that matters * raised hover / floating overlay modals and lightboxes */ --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-card: 0 4px 16px rgba(17, 18, 20, 0.05); --shadow-raised: 0 8px 28px rgba(17, 18, 20, 0.08); --shadow-overlay: 0 24px 64px rgba(17, 18, 20, 0.18); --focus-ring: 0 0 0 3px var(--accent-soft); /* -- Controls ------------------------------------------------------------ */ --control-h: 44px; --control-h-sm: 36px; --control-h-lg: 52px; --icon-btn: 38px; --icon-btn-sm: 32px; /* An icon beside a label: fixed box, fixed gap, so text columns line up. */ --icon-box: 1.25em; --icon-gap: 0.55em; /* -- Layout -------------------------------------------------------------- */ --container-max: 1300px; --container-md: 768px; --header-h: 64px; --header-height: var(--header-h); --footer-height: 300px; /* -- Motion -------------------------------------------------------------- */ --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-press: 100ms; --dur-fast: 160ms; --dur-enter: 380ms; --dur-slow: 520ms; /* -- Depth order --------------------------------------------------------- */ --z-base: 10; --z-header: 1000; --z-drawer: 1200; --z-modal: 10050; /* -- Chrome: the header and footer ------------------------------------- * The site's shell is dark in both themes, the way a studio site keeps a * constant frame around changing content. These are the only tokens that * do not flip with the colour scheme. */ --chrome: #121318; --chrome-soft: #1B1C22; --chrome-line: rgba(255, 255, 255, 0.10); --chrome-line-strong: rgba(255, 255, 255, 0.18); --chrome-ink: #FFFFFF; --chrome-ink-soft:rgba(255, 255, 255, 0.72); --chrome-ink-muted:rgba(255, 255, 255, 0.52); --chrome-hover: rgba(255, 255, 255, 0.08); --chrome-bar: rgba(18, 19, 24, 0.82); /* -- Decorative: the blurred blobs behind the page ----------------------- */ --mesh-blob-1: rgba(243, 91, 37, 0.18); --mesh-blob-2: rgba(243, 91, 37, 0.10); --mesh-blob-3: rgba(64, 64, 64, 0.10); color-scheme: light; } /* == 3. DARK ============================================================== * Only the canonical values are restated. Everything in section 4 resolves * through var() at use time, so the aliases follow automatically. * ======================================================================== */ [data-theme="dark"] { --canvas: #17171B; --surface: #212127; --surface-soft: #2C2C34; --surface-sunken: #1C1C21; --surface-hover: rgba(255, 255, 255, 0.06); --sand: #2F2F38; --sand-strong: #3C3C47; --border-hairline: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --ink-strong: #F5F5F7; --ink: #E4E4EA; --ink-soft: #A9A9B6; --ink-muted: #8A8A97; --ink-inverse: #26262D; --ink-on-solid: #26262D; --ink-rgb: 245, 245, 247; --accent: #F35B25; --accent-soft: rgba(243, 91, 37, 0.22); --accent-text: #FF8A5C; --solid: #F5F5F7; --solid-hover: #FFFFFF; --solid-soft: rgba(255, 255, 255, 0.08); --material-bar: rgba(33, 33, 39, 0.72); --material-thick: rgba(33, 33, 39, 0.88); --positive: #3DD68C; --positive-soft: rgba(61, 214, 140, 0.18); --negative: #FF6369; --negative-soft: rgba(255, 99, 105, 0.18); --caution: #FFB224; --caution-soft: rgba(255, 178, 36, 0.18); --info: #6BA6FF; --info-soft: rgba(107, 166, 255, 0.18); --neutral: #7C828A; --neutral-soft: rgba(124, 130, 138, 0.18); --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.40); --shadow-raised: 0 8px 28px rgba(0, 0, 0, 0.44); --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.60); --mesh-blob-1: rgba(243, 91, 37, 0.16); --mesh-blob-2: rgba(243, 91, 37, 0.09); --mesh-blob-3: rgba(255, 255, 255, 0.05); color-scheme: dark; } /* == 4. COMPATIBILITY ===================================================== * Older names, pointed at the canonical tokens. These exist only so the * stylesheets that have not been migrated keep working — buttons.css, * system.css, store-browse.css, mascot.css, the component sheets and a few * page styles. An alias never holds a literal: it always points at a * canonical token, so the dark scheme needs no second copy. * * To retire one: grep for it, change the callers, delete the line. * ======================================================================== */ :root, [data-theme] { /* surfaces */ --bg-primary: var(--canvas); --bg-secondary: var(--surface); --bg-tertiary: var(--surface-sunken); --bg-hover: var(--surface-hover); --bg-overlay: var(--material-thick); --bg-gradient: linear-gradient(135deg, rgba(var(--ink-rgb), 0.02) 0%, rgba(var(--ink-rgb), 0.05) 100%); --rev-bg-primary: var(--surface); --rev-bg-secondary: var(--canvas); --rev-card-bg: var(--surface-sunken); --surface-primary: var(--surface); --surface-secondary: var(--surface-sunken); --glass-bg: var(--solid-soft); --glass-bg-strong: var(--surface-hover); --glass-border: var(--border-hairline); --glass-border-hover:var(--border-strong); --footer-bg: var(--surface); /* text */ --text-primary: var(--ink-strong); --text-secondary: var(--ink-soft); --text-muted: var(--ink-muted); --text-inverse: var(--ink-inverse); --text-link: var(--accent-text); --text-link-hover: var(--accent-hover); --font-family-primary: var(--font); --icon-primary: var(--ink-soft); /* borders */ --border-primary: var(--border-strong); --border-secondary: var(--border-hairline); --border-tertiary: var(--border-hairline); --border-subtle: var(--border-hairline); --border-color: var(--border-strong); --border-hover-color:var(--border-strong); --border-width: 1px; --border-width-2: 2px; --border-width-4: 4px; /* brand + status */ --primary: var(--accent); --primary-rgb: var(--accent-rgb); --primary-50: var(--accent-soft); --primary-100: var(--accent-soft); --primary-500: var(--accent); --primary-600: var(--accent-hover); --secondary: var(--solid); --danger: var(--negative); --danger-light: var(--negative-soft); /* radius */ --radius-base: 4px; --radius-md: var(--r-control); --radius-lg: var(--r-control); --radius-xl: var(--r-card); --radius-2xl: var(--r-card); --radius-full: var(--r-pill); --radius-pill: var(--r-pill); /* shadows */ --shadow-xs: var(--shadow-soft); --shadow-sm: var(--shadow-soft); --shadow-md: var(--shadow-card); --shadow-lg: var(--shadow-raised); --shadow-hover: var(--shadow-raised); --shadow-dropdown: var(--shadow-raised); --shadow-medium: var(--shadow-card); /* motion — the old transition shorthands */ --transition-colors: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); --transition-base: all var(--dur-enter) var(--ease-out); --transition-all: var(--transition-base); --theme-transition: var(--transition-base); /* depth order */ --z-10: var(--z-base); /* leftovers with no canonical home yet */ --container-xl: var(--container-max); } /* == 5. PREFERENCES ======================================================= */ @media (prefers-reduced-transparency: reduce) { :root, [data-theme] { --material-bar: var(--surface); --material-thick: var(--surface); --material-filter: none; } } @media (prefers-contrast: more) { :root, [data-theme] { --border-hairline: var(--border-strong); --ink-muted: var(--ink-soft); } } @media (prefers-reduced-motion: reduce) { :root, [data-theme] { --dur-press: 0ms; --dur-fast: 0ms; --dur-enter: 0ms; --dur-slow: 0ms; } } /* Inner pages share the home page's editorial scale. */ :root, [data-theme] { --inner-hero-title: clamp(2.25rem, 4.8vw, 4rem); --inner-hero-space: clamp(3rem, 6vw, 5rem); --inner-hero-light: radial-gradient(ellipse at 85% 0%, rgba(243,91,37,.14), transparent 65%); --inner-action-size: .875rem; --inner-fact-size: clamp(1.5rem, 3vw, 2.25rem); } :root, [data-theme] { --offer-backdrop: rgba(8, 9, 13, .72); --offer-art: linear-gradient(145deg, #F35B25, #BD3510); --offer-ticket-shadow: 0 24px 48px rgba(0, 0, 0, .18); --offer-popup-title: clamp(1.75rem, 3vw, 2.5rem); }