/* ============================================ EVENT MARKETPLACE — ported verbatim from the eaon-events-final.html design reference. Self-contained design system (Public Sans/Rubik — same typefaces as the rest of the site — with its own cream/coral palette) — does not use the shared new-landing.css tokens. Nav/footer rules intentionally excluded — the site's own header/footer are used instead. ============================================ */ :root{ --grad:linear-gradient(100deg,#F97316,#EF4444); /* Light theme (default) */ --cream:#FCF4F1; --bg:#FAF8F5; --card:#fff; --border:#E7E2D9; --border-strong:#D6CFC2; --text:#1E1B16; --text2:#6B6459; --text3:#9C948A; --coral-bg:#FBEAE3; --coral-text:#7A3218; --coral-border:#EFA07E; --green-bg:#E4F3EA; --green-text:#215339; --amber-bg:#FBF0DA; --amber-text:#6B4A0E; --red:#EF4444; --orange:#F97316; /* Fixed-dark ink used for the sections that are always dark regardless of the page theme (.stats/.why/.trust/.final-cta) — kept separate from --text so those sections don't invert when the theme toggle flips. */ --ink:#1E1B16; } /* Dark theme — activated via [data-theme="dark"] on , same attribute the rest of the site's toggle uses. Matches the site's dark-mode design system (near-black, flat surfaces, no alternating light cards). */ :root[data-theme="dark"]{ --cream:#111114; --bg:#0A0A0C; --card:#151518; --border:#26262B; --border-strong:#33333A; --text:#F1F1F3; --text2:#A8A5A0; --text3:#6E6B67; --coral-bg:rgba(249,115,22,0.12); --coral-text:#F5A876; --coral-border:#8A5330; --green-bg:rgba(34,197,94,0.12); --green-text:#5FDB93; --amber-bg:rgba(245,158,11,0.12); --amber-text:#FBBF77; } .em-body *{box-sizing:border-box} html{scroll-behavior:smooth} .em-body{ font-family:'Rubik',sans-serif; font-size:15px; background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .em-body h1,.em-body h2,.em-body h3,.em-body h4,.em-body .disp{font-family:'Public Sans',sans-serif;font-weight:600;letter-spacing:-0.02em;line-height:1.15} .em-body .mono{font-family:'Rubik',monospace;font-feature-settings:"tnum";letter-spacing:-0.01em} .em-body img,.em-body svg{display:block;max-width:100%} .em-body a{color:inherit;text-decoration:none} .em-body button{cursor:pointer;font-family:inherit} .em-body .btn{ padding:11px 20px;border-radius:10px;font-weight:600;font-size:14px; display:inline-flex;align-items:center;gap:8px; border:none;transition:transform .12s, box-shadow .15s; } .em-body .btn:hover{transform:translateY(-1px)} .em-body .btn-p{background:var(--grad);color:#fff;box-shadow:0 6px 16px -4px rgba(239,68,68,0.4)} .em-body .btn-p:hover{box-shadow:0 10px 20px -4px rgba(239,68,68,0.5)} .em-body .btn-g{background:var(--card);border:1px solid var(--border-strong);color:var(--text)} .em-body .btn-g:hover{border-color:var(--text3)} .em-body .btn-lg{padding:15px 30px;font-size:15px;border-radius:12px} .em-body .btn-ghost{background:transparent;color:var(--text);padding:11px 8px} .em-body .btn-ghost:hover{color:var(--coral-text)} /* SHELL */ .em-body .wrap{max-width:1200px;margin:0 auto;padding:0 24px} .em-body section{padding:88px 0} /* STATS STRIP */ .em-body .stats{ /* Always a dark band regardless of page theme — its child text (.stat-label) is hardcoded light, so the section itself is fixed rather than following the theme-reactive --card/--bg tokens. */ background:var(--ink);color:#fff; padding:32px 0; border-radius:0; } .em-body .stats .inner{ max-width:1200px;margin:0 auto;padding:0 24px; display:grid;grid-template-columns:repeat(4,1fr);gap:32px; } .em-body .stat-num{ font-family:'Public Sans',sans-serif;font-weight:700; font-size:32px;letter-spacing:-0.02em; background:var(--grad); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; margin-bottom:4px; } .em-body .stat-label{font-size:12px;color:#B8ADA0;letter-spacing:0.04em} /* SECTION HEADER PATTERN */ .em-body .section-head{max-width:640px;margin-bottom:56px} .em-body .section-eyebrow{ font-size:11.5px;font-weight:600;letter-spacing:0.16em; text-transform:uppercase;color:var(--coral-text); margin-bottom:14px;display:flex;align-items:center;gap:10px; } .em-body .section-eyebrow::before{ content:'';width:24px;height:1.5px;background:var(--grad); } .em-body h2.section-title{font-size:clamp(28px,3.6vw,40px);margin-bottom:14px;letter-spacing:-0.025em} .em-body .section-sub{font-size:16px;color:var(--text2);line-height:1.6} /* HOW IT WORKS */ .em-body .how{background:var(--cream)} .em-body .how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .em-body .how-card{ background:var(--card);border-radius:16px;padding:28px; border:1px solid var(--border); position:relative; transition:transform .2s, box-shadow .2s; } .em-body .how-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(30,27,22,0.10)} .em-body .how-num{ font-family:'Rubik',monospace;font-weight:600; font-size:12px;color:var(--coral-text); padding:4px 10px;background:var(--coral-bg); border-radius:100px;display:inline-block;margin-bottom:18px; letter-spacing:0.06em; } .em-body .how-icon{ width:44px;height:44px;border-radius:11px; background:var(--grad);color:#fff; display:flex;align-items:center;justify-content:center; margin-bottom:16px; box-shadow:0 6px 14px -4px rgba(239,68,68,0.35); } .em-body .how-title{font-size:19px;margin-bottom:8px} .em-body .how-desc{font-size:14px;color:var(--text2);line-height:1.55} .em-body .how-note{ margin-top:16px;padding-top:14px;border-top:1px dashed var(--border); font-size:12px;color:var(--text3);display:flex;align-items:center;gap:6px; } /* EVENTS (base card, extended below) */ .em-body .events{background:var(--bg)} .em-body .events-head{ display:flex;justify-content:space-between;align-items:flex-end; margin-bottom:40px;flex-wrap:wrap;gap:16px; } .em-body .events-head .left{max-width:520px} .em-body .events-tabs{display:flex;gap:6px;background:var(--card);border:1px solid var(--border);padding:5px;border-radius:100px} .em-body .events-tab{ padding:8px 16px;border-radius:100px;font-size:13px;font-weight:500; color:var(--text2);background:transparent;border:none; } .em-body .events-tab.on{background:var(--grad);color:#fff} .em-body .events-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} /* "This weekend" strip has 6 cards — 4 fill row one, but the trailing 2 would otherwise sit alone with two empty column-tracks beside them. Widen just those two to fill the row instead of leaving a gap. */ .em-body .events-grid .event-card:nth-child(5), .em-body .events-grid .event-card:nth-child(6){grid-column:span 2} /* Each card gets a real photo, tinted with its brand color pair so a grid of otherwise-random stock photos still reads as one cohesive set. */ .em-body .event-img.a{background-image:linear-gradient(135deg, rgba(249,115,22,.55), rgba(239,68,68,.55)), url('https://images.unsplash.com/photo-1749183563789-ae17d4a952d2?w=800&q=80&auto=format&fit=crop');background-size:cover;background-position:center} .em-body .event-img.b{background-image:linear-gradient(135deg, rgba(122,50,24,.6), rgba(179,56,44,.55)), url('https://images.unsplash.com/photo-1663530761401-15eefb544889?w=800&q=80&auto=format&fit=crop');background-size:cover;background-position:center} .em-body .event-img.c{background-image:linear-gradient(135deg, rgba(33,83,57,.6), rgba(93,202,165,.5)), url('https://images.unsplash.com/photo-1733805569204-41768c7d8c0f?w=800&q=80&auto=format&fit=crop');background-size:cover;background-position:center} .em-body .event-img.d{background-image:linear-gradient(135deg, rgba(107,74,14,.6), rgba(239,159,39,.5)), url('https://images.unsplash.com/photo-1695128861516-d9b48461c04c?w=800&q=80&auto=format&fit=crop');background-size:cover;background-position:center} .em-body .event-img::before{ content:'';position:absolute;inset:0; background:radial-gradient(circle at 30% 40%, rgba(255,255,255,0.15), transparent 60%); } .em-body .event-img::after{ content:'';position:absolute;bottom:0;left:0;right:0;height:60%; background:linear-gradient(to top, rgba(0,0,0,0.35), transparent); } .em-body .event-badge{ position:absolute;top:12px;left:12px; padding:5px 10px;border-radius:100px; background:rgba(255,255,255,0.95);backdrop-filter:blur(4px); font-size:11px;font-weight:600;color:#1E1B16; display:flex;align-items:center;gap:5px;z-index:2; } .em-body .event-badge .verify-dot{width:6px;height:6px;border-radius:50%;background:var(--green-text)} .em-body .event-img-tag{ position:absolute;top:12px;right:12px;z-index:2; padding:5px 10px;border-radius:100px; background:rgba(30,27,22,0.6);backdrop-filter:blur(4px); color:#fff;font-size:11px;font-weight:500; } .em-body .event-cat{font-size:11px;color:var(--text3);letter-spacing:0.06em;text-transform:uppercase;font-weight:500;margin-bottom:6px} .em-body .event-title{font-size:16px;font-weight:600;margin-bottom:6px;line-height:1.3} .em-body .event-loc{font-size:13px;color:var(--text2);margin-bottom:14px;display:flex;align-items:center;gap:6px} .em-body .event-loc svg{width:13px;height:13px;flex-shrink:0} .em-body .event-price{font-size:15px;font-weight:600;font-family:'Public Sans',sans-serif} .em-body .event-price .curr{font-size:12px;color:var(--text2);font-weight:500;margin-left:3px} .em-body .event-seats{font-size:11.5px;color:var(--text3)} .em-body .event-seats.warn{color:var(--coral-text);font-weight:500} /* WHY EAON — the differentiation */ .em-body .why{background:var(--ink);color:#fff} .em-body .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .em-body .why h2.section-title{color:#fff} .em-body .why .section-eyebrow{color:#F9B389} .em-body .why .section-sub{color:#C2B6A6} .em-body .why-points{display:flex;flex-direction:column;gap:18px} .em-body .why-point{ display:flex;gap:16px;padding:22px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:14px; } .em-body .why-point-icon{ width:40px;height:40px;border-radius:10px; background:var(--grad);color:#fff;flex-shrink:0; display:flex;align-items:center;justify-content:center; } .em-body .why-point h4{font-size:16px;margin-bottom:6px;color:#fff} .em-body .why-point p{font-size:14px;color:#B8ADA0;line-height:1.55} /* TRUST & TESTIMONIALS */ .em-body .trust{background:var(--ink);color:#fff;padding-top:0} .em-body .trust h2.section-title{color:#fff} .em-body .trust-inner{padding-top:8px} .em-body .press-row{ display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap; padding-bottom:56px;margin-bottom:56px;border-bottom:1px solid rgba(255,255,255,0.1); } .em-body .press-row span{ color:#8A8175;font-family:'Public Sans',sans-serif;font-weight:700;font-size:15px; letter-spacing:0.02em;opacity:0.7; } .em-body .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:56px} @media(max-width:900px){ .em-body .testi-grid{grid-template-columns:1fr} } .em-body .testi-card{ background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08); border-radius:16px;padding:26px;display:flex;flex-direction:column; } .em-body .testi-stars{display:flex;gap:2px;margin-bottom:14px;color:#F9B389} .em-body .testi-stars svg{width:14px;height:14px} .em-body .testi-quote{font-size:14.5px;line-height:1.6;color:#E5DFD6;margin-bottom:20px;flex:1} .em-body .testi-person{display:flex;align-items:center;gap:10px} .em-body .testi-avatar{ width:36px;height:36px;border-radius:50%;background:var(--grad); display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;flex-shrink:0; } .em-body .testi-name{font-size:13.5px;font-weight:600;color:#fff} .em-body .testi-role{font-size:12px;color:#8A8175} .em-body .guarantee-strip{ display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px; background:rgba(249,115,22,0.08);border:1px solid rgba(249,115,22,0.25); border-radius:16px;padding:26px 32px; } .em-body .guarantee-left{display:flex;align-items:center;gap:16px} .em-body .guarantee-icon{ width:44px;height:44px;border-radius:12px;background:var(--grad);color:#fff; display:flex;align-items:center;justify-content:center;flex-shrink:0; } .em-body .guarantee-left h4{font-size:15.5px;color:#fff;margin-bottom:3px} .em-body .guarantee-left p{font-size:13.5px;color:#B8ADA0} /* HOST SECTION */ .em-body .host{background:var(--cream)} .em-body .host-inner{ display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center; } .em-body .host-fees{ background:var(--card);border-radius:20px;padding:32px; border:1px solid var(--border); box-shadow:0 20px 50px -25px rgba(30,27,22,0.15); } .em-body .host-fees-head{ padding-bottom:20px;border-bottom:1px dashed var(--border);margin-bottom:20px; display:flex;justify-content:space-between;align-items:center; } .em-body .host-fees-head h4{font-size:15px;color:var(--text)} .em-body .host-fees-head .stub{font-family:'Rubik',monospace;font-size:11px;color:var(--text3)} .em-body .fee-row{ display:flex;justify-content:space-between;align-items:flex-start; padding:16px 0;border-bottom:1px dashed var(--border); } .em-body .fee-row:last-of-type{border-bottom:none;padding-bottom:0} .em-body .fee-row-left{flex:1} .em-body .fee-num{ font-family:'Rubik',monospace;font-size:11px;color:var(--coral-text); font-weight:600;letter-spacing:0.06em;margin-bottom:4px; } .em-body .fee-name{font-size:14.5px;font-weight:600;margin-bottom:2px;color:var(--text)} .em-body .fee-desc{font-size:12.5px;color:var(--text2)} .em-body .fee-rate{font-family:'Public Sans',sans-serif;font-weight:600;font-size:20px;letter-spacing:-0.01em} .em-body .fee-rate .pct{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .em-body .fee-when{font-size:11px;color:var(--text3);text-align:right;margin-top:2px} .em-body .host-fees-foot{ margin-top:22px;padding-top:20px;border-top:2px dashed var(--coral-border); display:flex;justify-content:space-between;align-items:center; background:var(--coral-bg);margin-left:-32px;margin-right:-32px;margin-bottom:-32px; padding:20px 32px;border-radius:0 0 20px 20px; } .em-body .host-fees-foot p{font-size:12.5px;color:var(--coral-text);max-width:220px} .em-body .host-fees-foot p strong{font-weight:600} /* CATEGORIES */ .em-body .cats{background:var(--bg)} /* Fixed 4-column grid instead of auto-fit — with 5 cards, auto-fit stretched the lone 5th card to the full row width (mostly padding, felt empty). Explicit columns + an explicit span on the last card fills the final row completely instead. */ .em-body .cats-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px} .em-body .cat-card{ background:var(--card);border-radius:16px;padding:26px; border:1px solid var(--border); transition:transform .2s, border-color .2s; } .em-body .cat-card:hover{transform:translateY(-3px);border-color:var(--coral-border)} .em-body .cat-card:last-child{ grid-column:1 / -1; display:flex;align-items:center;gap:32px; } .em-body .cat-card:last-child .cat-header{margin-bottom:0;flex:0 0 auto;min-width:200px} .em-body .cat-card:last-child .cat-sub{margin-bottom:0;flex:0 0 auto;max-width:360px} .em-body .cat-card:last-child .chip-row{flex:1;justify-content:flex-end} .em-body .cat-dot{ width:9px;height:9px;border-radius:50%;display:inline-block; margin-right:8px;vertical-align:middle; } .em-body .cat-header{display:flex;align-items:center;margin-bottom:16px} .em-body .cat-name{font-size:15px;font-weight:600;font-family:'Public Sans',sans-serif} .em-body .cat-sub{font-size:13px;color:var(--text2);margin-bottom:18px;line-height:1.5} .em-body .chip-row{display:flex;flex-wrap:wrap;gap:6px} .em-body .chip{ padding:6px 12px;border-radius:100px;font-size:12.5px; border:1px solid var(--border-strong);color:var(--text); background:var(--card); } .em-body .chip:hover{border-color:var(--coral-border);color:var(--coral-text)} /* FAQ */ .em-body .faq{background:var(--cream)} .em-body .faq-inner{max-width:800px;margin:0 auto} .em-body .faq-item{ border-bottom:1px solid var(--border); padding:22px 0; } .em-body .faq-item:first-child{border-top:1px solid var(--border)} .em-body .faq-q{ display:flex;justify-content:space-between;align-items:center; cursor:pointer;gap:16px; font-family:'Public Sans',sans-serif;font-weight:600;font-size:16px; color:var(--text); } .em-body .faq-toggle{ width:26px;height:26px;border-radius:50%;background:var(--cream); border:1px solid var(--border-strong);flex-shrink:0; display:flex;align-items:center;justify-content:center; transition:transform .2s, background .2s; } .em-body .faq-item.open .faq-toggle{background:var(--grad);color:#fff;border-color:transparent;transform:rotate(45deg)} .em-body .faq-toggle svg{width:12px;height:12px} .em-body .faq-a{ max-height:0;overflow:hidden; transition:max-height .3s ease, padding .3s ease; color:var(--text2);font-size:14.5px;line-height:1.65; } .em-body .faq-item.open .faq-a{max-height:400px;padding-top:12px} /* FINAL CTA */ .em-body .final-cta{background:var(--ink);color:#fff;padding:100px 0} .em-body .final-inner{max-width:820px;margin:0 auto;text-align:center;padding:0 24px} .em-body .final-cta h2{font-size:clamp(32px,4.5vw,52px);color:#fff;margin-bottom:18px;letter-spacing:-0.03em} .em-body .final-cta h2 .highlight{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} .em-body .final-cta p{font-size:17px;color:#B8ADA0;max-width:520px;margin:0 auto 32px} .em-body .final-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .em-body .final-cta .btn-g{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.14);color:#fff} .em-body .final-cta .btn-g:hover{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.24)} /* WHAT IS AN EAON EVENT — the teaching section */ .em-body .explainer{background:var(--bg);padding:96px 0} .em-body .explainer-inner{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start} .em-body .explainer .lede{font-size:17px;color:var(--text2);line-height:1.6;margin-bottom:16px} .em-body .explainer .lede strong{color:var(--text);font-weight:700} .em-body .lede-bold{font-size:17px;font-weight:700;color:var(--text);line-height:1.4;margin:24px 0} /* Eyebrow icon + title accent — this section only */ .em-body .explainer-eyebrow.section-eyebrow::before{display:none} .em-body .explainer-eyebrow-icon{ display:inline-flex;align-items:center;justify-content:center; width:24px;height:24px;border-radius:8px;flex-shrink:0; background:var(--coral-bg);color:var(--coral-text); } .em-body .explainer-eyebrow-icon svg{width:12px;height:12px} .em-body .explainer-title{line-height:1.2} .em-body .explainer-title .highlight{ background:var(--grad);-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; } .em-body .explainer-title-accent{width:44px;height:4px;border-radius:4px;background:var(--grad);margin-top:16px} .em-body .mental-model{ background:var(--card);border:1px solid var(--border);border-radius:16px; padding:24px;margin-top:24px; } .em-body .mental-model-head{display:flex;gap:16px;align-items:flex-start} .em-body .mental-model-icon{ width:52px;height:52px;border-radius:14px;flex-shrink:0; background:var(--coral-bg);color:var(--coral-text); display:flex;align-items:center;justify-content:center; } .em-body .mental-model-icon svg{width:24px;height:24px} .em-body .mental-model-body{flex:1;min-width:0} .em-body .mental-model-title{ font-size:11.5px;color:var(--coral-text);font-weight:600; letter-spacing:0.14em;text-transform:uppercase;margin-bottom:10px; } .em-body .mental-model p{font-size:15px;color:var(--text);line-height:1.6} .em-body .mental-model p strong{font-weight:600;color:var(--coral-text)} .em-body .mental-model .kbd{ display:inline-block;padding:2px 8px;background:var(--coral-bg);color:var(--coral-text); border-radius:6px;font-family:'Rubik',monospace;font-size:13px;font-weight:600; border:1px solid var(--coral-border); } /* 4-step process row inside the mental-model card */ .em-body .mental-model-steps{ display:flex;align-items:flex-start; margin-top:22px;padding-top:20px;border-top:1px dashed var(--border); } .em-body .model-step{ display:flex;flex-direction:column;align-items:center;gap:8px; flex:0 0 auto;text-align:center; } .em-body .model-step-icon{ width:34px;height:34px;border-radius:10px; background:var(--coral-bg);color:var(--coral-text); display:flex;align-items:center;justify-content:center; } .em-body .model-step-icon svg{width:15px;height:15px} .em-body .model-step span{font-size:10.5px;color:var(--text2);font-weight:600;white-space:nowrap} .em-body .model-step-line{ flex:1;height:0;margin:17px 6px 0; border-top:1px dashed var(--border-strong); } /* comparison table */ .em-body .compare{ background:var(--card);border:1px solid var(--border);border-radius:18px; overflow:hidden; box-shadow:0 20px 50px -25px rgba(30,27,22,0.12); } .em-body .compare-head{ display:grid;grid-template-columns:1.3fr 1fr 1fr; background:var(--cream);border-bottom:1px solid var(--border); } .em-body .compare-head > div{padding:18px 20px;font-size:12.5px;font-weight:600;color:var(--text2);letter-spacing:0.04em;display:flex;align-items:center;gap:10px} .em-body .compare-head > div.is-eaon{ background:var(--grad);color:#fff;position:relative; font-family:'Public Sans',sans-serif;font-size:13.5px; } .em-body .compare-icon-badge{ display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:8px;flex-shrink:0; background:var(--border);color:var(--text2); } .em-body .compare-icon-badge svg{width:13px;height:13px} .em-body .compare-head > div.is-eaon .compare-icon-badge{background:rgba(255,255,255,0.22);color:#fff} .em-body .compare-row{ display:grid;grid-template-columns:1.3fr 1fr 1fr; border-bottom:1px solid var(--border); } .em-body .compare-row:last-child{border-bottom:none} .em-body .compare-row > div{padding:16px 20px;font-size:13.5px;color:var(--text2);line-height:1.45;display:flex;align-items:center} .em-body .compare-row .q{ font-family:'Public Sans',sans-serif;font-weight:600;color:var(--text);font-size:13.5px; background:var(--cream);gap:12px; } .em-body .q-icon{ display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;border-radius:8px;flex-shrink:0; background:var(--coral-bg);color:var(--coral-text); } .em-body .q-icon svg{width:14px;height:14px} .em-body .compare-row .eaon{ background:rgba(249,115,22,0.04); color:var(--text);font-weight:500;font-size:13px; border-left:1px solid var(--coral-border); } .em-body .compare-row .eaon strong{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-weight:700} /* ============================================ MARKETPLACE — filter bar, city, cards ============================================ */ .em-body .marketplace{background:var(--bg);padding:88px 0 96px} .em-body .marketplace-head{ display:flex;justify-content:space-between;align-items:flex-end; flex-wrap:wrap;gap:24px;margin-bottom:32px; } .em-body .marketplace-head .left{max-width:560px} /* filter chrome */ .em-body .filter-bar{ background:var(--card);border:1px solid var(--border);border-radius:14px; padding:14px;margin-bottom:32px; display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr auto;gap:10px;align-items:center; box-shadow:0 2px 6px -2px rgba(30,27,22,0.04); } .em-body .filter-field{ display:flex;align-items:center;gap:10px; padding:10px 14px;background:var(--bg);border-radius:10px; border:1px solid transparent; transition:border-color .15s, background .15s; cursor:pointer; } .em-body .filter-field:hover{border-color:var(--border-strong)} .em-body .filter-field.active{background:var(--card);border-color:var(--coral-border);box-shadow:0 0 0 3px rgba(232,93,26,0.08)} .em-body .filter-field svg{width:16px;height:16px;color:var(--text3);flex-shrink:0} .em-body .filter-field-content{flex:1;min-width:0} .em-body .filter-field-label{font-size:10.5px;color:var(--text3);letter-spacing:0.08em;text-transform:uppercase;font-weight:600;margin-bottom:2px} .em-body .filter-field-value{font-size:13.5px;color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .em-body .filter-verified{ display:flex;align-items:center;gap:8px; padding:10px 14px;background:var(--green-bg);border-radius:10px; color:var(--green-text);font-size:12.5px;font-weight:600; border:1px solid transparent;cursor:pointer; transition:border-color .15s; } .em-body .filter-verified:hover{border-color:var(--green-text)} .em-body .filter-verified:not(.on){ background:var(--card);color:var(--text2); } .em-body .filter-verified .toggle{ width:28px;height:16px;background:var(--green-text);border-radius:100px; position:relative;flex-shrink:0; transition:background .15s; } .em-body .filter-verified:not(.on) .toggle{background:var(--border-strong)} .em-body .filter-verified .toggle::after{ content:'';position:absolute;top:2px;right:2px; width:12px;height:12px;background:#fff;border-radius:50%; transition:right .15s; } .em-body .filter-verified:not(.on) .toggle::after{right:14px} /* quick chip row (date shortcuts) */ .em-body .quick-chips{ display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px; } .em-body .quick-chip{ padding:8px 14px;border-radius:100px; background:var(--card);border:1px solid var(--border-strong); font-size:13px;color:var(--text2);font-weight:500; cursor:pointer;transition:all .15s; } .em-body .quick-chip:hover{border-color:var(--coral-border);color:var(--coral-text)} .em-body .quick-chip.on{background:var(--grad);color:#fff;border-color:transparent} /* Featured strip */ .em-body .featured-strip{margin-bottom:36px} .em-body .strip-head{ display:flex;justify-content:space-between;align-items:center; margin-bottom:16px; } .em-body .strip-head h3{ font-size:18px;font-weight:600;display:flex;align-items:center;gap:10px; } .em-body .strip-head h3::before{ content:'';width:20px;height:2px;background:var(--grad);border-radius:2px; } .em-body .strip-head .view-all{ font-size:13px;color:var(--coral-text);font-weight:500; display:flex;align-items:center;gap:4px; } /* enhanced event card */ .em-body .event-card{ background:var(--card);border-radius:16px;overflow:hidden; border:1px solid var(--border); transition:transform .2s, box-shadow .2s; cursor:pointer;display:flex;flex-direction:column; position:relative; } .em-body .event-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -18px rgba(30,27,22,0.15)} .em-body .event-img{ height:170px;position:relative; background:linear-gradient(135deg, var(--orange), var(--red)); overflow:hidden; } .em-body .event-img.e{background-image:linear-gradient(135deg, rgba(212,83,126,.55), rgba(122,50,24,.55)), url('https://images.unsplash.com/photo-1610173827002-62c0f1f05d04?w=800&q=80&auto=format&fit=crop');background-size:cover;background-position:center} .em-body .event-img.f{background-image:linear-gradient(135deg, rgba(59,74,46,.55), rgba(93,202,165,.5)), url('https://images.unsplash.com/photo-1569430251091-da3b108cff29?w=800&q=80&auto=format&fit=crop');background-size:cover;background-position:center} .em-body .event-img.g{background-image:linear-gradient(135deg, rgba(74,59,122,.5), rgba(212,83,126,.5)), url('https://images.unsplash.com/photo-1546484458-6904289cd4f0?w=800&q=80&auto=format&fit=crop');background-size:cover;background-position:center} .em-body .event-img.h{background-image:linear-gradient(135deg, rgba(30,58,95,.6), rgba(93,202,165,.45)), url('https://images.unsplash.com/photo-1531058020387-3be344556be6?w=800&q=80&auto=format&fit=crop');background-size:cover;background-position:center} .em-body .event-img.i{background-image:linear-gradient(135deg, rgba(74,59,122,.55), rgba(30,58,95,.55)), url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=800&q=80&auto=format&fit=crop');background-size:cover;background-position:center} .em-body .event-img.j{background-image:linear-gradient(135deg, rgba(236,72,153,.55), rgba(122,50,24,.55)), url('https://images.unsplash.com/photo-1501386761578-eac5c94b800a?w=800&q=80&auto=format&fit=crop');background-size:cover;background-position:center} .em-body .event-badge.virtual{background:rgba(30,58,95,0.92);color:#fff} .em-body .event-badge.celeb{background:rgba(236,72,153,0.92);color:#fff} .em-body .event-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1} /* Host row + progress */ .em-body .event-host{ display:flex;align-items:center;gap:8px;margin-bottom:12px; font-size:12.5px;color:var(--text2); } .em-body .host-avatar{ width:22px;height:22px;border-radius:50%;flex-shrink:0; background:var(--grad);color:#fff; display:flex;align-items:center;justify-content:center; font-size:10px;font-weight:700;font-family:'Public Sans',sans-serif; } .em-body .host-name{font-weight:600;color:var(--text)} .em-body .host-rating{ display:inline-flex;align-items:center;gap:3px; padding:2px 7px;background:var(--amber-bg);color:var(--amber-text); border-radius:100px;font-size:11px;font-weight:600; } .em-body .host-rating svg{width:9px;height:9px;color:var(--amber-text)} .em-body .host-elite{ padding:2px 7px;background:var(--coral-bg);color:var(--coral-text); border-radius:100px;font-size:10px;font-weight:600; letter-spacing:0.04em;text-transform:uppercase; } /* seat progress bar */ .em-body .seat-progress{margin-bottom:12px} .em-body .seat-progress-track{ height:4px;background:var(--bg);border-radius:100px;overflow:hidden; margin-bottom:5px; } .em-body .seat-progress-fill{ height:100%;background:var(--grad);border-radius:100px; transition:width .3s; width:0 !important; transition:width 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .em-body .seat-progress-fill.warn{background:linear-gradient(90deg,#F97316,#EF4444)} .em-body .seat-progress-label{ display:flex;justify-content:space-between; font-size:11px;color:var(--text3); } .em-body .seat-progress-label .filled{color:var(--text2);font-weight:500} /* CTA in event card */ .em-body .event-card-cta{ margin-top:auto;padding-top:14px;border-top:1px dashed var(--border); display:flex;justify-content:space-between;align-items:center; } .em-body .event-card-cta .price-block{display:flex;flex-direction:column} .em-body .event-card-cta .price-from{font-size:10.5px;color:var(--text3);letter-spacing:0.04em;text-transform:uppercase;font-weight:500} .em-body .event-card-cta .event-price{font-size:16px;font-weight:600;font-family:'Public Sans',sans-serif;line-height:1} .em-body .event-card-cta .book-mini{ padding:8px 14px;border-radius:8px;background:var(--grad);color:#fff; font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:5px; transition:opacity .15s; } .em-body .event-card-cta .book-mini:hover{opacity:0.85} .em-body .book-mini svg{transition:transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)} .em-body .book-mini:hover svg{transform:translateX(3px)} /* Empty-state notes on marketplace */ .em-body .marketplace-note{ margin-top:32px;padding:16px 20px; background:var(--coral-bg);border:1px dashed var(--coral-border);border-radius:12px; display:flex;gap:12px;align-items:flex-start; font-size:13px;color:var(--coral-text); } .em-body .marketplace-note svg{width:18px;height:18px;flex-shrink:0;margin-top:1px} /* Event card — image parallax + inner glow */ .em-body .event-card .event-img{ transition:transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); transform-origin:center; } .em-body .event-card:hover .event-img{transform:scale(1.06)} .em-body .event-card::before{ content:'';position:absolute;inset:0; border-radius:16px; background:radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(249,115,22,0.08), transparent 40%); opacity:0;transition:opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1); pointer-events:none;z-index:1; } .em-body .event-card:hover::before{opacity:1} .em-body .event-card > *{position:relative;z-index:2} /* ============================================ BOOKING MODAL — the "how to book" experience ============================================ */ .em-body .modal-backdrop{ position:fixed;inset:0;z-index:1100; background:rgba(30,27,22,0.55); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); display:none;align-items:center;justify-content:center;padding:24px; opacity:0;transition:opacity .2s ease; } .em-body .modal-backdrop.on{display:flex;opacity:1} .em-body .modal{ background:var(--bg);border-radius:20px; width:100%;max-width:920px;max-height:90vh; overflow:hidden;display:flex;flex-direction:column; box-shadow:0 40px 80px -20px rgba(0,0,0,0.4); transform:translateY(20px);transition:transform .3s ease; } .em-body .modal-backdrop.on .modal{transform:translateY(0)} /* Progress stepper */ .em-body .modal-stepper{ display:flex;background:var(--card);border-bottom:1px solid var(--border); padding:16px 24px;gap:12px;align-items:center;flex-shrink:0; } .em-body .modal-close{ width:32px;height:32px;border-radius:50%; background:var(--cream);border:1px solid var(--border); display:flex;align-items:center;justify-content:center; cursor:pointer;color:var(--text2);transition:all .15s; margin-right:8px; } .em-body .modal-close:hover{background:var(--coral-bg);color:var(--coral-text);border-color:var(--coral-border)} .em-body .stepper-line{flex:1;display:flex;align-items:center;gap:8px} .em-body .step-dot{ width:24px;height:24px;border-radius:50%; background:var(--cream);border:1.5px solid var(--border-strong); display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:600;color:var(--text3); flex-shrink:0;transition:all .2s; } .em-body .step-dot.done{background:var(--green-text);border-color:var(--green-text);color:#fff} .em-body .step-dot.done svg{animation:emCheckPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)} @keyframes emCheckPop{from{transform:scale(0)}to{transform:scale(1)}} .em-body .step-dot.on{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 0 0 3px rgba(249,115,22,0.18)} .em-body .step-connector{ flex:1;height:2px;background:var(--border-strong); border-radius:100px;transition:background .3s; } .em-body .step-connector.done{background:var(--green-text)} .em-body .step-label{ font-size:11.5px;font-weight:600;letter-spacing:0.04em; color:var(--text3); } .em-body .step-label.on{color:var(--text)} .em-body .step-label.done{color:var(--green-text)} .em-body .modal-body{ flex:1;overflow-y:auto;padding:32px; } .em-body .modal-footer{ padding:20px 24px;background:var(--card); border-top:1px solid var(--border); display:flex;justify-content:space-between;align-items:center; flex-shrink:0; } .em-body .modal-footer .footer-total{display:flex;flex-direction:column} .em-body .modal-footer .footer-total-label{font-size:11px;color:var(--text3);letter-spacing:0.06em;text-transform:uppercase;font-weight:500} .em-body .modal-footer .footer-total-value{font-size:22px;font-weight:700;font-family:'Public Sans',sans-serif;letter-spacing:-0.01em;transition:color 0.3s cubic-bezier(0.25, 1, 0.5, 1)} .em-body .modal-footer .footer-total-value .curr{font-size:12px;color:var(--text2);font-weight:500;margin-left:4px} .em-body .modal-footer .footer-actions{display:flex;gap:10px} .em-body #footerTotal{ display:inline-block; transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s; } .em-body #footerTotal.flash{animation:emNumberFlash 0.4s cubic-bezier(0.25, 1, 0.5, 1)} @keyframes emNumberFlash{0%{transform:translateY(-6px);opacity:0}100%{transform:translateY(0);opacity:1}} /* STAGE 1: Event detail */ .em-body .stage-detail-hero{ height:220px;border-radius:14px;overflow:hidden;position:relative; background:linear-gradient(135deg, #F97316, #EF4444); margin-bottom:24px; } .em-body .stage-detail-hero::before{ content:'';position:absolute;inset:0; background:radial-gradient(circle at 30% 40%, rgba(255,255,255,0.15), transparent 60%); } .em-body .stage-detail-hero::after{ content:'';position:absolute;bottom:0;left:0;right:0;height:70%; background:linear-gradient(to top, rgba(0,0,0,0.4), transparent); } .em-body .stage-detail-title-block{ position:absolute;bottom:20px;left:22px;right:22px;color:#fff;z-index:2; } .em-body .stage-detail-cat{ font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase; opacity:0.9;margin-bottom:6px; } .em-body .stage-detail-title{ font-family:'Public Sans',sans-serif;font-weight:700;font-size:28px; letter-spacing:-0.02em;margin-bottom:6px; } .em-body .stage-detail-when{font-size:13.5px;opacity:0.9} .em-body .stage-detail-badge{ position:absolute;top:16px;left:16px;z-index:2; padding:5px 10px;border-radius:100px; background:rgba(255,255,255,0.95); font-size:11px;font-weight:600;color:#1E1B16; display:flex;align-items:center;gap:5px; } .em-body .stage-detail-badge .verify-dot{width:6px;height:6px;border-radius:50%;background:var(--green-text)} .em-body .detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:24px} .em-body .detail-block h4{ font-size:11.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase; color:var(--text3);margin-bottom:10px; } .em-body .detail-block p{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:16px} .em-body .detail-list{list-style:none;padding:0;margin:0} .em-body .detail-list li{ padding:10px 0;border-bottom:1px dashed var(--border); display:flex;justify-content:space-between;font-size:13.5px; } .em-body .detail-list li:last-child{border-bottom:none} .em-body .detail-list li .lbl{color:var(--text3)} .em-body .detail-list li .val{color:var(--text);font-weight:500;text-align:right} .em-body .host-card{ background:var(--card);border:1px solid var(--border);border-radius:14px; padding:20px;margin-bottom:16px; } .em-body .host-card-top{display:flex;gap:12px;align-items:center;margin-bottom:14px} .em-body .host-card-top .host-avatar{width:44px;height:44px;font-size:15px} .em-body .host-card-info{flex:1;min-width:0} .em-body .host-card-info .name{font-family:'Public Sans',sans-serif;font-weight:600;font-size:15px;margin-bottom:2px} .em-body .host-card-info .meta{font-size:12px;color:var(--text3)} .em-body .host-card-stats{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px; padding-top:14px;border-top:1px dashed var(--border); } .em-body .host-card-stats .stat-num{ font-family:'Public Sans',sans-serif;font-weight:700;font-size:16px; color:var(--text);margin:0;background:none;-webkit-text-fill-color:currentColor; letter-spacing:-0.01em; } .em-body .host-card-stats .stat-label{font-size:10.5px;color:var(--text3);letter-spacing:0.04em} .em-body .included-list{list-style:none;padding:0;margin:0} .em-body .included-list li{ display:flex;align-items:center;gap:10px; padding:6px 0;font-size:13.5px;color:var(--text); } .em-body .included-list li svg{width:14px;height:14px;color:var(--green-text);flex-shrink:0} .em-body .refund-notice{ background:var(--green-bg);border:1px solid rgba(95,219,147,0.25); border-radius:10px;padding:14px 16px; display:flex;gap:12px;align-items:flex-start; font-size:12.5px;color:var(--green-text);line-height:1.5; } .em-body .refund-notice svg{width:16px;height:16px;flex-shrink:0;margin-top:1px} .em-body .refund-notice strong{font-weight:600} /* STAGE 2: Ticket tier selection */ .em-body .tier-list{display:flex;flex-direction:column;gap:12px} .em-body .tier-card{ background:var(--card);border:1.5px solid var(--border);border-radius:14px; padding:20px;cursor:pointer;transition:all .15s; display:flex;justify-content:space-between;align-items:center;gap:16px; } .em-body .tier-card:hover{border-color:var(--coral-border)} .em-body .tier-card.selected{ border-color:var(--coral-text); box-shadow:0 0 0 3px rgba(232,93,26,0.10); background:linear-gradient(135deg, var(--card) 0%, var(--cream) 100%); } .em-body .tier-card.sold-out{opacity:0.5;cursor:not-allowed} .em-body .tier-left{flex:1} .em-body .tier-title-row{display:flex;align-items:center;gap:8px;margin-bottom:6px} .em-body .tier-name{font-family:'Public Sans',sans-serif;font-weight:600;font-size:16px} .em-body .tier-badge{ padding:2px 8px;border-radius:100px;font-size:10px;font-weight:600; letter-spacing:0.04em;text-transform:uppercase; } .em-body .tier-badge.hot{background:var(--coral-bg);color:var(--coral-text)} .em-body .tier-badge.early{background:var(--green-bg);color:var(--green-text)} .em-body .tier-desc{font-size:13px;color:var(--text2);margin-bottom:8px;line-height:1.5} .em-body .tier-perks{display:flex;flex-wrap:wrap;gap:5px} .em-body .tier-perk{ padding:2px 8px;background:var(--bg);border:1px solid var(--border); border-radius:6px;font-size:11px;color:var(--text2); } .em-body .tier-right{text-align:right;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:8px} .em-body .tier-price{font-family:'Public Sans',sans-serif;font-weight:700;font-size:22px;letter-spacing:-0.01em} .em-body .tier-price .curr{font-size:11px;color:var(--text2);font-weight:500;margin-left:3px} .em-body .tier-remaining{font-size:11px;color:var(--text3)} .em-body .tier-remaining.warn{color:var(--coral-text);font-weight:600} .em-body .tier-radio{ width:22px;height:22px;border-radius:50%; border:1.5px solid var(--border-strong); display:flex;align-items:center;justify-content:center;flex-shrink:0; transition:all .15s; } .em-body .tier-card.selected .tier-radio{ background:var(--grad);border-color:transparent; } .em-body .tier-card.selected .tier-radio::after{ content:'';width:8px;height:8px;border-radius:50%;background:#fff; } .em-body .qty-block{ margin-top:20px;padding:16px;background:var(--card);border:1px solid var(--border); border-radius:12px;display:flex;justify-content:space-between;align-items:center; } .em-body .qty-block-label{font-size:14px;font-weight:500} .em-body .qty-controls{display:flex;align-items:center;gap:14px} .em-body .qty-btn{ width:32px;height:32px;border-radius:8px; background:var(--bg);border:1px solid var(--border-strong); display:flex;align-items:center;justify-content:center; cursor:pointer;font-size:16px;font-weight:600;color:var(--text); transition:all .15s; } .em-body .qty-btn:hover{background:var(--coral-bg);border-color:var(--coral-border);color:var(--coral-text)} .em-body .qty-btn:disabled{opacity:0.3;cursor:not-allowed} .em-body .qty-value{font-family:'Public Sans',sans-serif;font-weight:600;font-size:18px;min-width:24px;text-align:center} /* STAGE 3: Checkout */ .em-body .checkout-summary{ background:var(--card);border:1px solid var(--border);border-radius:14px; padding:22px;margin-bottom:18px; } .em-body .checkout-summary-title{ font-size:11.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase; color:var(--text3);margin-bottom:14px; } .em-body .checkout-line{ display:flex;justify-content:space-between; padding:10px 0;border-bottom:1px dashed var(--border); font-size:14px; } .em-body .checkout-line:last-of-type{border-bottom:none} .em-body .checkout-line .lbl{color:var(--text2)} .em-body .checkout-line .lbl .sub{font-size:11.5px;color:var(--text3);display:block;margin-top:2px} .em-body .checkout-line .val{font-weight:500;font-family:'Rubik',monospace} .em-body .checkout-line.total{ padding-top:14px;margin-top:6px;border-top:2px dashed var(--coral-border); font-family:'Public Sans',sans-serif;font-weight:700;font-size:18px; } .em-body .checkout-line.total .val{ font-family:'Public Sans',sans-serif;font-size:20px;letter-spacing:-0.01em; background:var(--grad);-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; } .em-body .escrow-explain{ background:var(--coral-bg);border:1px dashed var(--coral-border); border-radius:12px;padding:16px 18px; display:flex;gap:12px;align-items:flex-start; } .em-body .escrow-explain svg{width:20px;height:20px;color:var(--coral-text);flex-shrink:0;margin-top:2px} .em-body .escrow-explain h5{font-size:13px;font-weight:600;color:var(--coral-text);margin-bottom:4px} .em-body .escrow-explain p{font-size:12.5px;color:var(--coral-text);line-height:1.5;opacity:0.9} .em-body .wallet-select{ background:var(--card);border:1px solid var(--border);border-radius:12px; padding:16px;margin-bottom:16px; display:flex;align-items:center;gap:14px; } .em-body .wallet-icon{ width:42px;height:42px;border-radius:10px;background:var(--grad);color:#fff; display:flex;align-items:center;justify-content:center; flex-shrink:0; } .em-body .wallet-info{flex:1} .em-body .wallet-info .lbl{font-size:11.5px;color:var(--text3);letter-spacing:0.04em} .em-body .wallet-info .val{font-family:'Public Sans',sans-serif;font-weight:600;font-size:15px;margin-top:2px} .em-body .wallet-info .val .curr{font-size:11px;color:var(--text2);font-weight:500;margin-left:3px} .em-body .wallet-change{font-size:12px;color:var(--coral-text);font-weight:500} /* Money flow SVG in stage 3 */ .em-body .money-flow{ height:80px;margin:16px 0 4px; position:relative; } .em-body .money-flow-track{ position:absolute;top:50%;left:12%;right:12%; height:2px;background:repeating-linear-gradient(90deg, var(--coral-border) 0 6px, transparent 6px 12px); transform:translateY(-50%); } .em-body .money-flow-node{ position:absolute;top:50%;transform:translateY(-50%); width:52px;height:52px;border-radius:14px; background:var(--card);border:2px solid var(--border); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px; } .em-body .money-flow-node svg{width:16px;height:16px} .em-body .money-flow-node .lbl{font-size:9px;letter-spacing:0.04em;color:var(--text3);text-transform:uppercase;font-weight:600} .em-body .money-flow-node.you{left:0;border-color:var(--coral-border);color:var(--coral-text)} .em-body .money-flow-node.escrow{left:50%;transform:translate(-50%,-50%);border-color:var(--text);color:var(--text)} .em-body .money-flow-node.host{right:0;border-color:var(--border-strong);color:var(--text2);opacity:0.55} .em-body .money-flow-coin{ position:absolute;top:50%;transform:translate(-50%, -50%); width:22px;height:22px;border-radius:50%; background:var(--grad); display:flex;align-items:center;justify-content:center; color:#fff;font-family:'Rubik',monospace;font-size:9px;font-weight:700; box-shadow:0 6px 14px -4px rgba(232,93,26,0.5); animation:emCoinFlow 3.5s cubic-bezier(0.76, 0, 0.24, 1) infinite; } @keyframes emCoinFlow{ 0%{left:14%;opacity:0} 8%,25%{left:14%;opacity:1} 50%,65%{left:50%;opacity:1} 85%,100%{left:50%;opacity:0.4} } /* STAGE 4: Success */ .em-body .success-stage{text-align:center;padding:20px 0 8px} .em-body .success-icon{ width:72px;height:72px;border-radius:50%; background:var(--green-bg);color:var(--green-text); display:flex;align-items:center;justify-content:center; margin:0 auto 20px;animation:emSuccessPop .4s ease-out; } @keyframes emSuccessPop{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}} .em-body .success-icon svg{width:36px;height:36px} .em-body .success-stage h3{font-family:'Public Sans',sans-serif;font-weight:700;font-size:24px;letter-spacing:-0.02em;margin-bottom:8px} .em-body .success-stage p.lede{font-size:15px;color:var(--text2);max-width:440px;margin:0 auto 28px;line-height:1.55} .em-body .active-ticket{ background:var(--card);border-radius:16px;overflow:hidden; max-width:400px;margin:0 auto 24px;text-align:left; border:1px solid var(--border); box-shadow:0 20px 40px -18px rgba(30,27,22,0.15); } .em-body .active-ticket .ticket-header{ padding:16px 20px; background:linear-gradient(135deg, var(--cream) 0%, var(--card) 100%); border-bottom:1px dashed var(--coral-border); position:relative; } .em-body .active-ticket .ticket-header::before, .em-body .active-ticket .ticket-header::after{ content:'';position:absolute;bottom:-10px; width:20px;height:20px;background:var(--bg);border-radius:50%; } .em-body .active-ticket .ticket-header::before{left:-10px} .em-body .active-ticket .ticket-header::after{right:-10px} .em-body .active-ticket .ticket-body{padding:18px 20px 20px} .em-body .ticket-eyebrow{ font-size:10.5px;color:var(--coral-text);font-weight:600; letter-spacing:0.14em;text-transform:uppercase;margin-bottom:6px; } .em-body .ticket-title{font-size:19px;font-weight:600;margin-bottom:4px;color:var(--text)} .em-body .ticket-sub{font-size:12.5px;color:var(--text2)} .em-body .active-otp-lock{ padding:14px 16px;background:var(--bg);border-radius:10px; text-align:center; display:flex;flex-direction:column;align-items:center;gap:8px; } .em-body .active-otp-lock svg{width:22px;height:22px;color:var(--text3)} .em-body .active-otp-lock p{font-size:12px;color:var(--text3);font-family:'Rubik',monospace} .em-body .active-otp-lock strong{color:var(--text2);font-weight:600} .em-body .success-next{ display:grid;grid-template-columns:1fr 1fr;gap:12px; max-width:520px;margin:0 auto;text-align:left; } .em-body .success-next-card{ background:var(--card);border:1px solid var(--border);border-radius:12px; padding:14px 16px; } .em-body .success-next-card .step-num{ font-family:'Rubik',monospace;font-size:10.5px;color:var(--coral-text); font-weight:600;letter-spacing:0.06em;margin-bottom:4px; } .em-body .success-next-card h5{font-size:13.5px;font-weight:600;margin-bottom:4px} .em-body .success-next-card p{font-size:12px;color:var(--text2);line-height:1.5} /* Custom easing curves */ .em-body{ --ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1); --ease-out-back:cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out-quart:cubic-bezier(0.76, 0, 0.24, 1); } /* Scroll-reveal system */ .em-body .reveal{ opacity:0;transform:translateY(24px); transition:opacity 0.9s var(--ease-out-quart), transform 0.9s var(--ease-out-quart); transition-delay:var(--reveal-delay, 0ms); } .em-body .reveal.in{opacity:1;transform:translateY(0)} .em-body .reveal-scale{ opacity:0;transform:scale(0.94); transition:opacity 0.7s var(--ease-out-quart), transform 0.7s var(--ease-out-back); } .em-body .reveal-scale.in{opacity:1;transform:scale(1)} /* OTP digit-flip animation */ .em-body .otp-digit{display:inline-block;perspective:600px;vertical-align:baseline} .em-body .otp-digit-inner{display:inline-block;transition:transform 0.5s var(--ease-out-expo);transform-style:preserve-3d} .em-body .otp-digit.flip .otp-digit-inner{transform:rotateX(180deg)} /* ============================================ VIRTUAL VERIFICATION — companion to geofence ============================================ */ .em-body .vverify{padding:80px 0;border-top:1px solid var(--border)} .em-body .vverify-inner{ display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center; } @media(max-width:900px){ .em-body .vverify-inner{grid-template-columns:1fr;gap:40px} } .em-body .vverify-steps{list-style:none;margin-top:24px} .em-body .vverify-step{ display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--border); } .em-body .vverify-step:first-child{border-top:none} .em-body .vverify-step-num{ flex-shrink:0;width:30px;height:30px;border-radius:50%; background:var(--grad);color:#fff;font-size:12px;font-weight:700; display:flex;align-items:center;justify-content:center; } .em-body .vverify-step h5{font-size:14.5px;font-weight:700;margin-bottom:3px} .em-body .vverify-step p{font-size:13.5px;color:var(--text2);line-height:1.5} .em-body .vverify-panel{ background:var(--card);border:1px solid var(--border);border-radius:18px; padding:28px;box-shadow:0 20px 50px -20px rgba(30,27,22,0.12); } .em-body .vverify-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:18px} .em-body .vverify-live-dot{ width:8px;height:8px;border-radius:50%;background:#EF4444; box-shadow:0 0 0 0 rgba(239,68,68,0.5); animation:emVpulse 1.6s infinite; } @keyframes emVpulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,0.5)}70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}} .em-body .vverify-panel-title{font-size:13px;font-weight:700;color:var(--text2)} .em-body .vverify-attendee-row{ display:flex;align-items:center;justify-content:space-between; padding:10px 0;border-top:1px solid var(--border);font-size:13.5px; } .em-body .vverify-attendee-row:first-of-type{border-top:none} .em-body .vverify-attendee{display:flex;align-items:center;gap:10px} .em-body .vverify-avatar{ width:28px;height:28px;border-radius:50%;background:var(--grad); display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700; } .em-body .vverify-status{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:6px} .em-body .vverify-status.ok{background:var(--green-bg);color:var(--green-text)} .em-body .vverify-status.pending{background:var(--amber-bg);color:var(--amber-text)} .em-body .vverify-panel-foot{ margin-top:18px;padding-top:16px;border-top:1px solid var(--border); display:flex;justify-content:space-between;font-size:13px;color:var(--text2); } .em-body .vverify-panel-foot strong{color:var(--text)} /* ============================================ GEOFENCE VISUALIZER — signature section ============================================ */ .em-body .geofence{ background:linear-gradient(180deg, var(--cream) 0%, var(--bg) 100%); padding:96px 0; position:relative;overflow:hidden; } .em-body .geofence-inner{ display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center; } .em-body .geofence-viz{ width:100%;max-width:520px; margin:0 auto; display:flex;flex-direction:column;gap:14px; } .em-body .geofence-map{ width:100%;aspect-ratio:1/1; border-radius:24px;overflow:hidden; background:linear-gradient(135deg, #151518 0%, #1c1712 50%, #151518 100%); position:relative; box-shadow:0 40px 80px -30px rgba(0,0,0,0.5), inset 0 0 0 1px var(--border); } .em-body .radar-ring{ position:absolute;top:50%;left:50%; border-radius:50%; border:1.5px dashed var(--coral-border); transform:translate(-50%, -50%); animation:emRingPulse 4s var(--ease-in-out-quart) infinite; opacity:0.4; } .em-body .radar-ring.r1{width:70%;height:70%;animation-delay:0s} .em-body .radar-ring.r2{width:50%;height:50%;animation-delay:1s;opacity:0.5} .em-body .radar-ring.r3{width:30%;height:30%;animation-delay:2s;opacity:0.6} @keyframes emRingPulse{0%,100%{opacity:0.25;transform:translate(-50%,-50%) scale(1)}50%{opacity:0.55;transform:translate(-50%,-50%) scale(1.03)}} .em-body .radar-sweep{ position:absolute;top:50%;left:50%; width:80%;height:80%; border-radius:50%; transform:translate(-50%, -50%); background:conic-gradient(from 0deg, transparent 0deg, rgba(249,115,22,0.22) 20deg, rgba(249,115,22,0.05) 60deg, transparent 90deg); animation:emRadarSweep 4s linear infinite; mix-blend-mode:multiply; } @keyframes emRadarSweep{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}} .em-body .venue-pin{ position:absolute;top:50%;left:50%; transform:translate(-50%, -100%); z-index:3; animation:emPinBounce 3s var(--ease-in-out-quart) infinite; } @keyframes emPinBounce{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,-108%)}} .em-body .venue-pin-icon{ width:56px;height:56px;border-radius:50% 50% 50% 0; background:var(--grad); transform:rotate(-45deg); display:flex;align-items:center;justify-content:center; box-shadow:0 20px 40px -10px rgba(232,93,26,0.5), 0 0 0 4px rgba(255,255,255,0.6); } .em-body .venue-pin-icon svg{transform:rotate(45deg);color:#fff} .em-body .venue-pin-shadow{ position:absolute;bottom:-14px;left:50%; width:28px;height:8px;border-radius:50%; background:rgba(30,27,22,0.15); transform:translateX(-50%); filter:blur(4px); animation:emShadowPulse 3s var(--ease-in-out-quart) infinite; } @keyframes emShadowPulse{0%,100%{width:28px;opacity:0.4}50%{width:22px;opacity:0.25}} .em-body .guest-dot{ /* .geofence-map is a fixed-dark "device screen" widget regardless of page theme, so this stays a fixed light color rather than following --text (which would go dark-on-dark in light mode). */ position:absolute; width:14px;height:14px;border-radius:50%; background:#F1F1F3; box-shadow:0 0 0 3px rgba(10,10,12,0.6), 0 4px 10px rgba(0,0,0,0.3); z-index:2; animation:emGuestApproach 8s var(--ease-out-quart) infinite; } /* Faint trailing "comet" — same path, lagging slightly behind the dot, so the direction of travel reads clearly at a glance. */ .em-body .guest-trail{ position:absolute; width:14px;height:14px;border-radius:50%; background:#F1F1F3; filter:blur(5px); opacity:0.4; z-index:1; animation:emGuestApproach 8s var(--ease-out-quart) infinite; animation-delay:0.35s; } @keyframes emGuestApproach{ /* background is pinned explicitly at every stop — without that, CSS interpolates it toward "green" across the whole 0%-46% span instead of holding white until the guest actually arrives. */ 0%{top:15%;left:12%;transform:scale(0.8);background:#F1F1F3} 28%{top:38%;left:32%;transform:scale(1);background:#F1F1F3} 44%{top:50%;left:50%;transform:scale(1.15);background:#F1F1F3} 46%,64%{top:50%;left:50%;transform:scale(1.3);background:#5FDB93} 68%{top:50%;left:50%;transform:scale(1);background:#5FDB93} 72%{top:50%;left:50%;transform:scale(1);background:#F1F1F3} 100%{top:15%;left:88%;transform:scale(0.8);opacity:0;background:#F1F1F3} } /* Expanding rings from the pin exactly when the guest arrives — visually ties "dot reaches pin" to "verified" for the viewer. */ .em-body .arrival-ripple{ position:absolute;top:50%;left:50%; width:40px;height:40px;border-radius:50%; border:2px solid #5FDB93; transform:translate(-50%,-50%) scale(0.3); opacity:0; z-index:2; animation:emArrivalRipple 8s var(--ease-out-quart) infinite; } .em-body .arrival-ripple.r2{animation-delay:0.25s} @keyframes emArrivalRipple{ 0%,43%{opacity:0;transform:translate(-50%,-50%) scale(0.3)} 46%{opacity:0.9;transform:translate(-50%,-50%) scale(0.5)} 68%{opacity:0;transform:translate(-50%,-50%) scale(2.8)} 100%{opacity:0;transform:translate(-50%,-50%) scale(2.8)} } .em-body .geofence-otp{ position:absolute;top:16px;right:16px; background:var(--card);border-radius:12px;padding:12px 14px; box-shadow:0 12px 30px -8px rgba(0,0,0,0.4); border:1px solid var(--border); min-width:150px;z-index:4; animation:emOtpFloat 4s ease-in-out infinite, emOtpConfirm 8s ease infinite; } @keyframes emOtpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} /* Glows green in sync with the guest's arrival, reinforcing "this code is what just matched." */ @keyframes emOtpConfirm{ 0%,43%{box-shadow:0 12px 30px -8px rgba(0,0,0,0.4);border-color:var(--border)} 46%,64%{box-shadow:0 12px 30px -8px rgba(0,0,0,0.4), 0 0 0 3px rgba(95,219,147,0.5);border-color:#5FDB93} 72%,100%{box-shadow:0 12px 30px -8px rgba(0,0,0,0.4);border-color:var(--border)} } .em-body .geofence-otp-label{ font-size:9.5px;color:var(--text3); letter-spacing:0.12em;text-transform:uppercase;font-weight:600; margin-bottom:4px; } .em-body .geofence-otp-code{ font-family:'Rubik',monospace; font-weight:700;font-size:20px;letter-spacing:0.14em; color:var(--text); } .em-body .geofence-otp-code .sep{color:var(--coral-text);margin:0 2px} .em-body .geofence-verified{ position:absolute;bottom:20px;left:20px; background:var(--green-text);color:#fff; padding:10px 14px;border-radius:100px; font-size:12px;font-weight:600; display:flex;align-items:center;gap:6px; box-shadow:0 12px 30px -8px rgba(33,83,57,0.4); z-index:4; animation:emVerifiedPop 8s var(--ease-out-back) infinite; } @keyframes emVerifiedPop{0%,42%{opacity:0;transform:scale(0.7)}46%,68%{opacity:1;transform:scale(1)}74%,100%{opacity:0;transform:scale(0.9)}} /* Live status caption below the map — narrates the same 8s cycle in words so the animation reads as a story, not just movement. */ .em-body .geofence-status{ position:relative; min-height:44px; background:var(--card);border:1px solid var(--border);border-radius:12px; padding:9px 14px; } .em-body .status-step{ position:absolute;inset:0; display:flex;align-items:center;gap:9px; padding:9px 14px; font-size:13px;font-weight:600;color:var(--text2); opacity:0; } .em-body .status-step svg{width:16px;height:16px;flex-shrink:0;color:var(--coral-text)} .em-body .status-step.step-3{color:var(--green-text)} .em-body .status-step.step-3 svg{color:var(--green-text)} .em-body .status-step.step-1{animation:emStatus1 8s ease infinite} .em-body .status-step.step-2{animation:emStatus2 8s ease infinite} .em-body .status-step.step-3{animation:emStatus3 8s ease infinite} /* Each caption fully reaches opacity:0 before the next starts fading in — a real (even brief) gap, not a crossfade, so overlapping text never blends into an illegible smear. */ @keyframes emStatus1{ 0%,20%{opacity:1} 25%,100%{opacity:0} } @keyframes emStatus2{ 0%,27%{opacity:0} 32%,40%{opacity:1} 45%,100%{opacity:0} } @keyframes emStatus3{ 0%,47%{opacity:0} 52%,68%{opacity:1} 73%,100%{opacity:0} } .em-body .geofence-verified svg{width:14px;height:14px} .em-body .map-label{ /* Fixed dark background regardless of page theme (see .geofence-map), so the label text is a fixed light color too rather than --text2. */ position:absolute; padding:4px 9px;background:rgba(21,21,24,0.85); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,0.1); border-radius:100px;font-size:10.5px;font-weight:600; color:#A8A5A0; z-index:2; } .em-body .map-label.tl{top:16px;left:16px} .em-body .map-label.br{bottom:16px;right:16px} .em-body .geofence-features{display:flex;flex-direction:column;gap:16px;margin-top:28px} .em-body .geofence-feature{ display:flex;gap:14px;align-items:flex-start; padding:16px 18px;border-radius:12px; background:rgba(255,255,255,0.03); border:1px solid var(--border); transition:all 0.3s var(--ease-out-quart); } .em-body .geofence-feature:hover{background:rgba(255,255,255,0.06);border-color:var(--coral-border);transform:translateX(4px)} .em-body .geofence-feature-icon{ width:32px;height:32px;border-radius:8px; background:var(--coral-bg);color:var(--coral-text); display:flex;align-items:center;justify-content:center; flex-shrink:0; } .em-body .geofence-feature-icon svg{width:14px;height:14px} .em-body .geofence-feature h5{font-size:14px;font-weight:600;margin-bottom:3px} .em-body .geofence-feature p{font-size:13px;color:var(--text2);line-height:1.5} /* ============================================ LIVE ACTIVITY TICKER — floating bottom-left ============================================ */ .em-body .live-ticker{ position:fixed;bottom:24px;left:24px; z-index:80; background:var(--card);border:1px solid var(--border); border-radius:14px; padding:12px 16px 12px 12px; box-shadow:0 20px 40px -12px rgba(0,0,0,0.4); display:flex;align-items:center;gap:12px; max-width:320px; transform:translateY(120%);opacity:0; transition:transform 0.5s var(--ease-out-back), opacity 0.3s var(--ease-out-quart); } .em-body .live-ticker.show{transform:translateY(0);opacity:1} .em-body .live-ticker-avatar{ width:34px;height:34px;border-radius:50%; background:var(--grad);color:#fff;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-family:'Public Sans',sans-serif;font-weight:700;font-size:12px; } .em-body .live-ticker-body{flex:1;min-width:0} .em-body .live-ticker-body .head{ font-size:11px;color:var(--green-text);font-weight:600; letter-spacing:0.06em;text-transform:uppercase; display:flex;align-items:center;gap:5px;margin-bottom:3px; } .em-body .live-ticker-body .head::before{ content:'';width:6px;height:6px;border-radius:50%; background:var(--green-text); animation:emTickerPulse 1.8s infinite; } @keyframes emTickerPulse{0%,100%{box-shadow:0 0 0 3px rgba(33,83,57,0.15)}50%{box-shadow:0 0 0 6px rgba(33,83,57,0.05)}} .em-body .live-ticker-body .msg{font-size:13px;color:var(--text);line-height:1.35} .em-body .live-ticker-body .msg strong{font-weight:600} .em-body .live-ticker-body .time{font-size:11px;color:var(--text3);margin-top:2px} .em-body .live-ticker-close{ position:absolute;top:8px;right:8px; width:20px;height:20px;border-radius:50%; background:var(--bg);border:none; display:flex;align-items:center;justify-content:center; color:var(--text3);cursor:pointer; transition:background 0.15s; } .em-body .live-ticker-close:hover{background:var(--coral-bg);color:var(--coral-text)} .em-body .live-ticker-close svg{width:10px;height:10px} /* Modal stage transitions */ .em-body .stage{animation:emStageIn 0.4s var(--ease-out-quart)} @keyframes emStageIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}} .em-body .stage.back{animation:emStageInBack 0.4s var(--ease-out-quart)} @keyframes emStageInBack{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}} /* Focus styles */ .em-body button:focus-visible, .em-body a:focus-visible, .em-body .event-card:focus-visible, .em-body .catcard:focus-visible{ outline:2px solid var(--orange);outline-offset:3px;border-radius:8px; } /* CATEGORY STRIP */ .em-body .catstrip{padding:64px 0 8px} .em-body .catstrip .strip-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px;gap:20px} .em-body .catstrip h2{font-size:28px;letter-spacing:-0.02em} .em-body .catstrip .strip-sub{color:var(--text2);font-size:14.5px;margin-top:6px} .em-body .strip-nav{display:flex;gap:10px;flex-shrink:0;padding-bottom:2px} .em-body .strip-nav-btn{ width:40px;height:40px;border-radius:50%;flex-shrink:0; border:1px solid var(--border);background:var(--card);color:var(--text); display:flex;align-items:center;justify-content:center;cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; } .em-body .strip-nav-btn:hover:not(:disabled){background:var(--text);color:var(--bg);border-color:var(--text);transform:translateY(-2px)} .em-body .strip-nav-btn:disabled{opacity:.35;cursor:default} @media(max-width:720px){ .em-body .strip-nav{display:none} } .em-body .catstrip-viewport{position:relative} .em-body .catstrip-viewport::before, .em-body .catstrip-viewport::after{ content:'';position:absolute;top:0;bottom:20px;width:64px;z-index:2;pointer-events:none; } .em-body .catstrip-viewport::before{left:0;background:linear-gradient(90deg, var(--bg), transparent)} .em-body .catstrip-viewport::after{right:0;background:linear-gradient(270deg, var(--bg), transparent)} @media(max-width:720px){ .em-body .catstrip-viewport::before, .em-body .catstrip-viewport::after{display:none} } .em-body .catstrip-scroll{ display:flex;gap:16px;overflow-x:auto;padding:6px 4px 20px;margin:0 -4px; scrollbar-width:none;-ms-overflow-style:none; } .em-body .catstrip-scroll::-webkit-scrollbar{display:none} .em-body .catcard{ flex:0 0 auto;width:196px;background:var(--card); border:1px solid var(--border);border-radius:20px; padding:24px 20px 22px;cursor:pointer;overflow:hidden; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; position:relative; } .em-body .catcard:hover{ transform:translateY(-6px); border-color:var(--bar); box-shadow:0 20px 36px -16px color-mix(in srgb, var(--bar) 45%, transparent); } .em-body .catcard-accent{position:absolute;top:0;left:0;right:0;height:4px;background:var(--bar)} .em-body .catcard-icon-badge{ width:48px;height:48px;border-radius:14px;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:color-mix(in srgb, var(--bar) 16%, transparent); color:var(--bar);margin-bottom:20px; transition:background .2s ease, color .2s ease, transform .2s ease; } .em-body .catcard-icon-badge svg{width:22px;height:22px} .em-body .catcard:hover .catcard-icon-badge{background:var(--bar);color:#fff;transform:scale(1.06)} .em-body .catcard-name{font-family:'Public Sans',sans-serif;font-weight:700;font-size:16px;line-height:1.28;letter-spacing:-0.01em;margin-bottom:26px;min-height:40px} .em-body .catcard-arrow{ position:absolute;right:18px;bottom:18px; width:30px;height:30px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--bg);border:1px solid var(--border);color:var(--text3); transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .em-body .catcard:hover .catcard-arrow{background:var(--bar);border-color:var(--bar);color:#fff;transform:translate(2px,-2px)} /* ============================================ DARK INTRO — cultural positioning hero ============================================ */ /* The hero now follows the page theme like the rest of the site — light by default, dark under [data-theme="dark"]. Only the saturated/gradient accents (buttons, icon badges, category-tile photos) stay fixed. */ .dark-intro{ background:var(--bg);color:var(--text); background-image:linear-gradient(rgba(249,115,22,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(249,115,22,.06) 1px,transparent 1px); background-size:44px 44px; } /* Everything a visitor needs from the hero — heading, subheading, CTAs, stats and the decorative visual — is meant to read in one screen, so the whole block is sized to the viewport and vertically centered under the fixed header rather than just stacking with generous padding. */ .dark-intro .hero-viewport{ position:relative;overflow:hidden; min-height:100vh; display:flex;flex-direction:column;justify-content:center; padding-top:95px;box-sizing:border-box; } .dark-intro .hero-wrap{ max-width:1200px;margin:0 auto;padding:24px 48px;text-align:center; } @media (max-width:960px){ .dark-intro .hero-viewport{padding-top:85px} } @media (max-width:560px){ .dark-intro .hero-viewport{padding-top:75px} } .dark-intro .badge{ display:inline-block;background:var(--card); border:1px solid var(--border);color:var(--text2); font-size:13px;padding:6px 16px;border-radius:20px;margin-bottom:20px; font-family:'Rubik',sans-serif; } .dark-intro h1{ /* Explicit color rather than relying on inheritance from .dark-intro — the site's global "h1,h2,h3.." typography reset targets the bare tag directly and otherwise wins over an inherited value. */ color:var(--text); font-size:clamp(44px,6vw,72px);font-weight:900;line-height:1.06; letter-spacing:-0.03em;margin-bottom:24px; } .dark-intro h1 .hi{ background:linear-gradient(100deg,#F97316,#EC4899); -webkit-background-clip:text;background-clip:text;color:transparent; -webkit-text-fill-color:transparent; } .dark-intro .sub{ font-size:18px;color:var(--text2);max-width:600px;margin:0 auto 28px;line-height:1.55; font-family:'Rubik',sans-serif; } .dark-intro .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:36px} .dark-intro .cta-p{ background:linear-gradient(100deg,#F97316,#EC4899);color:#fff; font-weight:700;padding:15px 30px;border-radius:28px;font-size:15px;border:none;cursor:pointer; font-family:'Rubik',sans-serif; } .dark-intro .cta-g{ background:none;color:var(--text);font-weight:700;padding:15px 30px; border-radius:28px;font-size:15px;border:1.5px solid var(--border-strong);cursor:pointer; font-family:'Rubik',sans-serif; } /* The stats row stays centered on its own — same max-width as the heading above it — and doesn't share layout space with the visual. */ .dark-intro .hero-stats-line{ max-width:1200px;margin:0 auto;padding:0 48px; } .dark-intro .stats-row{ position:relative; display:flex;justify-content:center;gap:56px;padding:32px 0; border-top:1px solid var(--border);border-bottom:1px solid var(--border); flex-wrap:wrap; } .dark-intro .stat-n{ font-size:34px;font-weight:800; background:linear-gradient(100deg,#F97316,#EC4899); -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent; } .dark-intro .stat-l{color:var(--text3);font-size:13px;margin-top:4px;font-family:'Rubik',sans-serif} /* Decorative hero visual — floats out of the flow, anchored to the right edge of the stats row (not the wider hero container) for a safe horizontal gutter, but raised to sit level with the CTA buttons above rather than the stats row itself. Desktop only; there isn't a safe gutter for it below. */ .dark-intro .hero-visual{ position:absolute; /* Anchored by its TOP edge (not vertically centered) so a bigger/taller image only ever grows downward toward the stats row, never creeping up into the heading — it lines up level with the CTA buttons' top edge. */ left:100%;top:-111px; margin-left:20px; width:clamp(400px, calc(50vw - 500px), 700px); height:auto; pointer-events:none; filter:drop-shadow(0 30px 60px rgba(0,0,0,0.35)); } @media(max-width:1400px){ .dark-intro .hero-visual{display:none} } .dark-intro .feat-title{color:var(--text);font-size:36px;font-weight:800;letter-spacing:-0.025em;margin-bottom:12px} .dark-intro .feat-sub{color:var(--text2);font-size:16px;max-width:540px;margin:0 auto 48px;font-family:'Rubik',sans-serif} .dark-intro .feat-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px; max-width:1200px;margin:0 auto 80px;padding:0 48px; } .dark-intro .feat-card{ background:var(--card);border:1px solid var(--border);border-radius:16px;padding:26px;text-align:left; } .dark-intro .feat-icon{ width:44px;height:44px;border-radius:12px; background:linear-gradient(100deg,#F97316,#EC4899); display:flex;align-items:center;justify-content:center;margin-bottom:16px; } .dark-intro .feat-card h3{color:var(--text);font-size:16px;font-weight:700;margin-bottom:8px} .dark-intro .feat-card p{color:var(--text2);font-size:13px;line-height:1.55;font-family:'Rubik',sans-serif} .dark-intro .cats-title{color:var(--text);font-size:36px;font-weight:800;letter-spacing:-0.025em;margin-bottom:12px} .dark-intro .cats-sub{color:var(--text2);font-size:16px;max-width:480px;margin:0 auto 40px;font-family:'Rubik',sans-serif} .dark-intro .cats-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:20px; max-width:1200px;margin:0 auto 0;padding:0 48px; } .dark-intro .cat-tile{ /* Themed card — follows the page palette like everything else now; the illustration itself supplies the colour, not the tile. */ background:var(--card);border:1px solid var(--border); border-radius:16px;min-height:260px; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:28px 22px; transition:transform .2s ease, border-color .2s ease; } .dark-intro .cat-tile:hover{transform:translateY(-4px);border-color:var(--border-strong)} .dark-intro .cat-tile-img{ width:100%;max-width:160px;height:140px;object-fit:contain; margin-bottom:18px; } .dark-intro .cat-tile-text{text-align:center} .dark-intro .cat-tile h3{color:var(--text);font-size:20px;font-weight:700;margin-bottom:4px} .dark-intro .cat-tile p{color:var(--text2);font-size:13px;font-family:'Rubik',sans-serif} .dark-intro .scroll-cue{padding:56px 0 80px;text-align:center} .dark-intro .scroll-cue p{color:var(--text3);font-size:13px;margin-bottom:10px;font-family:'Rubik',sans-serif} .dark-intro .scroll-arrow{ width:36px;height:36px;border:1.5px solid var(--border);border-radius:50%; display:flex;align-items:center;justify-content:center;margin:0 auto; color:var(--text3);animation:emBob 2s ease-in-out infinite; } @keyframes emBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}} @media(max-width:800px){ .dark-intro .cats-grid{grid-template-columns:repeat(2,1fr)} .dark-intro .feat-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:520px){ .dark-intro .cats-grid{grid-template-columns:1fr} .dark-intro .feat-grid{grid-template-columns:1fr;padding:0 24px} .dark-intro .cat-tile{height:auto;min-height:180px} } @media(max-width:960px){ .dark-intro .hero-wrap{padding-left:24px;padding-right:24px} .dark-intro .feat-grid, .dark-intro .cats-grid{padding-left:24px;padding-right:24px} } /* MOBILE MENU BUTTON */ .em-body .mobile-menu-btn{display:none;background:none;border:none;padding:8px} /* RESPONSIVE */ @media (max-width: 960px){ .em-body section{padding:64px 0} .em-body .stats .inner{grid-template-columns:repeat(2,1fr);gap:28px 20px} .em-body .how-grid{grid-template-columns:1fr;gap:14px} .em-body .events-grid{grid-template-columns:repeat(2,1fr);gap:16px} .em-body .events-grid .event-card:nth-child(5), .em-body .events-grid .event-card:nth-child(6){grid-column:auto} .em-body .why-grid{grid-template-columns:1fr;gap:40px} .em-body .host-inner{grid-template-columns:1fr;gap:40px} .em-body .cats-grid{grid-template-columns:repeat(2, 1fr)} /* The last card's horizontal (icon | text | chips) layout only has room to breathe at the full 4-column desktop width — revert to the normal stacked card layout as soon as the grid narrows. */ .em-body .cat-card:last-child{flex-direction:column;align-items:stretch;gap:0} .em-body .cat-card:last-child .cat-header{margin-bottom:16px;min-width:0} .em-body .cat-card:last-child .cat-sub{margin-bottom:18px;max-width:none} .em-body .cat-card:last-child .chip-row{justify-content:flex-start} .em-body .nav-links{display:none} .em-body .mobile-menu-btn{display:inline-flex} .em-body .explainer{padding:64px 0} .em-body .explainer-inner{grid-template-columns:1fr;gap:40px} .em-body .compare-head,.em-body .compare-row{grid-template-columns:1.1fr 1fr 1fr} .em-body .compare-head > div,.em-body .compare-row > div{padding:14px 14px;font-size:12.5px} .em-body .compare-row .q{font-size:12.5px} .em-body .compare-icon-badge,.em-body .q-icon{width:22px;height:22px} .em-body .compare-icon-badge svg,.em-body .q-icon svg{width:11px;height:11px} .em-body .mental-model-steps{flex-wrap:wrap;gap:16px 8px} .em-body .model-step{flex:1 1 40%} .em-body .model-step-line{display:none} .em-body .marketplace{padding:64px 0} .em-body .filter-bar{grid-template-columns:1fr 1fr;gap:8px} .em-body .filter-verified{grid-column:span 2;justify-content:center} .em-body .modal{max-height:94vh} .em-body .modal-body{padding:22px} .em-body .stage-detail-title{font-size:22px} .em-body .detail-grid{grid-template-columns:1fr;gap:16px} .em-body .stepper-line{gap:5px} .em-body .step-label{display:none} .em-body .success-next{grid-template-columns:1fr} .em-body .geofence{padding:64px 0} .em-body .geofence-inner{grid-template-columns:1fr;gap:48px} .em-body .geofence-viz{max-width:420px} .em-body .live-ticker{bottom:16px;left:16px;right:16px;max-width:none} } @media (max-width: 560px){ .em-body section{padding:56px 0} .em-body .events-grid{grid-template-columns:1fr;gap:14px} .em-body .cats-grid{grid-template-columns:1fr} .em-body .events-head{flex-direction:column;align-items:flex-start} .em-body .events-tabs{overflow-x:auto;max-width:100%} .em-body .section-head{margin-bottom:36px} .em-body h2.section-title{font-size:26px} .em-body .why-point{padding:18px} .em-body .host-fees{padding:22px} .em-body .host-fees-foot{margin-left:-22px;margin-right:-22px;padding:16px 22px} .em-body .final-ctas{flex-direction:column;align-items:stretch} .em-body .final-ctas .btn{justify-content:center} .em-body .explainer{padding:56px 0} .em-body .compare-head,.em-body .compare-row{grid-template-columns:1.1fr 0.9fr 0.9fr} .em-body .compare-head > div,.em-body .compare-row > div{padding:12px 10px;font-size:11.5px} .em-body .compare-row .q{font-size:11.5px;gap:8px} .em-body .compare-icon-badge,.em-body .q-icon{display:none} .em-body .mental-model-head{flex-direction:column} .em-body .mental-model-icon{width:44px;height:44px} .em-body .mental-model-icon svg{width:20px;height:20px} .em-body .filter-bar{grid-template-columns:1fr;padding:10px} .em-body .filter-verified{grid-column:auto} .em-body .marketplace-head{align-items:flex-start} .em-body .quick-chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;-webkit-overflow-scrolling:touch} .em-body .quick-chip{flex-shrink:0} .em-body .modal-backdrop{padding:0;align-items:flex-end} .em-body .modal{max-height:92vh;border-radius:20px 20px 0 0;max-width:100%} .em-body .modal-body{padding:20px 16px} .em-body .modal-stepper{padding:14px 16px} .em-body .modal-footer{padding:14px 16px;flex-direction:column;gap:12px;align-items:stretch} .em-body .modal-footer .footer-actions{width:100%} .em-body .modal-footer .footer-actions .btn{flex:1;justify-content:center} .em-body .stage-detail-hero{height:180px} .em-body .stage-detail-title{font-size:20px} .em-body .tier-card{padding:16px;flex-wrap:wrap} .em-body .tier-right{width:100%;flex-direction:row;justify-content:space-between;align-items:center} .em-body .step-connector{display:none} .em-body .stepper-line{gap:4px} .em-body .active-ticket{max-width:100%} .em-body .geofence{padding:56px 0} .em-body .geofence-viz{max-width:100%} .em-body .geofence-status{min-height:52px} .em-body .status-step{font-size:12px;gap:8px} .em-body .status-step svg{width:14px;height:14px} .em-body .live-ticker{padding:10px 14px 10px 10px} .em-body .live-ticker-body .msg{font-size:12px} .em-body .money-flow-node{width:44px;height:44px} .em-body .money-flow-node svg{width:14px;height:14px} } /* Reduced motion — kill all decorative animation, keep functional transitions */ @media (prefers-reduced-motion: reduce){ .em-body *,.em-body *::before,.em-body *::after,.dark-intro *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; } .em-body .reveal,.em-body .reveal-scale{opacity:1 !important;transform:none !important} .em-body .seat-progress-fill{width:var(--target-width, 0%) !important} /* .status-step's base rule sets opacity:0 — normally only its own animation lifts it to visible partway through the cycle. With animations reduced to a single instant iteration, every step reverts to that base opacity:0 and the caption box ends up permanently blank. Pin the final "verified" step visible so the resting state still reads. */ .em-body .status-step{opacity:0 !important} .em-body .status-step.step-3{opacity:1 !important} html{scroll-behavior:auto} }