/* ==========================================================================
components.css — reusable UI: nav, footer, buttons, cards, tables,
badges, accordion, modal, countdown, sponsor strip, placeholders, shards.
========================================================================== */
/* ---------- Buttons ------------------------------------------------------ */
.btn {
/* Primary CTA uses the signal yellow (highest attention) with ink text — see §4.1/§6.2 */
--btn-bg: var(--color-signal);
--btn-fg: var(--color-ink);
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-weight: 700;
font-size: var(--fs-16);
letter-spacing: 0.02em;
padding: 0.85em 1.5em;
background: var(--btn-bg);
color: var(--btn-fg);
clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px));
transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
border: 2px solid transparent;
text-align: center;
justify-content: center;
min-height: 44px; /* touch target */
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
/* Solid teal button variant (secondary emphasis where yellow would be too loud) */
.btn--teal { --btn-bg: var(--color-teal); --btn-fg: var(--color-ink); }
.btn--ghost {
--btn-bg: transparent;
--btn-fg: var(--color-paper);
border-color: var(--color-line-strong);
filter: none;
}
.btn--ghost:hover { filter: none; }
.btn--ghost:hover { --btn-bg: transparent; color: var(--color-teal); border-color: var(--color-teal); background: var(--color-teal-tint); }
.btn--on-paper.btn--ghost { --btn-fg: var(--color-ink-on-paper); border-color: var(--color-line-ink); }
.btn--sage { --btn-bg: var(--color-lime); --btn-fg: var(--color-ink); }
.btn--sage:hover { background: #b0c76e; color: var(--color-ink); }
.btn--sm { font-size: var(--fs-14); padding: 0.6em 1.1em; }
.btn--block { display: flex; width: 100%; justify-content: center; }
/* ---------- Kicker / section headings ------------------------------------ */
.section-head { max-width: 60ch; margin-bottom: var(--space-6); }
.section-head h2 {
font-family: var(--font-display);
text-transform: uppercase;
font-size: clamp(var(--fs-32), 5vw, var(--fs-64));
line-height: var(--lh-tight);
letter-spacing: 0.01em;
}
.section-head p { margin-top: var(--space-3); color: var(--color-muted-on-ink); font-size: var(--fs-18); }
.surface-paper .section-head p, .surface-paper-dim .section-head p { color: var(--color-muted-on-paper); }
/* ---------- Header / Nav ------------------------------------------------- */
/* The header partial is injected into #site-header. `display: contents` removes
the wrapper's box so .site-header becomes a layout child of — otherwise
position:sticky is confined to the wrapper's (header-height) box and unsticks. */
#site-header { display: contents; }
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(10, 10, 10, 0.82);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--color-line);
}
.nav {
display: flex;
align-items: center;
gap: var(--space-5);
min-height: 68px;
}
.nav__logo { display: inline-flex; align-items: center; gap: 0.6em; margin-right: auto; }
.nav__logo img { height: 34px; width: auto; display: block; }
.site-footer .nav__logo img { height: 40px; }
.nav__menu { display: flex; align-items: center; gap: var(--space-2); }
.nav__item { position: relative; }
.nav__link {
display: inline-flex;
align-items: center;
gap: 0.35em;
padding: 0.6em 0.7em;
color: var(--color-paper);
font-size: var(--fs-14);
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--color-teal); }
.nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-teal); }
.nav__caret { width: 12px; height: 12px; transition: transform var(--dur-fast) var(--ease); }
.nav__item--has-menu:hover .nav__caret,
.nav__item--has-menu:focus-within .nav__caret { transform: rotate(180deg); }
.nav__dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 230px;
background: var(--color-ink-soft);
border: 1px solid var(--color-line);
box-shadow: var(--shadow-md);
padding: var(--space-2);
display: grid;
gap: 2px;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
clip-path: var(--shard);
}
.nav__item--has-menu:hover .nav__dropdown,
.nav__item--has-menu:focus-within .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown a { padding: 0.6em 0.8em; color: var(--color-paper); font-size: var(--fs-14); font-weight: 600; }
.nav__dropdown a:hover { background: var(--color-teal-tint); color: var(--color-teal); }
.nav__actions { display: flex; align-items: center; gap: var(--space-4); margin-left: var(--space-2); }
/* Language switcher */
.lang-switch { display: inline-flex; align-items: center; font-family: var(--font-kicker); letter-spacing: 0.1em; font-size: var(--fs-16); border: 1px solid var(--color-line-strong); }
.lang-switch a { padding: 0.25em 0.6em; color: var(--color-muted-on-ink); }
.lang-switch a[aria-current="true"] { background: var(--color-teal); color: #fff; }
.lang-switch a:hover { color: var(--color-paper); }
/* Hamburger */
.nav__toggle { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; padding: 0 10px; }
.nav__toggle span { height: 2px; background: var(--color-paper); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1023px) {
.nav__toggle { display: flex; }
/* Drop the header's backdrop blur on mobile: backdrop-filter makes .site-header
the containing block for position:fixed descendants, which would otherwise trap
the full-screen menu inside the 68px header box. Solid opaque bar instead. */
.site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--color-ink); }
/* Keep the logo + hamburger tappable ABOVE the full-screen overlay. */
.nav__logo, .nav__toggle { position: relative; z-index: 210; }
.nav__menu {
position: fixed;
inset: 0; /* full viewport — no page content behind */
background: var(--color-ink); /* 100% opaque */
flex-direction: column;
align-items: stretch;
gap: 0;
padding: calc(68px + env(safe-area-inset-top, 0px)) var(--space-5) var(--space-8);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
transform: translateX(100%);
transition: transform var(--dur) var(--ease);
z-index: 200;
}
.nav__menu.is-open { transform: translateX(0); }
.nav__link { font-size: var(--fs-18); padding: 0.8em 0; border-bottom: 1px solid var(--color-line); }
.nav__item { width: 100%; }
.nav__dropdown {
position: static; opacity: 1; visibility: visible; transform: none;
box-shadow: none; border: none; clip-path: none; background: transparent;
padding: 0 0 var(--space-3) var(--space-4);
max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--ease);
}
.nav__item--open .nav__dropdown { max-height: 400px; }
.nav__item--open .nav__caret { transform: rotate(180deg); }
.nav__actions { flex-direction: row; flex-wrap: wrap; margin: var(--space-5) 0 0; gap: var(--space-4); }
}
/* (Removed) Sticky mobile register button — it duplicated the hero + menu
"Register Now" CTA and floated over page content. Registration stays
reachable via the hero button and the mobile menu. */
/* ---------- Footer ------------------------------------------------------- */
.site-footer { background: #060607; border-top: 3px solid var(--color-teal); }
.site-footer .container { padding-block: var(--space-8); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-6); }
.footer__brand p { color: var(--color-muted-on-ink); margin-top: var(--space-3); max-width: 34ch; }
.footer__tag { font-family: var(--font-kicker); letter-spacing: 0.12em; color: var(--color-teal); margin-top: var(--space-4); font-size: var(--fs-18); }
.footer__col h3 { font-family: var(--font-kicker); letter-spacing: 0.12em; font-size: var(--fs-16); color: var(--color-paper); margin-bottom: var(--space-3); }
.footer__col a { display: block; padding: 0.28em 0; color: var(--color-muted-on-ink); font-size: var(--fs-14); }
.footer__col a:hover { color: var(--color-teal); }
.footer__social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer__social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--color-line-strong); color: var(--color-paper); }
.footer__social a:hover { border-color: var(--color-teal); color: var(--color-teal); background: var(--color-teal-tint); }
.footer__social .icon { width: 20px; height: 20px; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-line); color: var(--color-muted-on-ink); font-size: var(--fs-14); }
.footer__bottom a { color: var(--color-muted-on-ink); }
.footer__bottom a:hover { color: var(--color-teal); }
@media (max-width: 767px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 374px) { .footer__grid { grid-template-columns: 1fr; } }
/* ---------- Cards -------------------------------------------------------- */
.card {
background: var(--color-ink-soft);
border: 1px solid var(--color-line);
padding: var(--space-5);
clip-path: var(--shard);
transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--color-teal); }
.surface-paper .card, .surface-paper-dim .card { background: var(--color-paper); border-color: var(--color-line-ink); }
/* Featured contact card — the primary channel (email + WhatsApp). */
.contact-card--primary { border-color: var(--color-teal); box-shadow: inset 3px 0 0 var(--color-teal); }
.contact-card--primary h3 { color: var(--color-teal); }
.card-grid { display: grid; gap: var(--space-5); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; } }
/* ---------- City card ---------------------------------------------------- */
.city-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.city-card__media { position: relative; aspect-ratio: 16 / 10; }
.city-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.city-card__index { font-family: var(--font-kicker); color: var(--color-teal); letter-spacing: 0.1em; }
.city-card__name { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-32); line-height: 1; }
.city-card__meta { color: var(--color-muted-on-ink); font-size: var(--fs-14); display: grid; gap: var(--space-1); }
.city-card__meta strong { color: var(--color-paper); font-weight: 600; }
.city-card__foot { margin-top: auto; padding-top: var(--space-3); }
/* ---------- Status badge ------------------------------------------------- */
.badge {
display: inline-flex; align-items: center; gap: 0.4em;
font-family: var(--font-kicker); letter-spacing: 0.08em;
font-size: var(--fs-14); line-height: 1;
padding: 0.45em 0.7em; color: var(--color-ink);
background: var(--status-upcoming);
clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.85; }
.badge--upcoming { background: var(--status-upcoming); }
.badge--open { background: var(--status-open); }
.badge--rpc { background: var(--status-rpc); }
.badge--done { background: var(--status-done); color: #fff; }
.badge--tbc { background: transparent; color: var(--color-teal); border: 1px dashed var(--color-teal); }
.badge--tbc::before { display: none; }
/* Chip (segments) */
.chip { display: inline-block; padding: 0.4em 0.9em; border: 1px solid var(--color-line-strong); color: var(--color-paper); font-size: var(--fs-14); font-weight: 600; }
.surface-paper .chip, .surface-paper-dim .chip { border-color: var(--color-line-ink); color: var(--color-ink-on-paper); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* ---------- Tables ------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
width: 100%; border-collapse: collapse; min-width: 480px;
font-variant-numeric: tabular-nums;
}
table.data caption { text-align: left; color: var(--color-muted-on-paper); font-size: var(--fs-14); margin-bottom: var(--space-3); }
table.data th, table.data td { padding: var(--space-3) var(--space-4); text-align: left; }
table.data thead th { font-family: var(--font-kicker); letter-spacing: 0.08em; font-size: var(--fs-16); background: var(--color-ink); color: var(--color-paper); }
.surface-paper table.data tbody tr:nth-child(even),
.surface-paper-dim table.data tbody tr:nth-child(even) { background: var(--color-paper-dim); }
table.data td { border-bottom: 1px solid var(--color-line-ink); }
table.data .num { text-align: right; font-weight: 700; }
table.data tr.is-active { background: var(--color-teal-tint) !important; box-shadow: inset 3px 0 0 var(--color-teal); }
table.data tr.is-past td { opacity: 0.5; text-decoration: line-through; text-decoration-thickness: 1px; }
/* Mobile: turn wide data tables into a stack of label:value cards (no h-scroll). */
@media (max-width: 640px) {
.table-wrap { overflow-x: visible; }
table.data { min-width: 0; border: 0; }
/* Hide the header row visually but keep it for assistive tech. */
table.data thead {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
table.data tbody, table.data tr, table.data td { display: block; width: auto; }
table.data tr {
padding: var(--space-2) var(--space-4);
margin-bottom: var(--space-4);
border: 1px solid var(--color-line-ink);
background: var(--color-paper-dim);
clip-path: var(--shard);
}
.surface-paper table.data tbody tr:nth-child(even),
.surface-paper-dim table.data tbody tr:nth-child(even) { background: var(--color-paper-dim); }
table.data td {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
padding: 0.6em 0; text-align: right;
border-bottom: 1px solid var(--color-line-ink);
}
table.data tr td:last-child { border-bottom: 0; }
table.data td::before {
content: attr(data-label);
flex: 0 0 40%; text-align: left;
font-family: var(--font-kicker); letter-spacing: 0.06em; text-transform: uppercase;
font-size: var(--fs-14); color: var(--color-muted-on-paper);
}
table.data td.num { text-align: right; }
/* Action cell (e.g. "View city →") — full-width link, no label. */
table.data td[data-label=""] { justify-content: flex-end; padding-top: 0.8em; }
table.data td[data-label=""]::before { content: none; }
/* Dark-surface fallback, in case a .data table is placed on an ink section. */
.surface-ink table.data tr, .surface-ink-soft table.data tr { background: var(--color-ink-soft); border-color: var(--color-line); }
.surface-ink table.data td, .surface-ink-soft table.data td { border-bottom-color: var(--color-line); }
.surface-ink table.data td::before, .surface-ink-soft table.data td::before { color: var(--color-muted-on-ink); }
}
/* ---------- Ticket tier card -------------------------------------------- */
.tier { position: relative; padding: var(--space-5); background: var(--color-ink-soft); border: 1px solid var(--color-line); clip-path: var(--shard); display: flex; flex-direction: column; gap: var(--space-2); }
.tier__name { font-family: var(--font-kicker); letter-spacing: 0.08em; font-size: var(--fs-18); color: var(--color-paper); }
/* Price is always signal-yellow so it stays readable on the dark tier card
(the card is dark even inside a paper-surfaced section) and reads as the
most eye-catching element. Applies to all four tiers, not just the active one. */
.tier__price { font-family: var(--font-display); font-size: var(--fs-48); line-height: 1; color: var(--color-signal); }
.tier__price small { font-family: var(--font-body); font-size: var(--fs-16); color: var(--color-muted-on-ink); font-weight: 600; }
.tier__discount { align-self: flex-start; }
.tier__period { color: var(--color-muted-on-ink); font-size: var(--fs-14); margin-top: auto; }
.tier.is-active { border-color: var(--color-signal); box-shadow: 0 0 0 2px var(--color-signal) inset; }
.tier.is-active .tier__price { color: var(--color-signal); }
.tier.is-past { opacity: 0.5; }
.tier.is-past .tier__price { text-decoration: line-through; }
.tier__flag { position: absolute; top: 0; right: 0; background: var(--color-signal); color: var(--color-ink); font-family: var(--font-kicker); letter-spacing: 0.08em; font-size: var(--fs-12); padding: 0.3em 0.7em; }
/* ---------- Stat / fact strip -------------------------------------------- */
.fact-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.fact { border-left: 3px solid var(--color-teal); padding-left: var(--space-4); }
.fact__num { font-family: var(--font-display); font-size: var(--fs-48); line-height: 1; color: var(--color-teal); }
.fact__label { color: var(--color-muted-on-ink); font-size: var(--fs-14); margin-top: var(--space-1); }
.fact__src { display: block; font-size: var(--fs-12); color: var(--color-muted-on-ink); opacity: 0.7; margin-top: var(--space-1); }
.surface-paper .fact__num, .surface-paper-dim .fact__num { color: var(--color-teal); }
.surface-paper .fact__label, .surface-paper-dim .fact__label,
.surface-paper .fact__src, .surface-paper-dim .fact__src { color: var(--color-muted-on-paper); }
@media (max-width: 767px) { .fact-strip { grid-template-columns: 1fr 1fr; } }
/* ---------- Countdown ---------------------------------------------------- */
.countdown { display: inline-flex; flex-direction: column; gap: var(--space-2); }
.countdown__label { font-family: var(--font-kicker); letter-spacing: 0.12em; color: var(--color-teal); font-size: var(--fs-16); }
.countdown__clock { display: flex; gap: var(--space-3); }
.countdown__unit { text-align: center; min-width: 62px; }
.countdown__val { font-family: var(--font-display); font-size: var(--fs-48); line-height: 1; color: var(--color-paper); font-variant-numeric: tabular-nums; }
/* Adaptive: dark digits on light surfaces (e.g. city pages); white stays on dark (home hero). */
.surface-paper .countdown__val,
.surface-paper-dim .countdown__val { color: var(--color-ink); }
.countdown__u { display: block; font-family: var(--font-kicker); letter-spacing: 0.1em; font-size: var(--fs-12); color: var(--color-muted-on-ink); margin-top: var(--space-1); }
.countdown__done { font-family: var(--font-kicker); letter-spacing: 0.1em; color: var(--color-lime); }
/* ---------- Accordion (FAQ) --------------------------------------------- */
.accordion { border-top: 1px solid var(--color-line-ink); }
.surface-ink .accordion, .surface-ink-soft .accordion { border-color: var(--color-line); }
.accordion__item { border-bottom: 1px solid var(--color-line-ink); }
.surface-ink .accordion__item, .surface-ink-soft .accordion__item { border-color: var(--color-line); }
.accordion__btn {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
padding: var(--space-4) 0; text-align: left; font-weight: 600; font-size: var(--fs-18); color: inherit;
}
.accordion__btn:hover { color: var(--color-teal); }
.surface-ink .accordion__btn:hover, .surface-ink-soft .accordion__btn:hover { color: var(--color-teal); }
.accordion__icon { flex: none; width: 22px; height: 22px; position: relative; transition: transform var(--dur) var(--ease); }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; background: currentColor; }
.accordion__icon::before { top: 50%; left: 2px; right: 2px; height: 2px; transform: translateY(-50%); }
.accordion__icon::after { left: 50%; top: 2px; bottom: 2px; width: 2px; transform: translateX(-50%); transition: transform var(--dur) var(--ease); }
.accordion__btn[aria-expanded="true"] .accordion__icon::after { transform: translateX(-50%) scaleY(0); }
.accordion__panel { overflow: hidden; max-height: 0; transition: max-height var(--dur) var(--ease); }
.accordion__panel-inner { padding-bottom: var(--space-5); color: var(--color-muted-on-ink); max-width: 68ch; }
.surface-paper .accordion__panel-inner, .surface-paper-dim .accordion__panel-inner { color: var(--color-muted-on-paper); }
/* ---------- Modal (Cara Daftar) ----------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 200; display: none; }
.modal.is-open { display: block; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); }
.modal__dialog {
position: relative; z-index: 1; max-width: 560px;
margin: 8vh auto 0; margin: 8dvh auto 0; /* dvh with vh fallback */
max-height: 84vh; max-height: 84dvh; overflow-y: auto;
background: var(--color-ink-soft); border: 1px solid var(--color-teal); padding: var(--space-6);
clip-path: var(--shard-lg);
}
.modal__close { position: absolute; top: var(--space-4); right: var(--space-4); width: 40px; height: 40px; display: grid; place-items: center; color: var(--color-paper); border: 1px solid var(--color-line-strong); }
.modal__close:hover { color: var(--color-teal); border-color: var(--color-teal); }
.modal h2 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-32); margin-bottom: var(--space-4); }
.steps { display: grid; gap: var(--space-3); margin: var(--space-4) 0; counter-reset: step; }
.steps li { display: flex; gap: var(--space-3); align-items: flex-start; }
.steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-display); color: var(--color-teal); font-size: var(--fs-24); line-height: 1; flex: none; }
.store-badges { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-4) 0; }
.store-badge { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-line-strong); padding: 0.5em 0.9em; color: var(--color-paper); }
.store-badge:hover { border-color: var(--color-teal); color: var(--color-teal); }
.store-badge small { display: block; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted-on-ink); }
.store-badge b { font-size: var(--fs-16); }
/* Notify / newsletter form */
.field-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.field-row input[type="email"] { flex: 1; min-width: 200px; padding: 0.8em 1em; background: var(--color-ink); border: 1px solid var(--color-line-strong); color: var(--color-paper); }
.field-row input::placeholder { color: var(--color-muted-on-ink); }
/* ---------- Sponsor strip ------------------------------------------------ */
.sponsors { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6); }
.sponsor { filter: grayscale(1); opacity: 0.65; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-24); color: var(--color-paper); letter-spacing: 0.02em; }
.sponsor:hover { filter: grayscale(0); opacity: 1; color: var(--color-teal); }
.sponsor small { display: block; font-family: var(--font-kicker); font-size: var(--fs-12); letter-spacing: 0.1em; color: var(--color-muted-on-ink); }
.sponsor img { height: 30px; width: auto; display: block; }
.sponsor img.sp-pln { height: 44px; border-radius: 9px; } /* PLN Mobile app icon (square) */
.sponsor img.sp-mills { height: 34px; }
/* MILLS logo ships black-only; invert to white on dark backgrounds (§10.1) */
.on-dark-invert { filter: invert(1); }
/* Product renders (jersey / jacket) — studio 3D on neutral grey, shown as-is */
.merch-img { width: 100%; height: auto; display: block; border: 1px solid var(--color-line); background: #d7d7d7; }
.merch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.merch-cap { font-family: var(--font-kicker); letter-spacing: 0.08em; color: var(--color-muted-on-ink); font-size: var(--fs-14); margin-top: var(--space-2); }
@media (max-width: 640px) { .merch-grid { grid-template-columns: 1fr; } }
/* ---------- Image placeholder (branded) ---------------------------------- */
.ph {
position: relative; overflow: hidden;
background: var(--color-ink-soft);
display: grid; place-items: center;
border: 1px solid var(--color-line);
}
.ph::before {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(135deg, transparent 60%, var(--color-teal-tint) 60%, var(--color-teal-tint) 68%, transparent 68%),
linear-gradient(135deg, transparent 74%, rgba(12,110,158,0.28) 74%, rgba(12,110,158,0.28) 78%, transparent 78%);
pointer-events: none;
}
.ph__label { position: relative; z-index: 1; font-family: var(--font-kicker); letter-spacing: 0.1em; color: var(--color-muted-on-ink); font-size: var(--fs-14); text-align: center; padding: var(--space-4); }
.ph__label svg { width: 34px; height: 34px; margin: 0 auto var(--space-2); color: var(--color-teal); }
.ph--empty { border-style: dashed; }
/* ---------- Shard divider ------------------------------------------------ */
.shard-divider { height: 40px; background: var(--color-teal); clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%); }
.shard-divider--sage { background: var(--color-lime); }
/* ---------- Hero --------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--color-ink); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media .ph { width: 100%; height: 100%; border: none; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Decorative official shard graphic (assets/img/graphics/*) */
.deco-shard { position: absolute; pointer-events: none; z-index: 0; opacity: 0.5; user-select: none; }
/* Decorative hero background for pages without a dedicated Key Visual:
plain --color-ink + flat, text-free shard fragments (no floating label). */
.hero__media--deco { background: var(--color-ink); }
.hero__media--deco .deco-shard--tr { top: -12%; right: -6%; width: 42%; opacity: 0.35; }
.hero__media--deco .deco-shard--bl { bottom: -16%; left: -8%; width: 30%; opacity: 0.22; }
@media (max-width: 640px) {
.hero__media--deco .deco-shard--tr { width: 62%; opacity: 0.28; }
.hero__media--deco .deco-shard--bl { width: 50%; }
}
/* ---------- Per-section shard arrangements (v4) --------------------------- */
/* Every deco hero draws from the same shard vocabulary but arranges it
differently, so no two sections repeat one composite. Layers per hero:
two fragment ![]()
(.deco-shard--tr / --bl, repositioned per variant) plus
one teal piece painted through ::before. Pieces used as background deco are
the abstract shards only (teal-01 bar, teal-02 burst, teal-04 fan) — never
the logo- or photo-content piece files. */
.hero__media--deco::before {
content: ""; position: absolute; z-index: 0; pointer-events: none;
background-repeat: no-repeat; background-position: center; background-size: contain;
opacity: 0.16;
}
/* v1 — burst high-right, tight fragment echo lower-left */
.hero__media--deco--v1 .deco-shard--tr { top: -14%; right: -3%; width: 39%; opacity: 0.33; transform: rotate(5deg); }
.hero__media--deco--v1 .deco-shard--bl { bottom: -20%; left: -7%; width: 24%; opacity: 0.18; }
.hero__media--deco--v1::before { background-image: url("/assets/img/graphics/pieces/shard-piece-teal-02.png"); top: -6%; right: 10%; width: 32%; height: 66%; opacity: 0.15; transform: rotate(-9deg); }
/* v2 — fan sweeping in from bottom-left, small fragment top-left */
.hero__media--deco--v2 .deco-shard--tr { top: -10%; left: -6%; right: auto; width: 26%; opacity: 0.20; }
.hero__media--deco--v2 .deco-shard--bl { bottom: -14%; right: -6%; left: auto; width: 34%; opacity: 0.26; }
.hero__media--deco--v2::before { background-image: url("/assets/img/graphics/pieces/shard-piece-teal-04.png"); bottom: -10%; left: 2%; width: 40%; height: 78%; opacity: 0.17; transform: rotate(4deg); }
/* v3 — vertical bar along the right edge, burst grounded lower-right */
.hero__media--deco--v3 .deco-shard--tr { top: -16%; right: 6%; width: 30%; opacity: 0.24; }
.hero__media--deco--v3 .deco-shard--bl { bottom: -18%; left: -10%; width: 28%; opacity: 0.18; }
.hero__media--deco--v3::before { background-image: url("/assets/img/graphics/pieces/shard-piece-teal-01.png"); top: -20%; right: -2%; width: 20%; height: 150%; opacity: 0.18; }
/* v4 — fan high-right rotated back, fragment drifting mid-left */
.hero__media--deco--v4 .deco-shard--tr { top: -8%; right: 4%; width: 34%; opacity: 0.20; transform: rotate(-6deg); }
.hero__media--deco--v4 .deco-shard--bl { bottom: 6%; left: -12%; width: 30%; opacity: 0.16; }
.hero__media--deco--v4::before { background-image: url("/assets/img/graphics/pieces/shard-piece-teal-04.png"); top: -14%; right: -4%; width: 42%; height: 74%; opacity: 0.15; transform: rotate(-16deg) scaleX(-1); }
/* v5 — burst large and low-opacity centre-right, thin bar at left edge */
.hero__media--deco--v5 .deco-shard--tr { top: -18%; right: -8%; width: 46%; opacity: 0.22; }
.hero__media--deco--v5 .deco-shard--bl { bottom: -22%; left: -4%; width: 22%; opacity: 0.16; }
.hero__media--deco--v5::before { background-image: url("/assets/img/graphics/pieces/shard-piece-teal-01.png"); top: -25%; left: -3%; width: 16%; height: 150%; opacity: 0.14; }
/* v6 — fan bottom-right, fragment centred high */
.hero__media--deco--v6 .deco-shard--tr { top: -16%; left: 28%; right: auto; width: 30%; opacity: 0.22; transform: rotate(10deg); }
.hero__media--deco--v6 .deco-shard--bl { bottom: -16%; left: -8%; width: 26%; opacity: 0.18; }
.hero__media--deco--v6::before { background-image: url("/assets/img/graphics/pieces/shard-piece-teal-02.png"); bottom: -12%; right: 4%; width: 36%; height: 72%; opacity: 0.16; transform: rotate(14deg); }
@media (max-width: 640px) {
/* on phones keep the ::before piece subtle and clear of the headline */
.hero__media--deco::before { opacity: 0.12 !important; }
.hero__media--deco--v3::before,
.hero__media--deco--v5::before { height: 120%; }
}
@media (prefers-reduced-motion: no-preference) {
/* one quiet "assembly": the ::before piece fades into place on load.
Opacity-only so it never overrides each variant's own transform. */
.hero__media--deco::before { animation: shard-settle 900ms var(--ease) both; }
@keyframes shard-settle { from { opacity: 0; } }
}
.hero__media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(120deg, rgba(10,10,10,0.94) 30%, rgba(10,10,10,0.6) 65%, rgba(12,110,158,0.35) 100%);
}
.hero__inner { position: relative; z-index: 1; padding-block: clamp(var(--space-8), 12vw, var(--space-10)); }
.hero__title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2.75rem, 9vw, var(--fs-96)); line-height: 0.95; letter-spacing: 0.01em; }
.hero__title .volt { color: var(--color-teal); }
.hero__sub { margin-top: var(--space-4); max-width: 52ch; font-size: var(--fs-18); color: #D8DDE2; }
.hero__cta { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); }
.hero--compact .hero__inner { padding-block: var(--space-8); }
/* ---------- Journey rail (home signature) -------------------------------- */
.journey { position: relative; }
.journey__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); position: relative; }
.journey__track::before { content: ""; position: absolute; top: 22px; left: 8%; right: 8%; height: 3px; background: linear-gradient(90deg, var(--color-teal) 0%, var(--color-lime) 100%); z-index: 0; }
.journey-reveal .journey__track::before { transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease); }
.journey-reveal.is-visible .journey__track::before { transform: scaleX(1); }
.journey__stop { position: relative; z-index: 1; text-align: center; }
.journey__dot { width: 46px; height: 46px; margin: 0 auto var(--space-3); border-radius: 50%; background: var(--color-ink); border: 3px solid var(--color-teal); display: grid; place-items: center; font-family: var(--font-display); color: var(--color-teal); }
.journey__stop:last-child .journey__dot { border-color: var(--color-lime); color: var(--color-lime); }
.journey__city { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-24); line-height: 1; }
.journey__date { color: var(--color-muted-on-ink); font-size: var(--fs-14); }
@media (max-width: 640px) {
.journey__track { grid-template-columns: 1fr; gap: var(--space-5); }
.journey__track::before { top: 0; bottom: 0; left: 22px; right: auto; width: 3px; height: auto; background: linear-gradient(180deg, var(--color-teal), var(--color-lime)); }
.journey__stop { display: grid; grid-template-columns: 46px 1fr; gap: var(--space-3); text-align: left; align-items: center; }
.journey__dot { margin: 0; }
}
/* ---------- Timeline (schedule) ------------------------------------------ */
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.timeline__phase { border-top: 3px solid var(--color-teal); padding-top: var(--space-3); }
/* num / month / title are s in the rendered markup — force block so they
stack as three lines (margins on inline elements are ignored otherwise). */
.timeline__num { display: block; font-family: var(--font-display); font-size: var(--fs-32); color: var(--color-teal); line-height: 1; }
.timeline__month { display: block; font-family: var(--font-kicker); letter-spacing: 0.1em; font-size: var(--fs-14); color: var(--color-muted-on-ink); margin-top: var(--space-3); }
.timeline__title { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-24); line-height: 1.05; color: var(--color-paper); margin-top: var(--space-1); }
.timeline__list { color: var(--color-muted-on-ink); font-size: var(--fs-14); margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.timeline__list li { position: relative; padding-left: 1em; line-height: 1.4; }
.timeline__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--color-teal); }
@media (max-width: 767px) { .timeline { grid-template-columns: 1fr; } .timeline__phase { border-top: none; border-left: 3px solid var(--color-teal); padding: 0 0 var(--space-4) var(--space-4); } }
/* ---------- Prose -------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose p { margin-bottom: var(--space-4); }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { font-family: var(--font-kicker); letter-spacing: 0.06em; font-size: var(--fs-24); margin: var(--space-6) 0 var(--space-3); }
.prose ul { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.prose ul li { padding-left: 1.4em; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; background: var(--color-teal); }
/* ---------- Utility ------------------------------------------------------ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
.grid-2--wide-left { grid-template-columns: 1.2fr 0.8fr; }
@media (max-width: 767px) { .grid-2, .grid-2--wide-left { grid-template-columns: 1fr; } }
.stack > * + * { margin-top: var(--space-4); }
.text-center { text-align: center; }
/* In centered sections, center the section-head block too — its max-width:60ch
otherwise stays left-anchored while full-width elements (e.g. a .hero__cta
button row with justify-content:center) center in the container, so the text
and the buttons wouldn't line up. */
.text-center .section-head { margin-inline: auto; }
.mt-6 { margin-top: var(--space-6); }
.note { font-size: var(--fs-14); color: var(--color-muted-on-ink); border-left: 2px solid var(--color-teal); padding-left: var(--space-3); }
.surface-paper .note, .surface-paper-dim .note { color: var(--color-muted-on-paper); }
.eyebrow-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
/* Reveal-on-scroll */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }
/* ==========================================================================
Mobile compatibility pass (§12) — added after the base component rules.
========================================================================== */
/* Off-canvas mobile menu: keep it anchored BELOW the sticky header (inset top 68px
from the base rule) so the hamburger — which toggles to a close button — stays on
top and clickable. Only add the home-indicator safe-area padding here. */
@media (max-width: 1023px) {
.nav__menu { padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); }
}
/* Ticket tiers: single full-width column on phones (not a 2×2 grid) */
@media (max-width: 767px) {
[data-ticket-tiers].card-grid { grid-template-columns: 1fr; }
}
/* Journey rail + countdown stay readable when stacked on mobile */
@media (max-width: 640px) {
[data-journey] { max-width: 420px; }
.countdown__clock { flex-wrap: wrap; gap: var(--space-2); }
.countdown__unit { min-width: 68px; }
}
/* Minimum 44×44 touch targets for interactive elements on touch widths */
@media (max-width: 1023px) {
.footer__col a,
.nav__dropdown a { min-height: 44px; display: flex; align-items: center; }
.footer__bottom a,
.gallery-filter,
.store-badge { min-height: 44px; display: inline-flex; align-items: center; }
.lang-switch a { min-height: 44px; display: inline-flex; align-items: center; padding: 0.4em 0.8em; }
.footer__social a { width: 44px; height: 44px; }
.accordion__btn { min-height: 44px; }
}
/* viewport-fit=cover: keep content clear of notches in landscape */
@supports (padding: max(0px)) {
.container {
padding-left: max(var(--space-5), env(safe-area-inset-left));
padding-right: max(var(--space-5), env(safe-area-inset-right));
}
}
/* Product/merch renders never force horizontal scroll */
.merch-img, .hero__img { max-width: 100%; }