/* ============================================================ EPH New Event Landing Page — Material 3 glass, palette-driven. Seeds come inline on : --seed (primary), --seed2 (secondary), --seed3 (accent_1 = text-on-primary), data-theme = light|dark. ============================================================ */ /* ---------- self-hosted fonts (OFL) ---------- */ @font-face{ font-family:'Bricolage Grotesque'; font-style:normal; font-weight:300 800; font-display:swap; src:url('../fonts/eph-landing/bricolage.woff2') format('woff2'); } @font-face{ font-family:'Figtree'; font-style:normal; font-weight:300 800; font-display:swap; src:url('../fonts/eph-landing/figtree.woff2') format('woff2'); } @font-face{ font-family:'Figtree'; font-style:italic; font-weight:300 700; font-display:swap; src:url('../fonts/eph-landing/figtree-italic.woff2') format('woff2'); } :root{ --shape-xs:8px; --shape-sm:12px; --shape-md:16px; --shape-lg:24px; --shape-xl:28px; --shape-full:999px; --font-display:'Bricolage Grotesque', sans-serif; --font-body:'Figtree', sans-serif; --ease-emph:cubic-bezier(.2,0,0,1); } /* ---------- LIGHT roles — literal tints/shades of the palette hexes ---------- */ [data-theme="light"]{ color-scheme:light; --primary:var(--seed); --on-primary:var(--seed3); --primary-container:color-mix(in oklab, var(--seed) 14%, white); --on-primary-container:color-mix(in oklab, var(--seed) 70%, black); --secondary:var(--seed2); --secondary-container:color-mix(in oklab, var(--seed2) 16%, white); --on-secondary-container:color-mix(in oklab, var(--seed2) 62%, black); --tertiary:color-mix(in oklab, var(--seed2) 78%, black); --tertiary-container:color-mix(in oklab, var(--seed2) 24%, white); --on-tertiary-container:color-mix(in oklab, var(--seed2) 66%, black); --surface:color-mix(in oklab, var(--seed) 2%, white); --surface-dim:color-mix(in oklab, var(--seed) 8%, #ececec); --surface-container-lowest:white; --surface-container-low:color-mix(in oklab, var(--seed) 3.5%, white); --surface-container:color-mix(in oklab, var(--seed) 5%, white); --surface-container-high:color-mix(in oklab, var(--seed) 6.5%, white); --surface-container-highest:color-mix(in oklab, var(--seed) 8%, white); --on-surface:color-mix(in oklab, var(--seed) 12%, #1d1c1b); --on-surface-variant:color-mix(in oklab, var(--seed) 16%, #4c4a47); --outline:color-mix(in oklab, var(--seed) 18%, #8b8882); --outline-variant:color-mix(in oklab, var(--seed) 10%, #d9d6d0); --inverse-surface:color-mix(in oklab, var(--seed) 12%, #2d2b28); --inverse-on-surface:color-mix(in oklab, var(--seed) 4%, #f4f2ef); --error:#b3261e; --on-error:#fff; --error-container:#f9dedc; --on-error-container:#410e0b; --shadow-1:0 1px 2px rgb(0 0 0/.14), 0 1px 3px 1px rgb(0 0 0/.08); --shadow-2:0 1px 2px rgb(0 0 0/.14), 0 2px 6px 2px rgb(0 0 0/.10); --shadow-3:0 4px 8px 3px rgb(0 0 0/.10), 0 1px 3px rgb(0 0 0/.14); } /* ---------- DARK roles ---------- */ [data-theme="dark"]{ color-scheme:dark; --primary:var(--seed); --on-primary:var(--seed3); --primary-container:color-mix(in oklab, var(--seed) 38%, #14120f); --on-primary-container:color-mix(in oklab, var(--seed) 30%, white); --secondary:color-mix(in oklab, var(--seed2) 70%, white); --secondary-container:color-mix(in oklab, var(--seed2) 38%, #14120f); --on-secondary-container:color-mix(in oklab, var(--seed2) 22%, white); --tertiary:color-mix(in oklab, var(--seed2) 55%, white); --tertiary-container:color-mix(in oklab, var(--seed2) 45%, #191713); --on-tertiary-container:color-mix(in oklab, var(--seed2) 20%, white); --surface:color-mix(in oklab, var(--seed) 6%, #141312); --surface-dim:color-mix(in oklab, var(--seed) 5%, #121110); --surface-container-lowest:color-mix(in oklab, var(--seed) 5%, #0f0e0d); --surface-container-low:color-mix(in oklab, var(--seed) 8%, #191817); --surface-container:color-mix(in oklab, var(--seed) 10%, #1e1c1a); --surface-container-high:color-mix(in oklab, var(--seed) 12%, #242220); --surface-container-highest:color-mix(in oklab, var(--seed) 14%, #2a2825); --on-surface:color-mix(in oklab, var(--seed) 8%, #ece9e5); --on-surface-variant:color-mix(in oklab, var(--seed) 12%, #c9c5bf); --outline:color-mix(in oklab, var(--seed) 15%, #94908a); --outline-variant:color-mix(in oklab, var(--seed) 12%, #474440); --inverse-surface:color-mix(in oklab, var(--seed) 8%, #ece9e5); --inverse-on-surface:color-mix(in oklab, var(--seed) 8%, #22211f); --error:#f2b8b5; --on-error:#601410; --error-container:#8c1d18; --on-error-container:#f9dedc; --shadow-1:0 1px 2px rgb(0 0 0/.5), 0 1px 3px 1px rgb(0 0 0/.3); --shadow-2:0 1px 2px rgb(0 0 0/.5), 0 2px 6px 2px rgb(0 0 0/.32); --shadow-3:0 4px 8px 3px rgb(0 0 0/.34), 0 1px 3px rgb(0 0 0/.5); } /* ============ base ============ */ html{scroll-behavior:smooth} body.eph-landing{ margin:0; font-family:var(--font-body); background:var(--surface); color:var(--on-surface); font-size:15.5px; line-height:1.6; -webkit-text-size-adjust:100%; text-size-adjust:100%; padding-bottom:96px; } body.eph-landing *{box-sizing:border-box} body.eph-landing img{max-width:100%} body.eph-landing a{color:var(--primary); text-decoration:none} body.eph-landing h1, body.eph-landing h2, body.eph-landing h3, body.eph-landing p{margin:0} /* ambient palette glow (glass backdrop) */ body.eph-landing::before{ content:""; position:fixed; inset:-10%; z-index:-1; pointer-events:none; background: radial-gradient(46% 38% at 12% 8%, color-mix(in oklab, var(--primary) 15%, transparent), transparent 70%), radial-gradient(42% 36% at 88% 22%, color-mix(in oklab, var(--secondary) 13%, transparent), transparent 70%), radial-gradient(52% 44% at 50% 96%, color-mix(in oklab, var(--tertiary) 11%, transparent), transparent 70%); } /* inline SVG icons */ .i{width:22px; height:22px; flex:none; vertical-align:middle} .section-head .i{width:25px; height:25px; color:var(--primary)} .fact > .i{width:24px; height:24px; color:var(--primary); margin-top:2px} .big-i{width:34px; height:34px; color:var(--tertiary)} /* type */ .display{font-family:var(--font-display); font-weight:640; letter-spacing:-.02em; line-height:1.06} .headline{font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; font-size:1.35rem} .title-md{font-family:var(--font-body); font-size:1.02rem; font-weight:700} .label{font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--on-surface-variant)} .body-sm{font-size:.86rem; color:var(--on-surface-variant)} .body-xs{font-size:.78rem; color:var(--on-surface-variant); font-style:italic} /* ============ buttons ============ */ .eph-landing .btn{ --btn-bg:var(--primary); --btn-fg:var(--on-primary); position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-body); font-size:.95rem; font-weight:700; border:none; cursor:pointer; border-radius:var(--shape-full); background:var(--btn-bg); color:var(--btn-fg); padding:0 26px; height:46px; white-space:nowrap; text-decoration:none; transition:box-shadow .25s var(--ease-emph), transform .12s var(--ease-emph), border-radius .25s var(--ease-emph); overflow:hidden; background-image:linear-gradient(180deg, rgb(255 255 255/.30), rgb(255 255 255/0) 48%); box-shadow:inset 0 1px 0 rgb(255 255 255/.45), var(--shadow-1); } .eph-landing .btn::after{content:""; position:absolute; inset:0; background:currentColor; opacity:0; transition:opacity .2s} .eph-landing .btn:hover::after{opacity:.09} .eph-landing .btn:active{transform:scale(.97); border-radius:var(--shape-md)} .eph-landing .btn .i{color:inherit} .btn.tonal{--btn-bg:var(--secondary-container); --btn-fg:var(--on-secondary-container); background-image:none; box-shadow:inset 0 1px 0 color-mix(in oklab, white 40%, transparent)} .btn.tonal-p{--btn-bg:var(--primary-container); --btn-fg:var(--on-primary-container); background-image:none} .btn.outlined{--btn-bg:transparent; --btn-fg:var(--primary); background-image:none; box-shadow:inset 0 0 0 1.5px var(--outline-variant)} .btn.text{--btn-bg:transparent; --btn-fg:var(--primary); background-image:none; box-shadow:none; padding:0 14px; height:40px} .btn.big{height:54px; font-size:1.05rem; padding:0 32px} .btn.elev{box-shadow:var(--shadow-2)} .btn.wide{width:100%} .icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--shape-full); border:1.5px solid var(--outline-variant); background:transparent; color:var(--on-surface-variant); cursor:pointer; transition:background .2s, color .2s, transform .12s; text-decoration:none; } .icon-btn:hover{background:var(--surface-container-high); color:var(--primary)} .icon-btn:active{transform:scale(.94)} .icon-btn.sm{width:38px; height:38px} .icon-btn.sm .i{width:19px; height:19px} /* ============ chips ============ */ .chip{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-radius:var(--shape-xs); font-size:.85rem; font-weight:600; background:color-mix(in oklab, var(--surface-container) 55%, transparent); color:var(--on-surface-variant); border:1px solid var(--outline-variant); text-decoration:none; } .chip .i{width:18px; height:18px; color:var(--primary)} .chip.tonal{background:color-mix(in oklab, var(--secondary-container) 70%, transparent); color:var(--on-secondary-container); border:none} .chip.tonal .i{color:var(--on-secondary-container)} /* ============ cards (glass) ============ */ .eph-landing .card{ background:color-mix(in oklab, var(--surface-container-low) 58%, transparent); -webkit-backdrop-filter:blur(20px) saturate(1.5); backdrop-filter:blur(20px) saturate(1.5); border:1px solid color-mix(in oklab, var(--surface-container-lowest) 55%, transparent); box-shadow:inset 0 1px 0 color-mix(in oklab, white 45%, transparent), 0 10px 26px -14px rgb(0 0 0/.20); border-radius:var(--shape-lg); padding:26px 28px; } @supports not (backdrop-filter: blur(1px)){ .eph-landing .card{background:color-mix(in oklab, var(--surface-container-low) 97%, transparent)} } .card.outlined{background:color-mix(in oklab, var(--surface-container-low) 40%, transparent); border:1.5px solid var(--outline-variant)} .card.high{background:color-mix(in oklab, var(--surface-container) 70%, transparent)} .section-head{display:flex; align-items:center; gap:12px; margin:0 0 18px} .section-head h2{font-family:var(--font-display); font-size:clamp(1.18rem, 3.6vw, 1.45rem); font-weight:640; letter-spacing:-.015em} .section-head.sm{margin-bottom:12px} .section-head.sm h2{font-size:1.1rem} .section-head.sm .i{width:22px; height:22px} /* ============ layout ============ */ .shell{max-width:1200px; margin:0 auto; padding:0 20px} .page-grid{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:26px; align-items:start; margin-top:26px} .main-col{display:flex; flex-direction:column; gap:26px; min-width:0} .rail{display:flex; flex-direction:column; gap:26px; position:sticky; top:86px} /* ============ top app bar ============ */ .topbar{ position:sticky; top:0; z-index:60; background:color-mix(in oklab, var(--surface) 62%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s; } .topbar.scrolled{border-bottom-color:var(--outline-variant)} .topbar-inner{max-width:1200px; margin:0 auto; padding:0 20px; height:66px; display:flex; align-items:center; gap:16px} .brand{display:flex; align-items:center; gap:11px} .brand .logo, .site-footer .logo{height:27px; width:auto; display:block} [data-theme="light"] .logo-white{display:none} [data-theme="dark"] .logo-black{display:none} .topbar-actions{margin-left:auto; display:flex; gap:12px; align-items:center} .signin-btn{height:40px; padding:0 22px; font-size:.9rem} .account-pill{ display:inline-flex; align-items:center; gap:9px; height:40px; padding:4px 16px 4px 4px; border-radius:var(--shape-full); font-size:.9rem; font-weight:700; text-decoration:none; color:var(--on-surface); border:1.5px solid var(--outline-variant); background:color-mix(in oklab, var(--surface-container) 55%, transparent); transition:background .2s, border-color .2s; } .account-pill:hover{background:var(--surface-container-high); border-color:var(--primary); color:var(--on-surface)} .account-avatar{width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--primary-container)} @media (max-width:560px){ .account-label{display:none} .account-pill{padding:4px} .signin-btn{padding:0 16px} } /* ============ floating purchase bar ============ */ .buybar{ position:fixed; top:0; left:0; right:0; z-index:80; transform:translateY(-100%); transition:transform .35s var(--ease-emph); background:color-mix(in oklab, var(--surface) 86%, transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-bottom:1px solid var(--outline-variant); box-shadow:var(--shadow-2); } .buybar.on{transform:none} .buybar-inner{max-width:1200px; margin:0 auto; padding:0 20px; height:64px; display:flex; align-items:center; gap:8px} .bb-info{display:flex; flex-direction:column; min-width:0; margin-left:8px; line-height:1.3} .bb-info b{font-family:var(--font-display); font-size:1rem; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .bb-info span{font-size:.76rem; color:var(--on-surface-variant)} .bb-buy{margin-left:auto; display:flex; align-items:center; gap:18px} .bb-price{font-family:var(--font-display); font-weight:700; font-size:1.08rem; color:var(--primary); white-space:nowrap} .bb-buy .btn{height:42px; padding:0 22px} @media (max-width:980px){.buybar{display:none}} /* ============ hero ============ */ .hero{margin-top:18px} .hero-img{ position:relative; border-radius:var(--shape-xl); overflow:hidden; aspect-ratio:16/6.6; background:var(--surface-container-high); border:1px solid color-mix(in oklab, white 40%, transparent); box-shadow:0 16px 40px -20px rgb(0 0 0/.35); } .hero-img .hero-slide{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s var(--ease-emph)} .hero-img .hero-slide.on{opacity:1} .hero-img::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgb(0 0 0/.45), rgb(0 0 0/.05) 45%, rgb(0 0 0/0)); pointer-events:none} .hero-dots{position:absolute; right:22px; bottom:16px; z-index:2; display:flex; gap:6px} .hero-dots span{width:8px; height:8px; border-radius:50%; background:rgb(255 255 255/.45); transition:all .3s} .hero-dots span.on{background:#fff; width:22px; border-radius:var(--shape-full)} /* ============ title block ============ */ .title-block{margin-top:26px; display:flex; flex-direction:column; gap:14px} .overline-row{display:flex; flex-wrap:wrap; gap:10px} h1.event-title{ font-size:clamp(1.7rem, 5.8vw, 3.4rem); text-shadow:2px 2px 7px color-mix(in oklab, var(--primary) 40%, transparent); } [data-theme="dark"] h1.event-title{text-shadow:2px 2px 10px color-mix(in oklab, var(--primary) 55%, transparent)} .venue-row{display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px; color:var(--on-surface-variant); font-weight:500} .venue-row .i{color:var(--primary); width:20px; height:20px; margin-right:6px} .venue-row a{display:inline-flex; align-items:center; gap:4px} /* ============ CTA card ============ */ .cta-card{ background:color-mix(in oklab, var(--primary-container) 72%, transparent); -webkit-backdrop-filter:blur(20px) saturate(1.5); backdrop-filter:blur(20px) saturate(1.5); border:1px solid color-mix(in oklab, white 38%, transparent); box-shadow:inset 0 1px 0 color-mix(in oklab, white 55%, transparent), 0 12px 28px -14px color-mix(in oklab, var(--primary) 30%, transparent); color:var(--on-primary-container); border-radius:var(--shape-xl); padding:26px; display:flex; flex-direction:column; gap:18px; } .cta-card .from{font-size:.85rem; font-weight:600; opacity:.8} .cta-card .price{font-family:var(--font-display); font-size:clamp(1.75rem, 5vw, 2.2rem); font-weight:700; letter-spacing:-.02em; line-height:1} .cta-icons{display:flex; gap:8px; flex-wrap:wrap} .cta-card .icon-btn{border-color:color-mix(in oklab, currentColor 26%, transparent); color:inherit} .cta-card .icon-btn:hover{background:color-mix(in oklab, currentColor 12%, transparent); color:inherit} .cd-wrap .label{color:inherit; opacity:.75; margin-bottom:9px} .countdown{display:flex; gap:8px} .cd-cell{flex:1; text-align:center; padding:12px 4px 10px; border-radius:var(--shape-md); background:color-mix(in oklab, var(--surface) 55%, transparent)} .cd-cell b{display:block; font-family:var(--font-display); font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1} .cd-cell small{font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.75} /* ============ description ============ */ .eph-event-summary{ margin-bottom:14px; padding:.85rem 1.1rem; font-size:.95rem; line-height:1.55; background:color-mix(in oklab, var(--surface-container) 70%, transparent); border-left:3px solid var(--primary); border-radius:0 var(--shape-sm) var(--shape-sm) 0; } .desc-body{max-height:172px; overflow:hidden; position:relative; transition:max-height .5s var(--ease-emph)} .desc-body.open{max-height:none} .desc-body:not(.open)::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:70px; background:linear-gradient(to bottom, transparent, color-mix(in oklab, var(--surface-container-low) 90%, transparent)); } /* Organizer descriptions are often
-separated lines rather than real paragraphs. Balance (Rodney 2026-08-12): moderate line-height for the br-lines, em-relative paragraph margins for real

s so paragraph breaks read clearly stronger than line breaks. */ /* body.eph-landing-prefixed: must OUTRANK the base element reset (body.eph-landing p{margin:0}) which otherwise zeroes these. */ .desc-body{line-height:1.7; font-size:.98rem} body.eph-landing .desc-body p{margin:0 0 .75em} body.eph-landing .desc-body ul, body.eph-landing .desc-body ol{margin:0 0 .75em; padding-left:24px} body.eph-landing .desc-body li{margin-bottom:.35em} body.eph-landing .desc-body h1, body.eph-landing .desc-body h2, body.eph-landing .desc-body h3, body.eph-landing .desc-body h4{margin:1.1em 0 .5em; line-height:1.3} .eph-updated{margin-top:14px} .desc-body img{border-radius:var(--shape-sm)} /* facts */ .facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px} .fact{ display:flex; gap:13px; align-items:flex-start; padding:16px; background:color-mix(in oklab, var(--surface-container) 55%, transparent); border-radius:var(--shape-md); } .fact b{display:block; font-size:.93rem} .fact span{font-size:.83rem; color:var(--on-surface-variant)} /* ============ tickets ============ */ .ticket{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 18px; padding:18px 20px; border-radius:var(--shape-md); background:color-mix(in oklab, var(--surface-container) 55%, transparent); margin-bottom:12px; border:1.5px solid transparent; transition:border-color .2s; } .ticket:hover{border-color:var(--outline-variant)} .ticket.soldout{opacity:.62} .ticket-name{font-weight:700; font-size:1.02rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap} .ticket-price{font-family:var(--font-display); font-weight:700; font-size:1.28rem; text-align:right; align-self:center; grid-row:span 2} .ticket-price small{display:block; font-family:var(--font-body); font-size:.74rem; font-weight:600; color:var(--on-surface-variant)} .badge{font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3.5px 10px; border-radius:var(--shape-full)} .badge.ok{background:var(--secondary-container); color:var(--on-secondary-container)} .badge.err{background:var(--error-container); color:var(--on-error-container)} .badge.soon{background:var(--tertiary-container); color:var(--on-tertiary-container)} .badge.closed{background:var(--surface-container-highest); color:var(--on-surface-variant)} .coupon-chip{ display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:var(--shape-full); cursor:help; background:var(--tertiary-container); color:var(--on-tertiary-container); } .coupon-chip .i{width:15px; height:15px} .ticket details{grid-column:1} .ticket summary{ list-style:none; cursor:pointer; font-size:.85rem; font-weight:600; color:var(--primary); display:inline-flex; align-items:center; gap:4px; width:fit-content; } .ticket summary::-webkit-details-marker{display:none} .ticket summary .i{width:18px; height:18px; transition:transform .25s var(--ease-emph)} .ticket details[open] summary .i{transform:rotate(180deg)} .ticket details p{font-size:.87rem; color:var(--on-surface-variant); padding-top:8px; max-width:56ch; margin:0} /* ticket groups */ .tgroup{border:1.5px solid color-mix(in oklab, var(--outline-variant) 70%, transparent); border-radius:var(--shape-lg); padding:16px 14px 4px; margin-bottom:18px} .tgroup-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:0 8px 14px} .tgroup-name{font-size:.78rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--primary); margin-bottom:2px} .tgroup-meta{font-size:.85rem; color:var(--on-surface-variant); font-weight:500; display:flex; align-items:center; gap:5px} .tgroup-meta .i{width:16px; height:16px} .tgroup-info{color:var(--on-surface-variant); cursor:help; margin-top:2px} .tgroup-info .i{width:20px; height:20px} .tgroup .ticket{border:none} /* dates */ .date-row{ display:flex; align-items:center; gap:18px; padding:16px 20px; background:color-mix(in oklab, var(--surface-container) 55%, transparent); border-radius:var(--shape-md); margin-bottom:12px; flex-wrap:wrap; } .date-cal{ width:60px; height:64px; border-radius:var(--shape-sm); overflow:hidden; text-align:center; background:var(--surface-container-lowest); flex:none; border:1.5px solid var(--outline-variant); } .date-cal .m{display:block; font-size:.62rem; font-weight:800; letter-spacing:.14em; padding:3px 0 1px; background:var(--primary); color:var(--on-primary)} .date-cal .d{display:block; font-family:var(--font-display); font-size:1.5rem; font-weight:700; line-height:1.35} .date-meta{flex:1; min-width:150px} .date-meta b{font-size:1rem} .date-meta span{display:block; font-size:.85rem; color:var(--on-surface-variant)} .remaining{font-size:.78rem; font-weight:700; color:var(--tertiary) !important} /* donate */ .donate-card{display:flex; align-items:center; gap:18px; flex-wrap:wrap; flex-direction:row} .donate-card > div{flex:1; min-width:220px} /* ============ video ============ */ .video-facade{ position:relative; border-radius:var(--shape-lg); overflow:hidden; aspect-ratio:16/9; cursor:pointer; background:var(--surface-container-high); } .video-facade img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-emph)} .video-facade:hover img{transform:scale(1.035)} .video-facade::after{content:""; position:absolute; inset:0; background:rgb(0 0 0/.28); pointer-events:none} .video-facade iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3} .play-btn{ position:absolute; z-index:2; inset:0; margin:auto; width:82px; height:58px; border-radius:var(--shape-md); border:none; cursor:pointer; background:color-mix(in oklab, var(--primary) 92%, black); color:var(--on-primary); display:grid; place-items:center; box-shadow:var(--shadow-3); transition:transform .2s var(--ease-emph), border-radius .25s; } .video-facade:hover .play-btn{transform:scale(1.08); border-radius:var(--shape-full)} .play-btn .i{width:34px; height:34px} /* ============ gallery ============ */ .gallery{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none} .gallery::-webkit-scrollbar{display:none} .gallery img{ height:230px; width:auto; flex:none; border-radius:var(--shape-md); scroll-snap-align:start; transition:border-radius .3s var(--ease-emph); object-fit:cover; } .gallery img:hover{border-radius:var(--shape-xl)} /* ============ FAQ ============ */ .faq-item{ background:color-mix(in oklab, var(--surface-container) 55%, transparent); border-radius:var(--shape-md); margin-bottom:10px; overflow:hidden; transition:background .3s; } .faq-item[open]{border-radius:var(--shape-lg); background:color-mix(in oklab, var(--surface-container-high) 62%, transparent)} .faq-item summary{ list-style:none; cursor:pointer; padding:17px 20px; font-weight:700; font-size:.98rem; display:flex; align-items:center; justify-content:space-between; gap:14px; } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary .i{color:var(--primary); transition:transform .3s var(--ease-emph)} .faq-item[open] summary .i{transform:rotate(180deg)} .faq-item .a{padding:0 20px 18px; font-size:.92rem; color:var(--on-surface-variant); max-width:70ch} /* ============ map ============ */ .map-box{border-radius:var(--shape-md); overflow:hidden; aspect-ratio:4/2.5; background:var(--surface-container-high); margin-bottom:14px} .venue-name{font-size:.95rem; display:block} #eph-map-card .body-sm{margin:2px 0 14px} /* ============ sponsors (display-only) ============ */ .sponsor-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px} .sponsor{ background:color-mix(in oklab, var(--surface-container) 55%, transparent); border-radius:var(--shape-md); padding:16px 14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:9px; } .sponsor img{max-width:100%; max-height:74px; width:auto; object-fit:contain; border-radius:var(--shape-xs)} .sponsor b{font-size:.86rem; line-height:1.25} .sponsor .lvl{font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--tertiary)} /* ============ organizer ============ */ .org-head{display:flex; gap:16px; align-items:center; margin-bottom:14px} .avatar{width:62px; height:62px; border-radius:var(--shape-full); flex:none; object-fit:cover; background:var(--tertiary-container)} .org-head .title-md{display:block} .org-head .body-sm{display:block} .org-contact{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0} .msg-form{display:flex; flex-direction:column; gap:10px; margin-top:14px} .msg-form[hidden]{display:none} .msg-status{min-height:1em; margin:0} /* fields */ .text-field{ height:46px; padding:0 18px; font-family:var(--font-body); font-size:.93rem; border-radius:var(--shape-full); border:1.5px solid var(--outline); background:color-mix(in oklab, var(--surface-container-lowest) 65%, transparent); color:var(--on-surface); outline:none; min-width:0; width:100%; transition:border-color .2s, box-shadow .2s; } textarea.text-field{height:auto; padding:12px 18px; border-radius:var(--shape-lg); resize:vertical} .text-field:focus{border-color:var(--primary); box-shadow:0 0 0 1.5px var(--primary)} .text-field::placeholder{color:var(--on-surface-variant)} /* buyer-restricted shortcode restyle — the legacy shortcode hardcodes #fb0404 inline; reskin to the event palette */ .restricted-card .body-sm{margin-bottom:12px} .restricted-card .amiauthorized-btn, .restricted-card .checkauthorization-btn{ background:var(--primary) !important; border-color:var(--primary) !important; color:var(--on-primary) !important; border-radius:var(--shape-full) !important; padding:9px 18px !important; font-weight:700 !important; font-size:.85rem !important; cursor:pointer; } .restricted-card .email-input{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap} .restricted-card .email-input[style*="display: none"]{display:none !important} .restricted-card .email-input input[type="email"]{ flex:1; min-width:0; height:40px; padding:0 14px; font-family:var(--font-body); border-radius:var(--shape-full); border:1.5px solid var(--outline); background:color-mix(in oklab, var(--surface-container-lowest) 65%, transparent); color:var(--on-surface); font-size:.88rem !important; } .restricted-card #restricted_buyer_alert{ border-radius:var(--shape-md); padding:10px 14px; margin-bottom:10px; font-size:.85rem !important; border:1.5px solid var(--outline-variant); } .restricted-card #restricted_buyer_alert.alert-success{background:var(--secondary-container); color:var(--on-secondary-container)} .restricted-card #restricted_buyer_alert.alert-danger{background:var(--error-container); color:var(--on-error-container)} /* resend shortcode restyle */ .resend-card input[type="text"], .resend-card input[type="email"]{ height:44px; padding:0 16px; font-family:var(--font-body); font-size:.9rem; border-radius:var(--shape-full); border:1.5px solid var(--outline); background:color-mix(in oklab, var(--surface-container-lowest) 65%, transparent); color:var(--on-surface); width:100%; margin-bottom:10px; box-sizing:border-box; } .resend-card button, .resend-card input[type="submit"], .resend-card .button{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-body); font-size:.9rem; font-weight:700; border:none; cursor:pointer; border-radius:var(--shape-full); background:var(--secondary-container); color:var(--on-secondary-container); padding:0 22px; height:42px; } .resend-card p{margin:0 0 8px; font-size:.86rem; color:var(--on-surface-variant)} /* tags */ .tags-label{margin-bottom:10px} .tag-wrap{display:flex; flex-wrap:wrap; gap:8px} /* ============ locked teaser ============ */ .locked-card{max-width:640px; margin:26px auto 60px; text-align:center; padding:40px 32px} .locked-icon{display:grid; place-items:center; width:72px; height:72px; margin:0 auto 18px; border-radius:var(--shape-full); background:var(--primary-container); color:var(--on-primary-container)} .locked-icon .i{width:34px; height:34px} .locked-card p{margin:12px auto 22px; max-width:46ch; color:var(--on-surface-variant)} .locked-form .label{display:block; margin-bottom:8px} .locked-row{display:flex; gap:10px; max-width:420px; margin:0 auto} .locked-row .text-field{flex:1} /* ============ QR modal ============ */ .qr-modal{position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px} .qr-modal[hidden]{display:none} .qr-backdrop{position:absolute; inset:0; background:rgb(0 0 0/.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)} .qr-card{position:relative; width:min(420px, 92vw); text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; padding:30px 26px} .qr-close{position:absolute; top:12px; right:12px; font-size:22px; line-height:1} .qr-img{width:230px; height:230px; object-fit:contain; border-radius:var(--shape-md); background:#fff; padding:10px} .qr-copy{max-width:100%; cursor:pointer} .qr-copy .qr-copy-label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px} /* ============ gallery lightbox + video modal ============ */ .gallery img{cursor:zoom-in} .lightbox, .video-modal{position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:16px} .lightbox[hidden], .video-modal[hidden]{display:none} .lightbox .qr-backdrop, .video-modal .qr-backdrop{background:rgb(0 0 0/.78)} .lb-stage{position:relative; margin:0; max-width:min(1200px, 92vw); z-index:2} #eph-lb-img{max-width:100%; max-height:84vh; border-radius:var(--shape-md); box-shadow:var(--shadow-3); display:block} .lb-count{ position:absolute; left:50%; bottom:-38px; transform:translateX(-50%); color:#fff; font-size:.85rem; font-weight:700; letter-spacing:.06em; white-space:nowrap; } .lb-close{position:fixed; top:18px; right:18px; z-index:3; background:rgb(255 255 255/.14); border-color:transparent; color:#fff} .lb-close:hover{background:rgb(255 255 255/.28); color:#fff} .lb-nav{ position:fixed; top:50%; transform:translateY(-50%); z-index:3; width:52px; height:52px; background:rgb(255 255 255/.14); border-color:transparent; color:#fff; } .lb-nav:hover{background:rgb(255 255 255/.28); color:#fff} .lb-nav .i{width:28px; height:28px} .lb-prev{left:18px} .lb-next{right:18px} .video-stage{ position:relative; z-index:2; width:min(1100px, 94vw); aspect-ratio:16/9; border-radius:var(--shape-lg); overflow:hidden; background:#000; box-shadow:var(--shadow-3); } .video-stage iframe{width:100%; height:100%; border:0; display:block} @media (max-width:560px){ .lb-nav{width:44px; height:44px} .lb-prev{left:8px} .lb-next{right:8px} .lb-close{top:10px; right:10px} } /* ============ share menu ============ */ .share-modal{position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px} .share-modal[hidden]{display:none} .share-card{width:min(400px, 92vw)} .share-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; margin-top:6px} .share-item{ display:flex; align-items:center; gap:10px; padding:11px 14px; text-align:left; border-radius:var(--shape-md); font-size:.9rem; font-weight:700; cursor:pointer; background:color-mix(in oklab, var(--surface-container) 70%, transparent); border:1.5px solid var(--outline-variant); color:var(--on-surface); text-decoration:none; font-family:var(--font-body); transition:border-color .2s, background .2s; } .share-item:hover{border-color:var(--primary); color:var(--on-surface)} .share-mono{ width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--primary-container); color:var(--on-primary-container); font-family:var(--font-display); font-weight:800; font-size:.95rem; } .share-mono-icon .i, .share-mono .i{width:17px; height:17px} @media (max-width:400px){ .share-grid{grid-template-columns:1fr} } /* ============ platform mission block ============ */ .platform-about{ margin-top:90px; border-top:1px solid var(--outline-variant); background:color-mix(in oklab, var(--surface-container-low) 45%, transparent); } .platform-about-inner{ max-width:820px; text-align:center; padding:64px 20px 58px; display:flex; flex-direction:column; align-items:center; gap:18px; } .platform-about p{color:var(--on-surface-variant); line-height:1.75; margin:0} .platform-about-actions{display:flex; gap:28px; flex-wrap:wrap; justify-content:center; margin-top:10px; align-items:flex-start} .platform-cta{display:flex; flex-direction:column; align-items:center; gap:7px} .platform-cta .btn{min-width:220px} .platform-cta-sub{font-size:.78rem; color:var(--on-surface-variant)} @media (max-width:560px){ .platform-about{margin-top:56px} .platform-about-inner{padding:44px 16px 40px} .platform-about-actions{flex-direction:column; width:100%} .platform-cta{width:100%} .platform-cta .btn{width:100%} } /* ============ footer ============ */ .site-footer{margin:40px 0 20px} .footer-inner{display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center} /* ============ mobile sticky CTA ============ */ .mobile-cta{ position:fixed; left:0; right:0; bottom:0; z-index:70; background:color-mix(in oklab, var(--surface-container-high) 88%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--outline-variant); padding:12px 18px calc(12px + env(safe-area-inset-bottom)); display:none; align-items:center; gap:16px; } .mobile-cta .price{font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1; white-space:nowrap} .mobile-cta .from{font-size:.72rem; color:var(--on-surface-variant); font-weight:600} .mobile-cta .btn{flex:1} /* ============ entrance motion ============ */ @media (prefers-reduced-motion: no-preference){ @keyframes eph-rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}} .main-col > *, .rail > *, .hero, .title-block{animation:eph-rise .6s var(--ease-emph) backwards} .hero{animation-delay:.02s}.title-block{animation-delay:.08s} .main-col > *:nth-child(1){animation-delay:.14s} .main-col > *:nth-child(2){animation-delay:.18s} .main-col > *:nth-child(3){animation-delay:.22s} .rail > *:nth-child(1){animation-delay:.16s} .rail > *:nth-child(2){animation-delay:.22s} } /* ============ responsive ============ */ @media (max-width: 980px){ .page-grid{grid-template-columns:minmax(0,1fr)} .rail{position:static; min-width:0} .mobile-cta{display:flex} .hero-img{aspect-ratio:16/9} } @media (max-width: 560px){ body.eph-landing{font-size:14.75px} .eph-landing .card{padding:18px 16px} .sponsor-grid{grid-template-columns:1fr 1fr} .shell{padding:0 14px} .main-col, .rail, .page-grid{gap:16px} .title-block{margin-top:18px; gap:10px} .venue-row{font-size:.92rem} .overline-row .chip{height:31px; padding:0 11px; font-size:.78rem} .overline-row .chip .i{width:16px; height:16px} .brand .logo{height:24px} .topbar-inner{height:58px; padding:0 14px} .icon-btn{width:40px; height:40px} .eph-landing .btn{height:44px; padding:0 20px; font-size:.9rem} .eph-landing .btn.big{height:50px; font-size:.98rem; padding:0 24px} .section-head{gap:10px; margin-bottom:14px} .ticket{padding:14px 16px} .ticket-name{font-size:.95rem} .ticket-price{font-size:1.12rem} .badge{font-size:.64rem} .tgroup{padding:12px 10px 2px} .tgroup-name{font-size:.72rem; letter-spacing:.18em} .tgroup-meta{font-size:.8rem} .date-cal{width:52px; height:56px} .date-cal .d{font-size:1.3rem} .date-row{padding:14px 16px; gap:14px} .date-meta b{font-size:.95rem} .cd-cell b{font-size:1.25rem} .cd-cell small{font-size:.6rem} .fact{padding:13px} .fact b{font-size:.9rem} .fact span{font-size:.8rem} .faq-item summary{padding:14px 16px; font-size:.92rem} .faq-item .a{padding:0 16px 15px; font-size:.88rem} .gallery img{height:172px} .avatar{width:54px; height:54px} .mobile-cta{padding:10px 14px calc(10px + env(safe-area-inset-bottom))} .mobile-cta .price{font-size:1rem} .mobile-cta .from{font-size:.68rem} .site-footer{font-size:.78rem} .locked-card{padding:28px 18px} .locked-row{flex-direction:column} } @media (max-width: 374px){ .brand .logo{height:20px} .mobile-cta .price{font-size:.9rem} .mobile-cta .btn.big{padding:0 16px} } /* admin bar offset for logged-in staff */ body.admin-bar .topbar{top:32px} @media (max-width:782px){ body.admin-bar .topbar{top:46px} }