:root{ /* --ink-3 was #8B7FA6: 3.48:1 on the cream background, under the 4.50 WCAG AA floor, and it carries the event description, the booking-fee line and most of the small print on the site. #736688 is 4.97:1 on cream and 5.27:1 on white, in the same violet-grey family. The literal #8B7FA6 elsewhere is on the dark scanner, where it is light-on-dark and passes. */ --ink:#1A1030; --ink-2:#4A3F63; --ink-3:#736688; --bg:#FAF8F4; --card:#FFFFFF; --line:#EDE8E0; --violet:#6D28D9; --violet-d:#4C1D95; --violet-t:#F1EAFE; --mari:#F59E0B; --mari-t:#FEF3D9; --saff:#F4640E; --saff-t:#FEEBDD; --ok:#0E9F6E; --ok-t:#E3F5EE; --bad:#E02424; --bad-t:#FDE8E8; --r:18px; --r-s:12px; --sh:0 1px 2px rgba(26,16,48,.05),0 8px 24px -12px rgba(26,16,48,.14); --sh-lg:0 24px 60px -20px rgba(26,16,48,.25); --grad:linear-gradient(120deg,#6D28D9 0%,#9333EA 45%,#F4640E 120%); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased} h1,h2,h3{line-height:1.15;letter-spacing:-.015em} .serif{font-family:'Fraunces',serif} img{max-width:100%} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} input,select,textarea{font:inherit;color:var(--ink)} .container{max-width:1180px;margin:0 auto;padding-left:28px;padding-right:28px} /* A 28px gutter each side is 15% of a 375px phone. Narrow it there rather than letting the layout choose between cramped and edge-to-edge. */ @media(max-width:560px){ .container{padding-left:16px;padding-right:16px} } /* ---------- screens ---------- */ .screen{display:block;min-height:100vh;animation:fadein .28s ease} @keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;border-radius:999px;padding:12px 24px;font-size:15px;transition:.18s;white-space:nowrap} .btn-p{background:var(--violet);color:#fff;box-shadow:0 6px 18px -6px rgba(109,40,217,.5)} .btn-p:hover{background:var(--violet-d);transform:translateY(-1px)} .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{background:#2c1d4d} .btn-o{border:1.5px solid var(--line);background:#fff;color:var(--ink)} .btn-o:hover{border-color:var(--violet);color:var(--violet)} .btn-ghost{color:var(--violet);font-weight:700} .btn-sm{padding:8px 16px;font-size:13.5px} .btn-lg{padding:16px 32px;font-size:16px} .btn-block{width:100%} /* ---------- topbar ---------- */ .topbar{position:sticky;top:0;z-index:50;background:rgba(250,248,244,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .topbar-in{display:flex;align-items:center;gap:26px;height:68px} .logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;letter-spacing:-.02em;cursor:pointer} .logo-mark{width:32px;height:32px;border-radius:9px;background:var(--grad);display:grid;place-items:center;color:#fff;font-size:15px;box-shadow:0 4px 12px -3px rgba(109,40,217,.5)} .logo small{font-size:10px;font-weight:600;color:var(--ink-3);display:block;letter-spacing:.08em;text-transform:uppercase;margin-top:-2px} .nav{display:flex;gap:4px;margin-left:8px} .nav button{padding:8px 14px;border-radius:999px;font-weight:600;color:var(--ink-2);font-size:14.5px} .nav button:hover{background:var(--violet-t);color:var(--violet)} .nav button.on{background:var(--ink);color:#fff} .topbar-cta{margin-left:auto;display:flex;gap:10px;align-items:center} /* ---------- shared ---------- */ .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--saff)} .chip{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:13.5px;font-weight:600;color:var(--ink-2);transition:.15s} .chip:hover{border-color:var(--violet)} .chip.on{background:var(--ink);border-color:var(--ink);color:#fff} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)} .badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700} .badge.ok{background:var(--ok-t);color:var(--ok)} .badge.mari{background:var(--mari-t);color:#B45309} .badge.viol{background:var(--violet-t);color:var(--violet)} .badge.bad{background:var(--bad-t);color:var(--bad)} .badge.dim{background:#F1EFEA;color:var(--ink-3)} .muted{color:var(--ink-3)} .small{font-size:13px} .b{font-weight:700} .divider{height:1px;background:var(--line);margin:18px 0} /* ---------- hero ---------- */ .hero{background:var(--grad);color:#fff;position:relative;overflow:hidden} .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 320px at 85% -10%,rgba(255,255,255,.25),transparent)} .hero-in{position:relative;z-index:1;padding-top:72px;padding-bottom:88px;text-align:center} .hero h1{font-size:clamp(34px,5vw,56px);font-weight:800;margin:14px 0 12px} .hero h1 em{font-family:'Fraunces',serif;font-style:italic;font-weight:600} .hero p{font-size:18px;opacity:.9;max-width:620px;margin:0 auto 30px} /* The button was pushed past the right edge on a phone: a nowrap row of input + select + button needs more than 375px, and the page does not scroll sideways, so the site's only search control could not be tapped at all. */ .searchbar{display:flex;flex-wrap:wrap;gap:8px;max-width:640px;margin:0 auto;background:#fff;border-radius:999px;padding:7px;box-shadow:var(--sh-lg)} @media(max-width:560px){ .searchbar{border-radius:20px;padding:10px} .searchbar input,.searchbar select{flex:1 1 100%;border-radius:12px;background:#F6F3EE;padding:12px 16px} .searchbar .btn{flex:1 1 100%} } .searchbar input{flex:1;border:none;outline:none;padding:10px 20px;font-size:15.5px;background:none;border-radius:999px} .searchbar select{border:none;outline:none;font-weight:600;color:var(--ink-2);background:#F6F3EE;border-radius:999px;padding:0 18px} .hero-stats{display:flex;gap:34px;justify-content:center;margin-top:34px;font-size:13.5px;opacity:.92} .hero-stats b{display:block;font-size:20px} /* ---------- event grid ---------- */ .section{padding-top:52px;padding-bottom:52px} .sec-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px} .sec-head h2{font-size:26px;font-weight:800} .filters{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 26px} .egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:22px} .ecard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:.2s;box-shadow:var(--sh)} .ecard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)} .ecard-media{aspect-ratio:4.64;position:relative;display:flex;align-items:flex-end;padding:12px;background-color:#EDE8E0} .ecard-media .date-pill{background:rgba(255,255,255,.94);border-radius:10px;padding:6px 10px;text-align:center;line-height:1.1;box-shadow:var(--sh)} .date-pill b{display:block;font-size:16px;color:var(--saff)} .date-pill span{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--ink-2)} .ecard-body{padding:15px 16px 17px} .ecard-body h3{font-size:16.5px;font-weight:700;margin:4px 0 6px} .ecard-meta{font-size:13px;color:var(--ink-3)} .ecard-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px} .price{font-weight:800;font-size:15px} .price small{font-weight:600;color:var(--ink-3);font-size:11.5px;display:block} /* gradient thumbs */ .g1{background:linear-gradient(135deg,#7C3AED,#DB2777)} .g2{background:linear-gradient(135deg,#F59E0B,#EF4444)} .g3{background:linear-gradient(135deg,#0E9F6E,#0694A2)} .g4{background:linear-gradient(135deg,#1E40AF,#7C3AED)} .g5{background:linear-gradient(135deg,#B45309,#F4640E)} .g6{background:linear-gradient(135deg,#111827,#4B5563)} .thumb-emoji{position:absolute;top:12px;right:14px;font-size:30px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))} /* ---------- trust strip ---------- */ .trust{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:34px 0} .trust-item{display:flex;gap:12px;align-items:flex-start} .trust-ic{width:40px;height:40px;border-radius:12px;background:var(--violet-t);display:grid;place-items:center;font-size:18px;flex-shrink:0} .trust-item b{display:block;font-size:14.5px} .trust-item span{font-size:13px;color:var(--ink-3)} /* ---------- event detail ---------- */ .edetail-hero{height:300px;position:relative;display:flex;align-items:flex-end} .edetail-hero .container{position:relative;z-index:2;padding-bottom:30px;color:#fff;width:100%} .edetail-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(10,5,25,.72))} .edetail-hero h1{font-size:clamp(28px,4vw,44px);font-weight:800;margin-top:8px;position:relative;z-index:2} .edetail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:34px;padding-top:36px;padding-bottom:70px;align-items:start} .meta-row{display:flex;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)} .meta-ic{width:42px;height:42px;border-radius:12px;background:var(--violet-t);display:grid;place-items:center;font-size:18px;flex-shrink:0} .tier{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border:1.5px solid var(--line);border-radius:14px;margin-bottom:11px;transition:.15s;background:#fff} .tier:hover{border-color:var(--violet)} .tier.sel{border-color:var(--violet);background:var(--violet-t)} .tier .b{font-size:15.5px} .qty{display:flex;align-items:center;gap:12px} .qty button{width:32px;height:32px;border-radius:999px;border:1.5px solid var(--line);font-size:17px;font-weight:700;display:grid;place-items:center;background:#fff} .qty button:hover{border-color:var(--violet);color:var(--violet)} .qty span{min-width:20px;text-align:center;font-weight:800;font-size:16px} .sticky-buy{position:sticky;top:88px} .buy-box{padding:24px} .sumrow{display:flex;justify-content:space-between;padding:5px 0;font-size:14.5px} .sumrow.total{font-size:17px;font-weight:800;padding-top:12px;margin-top:8px;border-top:1.5px solid var(--line)} .allin{display:flex;gap:9px;align-items:center;background:var(--ok-t);color:#046C4E;font-size:12.5px;font-weight:600;border-radius:10px;padding:9px 13px;margin-top:14px} /* ---------- checkout ---------- */ .co-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;padding-top:40px;padding-bottom:80px;align-items:start} .field{margin-bottom:15px} .field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--ink-2)} .field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;font-size:15px;outline:none;background:#fff;transition:.15s} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(109,40,217,.12)} .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px} .paybox{border:1.5px solid var(--line);border-radius:14px;padding:18px;background:#fff} .paybrand{display:flex;gap:7px;margin-bottom:12px} .paybrand span{border:1px solid var(--line);border-radius:6px;padding:3px 9px;font-size:11px;font-weight:800;color:var(--ink-2)} .promo-line{display:flex;gap:10px} .promo-line input{flex:1} .steps{display:flex;gap:8px;align-items:center;margin:26px 0 8px;font-size:13px;font-weight:700;color:var(--ink-3)} .steps .dot{width:26px;height:26px;border-radius:999px;background:#EDE8E0;display:grid;place-items:center;font-size:12.5px} .steps .cur{color:var(--ink)} .steps .cur .dot{background:var(--ink);color:#fff} .steps .done .dot{background:var(--ok);color:#fff} /* ---------- confirmation / tickets ---------- */ .confetti-wrap{background:var(--grad);color:#fff;text-align:center;padding:56px 20px 46px;position:relative;overflow:hidden} .tickets-wrap{max-width:760px;margin:-26px auto 70px;position:relative;z-index:2;padding:0 20px} .tkt{display:flex;background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--sh-lg);margin-bottom:18px} .tkt-main{flex:1;padding:22px 26px} .tkt-qr{width:190px;border-left:2px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;position:relative} .tkt-qr::before,.tkt-qr::after{content:"";position:absolute;left:-11px;width:22px;height:22px;border-radius:999px;background:var(--bg)} .tkt-qr::before{top:-11px} .tkt-qr::after{bottom:-11px} .qr{display:grid;grid-template-columns:repeat(13,1fr);width:120px;height:120px;background:#fff} .qr i{background:#1A1030} .wallet-row{display:flex;gap:10px;justify-content:center;margin-top:6px} .wallet-btn{background:#000;color:#fff;border-radius:10px;padding:8px 16px;font-size:12.5px;font-weight:700;display:inline-flex;gap:7px;align-items:center} /* ---------- pricing ---------- */ .ptable{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:14px} .ptable th,.ptable td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)} .ptable th{background:#F6F3EE;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)} .ptable tr:last-child td{border-bottom:none} .ptable td.hl{background:var(--violet-t);font-weight:700} .calc{padding:26px} .calc input[type=range]{width:100%;accent-color:var(--violet)} .calc-out{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;text-align:center} .calc-out .card{padding:16px 10px} .calc-out b{font-size:22px;display:block} /* ---------- org console ---------- */ .org body{background:#F4F2ED} .orgbar{background:var(--ink);color:#fff;position:sticky;top:0;z-index:50} .orgbar .topbar-in{height:64px} .orgbar .nav button{color:#BDB3D6} .orgbar .nav button:hover{background:rgba(255,255,255,.08);color:#fff} .orgbar .nav button.on{background:var(--violet);color:#fff} .org-head{display:flex;justify-content:space-between;align-items:center;padding:34px 0 6px} .org-head h1{font-size:26px;font-weight:800} .statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:22px 0} .stat{padding:20px 22px} .stat .lab{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)} .stat .val{font-size:27px;font-weight:800;margin-top:4px} .stat .sub{font-size:12.5px;margin-top:3px} .up{color:var(--ok);font-weight:700} .two-col{display:grid;grid-template-columns:1.7fr 1fr;gap:18px;align-items:start;margin-bottom:40px} .panel{padding:22px} .panel h3{font-size:16px;font-weight:800;margin-bottom:14px} .bars{display:flex;align-items:flex-end;gap:8px;height:150px;padding-top:6px} .bars div{flex:1;background:var(--violet-t);border-radius:6px 6px 0 0;position:relative;min-height:6px} .bars div.hot{background:var(--violet)} .bars div span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:10.5px;color:var(--ink-3);font-weight:600} table.data{width:100%;border-collapse:collapse;font-size:13.5px} table.data th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);padding:8px 10px;border-bottom:1.5px solid var(--line)} table.data td{padding:11px 10px;border-bottom:1px solid var(--line)} table.data tr:last-child td{border-bottom:none} /* wizard */ .wiz{max-width:760px;margin:0 auto;padding-top:36px;padding-bottom:80px} .wiz-steps{display:flex;gap:6px;margin-bottom:28px} .wiz-steps div{flex:1;height:5px;border-radius:99px;background:#E4DFD6} .wiz-steps div.done{background:var(--violet)} .wiz-card{padding:30px} .tier-edit{display:grid;grid-template-columns:1.6fr 1fr 1fr 44px;gap:12px;margin-bottom:12px;align-items:center} .tier-edit input{border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;width:100%} .del-tier{width:38px;height:38px;border-radius:10px;background:var(--bad-t);color:var(--bad);font-size:16px;font-weight:800} .radio-card{display:flex;gap:13px;border:1.5px solid var(--line);border-radius:14px;padding:16px;margin-bottom:11px;cursor:pointer;transition:.15s;background:#fff} .radio-card:hover{border-color:var(--violet)} .radio-card.sel{border-color:var(--violet);background:var(--violet-t)} .radio-card input{accent-color:var(--violet);margin-top:3px} /* scanner */ #scr-scanner{background:#0D0819;color:#fff} .scan-wrap{max-width:430px;margin:0 auto;padding:30px 22px 60px;text-align:center} .viewfinder{aspect-ratio:1;border-radius:24px;background:radial-gradient(circle at 50% 40%,#241740,#0D0819 75%);position:relative;margin:22px 0;overflow:hidden;border:1px solid #33255c} .vf-corner{position:absolute;width:46px;height:46px;border:4px solid var(--mari);opacity:.95} .vf-corner.tl{top:26px;left:26px;border-right:none;border-bottom:none;border-radius:12px 0 0 0} .vf-corner.tr{top:26px;right:26px;border-left:none;border-bottom:none;border-radius:0 12px 0 0} .vf-corner.bl{bottom:26px;left:26px;border-right:none;border-top:none;border-radius:0 0 0 12px} .vf-corner.br{bottom:26px;right:26px;border-left:none;border-top:none;border-radius:0 0 12px 0} .scanline{position:absolute;left:34px;right:34px;height:3px;background:linear-gradient(90deg,transparent,var(--mari),transparent);animation:scan 2.2s ease-in-out infinite;border-radius:99px} @keyframes scan{0%,100%{top:18%}50%{top:78%}} .scan-result{border-radius:18px;padding:20px;text-align:left;display:none;margin-bottom:14px} .scan-result.show{display:block;animation:fadein .25s} .scan-result.ok{background:#0B3B2C;border:1px solid #10B981} .scan-result.dup{background:#3F2A08;border:1px solid var(--mari)} .scan-result.bad{background:#3B0B0B;border:1px solid #F87171} .scan-count{display:flex;justify-content:space-between;background:#1A1030;border:1px solid #33255c;border-radius:14px;padding:14px 20px;font-size:13.5px} /* ---------- proto map ---------- */ .fab{position:fixed;right:22px;bottom:22px;z-index:99;background:var(--ink);color:#fff;border-radius:999px;padding:13px 22px;font-weight:800;font-size:14px;box-shadow:var(--sh-lg);display:flex;gap:9px;align-items:center} .fab:hover{background:var(--violet)} .map-overlay{position:fixed;inset:0;background:rgba(16,9,35,.66);backdrop-filter:blur(6px);z-index:100;display:none;align-items:center;justify-content:center;padding:30px} .map-overlay.show{display:flex} .map-card{background:#fff;border-radius:24px;max-width:860px;width:100%;padding:30px;max-height:86vh;overflow:auto} .map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:18px} .map-grid button{border:1.5px solid var(--line);border-radius:14px;padding:15px 14px;text-align:left;font-weight:700;font-size:13.5px;transition:.15s;background:#fff} .map-grid button:hover{border-color:var(--violet);background:var(--violet-t)} .map-grid button small{display:block;font-weight:600;color:var(--ink-3);font-size:11.5px;margin-top:3px} .map-sec{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--saff);margin-top:20px} /* toast */ #toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:30px;background:var(--ink);color:#fff;padding:12px 22px;border-radius:999px;font-weight:700;font-size:14px;opacity:0;pointer-events:none;transition:.3s;z-index:120;box-shadow:var(--sh-lg)} #toast.show{opacity:1;transform:translateX(-50%) translateY(0)} footer.site{border-top:1px solid var(--line);padding:34px 0;color:var(--ink-3);font-size:13px;background:#fff} footer.site .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px} /* The hamburger only exists on small screens; the nav is inline above that. */ .navtoggle{display:none;background:none;border:0;font-size:22px;line-height:1;cursor:pointer;padding:6px 10px;color:inherit} .orgbar .navtoggle{color:#fff} @media(max-width:900px){ .edetail-grid,.co-grid,.two-col{grid-template-columns:1fr} .statgrid,.trust-in{grid-template-columns:repeat(2,1fr)} .navtoggle{display:inline-flex;order:2} /* Closed by default, and opening it drops the links below the bar rather than squeezing them into it — there are eight in the organiser console. */ .nav{display:none} .nav.open{display:flex;flex-direction:column;order:3;width:100%;gap:2px;padding:6px 0 10px} .nav.open a{display:block;padding:11px 14px;border-radius:10px} /* height:68px was FIXED, so wrapping the menu onto a second row did not make the bar any taller — the links spilled out of it and over the page, with the bar's background ending above them. On the event page that put dark link text on top of a dark purple hero, unreadable, which is how this was found. The bar has to grow with what is inside it. */ .topbar-in{flex-wrap:wrap;height:auto;min-height:68px} .orgbar .topbar-in{height:auto;min-height:64px} /* Two buttons and a logo already fill the bar on a phone. */ .topbar-cta .btn-o{display:none} } /* ---------- multipage additions ---------- */ a{color:inherit;text-decoration:none} .nav a{padding:8px 14px;border-radius:999px;font-weight:600;color:var(--ink-2);font-size:14.5px;display:inline-block} .nav a:hover{background:var(--violet-t);color:var(--violet)} .nav a.on{background:var(--ink);color:#fff} .orgbar .nav a{color:#BDB3D6} .orgbar .nav a:hover{background:rgba(255,255,255,.08);color:#fff} .orgbar .nav a.on{background:var(--violet);color:#fff} .skel{background:linear-gradient(90deg,#EFEAE2 25%,#F7F4EE 50%,#EFEAE2 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:12px} @keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}} .empty{padding:60px 20px;text-align:center;color:var(--ink-3)} .qrimg{width:130px;height:130px;image-rendering:pixelated} .banner-demo{background:var(--mari-t);color:#7A4A08;font-size:13px;font-weight:600;text-align:center;padding:8px 16px} .banner-demo a{text-decoration:underline} /* ---------- image picker ---------- */ .img-pick{position:relative;border:2px dashed var(--line);border-radius:14px;aspect-ratio:4.64;display:grid;place-items:center;cursor:pointer;overflow:hidden;background:#fff;transition:.15s} .img-pick:hover{border-color:var(--violet);background:var(--violet-t)} .img-pick.img-pick-portrait{aspect-ratio:2/3} .img-pick-empty{text-align:center;color:var(--ink-3);font-size:22px;line-height:1.5;padding:10px} .img-pick-empty b{display:block;font-size:15px;color:var(--ink-2);margin-top:4px} .img-pick-empty span{display:block;font-size:11.5px;font-weight:500;margin-top:2px} .img-pick-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff} .img-pick-clear{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:999px;background:rgba(16,9,35,.75);color:#fff;font-size:14px;font-weight:800;display:grid;place-items:center;z-index:2} .btn-rm{margin-left:8px;color:var(--bad);font-weight:700;background:none;font-size:12.5px} .btn-rm:hover{text-decoration:underline} .img-pick-clear:hover{background:var(--bad)} .img-pick-busy{position:absolute;inset:0;background:rgba(255,255,255,.8);display:grid;place-items:center;font-weight:700;color:var(--violet);font-size:13px;z-index:3} /* ---------- crop modal ---------- */ .crop-overlay{position:fixed;inset:0;z-index:200;background:rgba(16,9,35,.7);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px} .crop-modal{background:#fff;border-radius:20px;padding:24px;width:100%;max-width:640px;max-height:92vh;overflow:auto;box-shadow:var(--sh-lg)} .crop-title{font-size:19px;font-weight:800} .crop-stage{background:#1A1030;border-radius:14px;overflow:hidden;max-height:56vh} .crop-stage img{display:block;max-width:100%} .crop-tools{display:flex;gap:8px;justify-content:center;margin:12px 0} .crop-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px} /* ---------- event page banner (wider + shorter than the 5:2 source) + title below ---------- */ .event-banner{aspect-ratio:4.64;max-width:min(884px,100%);margin:0 auto;border-radius:20px;background-size:cover;background-position:center;background-color:#EDE8E0;position:relative;display:grid;place-items:center;overflow:hidden;box-shadow:var(--sh)} .event-head{max-width:600px;margin:16px auto 0;text-align:center} .event-head h1{font-size:clamp(23px,3.2vw,32px);font-weight:800;line-height:1.16;color:var(--ink)} .event-head .when{margin-top:5px;font-weight:600;color:var(--ink-2)} /* ---------- event page: hero, detail rows, mobile buy bar ---------- The hero carries the title now. On a phone the old layout spent the first screen on a decorative band and pushed the name, the price and the buy button below the fold — on a page that is almost always opened from a WhatsApp link, on a phone, by someone deciding in about four seconds. */ .ehero{position:relative;display:flex;align-items:flex-end;aspect-ratio:21/9; min-height:250px;max-height:360px; border-radius:24px;overflow:hidden;background-size:cover;background-position:center; background-color:var(--line);box-shadow:var(--sh)} /* An uploaded banner is the organiser's own artwork and usually already says the name, the date and the price. So it is shown whole, at the shape it was drawn in — not cropped to our rectangle, and with nothing of ours on top of it. The title goes underneath instead. */ .ehero-img{display:block;width:100%;height:auto;max-height:440px;object-fit:contain; border-radius:24px;background:#fff;box-shadow:var(--sh)} .ehead{max-width:760px;margin:20px auto 0;text-align:center} .ehead h1{font-size:clamp(24px,3.3vw,36px);font-weight:800;line-height:1.14; letter-spacing:-.02em;color:var(--ink);margin:9px 0 7px} .ehead-when{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 16px; font-weight:600;color:var(--ink-2);font-size:15px} .ehead-when span{display:inline-flex;align-items:center;gap:7px} .ehead .ehero-cat{background:var(--violet-t);border-color:transparent;color:var(--violet-d)} /* No banner uploaded is a normal state, not a broken one, so it gets a real design: the brand gradient rather than a category colour that fights the purple in the logo, and the emoji as a watermark instead of a lone glyph floating in an empty band. */ .ehero.noimg{background:var(--grad)} .ehero-mark{position:absolute;right:-6px;bottom:-30px;font-size:180px;line-height:1;opacity:.17;pointer-events:none;user-select:none} .ehero-scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(12,7,24,.86) 0%,rgba(12,7,24,.55) 34%,rgba(12,7,24,.12) 66%,rgba(12,7,24,0) 100%)} .ehero-body{position:relative;width:100%;padding:26px 30px 28px;color:#fff} .ehero-body h1{font-size:clamp(25px,3.9vw,42px);font-weight:800;line-height:1.1; letter-spacing:-.02em;margin:11px 0 9px;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.4)} .ehero-when{display:flex;flex-wrap:wrap;gap:5px 15px;font-weight:600; font-size:clamp(13.5px,1.5vw,16px);color:rgba(255,255,255,.93)} .ehero-when span{display:inline-flex;align-items:center;gap:7px} .ehero-cat{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px; background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.3); -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px); color:#fff;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase} .ehero-top{position:absolute;top:15px;left:15px;right:15px;z-index:2; display:flex;justify-content:space-between;align-items:flex-start;gap:12px} /* A calendar tile reads as a date at a glance in a way a sentence does not. */ .dtile{background:#fff;border-radius:14px;padding:7px 13px 9px;text-align:center;min-width:62px; box-shadow:0 12px 30px -12px rgba(0,0,0,.55)} .dtile .m{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--saff)} .dtile .d{font-size:25px;font-weight:800;line-height:1.06;color:var(--ink)} .dtile .w{font-size:10.5px;font-weight:600;color:var(--ink-3)} /* Directions and Add to calendar belong on the rows they describe. */ .meta-row .act{margin-left:auto;flex:none;padding:7px 13px;border-radius:999px; border:1.5px solid var(--line);font-size:13px;font-weight:700;color:var(--violet);white-space:nowrap} .meta-row .act:hover{border-color:var(--violet);background:var(--violet-t)} /* flex:1 so the text block keeps its place beside the icon. Without a basis it is sized by its content, and a long line ("Presented by Aussie NSUers Association") wrapped itself onto the row below the icon once .meta-row was allowed to wrap for the action button. */ .meta-row>div:nth-child(2){min-width:0;flex:1 1 0} .capbar{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin:9px 0 13px} .capbar>i{display:block;height:100%;border-radius:999px;background:var(--grad)} /* "$30.00 + $0.57 booking fee" was breaking after "booking", orphaning "fee" onto its own line on every tier. */ .tier .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 7px;margin-top:4px} .tier .price .fee{white-space:nowrap} .buybar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;gap:14px; padding:11px 16px calc(11px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-top:1px solid var(--line);box-shadow:0 -10px 34px -14px rgba(26,16,48,.3)} .buybar .bb-p{font-weight:800;font-size:16px;line-height:1.2} .buybar .bb-s{font-size:12px;color:var(--ink-3)} .buybar .btn{margin-left:auto;flex:none} @media(max-width:900px){ .buybar.on{display:flex} .ehero{aspect-ratio:auto;min-height:272px;max-height:none;border-radius:18px} .ehero-img{border-radius:18px;max-height:none} .ehead{margin-top:16px} .ehead-when{font-size:14px;gap:4px 12px} .ehero-body{padding:20px 18px 22px} .edetail-grid{padding-top:26px;padding-bottom:104px} /* Grid, not wrapped flex. Flex kept trading one defect for another here: a basis wide enough to force the action onto its own line also overflowed the 52px indent, and a basis narrow enough to fit stayed inline and squeezed "The Australiana Pioneer Village" onto two lines with the address on three. Two columns and two rows says exactly what is meant. */ .meta-row{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:start} .meta-row .meta-ic{grid-area:1/1} .meta-row>div:nth-child(2){grid-area:1/2;min-width:0} .meta-row .act{grid-area:2/2;justify-self:start;margin:9px 0 2px} } /* ---------- the alumni offer at checkout ---------- A tick box lost among the consent lines was being missed, so this is a card of its own above the details, and the choice is REQUIRED rather than opt-in: nobody declines by not noticing. "No thanks" is given exactly the same weight as "Yes" — a required question is fair, a question where declining is made harder is not. */ .memcard{border:1.5px solid var(--violet);background: linear-gradient(180deg,var(--violet-t) 0%,#fff 58%)} .memcard-badge{display:inline-flex;align-items:center;gap:6px;background:var(--violet);color:#fff; font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; padding:5px 11px;border-radius:999px} .memchoice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px} .memopt{display:flex;gap:10px;align-items:flex-start;cursor:pointer;background:#fff; border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;transition:.15s} .memopt:hover{border-color:var(--violet)} .memopt input{accent-color:var(--violet);margin-top:2px;flex:none} .memopt span{display:block;line-height:1.35} .memopt small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px} .memopt.on{border-color:var(--violet);background:var(--violet-t)} /* Asked for but not answered — shown only after someone tries to pay. */ .memcard.needed{border-color:var(--mari);box-shadow:0 0 0 4px var(--mari-t)} .memneed{color:#8a5a00;font-weight:700;font-size:13px;margin-top:10px} @media(max-width:560px){ .memchoice{grid-template-columns:1fr} } /* ---------- ticket stub on a phone ---------- This lived as a