/* GENERATED by tools/build-assets.php from resources/kiosk/css/*.css - DO NOT EDIT THIS FILE DIRECTLY */
/* =================================================================
BROADWAY PASS - Kiosk (SPA) · 2026-05-25
Target: Samsung KM24A · Tizen 4.0 · Chromium M56 · 1080×1920 portrait
Rules (see kiosk-knowledge/14-performance-on-the-kiosk.md):
* No `gap` on flex (use margins / negative-margin trick)
* No `inset` shorthand (top/right/bottom/left longhand)
* No `clamp/min/max()` funcs (fixed values)
* No `:is/:where/:has` (write out selectors)
* No `:focus-within` (JS toggles .is-focused)
* No `aspect-ratio` (fixed width+height)
* Animate only transform/opacity (compositor only)
* `touch-action` set on every scroll + tappable surface
* Scroll containers get `transform: translateZ(0)` → own layer
================================================================= */
/* ----- 1. Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden;
-webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body, .k-app {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer;
-webkit-tap-highlight-color: transparent; outline: none;
touch-action: manipulation; }
button:focus, a:focus, input:focus { outline: none; }
button::-moz-focus-inner { border: 0; padding: 0; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
touch-action: manipulation; }
img { display: block; max-width: 100%;
image-rendering: -webkit-optimize-contrast;
-webkit-user-drag: none;
user-drag: none; }
svg, canvas, video { -webkit-user-drag: none; user-drag: none; }
input { -webkit-appearance: none; appearance: none; }
/* ----- 1b. Icon system (Lucide geometry, currentColor) ---------
Sized via the parent's font-size (width: 1em; height: 1em).
Stroke 1.75 px, rounded caps + joins. Override .k-icon width/
height in context for buttons that don't want font-sized icons. */
.k-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1em; height: 1em;
flex-shrink: 0;
color: currentColor;
line-height: 1;
}
.k-icon svg {
width: 100%; height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
/* Render at integer pixels so 1.75 stroke stays crisp on Cr56 */
shape-rendering: geometricPrecision;
display: block;
}
/* ----- 2. Design tokens (same brand vocabulary as V2) ----------- */
:root {
--red-1: #B81C20;
--red-2: #D02329;
--red-3: #E63037;
--red-deep: #7A1014;
--red-soft: #FCEAEA;
--red-line: #F2C5C7;
--cream-1: #FBF6EC;
--cream-2: #F4ECDA;
--cream-3: #E8DDC5;
--white: #FFFFFF;
--gold-1: #E8B547;
--gold-2: #C99030;
--gold-3: #F4E2B0;
--ink-1: #1B0608;
--ink-2: #3D1417;
--ink-soft: #6E4F52;
--success: #1B7A3A;
--sh-1: 0 2px 6px rgba(26, 6, 8, 0.06);
--sh-2: 0 8px 22px rgba(26, 6, 8, 0.10);
--sh-3: 0 22px 50px rgba(26, 6, 8, 0.18);
--sh-red: 0 14px 32px rgba(208, 35, 41, 0.32);
--sh-red-sm: 0 4px 12px rgba(208, 35, 41, 0.32);
--r-card: 16px;
--r-card-lg: 24px;
--r-input: 14px;
--r-pill: 100px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* ----- 3. Body / app shell ------------------------------------- */
.k-body { background: var(--cream-1); color: var(--ink-1);
font-family: Inter, system-ui, -apple-system, sans-serif;
font-size: 16px; line-height: 1.45;
-webkit-font-smoothing: antialiased; }
.k-app {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: flex; flex-direction: column;
}
/* ----- 4. Topbar -----------------------------------------------
Header - type-led, marquee-bulb signature, lit like a stage.
Lighting model (the premium feel comes from these layers stacked):
1. Base red gradient (red-3 → red-1 → red-deep) - diagonal
2. Warm spotlight from upper-left (white-amber radial wash)
3. Bottom shadow gradient that recesses the bulbs into the edge
4. Bulbs themselves: white-gold filament core → amber → dark edge
---------------------------------------------------------------- */
.k-topbar {
flex-shrink: 0;
position: relative;
color: var(--cream-1);
/* Multi-layer background. First gradient sits on top.
Layer 1 (top): warm spotlight from upper-left
Layer 2: subtle vertical depth (lighter mid, deeper bottom)
Layer 3: diagonal base red - the dominant note */
background:
-webkit-radial-gradient(ellipse 70% 90% at 18% 18%,
rgba(255, 220, 200, 0.18) 0%, rgba(255, 200, 170, 0.06) 35%, transparent 65%),
-webkit-linear-gradient(180deg,
rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.00) 40%,
rgba(0, 0, 0, 0.10) 100%),
-webkit-linear-gradient(135deg,
var(--red-3) 0%, var(--red-2) 22%, var(--red-1) 55%, var(--red-deep) 100%);
background:
radial-gradient(ellipse 70% 90% at 18% 18%,
rgba(255, 220, 200, 0.18) 0%, rgba(255, 200, 170, 0.06) 35%, transparent 65%),
linear-gradient(180deg,
rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.00) 40%,
rgba(0, 0, 0, 0.10) 100%),
linear-gradient(135deg,
var(--red-3) 0%, var(--red-2) 22%, var(--red-1) 55%, var(--red-deep) 100%);
box-shadow:
0 12px 28px rgba(74, 10, 12, 0.48),
inset 0 1px 0 rgba(255, 255, 255, 0.10);
overflow: hidden;
-webkit-transform: translateZ(0); transform: translateZ(0);
}
/* Soft vignette - barely-there darkening at the corners. Pulls the
eye to the center, where the wordmark lives. */
.k-topbar::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background:
-webkit-radial-gradient(ellipse 110% 90% at 50% 50%,
transparent 50%, rgba(74, 10, 12, 0.28) 100%);
background:
radial-gradient(ellipse 110% 90% at 50% 50%,
transparent 50%, rgba(74, 10, 12, 0.28) 100%);
pointer-events: none;
z-index: 1;
}
/* Bottom shadow band - sits just above the bulb row. Makes the bulbs
feel inset into the edge of the marquee, not painted on top. */
.k-topbar::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 14px;
height: 28px;
background:
-webkit-linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.22) 100%);
background:
linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.22) 100%);
pointer-events: none;
z-index: 2;
}
/* Marquee bulbs - smaller diameter, white-hot golden filament core,
warm halo glow. Built from a multi-stop radial gradient that mimics
how an incandescent bulb actually photographs. */
.k-topbar-bulbs {
position: absolute;
left: 0; right: 0; bottom: 5px;
height: 14px;
z-index: 4;
pointer-events: none;
background-image:
-webkit-radial-gradient(circle at 50% 50%,
rgba(255, 252, 232, 1) 0%,
rgba(255, 236, 178, 0.98) 14%,
rgba(244, 200, 96, 0.95) 28%,
rgba(201, 144, 48, 0.85) 38%,
rgba(122, 80, 20, 0.45) 46%,
transparent 52%);
background-image:
radial-gradient(circle at 50% 50%,
rgba(255, 252, 232, 1) 0%,
rgba(255, 236, 178, 0.98) 14%,
rgba(244, 200, 96, 0.95) 28%,
rgba(201, 144, 48, 0.85) 38%,
rgba(122, 80, 20, 0.45) 46%,
transparent 52%);
background-size: 24px 14px;
background-repeat: repeat-x;
background-position: center;
/* Warm filter glow - softens the bulb edges and creates ambient
light spill onto the surrounding red */
-webkit-filter: drop-shadow(0 0 3px rgba(255, 210, 130, 0.65))
drop-shadow(0 0 7px rgba(255, 180, 90, 0.35));
filter: drop-shadow(0 0 3px rgba(255, 210, 130, 0.65))
drop-shadow(0 0 7px rgba(255, 180, 90, 0.35));
}
.k-topbar-row {
display: flex; align-items: center; justify-content: space-between;
/* Top padding lighter than bottom - pulls the logo + wordmark up
so they optically balance the bulb band sitting at the bottom. */
padding: 14px 48px 36px 48px;
height: 152px;
position: relative;
z-index: 2;
}
.k-brand {
display: inline-flex; align-items: center;
color: var(--cream-1);
padding: 0; margin: 0;
flex-shrink: 0;
background: transparent;
-webkit-transition: -webkit-transform 180ms var(--ease), -webkit-filter 220ms ease;
transition: transform 180ms var(--ease), filter 220ms ease;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
/* Brand press confirm - subtle scale-down + warm glow on the logo, so
customers see the kiosk acknowledged their tap (it resets the session). */
.k-brand:active {
-webkit-transform: scale(0.96);
transform: scale(0.96);
-webkit-filter: drop-shadow(0 0 14px rgba(255, 200, 96, 0.55));
filter: drop-shadow(0 0 14px rgba(255, 200, 96, 0.55));
}
/* Logo - no halo, sits directly on the red. Two-layer drop-shadow
for definition (close + spread). */
.k-brand-logo {
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
margin-right: 28px;
/* Nudge the emblem down a touch so it sits optically centred against
the wordmark (which is pulled down by its own margin-top). */
margin-top: 14px;
background: transparent;
}
.k-brand-logo img {
height: 112px;
width: auto;
display: block;
/* Punch: a touch of contrast + saturation so the gold reads RICHER
against the red (low tonal contrast was making it look flat), then a
layered elevation shadow - a tight DARK contact shadow to cut the
emblem cleanly off the busy red, a main lift shadow, and a wide soft
ambient for the floating feel. */
-webkit-filter:
contrast(1.07) saturate(1.14)
drop-shadow(0 2px 2px rgba(0, 0, 0, 0.52))
drop-shadow(0 4px 6px rgba(0, 0, 0, 0.38))
drop-shadow(0 9px 12px rgba(0, 0, 0, 0.27));
filter:
contrast(1.07) saturate(1.14)
drop-shadow(0 2px 2px rgba(0, 0, 0, 0.52))
drop-shadow(0 4px 6px rgba(0, 0, 0, 0.38))
drop-shadow(0 9px 12px rgba(0, 0, 0, 0.27));
}
/* Divider hidden - whitespace does the work */
.k-brand-text {
display: flex; flex-direction: column; align-items: flex-start;
color: var(--cream-1);
/* Pulled DOWN relative to the logo. The topbar-row padding is
asymmetric (lighter top) which already pulled the logo up to
balance the bulb band - we don't want the text dragged up with
it. Flex align-items:center plus this margin shifts the text
content ~8px down without affecting the logo. */
margin-top: 16px;
}
.k-brand-text > *:not(:last-child) { margin-bottom: 8px; }
/* The wordmark is the visual anchor. Generous size, generous tracking.
Engraved letterpress effect: stacked text-shadows simulate the way
light catches engraved brass - bright sliver on the upper edge of
each letter, dark shadow on the lower edge, plus an ambient drop. */
.k-brand-text-1 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 900; font-size: 36px;
letter-spacing: 5.5px;
line-height: 1;
color: var(--cream-1);
text-shadow:
0 -1px 0 rgba(122, 16, 20, 0.65),
0 1px 0 rgba(255, 232, 200, 0.18),
0 3px 0 rgba(74, 10, 12, 0.45),
0 6px 14px rgba(0, 0, 0, 0.55);
}
.k-brand-text-2 {
font-family: Inter, sans-serif;
font-size: 11px; font-weight: 700;
letter-spacing: 3.2px; text-transform: uppercase;
color: rgba(251, 246, 236, 0.68);
line-height: 1;
}
/* Right aside: small caps label, clean cream sans-serif value.
No gold, no italic - that's V2's vocabulary. */
.k-topbar-aside {
display: flex; flex-direction: column; align-items: flex-end;
text-align: right;
flex-shrink: 0;
/* Same as .k-brand-text - keep text optically centered while
the logo stays in its bulb-band-compensated position. */
margin-top: 16px;
padding: 10px 16px;
/* Boxy rounded corner (not pill) - matches the detail card
vocabulary. Frame is dark-glass since the topbar background
is red, so the aside reads as a small chip on top. */
border-radius: 12px;
-webkit-transition: background 220ms ease, -webkit-transform 180ms var(--ease), box-shadow 220ms ease;
transition: background 220ms ease, transform 180ms var(--ease), box-shadow 220ms ease;
}
.k-topbar-aside.is-pressable {
cursor: pointer;
background: rgba(0, 0, 0, 0.18);
box-shadow: inset 0 0 0 1px rgba(244, 226, 176, 0.22);
}
.k-topbar-aside.is-pressable:active {
-webkit-transform: scale(0.97);
transform: scale(0.97);
background: rgba(0, 0, 0, 0.30);
box-shadow: inset 0 0 0 1px rgba(244, 226, 176, 0.50);
}
.k-topbar-aside > *:not(:last-child) { margin-bottom: 7px; }
.k-topbar-aside-label {
font-family: Inter, sans-serif;
font-size: 10px; font-weight: 700; letter-spacing: 2.6px;
text-transform: uppercase;
color: rgba(251, 246, 236, 0.55);
line-height: 1;
}
.k-topbar-aside-value {
font-family: Inter, sans-serif;
font-weight: 600; font-size: 18px;
letter-spacing: 0.4px;
color: var(--cream-1);
line-height: 1.15;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* ----- 5. Progress strip --------------------------------------- */
.k-progress {
flex-shrink: 0;
height: 6px; background: var(--cream-3);
position: relative; overflow: hidden;
}
.k-progress-fill {
height: 100%;
width: 20%; /* JS animates this */
background:
-webkit-linear-gradient(90deg, var(--gold-2) 0%, var(--gold-1) 50%, var(--gold-3) 100%);
background:
linear-gradient(90deg, var(--gold-2) 0%, var(--gold-1) 50%, var(--gold-3) 100%);
-webkit-transition: width 420ms var(--ease);
transition: width 420ms var(--ease);
-webkit-transform: translateZ(0); transform: translateZ(0);
}
/* ----- 6. Stage (scroll container) ----------------------------- */
.k-stage {
flex: 1 1 auto;
position: relative;
overflow-x: hidden;
overflow-y: scroll;
background: var(--cream-1);
padding: 32px 40px 48px 40px;
/* Own compositor layer - biggest single perf win on Cr56 */
-webkit-transform: translateZ(0); transform: translateZ(0);
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
/* Always-on themed scrollbar gutter so width doesn't jitter on
content change. The visual gutter sits on the right; we pad
slightly less on the right to compensate. */
}
.k-stage::-webkit-scrollbar { width: 8px; }
.k-stage::-webkit-scrollbar-track {
background: var(--cream-2);
border-left: 1px solid var(--cream-3);
}
.k-stage::-webkit-scrollbar-thumb {
background:
-webkit-linear-gradient(180deg, var(--red-2) 0%, var(--red-deep) 100%);
background:
linear-gradient(180deg, var(--red-2) 0%, var(--red-deep) 100%);
border-radius: 4px;
}
/* Screens - only one .is-on at a time */
.k-screen {
display: none;
-webkit-animation: kin 320ms var(--ease) both;
animation: kin 320ms var(--ease) both;
}
.k-screen.is-on { display: block; }
/* 2026-05-28: Dropped the transform from this enter animation. A
transform applied to .k-screen (even an identity translate3d at the
end of the animation) creates a new containing block and BREAKS
position:sticky for any descendant - the sticky no longer pins
against .k-stage's scroll viewport. Opacity-only fade keeps the
entrance feel without that side effect. */
@-webkit-keyframes kin {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes kin {
from { opacity: 0; }
to { opacity: 1; }
}
/* Per-element fade-up - small stagger for visual polish */
.k-fadeup { -webkit-animation: kfadeup 460ms var(--ease) both;
animation: kfadeup 460ms var(--ease) both; }
@-webkit-keyframes kfadeup {
from { opacity: 0; -webkit-transform: translate3d(0, 12px, 0); }
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}
@keyframes kfadeup {
from { opacity: 0; transform: translate3d(0, 12px, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* ----- 7. Bottom action bar ------------------------------------ */
.k-bottom {
position: relative;
flex-shrink: 0;
/* Warm cream gradient + lift shadow so the action rail reads as an
anchored "purchase bar" bookending the red topbar, not a flat strip. */
background: -webkit-linear-gradient(top, #FFFFFF 0%, var(--cream-1) 100%);
background: linear-gradient(180deg, #FFFFFF 0%, var(--cream-1) 100%);
padding: 20px 32px;
display: flex; align-items: center; justify-content: space-between;
box-shadow: 0 -10px 28px rgba(26, 6, 8, 0.10);
-webkit-transform: translateZ(0); transform: translateZ(0);
}
/* Gold hairline on the top edge - ties the rail to the theme's gold accents
(progress strip, eyebrow bars, card trim). */
.k-bottom::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: -webkit-linear-gradient(left, transparent 0%, var(--gold-2) 18%, var(--gold-1) 50%, var(--gold-2) 82%, transparent 100%);
background: linear-gradient(90deg, transparent 0%, var(--gold-2) 18%, var(--gold-1) 50%, var(--gold-2) 82%, transparent 100%);
box-shadow: 0 0 8px rgba(232, 181, 71, 0.45);
}
/* Respect the [hidden] attribute - display:flex above would otherwise
override the browser default, leaving a white strip visible on the
home screen (where clearBottom() sets hidden=true). */
.k-bottom[hidden] { display: none !important; }
.k-bottom > *:not(:last-child) { margin-right: 18px; }
.k-bottom-total {
font-size: 18px; color: var(--ink-soft);
font-weight: 600;
}
.k-bottom-total strong {
font-family: 'Playfair Display', Georgia, serif;
font-size: 36px; font-weight: 800;
color: var(--ink-1);
margin-left: 14px;
letter-spacing: -0.5px;
}
/* ----- 8. Buttons ---------------------------------------------- */
.k-btn {
display: inline-flex; align-items: center; justify-content: center;
font-family: Inter, sans-serif;
font-weight: 700; font-size: 18px;
letter-spacing: 0.6px;
padding: 0 36px;
height: 64px;
border-radius: var(--r-pill);
-webkit-transition: -webkit-transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms ease;
transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms ease;
-webkit-transform: translateZ(0); transform: translateZ(0);
touch-action: manipulation;
}
.k-btn:active { -webkit-transform: scale(0.97); transform: scale(0.97); }
.k-btn[disabled] {
opacity: 0.4; pointer-events: none;
}
.k-btn-red {
background:
-webkit-linear-gradient(180deg, var(--red-3) 0%, var(--red-2) 60%, var(--red-1) 100%);
background:
linear-gradient(180deg, var(--red-3) 0%, var(--red-2) 60%, var(--red-1) 100%);
color: var(--white);
box-shadow: var(--sh-red);
}
.k-btn-white {
background: var(--white);
color: var(--ink-1);
border: 2px solid var(--cream-3);
box-shadow: var(--sh-1);
}
.k-btn-arrow {
width: 22px; height: 22px;
margin-left: 12px;
}
.k-btn-back {
background: transparent;
color: var(--ink-soft);
height: 64px;
padding: 0 40px;
min-width: 160px;
font-weight: 600; font-size: 16px;
letter-spacing: 1px;
text-transform: uppercase;
border: 2px solid var(--cream-3);
background: var(--white);
border-radius: var(--r-pill);
}
/* ============================================================
SCREENS
============================================================ */
/* ----- HOME SCREEN -------------------------------------------- */
/* Featured carousel - premium lighting model carried over from the
header, plus consistent CTA positioning (margin-top: auto on the
button so it pins to the bottom regardless of title length) and
touch-swipe interaction. */
.k-carousel {
position: relative;
width: 100%;
height: 540px;
border-radius: var(--r-card-lg);
overflow: hidden;
background: var(--ink-1);
box-shadow:
0 22px 52px rgba(26, 6, 8, 0.42),
0 8px 18px rgba(26, 6, 8, 0.28),
inset 0 0 0 1px rgba(232, 181, 71, 0.22);
margin-bottom: 56px;
-webkit-transform: translateZ(0); transform: translateZ(0);
}
.k-carousel-track {
display: flex;
width: 100%; height: 100%;
-webkit-transition: -webkit-transform 620ms var(--ease);
transition: transform 620ms var(--ease);
will-change: transform;
-webkit-transform: translateZ(0); transform: translateZ(0);
}
/* During an active drag, no transition - track follows finger 1:1 */
.k-carousel-track.is-dragging {
-webkit-transition: none; transition: none;
}
.k-carousel-slide {
flex-shrink: 0;
width: 100%; height: 100%;
position: relative;
display: flex; align-items: stretch;
color: var(--white);
/* Disable text-select on the carousel so a swipe doesn't select chips */
-webkit-user-select: none; user-select: none;
}
.k-carousel-slide-img {
flex-shrink: 0;
width: 50%; height: 100%;
position: relative; overflow: hidden;
background: var(--ink-2);
}
.k-carousel-slide-img img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
/* 2026-05-27: dropped image-rendering: -webkit-optimize-contrast.
The hint helps for pixel art but tends to produce blocky downscaled
output for photos under Cr56 - the default (auto / Lanczos-ish
bilinear) gives a smoother result on operator-uploaded production
photography, which is what every kiosk banner actually is. */
}
/* Image vignette + right-edge fade - blends image into the content
side and adds dimensional depth instead of a flat poster.
2026-05-27: softened the radial vignette (35% -> 22%) and pushed the
right-edge fade further right (88/95% -> 92/100%) so the carousel
image retains more contrast and detail. The text side stays legible
because the content card has its own opaque red gradient under it. */
.k-carousel-slide-img::after {
content: ''; position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background:
-webkit-radial-gradient(ellipse 95% 90% at 45% 35%,
transparent 55%, rgba(27, 6, 8, 0.22) 100%),
-webkit-linear-gradient(90deg,
rgba(27, 6, 8, 0.0) 65%, rgba(27, 6, 8, 0.55) 92%, rgba(27, 6, 8, 0.85) 100%);
background:
radial-gradient(ellipse 95% 90% at 45% 35%,
transparent 55%, rgba(27, 6, 8, 0.22) 100%),
linear-gradient(90deg,
rgba(27, 6, 8, 0.0) 65%, rgba(27, 6, 8, 0.55) 92%, rgba(27, 6, 8, 0.85) 100%);
pointer-events: none;
}
/* Content side - same lighting recipe as the header: spotlight (now
from upper-right, mirrored), depth gradient, diagonal red base */
.k-carousel-slide-content {
flex: 1 1 auto;
/* Bottom padding is generous (72 px) so the CTA sits well above
the dots row; dots are at bottom: 22 px of the carousel, this
keeps ~30+ px of breathing room between them. */
padding: 48px 52px 72px 48px;
display: flex; flex-direction: column;
align-items: flex-start;
position: relative;
background:
-webkit-radial-gradient(ellipse 75% 95% at 78% 18%,
rgba(255, 220, 200, 0.20) 0%, rgba(255, 200, 170, 0.06) 35%, transparent 65%),
-webkit-linear-gradient(180deg,
rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.00) 40%,
rgba(0, 0, 0, 0.18) 100%),
-webkit-linear-gradient(135deg,
var(--red-2) 0%, var(--red-1) 45%, var(--red-deep) 100%);
background:
radial-gradient(ellipse 75% 95% at 78% 18%,
rgba(255, 220, 200, 0.20) 0%, rgba(255, 200, 170, 0.06) 35%, transparent 65%),
linear-gradient(180deg,
rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.00) 40%,
rgba(0, 0, 0, 0.18) 100%),
linear-gradient(135deg,
var(--red-2) 0%, var(--red-1) 45%, var(--red-deep) 100%);
}
.k-carousel-slide-content > *:not(:last-child) { margin-bottom: 18px; }
.k-carousel-slide-tag {
font-family: Inter, sans-serif;
font-size: 11px; font-weight: 700; letter-spacing: 2.8px;
text-transform: uppercase;
color: var(--gold-3);
display: flex; align-items: center;
line-height: 1;
}
.k-carousel-slide-tag::before {
content: ''; display: inline-block;
width: 36px; height: 2px;
background:
-webkit-linear-gradient(90deg, var(--gold-2) 0%, var(--gold-1) 50%, var(--gold-3) 100%);
background:
linear-gradient(90deg, var(--gold-2) 0%, var(--gold-1) 50%, var(--gold-3) 100%);
margin-right: 14px;
box-shadow: 0 0 6px rgba(255, 200, 96, 0.45);
}
/* Title - engraved letterpress, same recipe as the header wordmark */
.k-carousel-slide-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 900;
font-size: 60px; line-height: 1.02;
letter-spacing: -1.2px;
color: var(--cream-1);
text-shadow:
0 -1px 0 rgba(74, 10, 12, 0.55),
0 1px 0 rgba(255, 232, 200, 0.16),
0 3px 0 rgba(74, 10, 12, 0.40),
0 8px 18px rgba(0, 0, 0, 0.55);
}
.k-carousel-slide-title.is-long { font-size: 48px; letter-spacing: -1px; }
.k-carousel-slide-title.is-very-long { font-size: 38px; letter-spacing: -0.6px; }
.k-carousel-slide-meta {
display: flex; flex-wrap: wrap;
margin-left: -4px;
}
/* Refined chips - dark glass plate with gold-tinted border, inset
highlight for the lit-from-above feel */
.k-carousel-slide-chip {
display: inline-block;
padding: 8px 18px;
background:
-webkit-linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 100%);
background:
linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 100%);
border: 1px solid rgba(244, 226, 176, 0.32);
border-radius: var(--r-pill);
font-size: 13px; font-weight: 600;
color: var(--cream-1);
letter-spacing: 0.6px;
margin: 0 8px 8px 4px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 2px 6px rgba(0, 0, 0, 0.20);
}
/* CTA pinned to bottom via margin-top: auto. Cream "brass plate"
button - warm cream gradient, refined Inter typography, real
Lucide arrow (added by JS, not a CSS ::after glyph). */
.k-carousel-slide-cta {
display: inline-flex; align-items: center;
padding: 0 40px; height: 72px;
background:
-webkit-linear-gradient(180deg, #FCF7EB 0%, #F3E9D2 100%);
background:
linear-gradient(180deg, #FCF7EB 0%, #F3E9D2 100%);
color: var(--ink-1);
font-family: Inter, sans-serif;
font-weight: 700; font-size: 19px;
letter-spacing: 0.4px;
border-radius: var(--r-pill);
border: 1px solid rgba(201, 144, 48, 0.55);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(122, 80, 20, 0.16),
inset 0 0 0 1px rgba(255, 255, 255, 0.35),
0 8px 18px rgba(74, 10, 12, 0.32),
0 18px 36px rgba(74, 10, 12, 0.22);
/* Pin to bottom of slide content */
margin-top: auto;
margin-bottom: 0;
-webkit-transition: -webkit-transform 180ms var(--ease), box-shadow 180ms ease;
transition: transform 180ms var(--ease), box-shadow 180ms ease;
}
.k-carousel-slide-cta:active {
-webkit-transform: scale(0.97); transform: scale(0.97);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(122, 80, 20, 0.20),
0 4px 10px rgba(74, 10, 12, 0.32);
}
.k-carousel-slide-cta .k-icon {
width: 22px; height: 22px;
margin-left: 14px;
color: var(--red-2);
}
/* Marquee-bulb-style dots - active dot glows gold like the header bulbs */
.k-carousel-dots {
position: absolute;
left: 50%; bottom: 22px;
-webkit-transform: translateX(-50%); transform: translateX(-50%);
display: flex; align-items: center;
z-index: 4;
}
.k-carousel-dots > *:not(:last-child) { margin-right: 8px; }
.k-carousel-dot {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(255, 255, 255, 0.28);
border: 1px solid rgba(255, 200, 96, 0.18);
padding: 0;
-webkit-transition: width 280ms var(--ease), background 280ms ease, box-shadow 280ms ease;
transition: width 280ms var(--ease), background 280ms ease, box-shadow 280ms ease;
}
.k-carousel-dot.is-active {
width: 30px; border-radius: 5px;
background:
-webkit-radial-gradient(ellipse,
rgba(255, 252, 232, 1) 0%, var(--gold-1) 55%, var(--gold-2) 100%);
background:
radial-gradient(ellipse,
rgba(255, 252, 232, 1) 0%, var(--gold-1) 55%, var(--gold-2) 100%);
border-color: transparent;
box-shadow:
0 0 10px rgba(255, 200, 96, 0.65),
inset 0 0 4px rgba(255, 248, 220, 0.6);
}
/* Prev/Next arrow buttons - subtle dark-glass circles with gold border.
Icon (Lucide chevron) is added by JS, sized 28 px regardless of
inherited font-size. */
.k-carousel-arrow {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%); transform: translateY(-50%);
width: 60px; height: 60px;
border-radius: 50%;
background: rgba(20, 6, 8, 0.45);
border: 1.5px solid rgba(244, 226, 176, 0.42);
color: rgba(255, 236, 184, 0.95);
display: flex; align-items: center; justify-content: center;
z-index: 5;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.16);
-webkit-transition: background 200ms ease, -webkit-transform 200ms ease;
transition: background 200ms ease, transform 200ms ease;
padding: 0;
}
.k-carousel-arrow:active {
background: rgba(40, 10, 14, 0.70);
-webkit-transform: translateY(-50%) scale(0.92);
transform: translateY(-50%) scale(0.92);
}
.k-carousel-arrow .k-icon { width: 26px; height: 26px; }
.k-carousel-arrow-prev { left: 22px; }
.k-carousel-arrow-next { right: 22px; }
/* Section heading ---- */
.k-section-head {
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: 22px;
}
.k-section-eyebrow {
font-size: 12px; font-weight: 700; letter-spacing: 2.2px;
text-transform: uppercase;
color: var(--red-2);
margin-bottom: 8px;
}
.k-section-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800; font-size: 40px;
letter-spacing: -0.6px; line-height: 1.05;
color: var(--ink-1);
}
.k-section-title em {
font-style: italic; font-weight: 700;
color: var(--red-2);
}
.k-section-aside {
text-align: right;
color: var(--ink-soft);
font-size: 14px; font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
}
.k-section-aside strong {
display: block;
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800; font-size: 32px;
color: var(--ink-1);
margin-bottom: 2px;
text-transform: none;
letter-spacing: 0;
}
/* Search bar ---- */
.k-search {
position: relative;
width: 100%; height: 86px;
background: var(--white);
border: 2px solid var(--cream-3);
border-radius: var(--r-pill);
box-shadow: var(--sh-1);
display: flex; align-items: center;
padding: 0 12px 0 28px;
margin-bottom: 18px;
-webkit-transition: border-color 200ms ease, box-shadow 200ms ease;
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.k-search > *:not(:last-child) { margin-right: 12px; }
.k-search.is-focused {
border-color: var(--red-2);
box-shadow: 0 0 0 6px rgba(208, 35, 41, 0.10);
}
.k-search-icon {
width: 36px; height: 36px;
color: var(--ink-soft);
flex-shrink: 0;
}
.k-search-icon svg { width: 100%; height: 100%; }
.k-search-input {
flex: 1 1 auto;
height: 80px; line-height: 80px;
background: transparent;
border: none; outline: none;
font-size: 22px; font-weight: 500;
color: var(--ink-1);
padding: 0;
}
.k-search-input::-webkit-input-placeholder { color: var(--ink-soft); opacity: 0.75; }
.k-search-input::placeholder { color: var(--ink-soft); opacity: 0.75; }
.k-search-count {
font-size: 14px; font-weight: 700; letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--ink-soft);
flex-shrink: 0;
}
.k-search-clear {
flex-shrink: 0;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--cream-2);
color: var(--ink-1);
line-height: 1;
display: none;
align-items: center; justify-content: center;
padding: 0;
}
.k-search-clear.is-on { display: flex; }
.k-search-clear .k-icon { width: 22px; height: 22px; }
/* =================================================================
FILTER CHIPS (2026-05-27)
Premium horizontal chip row below the search bar. Single-select.
"All" is the default; tapping the active chip returns to "All".
The chip count number sits in a small pill on the right side of
each chip so the eye reads "label + how many" as one unit.
Tonight's Deal chip uses the same red-shine treatment as the
deal badge so they feel like one system.
================================================================= */
.k-filters {
display: flex;
flex-wrap: wrap;
margin: 0 -5px 30px -5px;
}
.k-filter {
position: relative;
margin: 0 5px 10px 5px;
padding: 11px 15px 11px 17px;
border-radius: var(--r-pill);
background: var(--white);
color: var(--ink-1);
font-family: Inter, sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.3px;
display: inline-flex;
align-items: center;
border: 1.5px solid var(--cream-3);
box-shadow:
0 2px 8px rgba(26, 6, 8, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.65);
-webkit-transition: -webkit-transform 160ms var(--ease),
background 220ms ease,
border-color 220ms ease,
color 220ms ease;
transition: transform 160ms var(--ease),
background 220ms ease,
border-color 220ms ease,
color 220ms ease;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
.k-filter:active {
-webkit-transform: scale(0.96);
transform: scale(0.96);
}
.k-filter-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--cream-3);
margin-right: 10px;
flex-shrink: 0;
-webkit-transition: background 220ms ease, box-shadow 220ms ease;
transition: background 220ms ease, box-shadow 220ms ease;
}
.k-filter-count {
display: inline-block;
margin-left: 10px;
padding: 2px 9px;
background: var(--cream-1);
border-radius: var(--r-pill);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.6px;
color: var(--ink-soft);
min-width: 18px;
text-align: center;
-webkit-transition: background 220ms ease, color 220ms ease;
transition: background 220ms ease, color 220ms ease;
}
/* Active state - deep red, white type, the chip lifts subtly */
.k-filter.is-active {
background:
-webkit-linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
background:
linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
color: var(--white);
border-color: var(--red-deep);
box-shadow:
0 6px 16px rgba(196, 38, 46, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.k-filter.is-active .k-filter-dot {
background: var(--gold-1);
box-shadow: 0 0 8px rgba(255, 200, 96, 0.65);
}
.k-filter.is-active .k-filter-count {
background: rgba(255, 255, 255, 0.18);
color: var(--white);
}
/* "Tonight's Deal" filter chip - red-tinted at rest, full red active.
The dot uses a small shine animation when at rest to echo the
deal-badge shine sweep on the poster cards. */
.k-filter-deal {
border-color: rgba(196, 38, 46, 0.30);
color: var(--red-2);
background:
linear-gradient(180deg, #FFF7F7 0%, #FCE9E9 100%);
}
.k-filter-deal .k-filter-dot {
background: var(--red-2);
box-shadow: 0 0 6px rgba(196, 38, 46, 0.55);
}
.k-filter-deal .k-filter-count {
background: rgba(196, 38, 46, 0.10);
color: var(--red-2);
}
.k-filter-deal.is-active .k-filter-dot {
background: var(--gold-1);
}
.k-filter-seats {
border-color: rgba(74, 92, 142, 0.26);
color: #2E3A5A;
background: linear-gradient(180deg, #F6F8FF 0%, #EEF1FA 100%);
}
.k-filter-seats .k-filter-dot {
background: #4A5C8E;
}
.k-filter-seats .k-filter-count {
background: rgba(74, 92, 142, 0.10);
color: #2E3A5A;
}
.k-filter-pick {
border-color: rgba(201, 144, 48, 0.32);
color: #5A3812;
background: linear-gradient(180deg, #FFF8E4 0%, #F7E7BD 100%);
}
.k-filter-pick .k-filter-dot {
background: #C99030;
}
.k-filter-pick .k-filter-count {
background: rgba(201, 144, 48, 0.14);
color: #5A3812;
}
.k-filter-almost {
border-color: rgba(232, 154, 58, 0.34);
color: #6F3D0C;
background: linear-gradient(180deg, #FFF3E4 0%, #F8DFC0 100%);
}
.k-filter-almost .k-filter-dot {
background: #E89A3A;
}
.k-filter-almost .k-filter-count {
background: rgba(232, 154, 58, 0.16);
color: #6F3D0C;
}
/* Per-category accent dots so the row reads as a coherent palette */
.k-filter-musical .k-filter-dot { background: #C99030; }
.k-filter-play .k-filter-dot { background: #4A5C8E; }
.k-filter-comedy .k-filter-dot { background: #E89A3A; }
.k-filter-drama .k-filter-dot { background: #6B7AB8; }
.k-filter-family .k-filter-dot { background: #7DA89D; }
.k-filter-concert .k-filter-dot { background: #A1648C; }
/* When the active chip swaps in, its dot becomes the gold one (override) */
.k-filter.is-active .k-filter-dot {
background: var(--gold-1);
box-shadow: 0 0 8px rgba(255, 200, 96, 0.65);
}
/* Shows grid ---- */
.k-shows {
display: flex; flex-wrap: wrap;
margin: 0 -10px -20px -10px;
}
.k-show {
width: calc(33.333% - 20px);
margin: 0 10px 20px 10px;
background: var(--white);
border-radius: var(--r-card);
overflow: hidden;
box-shadow:
0 12px 28px rgba(26, 6, 8, 0.10),
0 4px 10px rgba(26, 6, 8, 0.06),
inset 0 0 0 1px rgba(232, 181, 71, 0.10);
-webkit-transition: -webkit-transform 200ms var(--ease), box-shadow 200ms ease;
transition: transform 200ms var(--ease), box-shadow 200ms ease;
/* 2026-05-28: flex column so "Tap to book" can pin to the bottom of
every card regardless of how many lines the title takes. */
display: flex;
flex-direction: column;
color: var(--ink-1);
}
.k-show:active {
-webkit-transform: translateY(-2px) scale(0.99);
transform: translateY(-2px) scale(0.99);
box-shadow:
0 18px 36px rgba(26, 6, 8, 0.14),
0 6px 14px rgba(26, 6, 8, 0.08),
inset 0 0 0 1px rgba(232, 181, 71, 0.22);
}
.k-show.is-hidden { display: none; }
.k-show-poster {
position: relative;
width: 100%;
/* 2:3 portrait. Card width is ~(1080 - 80 stage padding - 20 col
margins) / 3 ≈ 327 px → poster height = 327 × 1.5 ≈ 490 px. We
use 480 px which crops 10 px off the bottom - predictable + Cr56
supports neither aspect-ratio nor calc-on-padding tricks. */
height: 480px;
background: var(--cream-3);
overflow: hidden;
}
.k-show-poster img {
width: 100%; height: 100%;
object-fit: cover; object-position: center top;
}
.k-show-poster-overlay {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background:
-webkit-linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.42) 100%);
background:
linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.42) 100%);
pointer-events: none;
}
.k-show-badge-rail {
position: absolute;
top: 12px; left: 12px; right: 12px;
z-index: 5;
display: flex;
align-items: flex-start;
pointer-events: none;
}
.k-show-badge-rail > * + * {
margin-left: 8px;
}
.k-show-badge-rail .k-deal-badge {
position: relative;
top: auto; left: auto;
flex: 0 0 auto;
max-width: 176px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.k-show-genre {
position: relative;
padding: 6px 13px;
background: rgba(255, 255, 255, 0.96);
color: #5B1A22;
border: 1px solid rgba(201, 144, 48, 0.38);
border-radius: var(--r-pill);
font-size: 12px; font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
box-shadow:
0 3px 9px rgba(43, 18, 20, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.72);
min-width: 0;
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.k-show-badge-rail .k-show-genre:only-child {
margin-left: auto;
max-width: 210px;
}
/* Body becomes flex column so .k-show-foot can margin-top:auto down. */
.k-show-body {
padding: 18px 20px 20px 20px;
display: flex;
flex-direction: column;
flex: 1 1 auto; /* fill remaining card height below poster */
}
.k-show-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800; font-size: 26px;
/* 2026-05-28: line-height bumped 1.1 -> 1.3 so descenders on g/p/y
no longer clip against the -webkit-box overflow:hidden boundary.
padding-bottom: 2px is a belt-and-suspenders guard for fonts whose
descenders fall slightly outside the em-box. */
line-height: 1.3;
padding-bottom: 2px;
margin-bottom: 8px;
color: var(--ink-1);
letter-spacing: -0.4px;
/* Reserve 2 lines of height even for 1-word titles like "Chicago" so
every card's foot sits at the same y coordinate across the grid. */
min-height: calc(1.3em * 2);
/* Two-line clamp - Cr56 supports -webkit-line-clamp via -webkit-box */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.k-show-venue {
font-size: 14px; font-weight: 600;
color: var(--ink-soft);
margin-bottom: 14px;
letter-spacing: 0.3px;
line-height: 1.35; /* small line-height bump for clip safety */
/* Reserve 1 line of height so cards without a venue still align */
min-height: 1.35em;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.k-show-foot {
display: flex; align-items: center; justify-content: space-between;
padding-top: 14px;
/* Gold-tinted divider above the foot - matches the gold-trim accent
used across detail cards, more premium than flat cream-2. */
border-top: 1px solid rgba(232, 181, 71, 0.32);
/* Pins the foot to the bottom of the card regardless of title height. */
margin-top: auto;
}
.k-show-cta-label {
font-size: 12px; font-weight: 800; letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--red-2);
}
.k-show-arrow {
color: var(--red-2);
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(196, 38, 46, 0.08);
-webkit-transition: background 220ms ease, -webkit-transform 220ms var(--ease);
transition: background 220ms ease, transform 220ms var(--ease);
}
.k-show:active .k-show-arrow {
background: var(--red-2);
color: var(--white);
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
.k-show-arrow .k-icon { width: 18px; height: 18px; }
.k-empty {
width: 100%; padding: 64px 20px 80px;
text-align: center;
color: var(--ink-soft);
display: flex;
flex-direction: column;
align-items: center;
}
.k-empty-illust {
width: 140px;
height: 140px;
margin-bottom: 24px;
-webkit-filter: drop-shadow(0 8px 16px rgba(26, 6, 8, 0.10));
filter: drop-shadow(0 8px 16px rgba(26, 6, 8, 0.10));
opacity: 0.88;
}
.k-empty-illust svg { width: 100%; height: 100%; display: block; }
.k-empty-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 28px;
color: var(--ink-1);
letter-spacing: -0.3px;
margin-bottom: 10px;
}
.k-empty-sub {
font-family: Inter, sans-serif;
font-size: 16px;
line-height: 1.5;
color: var(--ink-soft);
max-width: 480px;
margin-bottom: 22px;
}
.k-empty-cta {
display: inline-flex;
align-items: center;
padding: 12px 24px;
border-radius: var(--r-pill);
background: transparent;
color: var(--red-2);
font-family: Inter, sans-serif;
font-weight: 800;
font-size: 13px;
letter-spacing: 1.4px;
text-transform: uppercase;
border: 1.5px solid var(--red-2);
-webkit-transition: background 200ms ease, color 200ms ease;
transition: background 200ms ease, color 200ms ease;
}
.k-empty-cta:active {
background: var(--red-2);
color: var(--white);
}
/* =================================================================
SHOW DETAIL LAYOUT (2026-05-27 third rewrite)
TWO full-width premium sections below the hero:
1) Big featured photo carousel with thumbnail strip
2) ONE unified About panel with everything inline (descriptions,
cast, credits, awards, critics, age/access), separated by
subtle gold rules rather than competing card chrome.
Replaces the prior 2-col + trust-row + info-strip arrangement
which fragmented the page into too many small boxes.
================================================================= */
/* ---- Featured photos ---- */
.k-photos {
margin-top: 72px;
margin-bottom: 32px;
position: relative;
}
/* Section heading above the photo carousel. Centred editorial header
so the photos read as a labelled block, not a floating element. */
.k-photos-header {
text-align: center;
margin-bottom: 22px;
}
.k-photos-eyebrow {
font-family: Inter, sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 3.2px;
text-transform: uppercase;
color: var(--red-2);
margin-bottom: 8px;
}
.k-photos-title {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-weight: 700;
font-size: 34px;
line-height: 1.1;
color: var(--ink-1);
margin: 0;
letter-spacing: -0.4px;
}
.k-photos-rule {
width: 64px;
height: 2px;
margin: 14px auto 0;
background:
-webkit-linear-gradient(90deg, transparent 0%, var(--gold-1) 50%, transparent 100%);
background:
linear-gradient(90deg, transparent 0%, var(--gold-1) 50%, transparent 100%);
box-shadow: 0 0 6px rgba(255, 200, 96, 0.45);
}
/* =================================================================
POLAROID-STACK PHOTO GALLERY (2026-05-29 rev4)
Photos rendered as printed polaroids (white border + drop shadow)
stacked on top of each other with per-photo rotation. Each photo's
native aspect ratio is preserved by setting the inner photo to a
fixed height with auto width - portrait photos become portrait-
shaped polaroids, landscape stay landscape.
Swap physics (around-the-deck, no tunneling):
- NEXT (right arrow) sends the top polaroid up, then RIGHT, then
drops it BEHIND the stack and back to its home.
- PREV (left arrow) snaps the incoming card to a back-RIGHT peek
pose, lifts it (z bumps to 40), sweeps it up and over to centre.
Old top settles back to its home beneath the deck.
================================================================= */
.k-pg-reel {
position: relative;
width: 100%;
height: 540px;
/* No overflow clip - side-card shadows extend cleanly into the
space below the reel (which sits above the next show-page card,
so the shadow naturally falls onto it for a layered feel). */
overflow: visible;
}
.k-pg-reel-slide {
position: absolute;
top: 50%;
left: 50%;
/* Per-slide home placement set inline from JS (--home-x/y/rot/z) */
--home-x: 0px;
--home-y: 0px;
--home-rot: 0deg;
--home-z: 1;
z-index: var(--home-z);
cursor: default;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* Default state = parked at home with the home rotation. */
-webkit-transform: translate(calc(-50% + var(--home-x)),
calc(-50% + var(--home-y)))
rotate(var(--home-rot));
transform: translate(calc(-50% + var(--home-x)),
calc(-50% + var(--home-y)))
rotate(var(--home-rot));
/* Bezier with slight overshoot at the end so cards settle with a
gentle bounce, like a real photograph dropped onto the pile. */
-webkit-transition: -webkit-transform 500ms cubic-bezier(.34, 1.14, .64, 1);
transition: transform 500ms cubic-bezier(.34, 1.14, .64, 1);
will-change: transform;
}
/* Polaroid frame - true white, stands clear of the cream page. The
bottom space is now the labelled chin (below), not blank padding. */
.k-polaroid {
background: #ffffff;
padding: 18px 18px 0;
border-radius: 3px;
box-shadow:
0 14px 30px rgba(0, 0, 0, 0.34),
0 4px 10px rgba(0, 0, 0, 0.18),
inset 0 0 0 1px rgba(0, 0, 0, 0.04);
-webkit-transition: box-shadow 360ms ease;
transition: box-shadow 360ms ease;
}
/* Chin - the white strip under the photo, hand-labelled like a print:
show name in Playfair, then this photo's number in muted small-caps.
FIXED at 56px (the exact height of the old blank chin) so the card's
total size is unchanged - the photo never shrinks. Two lines are
vertically centred; the name stays on one line (ellipsis if long)
since this label is decorative, not something anyone reads closely. */
.k-polaroid-chin {
height: 56px;
box-sizing: border-box;
padding: 0 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
.k-polaroid-chin-title {
max-width: 100%;
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 16px;
line-height: 1.1;
letter-spacing: 0.2px;
color: #2A1410;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.k-polaroid-chin-count {
margin-top: 4px;
font-family: Inter, sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 2.4px;
text-transform: uppercase;
color: #A8783F;
}
.k-polaroid-photo-wrap {
position: relative;
background: #1c1917;
overflow: hidden;
line-height: 0;
}
.k-polaroid-photo,
.k-polaroid-photo-tiny {
height: 340px;
width: auto;
max-width: 600px;
display: block;
}
.k-polaroid-photo {
position: relative;
z-index: 2;
opacity: 0;
-webkit-transition: opacity 500ms ease;
transition: opacity 500ms ease;
}
.k-polaroid-photo-tiny {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
-webkit-filter: blur(20px);
filter: blur(20px);
-webkit-transform: scale(1.05);
transform: scale(1.05);
z-index: 1;
opacity: 1;
-webkit-transition: opacity 500ms ease;
transition: opacity 500ms ease;
}
.k-pg-reel-slide.hq-loaded .k-polaroid-photo { opacity: 1; }
.k-pg-reel-slide.hq-loaded .k-polaroid-photo-tiny { opacity: 0; transition-delay: 80ms; }
/* THE elevated photo - centred, straight, slightly scaled up so it
reads as the focused image, with heavier shadow for lift. */
.k-pg-reel-slide.is-top {
z-index: 30;
cursor: pointer;
-webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1.08);
transform: translate(-50%, -50%) rotate(0deg) scale(1.08);
}
.k-pg-reel-slide.is-top .k-polaroid {
box-shadow:
0 28px 60px rgba(0, 0, 0, 0.52),
0 10px 22px rgba(0, 0, 0, 0.30),
inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
/* ========= Four poses shared by NEXT and PREV =========
POSE A (is-top) centred + upright
POSE B (is-flying-up / is-rising-top) straight up over centre
POSE C (is-flying-side / is-rising-pickup) LEFT and a bit up
POSE D (is-flying-down / is-rising-from-back) LEFT-DOWN behind deck
NEXT walks the top card A -> B -> C -> D -> home.
PREV walks the new top backward: D (snap) -> C -> B -> A.
Same poses both directions; "rising-*" aliases exist so each phase
reads in JS but resolves to the matching pose.
Y travel was pulled back from -280 to -200/-120 so the card no
longer flies to the upper corner - it goes "left and a bit up",
not "upper-left corner". Less aggressive arc, easier to follow. */
/* ------ POSE B: straight up over centre, in clear air ------ */
.k-pg-reel-slide.is-flying-up,
.k-pg-reel-slide.is-rising-top {
z-index: 40;
-webkit-transform: translate(-50%, calc(-50% - 200px))
rotate(2deg) scale(1.12);
transform: translate(-50%, calc(-50% - 200px))
rotate(2deg) scale(1.12);
}
/* ------ POSE C: RIGHT and a bit up - far enough that the left edge
of the polaroid is well past the stack's right edge, so the card
visibly leaves the deck before descending behind it. ------ */
.k-pg-reel-slide.is-flying-side,
.k-pg-reel-slide.is-rising-pickup {
z-index: 40;
-webkit-transform: translate(calc(-50% + 700px), calc(-50% - 120px))
rotate(16deg) scale(1.06);
transform: translate(calc(-50% + 700px), calc(-50% - 120px))
rotate(16deg) scale(1.06);
}
/* ------ POSE D: same X as pose C, drops straight down BEHIND the
deck (z=0). Same X means the C->D motion is a clean vertical fall;
then the home transition slides the card left (back toward centre)
while it's already behind the deck. ------ */
.k-pg-reel-slide.is-flying-down {
z-index: 0;
-webkit-transform: translate(calc(-50% + 700px), calc(-50% + 60px))
rotate(22deg) scale(0.92);
transform: translate(calc(-50% + 700px), calc(-50% + 60px))
rotate(22deg) scale(0.92);
}
/* After the descent (pose D) finishes, the card needs to slide BACK
to its home over the 720ms base transition. During that slide the
card crosses over other home cards horizontally - if z were already
restored to home-z, those other cards would pop in/out as the
sliding card crossed over them. So we hold z=0 for the entire
settle so the card stays beneath everything until parked. Only
transform comes from the base class - this rule sets nothing else
so the home transform applies. */
.k-pg-reel-slide.is-flying-settle {
z-index: 0;
}
/* Same coords as is-flying-down. The base 720ms transition is kept
(no transition:none) so when the class is added the card slides
FROM its home transform TO pose D. z drops to 0 instantly so the
card is behind the deck during the slide; it emerges past the
deck's right edge as it nears pose D. */
.k-pg-reel-slide.is-rising-from-back {
z-index: 0;
-webkit-transform: translate(calc(-50% + 700px), calc(-50% + 60px))
rotate(22deg) scale(0.92);
transform: translate(calc(-50% + 700px), calc(-50% + 60px))
rotate(22deg) scale(0.92);
}
/* Cards "in clear air" (poses B and C, high z) get a heavier shadow
so the lift reads unambiguously. Cards behind the deck (pose D,
z=0) get a softer shadow because they are below other cards. */
.k-pg-reel-slide.is-flying-up .k-polaroid,
.k-pg-reel-slide.is-flying-side .k-polaroid,
.k-pg-reel-slide.is-rising-top .k-polaroid,
.k-pg-reel-slide.is-rising-pickup .k-polaroid {
box-shadow:
0 36px 64px rgba(0, 0, 0, 0.55),
0 14px 24px rgba(0, 0, 0, 0.34),
inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.k-pg-reel-slide.is-flying-down .k-polaroid,
.k-pg-reel-slide.is-flying-settle .k-polaroid,
.k-pg-reel-slide.is-rising-from-back .k-polaroid {
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.30),
inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
/* === LEGACY STAGE/SLIDE rules below are unused after the reel swap,
kept here only because their selectors are referenced by other
leftover rules further down the file. They're harmless no-ops. === */
.k-pg-counter {
position: absolute;
top: 18px; right: 18px;
z-index: 20;
padding: 6px 14px;
background: rgba(0, 0, 0, 0.55);
color: var(--cream-1);
border-radius: var(--r-pill);
border: 1px solid rgba(244, 226, 176, 0.30);
font-family: Inter, sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 1.6px;
}
.k-pg-viewall {
position: absolute;
bottom: 18px; right: 18px;
/* Above the polaroids - flying cards reach z-index 40 (poses B/C), so
this must clear that or the button gets buried behind a photo. */
z-index: 60;
display: inline-flex;
align-items: center;
padding: 12px 20px 12px 18px;
background: rgba(0, 0, 0, 0.62);
border: 1px solid rgba(244, 226, 176, 0.45);
border-radius: var(--r-pill);
color: var(--cream-1);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
}
.k-pg-viewall-label {
font-family: Inter, sans-serif;
font-weight: 800;
font-size: 13px;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.k-pg-viewall-icon {
margin-left: 10px;
width: 14px;
height: 14px;
}
.k-pg-viewall-icon .k-icon { width: 100%; height: 100%; }
/* Thicker stroke than the global 1.75 so the corner-expand glyph reads
as bold as the extra-bold "VIEW ALL" label beside it. */
.k-pg-viewall-icon .k-icon svg { stroke-width: 2.5; }
.k-pg-caption {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: 16px;
line-height: 1.4;
color: var(--ink-soft);
text-align: center;
margin: 14px 24px 0;
}
/* =================================================================
DETAIL CARDS v4 (2026-05-27 - per operator brief)
Row 1: About (50%) | Critics (50%) - equal-height feature cards
About: short + 2 lines of long + "Read more" -> content modal
Critics: ONE quote at a time + prev/next + "View all" -> modal
Row 2: Starring (50%) | Creative team (50%)
Then: Awards & Honors (full-width)
Then: Good to know (age + accessibility, full-width)
Then: Photos carousel
Cr56 has NO CSS Grid (added in Chrome 57) - everything uses flex.
================================================================= */
/* Shared card shell - used by all detail cards in both rows */
.k-detail-card {
background:
linear-gradient(180deg, var(--white) 0%, var(--cream-1) 100%);
border-radius: var(--r-card-lg);
padding: 24px 28px;
box-shadow:
inset 0 0 0 1px rgba(232, 181, 71, 0.18),
0 8px 20px rgba(26, 6, 8, 0.08);
display: flex;
flex-direction: column;
}
.k-detail-card-head {
margin-bottom: 16px;
}
.k-detail-card-eyebrow {
font-family: Inter, sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 2.6px;
text-transform: uppercase;
color: var(--red-2);
display: flex;
align-items: center;
line-height: 1;
}
.k-detail-card-eyebrow::before {
content: '';
display: inline-block;
width: 32px;
height: 2px;
background:
-webkit-linear-gradient(90deg, var(--gold-2) 0%, var(--gold-1) 50%, var(--gold-3) 100%);
background:
linear-gradient(90deg, var(--gold-2) 0%, var(--gold-1) 50%, var(--gold-3) 100%);
margin-right: 12px;
box-shadow: 0 0 6px rgba(255, 200, 96, 0.50);
}
.k-detail-card-body { flex: 1 1 auto; }
.k-detail-card-body > * + * { margin-top: 14px; }
/* ---- Row 1: full-width row (used for About, also reused for Critics standalone) ---- */
.k-detail-row1 {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
}
.k-detail-row1 > * { min-width: 0; flex: 1 1 50%; }
.k-detail-row1 > * + * { margin-left: 20px; }
.k-detail-row1.is-single > * { flex: 1 1 100%; }
/* k-detail-row4 removed - the v4 layout collapses awards + good-to-know
into a single merged card (k-card-merged), no row4 needed. */
/* Make the card head a horizontal row so the "View all" button can sit
at the right of the eyebrow on the critics card. */
.k-detail-card-head {
display: flex;
align-items: center;
}
.k-detail-card-head > * + * { margin-left: auto; }
/* About card - body is flex column so Read more can align flex-end (right) */
.k-card-about .k-detail-card-body {
display: flex;
flex-direction: column;
}
/* ---- Critics card (single quote at a time with prev/next nav) ---- */
.k-card-critics-viewall {
padding: 7px 14px;
border-radius: var(--r-pill);
background: transparent;
color: var(--red-2);
font-family: Inter, sans-serif;
font-weight: 800;
font-size: 11px;
letter-spacing: 1.4px;
text-transform: uppercase;
border: 1.5px solid var(--red-2);
cursor: pointer;
-webkit-transition: background 200ms ease, color 200ms ease;
transition: background 200ms ease, color 200ms ease;
}
.k-card-critics-viewall:active {
background: var(--red-2);
color: var(--white);
}
.k-card-critics-body {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.k-card-critics-stage {
flex: 1 1 auto;
padding: 10px 12px 12px 12px;
border-left: 3px solid var(--gold-1);
background:
linear-gradient(90deg, rgba(232, 181, 71, 0.08) 0%, rgba(232, 181, 71, 0) 75%);
border-radius: 0 var(--r-card) var(--r-card) 0;
}
.k-card-critics-stars {
display: flex;
margin-bottom: 12px;
}
.k-card-critics-text {
/* 2026-05-28: dropped italic Playfair - cursive letterforms hurt
legibility on a kiosk read at distance. Inter regular keeps the
reviewer-quote feel via the wrapping quotation marks while staying
readable at arm's length. */
font-family: Inter, sans-serif;
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 1.55;
color: var(--ink-1);
letter-spacing: -0.1px;
}
/* Critics slide animation - content swaps inside this stage on each
auto-advance or manual nav. Out-direction sets where it slides off,
in-direction is the entry from the opposite side. */
.k-card-critics-stage {
-webkit-transition: opacity 240ms ease, -webkit-transform 240ms ease;
transition: opacity 240ms ease, transform 240ms ease;
}
.k-card-critics-stage.is-slide-out-l {
opacity: 0;
-webkit-transform: translateX(-24px);
transform: translateX(-24px);
}
.k-card-critics-stage.is-slide-out-r {
opacity: 0;
-webkit-transform: translateX(24px);
transform: translateX(24px);
}
.k-card-critics-stage.is-slide-in {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation: kcritslidein 400ms ease;
animation: kcritslidein 400ms ease;
}
@-webkit-keyframes kcritslidein {
from { opacity: 0; -webkit-transform: translateX(24px); }
to { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes kcritslidein {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: translateX(0); }
}
.k-card-critics-source {
margin-top: 14px;
font-family: Inter, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--red-2);
}
.k-card-critics-foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed rgba(26, 6, 8, 0.10);
}
.k-card-critics-nav {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--cream-2);
color: var(--ink-1);
display: flex; align-items: center; justify-content: center;
-webkit-transition: -webkit-transform 160ms var(--ease), background 200ms ease;
transition: transform 160ms var(--ease), background 200ms ease;
}
.k-card-critics-nav:active {
background: var(--red-2);
color: var(--white);
-webkit-transform: scale(0.94);
transform: scale(0.94);
}
.k-card-critics-nav .k-icon { width: 20px; height: 20px; }
.k-card-critics-counter {
font-family: Inter, sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--ink-soft);
}
/* k-detail-row2 removed - the v4 layout stacks cast + creative inside
k-detail-stack (column flex) inside row1, no row2 needed. */
/* k-card-awards-wide removed - awards strip is now part of k-card-merged. */
/* Read-more button on About card (opens modal) - aligns to the bottom-right
of the card body so it sits in the natural reading endpoint, not under
the description text. */
.k-readmore {
display: inline-flex;
align-items: center;
align-self: flex-end;
margin-top: 10px;
min-height: 44px;
padding: 10px 18px;
box-sizing: border-box;
background: transparent;
color: var(--red-2);
font-family: Inter, sans-serif;
font-weight: 800;
font-size: 12px;
letter-spacing: 1.6px;
text-transform: uppercase;
border: 1.5px solid var(--red-2);
border-radius: var(--r-pill);
line-height: 1;
cursor: pointer;
-webkit-transition: background 200ms ease, color 200ms ease;
transition: background 200ms ease, color 200ms ease;
}
.k-readmore:active {
background: var(--red-2);
color: var(--white);
}
.k-readmore-arrow {
margin-left: 8px;
width: 14px;
height: 14px;
}
.k-readmore-arrow .k-icon { width: 100%; height: 100%; }
/* About card description typography */
.k-card-about .k-about-short {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 21px;
line-height: 1.38;
color: var(--ink-1);
letter-spacing: -0.2px;
margin: 0 0 14px 0;
}
.k-card-about .k-about-long {
font-family: Inter, sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.65;
color: var(--ink-2);
margin: 0;
}
/* Good to know - structural rules. Typography handled by .k-token-* */
.k-gtk-rows {
display: flex;
flex-direction: column;
}
.k-gtk-row {
display: flex;
align-items: flex-start;
padding: 10px 0;
}
.k-gtk-row + .k-gtk-row {
border-top: 1px dashed rgba(26, 6, 8, 0.10);
}
.k-gtk-icon {
width: 18px; height: 18px;
color: var(--red-2);
margin-right: 12px;
margin-top: 2px;
flex-shrink: 0;
}
.k-gtk-body { flex: 1 1 auto; min-width: 0; }
/* Info button in card head - opens content modal with extended details */
.k-gtk-label {
font-family: Inter, sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 1.6px !important;
text-transform: uppercase !important;
color: var(--ink-soft) !important;
line-height: 1.2 !important;
margin-bottom: 4px !important;
}
.k-card-cast-name{
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 700 !important;
font-size: 18px !important;
color: var(--ink-1) !important;
letter-spacing: -0.1px !important;
line-height: 1.3 !important;
}
.k-card-cast-role,
.k-card-cast-ensemble,
.k-gtk-value {
font-family: Inter, sans-serif !important;
font-weight: 400 !important;
font-size: 13px !important;
color: var(--ink-2) !important;
line-height: 1.55 !important;
}
/* Role gets italic, ensemble doesn't */
.k-card-cast-role { font-style: italic !important; }
/* Starring card structural rules - dashed dividers between leads to match
the Creative team card's visual rhythm. */
.k-card-cast-leads > .k-card-cast-lead {
padding: 8px 0;
border-bottom: 1px dashed rgba(26, 6, 8, 0.10);
}
.k-card-cast-leads > .k-card-cast-lead:first-child { padding-top: 0; }
.k-card-cast-leads > .k-card-cast-lead:last-child { border-bottom: 0; }
.k-card-cast-role { margin-top: 2px !important; }
.k-card-cast-ensemble {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed rgba(26, 6, 8, 0.10);
}
/* Creative team = playbill credit block. The role is a small gold
uppercase lead-in label; the name follows in Playfair below, so each
entry reads top-down as "Directed by / Harold Prince" (title-page
convention) rather than name-then-caption like the Starring column. */
.k-credit-label {
font-family: Inter, sans-serif !important;
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 1.8px !important;
text-transform: uppercase !important;
color: var(--gold-2) !important;
line-height: 1.2 !important;
margin-bottom: 4px !important;
}
.k-credit-lead .k-card-cast-name {
font-size: 17px !important;
line-height: 1.25 !important;
}
/* Creative team structural rules */
/* =================================================================
STARRING + CREATIVE TEAM cards - cream editorial theme.
Matches the About card's quiet paper feel so the show page reads
in proportion (heavy red is reserved for the Awards/Honors block
and the topbar). Subtle warm cream gradient + thin gold inset trim.
================================================================= */
.k-card-cast,
.k-card-credits {
background:
linear-gradient(180deg, var(--white) 0%, var(--cream-1) 100%);
box-shadow:
inset 0 0 0 1px rgba(232, 181, 71, 0.22),
0 8px 20px rgba(26, 6, 8, 0.08);
}
/* =================================================================
UNIFIED "About this show" card - subsections (Starring + Creative
Team) merged into the same card body, separated by a gold rule
and a thin vertical divider between the two halves.
(2026-05-29) Replaces three separate light cards with one larger
unified one - addresses "too many cards" UX feedback.
================================================================= */
.k-about-unified-rule {
margin: 22px auto 18px;
width: 100%;
height: 1px;
background:
-webkit-linear-gradient(90deg, transparent 0%, rgba(201, 144, 48, 0.50) 50%, transparent 100%);
background:
linear-gradient(90deg, transparent 0%, rgba(201, 144, 48, 0.50) 50%, transparent 100%);
}
.k-about-unified-row {
display: flex;
align-items: flex-start;
}
.k-about-unified-col {
-webkit-box-flex: 1;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
min-width: 0;
padding: 0 22px;
}
.k-about-unified-col:first-child { padding-left: 0; }
.k-about-unified-col:last-child { padding-right: 0; }
.k-about-unified-col + .k-about-unified-col {
border-left: 1px solid rgba(232, 181, 71, 0.28);
}
/* The sub-section eyebrows inside the unified card sit a step down
in the visual hierarchy from the card's main "About this show"
eyebrow - slightly smaller leading bar, same red letter colour. */
.k-about-unified-col .k-detail-card-head { margin-bottom: 14px; }
/* =================================================================
AWARDS & HONORS + GOOD TO KNOW merged card - red marquee theme.
Same recipe as the Starring + Creative team cards: diagonal red
base, upper-left spotlight, soft corner vignette, gold inner trim.
================================================================= */
.k-card-merged {
position: relative;
color: var(--cream-1);
background:
-webkit-radial-gradient(ellipse 70% 90% at 18% 18%,
rgba(255, 220, 200, 0.18) 0%, rgba(255, 200, 170, 0.06) 35%, transparent 65%),
-webkit-linear-gradient(180deg,
rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.00) 40%,
rgba(0, 0, 0, 0.10) 100%),
-webkit-linear-gradient(135deg,
var(--red-3) 0%, var(--red-2) 22%, var(--red-1) 55%, var(--red-deep) 100%);
background:
radial-gradient(ellipse 70% 90% at 18% 18%,
rgba(255, 220, 200, 0.18) 0%, rgba(255, 200, 170, 0.06) 35%, transparent 65%),
linear-gradient(180deg,
rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.00) 40%,
rgba(0, 0, 0, 0.10) 100%),
linear-gradient(135deg,
var(--red-3) 0%, var(--red-2) 22%, var(--red-1) 55%, var(--red-deep) 100%);
box-shadow:
inset 0 0 0 1px rgba(244, 226, 176, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.10),
0 14px 32px rgba(74, 10, 12, 0.42),
0 4px 10px rgba(74, 10, 12, 0.22);
overflow: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
/* Corner vignette layer */
.k-card-merged::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background:
-webkit-radial-gradient(ellipse 110% 90% at 50% 50%,
transparent 50%, rgba(74, 10, 12, 0.28) 100%);
background:
radial-gradient(ellipse 110% 90% at 50% 50%,
transparent 50%, rgba(74, 10, 12, 0.28) 100%);
pointer-events: none;
z-index: 0;
}
.k-card-merged > * { position: relative; z-index: 1; }
/* Divider between the two halves - cream with alpha (was gold-on-cream) */
.k-card-merged .k-merged-row > * + * {
border-left-color: rgba(244, 226, 176, 0.22) !important;
}
/* Eyebrows ("AWARDS & HONORS", "GOOD TO KNOW") - gold-on-red */
.k-card-merged .k-detail-card-eyebrow {
color: var(--gold-3) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.k-card-merged .k-detail-card-eyebrow::before {
box-shadow: 0 0 10px rgba(255, 210, 130, 0.70);
}
/* Award rows - matches the Good-to-know row layout: trophy badge on
the left, name in cream on the right, divided by thin cream rules.
"Won" awards get a subtle warmer gold cast on the icon to mark them. */
.k-card-merged .k-awards-rows {
list-style: none;
padding: 0;
margin: 0;
}
.k-card-merged .k-award-row {
display: flex;
align-items: center;
padding: 10px 0;
}
.k-card-merged .k-award-row + .k-award-row {
border-top: 1px dashed rgba(244, 226, 176, 0.22);
}
/* List icons (award trophy + GTK shield) sit in IDENTICAL circular gold
badges so the two columns read as a matched pair. The glyphs differ in
how much of their box they fill (the shield is broad, the medal is a
small disc), but seating both in the same badge makes them look the
same size. */
.k-card-merged .k-award-row-icon,
.k-card-merged .k-gtk-icon {
box-sizing: border-box;
width: 30px;
height: 30px;
padding: 6px;
margin-right: 13px;
margin-top: 0;
border-radius: 50%;
background: rgba(232, 181, 71, 0.13);
box-shadow: inset 0 0 0 1px rgba(232, 181, 71, 0.32);
color: var(--gold-3);
flex-shrink: 0;
}
.k-card-merged .k-award-row.is-won .k-award-row-icon {
color: #FFE4A2;
background: rgba(232, 181, 71, 0.22);
box-shadow: inset 0 0 0 1px rgba(255, 220, 130, 0.55);
-webkit-filter: drop-shadow(0 0 5px rgba(255, 220, 130, 0.42));
filter: drop-shadow(0 0 5px rgba(255, 220, 130, 0.42));
}
/* Section info "(i)" - top-right of each merged half. Opens a short
explainer modal of what the section means. Gold outline on the dark
marquee, fills warm on press. (Only used on this dark card now.) */
.k-card-info-btn {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: rgba(0, 0, 0, 0.20);
border: 1px solid rgba(232, 181, 71, 0.45);
color: var(--gold-3);
-webkit-transition: background 180ms ease, color 180ms ease;
transition: background 180ms ease, color 180ms ease;
}
.k-card-info-btn:active {
background: var(--gold-1);
color: var(--ink-1);
}
.k-card-info-btn .k-icon { width: 18px; height: 18px; }
.k-card-merged .k-award-row-text {
color: var(--cream-1);
font-family: Inter, sans-serif;
font-size: 15px;
font-weight: 600;
line-height: 1.5;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.k-card-merged .k-award-row.is-won .k-award-row-text {
color: #FFF7E2;
}
/* "View all N honors" - a tappable CTA row (replaces the old (i)
button). Gold uppercase with a trailing arrow that nudges on press. */
.k-card-merged .k-award-row-more {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 4px;
margin-top: 2px;
color: var(--gold-3);
font-family: Inter, sans-serif;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.6px;
text-transform: uppercase;
cursor: pointer;
-webkit-transition: color 160ms ease;
transition: color 160ms ease;
}
.k-card-merged .k-award-row-more .k-award-row-more-arrow {
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--gold-3);
-webkit-transition: -webkit-transform 200ms ease;
transition: transform 200ms ease;
}
.k-card-merged .k-award-row-more:active {
color: #FFF7E2;
}
.k-card-merged .k-award-row-more:active .k-award-row-more-arrow {
-webkit-transform: translateX(3px);
transform: translateX(3px);
color: #FFF7E2;
}
/* Good-to-know rows - icon + label + value all lifted for contrast */
.k-card-merged .k-gtk-icon { color: var(--gold-3) !important; }
.k-card-merged .k-gtk-label { color: var(--gold-3) !important; }
.k-card-merged .k-gtk-value {
color: var(--cream-1) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}
.k-card-merged .k-gtk-row + .k-gtk-row {
border-top-color: rgba(244, 226, 176, 0.22) !important;
}
/* =================================================================
WHAT CRITICS SAY card - editorial-magazine theme (2026-05-29).
Warm ivory paper, double gold rule inset, deep ink text, centered
layout flanked by decorative gold ornaments and oversized italic
quotation marks. Reads as a pull-quote ad from a Broadway program.
================================================================= */
/* ============================================================
CRITICS - "In the spotlight" pull-quote (premium redesign).
The most persuasive element on the page (social proof), so it
gets the theatrical hero treatment instead of a flat text card:
a dark stage backdrop with a warm spotlight pooled behind the
quote, an illuminated cream Playfair blurb, gold stars + the
publication "in lights", and a brass-inlay frame (same language
as the Awards card). CSS-only - markup + JS behaviour unchanged.
============================================================ */
.k-card-critics {
position: relative;
color: var(--cream-1);
/* Warm spotlight pooled from top-centre over a deep curtain
gradient (burgundy -> near-black). */
background:
-webkit-radial-gradient(ellipse 75% 65% at 50% 4%,
rgba(232, 181, 71, 0.22) 0%, rgba(232, 181, 71, 0.05) 38%, transparent 66%),
-webkit-linear-gradient(180deg, #2A0A0D 0%, #1A0406 55%, #120304 100%);
background:
radial-gradient(ellipse 75% 65% at 50% 4%,
rgba(232, 181, 71, 0.22) 0%, rgba(232, 181, 71, 0.05) 38%, transparent 66%),
linear-gradient(180deg, #2A0A0D 0%, #1A0406 55%, #120304 100%);
/* Brass inlay (thin gold / dark gap / gold) + inner vignette so
the centre glows, over a deep drop shadow. */
box-shadow:
inset 0 0 0 1px rgba(232, 181, 71, 0.55),
inset 0 0 0 6px rgba(18, 3, 4, 0.90),
inset 0 0 0 7px rgba(232, 181, 71, 0.30),
inset 0 28px 70px rgba(0, 0, 0, 0.42),
0 16px 36px rgba(0, 0, 0, 0.40),
0 4px 12px rgba(0, 0, 0, 0.30);
overflow: hidden;
padding: 36px 40px 30px;
}
.k-card-critics > * { position: relative; z-index: 1; }
/* Eyebrow - centered, small-caps editorial header. Gold ornaments
on both sides replace the leading bar (which was invisible against
the gold-on-gold previous theme). The leading-bar ::before is
repurposed as the LEFT ornament; we add ::after for the right one. */
.k-card-critics .k-detail-card-head {
display: block !important; /* override the row flex from base */
text-align: center;
margin-bottom: 58px; /* extra breathing room under the eyebrow */
}
.k-card-critics .k-detail-card-eyebrow {
display: inline-flex !important;
align-items: center;
justify-content: center;
color: var(--gold-3) !important;
font-family: Inter, sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 4px;
text-transform: uppercase;
text-shadow: 0 0 14px rgba(232, 181, 71, 0.55);
}
.k-card-critics .k-detail-card-eyebrow::before,
.k-card-critics .k-detail-card-eyebrow::after {
content: '';
display: inline-block;
width: 56px;
height: 1px;
background:
-webkit-linear-gradient(90deg, transparent 0%, var(--gold-1) 50%, transparent 100%);
background:
linear-gradient(90deg, transparent 0%, var(--gold-1) 50%, transparent 100%);
box-shadow: 0 0 8px rgba(232, 181, 71, 0.50) !important;
margin: 0 14px;
}
/* Tiny diamond ornament centered between the gold rules - we drop it
in as a unicode character via the eyebrow text so we don't need to
touch JS. Achieved instead by adding it inside the ::before/::after
via background-image isn't widely supported on Cr56 - use the next
pseudo trick: a small dot rendered on each rule's outer end. */
.k-card-critics .k-detail-card-eyebrow::before { position: relative; }
.k-card-critics .k-detail-card-eyebrow::after { position: relative; }
/* View-all button - now centered BELOW the foot instead of top-right.
Hide the head-position copy + reposition via a sibling rule below. */
.k-card-critics .k-card-critics-viewall {
color: var(--gold-3) !important;
border-color: rgba(232, 181, 71, 0.55) !important;
background: transparent !important;
}
.k-card-critics .k-card-critics-viewall:active {
background: var(--gold-1) !important;
color: var(--ink-1) !important;
}
/* Stage - centered editorial pull-quote. Drops the previous left-border
accent (replaced by the decorative open-quote glyph). */
.k-card-critics .k-card-critics-stage {
border-left: none;
background: none;
padding: 8px 30px 12px;
text-align: center;
position: relative;
}
/* Oversized illuminated open-quote - the spotlight ornament. */
.k-card-critics .k-card-critics-stage::before {
content: '\201C'; /* U+201C left double quote */
position: absolute;
top: -34px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-weight: 700;
font-size: 108px;
line-height: 0.8;
color: rgba(232, 181, 71, 0.92);
text-shadow: 0 0 30px rgba(232, 181, 71, 0.45);
pointer-events: none;
}
/* Stars centered above the quote - gold, and they IGNITE left-to-right
each time a quote appears (the stars element is rebuilt on every
rotate, so this replays naturally), then hold a soft steady glow.
The rating is the key trust signal, so it earns a little theatrical
life. Only the filled stars light up; empties stay dim. */
.k-card-critics .k-card-critics-stars {
display: flex !important;
justify-content: center;
margin: 16px 0 14px;
}
.k-card-critics .k-card-critics-stars .k-star {
width: 24px;
height: 24px;
}
.k-card-critics .k-card-critics-stars .k-star.is-filled {
/* steady resting glow once the ignite settles */
-webkit-filter: drop-shadow(0 0 5px rgba(232, 181, 71, 0.55));
filter: drop-shadow(0 0 5px rgba(232, 181, 71, 0.55));
-webkit-animation: kStarIgnite 560ms ease-out both;
animation: kStarIgnite 560ms ease-out both;
}
.k-card-critics .k-card-critics-stars .k-star.is-filled:nth-child(1) { -webkit-animation-delay: 0ms; animation-delay: 0ms; }
.k-card-critics .k-card-critics-stars .k-star.is-filled:nth-child(2) { -webkit-animation-delay: 90ms; animation-delay: 90ms; }
.k-card-critics .k-card-critics-stars .k-star.is-filled:nth-child(3) { -webkit-animation-delay: 180ms; animation-delay: 180ms; }
.k-card-critics .k-card-critics-stars .k-star.is-filled:nth-child(4) { -webkit-animation-delay: 270ms; animation-delay: 270ms; }
.k-card-critics .k-card-critics-stars .k-star.is-filled:nth-child(5) { -webkit-animation-delay: 360ms; animation-delay: 360ms; }
@-webkit-keyframes kStarIgnite {
0% { opacity: 0.25; -webkit-transform: scale(0.80); -webkit-filter: drop-shadow(0 0 0 rgba(232, 181, 71, 0)); }
55% { opacity: 1; -webkit-transform: scale(1.18); -webkit-filter: drop-shadow(0 0 12px rgba(232, 181, 71, 0.90)); }
100% { opacity: 1; -webkit-transform: scale(1); -webkit-filter: drop-shadow(0 0 5px rgba(232, 181, 71, 0.55)); }
}
@keyframes kStarIgnite {
0% { opacity: 0.25; transform: scale(0.80); filter: drop-shadow(0 0 0 rgba(232, 181, 71, 0)); }
55% { opacity: 1; transform: scale(1.18); filter: drop-shadow(0 0 12px rgba(232, 181, 71, 0.90)); }
100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 5px rgba(232, 181, 71, 0.55)); }
}
/* Quote text - large illuminated Playfair italic, cream on the dark
stage, with a soft glow lifting it off the backdrop. */
.k-card-critics .k-card-critics-text {
font-family: 'Playfair Display', Georgia, serif !important;
font-style: italic !important;
font-weight: 500 !important;
font-size: 26px !important;
line-height: 1.40 !important;
color: var(--cream-1) !important;
text-align: center;
max-width: 600px;
margin: 0 auto;
letter-spacing: -0.2px;
text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45), 0 0 30px rgba(232, 181, 71, 0.10);
}
/* Source line - the publication "in lights": gold small-caps with a
glowing gold separator above. */
.k-card-critics .k-card-critics-source {
text-align: center;
margin-top: 20px;
color: var(--gold-3) !important;
font-family: Inter, sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 2.6px;
text-transform: uppercase;
position: relative;
padding-top: 16px;
text-shadow: 0 0 12px rgba(232, 181, 71, 0.45);
}
.k-card-critics .k-card-critics-source::before {
content: '';
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 48px;
height: 1px;
background: var(--gold-1);
box-shadow: 0 0 8px rgba(232, 181, 71, 0.50);
}
/* Foot - centered counter flanked by the nav arrows, separated by a
thin gold rule above. */
.k-card-critics .k-card-critics-foot {
border-top: 1px solid rgba(232, 181, 71, 0.22) !important;
justify-content: center !important;
padding-top: 18px !important;
margin-top: 24px !important;
}
.k-card-critics .k-card-critics-foot > * + * { margin-left: 18px; }
.k-card-critics .k-card-critics-counter {
color: var(--gold-3) !important;
letter-spacing: 2.2px;
}
.k-card-critics .k-card-critics-nav {
background: rgba(255, 251, 240, 0.06) !important;
color: var(--gold-3) !important;
border: 1px solid rgba(232, 181, 71, 0.45);
width: 44px;
height: 44px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.k-card-critics .k-card-critics-nav:active {
background: var(--gold-1) !important;
color: var(--ink-1) !important;
}
/* =================================================================
CONTENT MODAL (About + Critics deep-dives) 2026-05-27
Cream-card on a darkened backdrop. The body scrolls if content
overflows the card height; the head + close button stay pinned.
================================================================= */
.k-cm-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(18, 6, 8, 0.72);
z-index: 9650;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 220ms ease;
transition: opacity 220ms ease;
display: flex;
align-items: center;
justify-content: center;
padding: 36px;
}
.k-cm-overlay.is-on { opacity: 1; visibility: visible; }
.k-cm-card {
width: 100%;
max-width: 820px;
max-height: 85vh;
background:
linear-gradient(180deg, var(--white) 0%, var(--cream-1) 100%);
border-radius: var(--r-card-lg);
box-shadow:
0 30px 70px rgba(0, 0, 0, 0.5),
inset 0 0 0 1px rgba(232, 181, 71, 0.30);
display: flex;
flex-direction: column;
overflow: hidden;
}
.k-cm-head {
flex: 0 0 auto;
display: flex;
align-items: center;
padding: 22px 28px;
border-bottom: 1px solid rgba(232, 181, 71, 0.25);
}
.k-cm-title {
flex: 1 1 auto;
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800;
font-size: 26px;
color: var(--ink-1);
letter-spacing: -0.3px;
}
.k-cm-close {
flex: 0 0 auto;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--cream-2);
color: var(--ink-1);
display: flex; align-items: center; justify-content: center;
-webkit-transition: background 200ms ease;
transition: background 200ms ease;
}
.k-cm-close:active { background: var(--red-2); color: var(--white); }
.k-cm-close .k-icon { width: 22px; height: 22px; }
.k-cm-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 24px 32px 28px 32px;
-webkit-overflow-scrolling: touch;
}
.k-cm-about-short {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 22px;
line-height: 1.4;
color: var(--ink-1);
letter-spacing: -0.2px;
margin: 0 0 18px 0;
}
.k-cm-about-long {
font-family: Inter, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.72;
color: var(--ink-2);
margin: 0;
white-space: pre-wrap;
}
.k-cm-divider {
height: 1px;
background: rgba(232, 181, 71, 0.30);
margin: 22px 0;
}
.k-cm-section-eyebrow {
font-family: Inter, sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 2.6px;
text-transform: uppercase;
color: var(--red-2);
margin-bottom: 12px;
}
.k-cm-critics > * + * { margin-top: 18px; }
.k-cm-critics-item {
margin: 0;
padding: 14px 18px 16px 18px;
border-left: 3px solid var(--gold-1);
background:
linear-gradient(90deg, rgba(232, 181, 71, 0.08) 0%, rgba(232, 181, 71, 0) 75%);
border-radius: 0 var(--r-card) var(--r-card) 0;
}
.k-cm-critics-item .k-about-quote-stars { margin-bottom: 8px; }
.k-cm-critics-item .k-about-quote-text {
display: block;
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: 18px;
line-height: 1.5;
color: var(--ink-1);
}
.k-cm-critics-item .k-about-quote-source {
display: block;
margin-top: 8px;
font-style: normal;
font-family: Inter, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--red-2);
}
/* Modal awards list (richer than the chip strip on the card) */
.k-cm-awards {
list-style: none;
margin: 0;
padding: 0;
}
.k-cm-award-item {
display: flex;
align-items: flex-start;
padding: 14px 16px;
margin-bottom: 10px;
background: var(--cream-1);
border: 1px solid var(--cream-3);
border-radius: var(--r-card);
}
.k-cm-award-item.is-won {
background:
linear-gradient(180deg, rgba(232, 181, 71, 0.16) 0%, rgba(232, 181, 71, 0.04) 100%);
border-color: rgba(232, 181, 71, 0.55);
}
.k-cm-award-icon {
width: 22px;
height: 22px;
color: var(--gold-1);
margin-right: 14px;
margin-top: 2px;
flex-shrink: 0;
}
.k-cm-award-body { flex: 1 1 auto; }
.k-cm-award-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 18px;
color: var(--ink-1);
line-height: 1.3;
}
.k-cm-award-meta {
margin-top: 4px;
display: flex;
align-items: center;
}
.k-cm-award-status {
font-family: Inter, sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--ink-soft);
}
.k-cm-award-item.is-won .k-cm-award-status { color: #B07A1A; }
.k-cm-award-year {
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid var(--cream-3);
font-family: Inter, sans-serif;
font-size: 12px;
color: var(--ink-soft);
}
/* k-about-lead + k-lead-quote-{stars,text,source} + k-about-desc removed
- the v4 layout uses k-card-critics for pull quotes and the modal
k-cm-critics for the View-all expansion. The .k-about-short and
.k-about-long base rules (further down this file, ~2050) are still
used by the new k-detail-card body + k-cm-about modal. */
/* Read more / Read less toggle (replaces the older single-shot button) */
.k-readmore {
display: inline-flex;
align-items: center;
margin-top: 4px;
min-height: 44px;
padding: 8px 18px;
box-sizing: border-box;
background: transparent;
color: var(--red-2);
font-family: Inter, sans-serif;
font-weight: 800;
font-size: 13px;
letter-spacing: 1.4px;
text-transform: uppercase;
border: 1.5px solid var(--red-2);
border-radius: var(--r-pill);
line-height: 1;
cursor: pointer;
-webkit-transition: background 200ms ease, color 200ms ease;
transition: background 200ms ease, color 200ms ease;
}
.k-readmore:active {
background: rgba(196, 38, 46, 0.10);
}
.k-readmore.is-open {
background: var(--red-2);
color: var(--white);
}
/* Generic about section (Starring, Creative team, Awards, Critics) */
/* Starring row - leads inline, ensemble compact line below */
/* .k-credits-grid was an earlier 2-col layout. Removed 2026-05-27;
credits now live in the .k-card-credits ruleset. */
/* Legacy .k-critics-list / .k-about-foot{,-item,-icon,-label,-value}
removed - replaced by .k-card-critics and .k-card-gtk in the v4 layout. */
/* k-about wrapper / k-about-eyebrow / k-about-body removed - the v4
layout uses the .k-detail-card system instead. The .k-about-short /
.k-about-long / .k-about-quote-{stars,text,source} children below
are still used by the View-more modal renderer. */
/* The leading paragraph. Playfair regular weight, NOT italic.
Drop-cap-style emphasis through size + weight, not slant. */
.k-about-short {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-style: normal;
font-size: 26px;
line-height: 1.35;
color: var(--ink-1);
letter-spacing: -0.2px;
}
/* The marketing copy. Generous Inter, large line-height. */
.k-about-long {
font-family: Inter, sans-serif;
font-weight: 400;
font-size: 17px;
line-height: 1.7;
color: var(--ink-2);
white-space: pre-wrap;
}
/* Legacy .k-about-cast / .k-about-label / .k-about-value / .k-about-quote
parent wrappers removed - the v4 layout uses .k-card-cast and the
children .k-about-quote-{stars,text,source} still ship inside the
View-more critics modal. */
.k-about-quote-stars {
margin-bottom: 10px;
}
.k-about-quote-text {
display: block;
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: 20px;
line-height: 1.45;
color: var(--ink-1);
}
.k-about-quote-source {
display: block;
margin-top: 10px;
font-style: normal;
font-family: Inter, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--red-2);
}
/* 5-star rating component. Filled stars in warm gold, unfilled in
ghost cream. Inherits color via currentColor inside SVG path. */
.k-stars {
display: inline-flex;
align-items: center;
line-height: 0;
}
.k-stars > *:not(:last-child) { margin-right: 3px; }
.k-star {
display: inline-flex;
width: 20px;
height: 20px;
color: rgba(201, 144, 48, 0.22);
}
.k-star.is-filled {
color: var(--gold-1);
-webkit-filter: drop-shadow(0 0 3px rgba(255, 200, 96, 0.55));
filter: drop-shadow(0 0 3px rgba(255, 200, 96, 0.55));
}
.k-star svg {
width: 100%;
height: 100%;
fill: currentColor;
display: block;
}
/* Gallery card - production photos at their natural orientation. CSS
columns masonry handles mixed portrait + landscape gracefully. Each
photo is in its own rounded frame with a subtle border + drop-shadow. */
/* Legacy 2-column masonry gallery (.k-gallery / .k-gallery-card /
.k-gallery-caption) removed - the v4 show page uses .k-photos with
the .k-pg-stage track slider + .k-cm-photo-grid view-all modal. */
/* Optional tagline on the hero. Cream serif weight 500, NOT italic.
Readable from kiosk distance against the dark gradient under it. */
.k-hero-tagline {
font-family: 'Playfair Display', Georgia, serif;
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 1.35;
color: var(--cream-1);
margin-bottom: 18px;
text-shadow:
0 2px 6px rgba(0, 0, 0, 0.55),
0 8px 18px rgba(0, 0, 0, 0.30);
max-width: 85%;
letter-spacing: 0.2px;
}
/* ----- SHOW SCREEN (hero + calendar + times) ------------------ */
.k-screen[data-screen="show"] {
padding-bottom: 96px;
}
.k-back-link {
display: inline-flex; align-items: center;
color: var(--ink-soft);
font-size: 14px; font-weight: 700; letter-spacing: 1.4px;
text-transform: uppercase;
margin-bottom: 22px;
min-height: 44px;
padding: 12px 18px;
box-sizing: border-box;
border-radius: var(--r-pill);
background: var(--white);
border: 1px solid var(--cream-3);
}
.k-back-link .k-icon { width: 16px; height: 16px; margin-right: 8px; }
/* Show-screen hero. Premium lighting model lifted from the header:
warm spotlight from upper-right, vignette at corners, marquee-bulb
row at the bottom edge as the gold signature. Banner image sits
underneath with cinematic gradient overlay. */
.k-hero {
position: relative;
width: 100%;
height: 560px;
border-radius: var(--r-card-lg);
overflow: hidden;
background: var(--ink-1);
box-shadow:
0 22px 52px rgba(26, 6, 8, 0.42),
0 8px 18px rgba(26, 6, 8, 0.28),
inset 0 0 0 1px rgba(232, 181, 71, 0.22);
margin-bottom: 40px;
color: var(--white);
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.k-hero-img {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
z-index: 0;
}
.k-hero-img img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
image-rendering: -webkit-optimize-contrast;
}
/* Cinematic gradient - dark at top a bit, very dark at bottom for text legibility */
.k-hero-grad {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 1;
background:
-webkit-linear-gradient(180deg, rgba(27,6,8,0.55) 0%, rgba(27,6,8,0.18) 30%, rgba(27,6,8,0.55) 65%, rgba(27,6,8,0.96) 100%);
background:
linear-gradient(180deg, rgba(27,6,8,0.55) 0%, rgba(27,6,8,0.18) 30%, rgba(27,6,8,0.55) 65%, rgba(27,6,8,0.96) 100%);
}
/* Warm spotlight from upper-right (the lighting language from the header) */
.k-hero::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 2;
pointer-events: none;
background:
-webkit-radial-gradient(ellipse 60% 75% at 85% 18%, rgba(255, 220, 200, 0.18) 0%, transparent 60%);
background:
radial-gradient(ellipse 60% 75% at 85% 18%, rgba(255, 220, 200, 0.18) 0%, transparent 60%);
}
/* Vignette - barely-there darkening at corners */
.k-hero::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 2;
pointer-events: none;
background:
-webkit-radial-gradient(ellipse 100% 90% at 50% 55%, transparent 55%, rgba(27, 6, 8, 0.40) 100%);
background:
radial-gradient(ellipse 100% 90% at 50% 55%, transparent 55%, rgba(27, 6, 8, 0.40) 100%);
}
/* Marquee-bulb row anchored to the bottom edge of the hero. Same recipe
as the header bulbs - repeating radial-gradient + warm halo. */
.k-hero-bulbs {
position: absolute;
left: 0; right: 0; bottom: 5px;
height: 12px;
z-index: 4;
pointer-events: none;
background-image:
-webkit-radial-gradient(circle at 50% 50%,
rgba(255, 252, 232, 1) 0%,
rgba(255, 236, 178, 0.95) 16%,
rgba(244, 200, 96, 0.92) 30%,
rgba(201, 144, 48, 0.80) 40%,
rgba(122, 80, 20, 0.40) 48%,
transparent 54%);
background-image:
radial-gradient(circle at 50% 50%,
rgba(255, 252, 232, 1) 0%,
rgba(255, 236, 178, 0.95) 16%,
rgba(244, 200, 96, 0.92) 30%,
rgba(201, 144, 48, 0.80) 40%,
rgba(122, 80, 20, 0.40) 48%,
transparent 54%);
background-size: 22px 12px;
background-repeat: repeat-x;
background-position: center;
-webkit-filter: drop-shadow(0 0 2px rgba(255, 210, 130, 0.65));
filter: drop-shadow(0 0 2px rgba(255, 210, 130, 0.65));
}
/* Soft bottom-shadow band above the bulbs so they read recessed */
.k-hero-bottomshade {
position: absolute;
left: 0; right: 0; bottom: 16px;
height: 28px;
z-index: 3;
pointer-events: none;
background:
linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.30) 100%);
}
.k-hero-content {
position: absolute;
left: 44px;
right: 44px;
bottom: 56px;
z-index: 5;
/* 2026-05-27: max-width moved off the container and onto the title +
tagline specifically. The actions row (meta chips + Book Now) now
spans the full content width so the button can sit on the same
line as the chips instead of wrapping below them. */
}
.k-hero-content > .k-hero-title,
.k-hero-content > .k-hero-tagline {
max-width: 78%;
}
.k-hero-tag {
font-family: Inter, sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold-1);
margin-bottom: 14px;
display: flex; align-items: center;
}
.k-hero-tag::before {
content: '';
display: inline-block;
width: 36px; height: 2px;
background:
linear-gradient(90deg, var(--gold-2) 0%, var(--gold-1) 50%, var(--gold-3) 100%);
margin-right: 12px;
box-shadow: 0 0 6px rgba(255, 200, 96, 0.45);
}
/* Title - engraved letterpress treatment, same as header wordmark */
.k-hero-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 900;
font-style: normal;
font-size: 80px;
line-height: 0.98;
letter-spacing: -2px;
margin-bottom: 18px;
color: var(--cream-1);
text-shadow:
0 -1px 0 rgba(74, 10, 12, 0.65),
0 1px 0 rgba(255, 232, 200, 0.16),
0 3px 0 rgba(74, 10, 12, 0.45),
0 6px 18px rgba(0, 0, 0, 0.62);
}
.k-hero-title.is-long { font-size: 60px; letter-spacing: -1.4px; }
.k-hero-title.is-very-long { font-size: 46px; letter-spacing: -1px; }
/* Meta chips - refined gold-bordered glass plates, same vocabulary
as the carousel chips */
.k-hero-meta {
display: flex;
flex-wrap: wrap;
margin: 0 -5px -10px -5px;
}
.k-hero-meta span {
display: inline-block;
padding: 9px 18px;
margin: 0 5px 10px 5px;
background:
-webkit-linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 100%);
background:
linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 100%);
border: 1px solid rgba(244, 226, 176, 0.32);
border-radius: var(--r-pill);
font-family: Inter, sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--cream-1);
letter-spacing: 0.5px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 2px 6px rgba(0, 0, 0, 0.25);
}
/* Skeleton loaders - used while availability fetches. Shimmer animation
on transform (compositor-only on Cr56). */
.k-skel {
position: relative;
overflow: hidden;
background: var(--cream-2);
border-radius: var(--r-card);
}
.k-skel::after {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 60%;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
background:
-webkit-linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
background:
linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
-webkit-animation: kskel 1500ms ease-in-out infinite;
animation: kskel 1500ms ease-in-out infinite;
}
@-webkit-keyframes kskel {
0% { -webkit-transform: translateX(-100%); }
100% { -webkit-transform: translateX(300%); }
}
@keyframes kskel {
0% { transform: translateX(-100%); }
100% { transform: translateX(300%); }
}
.k-skel-cal-row {
display: flex;
margin: 0 -4px 8px -4px;
}
.k-skel-cal-row > .k-skel {
flex: 1 1 0;
height: 84px;
margin: 0 4px;
}
/* Card (calendar / times) */
.k-card {
background: var(--white);
border-radius: var(--r-card-lg);
box-shadow: var(--sh-2);
padding: 28px 32px;
margin-bottom: 28px;
}
.k-card-head {
display: flex; align-items: center;
margin-bottom: 22px;
}
.k-card-head > *:not(:last-child) { margin-right: 14px; }
.k-card-step {
flex-shrink: 0;
width: 44px; height: 44px;
border-radius: 50%;
background:
-webkit-linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
background:
linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
color: var(--white);
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800; font-size: 22px;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--sh-red-sm);
}
.k-card-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800; font-size: 32px;
letter-spacing: -0.3px;
color: var(--ink-1);
}
.k-card-hint {
margin-left: auto;
font-size: 13px; font-weight: 600;
letter-spacing: 0.6px;
color: var(--ink-soft);
text-transform: uppercase;
}
/* =================================================================
CALENDAR (premium editorial)
Quiet cream card; AVAILABLE dates lift forward as clean white tiles
(gold hairline + soft shadow, dark high-contrast numerals + red show
count); unavailable recede to a faint numeral; today wears a gold
ring; the selected date is a confident filled red with a gold ring.
Gold accents tie it to the page's premium language. All cell-state
styling lives here (one place) so the cascade resolves cleanly.
================================================================= */
.k-cal-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px;
}
.k-cal-nav {
width: 48px; height: 48px;
border-radius: 50%;
background: transparent;
color: var(--ink-1);
border: 1.5px solid rgba(201, 144, 48, 0.55);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
-webkit-transition: -webkit-transform 160ms var(--ease), background 160ms var(--ease);
transition: transform 160ms var(--ease), background 160ms var(--ease);
}
.k-cal-nav:active { -webkit-transform: scale(0.94); transform: scale(0.94); background: var(--cream-2); }
.k-cal-nav .k-icon { width: 20px; height: 20px; }
.k-cal-nav[disabled] { opacity: 0.3; pointer-events: none; }
.k-cal-monthlabel {
flex: 1 1 auto;
text-align: center;
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700; font-size: 28px;
letter-spacing: 0.2px;
color: var(--ink-1);
}
.k-cal-dow {
display: flex;
margin-bottom: 8px;
}
.k-cal-dow span {
flex: 1 1 0;
text-align: center;
font-family: Inter, sans-serif;
font-size: 11px; font-weight: 800;
letter-spacing: 1.8px;
color: var(--gold-2);
text-transform: uppercase;
}
.k-cal-grid {
display: flex; flex-wrap: wrap;
}
.k-cal-cell {
width: 14.2857%; /* 1/7 */
padding: 4px;
}
.k-cal-cell-inner {
width: 100%; height: 80px;
border-radius: 14px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
background: transparent;
-webkit-transition: -webkit-transform 160ms var(--ease), box-shadow 160ms var(--ease);
transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.k-cal-cell.is-empty .k-cal-cell-inner { background: transparent; }
/* Unavailable / past - recede to a faint numeral, no tile */
.k-cal-cell.is-disabled .k-cal-cell-inner { background: transparent; }
.k-cal-cell.is-disabled .k-cal-cell-day { opacity: 0.22; }
.k-cal-cell.is-disabled .k-cal-cell-count { display: none; }
/* Available - clean white tile lifting off the cream (gold hairline +
soft shadow), dark readable numeral, red show-count */
.k-cal-cell.is-available .k-cal-cell-inner {
background: var(--white);
box-shadow:
inset 0 0 0 1px rgba(201, 144, 48, 0.40),
0 3px 8px rgba(26, 6, 8, 0.10);
}
.k-cal-cell.is-available .k-cal-cell-day { color: var(--ink-1); }
.k-cal-cell.is-available .k-cal-cell-count { color: var(--red-2); opacity: 0.95; }
.k-cal-cell.is-available:active .k-cal-cell-inner { -webkit-transform: scale(0.94); transform: scale(0.94); }
/* Today - white tile with a gold ring */
.k-cal-cell.is-today .k-cal-cell-inner {
background: var(--white);
box-shadow:
inset 0 0 0 2px var(--gold-1),
0 3px 8px rgba(26, 6, 8, 0.10);
}
/* Selected - confident filled red, gold ring, lift (defined LAST so it
wins for a selected-today cell) */
.k-cal-cell.is-selected .k-cal-cell-inner {
background:
-webkit-linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
background:
linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
box-shadow:
inset 0 0 0 2px var(--gold-1),
0 6px 16px rgba(122, 16, 20, 0.35);
}
.k-cal-cell.is-selected .k-cal-cell-day { color: #fff; }
.k-cal-cell.is-selected .k-cal-cell-count { color: rgba(255, 255, 255, 0.92); opacity: 1; }
/* Times grid */
.k-times {
display: flex; flex-wrap: wrap;
margin: 0 -6px;
}
.k-time {
margin: 0 6px 12px 6px;
padding: 0 26px;
height: 60px;
border-radius: var(--r-pill);
background: var(--white);
color: var(--ink-1);
font-weight: 700; font-size: 18px;
letter-spacing: 0.3px;
box-shadow:
inset 0 0 0 1px rgba(201, 144, 48, 0.40),
0 3px 8px rgba(26, 6, 8, 0.10);
-webkit-transition: -webkit-transform 160ms var(--ease);
transition: transform 160ms var(--ease);
display: flex;
align-items: center;
justify-content: center;
}
.k-time:active { -webkit-transform: scale(0.95); transform: scale(0.95); }
.k-time.is-active {
background:
-webkit-linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
background:
linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
color: var(--white);
box-shadow:
inset 0 0 0 2px var(--gold-1),
0 6px 16px rgba(122, 16, 20, 0.32);
}
.k-time-main,
.k-time-sub {
display: block;
line-height: 1.05;
}
.k-time-sub {
margin-left: 10px;
padding: 3px 7px;
border-radius: var(--r-pill);
background: rgba(122, 16, 20, 0.08);
color: var(--ink-soft);
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.k-time.is-past,
.k-time[disabled] {
background: rgba(255, 255, 255, 0.56);
color: rgba(43, 18, 20, 0.42);
box-shadow:
inset 0 0 0 1px rgba(122, 16, 20, 0.13),
0 2px 5px rgba(26, 6, 8, 0.05);
pointer-events: none;
}
.k-time.is-past .k-time-sub {
background: rgba(122, 16, 20, 0.10);
color: rgba(122, 16, 20, 0.56);
}
/* ----- SECTION SCREEN (price-grouped section cards) ----------- */
.k-summary {
background:
-webkit-linear-gradient(top, #FFFFFF 0%, var(--cream-1) 100%);
background: linear-gradient(180deg, #FFFFFF 0%, var(--cream-1) 100%);
border-radius: var(--r-card-lg);
padding: 22px 32px;
margin-bottom: 24px;
box-shadow:
inset 0 0 0 1px rgba(232, 181, 71, 0.40),
0 10px 24px rgba(26, 6, 8, 0.10);
display: flex; align-items: center; justify-content: space-between;
}
.k-summary > *:not(:last-child) { margin-right: 24px; }
.k-summary-show {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800; font-size: 26px;
color: var(--ink-1);
line-height: 1.1;
flex: 1 1 auto;
}
.k-summary-when {
display: flex; align-items: center;
color: var(--ink-soft);
font-size: 15px; font-weight: 600;
letter-spacing: 0.4px;
}
.k-summary-when > *:not(:last-child) { margin-right: 16px; }
.k-qty {
display: inline-flex; align-items: center;
background: var(--cream-1);
padding: 6px;
border-radius: var(--r-pill);
box-shadow: inset 0 0 0 1px rgba(201, 144, 48, 0.32);
flex-shrink: 0;
}
.k-qty > *:not(:last-child) { margin-right: 6px; }
.k-qty-btn {
width: 52px; height: 52px;
border-radius: 50%;
background: var(--white);
color: var(--ink-1);
line-height: 1;
box-shadow:
inset 0 0 0 1px rgba(201, 144, 48, 0.45),
0 2px 6px rgba(26, 6, 8, 0.12);
display: flex; align-items: center; justify-content: center;
-webkit-transition: -webkit-transform 140ms var(--ease);
transition: transform 140ms var(--ease);
}
.k-qty-btn:active { -webkit-transform: scale(0.92); transform: scale(0.92); }
.k-qty-btn .k-icon { width: 22px; height: 22px; }
.k-qty-btn[disabled] { opacity: 0.32; pointer-events: none; }
.k-qty-val {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800; font-size: 32px;
color: var(--ink-1);
min-width: 48px;
text-align: center;
}
.k-qty-label {
font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--ink-soft);
margin-right: 14px;
margin-left: 6px;
}
/* Legacy flat section-card grid (k-sections-grid + k-section + children)
removed 2026-05-29 - the picker now uses the seat-chart polygon
renderer (k-chart-* in this file). Only k-sections-empty stays
because the chart wrap still uses it for the "No sections available
for this performance" empty state. */
.k-sections-empty {
background: var(--white);
border-radius: var(--r-card-lg);
padding: 64px 32px;
text-align: center;
color: var(--ink-soft);
font-size: 18px;
box-shadow: var(--sh-1);
}
.k-sections-empty h3 {
margin: 0 0 10px;
font-family: var(--font-display);
font-size: 34px;
line-height: 1.05;
color: var(--brand-red);
}
.k-sections-empty p {
margin: 0;
font-size: 18px;
line-height: 1.4;
}
.k-sections-soldout {
border: 2px solid rgba(191, 13, 28, 0.18);
}
/* @keyframes kshimmer drives the chart-skeleton shimmer (k-chart-skel::before). */
@-webkit-keyframes kshimmer {
0% { -webkit-transform: translateX(0); }
100% { -webkit-transform: translateX(250%); }
}
@keyframes kshimmer {
0% { transform: translateX(0); }
100% { transform: translateX(250%); }
}
/* ----- CUSTOMER / CHECKOUT SCREEN ------------------------------ */
/* Row 1: back link (left) + "Reserved for you" chip (right) */
.k-checkout-topbar {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
/* Back link refined to share the "Reserved for you" chip's language - white
pill, gold inset hairline, soft shadow, red arrow - so the two pills in this
row read as a matched pair instead of a plain button next to a fancy chip. */
.k-checkout-topbar .k-back-link {
margin-bottom: 0; align-self: center;
border: none;
color: var(--ink-1);
box-shadow:
0 6px 18px rgba(26, 6, 8, 0.12),
inset 0 0 0 1px rgba(232, 181, 71, 0.45);
}
.k-checkout-topbar .k-back-link .k-icon { color: var(--red-2); }
.k-checkout-chip-slot { display: flex; align-items: center; flex-shrink: 0; }
/* Head row: numbered badge + "Your details" title */
.k-checkout-head {
display: flex; align-items: center;
margin-bottom: 18px;
}
.k-checkout-head .k-card-step { margin-right: 16px; }
.k-checkout-head .k-section-title { margin: 0; }
/* TICKET: red show panel (header) fused with the details form (body) into one
card - single shadow, clipped corners, no gap between them. */
.k-checkout-ticket {
border-radius: var(--r-card-lg);
overflow: hidden;
margin-bottom: 16px;
box-shadow:
0 16px 34px rgba(74, 10, 12, 0.20),
0 4px 12px rgba(26, 6, 8, 0.12);
}
/* Red header inside the ticket: drop its own drop-shadow + radius (the ticket
owns those); keep the inset gold hairline so a thin gold rule divides the
red header from the white form body. Scoped with .k-checkout-ticket so it
beats .k-sec-top (defined later in 95-seat-chart.css). */
.k-checkout-ticket .k-checkout-show {
border-radius: 0;
margin-bottom: 0;
box-shadow:
inset 0 0 0 1px rgba(244, 226, 176, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
/* White form body inside the ticket: no own radius/shadow/margin. */
.k-checkout-details {
border-radius: 0;
box-shadow: none;
margin-bottom: 0;
background: var(--white);
}
/* Single centred vertical column that FILLS the portrait screen. A two-column
layout left ~half the screen as empty cream below the cards. The screen
flex-centres the page; .k-app is fixed-size so .k-stage has a definite
height -> min-height:100% resolves and margin:auto centres vertically.
If a Cr56 quirk leaves the % unresolved, the page just top-anchors (safe). */
.k-screen[data-screen="customer"].is-on {
display: -webkit-flex; display: flex;
-webkit-flex-direction: column; flex-direction: column;
min-height: 100%;
}
/* Full width to match the other screens (it was an inset narrow column). */
.k-checkout-page {
width: 100%;
margin: auto;
}
.k-checkout-card { margin-bottom: 16px; }
.k-checkout-page > *:last-child { margin-bottom: 0; }
/* Form cards a touch tighter than the global .k-card */
.k-screen[data-screen="customer"] .k-card { padding: 24px 28px; }
.k-checkout-card-title {
display: flex; align-items: center;
font-size: 24px;
margin-bottom: 16px;
}
.k-checkout-card-title .k-card-step { margin-right: 14px; }
.k-card-step.is-sm { width: 36px; height: 36px; font-size: 18px; }
.k-checkout-optional {
margin-left: 11px;
font-family: Inter, sans-serif;
font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
color: var(--ink-soft);
background: var(--cream-2);
padding: 3px 10px; border-radius: var(--r-pill);
}
/* Returning-customer note under the email */
.k-acct-note {
padding-left: 4px;
font-size: 13px; font-weight: 600; line-height: 1.4;
max-height: 0; opacity: 0; overflow: hidden;
-webkit-transition: max-height 220ms ease, opacity 200ms ease, margin-top 200ms ease;
transition: max-height 220ms ease, opacity 200ms ease, margin-top 200ms ease;
}
.k-acct-note.is-on { max-height: 48px; opacity: 1; margin-top: 9px; }
.k-acct-note.is-known { color: var(--success); }
.k-acct-note.is-new { color: var(--success); }
.k-screen[data-screen="customer"] .k-form-row { margin-bottom: 18px; }
.k-screen[data-screen="customer"] .k-form-row:last-child { margin-bottom: 0; }
.k-form-row { margin-bottom: 18px; }
.k-form-label {
display: block;
font-size: 13px; font-weight: 700; letter-spacing: 1.4px;
color: var(--ink-soft);
text-transform: uppercase;
margin-bottom: 8px;
}
.k-form-input {
width: 100%; height: 68px;
background: var(--cream-2);
border: 2px solid transparent;
border-radius: var(--r-input);
padding: 0 20px;
font-size: 20px; font-weight: 500;
color: var(--ink-1);
-webkit-transition: border-color 180ms ease, background 180ms ease;
transition: border-color 180ms ease, background 180ms ease;
}
.k-form-input:focus {
background: var(--white);
border-color: var(--red-2);
box-shadow: 0 0 0 6px rgba(208, 35, 41, 0.10);
}
.k-form-input::-webkit-input-placeholder { color: var(--ink-soft); opacity: 0.6; }
.k-coupon-row {
display: flex; align-items: stretch;
}
.k-coupon-row > *:not(:last-child) { margin-right: 10px; }
.k-coupon-row .k-form-input { flex: 1 1 auto;
text-transform: uppercase; letter-spacing: 3px; font-weight: 700; }
.k-coupon-apply {
flex-shrink: 0;
padding: 0 28px;
background: var(--ink-1);
color: var(--white);
border-radius: var(--r-input);
font-weight: 800; font-size: 17px;
letter-spacing: 1px; text-transform: uppercase;
}
.k-coupon-msg {
margin-top: 10px;
font-size: 14px; font-weight: 600;
min-height: 22px;
}
.k-coupon-msg.is-success { color: var(--success); }
.k-coupon-msg.is-error { color: var(--red-2); }
/* Order summary card (right column) */
.k-order {
background: var(--white);
border-radius: var(--r-card-lg);
padding: 24px 26px 26px 26px;
box-shadow: var(--sh-2);
position: relative;
overflow: hidden;
}
/* gold hairline crown - quiet premium signature */
.k-order::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background:
-webkit-linear-gradient(left, var(--gold-2) 0%, var(--gold-1) 50%, var(--gold-3) 100%);
background:
linear-gradient(90deg, var(--gold-2) 0%, var(--gold-1) 50%, var(--gold-3) 100%);
}
.k-order h3 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800; font-size: 24px;
color: var(--ink-1);
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 2px solid var(--cream-2);
}
.k-order-line {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 11px;
font-size: 15px;
color: var(--ink-2);
}
.k-order-label { font-weight: 600; }
.k-order-value { font-weight: 700; color: var(--ink-1); text-align: right; }
.k-order-value.is-pos { color: var(--success); }
.k-order-total {
display: flex; align-items: baseline; justify-content: space-between;
margin-top: 14px; padding-top: 16px;
border-top: 2px dashed var(--cream-3);
}
.k-order-total-label {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700; font-size: 22px;
color: var(--ink-1);
}
.k-order-total-value {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 900; font-size: 40px;
color: var(--red-2);
letter-spacing: -1px;
}
.k-pay-action {
display: flex;
align-items: stretch;
margin-top: 18px;
}
.k-pay-action > *:not(:last-child) { margin-right: 18px; }
.k-pay-reader-cue {
position: relative;
flex: 0 0 32%;
min-height: 126px;
border-radius: 22px;
overflow: hidden;
background:
-webkit-linear-gradient(135deg, #fffdf7 0%, #f8f2e7 56%, #ead7b2 100%);
background:
linear-gradient(135deg, #fffdf7 0%, #f8f2e7 56%, #ead7b2 100%);
border: 1px solid rgba(211, 151, 44, 0.36);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8), 0 12px 28px rgba(44,12,16,0.12);
}
.k-pay-reader-cue::before {
content: '';
position: absolute;
left: 24px;
bottom: 18px;
width: 118px;
height: 28px;
border-radius: 7px 7px 16px 16px;
background:
-webkit-linear-gradient(180deg, #ffffff 0%, #e6e1d6 100%);
background:
linear-gradient(180deg, #ffffff 0%, #e6e1d6 100%);
box-shadow: 0 13px 22px rgba(44,12,16,0.18);
-webkit-transform: skewX(-17deg);
transform: skewX(-17deg);
}
.k-pay-reader-device {
position: absolute;
left: 42px;
top: 31px;
width: 76px;
height: 84px;
border-radius: 9px;
background:
-webkit-linear-gradient(135deg, #242124 0%, #080607 100%);
background:
linear-gradient(135deg, #242124 0%, #080607 100%);
box-shadow: 0 15px 22px rgba(36,5,8,0.32);
-webkit-transform: skewY(-8deg) rotate(-6deg);
transform: skewY(-8deg) rotate(-6deg);
}
.k-pay-reader-screen {
position: absolute;
left: 9px;
top: 9px;
width: 58px;
height: 55px;
border-radius: 6px;
background:
-webkit-linear-gradient(135deg, #18191d 0%, #040405 100%);
background:
linear-gradient(135deg, #18191d 0%, #040405 100%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.k-pay-reader-light {
position: absolute;
bottom: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #6f6263;
box-shadow: none;
}
.k-pay-reader-light.is-one { left: 24px; }
.k-pay-reader-light.is-two { left: 45px; opacity: 0.65; }
.k-pay-reader-slot {
position: absolute;
left: 14px;
bottom: 21px;
width: 48px;
height: 3px;
border-radius: 999px;
background: rgba(255,255,255,0.18);
}
.k-pay-reader-card {
position: absolute;
right: 18px;
top: 32px;
width: 74px;
height: 48px;
border-radius: 11px;
background:
-webkit-linear-gradient(135deg, #d7202c 0%, #a20d18 100%);
background:
linear-gradient(135deg, #d7202c 0%, #a20d18 100%);
box-shadow: 0 12px 20px rgba(164,13,24,0.25);
-webkit-transform: translateX(0) rotate(0);
transform: translateX(0) rotate(0);
}
.k-pay-reader-card-chip {
position: absolute;
left: 12px;
top: 13px;
width: 18px;
height: 14px;
border-radius: 4px;
background: #f7d678;
}
.k-pay-reader-card-line {
position: absolute;
left: 12px;
height: 3px;
border-radius: 999px;
background: rgba(255,255,255,0.62);
}
.k-pay-reader-card-line.is-one { bottom: 14px; width: 48px; }
.k-pay-reader-card-line.is-two { bottom: 8px; width: 36px; }
.k-pay-reader-wave {
position: absolute;
left: 112px;
top: 34px;
width: 38px;
height: 38px;
border-radius: 50%;
border: 3px solid rgba(199,143,31,0.42);
opacity: 0;
}
.k-pay-action.is-ready .k-pay-reader-card {
-webkit-animation: kpaycardslide 2200ms ease-in-out infinite;
animation: kpaycardslide 2200ms ease-in-out infinite;
}
.k-pay-action.is-ready .k-pay-reader-wave {
-webkit-animation: kpaywave 2200ms ease-out infinite;
animation: kpaywave 2200ms ease-out infinite;
}
.k-pay-reader-wave.is-two {
-webkit-animation-delay: 420ms;
animation-delay: 420ms;
}
@-webkit-keyframes kpaycardslide {
0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); }
45%, 62% { -webkit-transform: translateX(-36px) translateY(18px) rotate(-15deg); transform: translateX(-36px) translateY(18px) rotate(-15deg); }
}
@keyframes kpaycardslide {
0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); }
45%, 62% { -webkit-transform: translateX(-36px) translateY(18px) rotate(-15deg); transform: translateX(-36px) translateY(18px) rotate(-15deg); }
}
@-webkit-keyframes kpaywave {
0%, 42% { opacity: 0; -webkit-transform: scale(0.45); transform: scale(0.45); }
55% { opacity: 1; }
78%, 100% { opacity: 0; -webkit-transform: scale(1.25); transform: scale(1.25); }
}
@keyframes kpaywave {
0%, 42% { opacity: 0; -webkit-transform: scale(0.45); transform: scale(0.45); }
55% { opacity: 1; }
78%, 100% { opacity: 0; -webkit-transform: scale(1.25); transform: scale(1.25); }
}
.k-pay-cta {
position: relative;
overflow: hidden;
flex: 1 1 auto;
width: auto;
min-height: 126px;
height: auto;
padding: 18px 28px;
background: #d9d2c8;
color: #6c5b5d;
border-radius: var(--r-pill);
font-weight: 900;
font-size: 22px;
letter-spacing: 0;
box-shadow: 0 12px 26px rgba(44,12,16,0.12);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
-webkit-transition: -webkit-transform 180ms var(--ease);
transition: transform 180ms var(--ease);
}
.k-pay-cta::after {
content: '';
position: absolute;
top: -30%;
bottom: -30%;
left: -38%;
width: 24%;
background: rgba(255,255,255,0.28);
-webkit-transform: translateX(0) rotate(18deg);
transform: translateX(0) rotate(18deg);
opacity: 0;
}
.k-pay-action.is-ready .k-pay-cta {
background:
-webkit-linear-gradient(180deg, var(--red-3) 0%, var(--red-2) 60%, var(--red-1) 100%);
background:
linear-gradient(180deg, var(--red-3) 0%, var(--red-2) 60%, var(--red-1) 100%);
color: var(--white);
box-shadow: var(--sh-red);
}
.k-pay-action.is-ready .k-pay-cta::after {
-webkit-animation: kpayctashine 2600ms ease-in-out infinite;
animation: kpayctashine 2600ms ease-in-out infinite;
}
.k-pay-action.is-incomplete .k-pay-cta { background: #d9d2c8; color: #6c5b5d; }
.k-pay-action.is-incomplete .k-pay-reader-cue { opacity: 0.72; }
.k-pay-cta-kicker {
position: relative;
z-index: 1;
display: block;
margin-bottom: 8px;
color: #80686b;
font-size: 12px;
line-height: 1;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1.8px;
}
.k-pay-cta-main {
position: relative;
z-index: 1;
display: block;
font-size: 28px;
line-height: 1.12;
}
.k-pay-cta-sub {
position: relative;
z-index: 1;
display: block;
margin-top: 8px;
color: rgba(108,91,93,0.82);
font-size: 14px;
line-height: 1.25;
font-weight: 700;
}
.k-pay-action.is-ready .k-pay-cta-kicker { color: var(--gold-1); }
.k-pay-action.is-ready .k-pay-cta-sub { color: rgba(255,255,255,0.86); }
.k-pay-cta:active { -webkit-transform: scale(0.98); transform: scale(0.98); }
@-webkit-keyframes kpayctashine {
0%, 48% { opacity: 0; -webkit-transform: translateX(0) rotate(18deg); transform: translateX(0) rotate(18deg); }
58% { opacity: 1; }
100% { opacity: 0; -webkit-transform: translateX(650%) rotate(18deg); transform: translateX(650%) rotate(18deg); }
}
@keyframes kpayctashine {
0%, 48% { opacity: 0; -webkit-transform: translateX(0) rotate(18deg); transform: translateX(0) rotate(18deg); }
58% { opacity: 1; }
100% { opacity: 0; -webkit-transform: translateX(650%) rotate(18deg); transform: translateX(650%) rotate(18deg); }
}
.k-pay-note {
margin-top: 14px;
font-size: 13px;
color: var(--ink-soft);
text-align: center;
line-height: 1.5;
}
/* ----- PAYMENT OVERLAY ----------------------------------------- */
.k-pay-overlay {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(26, 6, 8, 0.86);
display: flex; align-items: center; justify-content: center;
z-index: 5000;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 320ms var(--ease), visibility 320ms;
transition: opacity 320ms var(--ease), visibility 320ms;
-webkit-transform: translateZ(0); transform: translateZ(0);
}
.k-pay-overlay.is-on { opacity: 1; visibility: visible; }
.k-pay-card {
background: var(--white);
border-radius: var(--r-card-lg);
padding: 60px 72px 52px 72px;
text-align: center;
/* Wide enough for the "...your card below" title to stay on ONE line. */
max-width: 880px;
box-shadow: 0 40px 80px rgba(0,0,0,0.5);
-webkit-transform: scale(0.92);
transform: scale(0.92);
-webkit-transition: -webkit-transform 380ms var(--spring);
transition: transform 380ms var(--spring);
}
.k-pay-overlay.is-on .k-pay-card { -webkit-transform: scale(1); transform: scale(1); }
.k-pay-icon-wrap {
width: 140px; height: 140px;
margin: 0 auto 32px auto;
border-radius: 50%;
background:
-webkit-linear-gradient(135deg, var(--red-soft) 0%, var(--cream-2) 100%);
background:
linear-gradient(135deg, var(--red-soft) 0%, var(--cream-2) 100%);
display: flex; align-items: center; justify-content: center;
color: var(--red-2);
-webkit-animation: kpulse 1800ms ease-in-out infinite;
animation: kpulse 1800ms ease-in-out infinite;
}
.k-pay-icon { width: 72px; height: 56px; }
@-webkit-keyframes kpulse {
0%, 100% { -webkit-transform: scale(1); box-shadow: 0 0 0 0 rgba(208,35,41,0.32); }
50% { -webkit-transform: scale(1.04); box-shadow: 0 0 0 18px rgba(208,35,41,0); }
}
@keyframes kpulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(208,35,41,0.32); }
50% { transform: scale(1.04); box-shadow: 0 0 0 18px rgba(208,35,41,0); }
}
.k-pay-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800; font-size: 40px;
color: var(--ink-1);
margin-bottom: 14px;
letter-spacing: -0.5px;
white-space: nowrap; /* keep "...your card below" on one line */
}
.k-pay-sub {
font-size: 18px; color: var(--ink-soft);
margin-bottom: 18px;
}
/* Bobbing down-chevron: cues the customer to look DOWN at the physical
reader. Shown by JS only while we're awaiting a tap. */
.k-pay-down {
display: none;
-webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
color: var(--red-2);
margin-bottom: 16px;
-webkit-animation: kpaybob 1100ms ease-in-out infinite;
animation: kpaybob 1100ms ease-in-out infinite;
}
@-webkit-keyframes kpaybob {
0%, 100% { -webkit-transform: translateY(0); }
50% { -webkit-transform: translateY(8px); }
}
@keyframes kpaybob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(8px); }
}
.k-pay-amount {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 900; font-size: 64px;
color: var(--red-2);
letter-spacing: -2px;
margin-bottom: 24px;
}
.k-pay-dots {
display: flex; justify-content: center;
margin-bottom: 28px;
}
.k-pay-dots > *:not(:last-child) { margin-right: 8px; }
.k-pay-dots span {
width: 12px; height: 12px;
border-radius: 50%;
background: var(--red-2);
opacity: 0.3;
-webkit-animation: kdot 1200ms ease-in-out infinite;
animation: kdot 1200ms ease-in-out infinite;
}
.k-pay-dots span:nth-child(2) { -webkit-animation-delay: 200ms; animation-delay: 200ms; }
.k-pay-dots span:nth-child(3) { -webkit-animation-delay: 400ms; animation-delay: 400ms; }
@-webkit-keyframes kdot {
0%, 100% { opacity: 0.3; -webkit-transform: scale(1); }
50% { opacity: 1; -webkit-transform: scale(1.4); }
}
@keyframes kdot {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 1; transform: scale(1.4); }
}
.k-pay-cancel {
padding: 0 36px; height: 56px;
border-radius: var(--r-pill);
background: var(--cream-2);
color: var(--ink-1);
font-weight: 700; font-size: 16px;
letter-spacing: 0.8px;
}
/* ----- SUCCESS SCREEN ----------------------------------------- */
.k-success {
max-width: 920px;
margin: 18px auto 0 auto;
text-align: left;
}
.k-success-hero {
position: relative;
display: flex;
align-items: center;
padding: 28px 34px;
margin-bottom: 22px;
border-radius: var(--r-card-lg);
background:
-webkit-radial-gradient(ellipse 80% 140% at 12% 0%, rgba(255, 235, 174, 0.48), transparent 62%),
-webkit-linear-gradient(135deg, #FFFDF7 0%, var(--cream-1) 52%, #F4E2B0 100%);
background:
radial-gradient(ellipse 80% 140% at 12% 0%, rgba(255, 235, 174, 0.48), transparent 62%),
linear-gradient(135deg, #FFFDF7 0%, var(--cream-1) 52%, #F4E2B0 100%);
border: 1px solid rgba(201, 144, 48, 0.42);
box-shadow: var(--sh-3);
overflow: hidden;
}
.k-success-hero::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background:
-webkit-radial-gradient(ellipse 58% 110% at 78% 46%, rgba(232, 181, 71, 0.22), transparent 66%);
background:
radial-gradient(ellipse 58% 110% at 78% 46%, rgba(232, 181, 71, 0.22), transparent 66%);
pointer-events: none;
}
.k-success-check {
position: relative;
flex: 0 0 148px;
width: 148px; height: 148px;
margin-right: 30px;
border-radius: 50%;
background:
-webkit-radial-gradient(circle at 34% 26%, #FFF8D6 0%, #FFE08A 28%, #E8B547 62%, #B8791D 100%);
background:
radial-gradient(circle at 34% 26%, #FFF8D6 0%, #FFE08A 28%, #E8B547 62%, #B8791D 100%);
color: var(--red-deep);
display: flex; align-items: center; justify-content: center;
box-shadow:
0 18px 38px rgba(201, 144, 48, 0.42),
0 0 0 8px rgba(255, 255, 255, 0.80),
0 0 0 11px rgba(232, 181, 71, 0.36),
inset 0 2px 6px rgba(255, 255, 255, 0.62),
inset 0 -5px 12px rgba(120, 68, 10, 0.25);
-webkit-animation: kpop 560ms var(--spring) both;
animation: kpop 560ms var(--spring) both;
z-index: 1;
}
.k-success-check::after {
content: '';
position: absolute;
top: 12px; left: 24px;
width: 42px; height: 18px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.56);
-webkit-transform: rotate(-24deg);
transform: rotate(-24deg);
}
.k-success-check .k-icon { width: 84px; height: 84px; }
.k-success-check .k-icon svg { stroke-width: 3.2; }
@-webkit-keyframes kpop {
from { opacity: 0; -webkit-transform: scale(0.5); }
to { opacity: 1; -webkit-transform: scale(1); }
}
@keyframes kpop {
from { opacity: 0; transform: scale(0.5); }
to { opacity: 1; transform: scale(1); }
}
.k-success-copy {
position: relative;
min-width: 0;
z-index: 1;
}
.k-success-eyebrow {
font-size: 14px;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--red-2);
margin-bottom: 8px;
}
.k-success-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 900; font-size: 66px;
color: var(--red-deep);
display: inline-block;
background:
-webkit-linear-gradient(left, var(--ink-1) 0%, var(--red-deep) 46%, var(--red-2) 100%);
background:
linear-gradient(90deg, var(--ink-1) 0%, var(--red-deep) 46%, var(--red-2) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 6px;
padding-bottom: 8px;
letter-spacing: 0;
line-height: 1.12;
}
.k-success-sub {
font-size: 21px; color: var(--ink-soft);
margin: 0;
line-height: 1.42;
}
.k-success-sub strong { color: var(--ink-1); }
.k-success-ticket {
position: relative;
background: var(--white);
border-radius: var(--r-card-lg);
box-shadow: var(--sh-3);
overflow: hidden;
margin-bottom: 20px;
}
.k-success-ticket-head {
position: relative;
background:
-webkit-radial-gradient(ellipse 90% 120% at 18% 12%, rgba(255, 220, 170, 0.18), transparent 62%),
-webkit-linear-gradient(135deg, var(--red-deep) 0%, var(--red-2) 100%);
background:
radial-gradient(ellipse 90% 120% at 18% 12%, rgba(255, 220, 170, 0.18), transparent 62%),
linear-gradient(135deg, var(--red-deep) 0%, var(--red-2) 100%);
padding: 24px 30px;
color: var(--white);
}
.k-success-show {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 900; font-size: 40px;
line-height: 1.05;
letter-spacing: 0;
margin-bottom: 6px;
}
.k-success-venue {
font-size: 18px;
line-height: 1.25;
color: rgba(255, 255, 255, 0.92);
}
.k-success-details {
display: flex;
flex-wrap: wrap;
padding: 18px 20px 14px 20px;
margin: -6px;
}
.k-success-detail {
width: calc(50% - 12px);
min-height: 112px;
margin: 6px;
padding: 18px 20px;
box-sizing: border-box;
border-radius: 16px;
background:
-webkit-linear-gradient(top, #FFFDF8 0%, var(--cream-1) 100%);
background:
linear-gradient(180deg, #FFFDF8 0%, var(--cream-1) 100%);
border: 1px solid rgba(201, 144, 48, 0.28);
}
.k-success-detail.is-wide { width: calc(100% - 12px); min-height: 96px; }
.k-success-detail-label {
font-size: 13px;
font-weight: 900;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--red-2);
margin-bottom: 8px;
}
.k-success-detail-value {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 900;
font-size: 36px;
line-height: 1.08;
letter-spacing: 0;
color: var(--ink-1);
word-wrap: break-word;
}
.k-success-detail-sub {
margin-top: 6px;
font-size: 16px;
font-weight: 700;
line-height: 1.25;
color: var(--ink-soft);
}
.k-success-detail.is-paid .k-success-detail-value { color: var(--red-2); }
.k-success-payment {
display: flex;
align-items: flex-start;
padding: 0 28px 22px 28px;
}
.k-success-payment-label {
flex: 0 0 auto;
margin-right: 16px;
font-size: 12px;
font-weight: 900;
letter-spacing: 1.7px;
text-transform: uppercase;
color: var(--ink-soft);
}
.k-success-payment-value {
min-width: 0;
font-family: monospace;
font-size: 15px;
line-height: 1.35;
color: var(--ink-1);
word-wrap: break-word;
}
.k-passport-stamp-card {
display: flex;
align-items: center;
text-align: left;
background: var(--cream-1);
border: 2px dashed rgba(184, 28, 32, 0.28);
border-radius: var(--r-card-lg);
padding: 18px 22px;
margin: 0 0 18px 0;
box-shadow: var(--sh-1);
}
.k-passport-stamp-mark {
flex: 0 0 170px;
width: 170px;
height: 118px;
border: 4px solid var(--red-2);
border-radius: 18px;
color: var(--red-2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
background: rgba(255, 255, 255, 0.62);
}
.k-passport-stamp-mark.has-artwork {
box-sizing: border-box;
border: 1px solid rgba(201, 144, 48, 0.30);
background: var(--white);
width: 210px;
height: 148px;
padding: 10px 12px;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.92),
0 6px 14px rgba(43, 18, 20, 0.10);
}
.k-passport-stamp-art {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.k-passport-stamp-mark .k-icon { width: 32px; height: 32px; margin-bottom: 8px; }
.k-passport-stamp-show {
max-width: 136px;
font-size: 13px;
font-weight: 900;
letter-spacing: 1.2px;
line-height: 1.15;
text-align: center;
text-transform: uppercase;
word-wrap: break-word;
}
.k-passport-stamp-copy {
min-width: 0;
padding-left: 24px;
}
.k-passport-stamp-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 900;
font-size: 28px;
color: var(--ink-1);
margin-bottom: 4px;
}
.k-passport-stamp-copy p {
margin: 0;
font-size: 16px;
line-height: 1.45;
color: var(--ink-soft);
}
.k-success-countdown {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 66px;
margin: -4px 0 22px 0;
border-radius: var(--r-card-lg);
background:
-webkit-linear-gradient(left, rgba(26, 6, 8, 0.92) 0%, rgba(74, 10, 12, 0.94) 100%);
background:
linear-gradient(90deg, rgba(26, 6, 8, 0.92) 0%, rgba(74, 10, 12, 0.94) 100%);
color: var(--cream-1);
font-size: 18px;
font-weight: 800;
box-shadow:
0 10px 24px rgba(26, 6, 8, 0.18),
inset 0 0 0 1px rgba(232, 181, 71, 0.28);
}
.k-success-countdown .k-icon {
width: 22px; height: 22px;
margin-right: 10px;
color: var(--gold-1);
}
.k-success-countdown strong {
min-width: 32px;
margin: 0 5px;
color: var(--gold-1);
font-size: 30px;
line-height: 1;
text-align: center;
}
.k-success-actions {
display: block;
margin-top: 34px;
width: 100%;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.k-success-action-row {
display: flex;
align-items: center;
justify-content: center;
}
.k-success-action-row:not(:last-child) { margin-bottom: 16px; }
.k-success-action-row.is-receipts .k-btn {
flex: 1 1 0;
min-width: 0;
}
.k-success-action-row.is-receipts .k-btn:not(:last-child) {
margin-right: 16px;
}
.k-success-action-row.is-primary .k-btn {
width: 100%;
}
.k-success-actions .k-btn {
min-height: 92px;
padding: 0 42px;
font-size: 23px;
box-sizing: border-box;
}
.k-success-action-row.is-primary .k-btn {
min-height: 106px;
font-size: 25px;
}
/* ----- Misc utility -------------------------------------------- */
.k-flash {
position: fixed;
top: 32px; left: 50%;
-webkit-transform: translateX(-50%); transform: translateX(-50%);
background: var(--ink-1);
color: var(--white);
padding: 14px 24px;
border-radius: var(--r-pill);
box-shadow: var(--sh-3);
z-index: 9000;
opacity: 0;
-webkit-transition: opacity 240ms ease;
transition: opacity 240ms ease;
pointer-events: none;
}
.k-flash.is-on { opacity: 1; }
.k-flash.is-error { background: var(--red-2); }
.k-spinner-inline {
display: inline-block;
width: 18px; height: 18px;
border: 3px solid rgba(255,255,255,0.32);
border-top-color: currentColor;
border-radius: 50%;
vertical-align: middle;
-webkit-animation: kspin2 900ms linear infinite;
animation: kspin2 900ms linear infinite;
}
@-webkit-keyframes kspin2 { to { -webkit-transform: rotate(360deg); } }
@keyframes kspin2 { to { transform: rotate(360deg); } }
/* =================================================================
SHOW PAGE - additional treatments (2026-05-27)
Age chip in hero meta, trailer CTA + overlay, gallery lightbox,
creative-team + awards blocks, calendar polish.
================================================================= */
/* Age guidance chip - distinguished from genre/venue with a gold tint
so the audience sees the rating before the runtime. */
.k-hero-meta-age {
background:
-webkit-linear-gradient(180deg, rgba(232, 181, 71, 0.32) 0%, rgba(232, 181, 71, 0.12) 100%) !important;
background:
linear-gradient(180deg, rgba(232, 181, 71, 0.32) 0%, rgba(232, 181, 71, 0.12) 100%) !important;
border-color: rgba(244, 226, 176, 0.55) !important;
color: var(--gold-1) !important;
}
/* Trailer CTA on the hero - dark glass pill sitting upper-right of the
hero image. 2026-05-27 v2: shine sweep moved from the gold disc to
the whole pill so the gold border catches the light at the same
moment. Pill ~10% bigger overall. */
.k-hero-trailer {
position: absolute;
top: 28px;
right: 28px;
z-index: 6;
display: flex;
align-items: center;
min-height: 56px;
padding: 10px 22px 10px 14px;
background: rgba(0, 0, 0, 0.60);
color: var(--cream-1);
border: 1.5px solid rgba(244, 226, 176, 0.55);
border-radius: var(--r-pill);
box-shadow:
0 10px 26px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(255, 200, 96, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.14);
-webkit-transition: -webkit-transform 160ms var(--ease);
transition: transform 160ms var(--ease);
overflow: hidden; /* clip the sweep at the pill edge */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.k-hero-trailer:active { -webkit-transform: scale(0.97); transform: scale(0.97); }
/* Full-pill shine sweep - travels left-to-right across the WHOLE
button (disc + gold border), so the border catches the light at
the same instant. The disc keeps its metallic gradient + glow
underneath, no longer sweeps independently. */
.k-hero-trailer::before {
content: '';
position: absolute;
top: 0; bottom: 0;
left: -50%;
width: 45%;
background:
-webkit-linear-gradient(90deg,
transparent 0%,
rgba(255, 230, 160, 0.0) 10%,
rgba(255, 230, 160, 0.55) 50%,
rgba(255, 230, 160, 0.0) 90%,
transparent 100%);
background:
linear-gradient(90deg,
transparent 0%,
rgba(255, 230, 160, 0.0) 10%,
rgba(255, 230, 160, 0.55) 50%,
rgba(255, 230, 160, 0.0) 90%,
transparent 100%);
-webkit-transform: skewX(-22deg);
transform: skewX(-22deg);
-webkit-animation: kpillsweep 3400ms ease-in-out infinite;
animation: kpillsweep 3400ms ease-in-out infinite;
pointer-events: none;
z-index: 3;
}
@-webkit-keyframes kpillsweep {
0%, 50% { -webkit-transform: translateX(0) skewX(-22deg); }
100% { -webkit-transform: translateX(360%) skewX(-22deg); }
}
@keyframes kpillsweep {
0%, 50% { transform: translateX(0) skewX(-22deg); }
100% { transform: translateX(360%) skewX(-22deg); }
}
.k-hero-trailer-icon {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
margin-right: 11px;
border-radius: 50%;
background:
-webkit-linear-gradient(135deg, #FFE08A 0%, #E8B547 38%, #C99030 70%, #8E5A18 100%);
background:
linear-gradient(135deg, #FFE08A 0%, #E8B547 38%, #C99030 70%, #8E5A18 100%);
color: #2B1606;
box-shadow:
0 0 16px rgba(255, 200, 96, 0.70),
inset 0 2px 3px rgba(255, 255, 255, 0.55),
inset 0 -2px 4px rgba(110, 60, 8, 0.45);
z-index: 2;
overflow: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.k-hero-trailer-icon .k-icon { width: 13px; height: 13px; margin-left: 2px; position: relative; z-index: 2; }
/* Disc-only shine - faster sweep on the gold play disc itself, on top
of the slower whole-pill sweep. Two layers, offset, so the eye reads
the disc as polished metal catching light from two angles. */
.k-hero-trailer-icon::after {
content: '';
position: absolute;
top: 0; bottom: 0;
left: -70%;
width: 70%;
background:
-webkit-linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.80) 50%, transparent 100%);
background:
linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.80) 50%, transparent 100%);
-webkit-transform: skewX(-22deg);
transform: skewX(-22deg);
-webkit-animation: kgoldsweep 2600ms ease-in-out infinite 800ms;
animation: kgoldsweep 2600ms ease-in-out infinite 800ms;
pointer-events: none;
z-index: 1;
}
@-webkit-keyframes kgoldsweep {
0%, 55% { -webkit-transform: translateX(0) skewX(-22deg); opacity: 0.95; }
100% { -webkit-transform: translateX(280%) skewX(-22deg); opacity: 0.95; }
}
@keyframes kgoldsweep {
0%, 55% { transform: translateX(0) skewX(-22deg); opacity: 0.95; }
100% { transform: translateX(280%) skewX(-22deg); opacity: 0.95; }
}
.k-hero-trailer-label {
font-family: Inter, sans-serif;
font-weight: 800;
font-size: 13px;
line-height: 1;
letter-spacing: 1.3px;
text-transform: uppercase;
position: relative;
z-index: 2;
}
/* Mini 2:3 poster card in hero content - sits between the eyebrow tag
and the show title. Preserves the original poster artwork (no crop),
gold-framed, soft drop shadow. Replaces the earlier circular dot. */
.k-hero-postermini {
width: 64px;
height: 96px;
border-radius: 10px;
overflow: hidden;
border: 1.5px solid rgba(244, 226, 176, 0.45);
box-shadow:
0 8px 18px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(0, 0, 0, 0.35),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
margin-bottom: 14px;
background: rgba(0, 0, 0, 0.35);
}
.k-hero-postermini img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Hero actions row - meta chips on the left, Book Now on the right,
both at the bottom of the hero content area. The chips can wrap
among themselves (they have their own flex-wrap inside k-hero-meta)
but the actions row itself does NOT wrap, so Book Now never drops
to a new line below the chips. Button shrinks last via flex-shrink:0. */
.k-hero-actions {
display: flex;
align-items: flex-end; /* chip-bottoms align with button-bottom */
flex-wrap: nowrap;
width: 100%;
margin-top: 8px;
}
.k-hero-actions .k-hero-meta {
margin-bottom: 0;
flex: 1 1 auto;
min-width: 0; /* lets the meta block actually shrink */
}
.k-hero-actions .k-hero-booknow {
margin-left: 24px;
flex-shrink: 0;
}
/* Book Now CTA - inline flex child of the actions row (no longer
absolutely positioned). Bigger and louder than the previous version:
carries the same red gradient as the Continue button so the customer
reads "this is the booking action", plus a metallic shine sweep AND
a gentle attention pulse so the eye lands here after reading the
show name. */
.k-hero-booknow {
position: relative;
z-index: 6;
display: inline-flex;
align-items: center;
min-height: 72px;
box-sizing: border-box;
padding: 20px 36px;
border-radius: var(--r-pill);
background:
-webkit-linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
background:
linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
color: var(--white);
font-family: Inter, sans-serif;
font-weight: 800;
font-size: 18px;
letter-spacing: 1.6px;
text-transform: uppercase;
box-shadow:
0 14px 32px rgba(196, 38, 46, 0.52),
0 0 0 1px rgba(255, 200, 96, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
-webkit-transition: -webkit-transform 160ms var(--ease),
box-shadow 220ms ease;
transition: transform 160ms var(--ease),
box-shadow 220ms ease;
overflow: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
/* Attention pulse animates ONLY the box-shadow halo - the button
itself never scales, so the text + gradient stay pixel-crisp.
The expanding red glow + gold ring make the button feel like
it's breathing without the bilinear-resample blur that comes
with transform: scale() on a layer with text. */
-webkit-animation: kbookpulse 2600ms ease-in-out infinite;
animation: kbookpulse 2600ms ease-in-out infinite;
}
@-webkit-keyframes kbookpulse {
0%, 100% { box-shadow: 0 14px 32px rgba(196, 38, 46, 0.52), 0 0 0 1px rgba(255, 200, 96, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
50% { box-shadow: 0 22px 48px rgba(196, 38, 46, 0.72), 0 0 0 2px rgba(255, 200, 96, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
}
@keyframes kbookpulse {
0%, 100% { box-shadow: 0 14px 32px rgba(196, 38, 46, 0.52), 0 0 0 1px rgba(255, 200, 96, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
50% { box-shadow: 0 22px 48px rgba(196, 38, 46, 0.72), 0 0 0 2px rgba(255, 200, 96, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
}
/* Same gold-sweep shine as the trailer pill, offset in time so the
two CTAs don't sync up and feel mechanical. */
.k-hero-booknow::before {
content: '';
position: absolute;
top: 0; bottom: 0;
left: -50%;
width: 45%;
background:
-webkit-linear-gradient(90deg,
transparent 0%,
rgba(255, 230, 160, 0.0) 10%,
rgba(255, 230, 160, 0.50) 50%,
rgba(255, 230, 160, 0.0) 90%,
transparent 100%);
background:
linear-gradient(90deg,
transparent 0%,
rgba(255, 230, 160, 0.0) 10%,
rgba(255, 230, 160, 0.50) 50%,
rgba(255, 230, 160, 0.0) 90%,
transparent 100%);
-webkit-transform: skewX(-22deg);
transform: skewX(-22deg);
-webkit-animation: kpillsweep 3400ms ease-in-out infinite 1700ms;
animation: kpillsweep 3400ms ease-in-out infinite 1700ms;
pointer-events: none;
z-index: 1;
}
.k-hero-booknow:active {
-webkit-animation: none;
animation: none;
-webkit-transform: scale(0.97);
transform: scale(0.97);
box-shadow:
0 6px 14px rgba(196, 38, 46, 0.48),
0 0 0 1px rgba(255, 200, 96, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.k-hero-booknow-label {
position: relative;
z-index: 2;
line-height: 1;
}
.k-hero-booknow-arrow {
margin-left: 12px;
width: 20px;
height: 20px;
position: relative;
z-index: 2;
}
.k-hero-booknow-arrow .k-icon { width: 100%; height: 100%; }
/* Trailer overlay - black backdrop, 16:9 iframe in a rounded card. */
.k-trailer-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 9500;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 220ms ease;
transition: opacity 220ms ease;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.k-trailer-overlay.is-on { opacity: 1; visibility: visible; }
.k-trailer-card {
background: var(--ink-1);
border-radius: var(--r-card-lg);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
width: 100%;
max-width: 960px;
overflow: hidden;
border: 1px solid rgba(244, 226, 176, 0.18);
}
.k-trailer-head {
display: flex; align-items: center;
padding: 16px 22px;
background: #0d0608;
border-bottom: 1px solid rgba(244, 226, 176, 0.12);
}
.k-trailer-title {
flex: 1 1 auto;
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 22px;
color: var(--cream-1);
}
.k-trailer-close {
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: var(--cream-1);
display: flex; align-items: center; justify-content: center;
}
.k-trailer-close .k-icon { width: 22px; height: 22px; }
.k-trailer-frame {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 - aspect-ratio not in Cr56 */
background: #000;
}
.k-trailer-frame iframe {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Contained external page overlay for allowed third-party pages.
Square receipts use the native receipt panel below because Square blocks iframes. */
.k-external-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(26, 6, 8, 0.92);
z-index: 9600;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 220ms ease;
transition: opacity 220ms ease;
display: flex;
align-items: center;
justify-content: center;
padding: 28px;
}
.k-external-overlay.is-on { opacity: 1; visibility: visible; }
.k-external-card {
width: 100%;
max-width: 980px;
height: 86vh;
background: var(--cream-1);
border-radius: var(--r-card-lg);
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.58);
overflow: hidden;
border: 1px solid rgba(244, 226, 176, 0.38);
display: flex;
flex-direction: column;
}
.k-external-head {
flex: 0 0 auto;
display: flex;
align-items: center;
padding: 16px 20px;
background:
-webkit-linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
background:
linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
border-bottom: 1px solid rgba(244, 226, 176, 0.22);
}
.k-external-title {
flex: 1 1 auto;
min-width: 0;
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800;
font-size: 28px;
color: var(--white);
}
.k-external-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.k-external-actions > *:not(:last-child) { margin-right: 12px; }
.k-external-email {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 170px;
height: 54px;
padding: 0 24px;
border-radius: var(--r-pill);
background: var(--white);
color: var(--red-deep);
font-family: Inter, sans-serif;
font-size: 16px;
font-weight: 800;
box-shadow: 0 12px 28px rgba(26, 6, 8, 0.18);
}
.k-external-email[disabled] {
opacity: 0.52;
pointer-events: none;
}
.k-external-close {
flex: 0 0 auto;
width: 54px; height: 54px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
color: var(--white);
display: flex; align-items: center; justify-content: center;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}
.k-external-close .k-icon { width: 26px; height: 26px; }
.k-external-frame {
position: relative;
flex: 1 1 auto;
min-height: 0;
background: var(--white);
}
.k-external-frame iframe {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%;
height: 100%;
border: 0;
background: var(--white);
}
/* Square receipt panel. The server fetches Square's hosted receipt HTML and
returns a script-free document so the kiosk can show it without navigating
away from Broadway Passport. */
.k-receipt-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 9700;
background: rgba(26, 6, 8, 0.88);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 220ms ease;
transition: opacity 220ms ease;
display: flex;
align-items: center;
justify-content: center;
padding: 34px;
}
.k-receipt-overlay.is-on { opacity: 1; visibility: visible; }
.k-receipt-card {
width: 100%;
max-width: 930px;
max-height: calc(100vh - 68px);
background: var(--cream-1);
border: 1px solid rgba(244, 210, 132, 0.62);
border-radius: var(--r-card-lg);
box-shadow: 0 34px 100px rgba(0, 0, 0, 0.52);
overflow: hidden;
display: flex;
flex-direction: column;
}
.k-receipt-head {
display: flex;
align-items: center;
padding: 24px 28px;
background:
-webkit-linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
background:
linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
color: var(--white);
}
.k-receipt-title-wrap {
flex: 1 1 auto;
min-width: 0;
}
.k-receipt-eyebrow {
font-family: Inter, sans-serif;
font-weight: 900;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--gold-2);
}
.k-receipt-title {
margin-top: 6px;
font-family: 'Playfair Display', Georgia, serif;
font-size: 42px;
line-height: 1;
font-weight: 900;
}
.k-receipt-close {
flex: 0 0 auto;
width: 62px;
height: 62px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}
.k-receipt-close .k-icon { width: 28px; height: 28px; }
.k-receipt-body {
padding: 18px;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.k-square-receipt-frame-wrap {
height: 61vh;
min-height: 520px;
border-radius: var(--r-card);
overflow: hidden;
background: #f7f7f7;
border: 1px solid rgba(244, 210, 132, 0.62);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}
.k-square-receipt-frame {
display: block;
width: 100%;
height: 100%;
border: 0;
background: #f7f7f7;
}
.k-square-receipt-loading {
min-height: 520px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: var(--r-card);
background: var(--white);
border: 1px solid rgba(244, 210, 132, 0.76);
}
.k-square-receipt-loading-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 30px;
font-weight: 900;
color: var(--ink);
}
.k-receipt-status {
display: flex;
align-items: center;
padding: 20px;
border-radius: var(--r-card);
background: var(--white);
border: 1px solid rgba(244, 210, 132, 0.76);
box-shadow: 0 14px 34px rgba(66, 38, 18, 0.08);
}
.k-receipt-status.is-error {
border-color: rgba(199, 30, 45, 0.36);
}
.k-receipt-status-icon {
flex: 0 0 auto;
width: 58px;
height: 58px;
border-radius: 50%;
background: var(--gold-2);
color: var(--red-deep);
display: flex;
align-items: center;
justify-content: center;
margin-right: 18px;
box-shadow: 0 10px 26px rgba(208, 154, 37, 0.24);
}
.k-receipt-status-icon .k-icon { width: 30px; height: 30px; }
.k-receipt-status-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 30px;
font-weight: 900;
color: var(--ink);
}
.k-receipt-status-copy p {
margin: 5px 0 0;
font-family: Inter, sans-serif;
font-size: 16px;
line-height: 1.45;
color: var(--muted);
}
.k-receipt-summary {
display: flex;
align-items: stretch;
margin-top: 18px;
border-radius: var(--r-card);
overflow: hidden;
border: 1px solid rgba(244, 210, 132, 0.66);
background: var(--white);
}
.k-receipt-show {
flex: 1 1 auto;
min-width: 0;
padding: 22px;
}
.k-receipt-show-name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 34px;
line-height: 1.05;
font-weight: 900;
color: var(--ink);
}
.k-receipt-show-meta {
margin-top: 7px;
font-family: Inter, sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--muted);
}
.k-receipt-amount {
flex: 0 0 auto;
min-width: 190px;
padding: 22px 24px;
background: #fff7df;
border-left: 1px solid rgba(244, 210, 132, 0.78);
display: flex;
flex-direction: column;
justify-content: center;
text-align: right;
}
.k-receipt-amount span {
font-family: Inter, sans-serif;
font-size: 13px;
font-weight: 900;
letter-spacing: 1.7px;
text-transform: uppercase;
color: var(--red-2);
}
.k-receipt-amount strong {
margin-top: 4px;
font-family: 'Playfair Display', Georgia, serif;
font-size: 36px;
line-height: 1;
color: var(--red-2);
}
.k-receipt-grid {
display: flex;
flex-wrap: wrap;
margin: 10px -8px -8px;
}
.k-receipt-field {
box-sizing: border-box;
width: calc(50% - 16px);
margin: 8px;
min-height: 84px;
padding: 16px 18px;
border-radius: var(--r-card);
background: var(--cream-2);
border: 1px solid rgba(244, 210, 132, 0.68);
}
.k-receipt-field-label {
display: block;
font-family: Inter, sans-serif;
font-size: 12px;
font-weight: 900;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--red-2);
}
.k-receipt-field-value {
display: block;
margin-top: 9px;
font-family: Inter, sans-serif;
font-size: 19px;
line-height: 1.22;
font-weight: 900;
color: var(--ink);
word-break: break-word;
}
.k-receipt-loading {
margin-top: 20px;
text-align: center;
}
.k-receipt-loading span {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
border-radius: 50%;
background: var(--gold-2);
-webkit-animation: kpulse 900ms ease-in-out infinite;
animation: kpulse 900ms ease-in-out infinite;
}
.k-receipt-loading span:nth-child(2) {
-webkit-animation-delay: 120ms;
animation-delay: 120ms;
}
.k-receipt-loading span:nth-child(3) {
-webkit-animation-delay: 240ms;
animation-delay: 240ms;
}
.k-receipt-actions {
display: flex;
flex: 0 0 auto;
padding: 0 18px 18px;
}
.k-receipt-actions .k-btn {
flex: 1 1 0;
min-height: 76px;
font-size: 21px;
}
.k-receipt-actions .k-btn:not(:last-child) {
margin-right: 16px;
}
/* Gallery lightbox - full-screen black backdrop, big image, chevron nav. */
/* Legacy .k-gallery-item / .k-gallery-expand removed - the v4 photos
carousel uses .k-pg-stage + .k-pg-track and the View-all modal uses
.k-cm-photo-grid / .k-cm-photo-tile. */
.k-lb-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(8, 4, 6, 0.97);
z-index: 9600;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 220ms ease;
transition: opacity 220ms ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px;
}
.k-lb-overlay.is-on { opacity: 1; visibility: visible; }
.k-lb-stage {
flex: 1 1 auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.k-lb-img {
max-width: 100%;
max-height: 80vh;
display: block;
border-radius: var(--r-card);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.k-lb-caption {
margin-top: 18px;
color: var(--cream-1);
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: 18px;
text-align: center;
max-width: 720px;
}
.k-lb-counter {
position: absolute;
top: 24px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
color: var(--cream-1);
font-family: Inter, sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.6px;
padding: 6px 14px;
background: rgba(255, 255, 255, 0.10);
border-radius: var(--r-pill);
border: 1px solid rgba(244, 226, 176, 0.20);
}
.k-lb-close {
position: absolute;
top: 24px;
right: 24px;
width: 52px; height: 52px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: var(--cream-1);
display: flex; align-items: center; justify-content: center;
}
.k-lb-close .k-icon { width: 24px; height: 24px; }
.k-lb-nav {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 64px; height: 64px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
color: var(--cream-1);
display: flex; align-items: center; justify-content: center;
border: 1px solid rgba(244, 226, 176, 0.24);
}
.k-lb-nav .k-icon { width: 28px; height: 28px; }
.k-lb-prev { left: 24px; }
.k-lb-next { right: 24px; }
/* Cast block - leads listed first, ensemble in a compact line. *//* Legacy .k-about-cast-block + .k-cast-* + .k-credits wrappers removed -
the v4 layout uses .k-card-cast and .k-card-credits which live in
.k-detail-card sleeves earlier in this file. *//* Legacy .k-credits-row rules removed 2026-05-27 - they were sized
for a horizontal row layout, but the refactor moved Credits into a
flex-direction:column row. The leftover `flex: 0 0 130px` was
forcing labels to be 130px TALL in column mode, producing huge
vertical gaps. The current .k-card-credits .k-credits-row
ruleset (earlier in the file) is the only source of truth now. *//* Awards - cream chips with a gold trophy icon and an emphasized "won" state.
The .k-awards wrapper is no longer used; .k-awards-list and .k-award
below still ship inside k-card-awards / k-card-merged. */
.k-award {
display: inline-flex;
align-items: center;
padding: 10px 16px;
margin: 0 8px 8px 0;
border-radius: var(--r-pill);
background: var(--cream-1);
border: 1px solid var(--cream-3);
font-family: Inter, sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--ink-2);
}
.k-award.is-won {
background:
-webkit-linear-gradient(180deg, rgba(232, 181, 71, 0.18) 0%, rgba(232, 181, 71, 0.05) 100%);
background:
linear-gradient(180deg, rgba(232, 181, 71, 0.18) 0%, rgba(232, 181, 71, 0.05) 100%);
border-color: rgba(232, 181, 71, 0.55);
color: var(--ink-1);
}
/* k-about-quotes-more + k-about-quote-lead removed - the v4 critics
card swaps a single quote in place; modal lists handle the rest. */
/* k-info-* block removed - age + accessibility info is now rendered
inside k-card-gtk / k-gtk-rows on the show page. */
/* Calendar refinements - reshape the inner cell so day-of-month sits
above an optional "N shows" pill. Today gets a gold ring. */
.k-cal-cell-inner {
flex-direction: column;
line-height: 1.1;
padding: 6px 4px;
}
.k-cal-cell-day {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 28px;
line-height: 1;
}
.k-cal-cell-count {
margin-top: 5px;
font-family: Inter, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
}
/* (is-today / is-selected cell styling lives in the calendar block in
70-modals.css so the whole state cascade resolves in one place) */
.k-cal-legend {
display: flex;
flex-wrap: wrap;
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed rgba(26, 6, 8, 0.10);
}
.k-cal-legend-item {
display: inline-flex;
align-items: center;
margin-right: 22px;
font-family: Inter, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--ink-soft);
}
.k-cal-legend-dot {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 4px;
margin-right: 8px;
}
.k-cal-legend-dot-available {
background: var(--white);
box-shadow: inset 0 0 0 1px rgba(201, 144, 48, 0.45), 0 1px 3px rgba(26, 6, 8, 0.14);
}
.k-cal-legend-dot-selected {
background:
-webkit-linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
background:
linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
box-shadow: inset 0 0 0 1.5px var(--gold-1);
}
.k-cal-legend-dot-today {
background: var(--white);
box-shadow: 0 0 0 2px var(--gold-1) inset;
}
/* =================================================================
KIOSK TOUCH KEYBOARD
Local SPA keyboard for Samsung/Tizen where the native keyboard is
too small for walk-up customers. Chromium 56 safe: no gap, no modern
selectors, no backdrop-filter, no CSS variables beyond existing tokens.
================================================================= */
.k-body.has-k-touch-keyboard .k-stage {
padding-bottom: 735px;
}
.k-touch-keyboard {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 9300;
background: rgba(255, 255, 255, 0.98);
box-shadow:
0 -22px 48px rgba(26, 6, 8, 0.24),
inset 0 1px 0 rgba(232, 181, 71, 0.50);
padding: 20px 26px 30px 26px;
-webkit-transform: translateY(105%);
transform: translateY(105%);
-webkit-transition: -webkit-transform 220ms var(--ease);
transition: transform 220ms var(--ease);
}
.k-touch-keyboard.is-on {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.k-touch-keyboard-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.k-touch-keyboard-title {
min-width: 0;
font-size: 18px;
font-weight: 900;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--red-2);
}
.k-touch-keyboard-shortcuts {
display: none;
flex: 0 0 auto;
}
.k-touch-keyboard-shortcuts.is-on {
display: flex;
}
.k-touch-keyboard-shortcuts .k-touch-key {
height: 62px;
min-width: 198px;
margin-left: 8px;
margin-right: 0;
border-radius: var(--r-pill);
}
.k-touch-keyboard-preview {
display: block;
height: 76px;
line-height: 76px;
max-width: 980px;
margin: 0 auto 16px auto;
padding: 0 28px;
border-radius: var(--r-pill);
background: var(--white);
color: var(--ink-1);
font-size: 24px;
font-weight: 800;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow:
inset 0 0 0 1px rgba(201, 144, 48, 0.34),
0 6px 16px rgba(26, 6, 8, 0.10);
}
.k-touch-keyboard-preview.is-empty {
color: transparent;
}
.k-touch-keyboard-close {
flex: 0 0 auto;
height: 68px;
padding: 0 34px;
border-radius: var(--r-pill);
background: var(--ink-1);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: 0 8px 18px rgba(26, 6, 8, 0.18);
}
.k-touch-keyboard-close .k-icon {
width: 24px;
height: 24px;
margin-right: 10px;
}
.k-touch-keyboard-row {
display: flex;
justify-content: center;
margin: 0 auto 12px auto;
max-width: 1000px;
}
.k-touch-keyboard-row.is-main-row {
width: 1000px;
}
.k-touch-keyboard-row.is-utility-row {
width: 1000px;
}
.k-touch-key {
flex: 0 0 auto;
width: 92px;
min-width: 92px;
height: 100px;
margin: 0 4px;
border-radius: 18px;
background: var(--white);
color: var(--ink-1);
display: flex;
align-items: center;
justify-content: center;
font-size: 35px;
font-weight: 900;
line-height: 1;
box-shadow:
inset 0 0 0 1px rgba(201, 144, 48, 0.38),
0 7px 16px rgba(26, 6, 8, 0.12);
-webkit-transition: -webkit-transform 120ms var(--ease), background 120ms var(--ease);
transition: transform 120ms var(--ease), background 120ms var(--ease);
}
.k-touch-key:active {
-webkit-transform: scale(0.94);
transform: scale(0.94);
background: var(--cream-2);
}
.k-key-label {
display: block;
}
.k-key-hint {
display: block;
margin-top: 8px;
color: var(--ink-soft);
font-size: 13px;
font-weight: 900;
letter-spacing: 1.2px;
}
.k-touch-key .k-icon {
width: 34px;
height: 34px;
}
.k-touch-key.is-icon-key {
flex-direction: column;
}
.k-touch-key.is-icon-key .k-icon {
margin-bottom: 0;
}
.k-touch-key.is-wide { min-width: 112px; }
.k-touch-key.is-space { min-width: 350px; }
.k-touch-key.is-caps-key {
width: 92px;
min-width: 92px;
}
.k-touch-key.is-modifier {
width: 142px;
min-width: 142px;
}
.k-touch-key.is-symbol {
width: 92px;
min-width: 92px;
}
.k-touch-key.is-domain,
.k-touch-key.is-command {
width: 142px;
min-width: 142px;
}
.k-touch-key.is-word {
font-size: 26px;
}
.k-touch-key.is-done {
border-radius: 20px;
}
.k-touch-key.is-hide {
width: 92px;
min-width: 92px;
}
.k-touch-key.is-shortcut {
background: var(--ink-1);
color: var(--white);
font-size: 24px;
}
.k-touch-key.is-action {
background:
-webkit-linear-gradient(top, var(--red-2) 0%, var(--red-deep) 100%);
background:
linear-gradient(180deg, var(--red-2) 0%, var(--red-deep) 100%);
color: var(--white);
box-shadow:
inset 0 0 0 1px rgba(232, 181, 71, 0.32),
0 8px 18px rgba(122, 16, 20, 0.24);
}
.k-touch-key.is-muted {
background: #FFF9EE;
color: var(--ink-soft);
}
.k-touch-key.is-caps-on,
.k-touch-key.is-shift-on {
color: var(--white);
}
.k-touch-keyboard.is-numeric .k-touch-keyboard-title {
font-size: 20px;
}
.k-touch-keyboard.is-numeric .k-touch-keyboard-preview {
max-width: 760px;
height: 72px;
line-height: 72px;
font-size: 28px;
}
.k-touch-keyboard.is-numeric .k-touch-keyboard-row {
margin-bottom: 10px;
}
.k-touch-keyboard.is-numeric .k-touch-keyboard-row.is-phone-row {
margin-left: auto;
margin-right: auto;
max-width: 780px;
}
.k-touch-keyboard.is-numeric .k-touch-key.is-phone-key {
width: 244px;
min-width: 244px;
height: 92px;
border-radius: 22px;
flex-direction: column;
}
.k-touch-keyboard.is-numeric .k-touch-key.is-phone-key.is-icon-key {
font-size: 35px;
}
.k-touch-keyboard.is-numeric .is-phone-action-row {
margin-top: 8px;
}
.k-touch-keyboard.is-numeric .k-touch-key.is-phone-done {
width: 520px;
min-width: 520px;
height: 88px;
border-radius: var(--r-pill);
}
.k-touch-keyboard.is-numeric .k-touch-key.is-phone-hide {
width: 244px;
min-width: 244px;
height: 88px;
border-radius: var(--r-pill);
}
.k-touch-keyboard.is-numeric .k-touch-key.is-phone-hide .k-icon {
width: 40px;
height: 40px;
}
.k-touch-keyboard.is-numeric .k-key-hint {
font-size: 12px;
margin-top: 7px;
}
.k-keyboard-active {
box-shadow:
0 0 0 4px rgba(208, 35, 41, 0.10),
inset 0 0 0 2px var(--red-2) !important;
}
.k-search-input.k-keyboard-active {
box-shadow: none !important;
}
.k-form-input.k-keyboard-active {
background: var(--white);
border-color: var(--red-2);
}
/* =================================================================
INACTIVITY MODAL (2026-05-27)
Polite "Still with us?" with a 10-second countdown. Light backdrop
blur so the underlying screen stays recognizable - we don't want
the customer to think the kiosk crashed.
================================================================= */
.k-idle-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(18, 6, 8, 0.66);
z-index: 9700;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 200ms ease;
transition: opacity 200ms ease;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
}
.k-idle-overlay.is-on { opacity: 1; visibility: visible; }
.k-idle-card {
width: 100%;
max-width: 560px;
background:
linear-gradient(180deg, var(--white) 0%, var(--cream-1) 100%);
border-radius: var(--r-card-lg);
padding: 44px 44px 36px;
text-align: center;
box-shadow:
0 30px 70px rgba(0, 0, 0, 0.4),
inset 0 0 0 1px rgba(232, 181, 71, 0.30);
}
.k-idle-eyebrow {
font-family: Inter, sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--red-2);
margin-bottom: 14px;
}
.k-idle-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 28px;
color: var(--ink-1);
margin: 0 0 18px;
letter-spacing: -0.3px;
}
.k-idle-countwrap {
display: inline-flex;
align-items: baseline;
margin-bottom: 14px;
}
.k-idle-count {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 900;
font-size: 92px;
line-height: 1;
color: var(--red-2);
letter-spacing: -3px;
}
.k-idle-countunit {
margin-left: 10px;
font-family: Inter, sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ink-soft);
}
.k-idle-sub {
font-family: Inter, sans-serif;
font-size: 15px;
line-height: 1.5;
color: var(--ink-2);
margin: 0 0 22px;
}
.k-idle-keep {
padding: 16px 36px;
border-radius: var(--r-pill);
background:
-webkit-linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
background:
linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
color: var(--white);
font-family: Inter, sans-serif;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.5px;
box-shadow: var(--sh-red-sm);
}
/* =================================================================
BOOKING TIMER CHIP (2026-05-27)
"Reserved for you 4:00" floats at the top-right of the customer
screen. Calm by default, amber under 1:00, red under 0:30 with
a soft pulse. Sits above z-index 100 so it stays visible during
form scroll.
================================================================= */
.k-booking-chip {
/* Lives inline in the checkout back-row now (renderCustomer parents it
there). It used to float fixed top-right and overlapped the topbar. */
display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
-ms-flex-negative: 0; flex-shrink: 0;
padding: 9px 16px;
background:
linear-gradient(180deg, var(--white) 0%, var(--cream-1) 100%);
border-radius: var(--r-pill);
box-shadow:
0 6px 18px rgba(26, 6, 8, 0.18),
inset 0 0 0 1px rgba(232, 181, 71, 0.45);
font-family: Inter, sans-serif;
}
.k-booking-chip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-right: 10px;
color: var(--red-2);
}
.k-booking-chip-icon .k-icon { width: 18px; height: 18px; }
.k-booking-chip-label {
font-size: 11px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--ink-soft);
margin-right: 10px;
}
.k-booking-chip-time {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800;
font-size: 22px;
color: var(--ink-1);
letter-spacing: -0.3px;
line-height: 1;
min-width: 52px;
text-align: right;
}
/* Warning state (under 60 s) - amber */
.k-booking-chip.is-warn {
box-shadow:
0 6px 18px rgba(216, 138, 63, 0.30),
inset 0 0 0 1px rgba(216, 138, 63, 0.65);
}
.k-booking-chip.is-warn .k-booking-chip-icon,
.k-booking-chip.is-warn .k-booking-chip-time { color: #C26A1E; }
/* Urgent state (under 30 s) - red with soft pulse */
.k-booking-chip.is-urgent {
background:
linear-gradient(180deg, #FFF3F3 0%, #FBE3E3 100%);
box-shadow:
0 6px 18px rgba(196, 38, 46, 0.30),
inset 0 0 0 1px rgba(196, 38, 46, 0.75);
-webkit-animation: kbookingpulse 1500ms ease-in-out infinite;
animation: kbookingpulse 1500ms ease-in-out infinite;
}
.k-booking-chip.is-urgent .k-booking-chip-icon,
.k-booking-chip.is-urgent .k-booking-chip-time { color: var(--red-2); }
@-webkit-keyframes kbookingpulse {
0%, 100% { -webkit-transform: scale(1); transform: scale(1); }
50% { -webkit-transform: scale(1.04); transform: scale(1.04); }
}
@keyframes kbookingpulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
/* =================================================================
DEAL BADGES (2026-05-27)
Four variants, sized for the upper-left of a 2:3 poster card.
The "deal" variant gets a diagonal shine sweep every ~4 s to draw
the eye on the home grid. All variants share the same chip shape
so the eye reads them as a coherent system rather than ad-hoc
stickers.
================================================================= */
.k-deal-badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 4;
display: inline-block;
padding: 7px 13px;
border-radius: var(--r-pill);
font-family: Inter, sans-serif;
font-weight: 800;
font-size: 11px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--white);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
/* Each badge gets its own compositor layer so the shine animation
doesn't repaint the whole poster every frame. */
-webkit-transform: translateZ(0);
transform: translateZ(0);
overflow: hidden;
}
/* "Tonight's Deal" - punchy red with a diagonal-shine sweep */
.k-deal-deal {
background:
-webkit-linear-gradient(135deg, #E83E45 0%, #B81C20 100%);
background:
linear-gradient(135deg, #E83E45 0%, #B81C20 100%);
box-shadow:
0 4px 14px rgba(196, 38, 46, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* Diagonal shine sweep - only on .is-shine badges (currently just "deal") */
.k-deal-badge.is-shine::after {
content: '';
position: absolute;
top: 0; bottom: 0;
left: -60%;
width: 50%;
background:
-webkit-linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
background:
linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
-webkit-transform: skewX(-22deg);
transform: skewX(-22deg);
-webkit-animation: kdealshine 4200ms ease-in-out infinite;
animation: kdealshine 4200ms ease-in-out infinite;
pointer-events: none;
}
@-webkit-keyframes kdealshine {
0%, 60% { -webkit-transform: translateX(0) skewX(-22deg); }
100% { -webkit-transform: translateX(360%) skewX(-22deg); }
}
@keyframes kdealshine {
0%, 60% { transform: translateX(0) skewX(-22deg); }
100% { transform: translateX(360%) skewX(-22deg); }
}
/* "Audience Pick" - warm gold, type stays dark for legibility */
.k-deal-pick {
background:
-webkit-linear-gradient(135deg, #F2C964 0%, #C99030 100%);
background:
linear-gradient(135deg, #F2C964 0%, #C99030 100%);
color: #2B1606;
text-shadow: 0 1px 0 rgba(255, 232, 200, 0.45);
box-shadow:
0 4px 14px rgba(201, 144, 48, 0.40),
inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* "Almost Sold Out" - amber, conveys scarcity without alarm */
.k-deal-almost {
background:
-webkit-linear-gradient(135deg, #E89A3A 0%, #B26A1A 100%);
background:
linear-gradient(135deg, #E89A3A 0%, #B26A1A 100%);
box-shadow:
0 4px 14px rgba(216, 138, 63, 0.40),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* "Best Seats Tonight" - slate blue, calmer "quality" signal */
.k-deal-seats {
background:
-webkit-linear-gradient(135deg, #4A5C8E 0%, #2E3A5A 100%);
background:
linear-gradient(135deg, #4A5C8E 0%, #2E3A5A 100%);
box-shadow:
0 4px 14px rgba(46, 58, 90, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* Carousel-side badge - sits on the photo side, slightly larger
and at a more prominent position because the slide is huge. */
.k-carousel-badge {
top: 24px;
left: 24px;
padding: 9px 16px;
font-size: 12px;
letter-spacing: 1.6px;
z-index: 4;
}
/* =================================================================
CONFIRM DIALOG (2026-05-28)
Small modal for destructive actions (brand tap mid-flow, etc.).
Same dark blurred backdrop as the content modal, smaller card with
a title, a subtitle, and two buttons (cancel / confirm).
================================================================= */
.k-conf-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(18, 6, 8, 0.72);
z-index: 9800;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 200ms ease;
transition: opacity 200ms ease;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
}
.k-conf-overlay.is-on { opacity: 1; visibility: visible; }
.k-conf-card {
width: 100%;
max-width: 480px;
background:
linear-gradient(180deg, var(--white) 0%, var(--cream-1) 100%);
border-radius: var(--r-card-lg);
padding: 32px 32px 28px 32px;
text-align: center;
box-shadow:
0 30px 70px rgba(0, 0, 0, 0.4),
inset 0 0 0 1px rgba(232, 181, 71, 0.30);
}
.k-conf-title {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800;
font-size: 26px;
color: var(--ink-1);
letter-spacing: -0.3px;
margin-bottom: 12px;
}
.k-conf-body {
font-family: Inter, sans-serif;
font-size: 15px;
line-height: 1.55;
color: var(--ink-2);
margin-bottom: 24px;
}
.k-conf-actions {
display: flex;
justify-content: center;
align-items: center;
}
.k-conf-actions > * + * { margin-left: 12px; }
.k-conf-no,
.k-conf-yes {
padding: 14px 22px;
border-radius: var(--r-pill);
font-family: Inter, sans-serif;
font-weight: 800;
font-size: 13px;
letter-spacing: 1.4px;
text-transform: uppercase;
-webkit-transition: background 200ms ease, color 200ms ease;
transition: background 200ms ease, color 200ms ease;
}
.k-conf-no {
background: transparent;
color: var(--ink-1);
border: 1.5px solid var(--cream-3);
}
.k-conf-no:active { background: var(--cream-2); }
.k-conf-yes {
background:
-webkit-linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
background:
linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
color: var(--white);
border: 1.5px solid transparent;
box-shadow: var(--sh-red-sm);
}
.k-conf-yes:active {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
/* =================================================================
SHOW DETAIL v5 LAYOUT (2026-05-28)
Row 1: About (60%) + [Starring stacked on Creative team] (40%)
Merged Awards + Good to know card
Photo carousel: horizontal slide animation + nav arrows + active
thumb zoom + rounder corners
Time slot empty state + Continue is-ready shine
================================================================= */
/* About now lives in its own full-width row (is-single). Starring +
Creative team share the next row 50/50 via the base .k-detail-row1
rule. Heights are content-sized, not stretched. */
.k-detail-row1.is-single .k-card-about { flex: 1 1 100%; }
.k-detail-row1 { align-items: stretch; }
/* Merged Awards + Good to know card */
.k-card-merged {
padding: 0;
margin-bottom: 20px;
}
.k-merged-row {
display: flex;
align-items: stretch;
}
.k-merged-row > * { min-width: 0; flex: 1 1 50%; padding: 24px 28px; }
.k-merged-row > * + * { border-left: 1px solid rgba(232, 181, 71, 0.20); }
.k-card-merged.is-single .k-merged-row > * { flex: 1 1 100%; }
.k-card-merged .k-detail-card-head { margin-bottom: 16px; }
/* Photo carousel - slide animation replaces crossfade */
/* Prev/next arrow overlays. z-index sits above the centre reel
slide (which is 10) so the arrows stay tappable in front of the
forward card. */
.k-pg-nav {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 20;
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(244, 226, 176, 0.40);
color: var(--cream-1);
display: flex; align-items: center; justify-content: center;
-webkit-transition: -webkit-transform 160ms var(--ease), background 200ms ease;
transition: transform 160ms var(--ease), background 200ms ease;
}
.k-pg-nav:active {
background: rgba(0, 0, 0, 0.75);
-webkit-transform: translateY(-50%) scale(0.94);
transform: translateY(-50%) scale(0.94);
}
.k-pg-nav .k-icon { width: 28px; height: 28px; }
.k-pg-prev { left: 18px; }
.k-pg-next { right: 18px; }
/* Active thumb scale + glow */
/* Time slot empty state */
.k-times-empty {
display: flex;
align-items: center;
justify-content: center;
padding: 6px 16px;
color: var(--ink-soft);
}
.k-times-empty-icon {
width: 22px; height: 22px;
color: var(--red-2);
margin-right: 10px;
opacity: 0.65;
flex-shrink: 0;
}
.k-times-empty-icon .k-icon { width: 100%; height: 100%; }
.k-times-empty-text {
font-family: Inter, sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--ink-soft);
line-height: 1.4;
}
/* Continue button - quiet by default, shines when both date+time
selected (is-ready). Same gold-sweep + breathe as Book Now. */
.k-btn.k-btn-red {
position: relative;
overflow: hidden;
}
.k-btn.k-btn-red.is-ready {
-webkit-animation: kbookpulse 2600ms ease-in-out infinite;
animation: kbookpulse 2600ms ease-in-out infinite;
}
.k-btn.k-btn-red.is-ready::before {
content: '';
position: absolute;
top: -40%; bottom: -40%;
left: -50%;
width: 45%;
background:
-webkit-linear-gradient(90deg,
transparent 0%,
rgba(255, 230, 160, 0.0) 10%,
rgba(255, 230, 160, 0.50) 50%,
rgba(255, 230, 160, 0.0) 90%,
transparent 100%);
background:
linear-gradient(90deg,
transparent 0%,
rgba(255, 230, 160, 0.0) 10%,
rgba(255, 230, 160, 0.50) 50%,
rgba(255, 230, 160, 0.0) 90%,
transparent 100%);
-webkit-transform: skewX(-22deg);
transform: skewX(-22deg);
-webkit-animation: kpillsweep 3400ms ease-in-out infinite 1200ms;
animation: kpillsweep 3400ms ease-in-out infinite 1200ms;
pointer-events: none;
z-index: 1;
}
.k-btn.k-btn-red .k-btn-label,
.k-btn.k-btn-red .k-btn-arrow { position: relative; z-index: 2; }
/* Ticket count prompt before the seat chart.
Fixed-size Broadway card, large stepper, C56-safe opacity/transform motion. */
.k-ticket-count-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 9800;
display: flex;
align-items: center;
justify-content: center;
padding: 44px;
background: rgba(18, 6, 8, 0.72);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 180ms ease, visibility 180ms ease;
transition: opacity 180ms ease, visibility 180ms ease;
}
.k-ticket-count-overlay.is-on {
opacity: 1;
visibility: visible;
}
.k-ticket-count-card {
position: relative;
width: 720px;
max-width: 100%;
overflow: hidden;
border-radius: 28px;
padding: 34px 38px 38px 38px;
text-align: center;
background:
linear-gradient(180deg, #fffdf7 0%, #fff8e7 100%);
border: 1px solid rgba(232, 181, 71, 0.68);
box-shadow:
0 34px 90px rgba(0, 0, 0, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
-webkit-transform: translateY(26px) scale(0.96);
transform: translateY(26px) scale(0.96);
}
.k-ticket-count-overlay.is-on .k-ticket-count-card {
-webkit-animation: kticketpop 260ms cubic-bezier(0.18, 0.85, 0.22, 1.08) forwards;
animation: kticketpop 260ms cubic-bezier(0.18, 0.85, 0.22, 1.08) forwards;
}
.k-ticket-count-glow {
position: absolute;
top: -54px;
left: 50%;
width: 360px;
height: 120px;
margin-left: -180px;
background: radial-gradient(ellipse at center, rgba(255, 211, 97, 0.30) 0%, rgba(255, 211, 97, 0) 70%);
pointer-events: none;
}
.k-ticket-count-kicker {
position: relative;
z-index: 1;
font-family: Inter, sans-serif;
font-weight: 900;
font-size: 13px;
line-height: 1.2;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--red-2);
margin-bottom: 8px;
}
.k-ticket-count-title {
position: relative;
z-index: 1;
font-family: 'Playfair Display', Georgia, serif;
font-weight: 900;
font-size: 56px;
line-height: 1.05;
color: var(--ink-1);
letter-spacing: 0;
margin-bottom: 12px;
}
.k-ticket-count-title em {
font-style: italic;
color: var(--red-2);
}
.k-ticket-count-meta {
position: relative;
z-index: 1;
min-height: 24px;
font-family: Inter, sans-serif;
font-size: 17px;
line-height: 1.45;
font-weight: 800;
color: var(--ink-soft);
margin-bottom: 26px;
}
.k-ticket-count-stage {
position: relative;
z-index: 1;
padding: 18px;
margin-bottom: 26px;
border-radius: 26px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 247, 225, 0.92) 100%);
border: 1px solid rgba(232, 181, 71, 0.42);
}
.k-ticket-count-rail {
display: flex;
align-items: center;
justify-content: center;
}
.k-ticket-count-btn {
flex: 0 0 auto;
width: 96px;
height: 96px;
border-radius: 50%;
background:
linear-gradient(180deg, #be1b24 0%, #8f0e15 100%);
color: #fff;
border: 1px solid rgba(232, 181, 71, 0.45);
box-shadow: 0 16px 32px rgba(141, 12, 20, 0.28);
}
.k-ticket-count-btn:first-child { margin-right: 34px; }
.k-ticket-count-btn:last-child { margin-left: 34px; }
.k-ticket-count-btn .k-icon {
width: 32px;
height: 32px;
}
.k-ticket-count-btn:active {
-webkit-transform: scale(0.94);
transform: scale(0.94);
}
.k-ticket-count-btn[disabled] {
opacity: 0.38;
box-shadow: none;
}
.k-ticket-count-value {
flex: 0 0 auto;
width: 188px;
height: 118px;
border-radius: 28px;
background: #fff;
color: var(--ink-1);
border: 1px solid rgba(232, 181, 71, 0.58);
box-shadow:
0 18px 34px rgba(38, 10, 12, 0.12),
inset 0 0 0 6px rgba(255, 248, 225, 0.80);
font-family: 'Playfair Display', Georgia, serif;
font-size: 72px;
font-weight: 900;
line-height: 112px;
text-align: center;
}
.k-ticket-count-confirm {
position: relative;
z-index: 1;
width: 100%;
min-height: 82px;
border-radius: 999px;
padding: 0 28px;
background:
linear-gradient(180deg, #ef2b36 0%, #c91520 52%, #a90f18 100%);
color: #fff;
box-shadow:
0 20px 38px rgba(196, 38, 46, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
font-family: Inter, sans-serif;
font-size: 22px;
line-height: 1.15;
font-weight: 900;
}
.k-ticket-count-confirm:active {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
@-webkit-keyframes kticketpop {
0% { opacity: 0; -webkit-transform: translateY(26px) scale(0.96); transform: translateY(26px) scale(0.96); }
100% { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
}
@keyframes kticketpop {
0% { opacity: 0; -webkit-transform: translateY(26px) scale(0.96); transform: translateY(26px) scale(0.96); }
100% { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
}
/* =================================================================
STABILIZE CARD HEIGHTS (2026-05-28)
- Calendar skeleton: real .k-cal-cell wrappers around shimmer
panels so the placeholder grid is visible during availability
fetch (the previous .k-skel-cal-row had no width and collapsed).
- Times card: wrap empty + grid in a min-height area so the card
does not change size when content arrives.
================================================================= */
/* Calendar skeleton cells use the same .k-cal-cell-inner geometry,
plus .k-skel for the shimmer overlay. */
.k-cal-cell-inner.k-skel {
background: var(--cream-2);
position: relative;
overflow: hidden;
/* Don't show the empty day-number text from the parent rule */
color: transparent;
}
/* Stable times area - min-height matches a single row of time pills
so the card stays the same height whether the empty hint or the
pills are showing. No more whitespace pad. */
.k-times-area {
min-height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
}
.k-times-area > .k-times-empty { margin: 0 auto; }
.k-times-area > .k-times { margin: 0; }
/* =================================================================
ABOUT CLIP - 2026-05-28
The about card stretches to match the right-stack height (via row1's
align-items: stretch). The clip container inside fills the remaining
body height and overflow-hides whatever doesn't fit. Bottom gradient
fade tells the customer there is more, Read more opens the modal.
================================================================= */
/* About card - compact single-row layout (2026-05-29 redesign).
- Card body sits inline with Read more in the bottom-right corner.
- Description clipped to ~4 short lines so the card stays SHORT;
full text lives in the Read-more modal. */
.k-card-about,
.k-card-about .k-detail-card-body { min-height: 0; }
.k-card-about .k-detail-card-body {
display: flex;
flex-direction: column;
}
/* Measurement-based truncation: JS shrinks the text until the
paragraph + inline Read-more fits inside maxLines * lineHeight.
The max-height cap here matches the JS computation so the paragraph
never spills past the budget even between truncation cycles. */
.k-about-clip {
position: relative;
margin: 0;
line-height: 1.55;
max-height: calc(1.55em * 4 + 2px);
overflow: hidden;
}
/* Read-more sits INLINE inside the truncated paragraph, immediately
after the "..." appended by the JS measurement loop. Editorial-link
styling (no border, no padding) so it flows visually with text. */
.k-card-about .k-readmore {
display: inline-flex !important;
align-items: center;
margin: 0 !important;
min-height: 44px;
padding: 0 6px !important;
box-sizing: border-box;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
color: var(--red-2) !important;
font-family: Inter, sans-serif;
font-weight: 800;
font-size: 13px;
letter-spacing: 1.2px;
text-transform: uppercase;
line-height: inherit;
cursor: pointer;
white-space: nowrap;
vertical-align: baseline;
}
.k-card-about .k-readmore .k-readmore-arrow {
display: inline-block;
margin-left: 6px;
width: 14px;
height: 14px;
vertical-align: -2px;
}
.k-card-about .k-readmore:active { color: var(--red-1) !important; }
/* =================================================================
FINAL TWEAKS (2026-05-28)
1. Critics card: stable 2-line height for the quote text; longer
quotes get ellipsis + View all reveals the full text.
2. Critics modal: switch quote text from italic Playfair to Inter
regular for readability (matches the card view).
3. Good to know: bump value font from 13px to 15px so it reads at
the same weight as the rest of the page.
================================================================= */
/* 1. Stable 2-line critic quote height */
.k-card-critics-text {
/* Reserve 2 lines of height. If quote fits in 1 line, the extra
half-line of empty space keeps the card height constant. If it
overflows past 2 lines, ellipsis at the end + View all. */
min-height: calc(1.55em * 2);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 2. Critics modal text - readable Inter regular, not italic Playfair */
.k-cm-critics-item .k-about-quote-text {
font-family: Inter, sans-serif !important;
font-style: normal !important;
font-weight: 500 !important;
font-size: 17px !important;
line-height: 1.55 !important;
letter-spacing: -0.1px !important;
}
/* 3. Good to know value bumped to match the rest of the page */
.k-gtk-value {
font-size: 15px !important;
line-height: 1.5 !important;
}
/* =================================================================
PHOTO GALLERY POLISH (2026-05-28)
- Slides have rounded corners (defense in depth; the stage already
clips them but Cr56 occasionally shows the underlying rect edge
during the transform transition).
- Arrows always visible above slides (z-index 6).
- Thumb strip has enough vertical padding for the scaled+lifted
active thumb so it does not clip at the top.
- Active thumb gold glow ring stronger.
- View-all grid modal: 3-column tile grid with caption hover.
================================================================= */
/* Arrows above everything, including the active slide (z-index 2). */
.k-pg-nav { z-index: 6 !important; }
/* Thumb strip - needs ~12px top padding so the active thumb's
translateY(-3px) + scale(1.08) doesn't get clipped. overflow-y is
visible (allowed alongside overflow-x: auto in practice; the
horizontal scroll still works). */
/* =================================================================
PHOTO GRID MODAL (View all photos)
================================================================= */
.k-cm-photo-grid {
display: flex;
flex-wrap: wrap;
margin: 0 -6px;
}
.k-cm-photo-tile {
position: relative;
width: calc(33.333% - 12px);
margin: 6px;
padding: 0;
border: 0;
background: var(--cream-2);
border-radius: var(--r-card);
overflow: hidden;
cursor: pointer;
-webkit-transition: -webkit-transform 200ms var(--ease), box-shadow 200ms ease;
transition: transform 200ms var(--ease), box-shadow 200ms ease;
/* 4:3 via padding-bottom (Cr56 has no aspect-ratio) */
}
.k-cm-photo-tile::before {
content: '';
display: block;
padding-bottom: 75%;
}
.k-cm-photo-tile img {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.k-cm-photo-tile:active {
-webkit-transform: scale(0.97);
transform: scale(0.97);
box-shadow:
0 0 0 2px var(--red-2),
0 8px 18px rgba(196, 38, 46, 0.25);
}
.k-cm-photo-tile-caption {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 10px 12px;
font-family: Inter, sans-serif;
font-size: 12px;
color: var(--cream-1);
background:
-webkit-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 100%);
background:
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 100%);
text-align: left;
}
/* =================================================================
PHOTO GALLERY v2 - track-based slider + masonry grid modal
2026-05-28
================================================================= *//* Stage hosts a horizontal track. The track translates by N * 100%
to bring each slide into the viewport. Each slide is full-width
side-by-side - true horizontal card slide, no z-index dance. */
/* Override the older slide rules - track slides are now plain flex
items, no absolute positioning or opacity transitions. */
/* View-all grid modal: 2-column masonry that preserves each image's
natural aspect ratio. Vertical photos stay tall, landscape ones
stay wide. CSS columns is the simplest cross-Cr56 way. */
.k-cm-photo-grid {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 14px;
-moz-column-gap: 14px;
column-gap: 14px;
margin: 0;
display: block; /* override the older flex layout */
}
.k-cm-photo-tile {
-webkit-column-break-inside: avoid;
break-inside: avoid;
display: block;
width: 100%;
margin: 0 0 14px 0 !important;
padding: 0 !important;
border: 0;
background: var(--cream-2);
border-radius: var(--r-card);
overflow: hidden;
cursor: pointer;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: var(--sh-1);
}
/* Drop the 4:3 padding-bottom trick - we want natural aspect. */
.k-cm-photo-tile::before { content: none; }
.k-cm-photo-tile img {
position: relative;
width: 100%;
height: auto;
display: block;
object-fit: initial;
}
.k-cm-photo-tile:active {
-webkit-transform: scale(0.98);
transform: scale(0.98);
box-shadow:
0 0 0 2px var(--red-2),
0 8px 18px rgba(196, 38, 46, 0.25);
}
.k-cm-photo-tile-caption {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 12px 14px;
font-family: Inter, sans-serif;
font-size: 12px;
color: var(--cream-1);
background:
-webkit-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 100%);
background:
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 100%);
text-align: left;
}
/* Wider Continue button variant - extra horizontal padding so the
CTA grabs more attention in the bottom bar. */
.k-btn.k-btn-wide {
min-width: 320px;
padding-left: 48px;
padding-right: 48px;
justify-content: center;
}
/* =================================================================
FINISH POLISH (2026-05-28)
1. Book Now glow: soft halo instead of a hard yellow ring.
2. Today indicator: subtle gold dot in the cell corner, doesn't
clash with the red gradient when also selected.
3. Photo strip active thumb: clean gold ring only (no red border),
more breathing room from neighbours, strip end-padding so first
and last thumbs don't clip when scaled.
4. Photo strip bottom spacing for active-thumb drop shadow.
================================================================= */
/* 1. Book Now - real glow halo, not a hard ring */
@-webkit-keyframes kbookpulse {
0%, 100% {
box-shadow:
0 14px 32px rgba(196, 38, 46, 0.45),
0 0 32px rgba(255, 200, 96, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
50% {
box-shadow:
0 18px 38px rgba(196, 38, 46, 0.60),
0 0 56px rgba(255, 200, 96, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
}
@keyframes kbookpulse {
0%, 100% {
box-shadow:
0 14px 32px rgba(196, 38, 46, 0.45),
0 0 32px rgba(255, 200, 96, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
50% {
box-shadow:
0 18px 38px rgba(196, 38, 46, 0.60),
0 0 56px rgba(255, 200, 96, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
}
/* 2. Today indicator - KEEP the gold-ring box (so today still reads as a
selectable tile) and add the gold bar marker on top of it. */
.k-cal-cell.is-today .k-cal-cell-inner {
box-shadow:
inset 0 0 0 2px var(--gold-1),
0 3px 8px rgba(26, 6, 8, 0.10);
position: relative;
}
.k-cal-cell.is-today .k-cal-cell-inner::after {
content: '';
position: absolute;
bottom: 6px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 6px; height: 6px;
border-radius: 50%;
background: var(--gold-1);
box-shadow: 0 0 6px rgba(232, 181, 71, 0.65);
}
.k-cal-cell.is-today.is-selected .k-cal-cell-inner {
box-shadow: 0 6px 16px rgba(196, 38, 46, 0.35);
}
.k-cal-cell.is-today.is-selected .k-cal-cell-inner::after {
/* dot becomes cream-white so it stays visible on the red bg */
background: var(--cream-1);
box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
}
/* 3. Photo strip - clean gold-ring active thumb, more breathing room */
/* 4. Strip needs end-padding so first/last thumbs don't clip when
scaled, and bottom padding so the active-thumb shadow doesn't get
sliced off by the parent container edge. */
/* =================================================================
POLISH PASS 2 (2026-05-28)
- Today's date: gold BAR (50% width) instead of dot
- Gallery thumbs: more space all around + extra space around the
active thumb; red highlight (theme), not gold
================================================================= */
/* Today: bar across the bottom of the cell, ~50% wide */
.k-cal-cell.is-today .k-cal-cell-inner::after {
width: 50%;
height: 3px;
border-radius: 2px;
bottom: 8px;
}
.k-cal-cell.is-today.is-selected .k-cal-cell-inner::after {
background: var(--cream-1);
box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
}
/* Gallery thumbs - more breathing room overall, extra space around
the active thumb so it feels distinguished without changing scale. */
/* =================================================================
POLISH PASS 3 (2026-05-28)
- Legend Today: bar (not square) to match the new calendar marker
- Gallery thumbs: tight default spacing, EXTRA breathing room only
around the active thumb (the focused-card effect)
================================================================= */
/* Today legend marker - a short gold LINE, matching the gold bar drawn on
today's cell (not a box). */
.k-cal-legend-dot-today {
width: 16px !important;
height: 3px !important;
border-radius: 2px !important;
background: var(--gold-1) !important;
box-shadow: 0 0 6px rgba(232, 181, 71, 0.6) !important;
align-self: center;
}
/* Gallery thumbs: 4px default margin, 20px when active.
Active gets ~16px extra each side so it sits in its own focus zone
while the others tuck close together. */
/* =================================================================
CONTENT MODAL SCROLLBAR (2026-05-28)
Styles the WebKit scrollbar inside the content modal body (the View
all photos grid, the About full-text, the Awards list, etc.) to
match the theme: cream track, red-to-deep-red gradient thumb.
================================================================= */
.k-cm-body::-webkit-scrollbar {
width: 10px;
}
.k-cm-body::-webkit-scrollbar-track {
background: var(--cream-1);
border-radius: 6px;
margin: 6px 0;
}
.k-cm-body::-webkit-scrollbar-thumb {
background:
-webkit-linear-gradient(180deg, var(--red-2) 0%, var(--red-deep) 100%);
background:
linear-gradient(180deg, var(--red-2) 0%, var(--red-deep) 100%);
border-radius: 6px;
border: 2px solid var(--cream-1);
box-shadow: 0 2px 6px rgba(196, 38, 46, 0.30);
}
.k-cm-body::-webkit-scrollbar-thumb:hover,
.k-cm-body::-webkit-scrollbar-thumb:active {
background:
-webkit-linear-gradient(180deg, var(--red-1) 0%, var(--red-2) 100%);
background:
linear-gradient(180deg, var(--red-1) 0%, var(--red-2) 100%);
}
.k-cm-body::-webkit-scrollbar-corner { background: var(--cream-1); }
/* =================================================================
STICKY HOME HEADER v2 (2026-05-28)
What it does:
User scrolls -> the entire page scrolls together (carousel + this
block + grid). The moment THIS block's top hits the top of the
stage's scroll area, it pins. From then on the grid scrolls
underneath it. Carousel is gone, search + filters stay reachable.
How the previous attempt broke:
- Negative side margin (-40px) plus stage padding plus the stage's
translateZ(0) (new stacking context) made the wrapper position
inconsistently and the cream background did not fully cover
cards sliding under it.
- z-index 50 wasn't high enough versus other layers.
This version:
- Solid cream background.
- Bleeds full-width via negative margin matched by padding.
- z-index 100 above grid (no z-index by default), below trailer/
lightbox/conf overlays (9500+).
- Always-on subtle bottom shadow so the strip reads as a shelf
the moment it pins (no JS scroll listener needed).
================================================================= */
/* .k-home-sticky removed - the sticky home header was reverted twice in
testing (parent transform context broke the sticky behaviour) and the
class is no longer applied by renderHome. */
/* =================================================================
SCROLL-TO-TOP FLOATING BUTTON (2026-05-28)
Lives once at body level. Hidden by default; fades + slides in when
stage.scrollTop > 240. Tap = rAF cosine-eased smooth scroll back to
top. Lifts above the bottom action bar when one is visible.
================================================================= */
.k-scroll-top {
position: fixed;
right: 28px;
bottom: 28px;
z-index: 200;
width: 60px;
height: 60px;
border-radius: 50%;
background:
-webkit-linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
background:
linear-gradient(135deg, var(--red-2) 0%, var(--red-deep) 100%);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
border: 0;
cursor: pointer;
box-shadow:
0 12px 26px rgba(196, 38, 46, 0.45),
0 0 0 1px rgba(255, 200, 96, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.20);
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(20px) scale(0.85);
transform: translateY(20px) scale(0.85);
-webkit-transition: opacity 240ms ease, -webkit-transform 240ms var(--ease), visibility 240ms ease;
transition: opacity 240ms ease, transform 240ms var(--ease), visibility 240ms ease;
pointer-events: none;
}
.k-scroll-top.is-on {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
pointer-events: auto;
}
.k-scroll-top:active {
-webkit-transform: translateY(0) scale(0.94);
transform: translateY(0) scale(0.94);
}
.k-scroll-top .k-icon {
width: 26px;
height: 26px;
}
/* When a bottom action bar is visible (show, section, customer
screens via setBottom()), lift the floating arrow so it doesn't sit
on top of Continue / Back / Pay buttons. */
body.has-bottom-bar .k-scroll-top {
bottom: 110px;
}
/* =================================================================
SHOW CARD STABILITY + IMAGE SKELETON (2026-05-28)
1. Force each card onto its own GPU compositor layer so the rounded
corners don't drop a frame during filter switching (display:none
siblings) on Cr56.
2. Shimmering skeleton placeholder inside the poster while the
image bytes are in flight; fades out when ![]()
load fires.
================================================================= */
.k-show {
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Poster skeleton: same shimmer recipe as the calendar skel cells.
The img starts invisible, fades in on load. */
.k-show-poster.is-loading {
background: var(--cream-2);
overflow: hidden;
}
.k-show-poster.is-loading::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 60%;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
background:
-webkit-linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
background:
linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
-webkit-animation: kskel 1500ms ease-in-out infinite;
animation: kskel 1500ms ease-in-out infinite;
z-index: 1;
}
.k-show-poster img {
-webkit-transition: opacity 360ms ease;
transition: opacity 360ms ease;
}
.k-show-poster.is-loading img {
opacity: 0;
}
/* =================================================================
PROGRESSIVE POSTER LOADING (2026-05-28)
Each poster paints a blurred LQIP from the existing `s` derivative
instantly (cached in browser after first hit, ~10KB on the wire).
The high-res poster (`m` ~480x720) is lazy-loaded via the lazy
observer when the card is within 400px of the viewport.
On HQ load: HQ fades in to opacity 1, blurred LQIP fades out.
================================================================= */
/* Both images are absolutely-positioned, filling the poster slot. */
.k-show-poster {
position: relative;
/* Background cream so even before LQIP arrives, slot isn't blank-white */
background: var(--cream-2);
}
.k-show-poster-tiny,
.k-show-poster-hq {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
-webkit-transition: opacity 650ms ease;
transition: opacity 650ms ease;
}
/* Blurred LQIP - intentionally over-scaled so the blur soft-edges
stay inside the poster bounds. Cr56 supports CSS filter natively.
2026-05-28: blur bumped 18px -> 32px and scale 1.08 -> 1.15 so the
blurred-then-clear effect is unmistakably visible at kiosk distance. */
.k-show-poster-tiny {
-webkit-filter: blur(32px);
filter: blur(32px);
-webkit-transform: scale(1.15);
transform: scale(1.15);
opacity: 1;
z-index: 1;
}
/* High-res poster - hidden until its load event fires. */
.k-show-poster-hq {
opacity: 0;
z-index: 2;
}
.k-show-poster.hq-loaded .k-show-poster-hq { opacity: 1; }
/* Once HQ is up, fade the blur away (small lag so the swap reads as
intentional, not a flicker). */
.k-show-poster.hq-loaded .k-show-poster-tiny {
opacity: 0;
-webkit-transition-delay: 60ms;
transition-delay: 60ms;
}
/* If we have NO tiny LQIP (legacy shows without a `s` derivative),
fall back to the cream + shimmer skeleton. The .has-no-tiny class is
toggled by showCard() in JS - Cr56 doesn't support the :has() selector,
so we can't keep that purely in CSS. */
.k-show-poster.is-loading.has-no-tiny::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 60%;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
background:
-webkit-linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
background:
linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
-webkit-animation: kskel 1500ms ease-in-out infinite;
animation: kskel 1500ms ease-in-out infinite;
z-index: 1;
}
/* Make sure the overlay + genre chip sit ABOVE both images */
.k-show-poster-overlay { z-index: 3; }
.k-show-genre,
.k-show-poster .k-deal-badge { z-index: 4; }
/* =================================================================
GENERIC LQIP / HQ CROSSFADE (2026-05-28)
Reusable img-wrap pattern used by the show-page hero, the home
featured carousel slides, and the show gallery slides. Same
visual behavior as .k-show-poster-{tiny,hq} on the home grid
but scoped to any container that adds .k-img-wrap.
================================================================= */
.k-img-wrap {
position: relative;
overflow: hidden;
background: var(--cream-2);
}
.k-img-wrap > .k-img-tiny,
.k-img-wrap > .k-img-hq {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
-webkit-transition: opacity 650ms ease;
transition: opacity 650ms ease;
display: block;
}
.k-img-wrap > .k-img-tiny {
-webkit-filter: blur(28px);
filter: blur(28px);
-webkit-transform: scale(1.12);
transform: scale(1.12);
opacity: 1;
z-index: 1;
}
.k-img-wrap > .k-img-hq {
opacity: 0;
z-index: 2;
}
.k-img-wrap.hq-loaded > .k-img-hq { opacity: 1; }
.k-img-wrap.hq-loaded > .k-img-tiny {
opacity: 0;
-webkit-transition-delay: 80ms;
transition-delay: 80ms;
}
/* The .k-img-wrap base class has position:relative which overrode the
absolute positioning on the show-page hero. Restore it here so the
wrapped tiny + hq imgs fill the hero correctly. */
.k-hero-img.k-img-wrap {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
/* =================================================================
SEAT-CHART PICKER (2026-05-28, Passport price-group port)
Visual price-tier picker that replaces the legacy flat
k-sections-grid on the section screen. Uses SVG + polygons +
touch pan/zoom (see mountSeatChart in app.js).
================================================================= */
.k-chart-wrap {
position: relative;
/* Crisp white so the chart reads as a clean stage and stands clear of the
cream page (the pale wash was blending into the background). */
background: #ffffff;
/* Top corners squared so it butts onto the red show panel above it as
one continuous card; bottom corners rounded. */
border-radius: 0 0 var(--r-card-lg) var(--r-card-lg);
box-shadow:
inset 0 0 0 1px rgba(232, 181, 71, 0.45),
0 14px 30px rgba(26, 6, 8, 0.12);
overflow: hidden;
/* flex:1 (section screen, below) makes the chart fill the leftover stage
height after the summary/heading/price-panel/info chrome, so there's no
dead cream space. This min-height is the floor if the flex chain ever
fails. The SVG absolute-fills this box (see .k-chart-svg); the viewBox
is derived from real geometry so the chart letterboxes and never clips. */
min-height: 380px;
margin-bottom: 18px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.k-chart-svg {
/* Absolute-fill the wrap. Using inset:0 (not height:100%) sidesteps the
Cr56 percentage-height bug that previously collapsed/clipped the SVG
when the wrap's height came from flex. */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: block;
width: 100%;
height: 100%;
cursor: -webkit-grab;
cursor: grab;
background:
-webkit-radial-gradient(circle at 50% 0%, rgba(208, 35, 41, 0.04), transparent 60%);
background:
radial-gradient(circle at 50% 0%, rgba(208, 35, 41, 0.04), transparent 60%);
-webkit-tap-highlight-color: rgba(0,0,0,0);
/* touch-action keeps the browser from intercepting our pan gestures */
-ms-touch-action: none;
touch-action: none;
}
.k-chart-svg:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
/* Sold-out / unavailable availability state. This replaces the chart only;
the show header stays in place so the customer knows which date/time failed. */
.k-seat-state {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 42px 54px;
background:
-webkit-radial-gradient(ellipse 72% 62% at 18% 18%, rgba(232, 181, 71, 0.14) 0%, rgba(232, 181, 71, 0.045) 36%, transparent 68%),
-webkit-linear-gradient(top, #ffffff 0%, #ffffff 62%, #fffdf8 100%);
background:
radial-gradient(ellipse 72% 62% at 18% 18%, rgba(232, 181, 71, 0.14) 0%, rgba(232, 181, 71, 0.045) 36%, transparent 68%),
linear-gradient(180deg, #ffffff 0%, #ffffff 62%, #fffdf8 100%);
text-align: left;
}
.k-seat-state::before {
content: '';
position: absolute;
top: 22px; right: 22px; bottom: 22px; left: 22px;
border: 1px solid rgba(232, 181, 71, 0.38);
border-radius: var(--r-card-lg);
pointer-events: none;
}
.k-seat-state::after {
content: '';
position: absolute;
right: -88px; bottom: -124px;
width: 310px; height: 310px;
border-radius: 50%;
background: rgba(191, 13, 28, 0.055);
pointer-events: none;
}
.k-seat-state-mark {
position: relative;
z-index: 1;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 138px;
height: 138px;
border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: var(--red-2);
background:
-webkit-radial-gradient(circle at 30% 20%, #fff6db 0%, #f7ce58 42%, #d6a334 100%);
background:
radial-gradient(circle at 30% 20%, #fff6db 0%, #f7ce58 42%, #d6a334 100%);
box-shadow:
inset 0 0 0 8px rgba(255, 255, 255, 0.55),
inset 0 0 0 1px rgba(122, 16, 20, 0.14),
0 18px 34px rgba(122, 16, 20, 0.18);
}
.k-seat-state-mark .k-icon {
width: 62px;
height: 62px;
stroke-width: 2.3;
}
.k-seat-state-content {
position: relative;
z-index: 1;
max-width: 590px;
margin-left: 38px;
}
.k-seat-state-eyebrow {
margin-bottom: 12px;
color: var(--red-2);
font-size: 13px;
font-weight: 900;
letter-spacing: 1.9px;
text-transform: uppercase;
}
.k-seat-state-title {
margin: 0;
font-family: var(--font-display);
font-size: 46px;
line-height: 1.02;
color: var(--ink-1);
}
.k-seat-state-body,
.k-seat-state-note {
margin: 14px 0 0;
color: var(--ink-soft);
font-size: 19px;
line-height: 1.42;
font-weight: 600;
}
.k-seat-state-note {
margin-top: 6px;
color: var(--ink-1);
font-weight: 800;
}
.k-seat-state-btn {
margin-top: 26px;
min-height: 64px;
padding: 0 30px;
border: 0;
border-radius: 999px;
color: var(--cream-1);
background:
-webkit-linear-gradient(top, var(--red-2) 0%, var(--red-1) 100%);
background:
linear-gradient(180deg, var(--red-2) 0%, var(--red-1) 100%);
box-shadow: 0 12px 24px rgba(191, 13, 28, 0.28);
font-size: 18px;
font-weight: 900;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.k-seat-state-btn .k-icon {
width: 22px;
height: 22px;
margin-right: 10px;
vertical-align: -5px;
}
.k-seat-state-btn:active {
-webkit-transform: scale(0.98);
transform: scale(0.98);
}
.k-seat-state-unavailable .k-seat-state-mark {
color: var(--ink-1);
background:
-webkit-radial-gradient(circle at 30% 20%, #ffffff 0%, #f4e7cd 52%, #dfc793 100%);
background:
radial-gradient(circle at 30% 20%, #ffffff 0%, #f4e7cd 52%, #dfc793 100%);
}
/* Section screen fills the stage so the seat chart claims the height that
was previously dead cream space below the info card. The stage has a
definite height (.k-app is a fixed flex column), so min-height:100% here
resolves and the chart (flex:1) grows to fill what's left after the
summary/heading/info-card. The SVG absolute-fills the wrap, so this works
on Cr56 without the percentage-height pitfall that bit the last attempt. */
.k-screen[data-screen="section"].is-on {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
}
/* The chart's height is set explicitly in JS (fitChartHeight) by measuring
the gap to the bottom bar - so it must NOT also flex-grow, or it would
stretch past that height and overflow. Fixed basis, JS owns the height. */
.k-screen[data-screen="section"] .k-chart-wrap {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
/* The back link must hug its text, not stretch to the full row width that the
flex column would otherwise give it. */
.k-screen[data-screen="section"] .k-back-link {
-ms-flex-item-align: start;
align-self: flex-start;
}
/* Compositor hint: keep the pan/zoom group on its own GPU layer.
IMPORTANT: do NOT set `transform` here - a CSS transform on the
OVERRIDES the SVG `transform` attribute that pan/zoom writes, which
pinned the chart (pan/zoom did nothing). `will-change` alone still
promotes the layer without clobbering the attribute. */
.k-chart-content {
will-change: transform;
}
.k-chart-poly {
cursor: pointer;
fill-opacity: 0.25;
stroke-opacity: 0.95;
/* Thin stroke like Passport. The rounded bar ends come from the polygon
GEOMETRY (12 boundary points per seat -> smooth semicircle caps), not
from a fat border. Round join just softens any remaining vertices. */
stroke-width: 3;
stroke-linejoin: round;
stroke-linecap: round;
-webkit-transition: fill-opacity 150ms ease, stroke-width 150ms ease;
transition: fill-opacity 150ms ease, stroke-width 150ms ease;
}
/* Unavailable for the current party size - dimmed + un-tappable. Toggled
by applyQty() when the ticket count exceeds a tier's open seats. */
/* Sold out / can't seat the party - GREY and visible (Passport parity),
never tappable. CSS fill/stroke override the tier colour. */
.k-chart-poly.is-soldout {
fill: #e2e5ea;
stroke: #9aa3b2;
fill-opacity: 0.22;
stroke-opacity: 0.4;
stroke-width: 2;
pointer-events: none;
cursor: default;
}
/* Available but outside the current price filter - keep the tier colour but
strongly muted, so selectable tiers clearly stand out. Still faintly visible
(widen the slider to reach them). Not tappable until in range. */
.k-chart-poly.is-dimmed {
fill-opacity: 0.06;
stroke-opacity: 0.28;
stroke-width: 2;
pointer-events: none;
cursor: default;
}
/* Price label centred in each selectable pill. Hidden until the chart is
zoomed past Z_LABEL (svg gets .is-labeled in applyTransform); only carried
by selectable tiers (toggled in applyFilters). White halo via paint-order
keeps it legible over any tier colour. */
.k-chart-price-label {
/* Inter (not Playfair) so "$199" sits on one baseline - Playfair raises
the $ and drops the digits, which needs more vertical room. */
font-family: Inter, system-ui, sans-serif;
font-weight: 800;
font-size: 8px; /* SVG user units - scales with zoom */
letter-spacing: -0.2px;
fill: var(--ink-1);
paint-order: stroke;
stroke: #ffffff;
stroke-width: 1.6px;
stroke-linejoin: round;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 160ms ease;
transition: opacity 160ms ease;
}
.k-chart-svg.is-labeled .k-chart-price-label { opacity: 1; }
.k-chart-price-label.is-hidden-label { display: none; } /* not selectable */
/* Selected state via CSS only - mountSeatChart just toggles this class
on the new/old polygon (O(1) instead of rewriting attrs on all N). */
/* Selected keeps the tier's own colour but gets a bold GOLD halo (matches
the calendar's gold-ring selection language), not an off-theme green. */
/* Selected tier: a SOLID glowing gold pill (CSS fill overrides the tier's
base colour), not just a gold outline. */
.k-chart-poly.is-selected {
fill: var(--gold-1);
stroke: var(--gold-3);
fill-opacity: 1;
stroke-opacity: 1;
stroke-width: 4;
-webkit-filter: drop-shadow(0 0 8px rgba(232, 181, 71, 0.85)) drop-shadow(0 2px 6px rgba(122, 16, 20, 0.30));
filter: drop-shadow(0 0 8px rgba(232, 181, 71, 0.85)) drop-shadow(0 2px 6px rgba(122, 16, 20, 0.30));
}
/* Tooltip floating over the selected tier (dark "curtain" pill + gold edge,
with a pointer triangle aimed at the tier). Positioned in JS; NO position
transition so it tracks the tier 1:1 during pan/zoom. */
.k-chart-tip {
position: absolute;
z-index: 6;
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
padding: 12px 20px;
background:
-webkit-linear-gradient(top, #2A0A0D 0%, #1A0406 100%);
background: linear-gradient(180deg, #2A0A0D 0%, #1A0406 100%);
border: 1px solid rgba(232, 181, 71, 0.55);
border-radius: 14px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
white-space: nowrap;
pointer-events: none;
}
.k-chart-tip.is-below {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.k-chart-tip > *:not(:last-child) { margin-right: 11px; }
.k-chart-tip-dot {
width: 15px; height: 15px; border-radius: 50%;
-ms-flex-negative: 0; flex-shrink: 0;
box-shadow: 0 0 0 2px rgba(232, 181, 71, 0.5);
}
.k-chart-tip-name {
font-family: Inter, sans-serif; font-size: 17px; font-weight: 700;
color: var(--cream-1);
}
.k-chart-tip-price {
font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: 22px;
color: var(--gold-3);
}
.k-chart-tip::after {
content: ''; position: absolute; left: 50%; margin-left: -7px;
width: 0; height: 0;
border-left: 7px solid transparent; border-right: 7px solid transparent;
bottom: -7px; border-top: 7px solid #1A0406;
}
.k-chart-tip.is-below::after {
bottom: auto; top: -7px;
border-top: none; border-bottom: 7px solid #2A0A0D;
}
/* Zoom + reset controls, top-right corner of the chart */
.k-chart-zoom {
position: absolute;
top: 14px; right: 14px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(201, 144, 48, 0.45);
border-radius: 12px;
box-shadow: 0 6px 16px rgba(26, 6, 8, 0.18);
overflow: hidden;
z-index: 5;
}
.k-zoom-btn {
width: 56px; height: 56px;
background: none;
border: none;
border-bottom: 1px solid rgba(201, 144, 48, 0.30);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: var(--ink-1);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.5px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-transition: background 120ms ease;
transition: background 120ms ease;
}
.k-zoom-btn:last-child { border-bottom: none; }
.k-zoom-btn:active { background: var(--cream-2); }
.k-zoom-btn svg { width: 22px; height: 22px; }
/* Info card directly below the chart */
.k-chart-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: var(--white);
border-radius: var(--r-card-lg);
box-shadow:
inset 0 0 0 1px rgba(232, 181, 71, 0.40),
0 8px 20px rgba(26, 6, 8, 0.08);
padding: 22px 28px;
min-height: 92px;
-webkit-transition: background 200ms ease;
transition: background 200ms ease;
}
.k-chart-info.is-empty {
background: var(--cream-1);
box-shadow: inset 0 0 0 1px rgba(232, 181, 71, 0.28);
}
.k-chart-info-hint {
width: 100%;
text-align: center;
color: var(--ink-soft);
font-size: 17px;
font-weight: 600;
letter-spacing: 0.3px;
}
.k-chart-info-left {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 0;
}
.k-chart-info-left > *:not(:last-child) { margin-right: 18px; }
.k-chart-info-right {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
text-align: right;
margin-left: 18px;
}
.k-chart-info-dot {
width: 28px; height: 28px;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
display: inline-block;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.k-chart-info-name {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
font-size: 28px;
color: var(--ink-1);
line-height: 1.1;
}
.k-chart-info-meta {
font-size: 14px;
font-weight: 600;
color: var(--ink-soft);
letter-spacing: 0.4px;
margin-top: 4px;
}
.k-chart-info-price {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 900;
font-size: 46px;
color: var(--red-2);
line-height: 1;
letter-spacing: -1px;
}
.k-chart-info-per {
font-size: 12px;
font-weight: 700;
color: var(--ink-soft);
letter-spacing: 1.2px;
text-transform: uppercase;
margin-top: 4px;
}
/* Loading skeleton inside the chart container */
.k-chart-skel {
position: relative;
width: 100%; height: 100%;
background: #ffffff; /* matches the real white chart */
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 28px 24px;
}
/* STAGE bar (reused) */
.k-skel-stage {
width: 42%;
min-width: 240px;
height: 44px;
background: rgba(243, 244, 246, 0.9);
border: 1px solid rgba(209, 213, 219, 0.7);
border-radius: 10px;
margin-bottom: 18px;
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
color: var(--ink-soft);
font-family: Inter, sans-serif;
font-size: 12px; font-weight: 800; letter-spacing: 2px;
}
/* ORCHESTRA / MEZZANINE tier labels */
.k-skel-tier-label {
color: var(--ink-soft);
font-family: Inter, sans-serif;
font-size: 12px; font-weight: 700; letter-spacing: 2px;
margin: 8px 0 12px;
}
/* Orchestra = a centred row of section blocks; Mezzanine = one wide block */
.k-skel-orch, .k-skel-mezz {
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
width: 100%; max-width: 760px;
}
.k-skel-orch { margin-bottom: 4px; }
.k-skel-orch > *:not(:last-child) { margin-right: 16px; }
.k-skel-cluster {
-webkit-box-flex: 1; -ms-flex: 1 1 0; flex: 1 1 0;
max-width: 230px;
padding: 14px 16px;
border: 1px solid rgba(209, 213, 219, 0.5);
border-radius: 12px;
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-orient: vertical; -webkit-box-direction: normal;
-ms-flex-direction: column; flex-direction: column;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.k-skel-mezz .k-skel-cluster { max-width: none; width: 100%; }
.k-skel-seatline {
height: 11px;
border-radius: 100px;
background: rgba(0, 0, 0, 0.07);
margin-bottom: 9px;
}
.k-skel-seatline:last-child { margin-bottom: 0; }
/* Budget-panel skeleton: real red card shell + placeholder chips/range/slider
that gently pulse, so the loading state mirrors the budget panel too. */
.k-price-chip-skel {
width: 86px; height: 44px;
padding: 0;
-webkit-animation: kpulse 1400ms ease-in-out infinite;
animation: kpulse 1400ms ease-in-out infinite;
}
.k-skel-range {
width: 96px; height: 22px;
border-radius: 6px;
background: rgba(232, 181, 71, 0.28);
-webkit-animation: kpulse 1400ms ease-in-out infinite;
animation: kpulse 1400ms ease-in-out infinite;
}
.k-skel-slider {
height: 6px;
margin: 6px 13px 4px;
border-radius: 100px;
background: rgba(0, 0, 0, 0.28);
-webkit-animation: kpulse 1400ms ease-in-out infinite;
animation: kpulse 1400ms ease-in-out infinite;
}
@-webkit-keyframes kpulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes kpulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.k-chart-skel::before {
content: '';
position: absolute;
top: 0; bottom: 0;
left: -100%;
width: 100%;
background:
-webkit-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(208,35,41,0.10) 50%, rgba(255,255,255,0) 100%);
background:
linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(208,35,41,0.10) 50%, rgba(255,255,255,0) 100%);
-webkit-animation: kshimmer 1600ms ease-in-out infinite;
animation: kshimmer 1600ms ease-in-out infinite;
z-index: 1;
}
.k-chart-loader-note {
position: absolute;
bottom: 18px; left: 0; right: 0;
text-align: center;
color: var(--ink-soft);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
}
/* =================================================================
PRICE FILTER PANEL (dual-ended slider + per-price chips)
Sits BELOW the seat chart. Same card vocabulary as the chart card:
white, gold inset hairline, soft shadow.
================================================================= */
.k-price-panel {
position: relative;
color: var(--cream-1);
/* Same premium marquee recipe as the top panel / show-page card. */
background:
-webkit-radial-gradient(ellipse 70% 90% at 18% 18%, rgba(255, 220, 200, 0.18) 0%, rgba(255, 200, 170, 0.06) 35%, transparent 65%),
-webkit-linear-gradient(top, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.00) 40%, rgba(0, 0, 0, 0.10) 100%),
-webkit-linear-gradient(135deg, var(--red-3) 0%, var(--red-2) 22%, var(--red-1) 55%, var(--red-deep) 100%);
background:
radial-gradient(ellipse 70% 90% at 18% 18%, rgba(255, 220, 200, 0.18) 0%, rgba(255, 200, 170, 0.06) 35%, transparent 65%),
linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.00) 40%, rgba(0, 0, 0, 0.10) 100%),
linear-gradient(135deg, var(--red-3) 0%, var(--red-2) 22%, var(--red-1) 55%, var(--red-deep) 100%);
border-radius: var(--r-card-lg);
box-shadow:
inset 0 0 0 1px rgba(244, 226, 176, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.10),
0 14px 32px rgba(74, 10, 12, 0.42),
0 4px 10px rgba(74, 10, 12, 0.22);
padding: 15px 26px 16px;
overflow: hidden;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-transform: translateZ(0); transform: translateZ(0);
}
.k-price-panel::before {
content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
background:
-webkit-radial-gradient(ellipse 110% 90% at 50% 50%, transparent 50%, rgba(74, 10, 12, 0.28) 100%);
background:
radial-gradient(ellipse 110% 90% at 50% 50%, transparent 50%, rgba(74, 10, 12, 0.28) 100%);
pointer-events: none; z-index: 0;
}
.k-price-panel > * { position: relative; z-index: 1; }
.k-price-panel-head {
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
margin-bottom: 12px;
}
.k-price-panel-title {
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
font-family: Inter, sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 2.6px;
text-transform: uppercase;
color: var(--gold-3);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
line-height: 1;
}
.k-price-panel-title::before {
content: ''; display: inline-block;
width: 32px; height: 2px; margin-right: 12px;
background:
-webkit-linear-gradient(90deg, var(--gold-2) 0%, var(--gold-1) 50%, var(--gold-3) 100%);
background:
linear-gradient(90deg, var(--gold-2) 0%, var(--gold-1) 50%, var(--gold-3) 100%);
box-shadow: 0 0 10px rgba(255, 210, 130, 0.70);
}
.k-price-range {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 900;
font-size: 26px;
line-height: 1;
color: var(--gold-3);
letter-spacing: -0.5px;
text-shadow: 0 1px 0 rgba(74, 10, 12, 0.5);
}
.k-price-range-dash {
color: rgba(251, 246, 236, 0.6);
margin: 0 8px;
font-weight: 700;
}
/* ----- dual range slider (refined, not toy-like) ----- */
.k-price-slider {
position: relative;
height: 34px;
margin: 4px 13px 6px; /* side margin = thumb radius so thumbs don't clip */
}
.k-price-track {
position: absolute;
left: 0; right: 0; top: 50%;
height: 6px;
margin-top: -3px;
border-radius: 100px;
background: rgba(0, 0, 0, 0.28);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.32);
}
.k-price-fill {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
border-radius: 100px;
background:
-webkit-linear-gradient(left, var(--gold-2) 0%, var(--gold-1) 55%, var(--gold-3) 100%);
background:
linear-gradient(90deg, var(--gold-2) 0%, var(--gold-1) 55%, var(--gold-3) 100%);
}
/* Two range inputs overlap the track. The input ignores pointer events (so
track clicks don't jump a thumb); only the thumbs are interactive, and they
sit at different x positions so both are grabbable. */
.k-price-input {
-webkit-appearance: none;
appearance: none;
position: absolute;
left: 0; right: 0; top: 0;
width: 100%;
height: 34px;
margin: 0;
background: transparent;
pointer-events: none;
}
.k-price-input::-webkit-slider-runnable-track {
height: 34px;
background: transparent;
border: none;
}
/* Elegant knob: white face, gold ring, small red core. Reads premium,
not like a saturated bouncy ball. */
.k-price-input::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: auto;
width: 24px; height: 24px;
margin-top: 5px; /* centre 24px thumb in the 34px input */
border-radius: 50%;
background: #ffffff;
border: 1.5px solid var(--gold-2);
box-shadow:
inset 0 0 0 4px var(--red-2),
inset 0 0 0 6px #ffffff,
0 2px 6px rgba(26, 6, 8, 0.32);
cursor: pointer;
}
.k-price-input::-webkit-slider-thumb:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* Full-extent scale under the slider (cheapest ... dearest seat). */
.k-price-scale {
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
margin: 0 13px 2px;
font-family: Inter, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
color: rgba(251, 246, 236, 0.7);
}
/* ----- per-price chips (centred; only the in-range subset is shown) ----- */
.k-price-chips {
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
-ms-flex-wrap: wrap; flex-wrap: wrap;
padding: 0;
margin-bottom: 12px; /* the slider now sits below the chips */
}
.k-price-chips > * { margin: 5px; }
.k-price-chip {
-ms-flex-negative: 0;
flex-shrink: 0;
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-orient: horizontal; -webkit-box-direction: normal;
-ms-flex-direction: row; flex-direction: row;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
min-height: 44px;
padding: 12px 17px;
box-sizing: border-box;
/* Compact pill: a translucent "control on red" inset with a gold hairline
and cream text (same vocabulary as the info buttons / dark track). */
color: var(--cream-1);
background: rgba(0, 0, 0, 0.20);
border: 1px solid rgba(232, 181, 71, 0.45);
border-radius: var(--r-pill);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-transition: -webkit-transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.k-price-chip:active { -webkit-transform: scale(0.96); transform: scale(0.96); }
.k-price-chip-dot {
width: 13px; height: 13px;
-ms-flex-negative: 0; flex-shrink: 0;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(232, 181, 71, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
margin-right: 9px;
}
.k-price-chip-amt {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800;
font-size: 19px;
line-height: 1;
color: var(--cream-1);
}
/* Selected exact price - solid glowing gold pill with ink text (no harsh
white ring), so it reads premium. */
.k-price-chip.is-active {
background:
-webkit-linear-gradient(top, var(--gold-3) 0%, var(--gold-1) 60%, var(--gold-2) 100%);
background:
linear-gradient(180deg, var(--gold-3) 0%, var(--gold-1) 60%, var(--gold-2) 100%);
border-color: var(--gold-2);
box-shadow:
0 0 16px rgba(232, 181, 71, 0.55),
0 6px 14px rgba(26, 6, 8, 0.30);
}
.k-price-chip.is-active .k-price-chip-amt { color: var(--ink-1); }
.k-price-chip.is-active .k-price-chip-dot {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75), inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
/* Outside the slider range - not shown at all (keeps the choice small). */
.k-price-chip.is-hidden { display: none; }
/* =================================================================
SECTION TOP PANEL (poster + show/theatre/date/time + selection +
tickets). Replaces the old plain summary bar.
================================================================= */
.k-sec-top {
position: relative;
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
color: var(--cream-1);
/* Exact premium marquee recipe from the show page's awards/GTK card
(.k-card-merged): warm upper-left spotlight + top-light/bottom-shade +
the red diagonal. */
background:
-webkit-radial-gradient(ellipse 70% 90% at 18% 18%, rgba(255, 220, 200, 0.18) 0%, rgba(255, 200, 170, 0.06) 35%, transparent 65%),
-webkit-linear-gradient(top, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.00) 40%, rgba(0, 0, 0, 0.10) 100%),
-webkit-linear-gradient(135deg, var(--red-3) 0%, var(--red-2) 22%, var(--red-1) 55%, var(--red-deep) 100%);
background:
radial-gradient(ellipse 70% 90% at 18% 18%, rgba(255, 220, 200, 0.18) 0%, rgba(255, 200, 170, 0.06) 35%, transparent 65%),
linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.00) 40%, rgba(0, 0, 0, 0.10) 100%),
linear-gradient(135deg, var(--red-3) 0%, var(--red-2) 22%, var(--red-1) 55%, var(--red-deep) 100%);
/* Top corners rounded; bottom squared so it joins the chart as one card. */
border-radius: var(--r-card-lg) var(--r-card-lg) 0 0;
box-shadow:
inset 0 0 0 1px rgba(244, 226, 176, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.10),
0 14px 32px rgba(74, 10, 12, 0.42),
0 4px 10px rgba(74, 10, 12, 0.22);
padding: 20px 26px;
margin-bottom: 0;
overflow: hidden;
-webkit-transform: translateZ(0); transform: translateZ(0);
}
.k-sec-top::before {
content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
background:
-webkit-radial-gradient(ellipse 110% 90% at 50% 50%, transparent 50%, rgba(74, 10, 12, 0.28) 100%);
background:
radial-gradient(ellipse 110% 90% at 50% 50%, transparent 50%, rgba(74, 10, 12, 0.28) 100%);
pointer-events: none; z-index: 0;
}
.k-sec-top > * { position: relative; z-index: 1; }
.k-sec-top > *:not(:last-child) { margin-right: 22px; }
.k-sec-poster {
-ms-flex-negative: 0; flex-shrink: 0;
width: 82px; height: 122px;
border-radius: 10px;
overflow: hidden;
background: var(--ink-2);
box-shadow:
0 8px 18px rgba(26, 6, 8, 0.30),
inset 0 0 0 1px rgba(232, 181, 71, 0.55);
}
.k-sec-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-sec-meta {
-webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto;
min-width: 0;
}
.k-sec-show {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800; font-size: 30px;
color: var(--cream-1);
line-height: 1.06;
text-shadow: 0 1px 0 rgba(74, 10, 12, 0.55);
}
/* Line 2: theatre. Line 3: date · time. */
.k-sec-venue {
margin-top: 7px;
color: #ffffff;
font-weight: 700; font-size: 17px; letter-spacing: 0.3px;
}
.k-sec-when {
display: -webkit-box; display: -ms-flexbox; display: flex;
-ms-flex-wrap: wrap; flex-wrap: wrap;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
margin-top: 5px;
color: rgba(251, 246, 236, 0.82);
font-size: 16px; font-weight: 600; letter-spacing: 0.3px;
}
.k-sec-when > * { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.k-sec-when > *:not(:last-child)::after {
content: '\00B7'; /* middot */
margin: 0 10px;
color: var(--gold-3);
font-weight: 800;
}
/* Live selection - RIGHT side of the show panel, where the price reads
large. A dashed gold rule separates it from the show details. */
.k-sec-pick {
-ms-flex-negative: 0; flex-shrink: 0;
-ms-flex-item-align: stretch; align-self: stretch;
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-orient: vertical; -webkit-box-direction: normal;
-ms-flex-direction: column; flex-direction: column;
-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
-webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
text-align: right;
min-width: 210px;
/* Reserve the selected-state height so the panel never changes height
between the "tap to choose" hint and a populated selection. */
min-height: 96px;
padding-left: 26px;
margin-left: 4px;
border-left: 1px dashed rgba(244, 226, 176, 0.30);
}
.k-sec-pick.is-empty { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.k-sec-pick-hint { font-size: 13px; color: rgba(251, 246, 236, 0.8); font-weight: 600; letter-spacing: 0.3px; }
.k-sec-pick.is-soldout {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.k-sec-pick.is-soldout .k-sec-pick-label { color: var(--gold-3); }
.k-sec-pick.is-soldout .k-sec-pick-name { color: #ffffff; }
.k-sec-pick-icon {
width: 22px;
height: 22px;
color: var(--gold-3);
}
.k-sec-pick-label {
font-family: Inter, sans-serif;
font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase;
color: var(--gold-3);
}
.k-sec-pick-name-row {
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
margin-top: 6px;
}
.k-sec-pick-name-row > *:not(:last-child) { margin-right: 8px; }
.k-sec-pick-dot {
-ms-flex-negative: 0; flex-shrink: 0;
width: 14px; height: 14px; border-radius: 50%;
box-shadow: 0 1px 4px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(0,0,0,0.06);
}
.k-sec-pick-name {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800; font-size: 21px; color: var(--cream-1); line-height: 1;
}
.k-sec-pick-meta { margin-top: 5px; font-size: 13px; color: rgba(251, 246, 236, 0.8); font-weight: 600; }
.k-sec-pick-price {
margin-top: 8px;
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline;
}
.k-sec-pick-price-amt {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 900; font-size: 30px; color: var(--gold-3); line-height: 1; letter-spacing: -0.5px;
text-shadow: 0 1px 0 rgba(74, 10, 12, 0.5);
}
.k-sec-pick-price-per {
margin-left: 6px;
font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
color: rgba(251, 246, 236, 0.75);
}
/* =================================================================
SECTION HEAD ROW ("3" badge + title on the left; a compact
horizontal red tickets widget on the right, aligned to THIS row
only - not merged with the back-link row above it).
================================================================= */
.k-sec-head {
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
margin-bottom: 16px;
}
.k-sec-title-row {
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
min-width: 0;
}
.k-sec-title-row .k-card-step { margin-right: 16px; }
.k-sec-title-row .k-section-title { margin: 0; }
/* Tickets widget: a compact horizontal red card (label LEFT, then the
[- value +] stepper). Card radius, themed like the budget/show cards. */
.k-screen[data-screen="section"] .k-qty {
-ms-flex-negative: 0; flex-shrink: 0;
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-orient: horizontal; -webkit-box-direction: normal;
-ms-flex-direction: row; flex-direction: row;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
padding: 7px 12px 7px 20px;
border-radius: var(--r-card);
color: var(--cream-1);
background:
-webkit-radial-gradient(ellipse 80% 90% at 20% 16%, rgba(255, 220, 200, 0.16) 0%, rgba(255, 200, 170, 0.05) 38%, transparent 68%),
-webkit-linear-gradient(135deg, var(--red-3) 0%, var(--red-2) 24%, var(--red-1) 58%, var(--red-deep) 100%);
background:
radial-gradient(ellipse 80% 90% at 20% 16%, rgba(255, 220, 200, 0.16) 0%, rgba(255, 200, 170, 0.05) 38%, transparent 68%),
linear-gradient(135deg, var(--red-3) 0%, var(--red-2) 24%, var(--red-1) 58%, var(--red-deep) 100%);
box-shadow:
inset 0 0 0 1px rgba(244, 226, 176, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.10),
0 8px 18px rgba(74, 10, 12, 0.30);
}
.k-screen[data-screen="section"] .k-qty.is-disabled {
opacity: 0.74;
}
.k-screen[data-screen="section"] .k-qty.is-disabled .k-qty-btn {
cursor: default;
}
.k-screen[data-screen="section"] .k-qty-label {
margin: 0 16px 0 0;
color: var(--gold-3);
font-family: Inter, sans-serif;
font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
}
.k-qty-stepper {
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.k-qty-stepper > *:not(:last-child) { margin-right: 12px; }
.k-screen[data-screen="section"] .k-qty-val {
color: var(--cream-1);
font-size: 24px;
min-width: 28px;
text-shadow: 0 1px 0 rgba(74, 10, 12, 0.5);
}
/* Stepper buttons: compact, dark translucent + gold hairline + cream glyph
(the "control on red" treatment, matching the price chips). */
.k-screen[data-screen="section"] .k-qty-btn {
width: 44px; height: 44px;
background: rgba(0, 0, 0, 0.22);
color: var(--cream-1);
box-shadow: inset 0 0 0 1px rgba(232, 181, 71, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.k-screen[data-screen="section"] .k-qty-btn .k-icon { width: 20px; height: 20px; }
.k-screen[data-screen="section"] .k-qty-btn[disabled] { opacity: 0.35; }