/* =============================================================
ZAVVION EVENTS · zavvion-ui.css
Design system + components + 16 active selectable theme skins.
Author: Zavvion Events frontend.
Pair with: /assets/js/zavvion-ui.js
------------------------------------------------------------- */
/* ---------- 0. FONTS (free Google Fonts, CDN-hosted) -------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* ---------- 1. CORE TOKENS (theme-independent) -------------- */
:root {
/* Type scale (modular, ratio 1.2) */
--fz-12: 0.75rem;
--fz-13: 0.8125rem;
--fz-14: 0.875rem;
--fz-15: 0.9375rem;
--fz-16: 1rem;
--fz-18: 1.125rem;
--fz-20: 1.25rem;
--fz-24: 1.5rem;
--fz-30: 1.875rem;
--fz-36: 2.25rem;
--fz-48: 3rem;
--fz-60: 3.75rem;
--fz-72: 4.5rem;
/* Font families */
--font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
--font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Spacing scale */
--sp-0: 0;
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.25rem;
--sp-6: 1.5rem;
--sp-8: 2rem;
--sp-10: 2.5rem;
--sp-12: 3rem;
--sp-16: 4rem;
--sp-20: 5rem;
--sp-24: 6rem;
--sp-32: 8rem;
/* Radii */
--r-xs: 4px;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 20px;
--r-2xl: 28px;
--r-full: 999px;
/* Elevation (shadows scale w/ theme via --shadow-tint) */
--shadow-1: 0 1px 2px var(--shadow-tint, rgba(0,0,0,.06));
--shadow-2: 0 4px 12px var(--shadow-tint, rgba(0,0,0,.08));
--shadow-3: 0 12px 32px var(--shadow-tint, rgba(0,0,0,.12));
--shadow-4: 0 24px 64px var(--shadow-tint, rgba(0,0,0,.16));
/* Motion */
--ease-out: cubic-bezier(.2,.8,.2,1);
--ease-spring: cubic-bezier(.34,1.56,.64,1);
--d-fast: 120ms;
--d-base: 220ms;
--d-slow: 420ms;
/* Layout */
--container-narrow: 880px;
--container: 1200px;
--container-wide: 1440px;
--sidebar-w: 248px;
--sidebar-w-collapsed: 72px;
--header-h: 72px;
/* Status palette (theme can override) */
--c-success: #22c55e;
--c-success-soft: rgba(34,197,94,.12);
--c-warn: #f59e0b;
--c-warn-soft: rgba(245,158,11,.14);
--c-danger: #ef4444;
--c-danger-soft: rgba(239,68,68,.14);
--c-info: #3b82f6;
--c-info-soft: rgba(59,130,246,.14);
/* Focus ring */
--focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
}
/* ===========================================================
2. THEMES - active approved skin foundation
Apply via: or another approved skin.
Each theme exposes the full surface palette so the same
component CSS works untouched.
=========================================================== */
/* ---------- 2.1 Base default — black, champagne gold, brushed
platinum, ivory. Quiet-luxury: opera house programme,
jewellery boutique, private members' club. Restraint with
the gold; silver doing the structural work; ivory for the
page. ---------- */
:root {
/* Foundations — warm-neutral black, polished obsidian */
--bg-base: #08080B;
--bg-raise: #0E0E12;
--bg-sunken: #050507;
--surface: #131318;
--surface-2: #1B1B22;
--surface-3: #25252E;
/* Lines — fine platinum hairlines; gold leaf at strength */
--line: rgba(229, 222, 200, 0.07);
--line-strong: rgba(201, 169, 97, 0.32);
/* Text — warm ivory body, aged platinum mute, deep brushed silver soft */
--text: #F5F1E8;
--text-muted: #B8B0A0;
--text-soft: #76705F;
/* Accent — antique champagne gold + pearl gold secondary */
--accent: #C9A961;
--accent-soft: rgba(201, 169, 97, 0.12);
--accent-ink: #08070B;
--accent-2: #E5D4A6;
--accent-2-soft: rgba(229, 212, 166, 0.10);
/* Status — re-tuned to harmonize with the precious-metal palette */
--c-success: #8FA377;
--c-success-soft: rgba(143, 163, 119, 0.14);
--c-warn: #C9A961;
--c-warn-soft: rgba(201, 169, 97, 0.14);
--c-danger: #B85C5C;
--c-danger-soft: rgba(184, 92, 92, 0.14);
--c-info: #A8B8C8;
--c-info-soft: rgba(168, 184, 200, 0.14);
--shadow-tint: rgba(0, 0, 0, 0.72);
/* Hero — gold gleam over polished obsidian; restrained */
--hero-grad: radial-gradient(140% 90% at 28% 0%, rgba(201, 169, 97, 0.16), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(229, 212, 166, 0.06), transparent 70%),
linear-gradient(180deg, #08080B 0%, #050507 100%);
color-scheme: dark;
}
/* ===========================================================
3. RESET & BASE
=========================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
max-width: 100%;
overflow-x: hidden;
}
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-body);
font-size: var(--fz-15);
line-height: 1.55;
background: var(--bg-base);
color: var(--text);
font-feature-settings: 'ss01','cv11';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
max-width: 100%;
overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: var(--r-sm);
}
/* Skip link */
.zv-skip {
position: absolute; left: -9999px; top: 0; z-index: 9999;
background: var(--accent); color: var(--accent-ink);
padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
}
.zv-skip:focus { left: var(--sp-4); top: var(--sp-4); }
/* ===========================================================
4. TYPOGRAPHY
=========================================================== */
h1, h2, h3, h4, h5 {
font-family: var(--font-display);
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.02em;
margin: 0;
color: var(--text);
font-variation-settings: 'opsz' 64;
}
h1 { font-size: clamp(var(--fz-36), 5.5vw, var(--fz-72)); font-weight: 700; }
h2 { font-size: clamp(var(--fz-30), 3.6vw, var(--fz-48)); }
h3 { font-size: clamp(var(--fz-24), 2.4vw, var(--fz-30)); }
h4 { font-size: var(--fz-20); font-variation-settings: 'opsz' 36; }
h5 { font-size: var(--fz-16); font-variation-settings: 'opsz' 14; }
.zv-display {
font-family: var(--font-display);
font-weight: 700;
font-variation-settings: 'opsz' 144;
letter-spacing: -0.03em;
line-height: 0.95;
}
.zv-eyebrow {
font-size: var(--fz-12);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 600;
}
.zv-lead {
font-size: var(--fz-18);
color: var(--text-muted);
line-height: 1.55;
max-width: 60ch;
}
.zv-mono { font-family: var(--font-mono); font-size: var(--fz-13); letter-spacing: -0.01em; }
.zv-muted { color: var(--text-muted); }
.zv-soft { color: var(--text-soft); }
/* ===========================================================
5. LAYOUT PRIMITIVES
=========================================================== */
.zv-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-6); }
.zv-container--narrow { max-width: var(--container-narrow); }
.zv-container--wide { max-width: var(--container-wide); }
.zv-stack > * + * { margin-top: var(--sp-4); }
.zv-stack-lg > * + * { margin-top: var(--sp-8); }
.zv-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }
.zv-row-between { display: flex; gap: var(--sp-4); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.zv-grid { display: grid; gap: var(--sp-6); }
.zv-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.zv-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.zv-grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.zv-section { padding-block: clamp(var(--sp-12), 8vw, var(--sp-24)); }
.zv-divider { height: 1px; background: var(--line); border: 0; margin-block: var(--sp-8); }
@media (max-width: 640px) {
.zv-container,
.zv-hero__inner {
padding-inline: var(--sp-4);
}
}
.zv-login-main {
min-height: calc(100vh - var(--header-h));
padding-block: clamp(var(--sp-8), 6vw, var(--sp-14));
}
.zv-login-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--sp-6);
align-items: start;
}
.zv-login-card {
background: color-mix(in oklab, var(--surface) 92%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: var(--shadow-2);
}
.zv-login-card h1,
.zv-login-card h2 {
margin: var(--sp-2) 0 var(--sp-5);
}
.zv-login-card h1 {
font-size: clamp(3rem, 6vw, 5.25rem);
line-height: 0.9;
}
.zv-login-card h2 {
font-size: clamp(2rem, 3vw, 3rem);
line-height: 1;
}
.zv-login-card .zv-field + .zv-field,
.zv-login-card .zv-field + .zv-btn,
.zv-login-card .zv-field + .zv-help,
.zv-login-card .zv-help + form,
.zv-login-card .zv-help + .zv-btn {
margin-top: var(--sp-3);
}
.zv-login-card .zv-btn {
margin-top: var(--sp-4);
}
@media (max-width: 860px) {
.zv-login-grid { grid-template-columns: 1fr; }
}
/* ===========================================================
6. HEADER (public + console)
=========================================================== */
.zv-header {
position: sticky; top: 0; z-index: 50;
height: var(--header-h);
display: flex; align-items: center;
background: color-mix(in oklab, var(--bg-base) 86%, transparent);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--line);
}
.zv-header__inner { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--sp-6);
display: flex; align-items: center; gap: var(--sp-6); }
.zv-logo {
display: inline-flex; align-items: center; justify-content: center;
width: clamp(148px, 15vw, 184px); height: 58px; flex: 0 0 auto;
background: url('../img/zavvion-logo.svg') center / contain no-repeat;
color: transparent; text-decoration: none; font-size: 0; line-height: 0;
}
.zv-logo__mark {
display: none !important;
}
.zv-logo__mark::after {
content: none;
}
.zv-nav { display: flex; gap: var(--sp-1); align-items: center; }
.zv-nav a {
color: var(--text-muted); text-decoration: none; font-weight: 500; font-size: var(--fz-14);
padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
transition: color var(--d-fast), background var(--d-fast);
}
.zv-nav a:hover, .zv-nav a[aria-current="page"] { color: var(--text); background: var(--surface); }
.zv-header__spacer { flex: 1; }
.zv-header__actions { display: flex; gap: var(--sp-2); align-items: center; justify-content: flex-end; }
.zv-header__actions [data-zv-auth-action] { display: inline-flex; align-items: center; flex: 0 0 auto; }
.zv-header__auth-control { white-space: nowrap; }
/* Mobile nav toggle */
.zv-burger {
display: none; width: 40px; height: 40px; border-radius: var(--r-sm);
border: 1px solid var(--line); background: transparent; color: var(--text); align-items: center; justify-content: center;
}
.zv-burger span, .zv-burger::before, .zv-burger::after {
content: ''; display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px;
}
.zv-burger span {
width: 22px;
height: 22px;
margin: 0;
background: currentColor;
border-radius: 0;
-webkit-mask: url('../img/themes/menu.png') center / contain no-repeat;
mask: url('../img/themes/menu.png') center / contain no-repeat;
}
.zv-burger span::before {
content: none;
}
.zv-burger[aria-expanded="true"] span::before {
content: none;
}
.zv-burger::before,
.zv-burger::after {
display: none;
}
@media (max-width: 880px) {
.zv-header {
height: auto;
min-height: var(--header-h);
}
.zv-header__inner {
min-height: var(--header-h);
position: relative;
padding-inline: var(--sp-3);
gap: var(--sp-3);
}
.zv-nav {
display: none;
position: absolute;
inset: 100% var(--sp-3) auto;
z-index: 60;
flex-direction: column;
align-items: stretch;
gap: var(--sp-1);
padding: var(--sp-2);
background: color-mix(in oklab, var(--bg-raise) 94%, transparent);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: var(--shadow-3);
}
.zv-nav.is-open { display: flex; }
.zv-nav a {
min-height: 38px;
align-items: center;
display: flex;
}
.zv-burger { display: inline-flex; }
.zv-logo { width: 136px; height: 50px; }
}
@media (max-width: 640px) {
:root { --header-h: 58px; }
.zv-header__inner {
padding-inline: var(--sp-2);
gap: var(--sp-2);
}
.zv-logo {
width: 112px;
height: 42px;
}
.zv-header__spacer { flex: 1 1 auto; }
.zv-header__actions {
gap: 4px;
flex: 0 0 auto;
margin-left: auto;
}
.zv-header__actions .zv-btn--sm {
height: 30px;
padding-inline: 8px;
font-size: var(--fz-12);
border-radius: var(--r-sm);
}
.zv-header__actions [data-zv-account-action] {
min-width: 52px;
}
.zv-header__actions [data-zv-browse-action],
.zv-header__actions .zv-header__auth-control {
width: 34px;
min-width: 34px;
height: 34px;
padding: 0;
font-size: 0;
line-height: 0;
color: var(--text);
background: transparent;
border: 1px solid var(--line);
border-radius: var(--r-sm);
position: relative;
overflow: hidden;
}
.zv-header__actions .zv-header__auth-control > span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.zv-header__actions [data-zv-browse-action]::before {
content: '';
width: 20px;
height: 20px;
background: currentColor;
-webkit-mask: url('../img/themes/browse.png') center / contain no-repeat;
mask: url('../img/themes/browse.png') center / contain no-repeat;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.zv-header__actions [data-zv-browse-action]::after { content: none; }
.zv-header__actions .zv-header__auth-control::before {
content: '';
width: 20px;
height: 20px;
background: currentColor;
-webkit-mask: url('../img/themes/login.png') center / contain no-repeat;
mask: url('../img/themes/login.png') center / contain no-repeat;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.zv-header__actions .zv-header__auth-control[data-zv-auth-state="signed-in"]::before {
-webkit-mask-image: url('../img/themes/logout.png');
mask-image: url('../img/themes/logout.png');
}
.zv-burger {
width: 34px;
height: 34px;
}
.zv-burger span,
.zv-burger::before,
.zv-burger::after {
width: 20px;
height: 20px;
}
}
@media (max-width: 420px) {
.zv-header__inner {
gap: var(--sp-2);
}
.zv-header__actions {
gap: var(--sp-1);
}
.zv-header__actions .zv-btn {
height: 42px;
padding-inline: var(--sp-3);
font-size: var(--fz-12);
}
.zv-header__actions > a.zv-btn.zv-btn--primary[href="./events.html"] {
width: 42px;
min-width: 42px;
height: 42px;
padding: 0;
font-size: 0;
line-height: 0;
}
.zv-header__actions .zv-header__auth-control {
width: 42px;
min-width: 42px;
height: 42px;
padding: 0;
border: 1px solid var(--line);
border-radius: var(--r-sm);
}
.zv-header__actions .zv-header__auth-control::before {
width: 22px;
height: 22px;
}
.zv-burger { width: 42px; height: 42px; }
.zv-burger span { width: 24px; height: 24px; }
.zv-logo { width: 122px; height: 46px; }
}
/* ===========================================================
7. BUTTONS
=========================================================== */
.zv-btn {
--_bg: var(--surface);
--_fg: var(--text);
--_brd: var(--line-strong);
display: inline-flex; align-items: center; justify-content: center;
gap: var(--sp-2); padding: 0 var(--sp-5); height: 44px;
font-family: var(--font-body); font-size: var(--fz-14); font-weight: 600;
letter-spacing: -0.005em;
background: var(--_bg); color: var(--_fg);
border: 1px solid var(--_brd); border-radius: var(--r-md);
cursor: pointer; user-select: none;
transition: transform var(--d-fast), background var(--d-fast), border-color var(--d-fast),
box-shadow var(--d-fast), color var(--d-fast);
text-decoration: none; white-space: nowrap;
}
.zv-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); text-decoration: none; }
.zv-btn:active { transform: translateY(0); box-shadow: var(--shadow-1); }
.zv-btn[disabled], .zv-btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.zv-btn--primary { --_bg: var(--accent); --_fg: var(--accent-ink); --_brd: transparent; }
.zv-btn--primary:hover { --_bg: color-mix(in oklab, var(--accent) 88%, white); }
.zv-btn--ghost { --_bg: transparent; --_brd: transparent; }
.zv-btn--ghost:hover { --_bg: var(--surface); }
.zv-btn--outline { --_bg: transparent; --_brd: var(--line-strong); }
.zv-btn--danger { --_bg: var(--c-danger); --_fg: white; --_brd: transparent; }
.zv-btn--success { --_bg: var(--c-success); --_fg: white; --_brd: transparent; }
.zv-btn--lg { height: 56px; padding-inline: var(--sp-8); font-size: var(--fz-16); border-radius: var(--r-lg); }
.zv-btn--sm { height: 34px; padding-inline: var(--sp-3); font-size: var(--fz-13); border-radius: var(--r-sm); }
.zv-btn--icon { padding: 0; width: 44px; }
.zv-btn--block { display: flex; width: 100%; }
/* ===========================================================
8. FORMS
=========================================================== */
.zv-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.zv-label { font-size: var(--fz-13); font-weight: 600; color: var(--text); }
.zv-help { font-size: var(--fz-12); color: var(--text-muted); }
.zv-fee-grid {
display: grid;
gap: var(--sp-3);
align-items: start;
}
.zv-fee-grid--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.zv-fee-grid--three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.zv-fee-grid .zv-field {
min-width: 0;
}
.zv-fee-grid .zv-input,
.zv-fee-grid .zv-select {
width: 100%;
}
@media (max-width: 820px) {
.zv-fee-grid--two,
.zv-fee-grid--three {
grid-template-columns: 1fr;
}
}
.zv-error { font-size: var(--fz-12); color: var(--c-danger); display: flex; gap: 6px; align-items: center; }
.zv-alert {
display: grid;
gap: 3px;
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--surface);
color: var(--text);
}
.zv-alert--success { border-color: color-mix(in oklab, var(--c-success) 42%, var(--line)); background: var(--c-success-soft); }
.zv-alert--warning { border-color: color-mix(in oklab, var(--c-warn) 42%, var(--line)); background: var(--c-warn-soft); }
.zv-input, .zv-select, .zv-textarea {
width: 100%; min-height: 44px;
padding: var(--sp-3) var(--sp-4);
font: inherit; font-size: var(--fz-14);
background: var(--surface); color: var(--text);
border: 1px solid var(--line-strong);
border-radius: var(--r-md);
transition: border-color var(--d-fast), background var(--d-fast), box-shadow var(--d-fast);
}
.zv-input::placeholder, .zv-textarea::placeholder { color: var(--text-soft); }
.zv-input:focus, .zv-select:focus, .zv-textarea:focus {
border-color: var(--accent); outline: none;
box-shadow: 0 0 0 3px var(--accent-soft);
}
.zv-textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.zv-select {
appearance: none; -webkit-appearance: none; padding-right: var(--sp-10);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right var(--sp-4) center; background-size: 12px 8px;
}
.zv-ticket-tools {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--sp-3);
align-items: start;
}
.zv-ticket-tool {
min-width: 0;
display: grid;
grid-template-rows: minmax(24px, auto) 44px;
gap: var(--sp-2);
}
.zv-ticket-tool .zv-label {
min-height: 24px;
display: flex;
align-items: end;
}
.zv-ticket-tool__control {
height: 44px;
display: flex;
align-items: stretch;
gap: var(--sp-2);
}
.zv-promo-control .zv-input {
flex: 1 1 auto;
min-width: 0;
}
.zv-promo-control .zv-btn {
flex: 0 0 auto;
min-height: 44px;
}
.zv-ticket-tool__control .zv-select { height: 44px; }
@media (max-width: 760px) {
.zv-ticket-tools { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
.zv-ticket-tool__control { flex-wrap: wrap; }
.zv-promo-control .zv-btn { width: 100%; }
}
/* search field */
.zv-search {
position: relative; display: flex; align-items: center;
background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-full);
padding: 0 var(--sp-3) 0 var(--sp-5); height: 48px;
}
.zv-search input {
flex: 1; min-height: 0; height: 100%; background: transparent; border: 0; padding: 0;
color: var(--text); font-size: var(--fz-15);
}
.zv-search input:focus { outline: none; box-shadow: none; }
.zv-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.zv-filter-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--sp-3);
align-items: end;
}
@media (max-width: 1180px) {
.zv-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.zv-filter-grid { grid-template-columns: 1fr; }
}
/* checkbox / radio */
.zv-check { display: inline-flex; gap: var(--sp-2); align-items: center; cursor: pointer; user-select: none; font-size: var(--fz-14); }
.zv-check input { accent-color: var(--accent); width: 18px; height: 18px; }
/* file upload */
.zv-upload {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
padding: var(--sp-8); text-align: center;
background: var(--surface); color: var(--text-muted);
transition: border-color var(--d-fast), background var(--d-fast), color var(--d-fast);
cursor: pointer;
}
.zv-upload:hover, .zv-upload.is-drag { border-color: var(--accent); color: var(--text); background: color-mix(in oklab, var(--surface) 80%, var(--accent-soft)); }
/* ===========================================================
9. CARDS, PANELS, BADGES
=========================================================== */
.zv-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: clip;
transition: transform var(--d-base), box-shadow var(--d-base), border-color var(--d-base);
}
.zv-card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--line-strong); }
.zv-card__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--surface-2); }
.zv-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--ease-out); }
.zv-card--hover:hover .zv-card__media img { transform: scale(1.04); }
.zv-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.zv-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fz-20); line-height: 1.2; letter-spacing: -0.02em; }
.zv-card__meta { display: flex; gap: var(--sp-3); font-size: var(--fz-13); color: var(--text-muted); flex-wrap: wrap; }
.zv-card__price { font-family: var(--font-mono); font-size: var(--fz-13); color: var(--text); }
.zv-panel {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--sp-6);
}
.zv-panel--sunken { background: var(--bg-sunken); }
.zv-badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--fz-12); font-weight: 600;
padding: 4px 10px; border-radius: var(--r-full);
background: var(--surface-2); color: var(--text-muted);
border: 1px solid var(--line);
}
.zv-badge--accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.zv-badge--success { background: var(--c-success-soft); color: var(--c-success); border-color: transparent; }
.zv-badge--warn { background: var(--c-warn-soft); color: var(--c-warn); border-color: transparent; }
.zv-badge--danger { background: var(--c-danger-soft); color: var(--c-danger); border-color: transparent; }
.zv-badge--info { background: var(--c-info-soft); color: var(--c-info); border-color: transparent; }
.zv-badge::before {
content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9;
}
.zv-badge--plain::before { display: none; }
/* ===========================================================
10. TABLES
=========================================================== */
.zv-table-wrap {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.zv-table { width: 100%; border-collapse: collapse; font-size: var(--fz-14); }
.zv-table th {
text-align: left; font-weight: 600; color: var(--text-muted); font-size: var(--fz-12);
text-transform: uppercase; letter-spacing: 0.06em;
padding: var(--sp-3) var(--sp-4);
background: var(--bg-sunken); border-bottom: 1px solid var(--line);
}
.zv-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.zv-table tbody tr:last-child td { border-bottom: 0; }
.zv-table tbody tr { transition: background var(--d-fast); }
.zv-table tbody tr:hover { background: var(--surface-2); }
.zv-table--compact th, .zv-table--compact td { padding: var(--sp-2) var(--sp-3); }
.zv-table__detail td { background: var(--surface-2); color: var(--text-muted); }
.zv-ticket-catalog-table { min-width: 760px; }
.zv-ticket-catalog-table th:first-child,
.zv-ticket-catalog-table td:first-child { min-width: 250px; }
.zv-table-muted-line {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
overflow: hidden;
line-height: 1.45;
max-width: 34rem;
}
.zv-mini-breakdown { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.zv-mini-breakdown span {
display: inline-flex; align-items: center; gap: 6px;
border: 1px solid var(--line); border-radius: var(--r-pill);
padding: 5px 10px; background: var(--surface);
}
/* ===========================================================
11. MODAL
=========================================================== */
.zv-modal-backdrop {
position: fixed; inset: 0; background: color-mix(in oklab, var(--bg-sunken) 70%, transparent);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
z-index: 100; padding: var(--sp-4);
animation: zvFade var(--d-base) var(--ease-out);
}
.zv-modal {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
box-shadow: var(--shadow-4);
max-width: 560px; width: 100%; max-height: 90vh; overflow: auto;
animation: zvRise var(--d-base) var(--ease-spring);
}
.zv-modal__head { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.zv-modal__body { padding: var(--sp-6); }
.zv-modal__foot { padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--line); display: flex; gap: var(--sp-2); justify-content: flex-end; }
.zv-seat-type-picker {
display: grid;
gap: var(--sp-4);
}
.zv-seat-type-picker__lead {
display: grid;
gap: var(--sp-2);
}
.zv-seat-type-picker__lead strong {
font-size: var(--fz-20);
line-height: 1.15;
}
.zv-seat-type-picker__lead p {
margin: 0;
}
.zv-seat-type-picker__list {
display: grid;
gap: var(--sp-2);
}
.zv-seat-type-option {
width: 100%;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: var(--sp-3);
align-items: center;
padding: var(--sp-4);
text-align: left;
color: var(--text);
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: var(--r-lg);
cursor: pointer;
transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}
.zv-seat-type-option:hover {
transform: translateY(-1px);
border-color: color-mix(in oklab, var(--accent) 38%, var(--line));
background: color-mix(in oklab, var(--accent-soft) 40%, var(--surface-2));
}
.zv-seat-type-option.is-selected {
border-color: color-mix(in oklab, var(--accent) 68%, var(--line));
background: color-mix(in oklab, var(--accent-soft) 58%, var(--surface-2));
box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 24%, transparent);
}
.zv-seat-type-option__icon {
width: 2.6rem;
height: 2.6rem;
display: grid;
place-items: center;
font-size: 1.1rem;
border-radius: var(--r-md);
background: color-mix(in oklab, var(--accent-soft) 60%, transparent);
}
.zv-seat-type-option__copy {
display: grid;
gap: 2px;
}
.zv-seat-type-option__copy strong {
font-size: var(--fz-16);
line-height: 1.2;
}
.zv-seat-type-option__copy span {
color: var(--text-muted);
font-size: var(--fz-13);
}
.zv-seat-type-option__price {
font-weight: 700;
white-space: nowrap;
}
.zv-modal .zv-seat-type-picker__list {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.zv-modal button.zv-seat-type-option {
appearance: none;
-webkit-appearance: none;
width: 100%;
min-height: 5.75rem;
display: grid;
grid-template-columns: 2.75rem minmax(0, 1fr) max-content;
gap: var(--sp-3);
align-items: center;
}
.zv-modal button.zv-seat-type-option:focus-visible {
outline: 3px solid color-mix(in oklab, var(--accent) 58%, white);
outline-offset: 3px;
}
.zv-seat-type-option__icon {
font-size: 0;
}
.zv-seat-type-option__icon::before {
content: "";
width: .95rem;
height: .95rem;
border-radius: 999px;
border: 2px solid color-mix(in oklab, var(--accent) 56%, var(--text-muted));
}
.zv-seat-type-option.is-selected .zv-seat-type-option__icon::before {
background: radial-gradient(circle, var(--accent) 0 42%, transparent 45%);
border-color: var(--accent);
}
@media (max-width: 560px) {
.zv-modal {
max-width: calc(100vw - 12px);
}
.zv-modal__head,
.zv-modal__body,
.zv-modal__foot {
padding-left: var(--sp-4);
padding-right: var(--sp-4);
}
.zv-modal__foot {
flex-direction: column;
align-items: stretch;
}
.zv-modal__foot .zv-btn {
width: 100%;
}
.zv-modal button.zv-seat-type-option {
grid-template-columns: 2.5rem minmax(0, 1fr);
}
.zv-seat-type-option__price {
grid-column: 2;
justify-self: start;
}
}
@keyframes zvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes zvRise { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* Mandatory customer terms gate */
.zv-terms-gate {
position: fixed;
inset: 0;
z-index: 320;
display: grid;
place-items: center;
padding: var(--sp-4);
color: var(--text);
background:
radial-gradient(circle at top left, color-mix(in oklab, var(--accent) 18%, transparent), transparent 34rem),
color-mix(in oklab, var(--bg-sunken) 86%, black);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.zv-terms-gate__card {
width: min(100%, 660px);
max-height: min(92vh, 760px);
overflow: auto;
padding: clamp(var(--sp-5), 4vw, var(--sp-7));
background: color-mix(in oklab, var(--surface) 96%, black);
border: 1px solid var(--line-strong);
border-radius: var(--r-xl);
box-shadow: var(--shadow-4);
animation: zvRise var(--d-base) var(--ease-spring);
}
.zv-terms-gate__card h2 {
margin: var(--sp-1) 0 var(--sp-3);
font-size: clamp(1.65rem, 5vw, 2.45rem);
letter-spacing: 0;
line-height: 1.05;
}
.zv-terms-gate__copy {
display: grid;
gap: var(--sp-3);
color: var(--text-muted);
}
.zv-terms-gate__copy p {
margin: 0;
font-size: var(--fz-16);
}
.zv-terms-gate__list {
display: grid;
gap: var(--sp-2);
margin: 0;
padding-left: 1.2rem;
}
.zv-terms-gate__check {
align-items: flex-start;
margin-top: var(--sp-5);
padding: var(--sp-3);
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--surface-2);
}
.zv-terms-gate__actions {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
margin-top: var(--sp-4);
}
/* ===========================================================
12. STEPPER (checkout flow)
=========================================================== */
.zv-stepper { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.zv-step {
display: flex; align-items: center; gap: var(--sp-2);
font-size: var(--fz-13); color: var(--text-muted);
padding: var(--sp-2) var(--sp-3); border-radius: var(--r-full);
background: var(--surface); border: 1px solid var(--line);
}
.zv-step__num {
width: 22px; height: 22px; border-radius: 50%;
background: var(--surface-2); color: var(--text-muted);
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
}
.zv-step.is-active { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.zv-step.is-active .zv-step__num { background: var(--accent); color: var(--accent-ink); }
.zv-step.is-done .zv-step__num { background: var(--c-success); color: white; }
/* ===========================================================
13. TABS
=========================================================== */
.zv-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); }
.zv-tab {
position: relative; padding: var(--sp-3) var(--sp-4);
background: transparent; border: 0; color: var(--text-muted);
font-weight: 600; font-size: var(--fz-14); cursor: pointer;
border-bottom: 2px solid transparent; margin-bottom: -1px;
transition: color var(--d-fast), border-color var(--d-fast);
}
.zv-tab:hover { color: var(--text); }
.zv-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
/* ===========================================================
14. SIDEBAR (organiser/admin/scanner consoles)
=========================================================== */
.zv-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
body.zv-auth-checking .zv-shell,
body.zv-auth-checking .zv-header__actions {
visibility: hidden;
}
.zv-side {
background: var(--bg-sunken);
border-right: 1px solid var(--line);
display: flex; flex-direction: column;
position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.zv-side__head { padding: var(--sp-5) var(--sp-5) var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); }
.zv-side__group { padding: var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
.zv-side__group-title { font-size: var(--fz-12); text-transform: uppercase; letter-spacing: 0.10em; color: var(--text-soft); padding: var(--sp-2) var(--sp-3); }
.zv-side__link {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
color: var(--text-muted); text-decoration: none; font-size: var(--fz-14); font-weight: 500;
border-radius: var(--r-md);
transition: background var(--d-fast), color var(--d-fast);
}
.zv-side__link:hover { color: var(--text); background: var(--surface); text-decoration: none; }
.zv-side__link.is-active { color: var(--text); background: var(--surface-2); }
.zv-side__link.is-active::before { content: ''; width: 3px; height: 18px; background: var(--accent); border-radius: 2px; margin-left: -8px; margin-right: 5px; }
.zv-side__icon { width: 18px; height: 18px; flex: 0 0 18px; opacity: .9; }
.zv-side__foot { margin-top: auto; padding: var(--sp-4); border-top: 1px solid var(--line); }
.zv-main { padding: var(--sp-6) clamp(var(--sp-6), 4vw, var(--sp-10)); min-width: 0; }
.zv-page-head {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
margin-bottom: var(--sp-6);
}
.zv-page-head h1 { font-size: var(--fz-30); font-variation-settings: 'opsz' 36; }
@media (min-width: 961px) {
.zv-shell { transition: grid-template-columns var(--d-base) var(--ease-out); }
.zv-shell.is-sidebar-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
.zv-shell.is-sidebar-collapsed .zv-side {
overflow-x: hidden;
align-items: stretch;
}
.zv-shell.is-sidebar-collapsed .zv-side__heading {
height: 1px;
margin: var(--sp-2) var(--sp-3);
padding: 0;
overflow: hidden;
color: transparent;
border-top: 1px solid var(--line);
}
.zv-shell.is-sidebar-collapsed .zv-side__link {
position: relative;
justify-content: center;
gap: 0;
min-height: 42px;
padding-inline: var(--sp-2);
font-size: 0;
}
.zv-shell.is-sidebar-collapsed .zv-side__link > span {
font-size: var(--fz-14);
min-width: 22px;
text-align: center;
}
.zv-shell.is-sidebar-collapsed .zv-side__link.is-active::before {
position: absolute;
left: 6px;
margin: 0;
}
.zv-shell.is-sidebar-collapsed .zv-side > div:last-child { display: none !important; }
}
@media (max-width: 960px) {
.zv-shell { grid-template-columns: 1fr; }
.zv-side {
position: fixed; inset: 0 auto 0 0; width: min(280px, 84vw); z-index: 60;
transform: translateX(-100%); transition: transform var(--d-base) var(--ease-out);
box-shadow: var(--shadow-3);
}
.zv-side.is-open { transform: translateX(0); }
.zv-shell-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55; display: none;
}
.zv-shell-overlay.is-open { display: block; }
}
/* ===========================================================
15. STATS/WIDGETS
=========================================================== */
.zv-stat {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: var(--sp-5);
}
.zv-stat__label { font-size: var(--fz-12); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.zv-stat__value {
font-family: var(--font-display); font-weight: 700;
font-size: var(--fz-36); letter-spacing: -0.02em; line-height: 1; margin-top: var(--sp-2);
font-variation-settings: 'opsz' 96;
}
.zv-stat__delta { font-size: var(--fz-13); margin-top: var(--sp-2); display: inline-flex; gap: 4px; align-items: center; }
.zv-stat__delta--up { color: var(--c-success); }
.zv-stat__delta--down { color: var(--c-danger); }
/* sparkline (svg-friendly container) */
.zv-spark { height: 36px; width: 100%; opacity: .8; }
/* ===========================================================
16. EMPTY / LOADING / ERROR STATES
=========================================================== */
.zv-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: var(--sp-12) var(--sp-6); text-align: center; gap: var(--sp-3);
color: var(--text-muted); border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
background: var(--surface);
}
.zv-empty__icon { width: 48px; height: 48px; opacity: .7; }
.zv-empty__title { font-family: var(--font-display); font-size: var(--fz-20); color: var(--text); }
.zv-skel {
background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
background-size: 200% 100%;
animation: zvShimmer 1.4s linear infinite;
border-radius: var(--r-md);
}
@keyframes zvShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.zv-skel--text { height: 14px; }
.zv-skel--title { height: 22px; }
.zv-skel--card { height: 280px; }
/* ===========================================================
17. HERO (public)
=========================================================== */
.zv-hero {
position: relative;
padding-block: clamp(var(--sp-16), 12vw, var(--sp-32));
overflow: hidden;
background: var(--hero-grad);
isolation: isolate;
}
.zv-event-page .zv-hero.has-event-hero-image {
background-image:
linear-gradient(90deg, rgba(5, 5, 6, 0.94) 0%, rgba(5, 5, 6, 0.78) 42%, rgba(5, 5, 6, 0.46) 100%),
radial-gradient(90% 80% at 28% 55%, rgba(201, 169, 97, 0.22), transparent 62%),
var(--event-hero-image),
var(--hero-grad);
background-position: center, center, center;
background-size: cover, cover, cover;
background-repeat: no-repeat;
}
.zv-hero::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(1px 1px at 20% 30%, color-mix(in oklab, var(--text) 18%, transparent) 50%, transparent 51%),
radial-gradient(1px 1px at 60% 70%, color-mix(in oklab, var(--text) 14%, transparent) 50%, transparent 51%),
radial-gradient(1px 1px at 80% 20%, color-mix(in oklab, var(--text) 18%, transparent) 50%, transparent 51%);
opacity: .35;
}
.zv-hero__inner { position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-6); }
.zv-hero h1 .zv-italic { font-style: italic; color: var(--accent-2); font-weight: 500; }
.zv-hero__lead { margin-top: var(--sp-5); }
.zv-hero__cta { margin-top: var(--sp-8); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.zv-hero__strip {
margin-top: var(--sp-12); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--sp-2); padding: var(--sp-3); background: color-mix(in oklab, var(--surface) 70%, transparent);
border: 1px solid var(--line); border-radius: var(--r-xl); backdrop-filter: blur(10px);
}
/* ===========================================================
18. SEAT MAP
=========================================================== */
.zv-seatmap-wrap {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: var(--sp-4); overflow-x: auto; overflow-y: hidden;
max-width: 100%;
}
.zv-seatmap-stage {
width: min(88%, 760px);
max-width: 100%;
min-height: 24px;
margin: 0 auto var(--sp-4);
border: 2px solid var(--line-strong);
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in oklab, var(--surface-2) 72%, transparent);
color: var(--text);
font-family: var(--font-mono);
font-size: var(--fz-12);
letter-spacing: 0;
line-height: 1;
text-transform: none;
}
.zv-seating-field {
min-width: min(520px, 100%);
min-height: 270px;
border: 2px solid var(--line-strong);
border-radius: 2px;
display: grid;
place-items: center;
padding: var(--sp-5) var(--sp-4);
background:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px),
color-mix(in oklab, var(--surface) 88%, var(--bg-base));
background-size: 36px 36px;
}
.zv-seating-field #seat-map-host {
width: 100%;
display: grid;
place-items: center;
}
/* Event detail seat-map override. The public event page can coexist with
homepage components named "stage"; keep the seat-map label as a slim bar. */
.zv-event-page .zv-seatmap-wrap {
overflow: auto;
padding: var(--sp-3);
}
.zv-event-page .zv-seatmap-wrap .zv-stage,
.zv-event-page .zv-seatmap-stage {
width: min(92%, 780px) !important;
min-width: min(320px, 100%) !important;
height: 28px !important;
min-height: 28px !important;
max-height: 28px !important;
margin: 0 auto var(--sp-3) !important;
padding: 0 var(--sp-3) !important;
border: 2px solid var(--line-strong) !important;
border-radius: 2px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: color-mix(in oklab, var(--surface-2) 72%, transparent) !important;
color: var(--text) !important;
font-family: var(--font-mono) !important;
font-size: var(--fz-12) !important;
letter-spacing: 0 !important;
line-height: 1 !important;
text-transform: none !important;
position: static !important;
box-shadow: none !important;
}
.zv-event-page .zv-seatmap-wrap .zv-stage::before,
.zv-event-page .zv-seatmap-wrap .zv-stage::after,
.zv-event-page .zv-seatmap-stage::before,
.zv-event-page .zv-seatmap-stage::after {
content: none !important;
display: none !important;
animation: none !important;
}
.zv-event-page .zv-seating-field {
min-height: 240px;
max-height: 380px;
align-content: start;
}
.zv-event-page .zv-seatmap {
margin: var(--sp-2) auto;
}
.zv-seatmap { display: grid; gap: 6px; justify-content: center; min-width: max-content; }
.zv-row-label { font-family: var(--font-mono); font-size: var(--fz-12); color: var(--text-soft); }
.zv-seat-row { display: grid; grid-auto-flow: column; gap: 6px; align-items: center; justify-content: center; }
.zv-seat {
width: 28px; height: 28px; min-width: 28px; min-height: 28px; border-radius: 6px 6px 3px 3px;
background: var(--surface-2); border: 1px solid var(--line-strong);
font-size: 10px; font-weight: 600; color: var(--text-muted);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; transition: background var(--d-fast), transform var(--d-fast), border-color var(--d-fast);
line-height: 1;
}
.zv-seat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zv-seat:hover:not(.is-taken):not(.is-blocked) { transform: translateY(-2px); border-color: var(--accent); }
.zv-seat:not(.is-selected):not(.is-taken):not(.is-blocked) {
background:
linear-gradient(180deg, color-mix(in oklab, #fff 18%, transparent), transparent 58%),
var(--seat-section-color, var(--surface-2));
border-color: color-mix(in oklab, var(--seat-section-color, var(--line-strong)) 78%, #000);
box-shadow: inset 0 -7px 12px color-mix(in oklab, #000 16%, transparent);
color: var(--seat-section-ink, var(--text));
}
.zv-seat.is-selected {
background:
linear-gradient(180deg, color-mix(in oklab, #fff 22%, transparent), transparent 56%),
var(--accent);
color: var(--accent-ink);
border-color: transparent;
}
.zv-seat.is-taken { background: var(--bg-sunken); color: var(--text-soft); cursor: not-allowed; opacity: .55; }
.zv-seat.is-blocked {
background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--seat-section-color, var(--text-soft)) 45%, transparent) 0 2px, transparent 2px 6px);
border-color: color-mix(in oklab, var(--seat-section-color, var(--line-strong)) 42%, transparent);
cursor: default;
opacity: .55;
}
.zv-seat--vip { background: var(--accent-2-soft); border-color: var(--accent-2); color: var(--accent-2); }
.zv-seat--vip.is-selected { background: var(--accent-2); color: var(--accent-ink); }
.zv-seat--accessible::after {
content: '♿'; position: absolute; font-size: 8px;
}
@media (max-width: 640px) {
.zv-seatmap-wrap { padding: var(--sp-3); }
.zv-seatmap-stage {
width: 100%;
}
.zv-seating-field {
min-height: 230px;
padding: var(--sp-4) var(--sp-3);
}
.zv-event-page #seats > .zv-row-between {
align-items: flex-start;
flex-direction: column;
gap: var(--sp-1);
}
.zv-event-page #seats > .zv-row-between .zv-soft {
font-size: var(--fz-12);
}
.zv-event-page #seats .zv-seat-guidance {
padding: var(--sp-3);
font-size: var(--fz-14);
}
.zv-event-page #seats .zv-seat-section-switcher {
align-items: stretch;
max-width: 100%;
width: 100%;
}
.zv-event-page #seats .zv-seat-map-switcher {
align-items: flex-start;
max-width: 100%;
width: 100%;
}
.zv-event-page #seats .zv-seat-section-switcher__label {
width: 100%;
padding-inline: 0;
text-align: center;
}
.zv-event-page #seats .zv-seat-section-tabs {
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: var(--sp-1);
width: 100%;
scrollbar-width: none;
}
.zv-event-page #seats .zv-seat-map-tabs {
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: var(--sp-1);
width: 100%;
scrollbar-width: none;
}
.zv-event-page #seats .zv-seat-section-tabs::-webkit-scrollbar {
display: none;
}
.zv-event-page #seats .zv-seat-map-tabs::-webkit-scrollbar {
display: none;
}
.zv-event-page #seats .zv-seat-section-tab {
flex: 0 0 auto;
white-space: nowrap;
}
.zv-event-page #seats .zv-seat-map-tab {
flex: 0 0 auto;
white-space: nowrap;
}
.zv-event-page #seats .zv-seat-section-panel__nonreserved {
max-width: 100%;
padding: var(--sp-3);
}
.zv-event-page #seats .zv-seat-section-panel__title {
font-size: var(--fz-20);
}
}
.zv-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-4); font-size: var(--fz-12); color: var(--text-muted); }
.zv-legend__sw {
width: 14px; height: 14px; border-radius: 4px 4px 2px 2px; display: inline-block; margin-right: 6px;
vertical-align: -3px; border: 1px solid var(--line-strong);
}
.zv-legend__sw--avail { background: var(--surface-2); }
.zv-legend__sw--sel { background: var(--accent); border-color: transparent; }
.zv-legend__sw--vip { background: var(--accent-2-soft); border-color: var(--accent-2); }
.zv-legend__sw--taken { background: var(--bg-sunken); }
/* hold countdown */
.zv-hold-bar {
display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
background: var(--accent-2-soft); border: 1px solid var(--accent-2);
border-radius: var(--r-md); color: var(--text);
font-size: var(--fz-13);
}
.zv-hold-bar strong { font-family: var(--font-mono); font-variation-settings: normal; }
.zv-hold-bar--checkout {
margin-bottom: var(--sp-3);
}
.zv-hold-bar.is-expired {
background: var(--c-danger-soft);
border-color: color-mix(in oklab, var(--c-danger) 64%, var(--line-strong));
}
.zv-inventory { min-width: 190px; display: grid; gap: var(--sp-2); }
.zv-inventory__meta {
display: flex; justify-content: space-between; gap: var(--sp-3);
font-size: var(--fz-13); color: var(--text-muted);
}
.zv-inventory__meta strong { color: var(--text); font-variation-settings: "wght" 700; }
.zv-inventory__bar {
height: 8px; border-radius: var(--r-full); overflow: hidden;
background: var(--surface-2); border: 1px solid var(--line);
}
.zv-inventory__bar span {
display: block; height: 100%; border-radius: inherit;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
/* ===========================================================
19. TICKET / QR CARD
=========================================================== */
.zv-ticket {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-xl); overflow: hidden;
display: grid; grid-template-columns: 1fr 220px;
position: relative;
}
.zv-ticket::before, .zv-ticket::after {
content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%;
background: var(--bg-base); border: 1px solid var(--line);
top: 50%; transform: translateY(-50%);
}
.zv-ticket::before { left: calc(100% - 220px - 12px); }
.zv-ticket::after { display: none; }
.zv-ticket__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.zv-ticket__qr {
background:
repeating-conic-gradient(var(--text) 0% 25%, var(--surface) 0% 50%) 0/16px 16px,
var(--surface);
border-left: 1.5px dashed var(--line-strong);
display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
}
.zv-ticket__qr svg { width: 100%; height: auto; }
@media (max-width: 560px) {
.zv-ticket { grid-template-columns: 1fr; }
.zv-ticket__qr { border-left: 0; border-top: 1.5px dashed var(--line-strong); aspect-ratio: 1.5; }
.zv-ticket::before { display: none; }
}
/* ===========================================================
20. CHECKOUT SUMMARY (sticky on mobile)
=========================================================== */
.zv-summary { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
@media (max-width: 880px) {
.zv-summary { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40;
border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-3);
transform: translateY(calc(100% - 64px)); transition: transform var(--d-base) var(--ease-out);
}
.zv-summary.is-open { transform: translateY(0); }
.zv-summary__handle { display: flex !important; }
}
.zv-summary__handle {
display: none;
width: 100%;
height: 64px;
padding: 0 var(--sp-5);
align-items: center;
justify-content: space-between;
cursor: pointer;
border: 0;
background: transparent;
color: inherit;
text-align: left;
font: inherit;
}
.zv-summary__handle-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 var(--sp-5);
border-radius: var(--r-full);
background: var(--accent);
color: #090704;
font-weight: 800;
font-size: var(--fz-16);
}
.zv-seat-ticket-line {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
gap: var(--sp-3);
align-items: center;
padding: var(--sp-3);
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--surface-2);
}
.zv-seat-ticket-line__label {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.zv-seat-ticket-line__controls {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--sp-2);
}
.zv-seat-ticket-line__type {
min-width: 0;
display: grid;
gap: 2px;
}
.zv-seat-ticket-line__select {
min-width: 168px;
min-height: 38px;
padding-block: var(--sp-2);
}
.zv-basket-line {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--sp-3) !important;
align-items: center;
padding: var(--sp-3);
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--surface-2);
}
.zv-basket-line__copy {
min-width: 0;
display: grid;
gap: 2px;
}
.zv-basket-line__copy strong,
.zv-basket-line__copy span {
overflow-wrap: anywhere;
}
.zv-basket-line__controls {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--sp-1);
}
.zv-basket-line__controls .zv-mini-btn {
min-height: 36px;
}
.zv-basket-line__qty {
min-width: 2.4rem;
text-align: center;
color: var(--text);
}
@media (max-width: 560px) {
.zv-seat-ticket-line {
grid-template-columns: 1fr;
}
.zv-seat-ticket-line__controls {
justify-content: stretch;
flex-wrap: wrap;
}
.zv-seat-ticket-line__select {
flex: 1 1 100%;
}
.zv-basket-line {
grid-template-columns: 1fr;
}
.zv-basket-line__controls {
justify-content: stretch;
}
.zv-basket-line__controls .zv-mini-btn {
flex: 1 1 44px;
min-height: 44px;
}
}
/* ===========================================================
21. FOOTER
=========================================================== */
.zv-footer {
background: var(--bg-sunken); border-top: 1px solid var(--line);
padding-block: var(--sp-12) var(--sp-6); margin-top: var(--sp-16);
color: var(--text-muted); font-size: var(--fz-14);
}
.zv-footer h5 { font-size: var(--fz-12); text-transform: uppercase; letter-spacing: 0.10em; color: var(--text); margin-bottom: var(--sp-3); font-family: var(--font-body); font-weight: 700; }
.zv-footer a { color: var(--text-muted); text-decoration: none; display: block; padding: 4px 0; }
.zv-footer a:hover { color: var(--text); }
.zv-footer__grid { display: grid; gap: var(--sp-8); grid-template-columns: 2fr repeat(3, 1fr); }
.zv-footer__bar { margin-top: var(--sp-10); padding-top: var(--sp-5); border-top: 1px solid var(--line);
display: flex; gap: var(--sp-4); justify-content: space-between; align-items: center; flex-wrap: wrap;
font-size: var(--fz-12); color: var(--text-soft); }
.zv-footer__bar > *,
.zv-footer__nav {
min-width: 0;
}
.zv-footer__nav { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.zv-footer__nav a { display: inline-flex; padding: 0; min-width: 0; }
.zv-footer__disclaimer { max-width: 720px; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 720px) {
.zv-footer__grid { grid-template-columns: 1fr 1fr; }
.zv-footer {
padding-block: var(--sp-8) var(--sp-5);
margin-top: var(--sp-10);
}
.zv-footer__bar {
align-items: flex-start;
gap: var(--sp-3);
}
.zv-footer__bar > *,
.zv-footer__nav,
.zv-footer__disclaimer {
width: 100%;
}
.zv-footer__nav {
gap: var(--sp-2) var(--sp-3);
}
}
/* ===========================================================
22. ANNOUNCEMENT BAR + DISCLAIMER
=========================================================== */
.zv-announce {
background: var(--accent); color: var(--accent-ink);
padding: var(--sp-2) var(--sp-4); text-align: center; font-size: var(--fz-13);
}
.zv-announce a { color: inherit; text-decoration: underline; }
.zv-disclaimer {
font-size: var(--fz-12); color: var(--text-soft); line-height: 1.5;
padding: var(--sp-4); background: var(--bg-sunken); border: 1px solid var(--line);
border-radius: var(--r-md);
}
/* ===========================================================
23. TOAST
=========================================================== */
.zv-toasts { position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: 200; display: flex; flex-direction: column; gap: var(--sp-2); }
.zv-toast {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-3);
display: flex; gap: var(--sp-3); align-items: center; max-width: 380px;
animation: zvRise var(--d-base) var(--ease-spring);
}
.zv-toast--success { border-left: 3px solid var(--c-success); }
.zv-toast--error { border-left: 3px solid var(--c-danger); }
.zv-toast--info { border-left: 3px solid var(--c-info); }
/* ===========================================================
24. SCANNER UI
=========================================================== */
.zv-scan-stage {
position: relative; aspect-ratio: 1; background: #000; border-radius: var(--r-xl);
overflow: hidden; max-width: 460px; width: 100%; margin-inline: auto;
}
.zv-scan-stage::before {
content: ''; position: absolute; inset: 12%; border: 2px solid color-mix(in oklab, var(--accent) 80%, white);
border-radius: var(--r-lg); box-shadow: 0 0 0 9999px rgba(0,0,0,.35) inset;
}
.zv-scan-stage::after {
content: ''; position: absolute; left: 12%; right: 12%; top: 50%; height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
animation: zvScan 2.5s ease-in-out infinite;
}
@keyframes zvScan { 0%,100% { top: 14%; } 50% { top: 86%; } }
.zv-scan-result {
font-family: var(--font-display); font-size: var(--fz-30); padding: var(--sp-6);
border-radius: var(--r-lg); text-align: center;
}
.zv-scan-result--ok { background: var(--c-success-soft); color: var(--c-success); }
.zv-scan-result--bad { background: var(--c-danger-soft); color: var(--c-danger); }
.zv-scan-result--warn { background: var(--c-warn-soft); color: var(--c-warn); }
/* ===========================================================
25. RESPONSIVE + UTILITIES
=========================================================== */
.zv-show-md { display: none; }
@media (min-width: 720px) { .zv-show-md { display: revert; } .zv-hide-md { display: none !important; } }
.zv-text-center { text-align: center; }
.zv-text-right { text-align: right; }
.zv-flex-1 { flex: 1; }
.zv-mt-0 { margin-top: 0 !important; }
.zv-mt-2 { margin-top: var(--sp-2); }
.zv-mt-4 { margin-top: var(--sp-4); }
.zv-mt-6 { margin-top: var(--sp-6); }
.zv-mb-2 { margin-bottom: var(--sp-2); }
.zv-mb-4 { margin-bottom: var(--sp-4); }
.zv-gap-2 { gap: var(--sp-2); }
.zv-gap-4 { gap: var(--sp-4); }
.zv-w-full { width: 100%; }
.zv-rounded { border-radius: var(--r-md); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* ---- print: ticket-friendly ---- */
@media print {
.zv-header, .zv-footer, .zv-side, .zv-hero, .zv-announce { display: none !important; }
body { background: white; color: black; }
.zv-ticket { border-color: #000; }
}
/* ===========================================================
30. EXTENSIONS — additional classes used by checkout/account/
organiser/admin/scanner pages. Kept in one append-block so the
token system above is the source of truth.
=========================================================== */
/* Token aliases (legacy/short forms used in the page templates) */
:root {
--fs-xs: var(--fz-12);
--fs-sm: var(--fz-14);
--fs-md: var(--fz-16);
--fs-lg: var(--fz-20);
}
/* Generic utility */
.zv-text-muted { color: var(--text-muted); }
.zv-text-soft { color: var(--text-soft); }
.zv-mono { font-family: var(--font-mono); }
.zv-line { border: 0; border-top: 1px solid var(--line); margin: var(--sp-3) 0; }
.zv-divider { height: 1px; background: var(--line); margin: var(--sp-4) 0; }
.zv-hidden { display: none !important; }
.zv-spacer { flex: 1; }
.zv-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zv-skip { position: absolute; left: -9999px; top: 0; }
.zv-skip:focus { left: var(--sp-2); top: var(--sp-2); padding: var(--sp-2) var(--sp-3);
background: var(--accent); color: var(--accent-ink); border-radius: var(--r-sm); z-index: 999; }
/* Panel header strip */
.zv-panel__head { display: flex; justify-content: space-between; align-items: baseline;
gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.zv-panel__head h3 { margin: 0; font-size: var(--fz-20); }
/* Two-column checkout grid */
.zv-grid--checkout { display: grid; gap: var(--sp-6); grid-template-columns: 1fr 380px; align-items: start; }
@media (max-width: 980px) { .zv-grid--checkout { grid-template-columns: 1fr; } }
/* Summary slot system */
.zv-summary__body { padding: var(--sp-5); background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-xl); }
.zv-summary__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
gap: var(--sp-3); font-size: var(--fz-14); }
.zv-summary__lines li { display: flex; justify-content: space-between; gap: var(--sp-3); }
.zv-summary__totals { font-size: var(--fz-14); display: flex; flex-direction: column; gap: var(--sp-2); }
.zv-summary__grand { padding-top: var(--sp-2); margin-top: var(--sp-1);
border-top: 1px solid var(--line); font-size: var(--fz-18); font-weight: 700;
font-family: var(--font-display); }
/* Stripe mount slot */
.zv-stripe-slot { border: 1.5px dashed var(--line-strong); border-radius: var(--r-md);
padding: var(--sp-5); background: var(--bg-sunken); min-height: 96px; display: grid; place-items: center; }
.zv-stripe-slot__inner { color: var(--text-soft); font-size: var(--fz-14); text-align: center; }
/* Result states (success/cancel/failure) */
.zv-result { text-align: center; padding: var(--sp-10) var(--sp-5); border-radius: var(--r-xl);
border: 1px solid var(--line); background: var(--surface); }
.zv-result__icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
margin: 0 auto var(--sp-4); font-size: 32px; font-weight: 600; }
.zv-result--ok { border-color: rgba(34,197,94,.4); }
.zv-result--ok .zv-result__icon { background: var(--c-success-soft); color: var(--c-success); }
.zv-result--warn { border-color: rgba(245,158,11,.4); }
.zv-result--warn .zv-result__icon { background: var(--c-warn-soft); color: var(--c-warn); }
.zv-result--bad { border-color: rgba(239,68,68,.4); }
.zv-result--bad .zv-result__icon { background: var(--c-danger-soft); color: var(--c-danger); }
.zv-result h2 { margin: 0 0 var(--sp-2); font-size: var(--fz-30); }
/* Ticket card additions (sit alongside the existing zv-ticket / zv-ticket__qr) */
.zv-ticket__main { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.zv-ticket__eyebrow { font-size: var(--fz-12); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--text-muted); }
.zv-ticket__title { margin: 0; font-family: var(--font-display); font-size: var(--fz-24); line-height: 1.15; }
.zv-ticket__meta { color: var(--text-muted); font-size: var(--fz-14); }
.zv-ticket__seat { font-family: var(--font-mono); font-size: var(--fz-14); color: var(--text); padding-top: var(--sp-2); }
.zv-ticket__token { font-family: var(--font-mono); font-size: var(--fz-12); color: var(--text-muted);
text-align: center; margin-top: var(--sp-2); word-break: break-all; }
.zv-ticket--past { opacity: 0.55; filter: grayscale(0.4); }
/* Sidebar console group label */
.zv-side__heading { font-size: var(--fz-12); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--text-soft); padding: var(--sp-3) var(--sp-4) var(--sp-1); margin: var(--sp-2) 0 0; }
/* Sparkline */
.zv-spark { width: 100%; height: 56px; display: block; }
.zv-spark path { fill: none; stroke: var(--accent); stroke-width: 2; }
.zv-spark__fill { fill: var(--accent-soft); stroke: none; opacity: .6; }
/* Stat-grid layout helper */
.zv-stat-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .zv-stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .zv-stat-grid { grid-template-columns: 1fr; } }
/* Feed list */
.zv-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.zv-feed li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); display: flex;
gap: var(--sp-3); align-items: flex-start; font-size: var(--fz-14); }
.zv-feed li:last-child { border-bottom: 0; }
.zv-feed__dot { flex: 0 0 8px; height: 8px; width: 8px; border-radius: 50%; margin-top: 7px;
background: var(--accent); }
.zv-feed__dot--warn { background: var(--c-warn); }
.zv-feed__dot--danger { background: var(--c-danger); }
.zv-feed__dot--ok { background: var(--c-success); }
.zv-feed__time { color: var(--text-soft); font-size: var(--fz-12); margin-left: auto; flex: 0 0 auto; }
/* Pill (status chips inside tables) */
.zv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-full);
font-size: var(--fz-12); font-weight: 600; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.zv-pill--ok { background: var(--c-success-soft); color: var(--c-success); border-color: rgba(34,197,94,.3); }
.zv-pill--warn { background: var(--c-warn-soft); color: var(--c-warn); border-color: rgba(245,158,11,.3); }
.zv-pill--danger { background: var(--c-danger-soft); color: var(--c-danger); border-color: rgba(239,68,68,.3); }
.zv-pill--info { background: var(--c-info-soft); color: var(--c-info); border-color: rgba(59,130,246,.3); }
.zv-pill--muted { color: var(--text-muted); }
/* Theme card (admin Theme Studio) */
.zv-theme-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.zv-theme-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4);
background: var(--surface); position: relative; transition: transform var(--d-base) var(--ease-out), border-color var(--d-base); }
.zv-theme-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.zv-theme-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.zv-theme-card.is-active::after { content: 'Active'; position: absolute; top: var(--sp-2); right: var(--sp-2);
background: var(--accent); color: var(--accent-ink); font-size: var(--fz-12); font-weight: 700;
padding: 2px 8px; border-radius: var(--r-full); }
.zv-theme-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; height: 56px; margin-bottom: var(--sp-3); }
.zv-theme-swatches > span { border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.06); }
.zv-theme-card__name { font-family: var(--font-display); font-size: var(--fz-20); margin: 0 0 4px; }
.zv-theme-card__desc { color: var(--text-muted); font-size: var(--fz-13); min-height: 2.4em; margin: 0 0 var(--sp-3); }
.zv-theme-rotation-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--sp-2);
}
.zv-rotation-skin {
display: flex;
align-items: center;
gap: var(--sp-2);
min-height: 44px;
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--surface);
color: var(--text);
cursor: pointer;
}
.zv-rotation-skin input {
width: 18px;
height: 18px;
accent-color: var(--accent);
}
.zv-rotation-skin:focus-within {
outline: 2px solid var(--focus);
outline-offset: 2px;
}
/* Disabled lock state */
.is-disabled { opacity: 0.5; pointer-events: none; filter: grayscale(0.5); position: relative; }
.is-disabled::after { content: '🔒'; position: absolute; top: 8px; right: 8px; font-size: 14px; }
/* Editor cards (organiser media editor) */
.zv-upload-card { border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); padding: var(--sp-5);
text-align: center; background: var(--bg-sunken); cursor: pointer; transition: border-color var(--d-base);
display: grid; gap: var(--sp-2); min-width: 0; overflow: hidden; }
.zv-upload-card:hover { border-color: var(--accent); }
.zv-upload-card input[hidden] { display: none !important; }
.zv-upload-card__hint { color: var(--text-muted); font-size: var(--fz-13); margin-top: var(--sp-1); line-height: 1.35; overflow-wrap: anywhere; }
.zv-upload-card__preview { aspect-ratio: 4/5; background-size: cover; background-position: center;
border-radius: var(--r-md); margin-bottom: var(--sp-2); width: 100%; min-height: 180px; }
.zv-upload-card__preview--wide { aspect-ratio: 21/9; min-height: 132px; }
/* Wallet pass hero */
.zv-wallet-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
/* Off-canvas console drawer overlay (mobile) */
.zv-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 38;
opacity: 0; pointer-events: none; transition: opacity var(--d-base); }
.zv-overlay.is-open { opacity: 1; pointer-events: auto; }
/* Compact pillbar (admin filters) */
.zv-pillbar { display: flex; gap: var(--sp-1); flex-wrap: wrap; padding: 4px; background: var(--surface-2);
border-radius: var(--r-full); border: 1px solid var(--line); width: fit-content; }
.zv-pillbar button { background: none; border: 0; padding: 6px 14px; border-radius: var(--r-full);
font: inherit; cursor: pointer; color: var(--text-muted); }
.zv-pillbar button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
/* Console main grid */
.zv-grid--3 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zv-grid--2 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zv-ticketing-catalog-grid {
grid-template-columns: minmax(390px, .7fr) minmax(560px, 1.3fr);
align-items: start;
}
@media (max-width: 1180px) { .zv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .zv-grid--3, .zv-grid--2 { grid-template-columns: 1fr; } }
/* Scanner — bigger result text */
.zv-scan-big { font-family: var(--font-display); font-size: var(--fz-30); margin: 0; }
.zv-scan-history li { padding: var(--sp-3); border-bottom: 1px solid var(--line); display: flex;
justify-content: space-between; gap: var(--sp-2); align-items: center; }
.zv-scan-history { list-style: none; padding: 0; margin: 0; }
/* ===========================================================
31. EDITORIAL HOME — exclusive, members-club register
Quiet luxury home surface treatments: centred mast, full-bleed
stage hero, magazine-grid features, single-line categories.
These overrides apply only on home.html (which uses the
matching markup); all other pages keep their existing layout.
=========================================================== */
/* Centered masthead — replaces the public site header on home */
.zv-mast {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: var(--sp-8) var(--sp-10) var(--sp-6);
position: relative;
background: var(--bg-base);
border-bottom: 1px solid var(--line);
}
.zv-mast__nav {
display: flex;
gap: var(--sp-8);
align-items: center;
font-family: var(--font-mono);
font-size: var(--fz-12);
letter-spacing: 0.22em;
text-transform: uppercase;
}
.zv-mast__nav--right { justify-content: flex-end; }
.zv-mast__nav a {
color: var(--text-muted);
text-decoration: none;
transition: color var(--dur-base) var(--ease-standard);
}
.zv-mast__nav a:hover { color: var(--accent); }
.zv-brandmark {
width: clamp(170px, 20vw, 244px);
height: 88px;
padding: 0 var(--sp-10);
background: url('../img/zavvion-logo.svg') center / contain no-repeat;
text-indent: -9999px;
overflow: hidden;
}
.zv-brandmark__name {
display: none;
}
.zv-brandmark__sub {
display: none;
}
.zv-brandmark__estab {
display: none;
}
/* Mobile mast — collapse the nav into a single row under brand */
@media (max-width: 720px) {
.zv-mast { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-6) var(--sp-4) var(--sp-4); }
.zv-mast__nav, .zv-mast__nav--right { justify-content: center; gap: var(--sp-5); flex-wrap: wrap; font-size: 11px; }
.zv-brandmark { width: 188px; height: 68px; padding: 0; }
}
/* Full-bleed stage hero */
.zv-stage {
background: var(--hero-grad);
min-height: 86vh;
display: grid;
place-items: center;
text-align: center;
padding: var(--sp-20) var(--sp-6);
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--line);
}
.zv-stage::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(60% 50% at 50% 35%, rgba(201,169,97,0.10), transparent 70%),
radial-gradient(40% 30% at 50% 65%, rgba(229,212,166,0.04), transparent 70%);
pointer-events: none;
}
.zv-stage__plate { max-width: 980px; position: relative; z-index: 1; }
/* Eyebrow used across the editorial home */
.zv-eyebrow--lux {
font-family: var(--font-mono);
letter-spacing: 0.45em;
text-transform: uppercase;
font-size: var(--fz-12);
color: var(--accent);
display: inline-block;
}
.zv-eyebrow--lux::before,
.zv-eyebrow--lux::after {
content: '—';
margin: 0 var(--sp-3);
color: var(--accent);
opacity: .6;
}
.zv-stage__title {
font-family: var(--font-display);
font-size: clamp(44px, 7.5vw, 96px);
line-height: 1.05;
font-weight: 400;
margin: var(--sp-7) 0 var(--sp-6);
letter-spacing: -0.022em;
color: var(--text);
}
.zv-stage__title em {
font-style: italic;
color: var(--accent);
font-weight: 400;
}
.zv-stage__lead {
font-size: var(--fz-18);
color: var(--text-muted);
max-width: 560px;
margin: 0 auto var(--sp-10);
line-height: 1.6;
}
.zv-stage__cta {
display: inline-flex;
gap: var(--sp-4);
flex-wrap: wrap;
justify-content: center;
}
.zv-stage__rule {
width: 80px;
height: 1px;
background: var(--accent);
margin: var(--sp-12) auto var(--sp-5);
opacity: 0.55;
}
.zv-stage__micro {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.32em;
color: var(--text-soft);
text-transform: uppercase;
margin: 0;
}
/* Editorial features block — magazine grid: 1 lead + 2 stacked */
.zv-editorial {
padding: var(--sp-32) var(--sp-8);
max-width: min(1520px, 100%);
margin: 0 auto;
overflow: hidden;
}
@media (max-width: 720px) { .zv-editorial { padding: var(--sp-16) var(--sp-4); } }
.zv-editorial__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: var(--sp-12);
padding-bottom: var(--sp-6);
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
gap: var(--sp-6);
}
.zv-editorial__title {
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 60px);
margin: var(--sp-4) 0 0;
font-weight: 400;
line-height: 1;
letter-spacing: -0.015em;
}
.zv-editorial__title em { font-style: italic; color: var(--accent); font-weight: 400; }
.zv-link-arrow {
color: var(--text);
font-family: var(--font-display);
font-style: italic;
font-size: var(--fz-20);
text-decoration: none;
border-bottom: 1px solid var(--accent);
padding-bottom: 2px;
transition: color var(--dur-base) var(--ease-standard);
white-space: nowrap;
}
.zv-link-arrow:hover { color: var(--accent); }
.zv-editorial__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-6);
align-items: stretch;
}
.zv-editorial__grid.is-carousel {
--zv-edit-gap: clamp(24px, 3vw, 46px);
display: block;
overflow: hidden;
margin-inline: calc(var(--sp-4) * -1);
padding: var(--sp-2) var(--sp-4) var(--sp-4);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.zv-edit__track {
width: max-content;
display: flex;
gap: var(--zv-edit-gap);
align-items: stretch;
animation: zvEditorialCarousel 36s linear infinite;
will-change: transform;
}
.zv-edit__track:hover { animation-play-state: paused; }
.zv-edit__group {
display: flex;
gap: var(--zv-edit-gap);
align-items: stretch;
}
@media (max-width: 980px) { .zv-editorial__grid { grid-template-columns: 1fr; gap: var(--sp-10); } }
.zv-edit__lead, .zv-edit__sub { background: transparent; color: var(--text); }
.zv-edit__card {
min-height: clamp(420px, 48vw, 620px);
display: flex !important;
flex-direction: column;
height: 100%;
color: inherit;
text-decoration: none;
animation: zvEditorialSlide 760ms var(--ease-out) both;
}
.zv-editorial__grid.is-carousel .zv-edit__card {
flex: 0 0 clamp(470px, 38vw, 680px);
min-height: clamp(680px, 62vw, 860px);
animation: none;
}
.zv-edit__sub-stack { display: contents; }
.zv-edit__poster {
aspect-ratio: 4 / 3;
background: var(--surface);
border: 1px solid var(--line);
overflow: hidden;
margin-bottom: var(--sp-6);
position: relative;
}
.zv-editorial__grid.is-carousel .zv-edit__poster {
aspect-ratio: 1 / 1;
min-height: clamp(430px, 38vw, 660px);
}
.zv-edit__sub .zv-edit__poster { aspect-ratio: 4 / 3; margin-bottom: var(--sp-6); }
.zv-editorial__grid.is-carousel .zv-edit__sub .zv-edit__poster { aspect-ratio: 1 / 1; }
.zv-edit__poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-standard); }
.zv-edit__lead:hover .zv-edit__poster img,
.zv-edit__sub:hover .zv-edit__poster img { transform: scale(1.025); }
.zv-issue {
font-family: var(--font-mono);
font-size: var(--fz-12);
letter-spacing: 0.32em;
color: var(--accent);
display: block;
margin-bottom: var(--sp-2);
}
.zv-edit__lead h3 {
font-family: var(--font-display);
font-size: clamp(28px, 3.2vw, 38px);
font-weight: 400;
line-height: 1.15;
margin: var(--sp-2) 0 var(--sp-3);
letter-spacing: -0.01em;
}
.zv-edit__sub h3 {
font-family: var(--font-display);
font-size: var(--fz-24);
font-weight: 400;
line-height: 1.25;
margin: var(--sp-2) 0 var(--sp-3);
}
.zv-edit__meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 var(--sp-3);
}
.zv-edit__excerpt {
font-size: var(--fz-15);
color: var(--text-muted);
line-height: 1.7;
margin: 0 0 var(--sp-5);
max-width: 480px;
}
.zv-edit__card .zv-link-arrow { margin-top: auto; align-self: flex-start; }
.zv-edit__card:nth-child(2) { animation-delay: 140ms; }
.zv-edit__card:nth-child(3) { animation-delay: 280ms; }
@keyframes zvEditorialSlide {
from { opacity: 0; transform: translateX(36px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes zvEditorialCarousel {
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - (var(--zv-edit-gap) / 2))); }
}
@media (prefers-reduced-motion: reduce) {
.zv-edit__card { animation: none; }
.zv-edit__track { animation: none; }
.zv-editorial__grid.is-carousel {
overflow-x: auto;
-webkit-mask-image: none;
mask-image: none;
}
.zv-editorial__grid.is-carousel .zv-edit__group[aria-hidden="true"] { display: none; }
}
@media (max-width: 720px) {
.zv-editorial__grid.is-carousel .zv-edit__card {
flex-basis: min(86vw, 430px);
min-height: 560px;
}
.zv-editorial__grid.is-carousel .zv-edit__poster {
min-height: min(86vw, 430px);
}
}
/* Discipline list — single elegant line */
.zv-disciplines {
padding: var(--sp-20) var(--sp-6);
text-align: center;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--bg-sunken);
}
.zv-disciplines__list {
display: inline-flex;
gap: var(--sp-5);
align-items: baseline;
flex-wrap: wrap;
justify-content: center;
margin-top: var(--sp-7);
font-family: var(--font-display);
font-size: clamp(22px, 2.8vw, 32px);
font-weight: 400;
}
.zv-disciplines__list a {
color: var(--text);
text-decoration: none;
transition: all var(--dur-base) var(--ease-standard);
}
.zv-disciplines__list a:hover { color: var(--accent); font-style: italic; }
.zv-disciplines__dot { color: var(--accent); opacity: .65; font-size: 0.7em; }
/* Members credentials — three columns of trust */
.zv-credentials {
padding: var(--sp-24) var(--sp-6);
text-align: center;
max-width: 1100px;
margin: 0 auto;
}
.zv-credentials__row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-12);
margin-top: var(--sp-12);
}
@media (max-width: 720px) { .zv-credentials__row { grid-template-columns: 1fr; gap: var(--sp-8); } }
.zv-credentials__item h4 {
font-family: var(--font-display);
font-size: var(--fz-20);
font-weight: 400;
margin: var(--sp-3) 0 var(--sp-2);
letter-spacing: -0.005em;
}
.zv-credentials__item p {
font-size: var(--fz-14);
color: var(--text-muted);
line-height: 1.7;
max-width: 320px;
margin: 0 auto;
}
.zv-credentials__num {
font-family: var(--font-display);
font-size: clamp(48px, 6vw, 72px);
font-style: italic;
color: var(--accent);
display: block;
line-height: 1;
font-weight: 400;
}
/* CTA — invitation strip */
.zv-invitation {
padding: var(--sp-24) var(--sp-6);
text-align: center;
background:
radial-gradient(70% 60% at 50% 50%, rgba(201,169,97,0.08), transparent 70%),
var(--bg-sunken);
border-top: 1px solid var(--line);
}
.zv-invitation h2 {
font-family: var(--font-display);
font-size: clamp(32px, 4.5vw, 56px);
font-weight: 400;
line-height: 1.15;
margin: var(--sp-5) 0 var(--sp-5);
letter-spacing: -0.015em;
}
.zv-invitation h2 em { font-style: italic; color: var(--accent); }
.zv-invitation p {
font-size: var(--fz-16);
color: var(--text-muted);
max-width: 560px;
margin: 0 auto var(--sp-8);
line-height: 1.7;
}
/* Slim footer for the editorial home */
.zv-foot {
padding: var(--sp-12) var(--sp-6);
border-top: 1px solid var(--line);
text-align: center;
color: var(--text-soft);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.zv-foot__brand {
font-family: var(--font-display);
font-style: italic;
font-size: var(--fz-20);
color: var(--text);
text-transform: none;
letter-spacing: -0.01em;
display: block;
margin-bottom: var(--sp-5);
}
.zv-foot__nav {
display: inline-flex;
flex-wrap: wrap;
gap: var(--sp-6);
justify-content: center;
margin-bottom: var(--sp-6);
}
.zv-foot__nav a {
color: var(--text-muted);
text-decoration: none;
transition: color var(--dur-base);
}
.zv-foot__nav a:hover { color: var(--accent); }
/* Buttons — luxury variant: thin border, generous padding, tracked label */
.zv-btn--lux {
font-family: var(--font-mono);
font-size: var(--fz-12);
letter-spacing: 0.28em;
text-transform: uppercase;
padding: var(--sp-4) var(--sp-8);
border-radius: 0;
}
.zv-btn--lux.zv-btn--primary {
background: var(--accent);
color: var(--accent-ink);
border: 1px solid var(--accent);
}
.zv-btn--lux.zv-btn--primary:hover {
background: var(--accent-2);
border-color: var(--accent-2);
}
.zv-btn--lux.zv-btn--ghost {
background: transparent;
color: var(--text);
border: 1px solid var(--line-strong);
}
.zv-btn--lux.zv-btn--ghost:hover {
border-color: var(--accent);
color: var(--accent);
}
/* ===========================================================
32. MOTION & CINEMATICS — top-tier polish
Curtain-up entrance, mouse-tracked spotlight, scroll reveals,
slow marquee, drawing underlines, magnetic buttons, film
grain. Every motion respects prefers-reduced-motion.
=========================================================== */
/* ---------- Film grain overlay (full-page, fixed) ---------- */
.zv-grain {
pointer-events: none;
position: fixed;
inset: 0;
z-index: 100;
opacity: 0.045;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
}
/* ---------- Stage upgrades: 100vh, breathing bg, vignette ---------- */
.zv-stage { min-height: 100vh; }
.zv-stage::before {
/* breathing gold gleam — slow imperceptible drift */
animation: zv-breathe 24s ease-in-out infinite alternate;
}
@keyframes zv-breathe {
0% { transform: translate3d(-2%, -1%, 0) scale(1); }
100% { transform: translate3d(2%, 1%, 0) scale(1.06); }
}
.zv-stage-vignette {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}
/* ---------- Mouse-tracked golden spotlight ---------- */
.zv-stage-spot {
position: absolute;
width: 700px;
height: 700px;
pointer-events: none;
z-index: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(201,169,97,0.16) 0%, rgba(229,212,166,0.04) 35%, transparent 65%);
left: 50%; top: 50%;
transform: translate(calc(var(--mx, 50%) - 50%), calc(var(--my, 50%) - 50%)) translate(-50%, -50%);
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
filter: blur(24px);
opacity: 0.9;
}
/* ---------- Page entrance choreography on the stage ---------- */
.zv-stage__plate > * {
opacity: 0;
transform: translateY(28px);
filter: blur(6px);
animation: zv-rise 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.zv-stage .zv-eyebrow--lux { animation-delay: 200ms; }
.zv-stage__title { animation-delay: 380ms; }
.zv-stage__lead { animation-delay: 760ms; }
.zv-stage__cta { animation-delay: 980ms; }
.zv-stage__rule { animation-delay: 1200ms; }
.zv-stage__micro { animation-delay: 1320ms; }
@keyframes zv-rise {
from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.zv-stage__title {
animation-name: zv-rise, zv-hero-title-float;
animation-duration: 1100ms, 7600ms;
animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), ease-in-out;
animation-fill-mode: forwards, none;
animation-delay: 380ms, 1700ms;
animation-iteration-count: 1, infinite;
}
.zv-stage__lead {
animation-name: zv-rise, zv-hero-lead-glow;
animation-duration: 1100ms, 8200ms;
animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), ease-in-out;
animation-fill-mode: forwards, none;
animation-delay: 760ms, 2200ms;
animation-iteration-count: 1, infinite;
}
@keyframes zv-hero-title-float {
0%, 100% {
transform: translate3d(0, 0, 0) scale(1);
text-shadow: 0 0 0 rgba(245, 230, 184, 0);
}
46% {
transform: translate3d(0, -5px, 0) scale(1.012);
text-shadow: 0 0 28px rgba(245, 230, 184, 0.16);
}
}
@keyframes zv-hero-lead-glow {
0%, 100% {
transform: translate3d(0, 0, 0);
color: var(--text-muted);
}
48% {
transform: translate3d(0, -2px, 0);
color: color-mix(in oklab, var(--text) 78%, var(--text-muted));
}
}
/* Italic emphasis word in stage title — gold underline draws after entrance */
.zv-stage__title em { position: relative; display: inline-block; }
.zv-stage__title em::after {
content: '';
position: absolute;
left: 0; bottom: -2px;
height: 1px; width: 100%;
background: var(--accent);
transform-origin: left center;
transform: scaleX(0);
animation: zv-draw 1100ms cubic-bezier(0.7, 0, 0.3, 1) forwards 1500ms;
}
@keyframes zv-draw { to { transform: scaleX(1); } }
/* ---------- Scroll indicator (bottom of stage) ---------- */
.zv-scroll-cue {
position: absolute;
left: 50%; bottom: var(--sp-8);
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-3);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--text-soft);
opacity: 0;
animation: zv-rise 1000ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards 1600ms;
}
.zv-scroll-cue__line {
width: 1px;
height: 48px;
background: linear-gradient(to bottom, transparent, var(--accent));
position: relative;
overflow: hidden;
}
.zv-scroll-cue__line::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, var(--accent), transparent);
animation: zv-cue 2200ms cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes zv-cue {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
/* ---------- Scroll reveals ---------- */
.zv-reveal {
opacity: 0;
transform: translateY(36px);
transition: opacity 1100ms cubic-bezier(0.2, 0.8, 0.2, 1),
transform 1100ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.zv-reveal.is-visible { opacity: 1; transform: translateY(0); }
.zv-reveal--delay-1 { transition-delay: 120ms; }
.zv-reveal--delay-2 { transition-delay: 240ms; }
.zv-reveal--delay-3 { transition-delay: 360ms; }
/* ---------- Marquee — slow, continuous event ticker ---------- */
.zv-marquee {
overflow: hidden;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: var(--sp-6) 0;
background: var(--bg-sunken);
position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.zv-marquee__track {
display: flex;
gap: var(--sp-12);
white-space: nowrap;
animation: zv-marquee 70s linear infinite;
will-change: transform;
width: max-content;
}
@keyframes zv-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.zv-marquee__item {
font-family: var(--font-mono);
font-size: var(--fz-12);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: var(--sp-5);
}
.zv-marquee__item em {
font-family: var(--font-display);
font-size: var(--fz-15);
letter-spacing: 0.05em;
text-transform: none;
color: var(--text);
font-style: italic;
font-weight: 400;
}
.zv-marquee__diamond { color: var(--accent); opacity: 0.7; font-size: 10px; }
.zv-marquee:hover .zv-marquee__track { animation-play-state: paused; }
/* ---------- Editorial card hover refinements ---------- */
.zv-edit__lead, .zv-edit__sub { position: relative; }
.zv-edit__poster img {
transition: transform 1400ms cubic-bezier(0.2, 0.8, 0.2, 1),
filter 700ms var(--ease-standard);
filter: brightness(0.88) saturate(0.85);
}
.zv-edit__lead:hover .zv-edit__poster img,
.zv-edit__sub:hover .zv-edit__poster img {
transform: scale(1.06);
filter: brightness(1) saturate(1);
}
.zv-edit__poster::before,
.zv-edit__poster::after {
content: '';
position: absolute;
width: 22px; height: 22px;
z-index: 2;
opacity: 0;
transition: opacity 600ms var(--ease-standard),
width 600ms cubic-bezier(0.2,0.8,0.2,1),
height 600ms cubic-bezier(0.2,0.8,0.2,1);
pointer-events: none;
}
.zv-edit__poster::before {
top: 14px; left: 14px;
border-top: 1px solid var(--accent);
border-left: 1px solid var(--accent);
}
.zv-edit__poster::after {
bottom: 14px; right: 14px;
border-bottom: 1px solid var(--accent);
border-right: 1px solid var(--accent);
}
.zv-edit__lead:hover .zv-edit__poster::before,
.zv-edit__lead:hover .zv-edit__poster::after,
.zv-edit__sub:hover .zv-edit__poster::before,
.zv-edit__sub:hover .zv-edit__poster::after {
opacity: 1; width: 36px; height: 36px;
}
.zv-edit__lead .zv-link-arrow,
.zv-edit__sub .zv-link-arrow {
display: inline-block;
transition: transform 500ms cubic-bezier(0.2,0.8,0.2,1);
}
.zv-edit__lead:hover .zv-link-arrow,
.zv-edit__sub:hover .zv-link-arrow {
transform: translateX(8px);
}
/* ---------- Underline draw on link-arrow ---------- */
.zv-link-arrow {
position: relative;
border-bottom: none !important;
}
.zv-link-arrow::after {
content: '';
position: absolute;
left: 0; bottom: -3px;
width: 100%; height: 1px;
background: var(--accent);
transform-origin: right center;
transform: scaleX(1);
transition: transform 700ms cubic-bezier(0.7, 0, 0.3, 1);
}
.zv-link-arrow:hover::after {
transform-origin: left center;
transform: scaleX(1);
animation: zv-redraw 700ms cubic-bezier(0.7, 0, 0.3, 1);
}
@keyframes zv-redraw {
0% { transform-origin: right center; transform: scaleX(1); }
49% { transform-origin: right center; transform: scaleX(0); }
50% { transform-origin: left center; transform: scaleX(0); }
100% { transform-origin: left center; transform: scaleX(1); }
}
/* ---------- Discipline list dim-others-on-hover ---------- */
.zv-disciplines__list a {
transition: opacity 400ms var(--ease-standard),
color 300ms var(--ease-standard),
font-style 0ms;
}
.zv-disciplines__list:hover a:not(:hover) { opacity: 0.32; }
/* ---------- Magnetic buttons — JS supplies translate vars ---------- */
.zv-btn--lux {
transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1),
background 220ms var(--ease-standard),
border-color 220ms var(--ease-standard),
color 220ms var(--ease-standard),
box-shadow 350ms var(--ease-standard);
will-change: transform;
}
.zv-btn--lux.zv-btn--primary:hover {
box-shadow: 0 0 0 1px var(--accent), 0 8px 32px rgba(201, 169, 97, 0.18);
}
/* ---------- Brandmark hover gleam ---------- */
.zv-brandmark__name {
background: linear-gradient(120deg, var(--text) 0%, var(--text) 45%, var(--accent-2) 50%, var(--text) 55%, var(--text) 100%);
background-size: 220% 100%;
background-position: 100% 0;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
transition: background-position 1400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.zv-mast:hover .zv-brandmark__name { background-position: 0% 0; }
/* ---------- Credentials numerals — tabular for counter ---------- */
.zv-credentials__num { font-variant-numeric: tabular-nums; }
/* ---------- Reduced-motion overrides ---------- */
@media (prefers-reduced-motion: reduce) {
.zv-reveal,
.zv-stage__plate > *,
.zv-scroll-cue {
opacity: 1 !important;
transform: none !important;
filter: none !important;
animation: none !important;
}
.zv-marquee__track,
.zv-stage::before,
.zv-scroll-cue__line::after,
.zv-stage__title em::after { animation: none !important; }
.zv-stage__title em::after { transform: scaleX(1) !important; }
.zv-stage-spot { display: none !important; }
}
/* ===========================================================
33. METALLIC GOLD — subtle 3D, polished-metal treatment
Real gold isn't one colour. It's a five-stop gradient that
reads as light catching a curved surface. A slow 12s
shimmer drifts the highlight across the form; just enough
to register as metal without becoming a glitter effect.
=========================================================== */
:root {
/* Five-stop gold scale — antique shadow → champagne → pearl */
--gold-1: #8a6d35; /* deepest shadow */
--gold-2: #b8924a; /* mid antique */
--gold-3: #d4af6f; /* champagne mid */
--gold-4: #e8c87a; /* warm highlight */
--gold-5: #f5e6b8; /* pearl peak */
/* Gradient strings — diagonal sweep for text, vertical for surfaces */
--gold-grad-text: linear-gradient(135deg,
var(--gold-2) 0%,
var(--gold-3) 22%,
var(--gold-5) 50%,
var(--gold-3) 78%,
var(--gold-2) 100%);
--gold-grad-surface: linear-gradient(180deg,
var(--gold-3) 0%,
var(--gold-4) 35%,
var(--gold-5) 50%,
var(--gold-3) 70%,
var(--gold-1) 100%);
--gold-grad-line: linear-gradient(90deg,
transparent 0%,
var(--gold-2) 15%,
var(--gold-5) 50%,
var(--gold-2) 85%,
transparent 100%);
}
/* ---------- Metallic text helper — applies to anything ---------- */
.zv-gold {
background: var(--gold-grad-text);
background-size: 220% 220%;
background-position: 50% 50%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 1px 0 rgba(138, 109, 53, 0.25))
drop-shadow(0 0 8px rgba(245, 230, 184, 0.08));
animation: zv-gold-shimmer 12s ease-in-out infinite;
will-change: background-position;
}
@keyframes zv-gold-shimmer {
0% { background-position: 100% 50%; }
50% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
/* ---------- Apply metallic treatment to luxury elements ---------- */
/* Brandmark — gold shimmer that intensifies on masthead hover */
.zv-brandmark__name {
background: var(--gold-grad-text) !important;
background-size: 240% 240% !important;
background-position: 50% 50% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
filter: drop-shadow(0 1px 0 rgba(138, 109, 53, 0.30))
drop-shadow(0 0 14px rgba(245, 230, 184, 0.10));
animation: zv-gold-shimmer 14s ease-in-out infinite;
transition: filter 700ms var(--ease-standard);
}
.zv-mast:hover .zv-brandmark__name {
filter: drop-shadow(0 1px 0 rgba(138, 109, 53, 0.30))
drop-shadow(0 0 22px rgba(245, 230, 184, 0.22));
animation-duration: 6s;
}
/* Stage italic emphasis — the headline phrase */
.zv-stage__title em {
background: var(--gold-grad-text);
background-size: 220% 220%;
background-position: 50% 50%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 2px 0 rgba(138, 109, 53, 0.25))
drop-shadow(0 0 24px rgba(245, 230, 184, 0.12));
animation: zv-gold-shimmer 11s ease-in-out infinite;
}
/* Hairline gold rule under the headline — glints as it draws */
.zv-stage__title em::after {
background: var(--gold-grad-line) !important;
height: 1.5px !important;
}
/* Stage rule, scroll cue line, marquee diamonds, discipline diamonds */
.zv-stage__rule {
background: var(--gold-grad-line) !important;
height: 1px;
opacity: 0.85 !important;
}
.zv-marquee__diamond,
.zv-disciplines__dot {
background: var(--gold-grad-text);
background-size: 220% 220%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: zv-gold-shimmer 14s ease-in-out infinite;
}
/* Editorial titles em + issue numbers + invitation em */
.zv-editorial__title em,
.zv-invitation h2 em {
background: var(--gold-grad-text);
background-size: 220% 220%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 1px 0 rgba(138, 109, 53, 0.28))
drop-shadow(0 0 18px rgba(245, 230, 184, 0.10));
animation: zv-gold-shimmer 12s ease-in-out infinite;
}
.zv-issue {
background: var(--gold-grad-text);
background-size: 220% 220%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 1px 0 rgba(138, 109, 53, 0.20));
animation: zv-gold-shimmer 14s ease-in-out infinite;
}
/* Credentials numerals — large italic 01/02/03 */
.zv-credentials__num {
background: var(--gold-grad-text);
background-size: 220% 220%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 2px 0 rgba(138, 109, 53, 0.25))
drop-shadow(0 0 30px rgba(245, 230, 184, 0.10));
animation: zv-gold-shimmer 13s ease-in-out infinite;
}
/* "Lux" eyebrow gets a softer treatment — not metallic, just warm gold */
.zv-eyebrow--lux,
.zv-eyebrow--lux::before,
.zv-eyebrow--lux::after {
color: var(--gold-3);
}
/* Foot brand "Zavvion Events" gets the metallic too */
.zv-foot__brand {
background: var(--gold-grad-text);
background-size: 220% 220%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: zv-gold-shimmer 14s ease-in-out infinite;
}
/* ---------- Metallic gold button — convex 3D feel ---------- */
.zv-btn--lux.zv-btn--primary {
background: var(--gold-grad-surface) !important;
background-size: 100% 220% !important;
background-position: 50% 50% !important;
color: #0B0700 !important;
border: 1px solid var(--gold-2) !important;
box-shadow:
inset 0 1px 0 rgba(255, 245, 210, 0.55),
inset 0 -1px 0 rgba(74, 56, 22, 0.30),
0 1px 2px rgba(0, 0, 0, 0.35),
0 0 0 0 rgba(245, 230, 184, 0);
text-shadow: 0 1px 0 rgba(255, 245, 210, 0.35);
transition: background-position 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 350ms var(--ease-standard),
transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.zv-btn--lux.zv-btn--primary:hover {
background-position: 50% 0% !important;
box-shadow:
inset 0 1px 0 rgba(255, 245, 210, 0.70),
inset 0 -1px 0 rgba(74, 56, 22, 0.30),
0 4px 16px rgba(0, 0, 0, 0.45),
0 0 28px rgba(245, 230, 184, 0.20);
}
.zv-btn--lux.zv-btn--primary:active {
background-position: 50% 100% !important;
box-shadow:
inset 0 1px 0 rgba(74, 56, 22, 0.30),
inset 0 -1px 0 rgba(255, 245, 210, 0.40),
0 1px 2px rgba(0, 0, 0, 0.50);
}
/* Ghost lux button — gold border that brightens on hover */
.zv-btn--lux.zv-btn--ghost {
border: 1px solid rgba(212, 175, 111, 0.32) !important;
transition: border-color 350ms var(--ease-standard),
color 350ms var(--ease-standard),
box-shadow 350ms var(--ease-standard);
}
.zv-btn--lux.zv-btn--ghost:hover {
border-color: var(--gold-3) !important;
color: var(--gold-4) !important;
box-shadow: 0 0 24px rgba(212, 175, 111, 0.12);
}
/* Issue corner brackets — already gold, but let's make them gleam too */
.zv-edit__poster::before,
.zv-edit__poster::after {
border-color: var(--gold-3) !important;
}
/* ---------- Reduced motion: stop the shimmer animations ---------- */
@media (prefers-reduced-motion: reduce) {
.zv-gold,
.zv-brandmark__name,
.zv-stage__title em,
.zv-marquee__diamond,
.zv-disciplines__dot,
.zv-editorial__title em,
.zv-invitation h2 em,
.zv-issue,
.zv-credentials__num,
.zv-foot__brand {
animation: none !important;
background-position: 50% 50% !important;
}
}
/* ===========================================================
34. CONFIGURABLE HERO BANNER (admin-controlled)
Spec: "Homepage hero banner controls", "promotional banners".
The home stage reads --zv-hero-image (set by the admin Site
Builder, stored in localStorage 'zv:siteHero', or returned
by GET /api/v1/site/branding once available). When set, the
banner shows behind a dark overlay; when unset, the existing
gradient remains.
=========================================================== */
.zv-stage[data-hero] {
background-image:
linear-gradient(180deg, rgba(8,8,11,0.55) 0%, rgba(8,8,11,0.78) 60%, rgba(8,8,11,0.92) 100%),
var(--hero-grad);
}
.zv-stage[data-hero][style*="--zv-hero-image"] {
background-image:
linear-gradient(180deg, rgba(8,8,11,0.55) 0%, rgba(8,8,11,0.78) 60%, rgba(8,8,11,0.92) 100%),
var(--zv-hero-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.zv-stage[data-hero].is-rotating {
transition: background-image 900ms ease, background-position 900ms ease;
animation: zv-hero-drift 18s ease-in-out infinite alternate;
}
@keyframes zv-hero-drift {
from { background-position: 50% 50%; }
to { background-position: 54% 46%; }
}
/* ===========================================================
35. LUXURY SKINS — six premium full-palette themes
Each skin replaces the WHOLE colour theme to harmonise with
its background image — not just the bg, but the surface
palette, accents, text colours, hero gradient, and the
stage/section bleed-through veils. Switching skins re-paints
the entire site in a coherent register.
Mechanism for the bleed-through:
1. Each skin sets full colour tokens at :root (via the
[data-theme="..."] selector).
2. body::before paints the skin's image fixed to viewport
at z-index:-1 (cover, no-repeat, parallax via fixed).
3. .zv-stage / .zv-disciplines / .zv-invitation / .zv-marquee
each get translucent veils so body::before reads through.
Six skins:
- gala emerald + ornate gold flowers (image 1)
- verdant emerald + gold pattern (image 2)
- onyx black + bronze smoky (image 3)
- ivory cream + gold (LIGHT) (image 4)
- foundry black + bronze leaves (image 5)
- ironwood black wood + sparse bronze (image 6)
=========================================================== */
/* ---------- Shared body::before mechanics (all 6 skins) ---------- */
[data-theme="gala"] body,
[data-theme="verdant"] body,
[data-theme="onyx"] body,
[data-theme="ivory"] body,
[data-theme="foundry"] body,
[data-theme="ironwood"] body {
position: relative;
isolation: isolate;
}
[data-theme="gala"] body::before,
[data-theme="verdant"] body::before,
[data-theme="onyx"] body::before,
[data-theme="ivory"] body::before,
[data-theme="foundry"] body::before,
[data-theme="ironwood"] body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* ---------- 35.1 Gala — emerald + ornate gold (jewel-box opera) ---- */
[data-theme="gala"] {
--bg-base: #04130f;
--bg-raise: #082018;
--bg-sunken: #02080a;
--surface: #0a2520;
--surface-2: #103029;
--surface-3: #1a3d34;
--line: rgba(212, 175, 111, 0.10);
--line-strong: rgba(212, 175, 111, 0.32);
--text: #f0e9d4;
--text-muted: #a89e80;
--text-soft: #6b6048;
--accent: #d4af6f;
--accent-soft: rgba(212, 175, 111, 0.14);
--accent-ink: #04130f;
--accent-2: #1a8a8a;
--accent-2-soft: rgba(26, 138, 138, 0.16);
--shadow-tint: rgba(0, 0, 0, 0.72);
--hero-grad: radial-gradient(140% 90% at 25% 0%, rgba(212, 175, 111, 0.20), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(26, 138, 138, 0.16), transparent 70%),
linear-gradient(180deg, #04130f 0%, #02080a 100%);
color-scheme: dark;
}
[data-theme="gala"] body::before { background-image: url('../img/themes/gala.jpg'); }
/* ---------- 35.2 Verdant — emerald + gold pattern (Italian palazzo) ---- */
[data-theme="verdant"] {
--bg-base: #061814;
--bg-raise: #0a2520;
--bg-sunken: #030f0c;
--surface: #0e2a23;
--surface-2: #143830;
--surface-3: #1c463c;
--line: rgba(212, 175, 111, 0.10);
--line-strong: rgba(212, 175, 111, 0.30);
--text: #f0ead7;
--text-muted: #9ea38e;
--text-soft: #5d6253;
--accent: #c9a961;
--accent-soft: rgba(201, 169, 97, 0.14);
--accent-ink: #061814;
--accent-2: #2a6a5e;
--accent-2-soft: rgba(42, 106, 94, 0.14);
--shadow-tint: rgba(0, 0, 0, 0.72);
--hero-grad: radial-gradient(140% 90% at 25% 0%, rgba(201, 169, 97, 0.18), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(42, 106, 94, 0.14), transparent 70%),
linear-gradient(180deg, #061814 0%, #030f0c 100%);
color-scheme: dark;
}
[data-theme="verdant"] body::before { background-image: url('../img/themes/verdant.jpg'); }
/* ---------- 35.3 Onyx — pure black + bronze smoky (noir gallery) ---- */
[data-theme="onyx"] {
--bg-base: #060606;
--bg-raise: #0c0c0c;
--bg-sunken: #020202;
--surface: #131313;
--surface-2: #1a1a1a;
--surface-3: #232323;
--line: rgba(184, 146, 74, 0.10);
--line-strong: rgba(184, 146, 74, 0.30);
--text: #efe4ce;
--text-muted: #a89878;
--text-soft: #6b5e44;
--accent: #b8924a;
--accent-soft: rgba(184, 146, 74, 0.14);
--accent-ink: #060606;
--accent-2: #c9a872;
--accent-2-soft: rgba(201, 168, 114, 0.10);
--shadow-tint: rgba(0, 0, 0, 0.78);
--hero-grad: radial-gradient(140% 90% at 25% 0%, rgba(184, 146, 74, 0.18), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(201, 168, 114, 0.06), transparent 70%),
linear-gradient(180deg, #060606 0%, #020202 100%);
color-scheme: dark;
}
[data-theme="onyx"] body::before { background-image: url('../img/themes/onyx.jpg'); }
/* ---------- 35.4 Ivory — cream + gold (LIGHT, daytime luxury) ---- */
[data-theme="ivory"] {
--bg-base: #f0eadb;
--bg-raise: #faf4e6;
--bg-sunken: #e6dec8;
--surface: #ffffff;
--surface-2: #faf4e6;
--surface-3: #ede4cd;
--line: rgba(60, 40, 20, 0.12);
--line-strong: rgba(184, 146, 74, 0.50);
--text: #1a1208;
--text-muted: #5a4a30;
--text-soft: #8a7858;
--accent: #b8924a;
--accent-soft: rgba(184, 146, 74, 0.10);
--accent-ink: #ffffff;
--accent-2: #8a6a3a;
--accent-2-soft: rgba(138, 106, 58, 0.10);
--shadow-tint: rgba(80, 50, 20, 0.14);
--hero-grad: radial-gradient(140% 90% at 25% 0%, rgba(184, 146, 74, 0.18), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(138, 106, 58, 0.10), transparent 70%),
linear-gradient(180deg, #f0eadb 0%, #e6dec8 100%);
color-scheme: light;
}
[data-theme="ivory"] body::before { background-image: url('../img/themes/ivory.jpg'); }
/* ---------- 35.5 Foundry — black + bronze leaves (premium suite) ---- */
[data-theme="foundry"] {
--bg-base: #08070a;
--bg-raise: #0e0d12;
--bg-sunken: #050407;
--surface: #131217;
--surface-2: #1b1a20;
--surface-3: #25232c;
--line: rgba(229, 222, 200, 0.07);
--line-strong: rgba(198, 154, 79, 0.32);
--text: #f5f1e8;
--text-muted: #b8b0a0;
--text-soft: #76705f;
--accent: #c69a4f;
--accent-soft: rgba(198, 154, 79, 0.14);
--accent-ink: #08070a;
--accent-2: #d4b27a;
--accent-2-soft: rgba(212, 178, 122, 0.10);
--shadow-tint: rgba(0, 0, 0, 0.72);
--hero-grad: radial-gradient(140% 90% at 25% 0%, rgba(198, 154, 79, 0.18), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(212, 178, 122, 0.06), transparent 70%),
linear-gradient(180deg, #08070a 0%, #050407 100%);
color-scheme: dark;
}
[data-theme="foundry"] body::before { background-image: url('../img/themes/foundry.jpg'); }
/* ---------- 35.6 Ironwood — deepest black + sparse bronze (minimal) ---- */
[data-theme="ironwood"] {
--bg-base: #050507;
--bg-raise: #0a0a0d;
--bg-sunken: #020203;
--surface: #0e0e12;
--surface-2: #15151a;
--surface-3: #1d1d23;
--line: rgba(212, 175, 111, 0.07);
--line-strong: rgba(168, 129, 74, 0.32);
--text: #ebe2cd;
--text-muted: #a8987a;
--text-soft: #6e6149;
--accent: #a8814a;
--accent-soft: rgba(168, 129, 74, 0.12);
--accent-ink: #050507;
--accent-2: #c9a872;
--accent-2-soft: rgba(201, 168, 114, 0.08);
--shadow-tint: rgba(0, 0, 0, 0.80);
--hero-grad: radial-gradient(140% 90% at 25% 0%, rgba(168, 129, 74, 0.16), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(201, 168, 114, 0.04), transparent 70%),
linear-gradient(180deg, #050507 0%, #020203 100%);
color-scheme: dark;
}
[data-theme="ironwood"] body::before { background-image: url('../img/themes/ironwood.jpg'); }
/* ===========================================================
36. LUXURY SKIN BLEED-THROUGH — sections show body image
Stage hero, disciplines, invitation, marquee — make their
backgrounds translucent so body::before paints through.
Each section gets a per-skin scrim alpha tuned to keep text
legible against that skin's busiest leaf areas.
=========================================================== */
/* Stage — replaces opaque var(--hero-grad) with translucent veils */
[data-theme="gala"] .zv-stage,
[data-theme="verdant"] .zv-stage,
[data-theme="onyx"] .zv-stage,
[data-theme="foundry"] .zv-stage,
[data-theme="ironwood"] .zv-stage {
background-color: transparent;
background-image:
radial-gradient(140% 90% at 25% 0%,
var(--skin-stage-tint, rgba(201, 169, 97, 0.18)),
transparent 55%),
radial-gradient(80% 60% at 100% 100%,
var(--skin-stage-tint-2, rgba(138, 157, 107, 0.10)),
transparent 70%),
linear-gradient(180deg,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.78) 100%);
}
[data-theme="ivory"] .zv-stage {
/* Light theme — light scrim instead of dark */
background-color: transparent;
background-image:
radial-gradient(140% 90% at 25% 0%, rgba(184, 146, 74, 0.10), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(138, 106, 58, 0.08), transparent 70%),
linear-gradient(180deg,
rgba(240, 234, 219, 0.40) 0%,
rgba(240, 234, 219, 0.78) 100%);
}
/* Stage breathing pseudo for skin themes — softened so leaf reads */
[data-theme="gala"] .zv-stage::before,
[data-theme="verdant"] .zv-stage::before,
[data-theme="onyx"] .zv-stage::before,
[data-theme="ivory"] .zv-stage::before,
[data-theme="foundry"] .zv-stage::before,
[data-theme="ironwood"] .zv-stage::before {
background:
radial-gradient(60% 50% at 50% 35%, rgba(201, 169, 97, 0.06), transparent 70%),
radial-gradient(40% 30% at 50% 65%, rgba(229, 212, 166, 0.03), transparent 70%);
}
/* Disciplines band — translucent so leaf bleeds through */
[data-theme="gala"] .zv-disciplines,
[data-theme="verdant"] .zv-disciplines,
[data-theme="onyx"] .zv-disciplines,
[data-theme="foundry"] .zv-disciplines,
[data-theme="ironwood"] .zv-disciplines {
background-color: rgba(0, 0, 0, 0.62);
}
[data-theme="ivory"] .zv-disciplines {
background-color: rgba(240, 234, 219, 0.62);
}
/* Invitation closing strip */
[data-theme="gala"] .zv-invitation,
[data-theme="verdant"] .zv-invitation,
[data-theme="onyx"] .zv-invitation,
[data-theme="foundry"] .zv-invitation,
[data-theme="ironwood"] .zv-invitation {
background:
radial-gradient(70% 60% at 50% 50%, rgba(201, 169, 97, 0.10), transparent 70%),
rgba(0, 0, 0, 0.65);
}
[data-theme="ivory"] .zv-invitation {
background:
radial-gradient(70% 60% at 50% 50%, rgba(184, 146, 74, 0.10), transparent 70%),
rgba(240, 234, 219, 0.70);
}
/* Marquee — darker scrim for legibility of small mono text */
[data-theme="gala"] .zv-marquee,
[data-theme="verdant"] .zv-marquee,
[data-theme="onyx"] .zv-marquee,
[data-theme="foundry"] .zv-marquee,
[data-theme="ironwood"] .zv-marquee {
background-color: rgba(0, 0, 0, 0.78);
}
[data-theme="ivory"] .zv-marquee {
background-color: rgba(240, 234, 219, 0.86);
}
/* Per-skin radial-wash colours — each skin's stage glow uses its
own accent palette, so the hero glow always feels native to the
leaves underneath rather than a generic gold-everywhere. */
[data-theme="gala"] { --skin-stage-tint: rgba(212, 175, 111, 0.22);
--skin-stage-tint-2: rgba(26, 138, 138, 0.18); }
[data-theme="verdant"] { --skin-stage-tint: rgba(201, 169, 97, 0.20);
--skin-stage-tint-2: rgba(42, 106, 94, 0.16); }
[data-theme="onyx"] { --skin-stage-tint: rgba(184, 146, 74, 0.18);
--skin-stage-tint-2: rgba(201, 168, 114, 0.04); }
[data-theme="foundry"] { --skin-stage-tint: rgba(198, 154, 79, 0.20);
--skin-stage-tint-2: rgba(212, 178, 122, 0.06); }
[data-theme="ironwood"] { --skin-stage-tint: rgba(168, 129, 74, 0.16);
--skin-stage-tint-2: rgba(201, 168, 114, 0.04); }
/* Light theme handles its own (declared inline above) — no need for tint vars */
/* ===========================================================
37. IVORY LIGHT-THEME COMPONENT ADJUSTMENTS
The metallic gold + dark-bg stack assumes dark themes. For
the ivory skin, gold needs to read against cream. We swap
the gold-text gradient to a darker bronze stack so titles
maintain contrast, and adjust button text colours.
=========================================================== */
[data-theme="ivory"] {
--gold-1: #5a3f15; /* deep bronze shadow for light bg */
--gold-2: #8a6a3a;
--gold-3: #b8924a;
--gold-4: #d4af6f;
--gold-5: #e8c87a;
--gold-grad-text: linear-gradient(135deg,
var(--gold-1) 0%,
var(--gold-2) 22%,
var(--gold-4) 50%,
var(--gold-2) 78%,
var(--gold-1) 100%);
--gold-grad-line: linear-gradient(90deg,
transparent 0%,
var(--gold-2) 15%,
var(--gold-4) 50%,
var(--gold-2) 85%,
transparent 100%);
}
/* Ivory — primary button uses dark-on-cream-gold instead of black-on-gold */
[data-theme="ivory"] .zv-btn--lux.zv-btn--primary {
color: #ffffff !important;
text-shadow: 0 1px 0 rgba(60, 40, 18, 0.40);
}
[data-theme="ivory"] .zv-btn--lux.zv-btn--ghost {
color: var(--text);
border-color: rgba(184, 146, 74, 0.45) !important;
}
[data-theme="ivory"] .zv-btn--lux.zv-btn--ghost:hover {
color: var(--accent) !important;
}
/* Ivory grain overlay — flip from overlay to multiply for light bg */
[data-theme="ivory"] .zv-grain {
mix-blend-mode: multiply;
opacity: 0.06;
}
/* Ivory scroll cue — needs darker color */
[data-theme="ivory"] .zv-scroll-cue { color: var(--text-soft); }
[data-theme="ivory"] .zv-stage__rule { background: var(--gold-grad-line) !important; }
/* ===========================================================
38. CULTURAL MASK SKINS — ten theatrical theme variants
Festival of Masks: Polynesian Tiki, Sri Lankan Naga & dance,
Japanese Noh (Hannya), Venetian carnival.
Each skin replaces the WHOLE colour theme to harmonise with
its mask image — a coherent collection for theatre, opera,
gala, festival, and cultural events.
=========================================================== */
/* Shared body::before mechanics for all 10 mask skins */
[data-theme="tiki"] body, [data-theme="serpent"] body,
[data-theme="hannya"] body, [data-theme="ritual"] body,
[data-theme="cobra"] body, [data-theme="elegy"] body,
[data-theme="carnivale"] body, [data-theme="pavilion"] body,
[data-theme="argento"] body, [data-theme="doge"] body {
position: relative;
isolation: isolate;
}
[data-theme="tiki"] body::before, [data-theme="serpent"] body::before,
[data-theme="hannya"] body::before, [data-theme="ritual"] body::before,
[data-theme="cobra"] body::before, [data-theme="elegy"] body::before,
[data-theme="carnivale"] body::before, [data-theme="pavilion"] body::before,
[data-theme="argento"] body::before, [data-theme="doge"] body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* ---------- 38.1 Tiki — emerald weave, tropical gold, festival ---- */
[data-theme="tiki"] {
--bg-base: #031a14; --bg-raise: #082720; --bg-sunken: #020e0a;
--surface: #0a2a22; --surface-2: #103530; --surface-3: #194540;
--line: rgba(212, 175, 111, 0.10); --line-strong: rgba(212, 175, 111, 0.32);
--text: #f0e9d4; --text-muted: #a89e80; --text-soft: #6b6048;
--accent: #c9a056; --accent-soft: rgba(201, 160, 86, 0.14); --accent-ink: #031a14;
--accent-2: #1a8888; --accent-2-soft: rgba(26, 136, 136, 0.16);
--shadow-tint: rgba(0, 0, 0, 0.72);
--hero-grad: radial-gradient(140% 90% at 25% 0%, rgba(201, 160, 86, 0.20), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(26, 136, 136, 0.16), transparent 70%),
linear-gradient(180deg, #031a14 0%, #020e0a 100%);
color-scheme: dark;
}
[data-theme="tiki"] body::before { background-image: url('../img/themes/tiki.jpg'); }
/* ---------- 38.2 Serpent — black + gold leaves + Naga ---- */
[data-theme="serpent"] {
--bg-base: #050505; --bg-raise: #0c0c0c; --bg-sunken: #020202;
--surface: #131313; --surface-2: #1a1a1a; --surface-3: #232323;
--line: rgba(184, 146, 74, 0.10); --line-strong: rgba(212, 175, 111, 0.32);
--text: #efe4ce; --text-muted: #a89878; --text-soft: #6b5e44;
--accent: #c9a056; --accent-soft: rgba(201, 160, 86, 0.14); --accent-ink: #050505;
--accent-2: #a89048; --accent-2-soft: rgba(168, 144, 72, 0.10);
--shadow-tint: rgba(0, 0, 0, 0.78);
--hero-grad: radial-gradient(140% 90% at 25% 0%, rgba(201, 160, 86, 0.18), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(168, 144, 72, 0.06), transparent 70%),
linear-gradient(180deg, #050505 0%, #020202 100%);
color-scheme: dark;
}
[data-theme="serpent"] body::before { background-image: url('../img/themes/serpent.jpg'); }
/* ---------- 38.3 Hannya — Japanese cream + gold + flame (LIGHT) ---- */
[data-theme="hannya"] {
--bg-base: #f4eedc; --bg-raise: #fdf9ee; --bg-sunken: #e6dec8;
--surface: #ffffff; --surface-2: #faf4e4; --surface-3: #ede4cd;
--line: rgba(60, 40, 20, 0.12); --line-strong: rgba(184, 146, 74, 0.50);
--text: #1a1208; --text-muted: #5a4a30; --text-soft: #8a7858;
--accent: #b8924a; --accent-soft: rgba(184, 146, 74, 0.10); --accent-ink: #ffffff;
--accent-2: #a04030; --accent-2-soft: rgba(160, 64, 48, 0.10);
--shadow-tint: rgba(80, 50, 20, 0.14);
--hero-grad: radial-gradient(140% 90% at 25% 0%, rgba(184, 146, 74, 0.18), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(160, 64, 48, 0.08), transparent 70%),
linear-gradient(180deg, #f4eedc 0%, #e6dec8 100%);
color-scheme: light;
}
[data-theme="hannya"] body::before { background-image: url('../img/themes/hannya.jpg'); }
/* ---------- 38.4 Ritual — black + ritual orange + flame ---- */
[data-theme="ritual"] {
--bg-base: #050404; --bg-raise: #0b0a0a; --bg-sunken: #020201;
--surface: #121110; --surface-2: #1a1816; --surface-3: #25221e;
--line: rgba(200, 132, 60, 0.10); --line-strong: rgba(200, 132, 60, 0.32);
--text: #f0e4ce; --text-muted: #a89478; --text-soft: #6b5a40;
--accent: #c8843c; --accent-soft: rgba(200, 132, 60, 0.14); --accent-ink: #050404;
--accent-2: #a83830; --accent-2-soft: rgba(168, 56, 48, 0.14);
--shadow-tint: rgba(0, 0, 0, 0.78);
--hero-grad: radial-gradient(140% 90% at 25% 0%, rgba(200, 132, 60, 0.20), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(168, 56, 48, 0.14), transparent 70%),
linear-gradient(180deg, #050404 0%, #020201 100%);
color-scheme: dark;
}
[data-theme="ritual"] body::before { background-image: url('../img/themes/ritual.jpg'); }
/* ---------- 38.5 Cobra — wood-black + bronze + restrained red ---- */
[data-theme="cobra"] {
--bg-base: #080606; --bg-raise: #0e0c0c; --bg-sunken: #040303;
--surface: #11100d; --surface-2: #181612; --surface-3: #221e1a;
--line: rgba(184, 146, 74, 0.08); --line-strong: rgba(184, 146, 74, 0.30);
--text: #ebe2cd; --text-muted: #a8987a; --text-soft: #6e6149;
--accent: #b8924a; --accent-soft: rgba(184, 146, 74, 0.12); --accent-ink: #080606;
--accent-2: #882828; --accent-2-soft: rgba(136, 40, 40, 0.12);
--shadow-tint: rgba(0, 0, 0, 0.80);
--hero-grad: radial-gradient(140% 90% at 25% 0%, rgba(184, 146, 74, 0.16), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(136, 40, 40, 0.10), transparent 70%),
linear-gradient(180deg, #080606 0%, #040303 100%);
color-scheme: dark;
}
[data-theme="cobra"] body::before { background-image: url('../img/themes/cobra.jpg'); }
/* ---------- 38.6 Elegy — deepest black + muted bronze + dim red ---- */
[data-theme="elegy"] {
--bg-base: #030303; --bg-raise: #0a0a0a; --bg-sunken: #010101;
--surface: #0e0e0e; --surface-2: #161616; --surface-3: #1f1d1c;
--line: rgba(156, 122, 72, 0.08); --line-strong: rgba(156, 122, 72, 0.28);
--text: #e4dac4; --text-muted: #9c8e72; --text-soft: #645846;
--accent: #9c7a48; --accent-soft: rgba(156, 122, 72, 0.12); --accent-ink: #030303;
--accent-2: #6e3018; --accent-2-soft: rgba(110, 48, 24, 0.10);
--shadow-tint: rgba(0, 0, 0, 0.82);
--hero-grad: radial-gradient(140% 90% at 25% 0%, rgba(156, 122, 72, 0.14), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(110, 48, 24, 0.08), transparent 70%),
linear-gradient(180deg, #030303 0%, #010101 100%);
color-scheme: dark;
}
[data-theme="elegy"] body::before { background-image: url('../img/themes/elegy.jpg'); }
/* ---------- 38.7 Carnivale — emerald velvet + opulent gold ---- */
[data-theme="carnivale"] {
--bg-base: #04140f; --bg-raise: #082018; --bg-sunken: #020a07;
--surface: #0a2820; --surface-2: #103029; --surface-3: #1a3d34;
--line: rgba(212, 175, 111, 0.10); --line-strong: rgba(212, 175, 111, 0.34);
--text: #f0e9d4; --text-muted: #a89e80; --text-soft: #6b6048;
--accent: #d4af6f; --accent-soft: rgba(212, 175, 111, 0.16); --accent-ink: #04140f;
--accent-2: #1a6850; --accent-2-soft: rgba(26, 104, 80, 0.16);
--shadow-tint: rgba(0, 0, 0, 0.72);
--hero-grad: radial-gradient(140% 90% at 25% 0%, rgba(212, 175, 111, 0.22), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(26, 104, 80, 0.18), transparent 70%),
linear-gradient(180deg, #04140f 0%, #020a07 100%);
color-scheme: dark;
}
[data-theme="carnivale"] body::before { background-image: url('../img/themes/carnivale.jpg'); }
/* ---------- 38.8 Pavilion — cream + black + gold (LIGHT formal) ---- */
[data-theme="pavilion"] {
--bg-base: #f0e9d6; --bg-raise: #fbf4e2; --bg-sunken: #e2dac4;
--surface: #ffffff; --surface-2: #faf2dc; --surface-3: #ede2c5;
--line: rgba(20, 14, 8, 0.14); --line-strong: rgba(184, 146, 74, 0.55);
--text: #1a1208; --text-muted: #4a3a20; --text-soft: #7a6a48;
--accent: #b8924a; --accent-soft: rgba(184, 146, 74, 0.10); --accent-ink: #ffffff;
--accent-2: #1a1208; --accent-2-soft: rgba(26, 18, 8, 0.08);
--shadow-tint: rgba(60, 40, 12, 0.16);
--hero-grad: radial-gradient(140% 90% at 25% 0%, rgba(184, 146, 74, 0.20), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(26, 18, 8, 0.10), transparent 70%),
linear-gradient(180deg, #f0e9d6 0%, #e2dac4 100%);
color-scheme: light;
}
[data-theme="pavilion"] body::before { background-image: url('../img/themes/pavilion.jpg'); }
/* ---------- 38.9 Argento — wood-black + silver + gold (dual metal) ---- */
[data-theme="argento"] {
--bg-base: #050507; --bg-raise: #0a0a0d; --bg-sunken: #020203;
--surface: #0f0f12; --surface-2: #16161a; --surface-3: #1f1f24;
--line: rgba(192, 188, 176, 0.08); --line-strong: rgba(192, 188, 176, 0.30);
--text: #ebe6d8; --text-muted: #a8a290; --text-soft: #6e6858;
--accent: #c0bcb0; --accent-soft: rgba(192, 188, 176, 0.12); --accent-ink: #050507;
--accent-2: #c8a050; --accent-2-soft: rgba(200, 160, 80, 0.12);
--shadow-tint: rgba(0, 0, 0, 0.78);
--hero-grad: radial-gradient(140% 90% at 25% 0%, rgba(192, 188, 176, 0.14), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(200, 160, 80, 0.16), transparent 70%),
linear-gradient(180deg, #050507 0%, #020203 100%);
color-scheme: dark;
}
[data-theme="argento"] body::before { background-image: url('../img/themes/argento.jpg'); }
/* ---------- 38.10 Doge — deep emerald + gold + black ---- */
[data-theme="doge"] {
--bg-base: #03110d; --bg-raise: #082017; --bg-sunken: #02080a;
--surface: #0a2018; --surface-2: #112a1f; --surface-3: #19372a;
--line: rgba(212, 175, 111, 0.10); --line-strong: rgba(212, 175, 111, 0.34);
--text: #f0e9d4; --text-muted: #a89e80; --text-soft: #6b6048;
--accent: #d4af6f; --accent-soft: rgba(212, 175, 111, 0.16); --accent-ink: #03110d;
--accent-2: #1a6850; --accent-2-soft: rgba(26, 104, 80, 0.16);
--shadow-tint: rgba(0, 0, 0, 0.74);
--hero-grad: radial-gradient(140% 90% at 25% 0%, rgba(212, 175, 111, 0.22), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(26, 104, 80, 0.16), transparent 70%),
linear-gradient(180deg, #03110d 0%, #02080a 100%);
color-scheme: dark;
}
[data-theme="doge"] body::before { background-image: url('../img/themes/doge.jpg'); }
/* ===========================================================
39. MASK-SKIN BLEED-THROUGH — extend leaf into hero & sections
Same pattern as Section 36: stage / disciplines / invitation /
marquee become translucent so body::before bleeds through.
Light skins (hannya, pavilion) get cream scrims; dark skins
get dark scrims.
=========================================================== */
/* Stage — dark skins */
[data-theme="tiki"] .zv-stage, [data-theme="serpent"] .zv-stage,
[data-theme="ritual"] .zv-stage, [data-theme="cobra"] .zv-stage,
[data-theme="elegy"] .zv-stage, [data-theme="carnivale"] .zv-stage,
[data-theme="argento"] .zv-stage, [data-theme="doge"] .zv-stage {
background-color: transparent;
background-image:
radial-gradient(140% 90% at 25% 0%,
var(--skin-stage-tint, rgba(212, 175, 111, 0.18)),
transparent 55%),
radial-gradient(80% 60% at 100% 100%,
var(--skin-stage-tint-2, rgba(138, 157, 107, 0.10)),
transparent 70%),
linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.78) 100%);
}
/* Stage — light skins */
[data-theme="hannya"] .zv-stage,
[data-theme="pavilion"] .zv-stage {
background-color: transparent;
background-image:
radial-gradient(140% 90% at 25% 0%, rgba(184, 146, 74, 0.12), transparent 55%),
radial-gradient(80% 60% at 100% 100%, rgba(160, 64, 48, 0.06), transparent 70%),
linear-gradient(180deg, rgba(244, 238, 220, 0.40) 0%, rgba(244, 238, 220, 0.78) 100%);
}
/* Stage breathing pseudo — softened for all 10 mask skins */
[data-theme="tiki"] .zv-stage::before, [data-theme="serpent"] .zv-stage::before,
[data-theme="hannya"] .zv-stage::before, [data-theme="ritual"] .zv-stage::before,
[data-theme="cobra"] .zv-stage::before, [data-theme="elegy"] .zv-stage::before,
[data-theme="carnivale"] .zv-stage::before, [data-theme="pavilion"] .zv-stage::before,
[data-theme="argento"] .zv-stage::before, [data-theme="doge"] .zv-stage::before {
background:
radial-gradient(60% 50% at 50% 35%, rgba(201, 169, 97, 0.06), transparent 70%),
radial-gradient(40% 30% at 50% 65%, rgba(229, 212, 166, 0.03), transparent 70%);
}
/* Disciplines, invitation, marquee — dark skins */
[data-theme="tiki"] .zv-disciplines, [data-theme="serpent"] .zv-disciplines,
[data-theme="ritual"] .zv-disciplines, [data-theme="cobra"] .zv-disciplines,
[data-theme="elegy"] .zv-disciplines, [data-theme="carnivale"] .zv-disciplines,
[data-theme="argento"] .zv-disciplines, [data-theme="doge"] .zv-disciplines {
background-color: rgba(0, 0, 0, 0.62);
}
[data-theme="hannya"] .zv-disciplines,
[data-theme="pavilion"] .zv-disciplines {
background-color: rgba(244, 238, 220, 0.62);
}
[data-theme="tiki"] .zv-invitation, [data-theme="serpent"] .zv-invitation,
[data-theme="ritual"] .zv-invitation, [data-theme="cobra"] .zv-invitation,
[data-theme="elegy"] .zv-invitation, [data-theme="carnivale"] .zv-invitation,
[data-theme="argento"] .zv-invitation, [data-theme="doge"] .zv-invitation {
background:
radial-gradient(70% 60% at 50% 50%, rgba(212, 175, 111, 0.10), transparent 70%),
rgba(0, 0, 0, 0.65);
}
[data-theme="hannya"] .zv-invitation,
[data-theme="pavilion"] .zv-invitation {
background:
radial-gradient(70% 60% at 50% 50%, rgba(184, 146, 74, 0.10), transparent 70%),
rgba(244, 238, 220, 0.70);
}
[data-theme="tiki"] .zv-marquee, [data-theme="serpent"] .zv-marquee,
[data-theme="ritual"] .zv-marquee, [data-theme="cobra"] .zv-marquee,
[data-theme="elegy"] .zv-marquee, [data-theme="carnivale"] .zv-marquee,
[data-theme="argento"] .zv-marquee, [data-theme="doge"] .zv-marquee {
background-color: rgba(0, 0, 0, 0.78);
}
[data-theme="hannya"] .zv-marquee,
[data-theme="pavilion"] .zv-marquee {
background-color: rgba(244, 238, 220, 0.86);
}
/* Per-skin radial-wash colours */
[data-theme="tiki"] { --skin-stage-tint: rgba(201, 160, 86, 0.20); --skin-stage-tint-2: rgba(26, 136, 136, 0.18); }
[data-theme="serpent"] { --skin-stage-tint: rgba(201, 160, 86, 0.18); --skin-stage-tint-2: rgba(168, 144, 72, 0.06); }
[data-theme="ritual"] { --skin-stage-tint: rgba(200, 132, 60, 0.20); --skin-stage-tint-2: rgba(168, 56, 48, 0.16); }
[data-theme="cobra"] { --skin-stage-tint: rgba(184, 146, 74, 0.16); --skin-stage-tint-2: rgba(136, 40, 40, 0.10); }
[data-theme="elegy"] { --skin-stage-tint: rgba(156, 122, 72, 0.14); --skin-stage-tint-2: rgba(110, 48, 24, 0.08); }
[data-theme="carnivale"] { --skin-stage-tint: rgba(212, 175, 111, 0.22); --skin-stage-tint-2: rgba(26, 104, 80, 0.18); }
[data-theme="argento"] { --skin-stage-tint: rgba(192, 188, 176, 0.14); --skin-stage-tint-2: rgba(200, 160, 80, 0.16); }
[data-theme="doge"] { --skin-stage-tint: rgba(212, 175, 111, 0.22); --skin-stage-tint-2: rgba(26, 104, 80, 0.16); }
/* Light-skin specific component adjustments — same pattern as ivory */
[data-theme="hannya"], [data-theme="pavilion"] {
--gold-1: #5a3f15; --gold-2: #8a6a3a; --gold-3: #b8924a;
--gold-4: #d4af6f; --gold-5: #e8c87a;
--gold-grad-text: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 22%,
var(--gold-4) 50%, var(--gold-2) 78%, var(--gold-1) 100%);
--gold-grad-line: linear-gradient(90deg, transparent 0%, var(--gold-2) 15%,
var(--gold-4) 50%, var(--gold-2) 85%, transparent 100%);
}
[data-theme="hannya"] .zv-btn--lux.zv-btn--primary,
[data-theme="pavilion"] .zv-btn--lux.zv-btn--primary {
color: #ffffff !important;
text-shadow: 0 1px 0 rgba(60, 40, 18, 0.40);
}
[data-theme="hannya"] .zv-grain,
[data-theme="pavilion"] .zv-grain { mix-blend-mode: multiply; opacity: 0.06; }
[data-theme="hannya"] .zv-stage__rule,
[data-theme="pavilion"] .zv-stage__rule { background: var(--gold-grad-line) !important; }
/* ===========================================================
39. Theme Gallery
A product-owned view that proves every Cloud Code skin is wired
through the real Zavvion design system.
=========================================================== */
.zv-theme-gallery {
width: min(1240px, calc(100% - 32px));
margin: 0 auto;
padding: clamp(32px, 6vw, 72px) 0;
}
.zv-theme-gallery__hero {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--sp-5);
align-items: end;
margin-bottom: var(--sp-6);
}
.zv-theme-gallery__hero h1 {
max-width: 760px;
margin: 0 0 var(--sp-3);
font-size: clamp(2.4rem, 6vw, 5rem);
line-height: 0.92;
}
.zv-theme-gallery__hero p {
max-width: 760px;
}
.zv-theme-gallery__status,
.zv-theme-gallery__links {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
}
.zv-theme-gallery__preview,
.zv-theme-gallery__catalog {
position: relative;
overflow: hidden;
margin-bottom: var(--sp-6);
padding: var(--sp-5);
border: 1px solid var(--line);
border-radius: var(--r-2xl);
background:
linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-2) 86%, transparent));
box-shadow: var(--shadow-3);
}
.zv-theme-gallery__mock-header {
display: flex;
align-items: center;
gap: var(--sp-3);
padding-bottom: var(--sp-4);
border-bottom: 1px solid var(--line);
}
.zv-theme-gallery__mock-header strong {
margin-right: auto;
font-family: var(--font-display);
font-size: var(--fz-24);
}
.zv-theme-gallery__mock-body {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
gap: var(--sp-6);
align-items: center;
min-height: 280px;
padding-top: var(--sp-6);
}
.zv-theme-gallery__mock-body h2 {
max-width: 720px;
margin: 0 0 var(--sp-3);
font-size: clamp(2rem, 5vw, 4.8rem);
line-height: 0.92;
}
.zv-theme-gallery__ticket {
padding: var(--sp-5);
border: 1px solid var(--line);
border-radius: var(--r-xl);
background: var(--surface);
}
.zv-theme-gallery__ticket h3 {
margin: var(--sp-4) 0 var(--sp-2);
font-family: var(--font-display);
font-size: var(--fz-36);
}
.zv-theme-gallery__seat-row {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--sp-2);
margin-top: var(--sp-4);
}
.zv-theme-gallery__seat-row span {
display: block;
aspect-ratio: 1;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--accent);
opacity: 0.8;
}
.zv-theme-gallery__links {
margin-bottom: var(--sp-6);
}
.zv-theme-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--sp-4);
}
.zv-theme-gallery-card {
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--r-xl);
background: var(--surface);
box-shadow: var(--shadow-1);
transition: transform var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
.zv-theme-gallery-card:hover,
.zv-theme-gallery-card.is-active {
transform: translateY(-2px);
border-color: var(--accent);
}
.zv-theme-gallery-card__media {
min-height: 132px;
background:
radial-gradient(circle at 30% 20%, var(--accent-soft), transparent 35%),
linear-gradient(135deg, var(--bg-base), var(--surface-3));
background-size: cover;
background-position: center;
}
.zv-theme-gallery-card .zv-theme-swatches {
margin: calc(var(--sp-4) * -1) var(--sp-4) 0;
}
.zv-theme-gallery-card__body {
display: grid;
gap: var(--sp-3);
padding: var(--sp-4);
}
.zv-theme-gallery-card__body h3 {
margin: 0 0 var(--sp-1);
font-family: var(--font-display);
font-size: var(--fz-24);
}
.zv-theme-gallery-card__body p {
margin: 0;
color: var(--text-muted);
font-size: var(--fz-14);
}
/* ===========================================================
CHECKOUT EDIT CONTROLS
=========================================================== */
.zv-checkout-edit-line {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--sp-3);
align-items: start;
}
.zv-checkout-edit-line__copy {
min-width: 0;
}
.zv-checkout-edit-line__controls {
display: grid;
justify-items: end;
gap: var(--sp-2);
}
.zv-checkout-edit-line__actions {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: var(--sp-1);
}
.zv-mini-btn {
min-height: 30px;
padding: 0 var(--sp-3);
color: var(--text);
font: 700 var(--fz-12) / 1 var(--font-body);
border: 1px solid var(--line-strong);
border-radius: var(--r-full);
background: color-mix(in oklab, var(--surface) 82%, transparent);
cursor: pointer;
transition: transform var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.zv-mini-btn:hover {
transform: translateY(-1px);
border-color: color-mix(in oklab, var(--accent) 60%, var(--line-strong));
background: var(--accent-soft);
}
.zv-mini-btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.zv-mini-btn:disabled {
opacity: 0.55;
cursor: progress;
transform: none;
}
.zv-mini-btn--danger {
color: color-mix(in oklab, var(--c-danger) 78%, var(--text));
border-color: color-mix(in oklab, var(--c-danger) 36%, var(--line-strong));
background: color-mix(in oklab, var(--c-danger-soft) 72%, transparent);
}
.zv-mini-btn--danger:hover {
color: var(--text);
border-color: color-mix(in oklab, var(--c-danger) 72%, var(--line-strong));
background: color-mix(in oklab, var(--c-danger) 28%, var(--surface));
}
@media (max-width: 640px) {
.zv-checkout-edit-line {
grid-template-columns: 1fr;
}
.zv-checkout-edit-line__controls {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
justify-items: stretch;
}
.zv-checkout-edit-line__actions {
justify-content: flex-end;
}
}
@media (max-width: 820px) {
.zv-theme-gallery__hero,
.zv-theme-gallery__mock-body {
grid-template-columns: 1fr;
}
.zv-theme-gallery__mock-header {
align-items: flex-start;
flex-direction: column;
}
}
/* ===========================================================
CONSENT BANNER
=========================================================== */
.zv-consent-banner {
position: fixed;
left: var(--sp-4);
right: var(--sp-4);
bottom: var(--sp-4);
z-index: 260;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--sp-4);
align-items: center;
max-width: 980px;
margin-inline: auto;
padding: var(--sp-4);
color: var(--text);
background: color-mix(in oklab, var(--surface) 94%, black);
border: 1px solid var(--line-strong);
border-radius: var(--r-lg);
box-shadow: var(--shadow-4);
}
.zv-consent-banner__copy {
display: grid;
gap: var(--sp-2);
}
.zv-consent-banner__copy p {
margin: 0;
color: var(--text-muted);
font-size: var(--fz-14);
}
.zv-consent-banner__check {
align-items: flex-start;
}
.zv-consent-banner__actions {
display: flex;
gap: var(--sp-2);
justify-content: flex-end;
flex-wrap: wrap;
}
@media (max-width: 720px) {
.zv-consent-banner {
grid-template-columns: 1fr;
}
.zv-consent-banner__actions {
justify-content: stretch;
}
.zv-consent-banner__actions .zv-btn {
flex: 1 1 150px;
}
}
}
/* ===========================================================
EVENT DETAIL PURCHASE UX GUARDS
These live at the end of the file so homepage "stage" art rules
cannot inflate the public event seat-map stage.
=========================================================== */
.zv-event-page,
.zv-events-page {
overflow-x: clip;
}
.zv-event-page main.zv-container,
.zv-events-page main.zv-container {
max-width: min(1480px, calc(100vw - 48px));
}
.zv-event-hero-grid {
grid-template-columns: minmax(0, 1.4fr) minmax(220px, 280px);
}
.zv-event-layout-grid {
grid-template-columns: minmax(0, 940px) minmax(360px, 420px);
justify-content: center;
}
.zv-events-layout-grid {
grid-template-columns: minmax(280px, 340px) minmax(0, 1040px);
justify-content: center;
}
.zv-events-page #zv-results {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.zv-events-page .zv-card__title {
font-size: clamp(var(--fz-20), 1.15vw, var(--fz-24));
}
.zv-event-page .zv-panel,
.zv-events-page .zv-panel,
.zv-event-page .zv-grid,
.zv-events-page .zv-grid {
min-width: 0;
}
.zv-event-view-tabs {
align-items: center;
display: inline-flex;
flex-wrap: wrap;
gap: var(--sp-2);
padding: var(--sp-1);
background: color-mix(in oklab, var(--surface-2) 72%, transparent);
border: 1px solid var(--line);
border-radius: var(--r-lg);
}
.zv-event-view-tab {
appearance: none;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-md);
color: var(--text);
cursor: pointer;
font: inherit;
font-size: var(--fz-14);
font-weight: 800;
min-height: 38px;
padding: 9px 16px;
transition: background var(--d-fast), border-color var(--d-fast), color var(--d-fast);
}
.zv-event-view-tab:hover,
.zv-event-view-tab:focus-visible {
border-color: var(--accent);
color: var(--accent);
outline: none;
}
.zv-event-view-tab.is-active {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-ink);
}
.zv-seat-map-reference {
display: grid;
gap: var(--sp-3);
}
.zv-seat-map-reference__toolbar {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
justify-content: flex-end;
}
.zv-seat-map-reference__viewport {
background:
linear-gradient(90deg, color-mix(in oklab, var(--line) 30%, transparent) 1px, transparent 1px),
linear-gradient(0deg, color-mix(in oklab, var(--line) 30%, transparent) 1px, transparent 1px),
color-mix(in oklab, var(--surface-2) 86%, transparent);
background-size: 36px 36px;
border: 1px solid var(--line-strong);
border-radius: var(--r-lg);
min-height: min(68vh, 520px);
overflow: auto;
padding: var(--sp-4);
-webkit-overflow-scrolling: touch;
}
.zv-seat-map-reference__content {
display: grid;
gap: var(--sp-5);
min-width: min(820px, 100%);
transform-origin: top left;
transition: transform var(--d-fast) var(--ease-out);
width: fit-content;
}
.zv-seat-map-reference__image {
background: color-mix(in oklab, var(--bg-sunken) 70%, transparent);
border: 1px solid var(--line);
border-radius: var(--r-md);
display: block;
height: auto;
max-height: 70vh;
max-width: min(960px, 100%);
object-fit: contain;
width: auto;
}
.zv-seat-map-reference__section {
background: color-mix(in oklab, var(--surface) 88%, transparent);
border: 1px solid var(--line);
border-radius: var(--r-lg);
display: grid;
gap: var(--sp-3);
padding: var(--sp-4);
}
.zv-seat-map-reference__section-head {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
justify-content: space-between;
}
.zv-seat-map-reference .zv-seat {
pointer-events: none;
}
.zv-seat-map-reference .zv-seat:disabled {
opacity: 1;
}
.zv-event-page #seats .zv-seat-guidance {
display: block;
margin: 0 0 var(--sp-4);
padding: var(--sp-3) var(--sp-4);
color: var(--text);
background: color-mix(in oklab, var(--surface-2) 82%, transparent);
border: 1px solid var(--line);
border-radius: var(--r-md);
font-size: var(--fz-14);
line-height: 1.5;
}
.zv-event-page #seats .zv-seat-guidance strong {
color: var(--accent-2);
}
.zv-event-page #seats .zv-seatmap-wrap {
display: grid !important;
grid-template-rows: auto auto auto !important;
gap: var(--sp-2) !important;
max-width: 100% !important;
padding: clamp(var(--sp-2), 2vw, var(--sp-3)) !important;
max-height: none !important;
overflow-x: clip !important;
overflow-y: visible !important;
}
.zv-event-page #seats .zv-seatmap-stage,
.zv-event-page #seats .zv-stage {
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: static !important;
width: min(920px, calc(100% - 32px)) !important;
min-width: 0 !important;
height: 18px !important;
min-height: 18px !important;
max-height: 18px !important;
margin: 0 auto !important;
padding: 0 var(--sp-3) !important;
color: var(--text) !important;
background: color-mix(in oklab, var(--surface) 84%, transparent) !important;
background-image: none !important;
border: 2px solid var(--line-strong) !important;
border-radius: 2px !important;
box-shadow: none !important;
font: 700 11px / 1 var(--font-body) !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
inset: auto !important;
transform: none !important;
}
.zv-seat-map-attach {
padding: var(--sp-3);
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: color-mix(in oklab, var(--surface-2) 74%, transparent);
}
.zv-seat-plan-builder {
display: grid;
gap: var(--sp-4);
}
.zv-seat-plan-builder__intro {
display: grid;
gap: var(--sp-2);
max-width: 980px;
}
.zv-seat-plan-builder__intro p {
max-width: 960px;
}
.zv-seat-plan-builder__form {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--sp-3);
align-items: end;
}
.zv-seat-plan-builder__wide {
grid-column: span 2;
}
.zv-seat-plan-builder__numbers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-3);
}
.zv-seat-plan-color {
min-width: 72px;
padding: 4px;
}
.zv-seat-plan-builder__swatches {
display: flex;
gap: var(--sp-2);
align-items: center;
flex-wrap: wrap;
}
.zv-seat-plan-swatch {
width: 34px;
height: 34px;
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
background: var(--seat-section-color, var(--accent));
}
.zv-seat-plan-swatch--tiny {
width: 12px;
height: 12px;
border-radius: 50%;
}
.zv-seat-plan-builder__preview {
grid-column: 1 / -1;
overflow: auto;
padding: var(--sp-3);
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: color-mix(in oklab, var(--surface) 72%, transparent);
}
.zv-seat-plan-preview__row {
display: grid;
grid-auto-flow: column;
gap: 5px;
align-items: center;
justify-content: start;
width: max-content;
}
.zv-seat-plan-preview__row + .zv-seat-plan-preview__row {
margin-top: 5px;
}
.zv-seat-plan-preview__seat {
width: 28px;
height: 28px;
border: 1px solid color-mix(in oklab, var(--seat-section-color, var(--accent)) 64%, var(--line-strong));
border-radius: 6px 6px 3px 3px;
background: color-mix(in oklab, var(--seat-section-color, var(--accent)) 22%, var(--surface-2));
color: var(--text);
font-size: 10px;
font-weight: 700;
}
.zv-seat-plan-preview__seat.is-blocked {
background:
repeating-linear-gradient(135deg, color-mix(in oklab, var(--seat-section-color, var(--accent)) 55%, transparent) 0 2px, transparent 2px 6px),
var(--bg-sunken);
color: var(--text-soft);
border-color: color-mix(in oklab, var(--seat-section-color, var(--accent)) 50%, transparent);
}
.zv-seat-plan-builder__help {
grid-column: span 3;
margin: 0;
font-size: var(--fz-13);
align-self: center;
}
.zv-seat-plan-builder__submit {
justify-self: start;
min-width: 220px;
}
@media (max-width: 1180px) {
.zv-seat-plan-builder__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zv-seat-plan-builder__wide,
.zv-seat-plan-builder__numbers,
.zv-seat-plan-builder__help { grid-column: span 2; }
}
@media (max-width: 640px) {
.zv-seat-plan-builder__form,
.zv-seat-plan-builder__numbers { grid-template-columns: 1fr; }
.zv-seat-plan-builder__wide,
.zv-seat-plan-builder__numbers,
.zv-seat-plan-builder__help { grid-column: 1; }
.zv-seat-plan-builder__submit { width: 100%; }
}
.zv-event-page #seats .zv-seatmap-stage::before,
.zv-event-page #seats .zv-seatmap-stage::after,
.zv-event-page #seats .zv-stage::before,
.zv-event-page #seats .zv-stage::after {
content: none !important;
display: none !important;
}
.zv-event-page #seats .zv-seating-field {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
min-height: 0 !important;
max-height: none !important;
padding: clamp(var(--sp-2), 2vw, var(--sp-3)) !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
}
.zv-event-page #seats #seat-map-host {
width: max-content !important;
min-width: 100% !important;
display: grid !important;
place-items: start start !important;
margin-inline: auto !important;
padding-block: var(--sp-1) !important;
}
.zv-event-page #seats .zv-seat-section-switcher {
align-items: stretch;
background:
linear-gradient(180deg, color-mix(in oklab, var(--surface-2) 90%, transparent), color-mix(in oklab, var(--surface) 94%, transparent));
border: 1px solid var(--line-strong);
border-radius: var(--r-lg);
box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: var(--sp-2);
justify-content: flex-start;
margin: 0 0 var(--sp-5);
max-width: min(100%, 760px);
padding: var(--sp-2);
width: fit-content;
}
.zv-event-page #seats .zv-seat-map-switcher {
align-items: flex-start;
background:
linear-gradient(180deg, color-mix(in oklab, var(--surface-2) 90%, transparent), color-mix(in oklab, var(--surface) 94%, transparent));
border: 1px solid var(--line-strong);
border-radius: var(--r-lg);
box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
justify-content: flex-start;
margin: 0 0 var(--sp-5);
max-width: min(100%, 760px);
padding: var(--sp-2);
width: fit-content;
}
.zv-event-page #seats .zv-seat-section-switcher[hidden] {
display: none !important;
}
.zv-event-page #seats .zv-seat-section-switcher__label {
color: var(--text-muted);
font-size: var(--fz-12);
font-weight: 800;
letter-spacing: .08em;
line-height: 1;
padding-inline: 0;
text-align: center;
text-transform: uppercase;
width: 100%;
}
.zv-event-page #seats .zv-seat-section-tabs {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
justify-content: center;
width: 100%;
}
.zv-event-page #seats .zv-seat-map-tabs {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
justify-content: flex-start;
}
.zv-event-page #seats .zv-seat-section-tab {
appearance: none;
background: color-mix(in oklab, var(--surface) 86%, var(--bg-sunken));
border: 1px solid var(--line);
border-radius: 999px;
color: var(--text);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font: inherit;
font-size: var(--fz-13);
font-weight: 800;
line-height: 1.1;
min-height: 36px;
padding: 9px 14px;
transition: background var(--d-fast), border-color var(--d-fast), color var(--d-fast), transform var(--d-fast);
}
.zv-seat-section-tab__swatch {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--seat-section-color, var(--accent));
box-shadow: 0 0 0 1px color-mix(in oklab, var(--seat-section-color, var(--accent)) 50%, var(--line));
flex: 0 0 auto;
}
.zv-event-page #seats .zv-seat-map-tab {
appearance: none;
background: color-mix(in oklab, var(--surface) 86%, var(--bg-sunken));
border: 1px solid var(--line);
border-radius: 999px;
color: var(--text);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font: inherit;
font-size: var(--fz-13);
font-weight: 800;
line-height: 1.1;
min-height: 36px;
padding: 9px 14px;
transition: background var(--d-fast), border-color var(--d-fast), color var(--d-fast), transform var(--d-fast);
}
.zv-event-page #seats .zv-seat-section-tab:hover,
.zv-event-page #seats .zv-seat-section-tab:focus-visible {
border-color: var(--accent);
color: var(--accent);
outline: none;
transform: translateY(-1px);
}
.zv-event-page #seats .zv-seat-map-tab:hover,
.zv-event-page #seats .zv-seat-map-tab:focus-visible {
border-color: var(--accent);
color: var(--accent);
outline: none;
transform: translateY(-1px);
}
.zv-event-page #seats .zv-seat-section-tab.is-active {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-ink);
}
.zv-event-page #seats .zv-seat-map-tab.is-active {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-ink);
}
.zv-event-page #seats .zv-seat-section-tab.is-non-reserved {
border-color: color-mix(in oklab, var(--c-info) 52%, var(--line));
}
.zv-seat-section-panel {
display: grid;
margin-top: var(--sp-2);
min-width: 100%;
place-items: start start;
}
.zv-seat-section-panel__nonreserved {
background: color-mix(in oklab, var(--surface-2) 88%, transparent);
border: 1px solid var(--line-strong);
border-radius: var(--r-lg);
color: var(--text);
display: grid;
gap: var(--sp-2);
max-width: min(100%, 620px);
padding: var(--sp-4);
text-align: left;
}
.zv-seat-section-panel__title {
font-family: var(--font-display);
font-size: var(--fz-22);
font-weight: 700;
line-height: 1.1;
}
.zv-seat-section-panel__badge {
align-self: start;
background: color-mix(in oklab, var(--c-info) 18%, transparent);
border: 1px solid color-mix(in oklab, var(--c-info) 52%, var(--line));
border-radius: 999px;
color: var(--c-info);
font-size: var(--fz-12);
font-weight: 800;
justify-self: start;
letter-spacing: .06em;
padding: 6px 10px;
text-transform: uppercase;
}
.zv-event-page #seats .zv-seatmap {
margin: 0 auto !important;
}
.zv-event-page #seats .zv-seat {
min-width: 30px;
min-height: 30px;
}
.zv-event-page #summary-list {
gap: var(--sp-3);
}
.zv-event-page .zv-seat-ticket-line {
grid-template-columns: 1fr;
align-items: stretch;
gap: var(--sp-3);
padding: var(--sp-4);
}
.zv-event-page .zv-seat-ticket-line__label {
display: grid;
gap: 4px;
}
.zv-event-page .zv-seat-ticket-line__label strong,
.zv-event-page .zv-seat-ticket-line__label span {
min-width: 0;
overflow: visible;
overflow-wrap: anywhere;
text-overflow: clip;
white-space: normal;
}
.zv-event-page .zv-seat-ticket-line__controls {
display: grid;
grid-template-columns: minmax(172px, 1fr) auto auto;
align-items: center;
gap: var(--sp-2);
justify-content: stretch;
}
.zv-event-page .zv-seat-ticket-line__type {
align-self: start;
}
.zv-event-page .zv-seat-ticket-line__type strong,
.zv-event-page .zv-seat-ticket-line__type span {
min-width: 0;
overflow-wrap: anywhere;
}
.zv-event-page .zv-seat-ticket-line__select {
min-width: 0;
width: 100%;
}
.zv-event-page .zv-seat-ticket-line__controls .zv-mono,
.zv-event-page .zv-seat-ticket-line__controls .zv-btn {
white-space: nowrap;
}
.zv-event-page .zv-basket-line__controls {
justify-content: flex-start;
flex-wrap: wrap;
}
.zv-event-page .zv-basket-line {
grid-template-columns: 1fr !important;
align-items: stretch;
gap: var(--sp-3) !important;
padding: var(--sp-4);
}
.zv-event-page .zv-basket-line__copy {
display: grid;
gap: 4px;
}
.zv-event-page .zv-basket-line__copy strong,
.zv-event-page .zv-basket-line__copy span {
min-width: 0;
overflow: visible;
overflow-wrap: anywhere;
text-overflow: clip;
white-space: normal;
word-break: normal;
}
.zv-event-page .zv-basket-line__controls .zv-mini-btn {
min-width: 38px;
}
.zv-event-page .zv-basket-line__controls .zv-mini-btn--danger {
min-width: 92px;
}
.zv-event-page .zv-basket-line__qty {
min-width: 4.5rem;
padding-inline: var(--sp-2);
text-align: center;
}
.zv-event-page .zv-event-layout-grid > .zv-stack-lg {
display: flex;
flex-direction: column;
gap: var(--sp-8);
}
.zv-event-page .zv-event-layout-grid > .zv-stack-lg > * + * {
margin-top: 0;
}
/* Reserved seats are shown first visually through the event-page order rules. */
.zv-event-page .zv-event-layout-grid > .zv-stack-lg > .zv-panel:nth-of-type(1) {
order: 1;
}
.zv-event-page #seats {
order: 3;
}
.zv-event-page #tickets {
order: 4;
}
.zv-event-page #venue-seat-map-panel {
order: 2;
}
.zv-event-page #merch-panel {
order: 5;
}
.zv-event-page .zv-ticket-tools {
align-items: stretch;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.zv-event-page .zv-ticket-tool {
grid-template-rows: minmax(30px, auto) auto;
}
.zv-event-page .zv-ticket-tool .zv-label {
min-height: 30px;
align-items: end;
}
.zv-event-page .zv-ticket-tool__control {
min-height: 48px;
height: auto;
align-items: stretch;
flex-wrap: nowrap;
}
.zv-event-page .zv-ticket-tool__control .zv-input,
.zv-event-page .zv-ticket-tool__control .zv-select,
.zv-event-page .zv-ticket-tool__control .zv-btn {
min-height: 48px;
}
.zv-event-page .zv-promo-control .zv-btn {
flex: 0 0 112px;
}
.zv-event-page .zv-ticket-type-row {
display: grid;
grid-template-columns: minmax(0, 1fr) max-content max-content;
gap: var(--sp-4);
align-items: center;
padding: var(--sp-4);
border: 1px solid var(--line);
border-radius: var(--r-md);
}
.zv-event-page .zv-ticket-type-row__copy {
min-width: 0;
}
.zv-event-page .zv-ticket-type-row__name {
font-weight: 600;
}
.zv-event-page .zv-ticket-type-row__meta {
margin-top: 4px;
font-size: var(--fz-13);
line-height: 1.55;
overflow-wrap: normal;
}
.zv-event-page .zv-ticket-type-row__price {
white-space: nowrap;
}
.zv-event-page .zv-ticket-type-row__controls {
gap: 6px;
}
.zv-event-page .zv-ticket-type-row__quantity {
min-width: 24px;
text-align: center;
font-weight: 600;
}
.zv-upload-card input[type="file"] {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
.zv-upload-card {
position: relative;
align-content: start;
}
.zv-upload-card > strong,
.zv-upload-card__hint {
display: block;
}
.zv-upload-card__preview {
position: relative;
overflow: hidden;
isolation: isolate;
}
.zv-box-seat-row {
display: grid;
grid-template-columns: minmax(120px, 0.7fr) minmax(260px, 1.6fr);
gap: var(--sp-3);
align-items: end;
}
.zv-box-seat-row .zv-field {
min-width: 0 !important;
}
.zv-dropdown-checklist {
position: relative;
border: 1px solid var(--z-border);
border-radius: var(--z-radius-sm);
background: rgba(255, 255, 255, 0.02);
}
.zv-dropdown-checklist > summary {
min-height: 48px;
padding: 0 var(--sp-4);
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
list-style: none;
color: var(--z-text);
}
.zv-dropdown-checklist > summary::-webkit-details-marker {
display: none;
}
.zv-dropdown-checklist > summary::after {
content: "⌄";
color: var(--z-muted);
font-size: var(--fz-18);
}
.zv-dropdown-checklist[open] > summary::after {
transform: rotate(180deg);
}
.zv-dropdown-checklist__body {
display: grid;
gap: var(--sp-2);
max-height: 260px;
overflow: auto;
padding: var(--sp-3);
border-top: 1px solid var(--z-border);
background: color-mix(in srgb, var(--z-surface) 94%, black);
}
@media (max-width: 880px) {
.zv-event-page .zv-ticket-tools {
grid-template-columns: 1fr;
}
.zv-event-hero-grid,
.zv-event-layout-grid,
.zv-events-layout-grid {
grid-template-columns: 1fr;
}
.zv-event-page main.zv-container,
.zv-events-page main.zv-container {
max-width: 100%;
}
.zv-event-page main#main {
padding-bottom: calc(116px + var(--sp-10) + env(safe-area-inset-bottom, 0px)) !important;
}
.zv-event-page .zv-summary {
left: var(--sp-3);
right: var(--sp-3);
bottom: max(var(--sp-3), env(safe-area-inset-bottom, 0px));
max-height: calc(100dvh - var(--sp-8) - env(safe-area-inset-bottom, 0px));
overflow: auto;
padding: 0;
border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
border-radius: var(--r-xl);
box-shadow: 0 -18px 42px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(216, 145, 58, 0.18);
transform: translateY(calc(100% - 88px));
}
.zv-event-page .zv-summary.is-open {
transform: translateY(0);
}
.zv-event-page .zv-summary__handle {
position: relative;
min-height: 88px;
height: 88px;
padding: var(--sp-3) var(--sp-4);
border-radius: var(--r-xl) var(--r-xl) 0 0;
background:
linear-gradient(180deg, rgba(216, 145, 58, 0.24), rgba(216, 145, 58, 0.08) 58%, transparent),
var(--surface);
}
.zv-event-page .zv-summary__handle::before {
content: "";
position: absolute;
top: 9px;
left: 50%;
width: 48px;
height: 5px;
border-radius: var(--r-full);
background: color-mix(in srgb, var(--accent) 74%, white);
transform: translateX(-50%);
}
.zv-event-page .zv-summary__handle strong {
font-size: var(--fz-18);
}
.zv-event-page .zv-summary__handle-cta {
min-height: 48px;
padding-inline: var(--sp-6);
box-shadow: 0 8px 22px rgba(216, 145, 58, 0.34);
}
.zv-event-page #seats .zv-seatmap-stage,
.zv-event-page #seats .zv-stage {
width: 100% !important;
}
.zv-event-page .zv-ticket-type-row {
grid-template-columns: 1fr;
align-items: stretch;
gap: var(--sp-3);
}
.zv-event-page .zv-ticket-type-row__meta {
max-width: 42ch;
}
.zv-event-page .zv-ticket-type-row__price,
.zv-event-page .zv-ticket-type-row__controls,
.zv-event-page .zv-ticket-type-row .zv-badge {
justify-self: start;
}
.zv-event-page .zv-ticket-type-row .zv-badge {
white-space: normal;
text-align: left;
line-height: 1.35;
}
.zv-box-seat-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 420px) {
.zv-event-page .zv-ticket-tool__control {
flex-wrap: wrap;
}
.zv-event-page .zv-ticket-tool__control .zv-input,
.zv-event-page .zv-ticket-tool__control .zv-select {
flex: 1 1 100%;
}
.zv-event-page .zv-seat-ticket-line__controls {
grid-template-columns: 1fr;
}
.zv-event-page .zv-promo-control .zv-btn {
flex: 1 1 100%;
}
.zv-event-page .zv-basket-line__controls .zv-mini-btn--danger {
flex-basis: 100%;
}
}