/* ========================================================================== vxl — the default_v2 DESIGN SYSTEM and layout token layer. ── Why this file exists ───────────────────────────────────────────────── Vodlix is a white-label platform: the same templates ship to hundreds of tenants, each with their own palette and typography set in Appearance. So NO layout may contain a designed colour of its own. Every surface, border, scrim, shadow and state in the storefront is DERIVED here from the tenant's own `--vod-*` variables, and the layouts consume only these derived tokens. Two hard rules follow from that: 1. **Never assume a dark theme.** A tenant can set `--vod-body-bg` to white. Scrims are therefore mixed from `--vod-body-bg` (never from black), and contrast/ink is mixed from `--vod-white-color` — which is the tenant's FOREGROUND colour, whatever its name suggests. On a light palette both flip automatically and the layout still reads. 2. **Literal colours may appear only as a var() fallback** — the value used when a tenant has somehow not set that variable at all. They are never the operative value. ── What a layout may do ───────────────────────────────────────────────── A layout variant (layout-cinematic.css, layout-grid.css, layout-showcase.css) may ONLY: a. override the --vxl-* scale values under its own [data-layout] scope, and b. add component styles under that same scope. It may not restyle another namespace's internals, and it may not introduce a raw colour. That rule is what keeps four layouts from forking the other 22 stylesheets, and what keeps all four white-label-safe. ── The scales ─────────────────────────────────────────────────────────── Ink --vxl-ink / -muted / -faint text at three emphases Surface --vxl-surface-1 / -2 / -3 raised planes, low → high Line --vxl-line / -strong hairlines and borders Scrim --vxl-scrim-* gradient stops over artwork Space --vxl-space-1 … -8 4 → 64, the only spacing values Radius --vxl-radius-sm / -md / -lg / -pill Elevation --vxl-shadow-1 / -2 / -3 Motion --vxl-ease, --vxl-dur-1 / -2 / -3 Layout --vxl-gutter, --vxl-header-h, --vxl-section-gap, --vxl-card-gap, --vxl-card-radius, --vxl-rail-title-*, --vxl-hero-h, --vxl-content-max Consumers outside this system carry their CLASSIC value as the var() fallback (e.g. `gap: var(--vxl-card-gap, 5px)`), so the classic layout is pixel-identical whether or not a token is set. That is deliberate: classic is the migration-safe baseline. ========================================================================== */ :root { /* ---- ink: text at three emphases, mixed from the tenant's foreground ---- */ --vxl-ink: var(--vod-white-color, #fff); --vxl-ink-muted: color-mix(in srgb, var(--vod-white-color, #fff) 72%, transparent); --vxl-ink-faint: color-mix(in srgb, var(--vod-white-color, #fff) 55%, transparent); /* ---- surfaces: planes lifted off the body, in the tenant's own colour --- */ --vxl-surface-1: color-mix(in srgb, var(--vod-white-color, #fff) 4%, transparent); --vxl-surface-2: color-mix(in srgb, var(--vod-white-color, #fff) 8%, transparent); --vxl-surface-3: color-mix(in srgb, var(--vod-white-color, #fff) 14%, transparent); /* ---- lines --------------------------------------------------------------- */ --vxl-line: color-mix(in srgb, var(--vod-white-color, #fff) 12%, transparent); --vxl-line-strong: color-mix(in srgb, var(--vod-white-color, #fff) 26%, transparent); /* ---- scrims: ALWAYS mixed from the body background, never from black, so a light tenant gets a white scrim and its artwork stays legible ----- */ --vxl-scrim-weak: color-mix(in srgb, var(--vod-body-bg, #000) 35%, transparent); --vxl-scrim: color-mix(in srgb, var(--vod-body-bg, #000) 62%, transparent); --vxl-scrim-strong: color-mix(in srgb, var(--vod-body-bg, #000) 86%, transparent); --vxl-scrim-solid: var(--vod-body-bg, #000); /* ---- liquid glass ------------------------------------------------------- Translucent chrome that takes its colour from the page beneath it. Three tenant variables drive the whole effect, all editable in Appearance → Effects and all live-previewable (they are `--vod-*`, so they ride the existing web-scope save and the postMessage preview channel): --vod-glass-blur backdrop blur radius (0px disables the effect) --vod-glass-alpha how opaque the pane is (1 = solid, no see-through) --vod-glass-tint the colour the pane is tinted with. Unset, it falls back to the page background, which is why glass reads as smoked black on a dark theme — set it to warm it up, cool it down, or push it to the brand. Setting blur to 0px and alpha to 1 turns glass off everywhere at once without a single `display:none` — the surfaces stay, they just become solid. That is the toggle. --vxl-glass-raised is the *lit* variant used for a selected pill: the same material with a little of the tenant's ink mixed in, which is what marks "this one is active" without resorting to a flat block of colour. The specular top edge (--vxl-glass-highlight) is what makes glass read as glass rather than as a blurred rectangle: a 1px inset highlight along the top, mixed from the tenant's own ink so it inverts on a light palette. */ --vxl-glass-alpha: var(--vod-glass-alpha, 0.82); --vxl-glass-tint: var(--vod-glass-tint, var(--vod-body-bg, #000)); --vxl-glass: color-mix(in srgb, var(--vxl-glass-tint) calc(var(--vxl-glass-alpha) * 100%), transparent); --vxl-glass-raised: color-mix(in srgb, var(--vod-white-color, #fff) 16%, var(--vxl-glass)); --vxl-glass-blur: blur(var(--vod-glass-blur, 12px)) saturate(1.4); --vxl-glass-highlight: inset 0 1px 0 0 color-mix(in srgb, var(--vod-white-color, #fff) 14%, transparent); /* ---- accent: the tenant's brand colour and readable text on top of it ---- */ --vxl-accent: var(--vod-primary, #e50914); /* The embedded vodlix-html5-player derives its accent as --vdx-primary: var(--vhtv-template-primary, #e50914). Feeding that hook here makes EVERY player instance — watch page, ambient trailers, the info modal's preview — follow the tenant brand (#5350 item 12; the watch/live templates also set it directly from the player template). */ --vhtv-template-primary: var(--vod-primary, #e50914); --vxl-accent-hover: color-mix(in srgb, var(--vod-primary, #e50914) 84%, var(--vod-body-bg, #000)); --vxl-accent-soft: color-mix(in srgb, var(--vod-primary, #e50914) 16%, transparent); --vxl-on-accent: var(--vod-btn-primary-text, #fff); /* ---- 2026 DS interaction tokens ----------------------------------------- Ported from the marketing site's locked design system (vodlix-site-statamic docs/ds/vodlix-2026.css) with every fixed brand colour re-expressed through the tenant derivation — the DS's hardcoded reds become mixes of --vod-primary, so a tenant's own brand drives the same language. */ /* a wash of the brand — chip fills, selected states, tinted notes */ --vxl-accent-tint: color-mix(in srgb, var(--vod-primary, #e50914) 14%, transparent); /* the DS card-hover border: a hint of brand, never a hard outline */ --vxl-hover-line: color-mix(in srgb, var(--vod-primary, #e50914) 45%, transparent); /* the neutral rail progress bars / meters / skeletons sit on */ --vxl-track: color-mix(in srgb, var(--vod-white-color, #fff) 10%, transparent); /* soft neutral button fill (the DS ink-primary tier, demoted to secondary here — storefront primaries are the tenant accent, an owner decision) */ --vxl-btn-soft: color-mix(in srgb, var(--vod-white-color, #fff) 8%, transparent); --vxl-btn-soft-hover: color-mix(in srgb, var(--vod-white-color, #fff) 12%, transparent); /* keyboard focus: 2px brand ring on controls; inputs add the 3px tint halo */ --vxl-focus-ring: var(--vxl-accent); --vxl-focus-tint: color-mix(in srgb, var(--vod-primary, #e50914) 22%, transparent); /* semantic status. Fixed hues are permitted here — status is not brand identity — using the DS's dark-lifted values since the platform defaults dark; tints keep them legible on a light tenant palette too. */ --vxl-ok: #39e575; --vxl-ok-tint: color-mix(in srgb, var(--vxl-ok) 18%, transparent); --vxl-warn: #facc15; --vxl-warn-tint: color-mix(in srgb, var(--vxl-warn) 18%, transparent); --vxl-danger: #f87171; --vxl-danger-tint: color-mix(in srgb, var(--vxl-danger) 18%, transparent); /* ---- space: 4-based. These are the ONLY spacing values a layout uses ----- */ --vxl-space-1: 4px; --vxl-space-2: 8px; --vxl-space-3: 12px; --vxl-space-4: 16px; --vxl-space-5: 24px; --vxl-space-6: 32px; --vxl-space-7: 48px; --vxl-space-8: 64px; /* ---- radius -------------------------------------------------------------- */ --vxl-radius-sm: 4px; --vxl-radius-md: 8px; --vxl-radius-lg: 16px; --vxl-radius-pill: 999px; /* labeled buttons resolve their shape through this token so a layout can restate the era in one line (classic squares it off below) */ --vxl-btn-radius: var(--vxl-radius-pill); /* ---- elevation: neutral shadows so they read on any palette -------------- */ --vxl-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.18); --vxl-shadow-2: 0 10px 26px rgba(0, 0, 0, 0.34); --vxl-shadow-3: 0 20px 48px rgba(0, 0, 0, 0.46); /* ---- motion: two easing curves and five durations for the whole system -- dur-0 instant press/tooltip micro · dur-1 hover/color feedback · dur-2 reveals, slides and card motion · dur-3 ambient/large fades · dur-4 billboard-scale emphasis. --vxl-ease (ease-out) is the default; --vxl-ease-io only for symmetric surface morphs (billboard shrink, height expands) that read the same forwards and backwards. */ --vxl-ease: cubic-bezier(0.215, 0.61, 0.355, 1); --vxl-ease-io: cubic-bezier(0.4, 0, 0.2, 1); --vxl-dur-0: 0.1s; --vxl-dur-1: 0.15s; --vxl-dur-2: 0.25s; --vxl-dur-3: 0.4s; --vxl-dur-4: 0.5s; /* ---- type: one scale, tenant font inherited from the body --------------- */ --vxl-text-xs: 0.75rem; --vxl-text-sm: 0.85rem; --vxl-text-md: 0.95rem; --vxl-text-lg: 1.1rem; --vxl-tracking-tight: -0.02em; --vxl-tracking-wide: 0.14em; /* ---- 2026 DS type scale (heading system lives in components.css) -------- The DS values verbatim (h1 44 / h2 28 / h3 17 / lede 18 / body 15.5 / small 13 / btn 14.5), on the tenant's own font — the marketing site's font pair was a marketing decision; the scale is the design language. --vxl-fs-body is a COMPONENT measure (buttons, notes, fields): the page body's size stays the tenant's --vod-font-size and is never overridden. */ --vxl-fs-h1: clamp(28px, 4vw, 44px); --vxl-fs-h2: 28px; --vxl-fs-h3: 17px; --vxl-fs-lede: 18px; --vxl-fs-body: 15.5px; --vxl-fs-small: 13px; --vxl-fs-btn: 14.5px; --vxl-num: tabular-nums; /* ---- layout scale: classic's values, promoted from var() fallbacks ------ These used to exist only under [data-layout] scopes, with every consumer carrying classic's value as its var() fallback. Promoting them here makes classic explicit instead of implicit; each value is copied verbatim from the dominant fallback in the codebase, so classic renders pixel-identical. Layout sheets still override under body[data-layout] (wins by inheritance proximity), and mobile-app.css pins --vxl-gutter: 16px on body ≤991.98px. NOT promoted: --vxl-section-gap (grid.css consumers carry two different fallbacks — one root value would move one of them) and --vxl-content-max (no classic consumer). ⚠ --vxl-card-gap must equal GAPS.classic in styles/default_v2/layout/block/_layout_resolver.html — the swiper reads the JS constant, CSS reads this token; if they disagree, rails drift. */ --vxl-gutter: 3%; --vxl-header-h: 68px; --vxl-card-gap: 5px; --vxl-card-radius: 6px; --vxl-rail-title-size: clamp(1.15rem, 1.5vw, 1.45rem); --vxl-rail-title-weight: 600; --vxl-hero-h: calc(100vh - 64px); } /* -------------------------------------------------------------------------- Classic's era marker: square labeled buttons. Only the CTA shape changes — icon circles, chips, badges and nav pills keep their geometry. -------------------------------------------------------------------------- */ body[data-layout="classic"] { --vxl-btn-radius: 0; } /* -------------------------------------------------------------------------- Rail density arrangement option (body[data-lo-rail-density="dense"]): tighter card gap, one more card per rail (the +1 lives in _layout_resolver.html — ⚠ these px values MUST equal its dense GAPS map). Desktop only; mobile keeps the app shell's own spacing. Cinematic and grid restate their own dense values in their layout sheets. -------------------------------------------------------------------------- */ @media (min-width: 992px) { body[data-lo-rail-density="dense"] { --vxl-card-gap: 4px; } } /* rail_title_style="bold": louder row headings via the same tokens every rail already reads. The [data-layout] bump outweighs the per-layout token sets regardless of sheet order. */ @media (min-width: 992px) { body[data-layout][data-lo-rail-title-style="bold"] { --vxl-rail-title-size: clamp(1.4rem, 1.95vw, 1.8rem); --vxl-rail-title-weight: 700; } /* the heading markup carries Bootstrap's .font-weight-normal, whose !important beats any token consumer — matched here */ body[data-layout][data-lo-rail-title-style="bold"] .swiperHolder .swiperTitle, body[data-layout][data-lo-rail-title-style="bold"] .vxg-rail__title { font-weight: 700 !important; } } /* -------------------------------------------------------------------------- Focus: a visible, brand-coloured focus ring everywhere the storefront is keyboard-navigable. :focus-visible only, so pointer users never see it. -------------------------------------------------------------------------- */ .vxl-pill:focus-visible, .vxl-btn:focus-visible, [data-layout] .vxs-btn:focus-visible, [data-layout] .vxlg-band__more:focus-visible { outline: 2px solid var(--vxl-accent); outline-offset: 2px; border-radius: var(--vxl-radius-sm); } /* ========================================================================== Shared components ========================================================================== */ /* -------------------------------------------------------------------------- vxl-pillbar — RETIRED. It replaced the Genres dropdown on desktop browse pages with every category inline, HBO-style — which on a real tenant with 30+ categories is a strip running clean off the right edge of the screen with no affordance that it scrolls. The Genres dropdown is the desktop filter again (cateselector renders it; browse.css styles it). Kept as a rule so any straggler markup stays invisible rather than unstyled. -------------------------------------------------------------------------- */ .vxl-pillbar { display: none; } /* the chip itself — used by the grid layout's promoted mobile pills */ .vxl-pill { display: inline-flex; align-items: center; gap: var(--vxl-space-2); flex-shrink: 0; padding: 6px var(--vxl-space-4); border: 1px solid var(--vxl-line-strong); border-radius: var(--vxl-radius-pill); background: transparent; color: var(--vxl-ink); font-size: var(--vxl-text-sm); font-weight: 500; line-height: 1.5; text-decoration: none; white-space: nowrap; transition: background-color var(--vxl-dur-1) ease, border-color var(--vxl-dur-1) ease, color var(--vxl-dur-1) ease; } .vxl-pill:hover { background: var(--vxl-surface-2); color: var(--vxl-ink); text-decoration: none; } /* The selected chip is the same glass, lit — not a solid block of ink. It keeps the tenant's text colour and lets the artwork behind it show through, which is what makes a nav read as a material rather than a set of buttons. */ .vxl-pill.is-active { background: var(--vxl-glass-raised); -webkit-backdrop-filter: var(--vxl-glass-blur); backdrop-filter: var(--vxl-glass-blur); border-color: var(--vxl-line-strong); color: var(--vxl-ink); box-shadow: var(--vxl-glass-highlight); } @media (prefers-reduced-motion: reduce) { .vxl-pill { transition: none; } } /* ========================================================================== Liquid glass ========================================================================== `.vxl-glass` is the one place the effect is defined; every glass surface in the storefront composes it. Because the blur radius and the pane opacity are tenant variables, an operator can dial the whole system from clear glass to solid chrome, or switch it off, without any surface changing shape. -------------------------------------------------------------------------- */ .vxl-glass { background: var(--vxl-glass); -webkit-backdrop-filter: var(--vxl-glass-blur); backdrop-filter: var(--vxl-glass-blur); border: 1px solid var(--vxl-line); box-shadow: var(--vxl-glass-highlight), var(--vxl-shadow-1); } /* No backdrop-filter support = no glass. Fall back to the solid page colour rather than leaving a see-through pane with unreadable text on top. */ @supports not (backdrop-filter: blur(1px)) { .vxl-glass { background: var(--vxl-scrim-solid); } } /* -------------------------------------------------------------------------- Header — the active nav item becomes a glass pill. This is the one piece of chrome the eye returns to constantly, so it is where the material reads best: it tells you where you are without a hard colour change. -------------------------------------------------------------------------- */ .vxh__navLink.is-active { position: relative; padding-inline: var(--vxl-space-4); border-radius: var(--vxl-radius-pill); background: var(--vxl-glass-raised); -webkit-backdrop-filter: var(--vxl-glass-blur); backdrop-filter: var(--vxl-glass-blur); box-shadow: var(--vxl-glass-highlight); transition: background-color var(--vxl-dur-2) ease; } /* the search field reads as a glass well rather than a black box */ .vxh__searchInput { background-color: var(--vxl-glass) !important; -webkit-backdrop-filter: var(--vxl-glass-blur); backdrop-filter: var(--vxl-glass-blur); } @media (prefers-reduced-motion: reduce) { .vxh__navLink.is-active { transition: none; } }