/* homepage.css — extracted from index-v1.blade.php
Homepage-only styles: hero/clouds/plane, boarding pass, events grid +
swipe deck, PWA scanner, how-it-works (v9 freeze-frame), floating
buttons, preloader, "coming soon" modal. Concatenated in the exact
order these rules appeared in the Blade file, so cascade/specificity
is unchanged. Depends on CSS custom properties defined by the parent
layout (frontend.layout): --tix-warm, --tix-burgundy, --tix-dark,
--tix-metallic, --tix-burgundy-rgb, plus fonts declared inline in
index-v1.blade.php's @font-face block (kept there because they need
Laravel's asset() helper). */
/* ── Local Fonts no external requests ── */
/* Lenis Base CSS */
html.lenis {
height: auto;
}
.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis-stopped {
overflow: hidden;
}
:root {
--text: #1A1614;
--transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--tix-warm);
/* Why .page-wrapper uses overflow: clip, not hidden (would break the boarding-pass sticky pin) */
overflow-x: clip;
}
/* Defensive overflow: clip on .page-wrapper in case a theme sets overflow:hidden */
.page-wrapper { overflow: clip; }
/* Hero */
.hero {
height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top: -40px;
}
.hero h1 {
font-family: 'BBH Sans Hegarty', sans-serif;
font-size: clamp(3rem, 12vw, 8rem);
font-weight: 400;
text-transform: uppercase;
color: var(--text);
position: relative;
z-index: 2;
/* Hero title ENTRANCE — held small until the preloader clears, then scales to normal size */
transform: scale(0.78);
opacity: 0;
transform-origin: center center;
will-change: transform, opacity;
}
/* Identical duration and curve to .hero-cloud, started by the same
class in the same frame, so the title arrives WITH the clouds. */
body.tix-hero-ready .hero h1 {
transform: scale(1);
opacity: 1;
transition: transform 1.25s cubic-bezier(0.12, 0.86, 0.2, 1),
opacity 0.6s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.hero h1 { transform: none !important; opacity: 1 !important; transition: none !important; }
}
.hero p {
color: var(--accent);
letter-spacing: 3px;
text-transform: uppercase;
}
.hero .hero-content { position: relative; z-index: 2; }
/* HERO CLOUDS — scroll-driven atmospheric flight: entrance, flight and cleared stages */
.hero-cloud-wrapper {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.hero-cloud-wrapper.is-cleared,
.hero-cloud-front.is-cleared { visibility: hidden; }
.hero-cloud-layer {
position: absolute;
inset: 0;
}
/* Per-tier cloud ENTRANCE personality, read by the heroCloudIn keyframes */
.hero-cloud-layer--bg { z-index: 1; --enter-x: 62vw; --enter-y: 1.5vh; --enter-s: 1.04; --enter-dur: 2.3s; }
.hero-cloud-layer--mid { z-index: 2; --enter-x: 88vw; --enter-y: 2.5vh; --enter-s: 1.09; --enter-dur: 1.95s; }
.hero-cloud-layer--bottom { z-index: 3; --enter-x: 115vw; --enter-y: 4vh; --enter-s: 1.18; --enter-dur: 1.6s; }
/* FOREGROUND cloud tier — lives inside .hero so it can render above the h1 title */
.hero-cloud-front {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 3;
overflow: hidden;
}
.hero-cloud-layer--fg {
z-index: 1;
opacity: 0.85; /* static never animated */
--enter-x: 115vw; --enter-y: 5vh; --enter-s: 1.24; --enter-dur: 1.7s;
}
/* Clouds held off-screen until the preloader is genuinely gone */
.hero-cloud {
position: absolute;
width: var(--w, 220px); height: auto;
left: var(--x, 50%); top: var(--y, 50%);
pointer-events: none;
opacity: 0;
transform: translate3d(calc(var(--from, -1) * var(--enter-x, 115vw)), var(--enter-y, 0px), 0) scale(var(--enter-s, 1.06));
}
/* Cloud ENTRANCE easing — expo-out deceleration, per-tier travel/scale/duration */
body.tix-hero-ready .hero-cloud {
will-change: transform, opacity; /* only while the entrance runs */
animation: heroCloudIn var(--enter-dur, 1.6s) cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s) both;
}
/* SETTLED — JS drops the entrance animation once it ends, holding the same end state */
body.tix-hero-ready .hero-cloud.is-settled {
animation: none;
will-change: auto;
opacity: 1;
transform: none;
}
/* FLIGHT element — GPU layer promoted only while the scroll-driven flight is in progress */
.hero-cloud-scroll {
display: block;
transform-origin: 50% 50%;
}
.hero-cloud-wrapper.is-flying .hero-cloud-scroll,
.hero-cloud-front.is-flying .hero-cloud-scroll { will-change: transform; }
/* GPU SAVER — hero-clouds-paused also freezes the boarding-pass loops when the hero is off-screen */
body.hero-clouds-paused .tixhero-pass-front,
body.hero-clouds-paused .tixhero-pass-badge-dot,
/* Pass float now pauses when the pass itself is off-screen, not just when the hero is */
.tixhero-pass-wrap.is-offscreen .tixhero-pass-front {
animation-play-state: paused !important;
will-change: auto;
}
body.hero-clouds-paused .tixhero-glow-text::after {
animation-play-state: paused !important;
will-change: auto;
}
/* Last-resort safety: if the gate script never runs, don't leave the
clouds parked off-screen forever. */
body.tix-hero-failsafe .hero-cloud {
opacity: 1;
transform: none;
transition: opacity .6s ease, transform .6s ease;
}
body.tix-hero-failsafe .hero h1 { opacity: 1; transform: scale(1); }
.hero-cloud img {
display: block; width: 100%; height: auto;
opacity: var(--op, 0.7);
filter: drop-shadow(0 12px 20px rgba(26,22,20,0.10));
}
@keyframes heroCloudIn {
from { transform: translate3d(calc(var(--from, -1) * var(--enter-x, 115vw)), var(--enter-y, 0px), 0) scale(var(--enter-s, 1.06)); opacity: 0; }
22% { opacity: 1; }
to { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}
@media (max-width:767px) {
.hero-cloud { width: calc(var(--w,220px) * 0.6); }
/* Shorter travel on phones so the entrance still reads as quick */
.hero-cloud-layer--bg { --enter-x: 80vw; }
.hero-cloud-layer--mid { --enter-x: 105vw; }
.hero-cloud-layer--bottom,
.hero-cloud-layer--fg { --enter-x: 130vw; }
}
/* Desktop-only: static softening on distant cloud tiers, screen-blend on foreground wisps */
@media (hover: hover) and (pointer: fine) {
.hero-cloud-layer--bg .hero-cloud img { filter: blur(2.5px); }
.hero-cloud-layer--mid .hero-cloud img { filter: blur(1px); }
.hero-cloud-layer--fg .hero-cloud img { mix-blend-mode: screen; }
}
/* Touch devices: no filters, no blend modes the cheapest possible
paint for each cloud while the flight is running. */
@media (hover: none), (pointer: coarse) {
.hero-cloud img { filter: none; }
.hero-cloud-layer--bg .hero-cloud img { opacity: calc(var(--op, 0.7) * 0.72); }
.hero-cloud-layer--mid .hero-cloud img { opacity: calc(var(--op, 0.7) * 0.86); }
}
@media (prefers-reduced-motion:reduce) {
.hero-cloud { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* THE PLANE Safari-optimized */
.plane-container {
position: fixed;
bottom: -1100px;
left: 50%;
width: min(1200px, 90vw);
z-index: 15;
pointer-events: none;
/* Centering baked in ONCE via margin (not the live transform),
so the per-frame transform stays as cheap as possible. */
margin-left: calc(min(1200px, 90vw) / -2);
/* Light GPU layer: no perspective, no scale, no filter. */
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform, opacity;
contain: layout paint;
}
/* GPU SAVER — plane transform writes dropped while scroll is far outside its visible range */
.plane-container.tix-plane-idle {
will-change: auto;
}
.plane-container img {
display: block;
width: 100%;
height: auto;
/* Flatten into the parent layer; no nested compositor layer. */
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Sections General */
section {
position: relative;
z-index: 10;
padding: 100px 10%;
}
/* "Find your next event" booking card now inside category section */
.booking-card {
position: relative;
background: var(--tix-burgundy-rgb);
padding: 0 0 28px;
border-radius: 18px;
display: flex;
flex-direction: column;
z-index: 10;
overflow: hidden;
width: 100%;
max-width: 960px;
margin: 0 auto;
}
/* 4-color brand strip across the very top of the card */
.booking-strip {
display: block;
width: 100%;
height: 5px;
background: linear-gradient(90deg,
var(--tix-burgundy) 0 25%,
#6F9F8F 25% 50%,
#E6B85C 50% 75%,
#5F7FA3 75% 100%);
}
/* Card header */
.booking-head {
position: relative;
z-index: 5;
text-align: center;
padding: 34px 24px 4px;
}
.booking-badge {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 14px;
border-radius: 999px;
background: rgba(var(--tix-burgundy-rgb), 0.12);
border: 1px solid rgba(var(--tix-burgundy-rgb), 0.3);
color: #D97A6A;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 16px;
}
.booking-badge i { font-size: 11px; }
.booking-title {
color: #fff;
font-family: 'BBH Sans Hegarty', sans-serif;
font-size: clamp(24px, 3.4vw, 36px);
font-weight: 800;
letter-spacing: -0.01em;
margin: 0 0 8px;
line-height: 1.1;
}
.booking-sub {
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
margin: 0 auto;
max-width: 460px;
line-height: 1.5;
}
/* Footer trust row inside the card */
.booking-foot {
position: relative;
z-index: 5;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
padding: 4px 24px 0;
}
.booking-foot-item {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.55);
font-size: 12px;
font-weight: 500;
}
.booking-foot-item i { color: rgba(255, 255, 255, 0.4); font-size: 12px; }
.booking-foot-item .fa-whatsapp { color: #25D366; }
.booking-foot-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
}
@media (max-width: 900px) {
.features-grid,
.destination-grid,
.footer-grid {
grid-template-columns: 1fr;
}
.plane-container {
width: 156%; /* 20% bigger than the previous 130%, mobile only */
/* Recenter for the wider mobile width (margin = -width/2). */
margin-left: -78%;
}
.plane-container img {
width: 100%;
height: auto;
}
}
.section-title,
.section-title p,
.client-logo-area h5 {
font-family: 'Shadows Into Light', cursive !important;
letter-spacing: 1px;
}
.section-title {
font-size: 3rem;
font-weight: 700;
line-height: 1.1;
}
.section-title p {
font-size: 1.5rem;
font-weight: 400;
max-width: 700px;
margin: 0 auto;
}
.client-logo-area h5 {
font-size: 2rem;
font-weight: 700;
}
details>summary::-webkit-details-marker {
display: none;
}
details>summary {
list-style: none;
}
details[open]>summary>span:last-child {
background: #5F7FA3 !important;
color: #fff !important;
border-color: #5F7FA3 !important;
transform: rotate(45deg);
}
#event-search {
position: relative;
z-index: 5;
display: grid !important;
grid-template-columns: 1fr 1fr auto;
align-items: center;
justify-content: center;
gap: 18px;
max-width: 860px;
width: 100%;
margin: 28px auto 24px;
padding: 0 35px;
border-radius: 8px;
}
/* Glow circles removed per design replaced by the card's subtle
gradient background, which stays fully contained (no bleed). */
/* dotted decorations kept subtle and clipped inside the card */
.grid-dots {
position: absolute;
width: 70px;
height: 70px;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.12) 2px, transparent 2px);
background-size: 16px 16px;
z-index: 1;
pointer-events: none;
}
.left-dots {
top: 18px;
left: 18px;
}
.right-dots {
right: 18px;
bottom: 18px;
}
/* search boxes */
#event-search select {
flex: 1;
width: 100%;
height: 100%;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 4px center !important;
background-size: 12px !important;
border: none !important;
outline: none !important;
color: #1A1614 !important;
font-size: 20px;
font-weight: 500;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
padding-right: 22px;
}
#event-search select option {
background: #ffffff;
color: #1A1614;
}
/* icons */
#event-search .search-item label {
color: #C0392B;
font-size: 20px;
margin-bottom: 0;
}
#event-search .search-item {
position: relative;
z-index: 5;
width: 100%;
min-width: 0;
height: 68px;
display: flex;
align-items: center;
padding: 0 50px;
border-radius: 8px;
background: var(--tix-warm);
border: 1px solid rgba(255, 255, 255, 0.15);
margin-bottom: 3px;
}
/* Vertical divider between search items on desktop */
@media (min-width: 992px) {
#event-search .search-item:first-child {
border-right: 1px solid rgba(0,0,0,0.1);
border-radius: 8px 0 0 8px;
}
#event-search .search-item:nth-child(2) {
border-radius: 0 8px 8px 0;
}
}
/* dropdown arrow */
.dropdown-icon {
color: #C0392B;
font-size: 22px;
}
/* fields */
#event-search select,
#event-search input {
flex: 1;
width: 100%;
height: 100%;
background: transparent !important;
border: none !important;
outline: none !important;
color: #1A1614 !important;
font-size: 22px;
font-weight: 500;
}
/* placeholder */
#event-search input {
color: #1A1614 !important;
font-size: 18px;
}
/* button */
.search-btn {
z-index: 5;
width: 180px;
height: 68px;
border: 1px solid #C0392B;
border-radius: 6px;
background: linear-gradient(180deg, #C0392B 0%, #C0392B 100%);
color: #fff;
font-size: 16px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 0 12px rgba(var(--tix-burgundy-rgb), 0.18);
transition: all 0.3s ease;
}
.search-btn:hover {
background: transparent;
color: #C0392B !important;
border: 1px solid #C0392B;
box-shadow: none;
}
/* mobile */
@media (max-width: 991px) {
#event-search {
grid-template-columns: 1fr;
max-width: 100%;
padding: 0 18px;
gap: 14px;
border-radius: 22px;
margin: 22px auto 18px;
}
#event-search .search-item {
height: 58px;
padding: 0 16px;
border-radius: 5px;
}
#event-search select,
#event-search input {
font-size: 1.1em;
}
.search-btn {
width: 100%;
height: 56px;
font-size: 16px;
border-radius: 5px;
margin-top: 0;
}
#event-search .search-item label {
font-size: 15px;
}
.booking-head { padding: 26px 18px 0; }
.booking-foot { gap: 8px; padding: 8px 18px 0; }
.booking-foot-item { font-size: 11px; }
/* Hide the corner dot grids on phones so they don't crowd content */
.grid-dots { display: none; }
}
.tixhero-pass-container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 30px;
border-radius: 28px;
/* (faint white tint removed it read as a haze sliding up before the plane) */
}
/* Boarding-pass FREEZE / PIN — sticky pin mechanics */
.tixhero-pin { position: relative; height: 160vh; }
.tixhero-pin > .tixhero-pass-container {
position: sticky;
/* Above the fixed cloud layer (z-index 1) in every scroll state, so
no cloud can ever sit over the pass text, QR or CTA. */
z-index: 6;
/* The `top` value that controls when the boarding-pass freeze/pin engages */
top: 20vh;
min-height: 60vh;
align-items: center;
}
/* Mobile override: boarding-pass SVG renders smaller (vh-based) than desktop */
@media (max-width: 767px) {
.tixhero-pin { height: 110vh; }
.tixhero-pin > .tixhero-pass-container {
top: 35vh;
min-height: 30vh;
}
}
.tixhero-pass-wrap {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.tixhero-pass-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 110%;
height: 100%;
background: radial-gradient(ellipse at center,
rgba(var(--tix-burgundy-rgb), 0.25) 0%,
rgba(var(--tix-burgundy-rgb), 0) 60%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
}
/* iOS / touch-device performance guards — expensive blur avoided everywhere on touch */
/* Desktop backdrop-filter on the pass container was removed (was smearing the clouds behind it) */
/* On touch devices, drop the heavy static glow blur entirely. */
@media (hover: none), (pointer: coarse) {
.tixhero-pass-glow {
filter: none;
background: radial-gradient(ellipse at center,
rgba(var(--tix-burgundy-rgb), 0.15) 0%,
rgba(var(--tix-burgundy-rgb), 0) 60%);
}
/* Plane kept on its own GPU layer so the big→small scale stays smooth on mobile */
.plane-container {
will-change: transform;
}
}
.tixhero-pass-back {
position: absolute;
top: 26px;
left: 50%;
width: 92%;
transform: translateX(-50%) rotate(4deg);
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.22));
opacity: 0.85;
z-index: 1;
}
.tixhero-pass-front {
position: relative;
transform: rotate(-2deg);
filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.28));
animation: tixheroFloat 6s ease-in-out infinite;
z-index: 2;
}
/* WELCOME ABOARD crossfade — the welcome panel overlays the front pass, sharing its rotation/float */
.tixhero-pass-front > svg:not(.tixhero-pass-welcome) {
transition: opacity 1.1s ease-in-out;
}
.tixhero-pass-welcome {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1.1s ease-in-out;
pointer-events: none;
}
.tixhero-pass-wrap.is-boarded .tixhero-pass-front > svg:not(.tixhero-pass-welcome) {
opacity: 0;
}
.tixhero-pass-wrap.is-boarded .tixhero-pass-welcome {
opacity: 1;
}
/* Create Event CTA — real HTML button (not SVG text) positioned over the pass */
.tixhero-pass-cta {
position: absolute;
left: 50%;
/* Single anchor for every viewport the panel behind it scales, so
a percentage keeps the CTA on the same spot in the composition. */
top: 79%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
margin-top: clamp(-25px, -3.4vw, -14px);
justify-content: center;
gap: clamp(6px, 1.1vw, 8px);
padding: clamp(10px, 1.7vw, 13px) clamp(20px, 4.2vw, 30px);
background: var(--tix-burgundy);
color: #fff;
font-family: 'BBH Sans Hegarty', sans-serif;
font-weight: 700;
font-size: clamp(11px, 1.9vw, 14px);
letter-spacing: 0.5px;
text-transform: uppercase;
border-radius: 8px; /* near-rectangle, softly rounded corners */
text-decoration: none;
white-space: nowrap;
opacity: 0;
pointer-events: none;
overflow: hidden;
isolation: isolate;
transition: opacity 1.1s ease-in-out, transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 6px 16px rgba(var(--tix-burgundy-rgb), 0.35);
}
/* Animated running trail — light beam travels around the CTA button's border */
@keyframes tixCtaTrail {
to { transform: rotate(360deg); }
}
.tixhero-pass-cta svg { width: clamp(13px, 2.2vw, 15px); height: clamp(13px, 2.2vw, 15px); flex-shrink: 0; }
.tixhero-pass-cta:hover {
color: #fff;
transform: translate(-50%, -50%) scale(1.04);
box-shadow: 0 8px 22px rgba(var(--tix-burgundy-rgb), 0.45);
}
.tixhero-pass-wrap.is-boarded .tixhero-pass-cta {
opacity: 1;
pointer-events: auto;
}
@media (max-width: 575px) {
/* No separate mobile geometry: the clamp() values above cover every
viewport, so desktop and mobile stay the same composition. */
.tixhero-pass-cta svg { width: clamp(13px, 2.2vw, 15px); height: clamp(13px, 2.2vw, 15px); }
}
@keyframes tixheroFloat {
0%,
100% {
transform: rotate(-2deg) translateY(0);
}
50% {
transform: rotate(-2deg) translateY(-12px);
}
}
.tixhero-pass-badge {
position: absolute;
bottom: -6px;
left: 8px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: #fff;
color: #1A1614;
font-size: 12px;
font-weight: 700;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
transform: rotate(-2deg);
z-index: 3;
}
.tixhero-pass-badge-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #6F9F8F;
box-shadow: 0 0 8px rgba(22, 163, 74, 0.6);
animation: tixheroPulse 1.6s ease-in-out infinite;
}
@keyframes tixheroPulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
}
@media (max-width: 575px) {
.tixhero-pass-back {
display: none;
}
.tixhero-pass-front {
animation: none;
/* Lighter shadow on phones the heavy desktop drop-shadow looks
bulky on small screens. Tune the values to taste. */
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.16));
}
.tixhero-pass-container {
padding: 12px;
}
}
/* TIXXIE MASCOT — animated AI agent character */
.tixxie-intro {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.tixxie-mascot {
flex-shrink: 0;
cursor: pointer;
}
/* Tixxie PNG mascot keeps the same gentle float as the old SVG */
.tixxie-png {
display: block;
width: 350px;
height: auto;
flex-shrink: 0;
animation: tixxieFloat 4s ease-in-out infinite;
}
.tixxie-mascot:hover .tixxie-png {
animation: tixxieFloatFast 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.tixxie-png { animation: none !important; }
}
/* gentle float with a tiny sway */
.tixxie-body {
transform-origin: 70px 85px;
animation: tixxieFloat 4s ease-in-out infinite;
}
@keyframes tixxieFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-6px) rotate(-1.5deg); }
50% { transform: translateY(-9px) rotate(0deg); }
75% { transform: translateY(-6px) rotate(1.5deg); }
}
/* shadow pulses opposite the float */
.tixxie-shadow {
transform-origin: center;
animation: tixxieShadow 4s ease-in-out infinite;
}
@keyframes tixxieShadow {
0%, 100% { transform: scaleX(1); opacity: 0.28; }
50% { transform: scaleX(0.75); opacity: 0.14; }
}
/* antenna tip glows */
.tixxie-antenna-tip {
animation: tixxieGlow 1.8s ease-in-out infinite;
}
@keyframes tixxieGlow {
0%, 100% { fill: #E6B85C; }
50% { fill: #F5D98A; }
}
/* antenna ring radiates outward like a signal */
.tixxie-antenna-ring {
transform-origin: 70px 10px;
animation: tixxieRing 1.8s ease-out infinite;
}
@keyframes tixxieRing {
0% { transform: scale(0.6); opacity: 0.7; }
100% { transform: scale(2.4); opacity: 0; }
}
/* eyes blink */
.tixxie-eye {
animation: tixxieBlink 4s ease-in-out infinite;
transform-origin: center;
transform-box: fill-box;
}
@keyframes tixxieBlink {
0%, 92%, 100% { transform: scaleY(1); }
95% { transform: scaleY(0.1); }
}
/* smile gently breathes */
.tixxie-smile {
animation: tixxieSmile 4s ease-in-out infinite;
}
@keyframes tixxieSmile {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(1px); }
}
/* arm waves */
.tixxie-arm {
transform-origin: 100px 110px;
animation: tixxieWave 2.6s ease-in-out infinite;
}
@keyframes tixxieWave {
0%, 55%, 100% { transform: rotate(0deg); }
65% { transform: rotate(-24deg); }
75% { transform: rotate(10deg); }
85% { transform: rotate(-18deg); }
}
/* On hover, Tixxie waves faster + bounces a little higher */
.tixxie-mascot:hover .tixxie-arm {
animation: tixxieWaveFast 0.55s ease-in-out infinite;
}
@keyframes tixxieWaveFast {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(-30deg); }
}
.tixxie-mascot:hover .tixxie-body {
animation: tixxieFloatFast 1.2s ease-in-out infinite;
}
@keyframes tixxieFloatFast {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
.tixxie-body, .tixxie-shadow, .tixxie-antenna-tip, .tixxie-antenna-ring,
.tixxie-eye, .tixxie-smile, .tixxie-arm { animation: none !important; }
}
/* HERO PARAGRAPH — slow glow + fade in/out */
/* Hero subtitle: no pin/freeze, arrives as the third entrance beat; glow settles after 3 pulses */
.tixhero-glow-text {
opacity: 0;
transform: translate3d(0, 22px, 0);
letter-spacing: 6px;
position: relative; /* anchors the glow layer */
isolation: isolate; /* keeps the z-index:-1 glow inside this element */
}
.tixhero-glow-text::after {
content: attr(data-text);
/* Hide the duplicate glow-copy text from screen readers where supported */
content: attr(data-text) / "";
position: absolute;
inset: 0;
z-index: -1;
box-sizing: border-box;
margin: 0;
padding: inherit; /* same box as the real text → identical wrapping */
color: transparent; /* only the shadow is visible */
text-shadow: 0 0 18px rgba(255,255,255,0.55), 0 0 32px rgba(var(--tix-burgundy-rgb),0.25);
opacity: 0.3; /* resting glow once the pulses finish */
pointer-events: none;
user-select: none;
-webkit-user-select: none;
}
body.tix-hero-ready .tixhero-glow-text {
opacity: 1;
transform: translate3d(0, 0, 0);
letter-spacing: 3px;
transition: opacity 0.8s ease-out 0.28s,
transform 1.05s cubic-bezier(0.12, 0.86, 0.2, 1) 0.28s,
letter-spacing 1.05s cubic-bezier(0.12, 0.86, 0.2, 1) 0.28s;
}
/* Glow pulses on the same trigger/delay as before, but stop after 3 iterations */
body.tix-hero-ready .tixhero-glow-text::after {
animation: tixHeroGlow 4.5s ease-in-out 1.9s 3 both;
}
body.tix-hero-failsafe .tixhero-glow-text {
opacity: 1; transform: none; letter-spacing: 3px;
}
@media (max-width: 767px) {
.hero .tixhero-glow-text,
body.tix-hero-ready .tixhero-glow-text {
font-size: 12px;
line-height: 1.75;
letter-spacing: 2px;
}
}
@media (max-width: 400px) {
.hero .tixhero-glow-text,
body.tix-hero-ready .tixhero-glow-text {
font-size: 11px;
line-height: 1.7;
letter-spacing: 1.4px;
}
}
/* opacity ONLY never text-shadow / filter / blur radius */
@keyframes tixHeroGlow {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.tixhero-glow-text {
animation: none !important;
opacity: 1 !important;
transform: none !important;
letter-spacing: 3px !important;
transition: none !important;
}
/* keep the glow, drop the pulses */
.tixhero-glow-text::after { animation: none !important; }
}
/* HERO → DISCOVER EVENTS section transition */
/* TIXXIE INTERACTIVE TRY — tap a prompt, watch her reply */
.tixxie-try { max-width: 380px; margin: 22px auto 0; }
.tixxie-try-label {
text-align: center; color: #8C7B75; font-size: 13px;
margin: 0 0 12px; font-weight: 500;
}
.tixxie-chips {
display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
margin-bottom: 16px;
}
.tixxie-chip {
border: 1px solid rgba(34,197,94,0.4);
background: rgba(34,197,94,0.1);
color: #6F9F8F;
font-size: 12px; font-weight: 600;
padding: 8px 14px; border-radius: 999px;
cursor: pointer; transition: all 0.15s ease;
font-family: inherit;
}
.tixxie-chip:hover { background: #6F9F8F; color: #1A1614; transform: translateY(-2px); }
.tixxie-chip.tixxie-chip-active { background: #6F9F8F; color: #1A1614; }
.tixxie-reply {
display: flex; gap: 10px; align-items: flex-start;
opacity: 0; transform: translateY(8px);
transition: opacity 0.3s ease, transform 0.3s ease;
min-height: 10px;
}
.tixxie-reply.tixxie-reply-show { opacity: 1; transform: translateY(0); }
.tixxie-reply-avatar {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
background: linear-gradient(135deg, #6F9F8F, #6F9F8F);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.tixxie-reply-bubble {
background: #202C33; color: #E9EDEF;
padding: 10px 14px; border-radius: 10px 10px 10px 2px;
font-size: 13px; line-height: 1.5; max-width: 280px;
}
.tixxie-typing { display: inline-flex; gap: 4px; align-items: center; }
.tixxie-typing span {
width: 6px; height: 6px; border-radius: 50%; background: #8696A0;
animation: tixxieDot 1.2s ease-in-out infinite;
}
.tixxie-typing span:nth-child(2) { animation-delay: 0.15s; }
.tixxie-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes tixxieDot {
0%, 100% { transform: translateY(0); opacity: 0.4; }
50% { transform: translateY(-4px); opacity: 1; }
}
.tixxie-typing.tixxie-hide { display: none; }
/* Discover/Events section — full card redesign, kept Isotope-filter-safe */
/* ---- Categories bar ---- */
/* One dark bar holding the label, every category chip, and the
sort icon — replacing the previous heading + wrapped white pill
rows. Chips scroll horizontally inside the bar rather than
wrapping to new lines, since there's no room to show 8+ of them
on one line at any width. */
.events-section .events-filter-bar {
display: flex; align-items: center; gap: 18px;
background: #1A1614;
border-radius: 16px;
padding: 10px 10px 10px 22px;
max-width: 920px; margin-left: auto; margin-right: auto;
}
.events-section .events-filter-bar-head {
display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto;
font-family: 'Sansation', sans-serif;
}
.events-section .events-filter-bar-title {
color: #ffffff; font-size: 16px; font-weight: 700; letter-spacing: 0.2px;
white-space: nowrap;
}
.events-section .events-filter-bar-count {
color: #A79890; font-size: 13px; font-weight: 400;
}
.events-section .events-filter-sort-btn {
flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
border: none; border-radius: 10px; background: transparent;
color: #C9BDB6; cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.events-section .events-filter-sort-btn:hover,
.events-section .events-filter-sort-btn:focus-visible {
background: rgba(255, 255, 255, 0.08); color: #ffffff;
}
/* ---- Filter chips (now living inside the dark bar) ---- */
.events-section .events-filter {
display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
list-style: none; padding: 0; margin: 0;
flex: 1 1 auto; min-width: 0;
margin-bottom: -10px;
overflow-x: auto; scrollbar-width: none;
/* Scroll-fade: the last visible chip on each side softens out
instead of getting hard-clipped by the bar's own edge, so a
partially-cut pill reads as "more to scroll" rather than a
clipping glitch. Both engines need the prefixed property;
mask-image alone is silently ignored in Chrome/Safari. */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.events-section .events-filter::-webkit-scrollbar { display: none; }
.events-section .events-filter li {
flex: 0 0 auto;
padding: 9px 20px;
background: rgba(255, 255, 255, 0.07);
border: 1.5px solid rgba(255, 255, 255, 0.12);
border-radius: 50px;
color: rgba(255, 255, 255, 0.75);
font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
text-transform: uppercase;
font-family: 'Sansation', sans-serif;
cursor: pointer;
transition: color .18s ease, border-color .18s ease, background .18s ease, transform .15s ease, box-shadow .18s ease;
}
.events-section .events-filter li:hover {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.12);
}
.events-section .events-filter li.current {
background: var(--tix-burgundy);
color: #ffffff;
border-color: var(--tix-burgundy);
box-shadow: 0 8px 18px rgba(var(--tix-burgundy-rgb), 0.35);
}
/* Smaller bar and chips on mobile; label shrinks to just the count
so the chip row keeps most of the width to scroll through. */
@media (max-width: 575px) {
.events-section .events-filter-bar {
gap: 10px;
margin-left: 17px;
margin-right: 17px;
padding: 8px 8px 8px 16px;
border-radius: 30px;
max-width: calc(100% - 24px);
box-sizing: border-box;
}
.events-section .events-filter-bar-title {
font-size: 13px;
}
.events-section .events-filter-bar-count {
font-size: 11px;
}
.events-section .events-filter-sort-btn {
width: 32px;
height: 32px;
flex: 0 0 32px;
}
.events-section .events-filter-sort-btn svg {
width: 17px;
height: 17px;
}
.events-section .events-filter {
gap: 4px;
min-width: 0;
flex: 1;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.events-section .events-filter::-webkit-scrollbar {
display: none;
}
.events-section .events-filter li {
flex: 0 0 auto;
padding: 0px 14px;
font-size: 10.5px;
letter-spacing: 0.3px;
border-width: 1px;
}
}
/* ---- Card shell ---- */
.events-section .event-item {
background: #1A1614;
border-radius: 18px;
overflow: hidden;
cursor: pointer;
position: relative;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
/* Luma-style card fall-in: starts dropped, tilted and slightly shrunk */
opacity: 0;
transform: translateY(64px) rotate(var(--fall-rot, -2deg)) scale(0.93);
transition: opacity .75s cubic-bezier(.16,1,.3,1),
transform .85s cubic-bezier(.16,1,.3,1);
}
.events-section .event-item.tix-card-fallen {
opacity: 1;
transform: translateY(0) rotate(0deg) scale(1);
}
.events-section .event-item.tix-card-settled {
transition: transform .22s ease, box-shadow .22s ease;
}
.events-section .event-item:hover {
transform: translateY(-6px);
box-shadow: 0 22px 44px rgba(0,0,0,0.18);
}
@media (prefers-reduced-motion: reduce) {
.events-section .event-item {
opacity: 1 !important;
transform: none !important;
transition: box-shadow .22s ease !important;
}
}
/* ---- Red TIX RSVP banner across the top ---- */
.events-section .event-banner {
background: var(--tix-burgundy);
color: #fff;
font-family: 'BBH Sans Hegarty', sans-serif;
font-weight: 800;
font-size: 14px;
letter-spacing: 1.5px;
padding: 9px 16px;
line-height: 1.15;
text-transform: uppercase;
/* Allow event name to wrap to 2 lines if it's long beyond that,
clamp with ellipsis. Banner is the "safety net" full-name display. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
/* Reserve room for the bookmark icon on the right */
padding-right: 52px;
/* Force 2-line height regardless of content so cards measure
identically 14px × 1.15 × 2 = 32.2px content + 18px padding */
min-height: 50px;
box-sizing: border-box;
}
/* ---- Image + hero date overlay ---- */
.events-section .event-image {
position: relative;
overflow: hidden;
background: #000;
/* Fixed aspect so ALL event-card images share the same height regardless of source photo size */
aspect-ratio: 16 / 11;
}
.events-section .event-image a { display: block; height: 100%; }
.events-section .event-image img {
width: 100%; height: 100%; display: block;
object-fit: cover;
transition: transform .45s ease;
}
.events-section .event-item:hover .event-image img { transform: scale(1.05); }
/* Dark gradient overlay on the bottom-half of the image so the
blue date pops against busy photos. Sits below the date (z:2). */
.events-section .event-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(0,0,0,0.85) 0%,
rgba(0,0,0,0.55) 25%,
rgba(0,0,0,0.10) 55%,
transparent 100%);
z-index: 1;
pointer-events: none;
}
.events-section .event-hero-date {
position: absolute;
/* Ribbon badge sits at the image's bottom-left so it doesn't compete with the top banner */
bottom: 22px; left: 22px;
z-index: 2;
line-height: 0.85;
pointer-events: none;
}
/* White-border treatment for DAY and MONTH only.
Time gets dark liquid glass below (separate rule). */
.events-section .event-hero-day,
.events-section .event-hero-month {
}
.events-section .event-hero-day {
display: block;
font-family: 'BBH Sans Hegarty', sans-serif;
font-weight: 800;
font-weight: bold;
font-size: clamp(40px, 9vw, 96px);
color: #ffffff;
letter-spacing: -1px;
}
.events-section .event-hero-month {
display: block;
font-family: 'BBH Sans Hegarty', sans-serif;
font-weight: 800;
font-size: clamp(26px, 3.4vw, 36px);
color: #ffffff;
letter-spacing: 1px;
margin-top: 6px;
}
.events-section .event-hero-time {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 14px;
font-family: 'Sansation', sans-serif; font-weight: 800;
font-size: clamp(14px, 1.8vw, 17px);
color: #ffffff;
/* Dark liquid glass no white border, real blur backdrop */
background: rgba(12, 12, 14, 0.55);
-webkit-backdrop-filter: blur(8px) saturate(180%);
backdrop-filter: blur(8px) saturate(180%);
padding: 8px 14px;
border-radius: 8px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.18),
0 6px 16px rgba(0,0,0,0.30);
text-shadow: none;
}
.events-section .event-hero-time i {
font-size: 13px;
color: var(--tix-burgundy);
filter: none;
}
/* ---- ENDED events: badge + muted card treatment ---- */
.events-section .event-ended-badge {
position: absolute;
top: 14px; left: 14px;
z-index: 4;
display: inline-flex; align-items: center;
font-family: 'Sansation', sans-serif;
font-weight: 800;
font-size: 10.5px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: #FAF6F2;
background: rgba(26, 22, 20, 0.72);
-webkit-backdrop-filter: blur(8px) saturate(160%);
backdrop-filter: blur(8px) saturate(160%);
border: 1px solid rgba(250, 246, 242, 0.28);
padding: 6px 13px;
border-radius: 8px;
box-shadow: 0 6px 16px rgba(0,0,0,0.28);
pointer-events: none;
}
/* Ended cards keep the exact same colours as live ones the badge
is the only signal. No grayscale, no muted price, no muted CTA. */
/* ---- Wishlist bigger, pinned top-right corner ---- */
.events-section .wishlist-btn {
position: absolute;
top: 14px; right: 3px;
z-index: 5;
width: 40px;
height: 40px;
background: rgba(12, 12, 14, 0.45);
-webkit-backdrop-filter: blur(8px) saturate(160%);
backdrop-filter: blur(8px) saturate(160%);
border: 1px solid rgba(255,255,255,0.22);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 22px;
border-radius: 50%;
box-shadow: 0 6px 18px rgba(0,0,0,0.28);
transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.events-section .wishlist-btn:hover {
background: var(--tix-burgundy);
color: #fff;
transform: translateY(-2px) scale(1.06);
box-shadow: 0 10px 24px rgba(var(--tix-burgundy-rgb), 0.4);
}
.events-section .wishlist-btn.bg-success {
background: var(--tix-burgundy);
color: #fff !important;
border-color: transparent;
}
/* ---- Card content ---- */
.events-section .event-content {
padding: 20px 20px 22px;
}
/* Time info row (date · time · countdown) */
.events-section .time-info {
list-style: none; padding: 0;
margin: 0 0 16px;
display: flex; flex-wrap: wrap; align-items: center;
gap: 18px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,0.10);
}
.events-section .time-info li {
display: inline-flex; align-items: center; gap: 8px;
color: #fff;
font-family: 'Sansation', sans-serif;
font-weight: 800;
font-size: 13px;
letter-spacing: 0.3px;
}
.events-section .time-info li i { color: var(--tix-burgundy); font-size: 14px; }
/* Countdown is small + dim push to right edge of the row */
.events-section .time-info li.tix-cd {
margin-left: auto;
color: rgba(255,255,255,0.60);
font-weight: 500;
font-size: 11px;
background: rgba(255,255,255,0.05);
padding: 4px 10px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.10);
}
.events-section .time-info li.tix-cd i { font-size: 11px; color: #E6B85C; }
/* DEFENSIVE: kill a theme-injected countdown widget that isn't part of this design */
.events-section .event-item .time-info {
display: none !important;
}
/* Catch any orphan widgets the theme JS injects elsewhere in the card */
.events-section .event-item .countdown,
.events-section .event-item .count-down,
.events-section .event-item .timer,
.events-section .event-item .time-counter,
.events-section .event-item .ttg-counter,
.events-section .event-item [class*="countdown-"],
.events-section .event-item [class*="timer-"],
.events-section .event-item canvas,
.events-section .event-item svg.countdown {
display: none !important;
}
/* ====================== END DEFENSIVE WIDGET KILL ====================== */
/* Organizer green, bold, uppercase */
.events-section .event-content .organizer {
display: inline-block;
color: #6F9F8F;
font-family: 'Sansation', sans-serif;
font-weight: 800;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
margin-bottom: 10px;
}
.events-section .event-content .organizer:hover { color: #5A8F7F; }
/* Big BBH title */
.events-section .event-content h5 { margin: 0 0 14px; min-height: 2em; }
.events-section .event-content h5 a {
font-family: 'BBH Sans Hegarty', sans-serif;
font-weight: 800;
color: #fff;
font-size: clamp(34px, 3.4vw, 52px);
line-height: 1.02;
letter-spacing: 0.3px;
text-transform: uppercase;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.events-section .event-content h5 a:hover { color: var(--tix-burgundy); }
/* Description marquee — seamless loop, full text, never truncated */
.events-section .event-description-wrap {
position: relative;
overflow: hidden;
margin: 0 0 16px;
height: 22px; /* single line */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.events-section .event-description-track {
display: flex;
width: max-content;
transform: translate3d(0, 0, 0); /* resting position: start of text */
}
.events-section .event-description {
color: rgba(255,255,255,0.62);
font-family: 'Sansation', sans-serif;
font-size: 13px;
line-height: 1.55;
margin: 0;
white-space: nowrap; /* full text on one continuous line */
padding-right: 70px; /* gap between the end and the repeat */
flex: 0 0 auto;
}
@keyframes tixDescSlide {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* Reduced-motion users get wrapped text, not the sliding marquee animation */
@media (prefers-reduced-motion: no-preference) {
/* Desktop: hover only */
@media (hover: hover) and (pointer: fine) {
.events-section .event-item:hover .event-description-track {
animation-name: tixDescSlide;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
will-change: transform; /* only while it is animating */
}
}
/* Mobile swipe deck: only the top (visible) card */
@media (max-width: 767px) {
.events-section .row.events-active > .is-top .event-description-track {
animation-name: tixDescSlide;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
will-change: transform;
}
}
}
/* GPU SAVER — description marquee pauses when its card scrolls out of view */
.events-section .event-description-wrap.tix-marquee-paused .event-description-track {
animation-play-state: paused !important;
will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
.events-section .event-description-wrap { height: auto; }
.events-section .event-description-track { animation: none; display: block; width: 100%; }
.events-section .event-description { white-space: normal; padding-right: 0; }
.events-section .event-description + .event-description { display: none; }
}
/* Location + price row */
.events-section .price-remain {
display: flex; justify-content: space-between; align-items: center;
padding-top: 14px;
margin-bottom: 16px;
border-top: 1px dashed rgba(255,255,255,0.18);
flex-wrap: nowrap;
gap: 8px;
}
.events-section .price-remain .location {
display: inline-flex; align-items: center; gap: 6px;
color: #fff;
font-family: 'sansation', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.5px;
min-width: 0;
flex: 1;
overflow: hidden;
}
.events-section .price-remain .location i { color: #6F9F8F; font-size: 15px; flex-shrink: 0; }
.events-section .price-remain .location span {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Price yellow, BBH, shrinks font when long */
.events-section .price-remain > span,
.events-section .price-remain .price {
color: #E6B85C !important;
font-family: 'sansation', sans-serif;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.5px;
flex-shrink: 0;
white-space: nowrap;
text-transform: uppercase;
}
.events-section .price-remain .price del {
color: rgba(255,255,255,0.40); font-size: 13px; margin-left: 4px; font-weight: 500;
}
.events-section .price-remain .price strong { color: #E6B85C; }
/* GET TICKET button red */
.events-section .event-cta {
display: flex; align-items: center; justify-content: center;
gap: 10px;
width: 100%;
background: var(--tix-burgundy);
color: #fff !important;
font-family: 'BBH Sans Hegarty', sans-serif;
font-weight: 800;
font-size: 14px;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 13px 16px;
border-radius: 8px;
text-decoration: none;
transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.events-section .event-cta:hover {
background: var(--tix-burgundy-dark);
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(var(--tix-burgundy-rgb),0.32);
}
.events-section .event-cta i { font-size: 11px; }
/* Desktop: centre the deck so a partial final row (1 or 2 cards)
sits in the middle of the section instead of hugging the left. */
@media (min-width: 768px) {
.events-section .row.events-active {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
/* Hide hero date overlay on very narrow phones to keep the image clean */
@media (max-width: 380px) {
.events-section .event-hero-day { font-size: 44px; }
.events-section .event-hero-month { font-size: 18px; }
}
/* ============ MOBILE: REDUCED PADDING ============ */
@media (max-width: 575px) {
.events-section .event-content { padding: 16px 16px 18px; }
.events-section .time-info { gap: 12px; margin-bottom: 12px; padding-bottom: 10px; }
.events-section .event-banner { font-size: 15px; padding: 8px 14px; }
.events-section .event-cta { padding: 12px 14px; font-size: 13px; }
}
/* MOBILE SWIPE STACK — tinder-style card deck */
@media (max-width: 767px) {
/* Prevent horizontal scrollbar when cards fly off the screen */
html, body { overflow-x: clip; }
/* Force the events grid chain to span the full viewport, overriding Bootstrap's max-width */
.events-section {
padding-left: 0 !important;
padding-right: 0 !important;
overflow-x: clip;
}
.events-section > .container {
padding: 0 !important;
margin: 0 !important;
max-width: 100vw !important;
width: 100vw !important;
}
/* Image aspect on mobile is set below in the shrink-content block (16/9) */
.events-section .row.events-active {
position: relative !important;
display: block !important;
/* Taller deck now that description is back + title is bigger */
height: min(70vh, 620px) !important;
min-height: 540px;
overflow: visible !important;
margin: 0 !important;
padding: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
}
.events-section .row.events-active > .col-md-6,
.events-section .row.events-active > .item {
/* Card is 85vw, centered with 7.5vw gutter on each side */
position: absolute !important;
top: 0 !important;
left: 7.5vw !important;
right: 7.5vw !important;
width: 85vw !important;
max-width: 85vw !important;
margin: 0 !important;
padding: 0 !important;
transform: none;
transition: transform .5s cubic-bezier(0.34,1.56,0.64,1),
opacity .4s ease,
filter .4s ease;
will-change: transform, opacity;
z-index: 1;
overflow: visible !important;
}
/* Rounded corners stay (don't override the base 18px radius) */
/* Stack positions cards peek from bottom-right and bottom-left */
.events-section .row.events-active > .item.is-top {
z-index: 5;
transform: translate3d(0,0,0) scale(1);
opacity: 1;
cursor: grab;
}
.events-section .row.events-active > .item.is-second {
z-index: 4;
transform: translate3d(22px, 14px, 0) scale(0.96);
opacity: 0.92;
}
.events-section .row.events-active > .item.is-third {
z-index: 3;
transform: translate3d(-26px, 14px, 0) scale(0.92);
opacity: 0.75;
}
.events-section .row.events-active > .item:not(.is-top):not(.is-second):not(.is-third) {
z-index: 1;
transform: translate3d(0,40px,0) scale(0.86);
opacity: 0;
pointer-events: none;
}
/* Card returning to back of deck briefly visible */
.events-section .row.events-active > .item.is-returning {
opacity: 0.5 !important;
z-index: 2 !important;
}
/* During active drag no transition so card tracks finger 1:1 */
.events-section .row.events-active > .item.is-dragging {
transition: none !important;
cursor: grabbing;
}
/* Fly-off animations */
.events-section .row.events-active > .item.is-swiped-right {
transform: translate3d(120vw, -40px, 0) rotate(25deg) !important;
opacity: 0;
}
.events-section .row.events-active > .item.is-swiped-left {
transform: translate3d(-120vw, -40px, 0) rotate(-25deg) !important;
opacity: 0;
}
/* ═══ SWIPE INDICATORS ═══ */
.tix-swipe-label {
position: absolute;
font-family: 'BBH Sans Hegarty', sans-serif;
font-weight: 900;
text-transform: uppercase;
opacity: 0;
pointer-events: none;
z-index: 11;
will-change: transform, opacity;
}
.tix-swipe-next {
top: 40px;
right: 40px;
font-size: 38px;
letter-spacing: 3px;
color: #6F9F8F;
filter: drop-shadow(0 4px 12px rgba(22,163,74,0.5)) drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.tix-swipe-heart {
top: 10px;
left: 10px;
line-height: 1;
filter: drop-shadow(0 6px 16px rgba(var(--tix-burgundy-rgb),0.5)) drop-shadow(0 3px 6px rgba(0,0,0,0.3));
}
.tix-swipe-heart svg {
width: 130px;
height: 130px;
}
/* Freeze stacked cards during drag prevents shake */
.events-section .row.events-active.is-deck-dragging > .item:not(.is-dragging) {
transition: none !important;
}
/* Bigger title on mobile feels more swipe */
.events-section .event-content h5 a {
font-size: clamp(38px, 11vw, 64px);
}
/* Swipe instruction text — single line, tight to the deck */
.events-section .swipe-instruction {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
white-space: nowrap;
margin: 8px auto 0;
padding: 10px 0;
width: 85vw;
max-width: 480px;
font-family: 'Sansation', sans-serif;
font-weight: 800;
font-size: 10px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: rgba(71, 85, 105);
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
.events-section .swipe-instruction__left,
.events-section .swipe-instruction__right {
display: inline-flex;
align-items: center;
gap: 5px;
}
.events-section .swipe-instruction__left i { color: var(--tix-burgundy); font-size: 10px; }
.events-section .swipe-instruction__right i { color: #6F9F8F; font-size: 10px; }
.events-section .swipe-instruction__sep {
opacity: 0.4;
color: rgba(71, 85, 105, 0.5);
}
/* ═══ REWIND BUTTON platform dark style ═══ */
.events-section .swipe-return-btn {
width: 52px;
height: 52px;
border-radius: 50%;
border: none;
background: #1A1614;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
-webkit-tap-highlight-color: transparent;
}
.events-section .swipe-return-btn:active {
transform: scale(1.15);
box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.events-section .swipe-return-btn svg {
width: 22px;
height: 22px;
}
/* ===== Card content sizes on mobile ===== */
/* Image keep 16/9 so card stays compact enough for the deck */
.events-section .event-image { aspect-ratio: 16 / 9; }
/* Description slides on mobile too same effect, smaller text */
.events-section .event-description-wrap {
height: 20px;
margin: 0 0 12px;
}
.events-section .event-description {
font-size: 12px;
line-height: 1.4;
margin: 0;
}
/* Bigger card title so most event names naturally wrap to 2 lines */
.events-section .event-content h5 a {
font-size: clamp(40px, 11vw, 60px);
}
/* Tighter content padding on mobile */
.events-section .event-content { padding: 12px 14px 14px !important; }
}
/* Hide swipe-instruction on desktop */
@media (min-width: 768px) {
.events-section .swipe-instruction { display: none; }
}
/* ============ END MOBILE swipe STACK ============ */
/* DEMO ANIMATION (mobile) — runs once when the deck first enters view */
@media (max-width: 767px) {
@keyframes tixCardDemo {
0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
12% { transform: translate3d(0, -14px, 0) rotate(0deg) scale(1.02); }
32% { transform: translate3d(-90px, -8px, 0) rotate(-12deg) scale(1.02); }
52% { transform: translate3d(0, -8px, 0) rotate(0deg) scale(1.02); }
72% { transform: translate3d(90px, -8px, 0) rotate(12deg) scale(1.02); }
92% { transform: translate3d(0, -6px, 0) rotate(0deg) scale(1.01); }
100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}
.events-section .row.events-active > .item.is-top.is-demo {
animation: tixCardDemo 2.6s cubic-bezier(0.4, 0.0, 0.2, 1) 1;
/* Suspend the .is-top transition during the demo so the keyframes
are smooth and not double-animated */
transition: none !important;
pointer-events: none;
}
}
/* ============ END DEMO ANIMATION ============ */
.tix-scanner-section {
position: relative;
padding: 80px 0 100px;
overflow: hidden;
}
/* ── Section header outside card, on white/light bg ── */
.tix-scan-header {
max-width: 1060px;
margin: 0 auto;
padding: 0 48px 40px;
text-align: center;
}
.tix-scan-header-title {
font-family: 'BBH Sans Hegarty', Georgia, serif;
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 900;
color: #1A1614;
letter-spacing: -0.01em;
margin: 0;
}
/* ── Liquid Glass Card deep frosted, 3D ── */
.tix-glass-card {
--border-w: 1.5px;
max-width: 1060px;
margin: 0 auto;
padding: 56px 48px;
border-radius: 32px;
position: relative;
overflow: hidden;
/* Sharp fade: transparent phone side → true #1A1614 right after phone */
background: linear-gradient(to right,
transparent 0%,
transparent 26%,
rgba(11,11,11,0.5) 29%,
#1A1614 33%
);
/* Scanner glass-card backdrop-filter removed — wasn't visible, was expensive per frame */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 24px 48px -12px rgba(0,0,0,0.5),
0 8px 16px -4px rgba(0,0,0,0.3);
}
/* Conic gradient border metallic glass edge */
.tix-glass-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 32px;
padding: var(--border-w);
background:
conic-gradient(
from -45deg at 50% 50%,
rgba(255,255,255,0.4),
rgba(255,255,255,0.05) 15% 35%,
rgba(255,255,255,0.3) 50%,
rgba(255,255,255,0.05) 65% 85%,
rgba(255,255,255,0.4)
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
z-index: 2;
}
/* Glass sheen top-half light wash */
.tix-glass-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 50%;
border-radius: 32px 32px 0 0;
background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
pointer-events: none;
z-index: 1;
}
/* Drop shadow separate blurred element under the card */
.tix-glass-shadow {
position: absolute;
inset: 8px 16px -8px 16px;
border-radius: 32px;
filter: blur(20px);
z-index: -1;
pointer-events: none;
}
/* ── Layout ── */
.tix-scan-layout {
display: flex;
align-items: center;
gap: 56px;
position: relative;
z-index: 1;
}
.tix-scan-visual { flex: 0 0 280px; display: flex; justify-content: center; }
.tix-scan-content { flex: 1; min-width: 0; text-align: right; }
/* ═══ iPHONE MOCKUP ═══ */
.tix-iphone {
width: 240px;
height: 488px;
border-radius: 44px;
position: relative;
/* Titanium frame */
background: linear-gradient(160deg, #3a3a3c 0%, #1A1614 40%, #1A1614 100%);
padding: 3px;
box-shadow:
0 1px 0 rgba(255,255,255,0.1) inset,
0 -1px 0 rgba(0,0,0,0.3) inset,
0 20px 50px rgba(0,0,0,0.5),
0 0 0 0.5px rgba(255,255,255,0.06);
animation: tixPhoneFloat 5s ease-in-out infinite;
}
@keyframes tixPhoneFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-6px) rotate(0.5deg); }
}
/* Inner bezel */
.tix-iphone-inner {
width: 100%;
height: 100%;
border-radius: 41px;
background: #000;
overflow: hidden;
position: relative;
}
/* Dynamic Island */
.tix-island {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 90px;
height: 28px;
background: #000;
border-radius: 20px;
z-index: 30;
box-shadow: 0 0 0 0.5px rgba(255,255,255,0.04);
}
.tix-island::before {
content: '';
position: absolute;
top: 9px;
right: 18px;
width: 8px;
height: 8px;
border-radius: 50%;
background: radial-gradient(circle, #1a1a2e 40%, #0d0d14 100%);
box-shadow: 0 0 0 0.5px rgba(255,255,255,0.08);
}
/* Screen */
.tix-screen {
position: absolute;
inset: 0;
border-radius: 41px;
background: linear-gradient(180deg, #0a0e1a 0%, #0d1117 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 50px 20px 30px;
}
/* Status bar */
.tix-statusbar {
position: absolute;
top: 14px;
left: 28px;
right: 28px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 25;
font-family: -apple-system, system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
color: rgba(255,255,255,0.7);
}
.tix-statusbar-right {
display: flex;
gap: 4px;
align-items: center;
}
.tix-statusbar-right svg { width: 14px; height: 14px; }
/* ── Scanner viewport ── */
.tix-ph-viewport {
width: 150px;
height: 150px;
position: relative;
margin-bottom: 18px;
/* Laser sweep travel distance, derived from the viewport size */
--tix-laser-travel: 132px;
}
.tix-ph-bracket {
position: absolute;
width: 24px;
height: 24px;
border-color: var(--tix-burgundy);
border-style: solid;
border-width: 0;
transition: border-color 0.3s;
}
.tix-ph-bracket--tl { top:0;left:0; border-top-width:2.5px; border-left-width:2.5px; border-radius:8px 0 0 0; }
.tix-ph-bracket--tr { top:0;right:0; border-top-width:2.5px; border-right-width:2.5px; border-radius:0 8px 0 0; }
.tix-ph-bracket--bl { bottom:0;left:0; border-bottom-width:2.5px; border-left-width:2.5px; border-radius:0 0 0 8px; }
.tix-ph-bracket--br { bottom:0;right:0; border-bottom-width:2.5px; border-right-width:2.5px; border-radius:0 0 8px 0; }
/* Scanner laser sweep line, with glow trail */
.tix-ph-laser {
position: absolute;
top: 8px;
left: 6px; right: 6px;
height: 2px;
background: var(--tix-burgundy);
border-radius: 2px;
box-shadow: 0 0 8px 2px rgba(var(--tix-burgundy-rgb),0.5), 0 0 20px 4px rgba(var(--tix-burgundy-rgb),0.2);
animation: tixLaser 2.4s cubic-bezier(0.45,0,0.55,1) infinite;
}
.tix-ph-laser::before {
content: '';
position: absolute;
left: 0; right: 0;
top: -20px;
height: 20px;
background: linear-gradient(to top, rgba(var(--tix-burgundy-rgb),0.08), transparent);
}
@keyframes tixLaser {
0% { transform: translate3d(0, 0, 0); opacity: 0.4; }
50% { transform: translate3d(0, var(--tix-laser-travel), 0); opacity: 1; }
100% { transform: translate3d(0, 0, 0); opacity: 0.4; }
}
/* QR dots */
.tix-ph-qrdots {
position: absolute;
inset: 20px;
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 2px;
opacity: 0.12;
}
.tix-ph-qrdots i {
background: #fff;
border-radius: 1px;
font-style: normal;
}
/* Success overlay */
.tix-ph-verified {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
opacity: 0;
isolation: isolate; /* keeps the tint (z-index:-1) behind the icon + text */
animation: tixVerifyFlash 7s ease infinite;
}
/* Verified-tint opacity keyframes match the old background-colour animation's alpha curve */
.tix-ph-verified::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: rgba(22,163,74,0.1);
opacity: 0;
animation: tixVerifyTint 7s ease infinite;
}
.tix-ph-verified svg {
width: 48px;
height: 48px;
opacity: 0;
transform: scale(0.3) rotate(-30deg);
animation: tixCheckIn 7s ease infinite;
}
.tix-ph-verified span {
font-family: 'Sansation', sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #6F9F8F;
opacity: 0;
animation: tixCheckText 7s ease infinite;
}
@keyframes tixVerifyFlash {
0%,62%,100% { opacity:0; }
66% { opacity:1; }
88% { opacity:1; }
94% { opacity:0; }
}
/* Tint alpha eases 0.10 → 0.08 → 0 across the reveal, matching the old animation's curve */
@keyframes tixVerifyTint {
0%,62%,100% { opacity:0; }
66% { opacity:1; }
88% { opacity:0.8; }
94% { opacity:0.4; }
}
@keyframes tixCheckIn {
0%,62%,100% { opacity:0; transform:scale(0.3) rotate(-30deg); }
68% { opacity:1; transform:scale(1.15) rotate(0deg); }
74%,88% { opacity:1; transform:scale(1) rotate(0deg); }
94% { opacity:0; transform:scale(0.8) rotate(10deg); }
}
@keyframes tixCheckText {
0%,66%,100% { opacity:0; }
72%,88% { opacity:1; }
94% { opacity:0; }
}
/* Status label */
/* Scanning label pulse now animates opacity on a copy, not the live text's colour */
.tix-ph-label {
position: relative;
font-family: 'Sansation', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.25);
}
.tix-ph-label::after {
content: attr(data-text);
content: attr(data-text) / ""; /* keep the copy out of screen readers where supported */
position: absolute;
inset: 0;
color: rgba(var(--tix-burgundy-rgb),0.7);
opacity: 0;
pointer-events: none;
animation: tixLabelPulse 2.4s ease-in-out infinite;
}
@keyframes tixLabelPulse {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}
/* Home indicator */
.tix-home-bar {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
border-radius: 4px;
background: rgba(255,255,255,0.2);
}
/* ── Content side ── */
.tix-scan-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(var(--tix-burgundy-rgb),0.08);
border: 1px solid rgba(var(--tix-burgundy-rgb),0.15);
border-radius: 999px;
font-family: 'Sansation', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--tix-burgundy);
margin-bottom: 20px;
}
.tix-scan-badge::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--tix-burgundy);
animation: tixDotPulse 2s ease-in-out infinite;
}
@keyframes tixDotPulse {
0%,100% { opacity:1; }
50% { opacity:0.4; }
}
/* GPU SAVER — scanner section pauses all six of its animations when off-screen */
#pwa-scanner.tix-scan-paused .tix-iphone,
#pwa-scanner.tix-scan-paused .tix-ph-laser,
#pwa-scanner.tix-scan-paused .tix-ph-verified,
#pwa-scanner.tix-scan-paused .tix-ph-verified::before,
#pwa-scanner.tix-scan-paused .tix-ph-verified svg,
#pwa-scanner.tix-scan-paused .tix-ph-verified span,
#pwa-scanner.tix-scan-paused .tix-ph-label::after,
#pwa-scanner.tix-scan-paused .tix-scan-badge::before {
animation-play-state: paused !important;
will-change: auto;
}
.tix-scan-title {
font-family: 'BBH Sans Hegarty', Georgia, serif;
font-size: clamp(30px, 3.8vw, 44px);
font-weight: 800;
color: #fff;
line-height: 1.1;
margin: 0 0 16px;
}
.tix-scan-title span { color: var(--tix-burgundy); }
.tix-scan-desc {
font-family: 'Sansation', sans-serif;
font-size: 15px;
color: rgba(255,255,255,0.5);
line-height: 1.7;
margin: 0 0 30px;
margin-left: auto;
max-width: 440px;
}
.tix-scan-features {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 32px;
justify-content: flex-end;
}
.tix-scan-feat {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
font-family: 'Sansation', sans-serif;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.7);
transition: border-color 0.3s, background 0.3s;
}
.tix-scan-feat:hover {
border-color: rgba(var(--tix-burgundy-rgb),0.25);
background: rgba(var(--tix-burgundy-rgb),0.04);
}
.tix-scan-feat svg { width: 18px; height: 18px; flex-shrink: 0; }
.tix-scan-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 30px;
background: var(--tix-burgundy);
color: #fff;
border: none;
border-radius: 10px;
font-family: 'Sansation', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.8px;
text-decoration: none;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.tix-scan-cta:hover {
background: transparent;
color: #C0392B !important;
border: 1px solid #C0392B;
box-shadow: none;
}
.tix-scan-cta svg { width: 18px; height: 18px; }
/* ── Responsive ── */
@media (max-width: 768px) {
.tix-scanner-section { padding: 50px 0 60px; }
.tix-scan-header { padding: 0 24px 28px; }
.tix-glass-card {
padding: 36px 24px;
border-radius: 24px;
margin: 0 16px;
background: linear-gradient(to bottom,
transparent 0%,
transparent 42%,
rgba(11,11,11,0.5) 47%,
#1A1614 52%
) !important;
}
.tix-glass-card::before { border-radius: 24px; }
.tix-scan-layout { flex-direction: column; text-align: center; gap: 36px; }
.tix-scan-visual { flex: none; }
.tix-scan-content { text-align: center; }
.tix-iphone { width: 200px; height: 408px; border-radius: 38px; }
.tix-iphone-inner { border-radius: 35px; }
.tix-screen { border-radius: 35px; padding: 44px 16px 26px; }
.tix-island { width: 76px; height: 24px; top: 10px; }
.tix-ph-viewport { width: 120px; height: 120px; --tix-laser-travel: 102px; }
.tix-scan-desc { margin-left: auto; margin-right: auto; }
.tix-scan-features { justify-content: center; }
}
/* TIX-HOWIT v9 — each card's background now uses its own assigned accent color directly */
.tix-howit { background: var(--tix-warm); padding: 70px 0 30px; position: relative; overflow: clip; }
/* Intro */
.tix-howit-intro { text-align: center; max-width: 720px; margin: 0 auto 28px; padding: 0 24px; }
/* "HOW IT WORKS" wordmark image, replacing the small text pill. Sized
big and bold: wide on desktop, still large relative to its column
on mobile (clamp keeps it from ever outgrowing the intro's own
max-width/padding). Intrinsic width/height are set on the ![]()
itself so the layout doesn't shift while it loads. */
.tix-howit-eyebrow-img {
display: block; width: clamp(220px, 46vw, 420px); height: auto;
margin: 0 auto 6px;
}
.tix-howit-title {
font-family: 'BBH Sans Hegarty', sans-serif; font-weight: 800;
font-size: clamp(30px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -1px;
color: var(--tix-dark); margin: 16px 0 12px;
}
.tix-howit-sub {
font-family: 'Sansation', sans-serif; color: var(--tix-neutral);
font-size: 17px; line-height: 1.6; margin: 0 auto;
}
/* Freeze track + pinned stage */
.tix-howit-freeze { position: relative; height: 240vh; }
/* Pinning now matches the boarding-pass technique in the hero
(.tixhero-pin > .tixhero-pass-container): a native position: sticky
child inside a tall track, instead of a JS rAF loop computing
translateY from getBoundingClientRect() every frame. Sticky is
handled by the browser's layout engine in lockstep with scroll —
no per-frame lag, no forced-reflow read, nothing to fall behind
on a slow frame. JS still drives the card2/card3 stacking scrub
and the progress dots (see homepage-howitworks.js), but it no
longer touches the stage's own position. */
.tix-howit-stage {
position: sticky;
top: 0;
min-height: 100dvh; min-height: 100svh;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 24px 0;
}
.tix-howit-tag {
font-family: 'Sansation', sans-serif; font-size: 13px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase; color: var(--tix-dark);
margin-bottom: 14px; display: block; text-align: center;
}
.tix-howit-freeze--org .tix-howit-tag { color: var(--tix-burgundy-dark); }
.tix-howit-freeze--cust .tix-howit-tag { color: var(--tix-burgundy); }
/* Progress dots, above the card stack so they're always clear of it */
.tix-howit-progress { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; }
.tix-howit-progress-dot {
width: 7px; height: 7px; border-radius: 50%; background: rgba(140,123,117,.35);
transition: background .2s ease, width .2s ease;
}
.tix-howit-progress-dot.is-active { background: var(--tix-burgundy); width: 22px; border-radius: 4px; }
.tix-howit-progress-dot.is-passed { background: var(--tix-metallic); }
/* Card sizing context (invisible, not a shared box) */
.tix-howit-cardstage {
position: relative;
width: min(700px, 92vw);
height: min(784px, 84dvh); height: min(784px, 84svh);
min-height: 560px;
}
/* Each card is its own independent element */
.tix-howit-card {
position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 100%;
display: flex; flex-direction: column;
padding: 30px 34px 26px;
border-radius: 40px;
box-shadow: 0 30px 80px rgba(26,22,20,.16), 0 10px 30px rgba(26,22,20,.10);
background: linear-gradient(155deg, var(--card-color), var(--card-color-2));
}
/* Card 1: fully static, no transform, no transition, ever. */
.tix-howit-card[data-tix-card="1"] { z-index: 1; }
/* How-it-works cards 2 & 3: transform written directly from scroll progress every frame, no CSS transition */
.tix-howit-card[data-tix-card="2"] { z-index: 2; transform: translate3d(0, 100dvh, 0); }
.tix-howit-card[data-tix-card="3"] { z-index: 3; transform: translate3d(0, 100dvh, 0); }
.tix-stack-eyebrow {
font-family: 'Sansation', sans-serif; font-size: 12px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase; opacity: .62; display: block; margin-bottom: 6px;
}
.tix-stack-title-box {
display: inline-block; font-family: 'BBH Sans Hegarty', sans-serif; font-weight: 800;
font-size: clamp(20px, 2.6vw, 27px); line-height: 1.15; letter-spacing: -0.5px;
padding: 6px 14px; border-radius: 9px; margin: 0 0 10px;
}
.tix-stack-desc {
font-family: 'Sansation', sans-serif; font-size: 14.5px; line-height: 1.58;
max-width: 440px; opacity: .82; margin: 0;
}
/* How-it-works visual panel: icon cards use the icon; video cards use the video */
.tix-howit-visual {
flex: 1;
min-height: 160px;
margin-top: 18px;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 26px;
}
.tix-howit-visual-icon {
width: 92px;
height: 92px;
border-radius: 26px;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
box-shadow: 0 18px 40px rgba(26,22,20,.2);
}
.tix-howit-visual-video {
display: block;
width: 100%;
height: auto;
max-width: 100%;
object-fit: contain;
border-radius: 5px;
/* No native controls exist on this video at all (see the