/* ========================================================================== Home Cinema — design tokens Every colour, size and timing used by the interface comes from here. ========================================================================== */ :root { color-scheme: dark; /* ---- Palette: a screening room ------------------------------------- */ --velvet-0: #08070a; /* deepest: player letterbox, scrims */ --velvet-1: #0f0d12; /* page background */ --velvet-2: #16131a; /* raised: details panel, menus */ --velvet-3: #1e1a23; /* hover, inputs */ --velvet-4: #2a2530; /* hairlines when one is unavoidable */ --ivory: #f4efe7; --ivory-rgb: 244 239 231; --brass: #e6b35c; --brass-rgb: 230 179 92; --brass-bright: #f3c879; --brass-deep: #b98630; --on-brass: #1c1307; /* Semantic roles — components use these, not the raw palette. */ --bg-primary: var(--velvet-1); --bg-secondary: var(--velvet-2); --surface: var(--velvet-2); --surface-raised: var(--velvet-3); --surface-glass: rgb(22 19 26 / 0.72); --surface-glass-light: rgb(var(--ivory-rgb) / 0.14); --surface-glass-hover: rgb(var(--ivory-rgb) / 0.22); --line: rgb(var(--ivory-rgb) / 0.08); --line-strong: rgb(var(--ivory-rgb) / 0.16); --scrim: rgb(8 7 10 / 0.74); --text-primary: var(--ivory); --text-secondary: rgb(var(--ivory-rgb) / 0.74); --text-tertiary: rgb(var(--ivory-rgb) / 0.54); --text-disabled: rgb(var(--ivory-rgb) / 0.34); --text-on-light: #120f14; --accent: var(--brass); --accent-hover: var(--brass-bright); --accent-pressed: var(--brass-deep); --on-accent: var(--on-brass); --danger: #f07a6c; --success: #6fcca8; --warning: #f2c14e; --focus-ring: var(--brass); /* ---- Typography ------------------------------------------------------ */ --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Condensed grotesques that ship with each platform: the poster-title voice. */ --font-display: "Avenir Next Condensed", "Roboto Condensed", "Bahnschrift Condensed", Bahnschrift, "HelveticaNeue-CondensedBold", "Helvetica Neue Condensed", "Arial Narrow", sans-serif-condensed, "DejaVu Sans Condensed", var(--font-ui); --text-2xs: 0.6875rem; /* 11px badges */ --text-xs: 0.75rem; /* 12px fine print */ --text-sm: 0.875rem; /* 14px metadata, controls */ --text-md: 1rem; /* 16px body */ --text-lg: 1.125rem; /* 18px lead copy */ --text-xl: clamp(1.125rem, 0.98rem + 0.45vw, 1.375rem); /* rail headings */ --text-2xl: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); /* page titles */ --text-display-s: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); --text-display-m: clamp(2.25rem, 1.5rem + 2.6vw, 4rem); --text-display-l: clamp(2.75rem, 1.6rem + 4.2vw, 5.75rem); --leading-tight: 1.05; --leading-snug: 1.3; --leading-body: 1.55; --tracking-display: 0.004em; --tracking-wordmark: 0.2em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Spacing (4px base) --------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --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; --space-24: 6rem; /* ---- Layout ---------------------------------------------------------- */ --gutter: clamp(1rem, 3.6vw, 4.25rem); --content-max: 1680px; --reading-max: 40rem; --topbar-h: 4.25rem; --tabbar-h: 0px; --rail-gap: clamp(0.5rem, 0.6vw, 0.75rem); --section-gap: clamp(1.75rem, 2.6vw, 2.75rem); --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* ---- Shape: radius follows hierarchy, not habit ------------------- */ --radius-xs: 3px; /* badges */ --radius-sm: 4px; /* artwork */ --radius-md: 6px; /* buttons, inputs */ --radius-lg: 10px; /* menus, details panel */ --radius-xl: 14px; /* sign-in card */ --radius-round: 999px;/* avatars, round icon buttons */ /* ---- Depth ------------------------------------------------------------ */ --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px rgb(0 0 0 / 0.25); --shadow-2: 0 8px 24px -6px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.3); --shadow-3: 0 24px 60px -12px rgb(0 0 0 / 0.75), 0 8px 20px -8px rgb(0 0 0 / 0.5); --shadow-4: 0 40px 100px -20px rgb(0 0 0 / 0.85), 0 12px 32px -12px rgb(0 0 0 / 0.6); --glow-brass: 0 0 0 1px rgb(var(--brass-rgb) / 0.35), 0 0 32px -6px rgb(var(--brass-rgb) / 0.45); /* Film grain, rendered once by the browser and tiled. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* ---- Motion ------------------------------------------------------------ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-in: cubic-bezier(0.5, 0, 0.75, 0); --dur-instant: 90ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 340ms; --dur-scene: 700ms; /* backdrop cross-fades only */ /* ---- Layers ------------------------------------------------------------ */ --z-raised: 2; --z-rail-arrows: 5; --z-topbar: 50; --z-tabbar: 50; --z-preview: 60; --z-menu: 70; --z-modal: 100; --z-player: 200; --z-toast: 300; --z-splash: 1000; } /* Phones: the bottom tab bar takes over primary navigation. */ @media (max-width: 719px) { :root { --topbar-h: 3.5rem; --tabbar-h: calc(3.75rem + var(--safe-bottom)); } } /* Big monitors and TVs: scale the whole rem-based system up. */ @media (min-width: 1920px) { html { font-size: 106.25%; } } @media (min-width: 2560px) { html { font-size: 125%; } } html.tv { font-size: 137.5%; }