/* ========================================================================== TickTap styles — help-centre redesign (2026) Flat, purple + green, Plus Jakarta Sans. Organised top-down: 01 base · 02 header/footer · 03 home · 04 events/event · 05 checkout 06 forms & content pages · 07 ticket & status · 08 organiser · 09 admin ========================================================================== */ @font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/plus-jakarta-sans.woff2") format("woff2"), url("fonts/plus-jakarta-sans.ttf") format("truetype"); font-weight: 200 800; font-style: normal; font-display: swap; } :root { --p: #2A1261; --p2: #3B1E80; --g: #6AD583; --g-hover: #7DE094; --g-edge: #3FA85A; --g-ink: #2F9E52; --ink: #5A5275; --mute: #8C85A6; --lilac: #F7F5FC; --line: #E9E5F3; --line-2: #C9BEEA; --tile: #F1EDFB; --red: #D6334A; --red-bg: #FDECEF; --amber: #B26A00; --amber-bg: #FFF4DF; --ok-bg: #E7F8EC; --a: #2A1261; --b: #6AD583; --c: #fff; --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bar-h: 88px; /* Aliases for older class rules / inline styles */ --purple: var(--p); --panel: var(--lilac); --panel-2: var(--tile); --soft: var(--tile); --line-soft: var(--line); --green: var(--g); --green-deep: var(--g-ink); --green-ink: var(--p); --accent-deep: var(--g-ink); --danger: var(--red); --r: 14px; --r-lg: 18px; --r-pill: 999px; --wrap: 1160px; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 12px); } body { font-family: var(--font); color: var(--p); background: #fff; -webkit-font-smoothing: antialiased; line-height: 1.5; font-size: 16px; min-height: 100vh; display: flex; flex-direction: column; } body > main, body > .main { flex: 1 0 auto; } img, svg, video { max-width: 100%; } img { display: block; height: auto; } a { color: inherit; text-decoration: none; } p a:not(.btn), .link, .legal li a:not(.btn), .legal td a:not(.btn), .muted a { color: var(--p2); text-decoration: underline; text-decoration-color: var(--g); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; } p a:not(.btn):hover, .link:hover, .legal li a:not(.btn):hover { color: var(--p); text-decoration-color: var(--p); } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; } h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; line-height: 1.15; } strong, b { font-weight: 800; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--tile); padding: 1px 6px; border-radius: 6px; } hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; } [hidden] { display: none !important; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; width: 100%; } .muted { color: var(--ink); } .small { font-size: 14px; } .skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--g); color: var(--p); padding: 10px 16px; border-radius: 999px; font-weight: 800; } .skip:focus { top: 12px; } :focus { outline: none; } :focus-visible { outline: 3px solid var(--g) !important; outline-offset: 3px; } ::selection { background: var(--g); color: var(--p); } /* ---------- Two-tone icon set (48 grid) ---------- */ .ci { width: 1em; height: 1em; display: block; overflow: visible; flex: none; } .ci .a { fill: var(--a); } .ci .b { fill: var(--b); } .ci .c { fill: var(--c); } .ci path.a[stroke-width] { stroke: var(--a); } .ci path.b[stroke-width] { stroke: var(--b); } .ci path.c[stroke-width] { stroke: var(--c); } .ci .sa, .ci .sb, .ci .sc, .ci .scur { fill: none; stroke-linecap: round; stroke-linejoin: round; } .ci .sa { stroke: var(--a); } .ci .sb { stroke: var(--b); } .ci .sc { stroke: var(--c); } .ci .scur { stroke: currentColor; } .on-dark { --a: #fff; --b: #6AD583; --c: #2A1261; } /* Legacy 24px stroke icons (ui_icon / step_icon / category_icon) */ .ic24, svg.ui { width: 22px; height: 22px; } /* ---------- Buttons: pills with a 3px press edge ---------- */ .btn { --h: 50px; --edge: #12052F; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: var(--h); padding: 0 26px; border-radius: 999px; border: 0; font: 800 16px/1 var(--font); letter-spacing: -.005em; white-space: nowrap; cursor: pointer; text-decoration: none !important; background: var(--p); color: #fff; transform: translateY(0); margin-bottom: 0; } .btn.has-bi { padding-right: 7px; } .btn .bi { width: calc(var(--h) - 16px); height: calc(var(--h) - 16px); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--g); color: var(--p); } .btn .bi .ci { font-size: calc((var(--h) - 16px) * .56); } .btn > svg:not(.ci) { width: 18px; height: 18px; flex: none; } .btn:hover { } .btn:hover .bi { } .btn:active { } .btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; } /* Purple (primary dark) */ .btn--dark, .btn--purple { background: var(--p); color: #fff; --edge: #12052F; } .btn--dark:hover, .btn--purple:hover { background: var(--p2); } .btn--dark .bi { background: var(--g); color: var(--p); } /* Green */ .btn--green { background: var(--g); color: var(--p); --edge: var(--g-edge); } .btn--green:hover { background: var(--g-hover); } .btn--green .bi { background: var(--p); color: var(--g); } /* Ghost / outline (and the old "light" button) */ .btn--ghost, .btn--light { background: transparent; color: var(--p); --edge: transparent; box-shadow: inset 0 0 0 2px var(--p); } .btn--ghost .bi, .btn--light .bi { background: var(--tile); color: var(--p); } .btn--ghost:hover, .btn--light:hover { background: var(--tile); box-shadow: inset 0 0 0 2px var(--p); } .btn--ghost:hover .bi, .btn--light:hover .bi { background: #fff; } .btn--ghost:active, .btn--light:active { box-shadow: inset 0 0 0 2px var(--p); background: #E6DFF8; } .on-dark .btn--ghost, .on-dark .btn--light { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); } .on-dark .btn--ghost:hover, .on-dark .btn--light:hover { background: rgba(255,255,255,.1); } /* White (on purple) */ .btn--white { background: #fff; color: var(--p); --edge: #CFC6EA; } .btn--white:hover { background: var(--tile); } /* Danger */ .btn--danger { background: var(--red); color: #fff; --edge: #9B1C2E; } .btn--danger:hover { background: #E04A5F; } /* Sizes */ .btn--sm { --h: 42px; font-size: 14.5px; padding: 0 20px; gap: 10px; } .btn--sm.has-bi { padding-right: 6px; } .btn--xs { --h: 34px; font-size: 13.5px; padding: 0 14px; gap: 8px; } .btn--lg { --h: 56px; font-size: 17px; padding: 0 30px; } .btn--block { width: 100%; } /* Loading spinner (app.js adds .is-loading) */ .btn.is-loading { color: transparent !important; pointer-events: none; } .btn.is-loading > * { visibility: hidden; } .btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; } .btn--green.is-loading::after, .btn--ghost.is-loading::after, .btn--light.is-loading::after { border-color: rgba(42,18,97,.25); border-top-color: var(--p); } @keyframes spin { to { transform: rotate(360deg); } } .spinner { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--tile); border-top-color: var(--p); animation: spin .8s linear infinite; } /* Text link with arrow + green underline grow */ .more { border-radius: 6px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; white-space: nowrap; padding: 6px 0; color: var(--p); background: linear-gradient(var(--g), var(--g)) 0 100% / 0 2px no-repeat; text-decoration: none !important; } .more .ci { font-size: 16px; } .more:hover { background-size: calc(100% - 24px) 2px; } .more:hover .ci { } .back-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: var(--ink); text-decoration: none !important; } .back-link:hover { color: var(--p); } .back-link .ci { font-size: 16px; } /* ---------- Form fields (global) ---------- */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea { width: 100%; font: 500 16px/1.4 var(--font); color: var(--p); background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 16px; min-height: 52px; appearance: none; -webkit-appearance: none; } textarea { min-height: 120px; resize: vertical; } select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M12 18 L24 30 L36 18' fill='none' stroke='%232A1261' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 14px; padding-right: 44px; } input::placeholder, textarea::placeholder { color: var(--mute); } input:hover, select:hover, textarea:hover { border-color: var(--line-2); } input:focus, select:focus, textarea:focus { border-color: var(--p); outline: none; } input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--p); flex: none; } input[type="file"] { font: inherit; font-size: 14px; } label { font-weight: 700; font-size: 14.5px; } fieldset { border: 0; } /* ---------- Generic card / grid ---------- */ .grid { display: grid; gap: 20px; } .g4 { grid-template-columns: repeat(4, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g2 { grid-template-columns: repeat(2, 1fr); } .card { background: #fff; border: 1px solid var(--line); border-radius: 18px; } a.card:hover { border-color: var(--line-2); } /* Tag pills (statuses) */ .tagpill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--tile); color: var(--p); white-space: nowrap; } .tagpill--approved, .tagpill--paid, .tagpill--valid, .tagpill--live { background: var(--ok-bg); color: #1F7A3A; } .tagpill--pending, .tagpill--pending2 { background: var(--amber-bg); color: var(--amber); } .tagpill--rejected, .tagpill--refunded, .tagpill--cancelled { background: var(--red-bg); color: var(--red); } .tagpill--used, .tagpill--paused { background: #ECEAF2; color: #5A5275; } .tagpill--free { background: var(--tile); color: var(--p2); } /* Reveal: only hidden once JS has confirmed it runs (html.js), subtle */ .js .reveal, .js .reveal-stagger > * { opacity: 0; transform: translateY(10px); } .js .reveal.is-in, .js .reveal-stagger.is-in > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; scroll-behavior: auto !important; } .js .reveal, .js .reveal-stagger > * { opacity: 1; transform: none; } } @keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } } .bump { } /* Safety net: any inline SVG without its own size never renders huge. */ :where(svg:not([width]):not(.ci)) { width: 1.25em; height: 1.25em; flex: none; } .tagpill--green { background: var(--g); color: var(--p); } .tagpill--white { background: #fff; color: var(--p); } .tagpill--amber { background: var(--amber-bg); color: var(--amber); } .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--g); display: inline-block; flex: none; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(106,213,131,.6); } 80%, 100% { box-shadow: 0 0 0 9px rgba(106,213,131,0); } } /* ========================================================================== 02 · Status strip, header bar, mobile menu, footer, cookie, help bot ========================================================================== */ .statusbar { background: #1A0B40; color: rgba(255,255,255,.86); font-size: 13.5px; overflow: hidden; } .statusbar__inner { display: flex; align-items: center; gap: 10px; min-height: 38px; padding-top: 6px; padding-bottom: 6px; } .statusbar__icon { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--g); flex: none; } .statusbar__pulse { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--g); opacity: 0; } @keyframes pulse { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } } .statusbar__text { flex: 1; min-width: 0; } .statusbar__text strong { color: #fff; font-weight: 700; } .statusbar .statusbar__text a { color: var(--g); text-decoration: none; font-weight: 700; } .statusbar .statusbar__text a:hover { text-decoration: underline; } .statusbar__close { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: rgba(255,255,255,.7); flex: none; } .statusbar__close:hover { background: rgba(255,255,255,.1); color: #fff; } .statusbar__close .ci { font-size: 14px; } .statusbar.is-closing { opacity: 0; margin-top: -50px; } /* Header bar: purple, sticky, fixed 88px (does not shrink on scroll) */ .bar { position: sticky; top: 0; z-index: 50; background: var(--p); color: #fff; --a: #fff; --b: #6AD583; --c: #2A1261; } .bar__nav { display: flex; align-items: center; gap: 28px; height: var(--bar-h); } .bar .logo { flex: none; display: block; } .bar .logo img, .brandmark { height: 44px; width: auto; display: block; } .bar__links { display: flex; align-items: center; gap: 30px; list-style: none; font-weight: 600; font-size: 15px; margin-left: auto; } .bar__links a:not(.btn) { opacity: .88; display: inline-flex; align-items: center; gap: 9px; } .bar__links a:not(.btn):hover { opacity: 1; } .bar .btn { --h: 44px; font-size: 15px; padding-left: 20px; } .bar .btn.has-bi { padding-right: 7px; } .nav__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; } .nav__avatar--ph { display: grid; place-items: center; background: var(--g); color: var(--p); font-weight: 800; font-size: 13px; } .bar__menu { display: none; } .menu { display: none; width: 44px; height: 44px; border-radius: 999px; align-items: center; justify-content: center; background: rgba(255,255,255,.1); color: #fff; flex: none; } .menu:hover { background: rgba(255,255,255,.16); } .menu .ci { font-size: 22px; } .menu .menu__close { display: none; } .menu[aria-expanded="true"] .menu__open { display: none; } .menu[aria-expanded="true"] .menu__close { display: block; } .mobilenav { position: absolute; left: 0; right: 0; top: 100%; background: var(--p); border-top: 1px solid rgba(255,255,255,.1); max-height: calc(100vh - 72px); overflow-y: auto; } .mobilenav__inner { display: flex; flex-direction: column; padding-top: 10px; padding-bottom: 22px; } .mobilenav__link { display: flex; align-items: center; gap: 14px; padding: 14px 4px; font-weight: 700; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,.08); } .mobilenav__link .ci { font-size: 24px; } .mobilenav__ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .mobilenav__ctas .btn { width: 100%; } /* Footer: white, simple row + small print */ .footer { border-top: 1px solid var(--line); padding: 44px 0 40px; background: #fff; flex-shrink: 0; } .footer__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer__logo img { height: 32px; width: auto; } .footer__links { display: flex; align-items: center; gap: 28px; list-style: none; font-weight: 600; font-size: 14.5px; flex-wrap: wrap; } .footer__links a:not(.btn) { background: linear-gradient(var(--g), var(--g)) 0 100% / 0 2px no-repeat; padding: 4px 0; } .footer__links a:not(.btn):hover { background-size: 100% 2px; } .footer__links .btn { margin-bottom: 0; } .footer__small { margin-top: 26px; display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; font-size: 13.5px; color: var(--mute); } .footer__secure { display: inline-flex; align-items: center; gap: 7px; --a: #8C85A6; --b: #6AD583; --c: #fff; } .footer__secure .ci { font-size: 15px; } .footer__legal { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; } .footer__legal a, .footer__linkbtn { color: var(--mute); font-size: 13.5px; font-weight: 600; text-decoration: none; } .footer__legal a:hover, .footer__linkbtn:hover { color: var(--p); } /* Cookie banner: compact card bottom-left, never covers the whole width */ .cookie { position: fixed; left: 20px; bottom: 20px; z-index: 70; width: min(440px, calc(100vw - 40px)); background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .cookie__text b { font-size: 15.5px; } .cookie__text p { font-size: 14px; color: var(--ink); margin-top: 4px; } .cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; } .cookie__actions .btn { flex: 1; } /* Help bot */ .helpbot { position: fixed; right: 22px; bottom: 22px; z-index: 60; } .helpbot__fab { width: 58px; height: 58px; border-radius: 50%; background: var(--p); color: #fff; display: grid; place-items: center; --a: #fff; --b: #6AD583; --c: #2A1261; } .helpbot__fab:hover { background: var(--p2); } .helpbot__fab-ic { grid-area: 1/1; } .helpbot__fab-ic .ci { font-size: 30px; } .helpbot__fab-ic--close { opacity: 0; transform: rotate(-90deg); } .helpbot__fab-ic--close .ci { font-size: 20px; } .helpbot.is-open .helpbot__fab-ic--chat { opacity: 0; transform: rotate(90deg); } .helpbot.is-open .helpbot__fab-ic--close { opacity: 1; transform: none; } .helpbot__panel { position: absolute; right: 0; bottom: 74px; width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 140px)); background: #fff; border: 1px solid var(--line); border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transform-origin: bottom right; } .helpbot.is-open .helpbot__panel { opacity: 1; visibility: visible; transform: none; } .helpbot__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--p); color: #fff; --a: #fff; --b: #6AD583; --c: #2A1261; } .helpbot__head b { display: block; font-size: 15.5px; } .helpbot__head span:not(.helpbot__avatar) { font-size: 13px; opacity: .75; } .helpbot__avatar { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.12); display: grid; place-items: center; } .helpbot__avatar .ci { font-size: 26px; } .helpbot__body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; flex: 1; background: var(--lilac); } .helpbot__msg { max-width: 88%; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; } .helpbot__msg--bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; align-self: flex-start; } .helpbot__msg--bot a { color: var(--p2) !important; } .helpbot__msg--user { background: var(--p); color: #fff; border-bottom-right-radius: 6px; align-self: flex-end; } .helpbot__qs { display: flex; flex-direction: column; gap: 8px; } .helpbot__q { text-align: left; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: 14px; } .helpbot__q:hover { border-color: var(--p); } .helpbot__back { align-self: flex-start; font-weight: 800; font-size: 14px; color: var(--p2); padding: 6px 0; } .helpbot__ask { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; } .helpbot__ask input { min-height: 44px; padding: 10px 14px; border-radius: 999px; font-size: 14.5px; } .helpbot__send { width: 44px; height: 44px; border-radius: 50%; background: var(--g); color: var(--p); display: grid; place-items: center; flex: none; } .helpbot__send .ci { font-size: 20px; } .helpbot__foot { padding: 10px 16px 14px; font-size: 13px; color: var(--ink); text-align: center; background: #fff; } /* ========================================================================== 03 · Home: hero, search, chips, sections, event cards, info + help cards ========================================================================== */ .herowrap { background: var(--p); color: #fff; overflow: hidden; } .hero { text-align: center; padding-top: 68px; padding-bottom: 92px; } .hero h1 { font-size: 60px; line-height: 1.05; letter-spacing: -.035em; font-weight: 800; } .hero__sub { margin: 16px auto 0; font-size: 19px; opacity: .82; font-weight: 500; max-width: 640px; } .search { margin: 38px auto 0; max-width: 720px; height: 72px; background: #fff; border-radius: 999px; display: flex; align-items: center; padding: 0 10px 0 26px; gap: 14px; color: var(--p); --a: #2A1261; --b: #6AD583; --c: #fff; text-align: left; } .search .search__ic { font-size: 26px; flex: none; } .search input, .search input:focus, .search input:hover { flex: 1; min-width: 0; border: 0; outline: 0; box-shadow: none; padding: 0; min-height: 0; height: 100%; font: 500 18px var(--font); color: var(--p); background: transparent; } .search input::-webkit-search-cancel-button { -webkit-appearance: none; } .search:focus-within { } .search .btn { --h: 52px; flex: none; } .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; } .chip { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); font-weight: 700; font-size: 14.5px; color: #fff; white-space: nowrap; } .chip .ci { font-size: 21px; } .chip:hover { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); } .chip:active { } .chip.is-on { background: var(--g); color: var(--p); box-shadow: none; --a: #2A1261; --b: #fff; --c: #6AD583; } .chip.is-on::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--p); margin-left: 2px; } .sec { padding: 84px 0; scroll-margin-top: var(--bar-h); } .sec--lil { background: var(--lilac); } .sec--tight { padding: 56px 0; } .sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; } .sec__head h2, .sec h2 { font-size: 34px; letter-spacing: -.025em; line-height: 1.15; } .sec__head p { color: var(--ink); font-size: 16.5px; margin-top: 8px; } /* Event cards */ .ev { overflow: hidden; display: flex; flex-direction: column; position: relative; } .ev:hover { border-color: var(--line-2); } .ev__blk { height: 156px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; flex: none; } .ev__blk .ev__icon { font-size: 74px; position: relative; } .ev__blk::before { content: ""; position: absolute; width: 118px; height: 118px; border-radius: 50%; background: var(--ring); } .ev__blk::after { content: ""; position: absolute; right: -64px; bottom: -64px; width: 124px; height: 124px; border-radius: 50%; border: 12px solid var(--ring); box-shadow: 0 0 0 26px var(--ring); } .ev__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .ev__tag { position: absolute; z-index: 2; top: 14px; left: 14px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: #fff; color: var(--p); max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ev__flag { position: absolute; z-index: 2; top: 14px; right: 14px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--amber-bg); color: var(--amber); } .ev__flag--out { background: var(--p); color: #fff; } .ev__flag ~ .ev__tag, .ev__tag:has(~ .ev__flag) { max-width: calc(50% - 18px); } .c1 { background: var(--p); --a: #fff; --b: #6AD583; --c: #2A1261; --ring: rgba(255,255,255,.07); } .c2 { background: var(--g); --a: #2A1261; --b: #fff; --c: #6AD583; --ring: rgba(42,18,97,.08); } .c3 { background: #ECE6FA; --a: #2A1261; --b: #6AD583; --c: #fff; --ring: rgba(42,18,97,.06); } .c4 { background: #DDF4E3; --a: #2A1261; --b: #6AD583; --c: #fff; --ring: rgba(42,18,97,.06); } .ev__bd { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .ev__date { font-size: 13px; font-weight: 700; color: var(--g-ink); text-transform: uppercase; letter-spacing: .04em; } .ev__title { font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; } .ev__link { color: inherit; } .ev__link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; } .ev__link:focus-visible { outline: none !important; } .ev:has(.ev__link:focus-visible) { outline: 3px solid var(--g); outline-offset: 3px; } .ev__ven { font-size: 14.5px; color: var(--ink); display: flex; align-items: center; gap: 6px; min-width: 0; } .ev__ven span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ev__ven .ci { font-size: 17px; } .ev__ft { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14.5px; } .ev__ft b { font-weight: 800; } .ev__buy { position: relative; z-index: 4; font-weight: 800; color: var(--p2); display: inline-flex; align-items: center; gap: 7px; padding: 8px 4px 8px 12px; margin: -8px -4px -8px 0; border-radius: 999px; font-size: 14.5px; } .ev__buy .ci { font-size: 16px; } .ev__buy:hover { background: var(--tile); } .ev:hover .ev__buy .ci { } .ev__out { font-weight: 800; color: var(--mute); } .ev--soldout .ev__blk { filter: saturate(.4); } /* Info cards */ .ic { padding: 26px 24px 24px; display: flex; flex-direction: column; } .ico { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: var(--tile); flex: none; } .ico .ci { font-size: 34px; } .ic h3 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; } .ic p { font-size: 15px; line-height: 1.5; color: var(--ink); } .note { margin-top: 28px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .note p { font-size: 15.5px; color: var(--ink); line-height: 1.5; } .note p b { color: var(--p); } .note__small { font-size: 13.5px !important; margin-top: 10px; } .tiers { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .tiers li { display: inline-flex; align-items: baseline; gap: 8px; background: var(--lilac); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 14px; color: var(--ink); } .tiers b { color: var(--p); font-size: 16px; } .help { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .help .ic { flex-direction: row; gap: 16px; align-items: flex-start; padding: 22px; } .help .ico { margin: 0; width: 50px; height: 50px; border-radius: 14px; } .help .ico .ci { font-size: 30px; } .help .ic h3 { font-size: 16.5px; margin-bottom: 4px; } .help .ic p { font-size: 14px; } .helpbar { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--ink); font-size: 15.5px; flex-wrap: wrap; } /* Empty state */ .emptystate { text-align: center; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .emptystate__ic { width: 72px; height: 72px; border-radius: 20px; background: var(--tile); display: grid; place-items: center; margin-bottom: 8px; } .emptystate__ic .ci, .emptystate__ic svg { font-size: 42px; width: 42px; height: 42px; } .emptystate h3 { font-size: 22px; } .emptystate p { color: var(--ink); max-width: 460px; margin-bottom: 10px; } /* ========================================================================== 04 · Events list + event page ========================================================================== */ .hero--sm { padding-top: 54px; padding-bottom: 64px; } .hero--sm h1 { font-size: 48px; } .sec--events { padding-top: 56px; } .sec__head--tools { align-items: center; } .viewtoggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--lilac); border: 1px solid var(--line); border-radius: 999px; } .viewtoggle__btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--p); } .viewtoggle__btn .ci { font-size: 22px; } .viewtoggle__btn:hover { background: #fff; } .viewtoggle__btn.is-on { background: var(--p); color: #fff; --a: #fff; --b: #6AD583; --c: #2A1261; } #events-none { margin-top: 8px; } /* List layout */ .grid.is-list { grid-template-columns: 1fr; gap: 12px; } .grid.is-list .ev { flex-direction: row; align-items: stretch; } .grid.is-list .ev__blk { width: 150px; height: auto; min-height: 112px; } .grid.is-list .ev__blk .ev__icon { font-size: 52px; } .grid.is-list .ev__blk::before { width: 84px; height: 84px; } .grid.is-list .ev__tag, .grid.is-list .ev__flag { display: none; } .grid.is-list .ev__bd { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 24px; padding: 18px 24px; } .grid.is-list .ev__date { width: 100%; } .grid.is-list .ev__title { flex: 1 1 260px; } .grid.is-list .ev__ven { flex: 0 1 260px; } .grid.is-list .ev__ft { margin: 0; padding: 0; gap: 22px; } /* ---- Event page ---- */ .evhero { padding-top: 40px; padding-bottom: 56px; } .evhero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: start; } .evhero .back-link { color: rgba(255,255,255,.8); margin-bottom: 22px; } .evhero .back-link:hover { color: #fff; } .evhero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .evhero h1 { font-size: 50px; line-height: 1.06; letter-spacing: -.03em; } .evhero__facts { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; } .evhero__facts li { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; } .evhero__facts .ci { font-size: 26px; flex: none; } .evhero__facts a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; } .evhero__art { border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 10; position: relative; display: flex; align-items: center; justify-content: center; } .evhero__art .ev__icon { font-size: 140px; position: relative; } .evhero__art::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: var(--ring); } .evhero__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .evbody { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: start; } .evbody__main h2 { font-size: 26px; margin-bottom: 14px; } .evbody__desc { font-size: 16.5px; line-height: 1.7; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; } .evbuy { position: sticky; top: calc(var(--bar-h) + 20px); padding: 26px; } .evbuy__price { font-size: 32px; font-weight: 800; letter-spacing: -.02em; } .evbuy__price small { font-size: 15px; color: var(--ink); font-weight: 600; letter-spacing: 0; } .evbuy__rows { list-style: none; margin: 18px 0 20px; display: flex; flex-direction: column; gap: 10px; } .evbuy__rows li { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; color: var(--ink); } .evbuy__rows b { color: var(--p); } .evbuy .btn { width: 100%; } .evbuy__note { margin-top: 14px; font-size: 13.5px; color: var(--ink); display: flex; gap: 8px; align-items: flex-start; } .evbuy__note .ci { font-size: 18px; flex: none; margin-top: 1px; } .meter { height: 8px; border-radius: 999px; background: var(--tile); overflow: hidden; margin-top: 6px; } .meter span { display: block; height: 100%; background: var(--g); border-radius: inherit; } .orgcard { display: flex; gap: 16px; align-items: center; padding: 20px; } .orgcard__ph { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none; background: var(--tile); display: grid; place-items: center; font-weight: 800; font-size: 22px; } .orgcard h3 { font-size: 17px; } .orgcard p { font-size: 14.5px; color: var(--ink); } .sharebar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .sharebar .is-copied { background: var(--g); } .mapframe { width: 100%; height: 260px; border: 0; border-radius: 18px; display: block; } .mobilebuy { display: none; } @media (max-width: 960px) { .evhero__grid, .evbody { grid-template-columns: 1fr; gap: 28px; } .evhero__art { aspect-ratio: 16 / 9; max-height: 320px; } .evbuy { position: static; } } @media (max-width: 640px) { .hero--sm { padding-top: 36px; padding-bottom: 44px; } .hero--sm h1 { font-size: 34px; } .sec--events { padding-top: 36px; } .sec__head--tools { flex-direction: row; align-items: flex-end; } .viewtoggle { display: none; } .grid.is-list .ev { flex-direction: column; } .grid.is-list .ev__blk { width: auto; height: 132px; } .evhero { padding-top: 26px; padding-bottom: 36px; } .evhero h1 { font-size: 34px; } .evhero__facts li { font-size: 15.5px; } .evhero__art .ev__icon { font-size: 96px; } .evhero__art::before { width: 150px; height: 150px; } .evbuy { padding: 22px 20px; } .mobilebuy { display: flex; position: sticky; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--line); padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); align-items: center; justify-content: space-between; gap: 14px; } .mobilebuy b { font-size: 18px; } .mobilebuy small { display: block; font-size: 12.5px; color: var(--ink); } } .evbuy .muted { font-size: 14px; margin-top: 2px; } .evbuy__low { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--amber); } .evbuy__low .pulse { background: #F0A030; } .evbuy__extra { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } .evbuy__extra .btn { width: 100%; } .sharebar { align-items: center; } .sharebar__label { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); margin-right: 4px; } .sharebtn { width: 42px; height: 42px; border-radius: 50%; background: var(--tile); color: var(--p); display: grid; place-items: center; position: relative; } .sharebtn svg { width: 19px; height: 19px; } .sharebtn:hover { background: var(--g); } .sharebtn__copied { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--p); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; } .sharebtn.is-copied .sharebtn__copied, .sharebar.is-copied .sharebtn__copied { opacity: 1; } .evbody__main h2 + .card { margin-top: 0; } .evbody__main h2:not(:first-child) { margin-top: 40px; } .goodtoknow { gap: 12px; grid-template-columns: 1fr; } .goodtoknow .ic { flex-direction: row; gap: 16px; align-items: center; } .goodtoknow .ico { margin: 0; } .ic--sm { padding: 20px; } .ic--sm .ico { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 14px; } .ic--sm .ico .ci { font-size: 28px; } .ic--sm h3 { font-size: 15.5px; } .ic--sm p { font-size: 14px; } @media (max-width: 1060px) { .goodtoknow { grid-template-columns: 1fr; } .goodtoknow .ic { flex-direction: row; gap: 14px; } .goodtoknow .ico { margin: 0; } } /* ========================================================================== 05 · Checkout modal (built by app.js), video modal ========================================================================== */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; visibility: hidden; pointer-events: none; } .modal.open { visibility: visible; pointer-events: auto; } .modal__overlay { position: absolute; inset: 0; background: rgba(26,11,64,.55); opacity: 0; } .modal.open .modal__overlay { opacity: 1; } .modal__card { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border-radius: 24px; padding: 30px 28px 24px; opacity: 0; transform: translateY(16px) scale(.98); } .modal.open .modal__card { opacity: 1; transform: none; } .modal__close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; background: var(--tile); color: var(--p); display: grid; place-items: center; z-index: 1; } .modal__close:hover { background: #E6DFF8; } .modal__close .ci { font-size: 16px; } .co__title { font-size: 24px; letter-spacing: -.02em; padding-right: 44px; line-height: 1.2; } .co__meta { color: var(--ink); font-size: 14.5px; margin-top: 6px; font-weight: 500; } .qty { margin-top: 20px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .qty__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; } .qty__row + .qty__row { border-top: 1px solid var(--line); } .qty__label b { display: block; font-size: 16px; } .qty__label span { font-size: 13.5px; color: var(--ink); } .stepper { display: flex; align-items: center; gap: 4px; background: var(--lilac); border-radius: 999px; padding: 4px; } .stepper__btn { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--p); font-size: 20px; font-weight: 800; line-height: 1; display: grid; place-items: center; } .stepper__btn:hover { background: var(--g); } .stepper__btn:active { box-shadow: none; } .stepper__n { min-width: 30px; text-align: center; font-weight: 800; font-size: 17px; } .co__rows { margin: 16px 0 4px; } .co__row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 2px; font-size: 15px; color: var(--ink); } .co__row span:last-child { font-weight: 700; color: var(--p); } .co__row--total { border-top: 1px dashed var(--line-2); margin-top: 6px; padding-top: 12px; font-size: 18px; color: var(--p); font-weight: 800; } .co__row--total span:last-child { font-weight: 800; } .co__nudge { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: var(--tile); font-size: 13.5px; font-weight: 600; color: var(--p); } .co__nudge svg { width: 16px; height: 16px; flex: none; } .co__nudge--best { background: var(--ok-bg); color: #1F7A3A; } .co__field { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; } .co__opt { color: var(--mute); font-weight: 500; } .modal .pay { width: 100%; margin-top: 20px; --h: 56px; font-size: 17px; background: var(--g); color: var(--p); --edge: var(--g-edge); } .modal .pay:hover { background: var(--g-hover); } .modal .pay.is-loading::after { border-color: rgba(42,18,97,.25); border-top-color: var(--p); } .co__secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--ink); } .co__secure svg { width: 15px; height: 15px; } /* Promo video modal (kept for compatibility) */ .vmodal { position: fixed; inset: 0; z-index: 110; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(26,11,64,.8); } .vmodal.open { display: flex; } .vmodal video { width: min(900px, 100%); border-radius: 18px; } @media (max-width: 640px) { .modal { align-items: flex-end; padding: 0; } .modal__card { max-width: none; border-radius: 24px 24px 0 0; max-height: 92vh; padding: 26px 20px calc(20px + env(safe-area-inset-bottom)); transform: translateY(40px); } } /* ========================================================================== 06 · Content + legal pages, Help page / FAQ ========================================================================== */ .pagehero { padding-top: 40px; padding-bottom: 56px; } .pagehero .back-link { color: rgba(255,255,255,.78); margin-bottom: 20px; } .pagehero .back-link:hover { color: #fff; } .pagehero h1 { font-size: 48px; line-height: 1.06; letter-spacing: -.03em; max-width: 820px; } .pagehero__intro { margin-top: 14px; font-size: 18px; line-height: 1.55; opacity: .85; max-width: 720px; font-weight: 500; } .pagehero__intro a { color: var(--g) !important; text-decoration-color: rgba(106,213,131,.5) !important; } .pagehero__updated { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); } .legal__wrap { padding-top: 52px; padding-bottom: 88px; } .legal__wrap > * { max-width: 780px; } .legal__wrap > .support__links { max-width: none; } .legal__wrap h2 { font-size: 23px; letter-spacing: -.015em; margin: 38px 0 12px; scroll-margin-top: calc(var(--bar-h) + 16px); } .legal__wrap h2:first-child { margin-top: 0; } .legal__wrap h3 { font-size: 18px; margin: 24px 0 8px; } .legal__wrap p, .legal__wrap li { font-size: 16px; line-height: 1.7; color: var(--ink); } .legal__wrap p + p { margin-top: 12px; } .legal__wrap strong, .legal__wrap b { color: var(--p); } .legal__wrap ul, .legal__wrap ol { margin: 10px 0 12px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; } .legal__wrap ul li { position: relative; padding-left: 22px; } .legal__wrap ul li::before { content: ""; position: absolute; left: 3px; top: .68em; width: 8px; height: 8px; border-radius: 50%; background: var(--g); } .legal__wrap ol { counter-reset: li; } .legal__wrap ol li { position: relative; padding-left: 32px; counter-increment: li; } .legal__wrap ol li::before { content: counter(li); position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%; background: var(--tile); color: var(--p); font-size: 12px; font-weight: 800; display: grid; place-items: center; } .legal__wrap a:not(.btn):not(.slink) { color: var(--p2); text-decoration: underline; text-decoration-color: var(--g); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; } .legal__wrap table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 14px 0 18px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; font-size: 14.5px; display: block; overflow-x: auto; } .legal__wrap thead, .legal__wrap tbody { display: table; width: 100%; border-collapse: collapse; } .legal__wrap th, .legal__wrap td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--ink); } .legal__wrap th { background: var(--lilac); color: var(--p); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; } .legal__wrap tr:last-child td { border-bottom: 0; } .legal__wrap .btn { margin-top: 10px; } .legal__wrap .callout, .legal__wrap .note { margin: 18px 0; } /* Link cards (about, legal footers) */ .support__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; } .slink { display: flex; align-items: center; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 18px; color: var(--p); } .slink:hover { border-color: var(--line-2); } .slink > svg { width: 44px; height: 44px; padding: 11px; border-radius: 13px; background: var(--tile); color: var(--p); flex: none; } .slink span { display: flex; flex-direction: column; font-size: 13.5px; color: var(--ink); line-height: 1.4; } .slink b { font-size: 15.5px; color: var(--p); } /* Help page */ .faqwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 48px; align-items: start; } .faqwrap__side h2 { font-size: 34px; letter-spacing: -.025em; } .faqwrap__side > .muted { margin-top: 8px; font-size: 16px; } .contactcard { margin-top: 26px; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .contactcard .ico { margin-bottom: 8px; } .contactcard .ico .ci { font-size: 34px; } .contactcard h3 { font-size: 18px; } .contactcard p { color: var(--ink); font-size: 14.5px; line-height: 1.55; } .contactcard .btn { margin-top: 8px; } .contactcard__addr { font-size: 13px !important; color: var(--mute) !important; } .accordion { display: flex; flex-direction: column; gap: 10px; } .acc { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .acc.open { border-color: var(--line-2); } .acc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; text-align: left; font-weight: 700; font-size: 16px; color: var(--p); } .acc__head:hover { background: var(--lilac); } .acc__ic { width: 32px; height: 32px; border-radius: 50%; background: var(--tile); display: grid; place-items: center; flex: none; } .acc__ic .ci { font-size: 14px; } .acc.open .acc__ic { transform: rotate(45deg); background: var(--g); } .acc__panel { max-height: 0; overflow: hidden; } .acc__panel p { padding: 0 20px 18px; color: var(--ink); font-size: 15px; line-height: 1.65; } .no-js .acc__panel { max-height: none; } @media (max-width: 960px) { .faqwrap { grid-template-columns: 1fr; gap: 28px; } .support__links { grid-template-columns: 1fr; } } @media (max-width: 640px) { .pagehero { padding-top: 26px; padding-bottom: 38px; } .pagehero h1 { font-size: 34px; } .pagehero__intro { font-size: 16px; } .legal__wrap { padding-top: 32px; padding-bottom: 56px; } .legal__wrap h2 { font-size: 21px; margin-top: 30px; } .legal__wrap p, .legal__wrap li { font-size: 15.5px; } .faqwrap__side h2 { font-size: 27px; } .acc__head { padding: 16px; font-size: 15.5px; } .acc__panel p { padding: 0 16px 16px; } } /* ========================================================================== 07 · Status pages (find ticket, success, errors, submitted) ========================================================================== */ .statuspage { flex: 1; background: var(--lilac); padding: 64px 0 88px; } .statuspage__wrap { display: flex; justify-content: center; } .statuscard { width: 100%; max-width: 540px; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 40px 36px 36px; text-align: center; } .statuscard--wide { max-width: 760px; text-align: left; } .statuscard__ic { width: 76px; height: 76px; border-radius: 22px; background: var(--tile); color: var(--p); display: grid; place-items: center; margin: 0 auto 20px; } .statuscard__ic svg { width: 36px; height: 36px; } .statuscard__ic .ci { font-size: 46px; } .statuscard__ic--ok { background: var(--g); color: var(--p); --a: #2A1261; --b: #fff; --c: #6AD583; } .statuscard__ic--sad { background: var(--amber-bg); color: var(--amber); } .statuscard__ic--err { background: var(--red-bg); color: var(--red); } .statuscard__title { font-size: 30px; letter-spacing: -.025em; line-height: 1.15; } .statuscard__text { margin-top: 10px; color: var(--ink); font-size: 16px; line-height: 1.6; } .statuscard__err, .formerr { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--red-bg); color: var(--red); font-weight: 600; font-size: 14.5px; text-align: left; } .statuscard__btns { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .statuscard form { margin-top: 24px; text-align: left; display: flex; flex-direction: column; gap: 14px; } .statuscard form .btn { width: 100%; margin-top: 6px; } .statuscard__small { margin-top: 18px; font-size: 13.5px; color: var(--ink); } .field { display: flex; flex-direction: column; gap: 6px; } .field label, label.field__label { font-weight: 700; font-size: 14.5px; color: var(--p); } .field small, .field__hint { font-size: 13px; color: var(--ink); } @media (max-width: 640px) { .statuspage { padding: 28px 0 56px; } .statuscard { padding: 30px 20px 24px; border-radius: 20px; } .statuscard__title { font-size: 25px; } .statuscard__btns .btn { width: 100%; } } .findform__field { display: flex; flex-direction: column; gap: 6px; } .findform__field > span { font-weight: 700; font-size: 14.5px; color: var(--p); } .findform__note { margin-top: 18px; font-size: 13.5px; color: var(--ink); } .findform__note a { color: var(--p2); font-weight: 700; text-decoration: underline; text-decoration-color: var(--g); text-underline-offset: 3px; } .statuscard__ic--wait { background: var(--tile); color: var(--p); } .statuscard .spinner { width: 44px; height: 44px; border-width: 4px; margin: 4px auto 22px; display: block; } .ordercard { margin: 24px 0 18px; text-align: left; background: var(--lilac); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; } .ordercard__title { font-size: 18px; margin-bottom: 2px; } .ordercard__row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink); } .ordercard__row svg { width: 18px; height: 18px; color: var(--p); flex: none; } .statuscard__cta { margin-top: 4px; } .done__email { margin-top: 12px; } .done__emailrow { flex-direction: row !important; gap: 8px !important; margin-top: 0 !important; } .done__emailrow input { flex: 1; min-width: 0; } .done__emailrow .btn { width: auto !important; margin: 0 !important; --h: 52px; } .statuscard__done { display: inline-block; margin-top: 18px; font-weight: 700; color: var(--ink); } .statuscard__done:hover { color: var(--p); } /* ---- Live ticket page ---- */ .ticketbody { background: var(--p); min-height: 100vh; } .tkt-page { width: 100%; max-width: 480px; margin: 0 auto; padding: 22px 16px 48px; display: flex; flex-direction: column; gap: 22px; } .tkt-actions--top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tkt-logo { background: #fff; border-radius: 999px; padding: 8px 16px; display: inline-flex; } .tkt-logo img { height: 28px; width: auto; } .tkt-actions--top .btn { --edge: rgba(0,0,0,.25); background: var(--g); color: var(--p); } .tkt-actions--top .btn .bi { background: var(--p); color: #fff; } .tkt-actions--bottom { display: flex; flex-direction: column; gap: 10px; } .tkt-actions--bottom .btn { width: 100%; } .tkt-actions--bottom .btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); } .tkt-actions--bottom .btn--ghost:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 2px #fff; } .tkt-actions--bottom .btn--dark { background: var(--g); color: var(--p); --edge: var(--g-edge); } .tkt-actions--bottom .btn--dark .bi { background: var(--p); color: #fff; } .tkt { background: #fff; border-radius: 26px; overflow: hidden; position: relative; } .tkt__hero { height: 170px; background-size: cover; background-position: center; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .tkt__hero::before { content: ""; position: absolute; width: 130px; height: 130px; border-radius: 50%; background: var(--ring); } .tkt__hero[style]::before { display: none; } .tkt__hero-fallback { position: relative; } .tkt__hero-ic { font-size: 84px; } .tkt__cat, .tkt__idx, .tkt__status { position: absolute; top: 14px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: #fff; color: var(--p); } .tkt__cat { left: 14px; } .tkt__idx { left: 14px; top: auto; bottom: 14px; background: rgba(42,18,97,.85); color: #fff; } .tkt__status { right: 14px; } .tkt__status--valid { background: var(--g); color: var(--p); } .tkt__status--used { background: var(--p); color: #fff; } .tkt__head { padding: 22px 24px 18px; } .tkt__title { font-size: 26px; letter-spacing: -.02em; line-height: 1.15; } .tkt__when { margin-top: 8px; font-weight: 700; color: var(--g-ink); font-size: 14.5px; } .tkt__venue { margin-top: 2px; color: var(--ink); font-size: 15px; } .tkt__perf { position: relative; height: 2px; margin: 0 22px; background-image: linear-gradient(90deg, var(--line-2) 50%, transparent 50%); background-size: 12px 2px; } .tkt__notch { position: absolute; top: 50%; width: 30px; height: 30px; border-radius: 50%; background: var(--p); transform: translateY(-50%); } .tkt__notch--l { left: -38px; } .tkt__notch--r { right: -38px; } .tkt__qr { padding: 24px 24px 18px; text-align: center; } .tkt__qr-wrap { position: relative; display: inline-block; padding: 14px; border-radius: 20px; border: 1px solid var(--line); background: #fff; } .tkt__qr-img { display: block; width: 200px; height: 200px; } .tkt__qr-stamp { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 26px; letter-spacing: .12em; color: var(--red); background: rgba(255,255,255,.78); border-radius: inherit; } .tkt__qr-stamp[hidden] { display: none !important; } .tkt--used .tkt__qr-img { opacity: .35; } .tkt__code { margin-top: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .12em; font-size: 15px; } .tkt__scan { margin-top: 6px; font-size: 13.5px; color: var(--ink); } .tkt__scan--used { color: var(--red); font-weight: 700; } .tkt__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .tkt__cell { background: #fff; padding: 14px 24px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .tkt__cell:last-child:nth-child(odd) { grid-column: 1 / -1; } .tkt__k { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); } .tkt__v { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; } .tkt__v--sm { font-size: 13.5px; } .tkt__info { padding: 16px 24px; border-bottom: 1px solid var(--line); } .tkt__infotext { margin-top: 4px; font-size: 14px; color: var(--ink); line-height: 1.55; } .tkt__terms { padding: 18px 24px 22px; background: var(--lilac); font-size: 12.5px; color: var(--ink); line-height: 1.55; display: flex; flex-direction: column; gap: 8px; } .tkt__brand img { height: 22px; width: auto; } .tkt__terms a { color: var(--p2); font-weight: 700; } /* 08 · Organiser + admin (ported from the original stylesheet, then restyled below) */ .oform { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; } .oform__section { font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); margin-top: 6px; } .oform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .oform__field { display: flex; flex-direction: column; } .oform__field label { font-size: 13px; font-weight: 700; color: var(--purple); margin-bottom: 7px; } .oform__field input, .oform__field select, .oform__field textarea { width: 100%; } .oform__hint { font-size: 12.5px; color: var(--ink); } .oform__check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink); } .oform__check a { color: var(--green-deep); font-weight: 700; } .oform__nav { display: flex; gap: 12px; margin-top: 10px; } .oform__nav .btn { flex: 1; } /* Back is secondary and narrower; Next/Submit take the remaining space */ .oform__back { flex: 0 0 auto; min-width: 112px; } .oform__submit { flex: 1; } .oform__note { font-size: 12.5px; color: var(--ink); text-align: center; } /* Admin stats */ .admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0 10px; } .admin-stat { background: var(--panel); border-radius: 16px; padding: 20px; } .admin-stat__n { display: block; font-size: 26px; font-weight: 900; color: var(--purple); letter-spacing: -.02em; } .admin-stat__l { font-size: 12.5px; color: var(--ink); } .admin-table { width: 100%; border-collapse: collapse; margin-top: 14px; } .admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 14px; } .admin-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); } @media (max-width: 640px) { .admin-stats { grid-template-columns: 1fr 1fr; } } /* ============================================================ ADMIN DASHBOARD ============================================================ */ .adm { padding: 32px 0 60px; } .adm__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; } .adm__bar h1 { font-size: clamp(26px, 4vw, 36px); } .adm__actions { display: flex; gap: 10px; flex-wrap: wrap; } .adm__sub { color: var(--ink); font-size: 15px; margin-bottom: 26px; } /* Stat tiles — flat tinted surfaces, no borders */ .adm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 14px; } .adm-stat { background: var(--panel); border-radius: var(--r); padding: 22px 24px; } .adm-stat__l { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; } .adm-stat__l svg { width: 16px; height: 16px; color: var(--green-deep); } .adm-stat__n { display: block; font-size: 28px; font-weight: 900; color: var(--purple); letter-spacing: -.02em; line-height: 1.1; } .adm-stat__m { display: block; font-size: 12.5px; color: var(--ink); margin-top: 7px; } .adm-stat--revenue { background: var(--purple); } .adm-stat--revenue .adm-stat__l, .adm-stat--revenue .adm-stat__m { color: rgba(255,255,255,.7); } .adm-stat--revenue .adm-stat__l svg { color: var(--green); } .adm-stat--revenue .adm-stat__n { color: #fff; } .adm-stat--owed { background: rgba(47,216,122,.14); } @media (max-width: 860px) { .adm-stats { grid-template-columns: 1fr 1fr; } } @media (max-width: 460px) { .adm-stats { grid-template-columns: 1fr; } } /* Admin sales chart */ .adm-chart { position: relative; background: var(--panel); border-radius: var(--r); padding: 20px 22px 14px; margin-bottom: 28px; } .adm-chart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .adm-h--flush { margin: 0; } .adm-chart__legend { display: flex; gap: 16px; } .adm-chart__key { font-size: 12px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; } .adm-chart__key::before { content: ""; width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .adm-chart__key--gross::before { background: var(--purple); } .adm-chart__key--fees::before { background: var(--green); } .adm-chart__plot { width: 100%; min-height: 200px; } .adm-chart__plot svg { display: block; } .adm-live { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11px; font-weight: 700; color: var(--green-deep); text-transform: uppercase; letter-spacing: .04em; } .adm-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-deep); } @keyframes adm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } /* Section heading inside admin */ .adm-h { font-size: 20px; font-weight: 900; color: var(--purple); margin: 44px 0 6px; } .adm-note { font-size: 13.5px; color: var(--ink); margin-bottom: 16px; } /* Data table — flat, borderless surface; only subtle row dividers for scanning */ .adm-table-wrap { background: var(--panel); border-radius: var(--r); overflow: hidden; overflow-x: auto; } .adm-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; } .adm-table th { text-align: left; padding: 15px 18px; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .adm-table td { padding: 15px 18px; border-top: 1px solid rgba(46,16,101,.06); color: var(--ink); vertical-align: middle; } .adm-table tbody tr { } .adm-table tbody tr:hover { background: rgba(46,16,101,.035); } .adm-table td.num, .adm-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .adm-table a.rowlink { font-weight: 800; color: var(--purple); } .adm-table a.rowlink:hover { color: var(--green-deep); } .adm-table code { font-size: 12.5px; background: rgba(46,16,101,.06); padding: 2px 7px; border-radius: 6px; color: var(--purple); } .adm-money-pos { color: var(--green-deep); font-weight: 800; } .adm-money-owed { color: var(--purple); font-weight: 800; } .adm-table tfoot td { padding: 16px 18px; font-weight: 900; color: var(--purple); border-top: 1px solid rgba(46,16,101,.12); } /* Status pills reuse .tagpill; add used/refunded/valid */ .tagpill--used { background: rgba(46,16,101,.12); color: var(--purple); } .tagpill--valid { background: rgba(47,216,122,.18); color: var(--green-deep); } .tagpill--paid { background: rgba(47,216,122,.18); color: var(--green-deep); } .tagpill--refunded { background: #fde0e0; color: var(--danger); } .tagpill--pending2 { background: #fff4d6; color: #8a6400; } /* Small inline action buttons in tables */ .adm-rowbtns { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .adm-iconbtn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: none; cursor: pointer; background: #fff; color: var(--purple); } .adm-iconbtn:hover { background: var(--panel-2); } .adm-iconbtn:active { } .adm-iconbtn--danger:hover { background: var(--danger); color: #fff; } .adm-iconbtn svg { width: 17px; height: 17px; } /* Money breakdown tiles (event detail) — flat tints, no borders */ .adm-money { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0 10px; } .adm-moneycard { border-radius: var(--r); padding: 22px 24px; } .adm-moneycard--gross { background: var(--panel); } .adm-moneycard--owed { background: rgba(47,216,122,.14); } .adm-moneycard--fee { background: var(--purple); color: #fff; } .adm-moneycard__l { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; opacity: .8; margin-bottom: 10px; } .adm-moneycard__n { font-size: 26px; font-weight: 900; letter-spacing: -.02em; } .adm-moneycard--fee .adm-moneycard__l { color: rgba(255,255,255,.75); } @media (max-width: 600px) { .adm-money { grid-template-columns: 1fr; } } /* Admin forms (add ticket etc.) — flat tinted panel, no border */ .adm-form { background: var(--panel); border-radius: var(--r); padding: 24px 26px; max-width: 520px; } .adm-form .oform__row { grid-template-columns: 1fr 1fr; } /* Inputs sit on white inside the tinted panel so they read clearly */ .adm-form .oform__field input { background: #fff; } .adm-pay-note { font-size: 13px; color: var(--ink); margin-top: 10px; } /* Flash message */ .adm-flash { border-radius: var(--r); padding: 14px 18px; margin-bottom: 20px; font-size: 14.5px; font-weight: 600; } .adm-flash--ok { background: rgba(47,216,122,.16); color: var(--green-deep); } .adm-flash--err { background: #fde0e0; color: var(--danger); } /* ============================================================ ADMIN LOGIN ============================================================ */ .adminlogin { min-height: calc(100vh - 92px); display: grid; place-items: center; padding: 40px 22px 80px; background: var(--panel); } .adminlogin__card { width: 100%; max-width: 400px; background: #fff; border-radius: var(--r-lg); padding: 40px 36px; text-align: center; } .adminlogin__ic { width: 64px; height: 64px; border-radius: 50%; background: rgba(46,16,101,.07); color: var(--purple); display: grid; place-items: center; margin: 0 auto 20px; } .adminlogin__ic svg { width: 30px; height: 30px; } .adminlogin__h { font-size: 26px; } .adminlogin__sub { font-size: 14.5px; color: var(--ink); margin: 10px 0 24px; line-height: 1.55; } .adminlogin__err { background: #fde0e0; color: var(--danger); font-size: 14px; font-weight: 600; padding: 11px 14px; border-radius: 12px; margin-bottom: 18px; } .adminlogin__field { text-align: left; margin-bottom: 18px; } .adminlogin__field label { display: block; font-size: 13px; font-weight: 700; color: var(--purple); margin-bottom: 8px; } .adminlogin__field input { width: 100%; } .adminlogin__back { display: inline-block; margin-top: 20px; font-size: 14px; font-weight: 700; color: var(--ink); } .adminlogin__back:hover { color: var(--purple); } ORGANISER ACCOUNTS (auth, dashboard, profile) ============================================================ */ /* Auth pages (signup / login) — full content width, flat, two columns */ .authpage { padding: 48px 0 70px; } .authpage .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .authpage__aside .eyebrow { margin-bottom: 14px; } .authpage__aside h1 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.05; } .authpage__aside p { font-size: 17px; color: var(--ink); margin-top: 16px; line-height: 1.6; max-width: 42ch; } .authbenefits { list-style: none; margin: 26px 0 0; display: flex; flex-direction: column; gap: 14px; } .authbenefits li { display: flex; align-items: center; gap: 13px; font-size: 15.5px; font-weight: 700; color: var(--purple); } .authbenefits__ic { flex: none; width: 42px; height: 42px; border-radius: 50%; background: rgba(47,216,122,.16); color: var(--green-deep); display: grid; place-items: center; } .authbenefits__ic svg { width: 21px; height: 21px; } .authcard { width: 100%; max-width: 480px; background: var(--panel); border-radius: var(--r-lg); padding: 34px 32px; } .authcard__ic { width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--purple); display: grid; place-items: center; margin-bottom: 16px; } .authcard__ic svg { width: 26px; height: 26px; } .authcard h1, .authcard__h { font-size: 24px; font-weight: 900; color: var(--purple); letter-spacing: -.03em; } .authcard__sub { font-size: 14.5px; color: var(--ink); margin: 9px 0 22px; line-height: 1.55; } .authcard__err { background: #fde0e0; color: var(--danger); border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; font-size: 13.5px; font-weight: 600; } .authcard__err p + p { margin-top: 4px; } .authcard__ok { background: rgba(47,216,122,.16); color: var(--green-deep); border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; font-size: 14px; font-weight: 700; } .authform { display: flex; flex-direction: column; gap: 14px; } .authform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .authform__field { display: flex; flex-direction: column; } .authform__field label { font-size: 13px; font-weight: 700; color: var(--purple); margin-bottom: 7px; } .authform__opt { color: var(--ink); font-weight: 500; } .authform__field input { width: 100%; } .authcard__alt { margin-top: 20px; font-size: 14px; color: var(--ink); text-align: center; } .authcard__alt a { color: var(--green-deep); font-weight: 800; } /* Honeypot — visually hidden, kept out of the tab order */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* On-screen PIN human check */ .pincheck { background: #fff; border: 2px dashed var(--line); border-radius: 14px; padding: 16px; } .pincheck__label { font-size: 13px; font-weight: 700; color: var(--purple); margin-bottom: 12px; } .pincheck__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .pincode { display: inline-flex; gap: 7px; user-select: none; } .pincode b { width: 38px; height: 46px; display: grid; place-items: center; border-radius: 10px; background: var(--purple); color: #fff; font-size: 24px; font-weight: 900; letter-spacing: 0; transform: rotate(-2deg); } .pincode b:nth-child(even) { transform: rotate(2deg); background: var(--green); color: var(--green-ink); } .pininput { flex: 1; min-width: 120px; text-align: center; font-size: 22px; font-weight: 800; letter-spacing: 8px; padding: 11px 12px; } @media (max-width: 880px) { .authpage .wrap { grid-template-columns: 1fr; gap: 36px; } .authpage__aside { max-width: 520px; } .authcard { max-width: none; } } @media (max-width: 460px) { .authform__row { grid-template-columns: 1fr; } } /* Dashboard */ .dash { padding: 40px 0 10px; } .dash__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; } .dash__id { display: flex; align-items: center; gap: 16px; } .dash__avatar { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex: none; } .dash__avatar--ph { background: var(--purple); color: #fff; display: grid; place-items: center; font-size: 26px; font-weight: 900; } .dash__id h1 { font-size: 28px; } .dash__meta { font-size: 14px; color: var(--ink); margin-top: 3px; } .dash__verified { color: var(--green-deep); font-weight: 800; } .dash__pending { color: #a07400; font-weight: 700; } .dash__actions { display: flex; gap: 10px; flex-wrap: wrap; } .dash__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 44px; } .dstat { background: var(--panel); border-radius: var(--r); padding: 22px; } .dstat__n { display: block; font-size: 30px; font-weight: 900; color: var(--purple); letter-spacing: -.03em; } .dstat__l { font-size: 13px; color: var(--ink); } .dash__h2 { font-size: 24px; margin-bottom: 18px; } .dash__events { display: flex; flex-direction: column; gap: 18px; } .devent { background: #fff; border: 2px solid var(--line); border-radius: var(--r-lg); padding: 24px; } .devent__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .devent__headbtns { display: flex; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; } .devent__head h3 { font-size: 20px; margin: 8px 0 6px; } .devent__meta { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ink); flex-wrap: wrap; } .devent__meta svg { width: 16px; height: 16px; color: var(--green-deep); display: inline; vertical-align: middle; } .devent__bar { height: 10px; border-radius: 999px; background: var(--panel); overflow: hidden; } .devent__bar span { display: block; height: 100%; background: var(--green); border-radius: 999px; } .devent__barlabel { font-size: 13px; color: var(--ink); margin: 8px 0 18px; } .devent__barlabel b { color: var(--purple); } .devent__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .devent__n { display: block; font-size: 20px; font-weight: 900; color: var(--purple); letter-spacing: -.02em; } .devent__l { font-size: 12px; color: var(--ink); } .devent__note { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--ink); background: var(--panel); padding: 11px 14px; border-radius: 12px; } .devent__note svg { width: 17px; height: 17px; flex: none; color: var(--green-deep); } .devent__note--bad { color: var(--danger); background: #fde0e0; } .devent__note--bad svg { color: var(--danger); } /* Organiser event controls */ .devent__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .devent__cap { display: flex; align-items: center; gap: 10px; } .devent__cap label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--purple); } .devent__cap input { width: 110px; padding: 10px 12px; font-size: 14px; } .devent__ctrlbtns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .devent__ctrlbtns form { margin: 0; } .devent__hint { font-size: 12.5px; color: var(--ink); margin-top: 10px; } @media (max-width: 560px) { .devent__controls { flex-direction: column; align-items: stretch; } .devent__cap { justify-content: space-between; } } .dash__empty { text-align: center; background: var(--panel); border-radius: var(--r-lg); padding: 54px 30px; } .dash__empty-ic { width: 72px; height: 72px; border-radius: 50%; background: #fff; color: var(--purple); display: grid; place-items: center; margin: 0 auto 18px; } .dash__empty-ic svg { width: 34px; height: 34px; } .dash__empty h3 { font-size: 20px; margin-bottom: 8px; } .dash__empty p { color: var(--ink); margin-bottom: 20px; } /* Dashboard door-scanner card */ .dash__scanner { background: var(--panel); border-radius: var(--r); padding: 26px 28px; margin: 40px 0 0; } .dash__scanner-main { display: flex; align-items: flex-start; gap: 16px; } .dash__scanner-ic { flex: none; width: 48px; height: 48px; border-radius: 13px; background: var(--purple); color: #fff; display: grid; place-items: center; } .dash__scanner-ic svg { width: 24px; height: 24px; } .dash__scanner-main h3 { margin: 0; font-size: 18px; font-weight: 900; color: var(--purple); } .dash__scanner-main p { margin: 5px 0 0; font-size: 14px; color: var(--ink); line-height: 1.5; max-width: 60ch; } .dash__scanner-creds { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; } .dash__pwrow { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid var(--purple); border-radius: 12px; padding: 10px 14px; } .dash__pwlabel { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); } .dash__pw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; font-weight: 700; color: var(--purple); letter-spacing: .06em; } .dash__pwtoggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: none; background: var(--panel-2); color: var(--purple); font-family: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 9px; } .dash__pwtoggle:hover { background: #e6dffb; } .dash__pwtoggle svg { width: 15px; height: 15px; } .dash__scanner-note { margin: 16px 0 0; font-size: 12.5px; color: var(--ink); } @media (max-width: 560px) { .dash__pwrow { width: 100%; justify-content: space-between; } .dash__scanner-creds .btn { width: 100%; } } .dash__payout { display: flex; align-items: center; gap: 9px; margin: 36px 0 0; font-size: 13.5px; color: var(--ink); background: var(--panel); padding: 14px 18px; border-radius: 14px; } .dash__payout svg { width: 19px; height: 19px; flex: none; color: var(--purple); } @media (max-width: 760px) { .dash__stats, .devent__stats { grid-template-columns: 1fr 1fr; } } /* Profile photo row */ .profile__photo { display: flex; align-items: center; gap: 16px; background: var(--panel); border-radius: var(--r); padding: 18px; margin: 10px 0 4px; } .profile__photo img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; } .profile__photo-ph { width: 64px; height: 64px; border-radius: 50%; background: var(--purple); color: #fff; display: grid; place-items: center; font-size: 26px; font-weight: 900; flex: none; } .profile__photo b { color: var(--purple); } /* ============================================================ ADMIN — organiser user management ============================================================ */ .adm-users { display: flex; flex-direction: column; gap: 14px; } .auser { display: grid; grid-template-columns: 1.6fr 1fr auto; gap: 20px; align-items: center; background: var(--panel); border-radius: var(--r); padding: 18px 20px; } .auser--locked { background: #fdecec; } .auser__id { display: flex; align-items: center; gap: 14px; min-width: 0; } .auser__av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; } .auser__av--ph { background: var(--purple); color: #fff; display: grid; place-items: center; font-size: 21px; font-weight: 900; } .auser__who { min-width: 0; } .auser__who b { display: block; color: var(--purple); font-size: 15.5px; } .auser__who > span { display: block; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .auser__tags { display: flex; gap: 6px; margin-top: 6px; white-space: normal; } .auser__stats { display: flex; gap: 22px; } .auser__n { display: block; font-size: 18px; font-weight: 900; color: var(--purple); letter-spacing: -.02em; } .auser__l { font-size: 11.5px; color: var(--ink); } .auser__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .auser__actions form { margin: 0; } .auser__pw { position: relative; } .auser__pw summary { list-style: none; } .auser__pw summary::-webkit-details-marker { display: none; } .auser__pwform { display: flex; gap: 8px; margin-top: 8px; } .auser__pwform input { font-size: 13px; padding: 10px 12px; } @media (max-width: 860px) { .auser { grid-template-columns: 1fr; gap: 16px; } .auser__actions { justify-content: flex-start; } } /* ============================================================ FORM PAGES (organiser profile, list event) — centered column that uses the page properly instead of a narrow left-pinned block ============================================================ */ .formpage { padding: 40px 0 40px; } /* Full site content width, same as every other page. */ .formpage__wrap { max-width: var(--wrap); margin: 0 auto; } .formpage .back-link { margin-bottom: 22px; } .formpage__head { margin: 0 0 28px; } .formpage__head h1 { position: relative; padding-top: 24px; font-size: clamp(32px, 4.4vw, 48px); } .formpage__head h1::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 4px; border-radius: 4px; background: var(--green); } .formpage__head p { font-size: 17px; color: var(--ink); margin-top: 14px; line-height: 1.6; max-width: 60ch; } /* Flat form, no card/panel — sits directly on the page like the rest of the site. A 2-column grid lays fields two-up; .oform__section, .oform__field--full and paired rows span the whole width. */ .formpage .oform { background: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; align-items: start; } .formpage .oform__field { margin: 0; min-width: 0; } /* min-width:0 stops overflow */ /* Full-width rows span both columns */ .formpage .oform__section, .formpage .oform__field--full, .formpage .oform__row, .formpage .oform__hint, .formpage .oform__check, .formpage .oform__submit, .formpage .oform__note, .formpage .profile__photo { grid-column: 1 / -1; } .formpage .oform__section { margin: 14px 0 0; } .formpage .oform__section:first-child { margin-top: 0; } .formpage .oform__field input, .formpage .oform__field select, .formpage .oform__field textarea { background: #fff; width: 100%; } .formpage .profile__photo { margin: 0 0 4px; } /* ============================================================ Custom file upload (profile photo) ============================================================ */ .filedrop { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--panel); border: 2px dashed var(--purple); border-radius: 14px; cursor: pointer; } .filedrop:hover { background: var(--panel-2); } .filedrop:focus-within { border-color: var(--green-deep); } .filedrop.is-dragover { background: var(--panel-2); border-color: var(--green-deep); } .filedrop.has-file { border-style: solid; border-color: var(--green-deep); background: rgba(47,216,122,.08); } .filedrop__ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--purple); color: #fff; display: grid; place-items: center; } .filedrop__ic svg { width: 22px; height: 22px; } .filedrop.has-file .filedrop__ic { background: var(--green-deep); } .filedrop__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .filedrop__title { font-size: 15px; font-weight: 800; color: var(--purple); } .filedrop__hint { font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filedrop.has-file .filedrop__hint { color: var(--green-deep); font-weight: 700; } /* Hide the native input but keep it accessible/clickable via the label. */ .filedrop__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); } /* ===== New-look overrides (organiser + admin) ===== */ .filedrop__input { width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; } .filedrop { border: 2px dashed var(--line-2); background: #fff; border-radius: 16px; } .filedrop:hover, .filedrop.is-dragover { background: var(--lilac); border-color: var(--p); } .filedrop__ic { border-radius: 50%; background: var(--tile); color: var(--p); } .filedrop.has-file { border-color: var(--g); background: var(--ok-bg); } .filedrop.has-file .filedrop__ic { background: var(--g); color: var(--p); } /* Auth (login / signup / list your event) */ .authpage { background: var(--lilac); padding: 64px 0 88px; } .authpage .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 64px; align-items: center; } .authpage__aside h1 { font-size: 46px; line-height: 1.06; letter-spacing: -.03em; margin-bottom: 14px; } .authpage__aside p { font-size: 17px; line-height: 1.6; color: var(--ink); max-width: 46ch; } .authbenefits { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .authbenefits li { display: flex; align-items: center; gap: 14px; font-weight: 700; color: var(--p); font-size: 15.5px; } .authbenefits__ic { width: 44px; height: 44px; border-radius: 13px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--p); flex: none; } .authbenefits__ic svg { width: 21px; height: 21px; } .authcard { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 32px; width: 100%; max-width: 480px; } .authcard h1, .authcard__h { font-size: 26px; letter-spacing: -.02em; margin-bottom: 4px; } .authcard__sub { color: var(--ink); font-size: 15px; margin-bottom: 20px; } .authcard__err { background: var(--red-bg); color: var(--red); border-radius: 14px; padding: 12px 14px; font-size: 14px; font-weight: 600; margin-bottom: 16px; } .authcard__ok { background: var(--ok-bg); color: #1F7A3A; border-radius: 14px; padding: 12px 14px; font-size: 14px; font-weight: 600; margin-bottom: 16px; } .authform { display: flex; flex-direction: column; gap: 16px; } .authform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .authform__field { display: flex; flex-direction: column; min-width: 0; } .authform__field label, .oform__field label { font-size: 13.5px; font-weight: 700; color: var(--p); margin-bottom: 7px; } .authform__opt { font-weight: 500; color: var(--mute); } .authform .btn { margin-top: 4px; } .authcard__alt { text-align: center; margin-top: 18px; font-size: 14.5px; color: var(--ink); } .authcard__alt a { color: var(--p); font-weight: 800; text-decoration: underline; text-decoration-color: var(--g); text-decoration-thickness: 2px; text-underline-offset: 3px; } .pincheck { background: var(--lilac); border: 1.5px dashed var(--line-2); border-radius: 16px; } .pincode b { border-radius: 12px; box-shadow: none; transform: none !important; } .pincode b:nth-child(even) { box-shadow: none; } /* Dashboard */ .dash { background: var(--lilac); padding: 44px 0 88px; } .dash__top { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 28px; } .dash__id { display: flex; align-items: center; gap: 16px; min-width: 0; } .dash__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; } .dash__avatar--ph { background: var(--p); color: #fff; display: grid; place-items: center; font-size: 26px; font-weight: 800; } .dash__id h1 { font-size: 34px; letter-spacing: -.025em; } .dash__meta { color: var(--ink); font-size: 14.5px; margin-top: 4px; overflow-wrap: anywhere; } .dash__verified { color: #1F7A3A; font-weight: 700; } .dash__pending { color: var(--amber); font-weight: 700; } .dash__actions { display: flex; gap: 10px; flex-wrap: wrap; } .dash__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .dstat, .devent, .dash__scanner, .dash__empty { background: #fff; border: 1px solid var(--line); border-radius: 22px; } .dstat { padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; } .dstat__n { font-size: 34px; font-weight: 800; color: var(--p); letter-spacing: -.03em; line-height: 1.1; } .dstat__l { font-size: 14px; color: var(--ink); font-weight: 600; } .dash__h2 { font-size: 26px; letter-spacing: -.02em; margin: 44px 0 16px; } .dash__events { display: flex; flex-direction: column; gap: 18px; } .devent { padding: 24px; } .devent__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; } .devent__head h3 { font-size: 21px; margin: 10px 0 6px; letter-spacing: -.015em; } .devent__headbtns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .devent__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; color: var(--ink); } .devent__meta svg { width: 16px; height: 16px; color: var(--p); } .devent__bar { height: 10px; border-radius: 99px; background: var(--tile); overflow: hidden; margin-top: 18px; } .devent__bar span { display: block; height: 100%; border-radius: 99px; background: var(--g); } .devent__barlabel { font-size: 13.5px; color: var(--ink); margin-top: 8px; } .devent__barlabel b { color: var(--p); } .devent__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; } .devent__stats > div { background: var(--lilac); border-radius: 16px; padding: 14px 16px; } .devent__n { display: block; font-size: 22px; font-weight: 800; color: var(--p); letter-spacing: -.02em; } .devent__l { font-size: 13px; color: var(--ink); } .devent__note { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--amber-bg); color: var(--amber); font-size: 14px; font-weight: 600; } .devent__note svg { width: 18px; height: 18px; flex: none; } .devent__note--bad { background: var(--red-bg); color: var(--red); } .devent__controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } .devent__cap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .devent__cap label { font-size: 13.5px; font-weight: 700; color: var(--p); } .devent__cap input { width: 96px; padding: 9px 12px; } .devent__ctrlbtns { display: flex; gap: 8px; flex-wrap: wrap; } .devent__hint { font-size: 12.5px; color: var(--mute); margin-top: 8px; } .dash__scanner { margin-top: 28px; padding: 24px; } .dash__scanner-ic { background: var(--tile); color: var(--p); border-radius: 14px; } .dash__scanner-main p, .dash__scanner-note { color: var(--ink); } .dash__payout { background: #fff; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); } .dash__empty { padding: 44px 24px; text-align: center; } .adm-flash { border-radius: 14px; padding: 12px 16px; font-weight: 600; margin-bottom: 18px; } .adm-flash--ok { background: var(--ok-bg); color: #1F7A3A; } .adm-flash--err { background: var(--red-bg); color: var(--red); } /* Form pages (list / edit event, profile, submit event) */ .formpage { background: var(--lilac); padding: 44px 0 88px; } .formpage__wrap { max-width: 880px; } .formpage__head h1 { padding-top: 0; font-size: 40px; letter-spacing: -.03em; } .formpage__head h1::before { display: none; } .formpage__head p { color: var(--ink); } .formpage .oform { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 32px; } .oform__section { color: var(--p) !important; font-size: 13px; letter-spacing: .06em; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .oform__hint, .oform__note, .oform__check { color: var(--ink); } .oform__check a { color: var(--p); text-decoration: underline; text-decoration-color: var(--g); } .profile__photo { background: var(--lilac); } @media (max-width: 880px) { .authpage .wrap { grid-template-columns: 1fr; gap: 32px; } .authpage__aside h1 { font-size: 36px; } } @media (max-width: 640px) { .authpage { padding: 32px 0 56px; } .authcard { padding: 22px; border-radius: 20px; } .authform__row { grid-template-columns: 1fr; } .dash { padding: 28px 0 56px; } .dash__id h1 { font-size: 26px; } .dash__stats { grid-template-columns: 1fr 1fr; gap: 10px; } .dstat { padding: 16px; } .dstat__n { font-size: 26px; } .devent { padding: 18px; } .devent__head { flex-direction: column; } .devent__headbtns { justify-content: flex-start; } .devent__stats { grid-template-columns: 1fr 1fr; gap: 8px; } .formpage { padding: 28px 0 56px; } .formpage__head h1 { font-size: 30px; } .formpage .oform { padding: 20px; border-radius: 20px; } } @media (max-width: 560px) { .formpage .oform, .formpage .oform__row { grid-template-columns: 1fr; } } /* ===== Admin ===== */ .admbar .logo { display: inline-flex; align-items: center; gap: 12px; } .admbar__tag { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--g); color: var(--p); border-radius: 999px; padding: 4px 10px; } .admbar .bar__links li { display: list-item; } .admfoot { padding: 28px 0; } .admfoot__inner { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--ink); } .admfoot__inner a { color: var(--p); font-weight: 700; } .adm, .adminlogin { background: var(--lilac); } .adm { padding: 40px 0 80px; } .adm__bar h1 { font-size: 36px; letter-spacing: -.03em; } .adm__sub { color: var(--ink); } .adm-stat, .adm-chart, .adm-moneycard, .adm-table-wrap, .admin-stat, .auser { background: #fff !important; border: 1px solid var(--line); border-radius: 20px; } .adm-stat--revenue { background: var(--p) !important; border-color: var(--p); } .adm-stat__l, .adm-stat__m, .adm-moneycard__l, .adm-note, .adm-pay-note, .auser__l, .auser__who > span { color: var(--ink); } .adm-table th { color: var(--p); background: var(--lilac); } .adm-iconbtn { border-radius: 50%; } .auser--locked { background: var(--red-bg) !important; } .adminlogin { min-height: 62vh; display: grid; place-items: center; padding: 56px 20px; } .adminlogin__card { background: #fff; border: 1px solid var(--line); border-radius: 24px; } .adminlogin__ic { background: var(--tile) !important; color: var(--p) !important; border-radius: 50% !important; } .adminlogin__sub, .adminlogin__back { color: var(--ink); } @media (max-width: 640px) { .admbar__site { display: none !important; } .adm { padding: 28px 0 56px; } .adm__bar h1 { font-size: 28px; } .adm-table-wrap { overflow-x: auto; } } /* ========================================================================== 98 · Flat finish: no shadows, glows, lifts or motion. Hover = colour only. ========================================================================== */ /* Keyboard focus: a solid outline instead of glow rings */ :focus-visible { outline: 3px solid var(--g); outline-offset: 2px; } input:focus, select:focus, textarea:focus { border-color: var(--p); outline: 2px solid var(--p); outline-offset: 0; } .search:focus-within { outline: 3px solid var(--g); outline-offset: 0; } .search input:focus { outline: 0; } /* Text links: plain colour change, no growing underline */ .more { background: none; } .more:hover { color: var(--g-ink); } .footer__links a:not(.btn) { background: none; } .footer__links a:not(.btn):hover { color: var(--g-ink); } /* Status strip: same purple as the bar so the top reads as one edge-to-edge band */ .statusbar { background: var(--p); border-bottom: 1px solid rgba(255,255,255,.1); } .statusbar__pulse { display: none; } .statusbar.is-closing { display: none; } .pulse, .adm-live__dot, .bump { animation: none; } /* Panels that used a drop shadow get a hairline instead */ .helpbot__panel, .cookie, .modal__card { border: 1px solid var(--line); } .mobilenav { border-bottom: 1px solid rgba(255,255,255,.12); } .helpbot__fab { border: 2px solid rgba(255,255,255,.18); } .helpbot__fab:hover { background: var(--p2); } /* Cards: hover is a border colour change only */ a.card:hover, .ev:hover, .slink:hover { border-color: var(--line-2); } .stepper__btn { border: 1px solid var(--line); } .stepper__btn:hover { background: var(--g); border-color: var(--g); } .btn--white { border: 0; } /* Full-bleed top: bar, status strip and hero run edge to edge with no rounding */ .statusbar, .bar, .herowrap { width: 100%; margin-left: 0; margin-right: 0; border-radius: 0; } /* ========================================================================== 98b · Borderless pass: separate with flat fills, not lines. Borders kept only on form fields, the search box, the file drop zone and keyboard focus outlines. ========================================================================== */ /* No outlines on containers */ .card, .ev, .acc, .slink, .note, .statuscard, .ordercard, .authcard, .dstat, .devent, .dash__scanner, .dash__empty, .dash__payout, .formpage .oform, .adm-stat, .adm-chart, .adm-moneycard, .adm-table-wrap, .admin-stat, .auser, .adminlogin__card, .qty, .tkt__qr-wrap, .helpbot__panel, .cookie, .modal__card, .helpbot__msg--bot, .helpbot__q, .viewtoggle, .tiers li, .pincheck, .dash__pwrow, .stepper__btn, .helpbot__fab { border: 0 !important; } /* Dividers become spacing */ .statusbar, .mobilenav, .mobilenav__link, .oform__section { border-bottom: 0; } .helpbot__ask, .evbuy__extra, .devent__controls, .co__row--total { border-top: 0; } .evbuy__extra { margin-top: 20px; padding-top: 4px; } .co__row--total { margin-top: 10px; padding-top: 8px; } .oform__section { padding-bottom: 2px; } .mobilenav__link { padding: 15px 4px; } /* On white pages and sections: light lilac fills */ .card, .ev, .acc, .slink, .evbuy { background: var(--tile); } .acc__head:hover { background: var(--line); } a.card:hover, .ev:hover, .slink:hover { background: var(--line); } /* On lilac pages and sections: white fills */ .sec--lil .card, .sec--lil .ev, .sec--lil .acc, .sec--lil .slink, .note, .statuspage .card, .authpage .card, .dash .card, .formpage .card, .adm .card, .adminlogin .card, .statuscard, .authcard, .dstat, .devent, .dash__scanner, .dash__empty, .dash__payout, .formpage .oform { background: #fff; } .sec--lil a.card:hover, .sec--lil .slink:hover, .sec--lil .ev:hover, .dash a.card:hover, .adm a.card:hover { background: var(--tile); } /* Panels inside cards */ .ordercard, .devent__stats > div, .pincheck, .dash__pwrow { background: var(--lilac); } .statuscard .ordercard { background: var(--tile); } .tiers li { background: var(--tile); } .viewtoggle { background: var(--tile); } /* Helpbot, cookie, checkout */ .helpbot__msg--bot, .helpbot__q { background: #fff; } .helpbot__q:hover { background: var(--tile); } .helpbot__ask { background: #fff; } .cookie { background: #fff; } .modal__card { background: #fff; } .qty { background: none; overflow: visible; } .qty__row { background: var(--tile); border-radius: 14px; } .qty__row + .qty__row { border-top: 0; margin-top: 8px; } .stepper { background: #fff; } .stepper__btn { background: var(--tile); } /* Ticket */ .tkt__qr-wrap { background: #fff; } .tkt__grid { gap: 0; background: none; border-top: 0; border-bottom: 0; } .tkt__grid > * { background: #fff; } .tkt__info { border-bottom: 0; } /* Tables: no rules, alternating fills */ .legal__wrap th, .legal__wrap td, .admin-table th, .admin-table td, .adm-table td, .adm-table tfoot td { border: 0; } .legal__wrap table { border: 0; border-collapse: separate; border-spacing: 0; } .legal__wrap th { background: var(--tile); } .legal__wrap tbody tr:nth-child(even) td { background: var(--lilac); } .admin-table tbody tr:nth-child(even) td, .adm-table tbody tr:nth-child(even) td { background: var(--lilac); } .adm-table tfoot td { background: var(--tile); } /* Sticky mobile buy bar: fill instead of a top rule; keep the help button clear of it */ .mobilebuy { border-top: 0; background: var(--tile); } @media (max-width: 640px) { body:has(.mobilebuy) .helpbot { bottom: 92px; } } /* Icon tiles: white on lilac cards, lilac on white cards */ .card .ico, .slink .ico, .card .emptystate__ic, .orgcard__ph { background: #fff; } .sec--lil .card .ico, .statuspage .card .ico, .authpage .card .ico, .dash .card .ico, .formpage .card .ico, .adm .card .ico, .note .ico { background: var(--tile); } .evbuy .sharebtn { background: #fff; } .evbuy .sharebtn:hover { background: var(--g); } /* ========================================================================== 98c · Batch 7: bolder top bar + account chip, content widths, new footer (flat: no borders, no shadows; fills only) ========================================================================== */ /* ---------- Top bar ---------- */ .bar { left: 0; right: 0; width: 100%; max-width: none; margin: 0; border: 0; box-shadow: none; } .bar__nav { gap: 32px; } .bar__links { gap: 6px; font-size: 15.5px; font-weight: 700; letter-spacing: -.005em; } .bar__links > li > a:not(.btn) { opacity: 1; color: rgba(255,255,255,.9); height: 42px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; transition: background-color .15s, color .15s; } .bar__links > li > a:not(.btn):hover { background: rgba(255,255,255,.1); color: #fff; } .bar__links > li > a.is-active { background: rgba(255,255,255,.14); color: #fff; } .bar__links > li > a.is-active::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--g); margin-left: 8px; } .bar__cta { margin-left: 10px; } .bar .btn { font-weight: 800; } /* Account chip + dropdown */ .bar__acct { position: relative; } .acct { position: relative; } .acct > summary { list-style: none; } .acct > summary::-webkit-details-marker { display: none; } .acct__btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 5px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; font-weight: 700; font-size: 15px; user-select: none; transition: background-color .15s; } .acct__btn:hover, .acct[open] > .acct__btn, .acct__btn.is-active { background: rgba(255,255,255,.18); } .acct__btn:focus-visible { outline: 3px solid var(--g); outline-offset: 2px; } .acct__av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--g); color: var(--p); font-size: 13px; font-weight: 800; letter-spacing: .02em; object-fit: cover; } .acct__name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct__chev { opacity: .8; transition: transform .15s; } .acct[open] .acct__chev { transform: rotate(180deg); } .acct__menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; min-width: 240px; background: #1A0B40; color: #fff; border-radius: 18px; padding: 8px; display: flex; flex-direction: column; } .acct__who { padding: 10px 12px 12px; margin-bottom: 4px; background: rgba(255,255,255,.08); border-radius: 12px; display: flex; flex-direction: column; gap: 2px; } .acct__who span { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.62); } .acct__who b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct__menu a { display: block; padding: 10px 12px; border-radius: 10px; font-size: 15px; font-weight: 700; color: #fff; } .acct__menu a:hover, .acct__menu a:focus-visible { background: rgba(255,255,255,.1); } .acct__menu a.acct__out { color: #FF9AA8; } .acct__menu a.acct__out:hover { background: rgba(255,154,168,.12); } /* Mobile menu: account block + buttons on purple */ .mobilenav__acct { display: flex; align-items: center; gap: 12px; padding: 14px; margin: 6px 0 8px; border-radius: 16px; background: rgba(255,255,255,.1); } .mobilenav__acct .acct__av { width: 42px; height: 42px; font-size: 15px; } .mobilenav__acct p { display: flex; flex-direction: column; line-height: 1.3; } .mobilenav__acct span { font-size: 12.5px; color: rgba(255,255,255,.7); font-weight: 600; } .mobilenav__acct b { font-size: 16px; font-weight: 800; } .mobilenav__ctas .btn--light { background: #fff; color: var(--p); box-shadow: none; } .mobilenav__ctas .btn--light:hover { background: var(--tile); box-shadow: none; } .btn--outline-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); } .btn--outline-light:hover { background: rgba(255,255,255,.1); } /* Admin header uses the same chip */ .admbar .bar__links { gap: 6px; } /* ---------- Content widths ---------- */ /* Form pages: one centred column (760px content) with the heading aligned to it */ .formpage__wrap { max-width: calc(760px + 80px); } .formpage .oform { grid-template-columns: 1fr; padding: 32px; } .formpage .oform__row { grid-template-columns: 1fr 1fr; } /* Login / signup: same centred column, intro on top, form card full width below */ .authpage .wrap { max-width: calc(760px + 80px); display: flex; flex-direction: column; align-items: stretch; gap: 28px; } .authpage__aside h1 { font-size: 44px; } .authpage__aside p { max-width: none; } .authbenefits { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .authbenefits li { background: #fff; border-radius: 999px; padding: 6px 16px 6px 6px; font-size: 14.5px; gap: 10px; } .authbenefits__ic { width: 34px; height: 34px; border-radius: 50%; background: var(--tile); } .authbenefits__ic svg { width: 18px; height: 18px; } .authcard { max-width: none; padding: 36px; } /* Find my ticket and other single-form status cards */ .statuscard--form { max-width: 760px; } /* Reading pages: ~760px text measure, left edge aligned with the page heading */ .legal__wrap > * { max-width: 760px; } .legal__wrap > .support__links { max-width: none; } /* ---------- Footer ---------- */ .footer { background: var(--p); color: #fff; border: 0; padding: 64px 0 36px; margin-top: 0; } .footer__top { display: grid; grid-template-columns: minmax(240px, 1.15fr) 2.85fr; gap: 56px; } .footer__logo img { height: 36px; width: auto; } .footer__tag { margin-top: 16px; font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,.78); font-weight: 500; max-width: 30ch; } .footer__mail { display: inline-block; margin-top: 14px; color: var(--g); font-weight: 700; font-size: 15px; } .footer__mail:hover { text-decoration: underline; } .footer__stripe { display: block; width: max-content; margin-top: 22px; } .footer__stripe img { display: block; width: 150px; height: auto; } .footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .footer__col h2 { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--g); margin-bottom: 14px; } .footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer__col a, .footer .footer__linkbtn { color: rgba(255,255,255,.86); font-size: 15px; font-weight: 600; text-decoration: none; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; text-align: left; } .footer__col a:hover, .footer .footer__linkbtn:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--g); text-underline-offset: 3px; } .footer__small { margin-top: 56px; padding-top: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px 24px; flex-wrap: wrap; font-size: 13.5px; color: rgba(255,255,255,.62); background: none; border: 0; } .footer__secure { color: rgba(255,255,255,.62); } @media (max-width: 1060px) { .footer__top { grid-template-columns: 1fr; gap: 40px; } .bar__links > li > a:not(.btn) { padding: 0 10px; } .acct__name { max-width: 110px; } } @media (max-width: 820px) { .bar__cta { margin-left: 0; } } @media (max-width: 640px) { .footer { padding: 48px 0 calc(28px + env(safe-area-inset-bottom)); } .footer__cols { grid-template-columns: 1fr 1fr; gap: 30px 20px; } .footer__small { flex-direction: column; align-items: flex-start; margin-top: 36px; } .formpage .oform { padding: 22px 18px; } .formpage .oform__row { grid-template-columns: 1fr; } .authpage__aside h1 { font-size: 34px; } .authcard { padding: 24px 20px; } .authbenefits li { font-size: 13.5px; } } /* ========================================================================== 98d · Batch 8: plain nav links, one button height, quiet search focus, every page on the site container, full-bleed chrome ========================================================================== */ /* Site container: 1200px of content (1280 incl. side padding) on every page */ :root { --wrap: 1280px; --btn-h: 52px; } /* ---------- Full-bleed chrome ---------- */ html, body { margin: 0; width: 100%; overflow-x: clip; } .updbanner, .statusbar, .bar, .footer, .herowrap { width: 100%; max-width: none; margin-left: 0; margin-right: 0; border-radius: 0; } /* ---------- Header: plain text links ---------- */ .bar__links { gap: 30px; } .bar__links > li > a:not(.btn), .bar__links > li > a:not(.btn):hover, .bar__links > li > a.is-active { background: none; height: auto; padding: 6px 0; border-radius: 0; position: relative; } .bar__links > li > a:not(.btn) { color: rgba(255,255,255,.86); font-weight: 700; } .bar__links > li > a:not(.btn):hover { color: #fff; } .bar__links > li > a.is-active { color: #fff; } .bar__links > li > a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; width: auto; height: 3px; margin: 0; border-radius: 3px; background: var(--g); } .bar__cta { margin-left: 0; } /* ---------- One button height ---------- */ .btn, .btn--sm, .btn--lg { --h: var(--btn-h); } .btn--sm { font-size: 15px; padding: 0 22px; gap: 10px; } .btn--lg { font-size: 16.5px; padding: 0 28px; } .btn--sm.has-bi, .btn--lg.has-bi, .btn.has-bi { padding-right: 7px; } .bar .btn { --h: var(--btn-h); font-size: 15.5px; padding-left: 22px; } .bar .btn.has-bi { padding-right: 7px; } .acct__btn { height: var(--btn-h); padding: 0 16px 0 7px; } .acct__av { width: 38px; height: 38px; } .search .btn { --h: var(--btn-h); } /* Compact exceptions: buttons inside data tables and xs pills */ td .btn, th .btn, .btn--xs { --h: 38px; font-size: 13.5px; padding: 0 14px; } /* ---------- Search: one quiet focus state on the outer pill ---------- */ .search input:focus, .search input:focus-visible, .search input:hover { outline: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent; } .search:focus-within { outline: 0 !important; box-shadow: inset 0 0 0 2px var(--line-2); } /* ---------- Every page on the site container ---------- */ /* Form pages (new / edit event, profile): heading, back link, intro and card on the container */ .formpage__wrap { max-width: var(--wrap); } .formpage__head p { max-width: 70ch; } .formpage .oform { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; padding: 40px; } .formpage .oform__row { display: contents; } .formpage .oform__field--full { grid-column: 1 / -1; } /* A select next to a text field (e.g. Event name + Category) sits two-up */ .formpage .oform__field--full:has(> select), .formpage .oform__field--full:has(+ .oform__field--full > select) { grid-column: auto; } .formpage .oform__section, .formpage .oform__hint, .formpage .oform__check, .formpage .oform__submit, .formpage .oform__note, .formpage .profile__photo, .formpage .oform > .btn, .formpage .oform__actions { grid-column: 1 / -1; } .formpage .oform__submit { justify-self: start; min-width: 280px; } /* Login / signup: intro on the left edge, form card to the right edge */ .authpage .wrap { max-width: var(--wrap); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 64px; align-items: start; } .authpage__aside { padding-top: 8px; } .authpage__aside h1 { font-size: 48px; } .authpage__aside p { max-width: 46ch; } .authbenefits { flex-direction: column; flex-wrap: nowrap; gap: 12px; margin-top: 28px; } .authbenefits li { background: none; padding: 0; font-size: 15.5px; gap: 14px; } .authbenefits__ic { width: 44px; height: 44px; border-radius: 50%; background: #fff; } .authcard { max-width: none; padding: 36px; } /* Status pages (find my ticket, success, errors): card spans the container */ .statuspage__wrap { display: block; } .statuscard, .statuscard--wide, .statuscard--form { max-width: none; text-align: left; padding: 44px; } .statuscard__ic { margin: 0 0 20px; } .statuscard__text { max-width: 64ch; } .statuscard__btns { justify-content: flex-start; } .statuscard:has(> form) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-content: start; } .statuscard:has(> form) > * { grid-column: 1; } .statuscard:has(> form) > form { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; align-self: start; } /* Reading pages: text column + "On this page" panel, together filling the container */ .legal__wrap--toc { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; } .legal__wrap--toc > .legal__body > * { max-width: none; } .legal__wrap--toc > * { max-width: none; } .legal__body > * + * { } .legal__toc { position: sticky; top: calc(var(--bar-h) + 24px); background: var(--lilac); border-radius: 20px; padding: 22px 22px 18px; } .legal__toc h2 { font-size: 13px !important; letter-spacing: .08em; text-transform: uppercase; color: var(--g-ink); margin: 0 0 10px !important; } .legal__toc ol { list-style: none; padding: 0; margin: 0 !important; display: flex; flex-direction: column; gap: 2px !important; } .legal__toc li { font-size: 14.5px !important; line-height: 1.4 !important; padding-left: 0 !important; } .legal__toc a { display: block; padding: 7px 10px; margin: 0 -10px; border-radius: 10px; color: var(--p); font-weight: 600; text-decoration: none !important; } .legal__toc a:hover { background: var(--tile); } .legal__toc li::before { display: none !important; content: none !important; } .legal__toc p { margin-top: 14px !important; font-size: 13.5px !important; color: var(--ink); } .legal__toc p a { display: inline; padding: 0; margin: 0; color: var(--g-ink); font-weight: 700; } .legal__toc p a:hover { background: none; text-decoration: underline !important; } @media (max-width: 1060px) { .legal__wrap--toc { grid-template-columns: 1fr; gap: 0; } .legal__toc { display: none; } .authpage .wrap { grid-template-columns: 1fr; gap: 32px; } .statuscard:has(> form) { grid-template-columns: 1fr; } .statuscard:has(> form) > form { grid-column: 1; grid-row: auto; margin-top: 24px; } } @media (max-width: 820px) { .formpage .oform { grid-template-columns: 1fr; padding: 28px 22px; } .formpage .oform__submit { min-width: 0; width: 100%; } } @media (max-width: 640px) { :root { --btn-h: 50px; } .bar .bar__links .btn { --h: 44px; font-size: 14.5px; padding-left: 16px; } .bar .bar__links .btn.has-bi { padding-right: 5px; } .bar .menu { width: 44px; height: 44px; } .search .btn { --h: 46px; } .statuscard, .statuscard--wide, .statuscard--form { padding: 28px 20px; } .authpage__aside h1 { font-size: 34px; } .authcard { padding: 24px 20px; } } /* ========================================================================== 98e · Batch 9: admin area, flat and on the site container ========================================================================== */ body.admin { background: var(--lilac); } body.admin .adm, body.admin .adminlogin { flex: 1; background: var(--lilac); } /* Section tabs under the purple bar (full bleed) */ .admtabs { width: 100%; background: #fff; position: sticky; top: var(--bar-h); z-index: 45; } .admtabs__inner { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 10px; padding-bottom: 10px; } .admtabs__inner::-webkit-scrollbar { display: none; } .admtabs a { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap; } .admtabs a svg { width: 18px; height: 18px; } .admtabs a:hover { background: var(--lilac); color: var(--p); } .admtabs a.is-active { background: var(--p); color: #fff; } .admtabs a.is-active svg { color: var(--g); } .admtabs a:first-child { margin-left: -16px; } /* Page head */ body.admin .adm { padding: 40px 0 88px; } body.admin .adm__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; } body.admin .adm__bar h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.03em; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } body.admin .adm__bar h1 .tagpill { font-size: 12px; letter-spacing: .04em; } body.admin .adm__sub { margin: 8px 0 0; font-size: 16px; color: var(--ink); max-width: 70ch; } body.admin .adm__actions { display: flex; gap: 10px; flex-wrap: wrap; } .adm-back { margin-bottom: 18px; } .adm-code { font-size: .55em; background: #fff; padding: 6px 12px; border-radius: 10px; letter-spacing: .02em; } /* Flash */ body.admin .adm-flash { border-radius: 16px; padding: 14px 18px; font-size: 15px; margin-bottom: 24px; } /* Review callout */ .adm-review { display: flex; align-items: center; gap: 16px; background: var(--amber-bg); color: var(--p); border-radius: 20px; padding: 16px 20px; margin-bottom: 20px; } .adm-review__ic { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--amber); display: grid; place-items: center; flex: none; } .adm-review__ic svg { width: 22px; height: 22px; } .adm-review__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .adm-review__txt b { font-size: 16px; } .adm-review__txt span { font-size: 14px; color: var(--ink); } .adm-review__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--p); color: #fff; flex: none; } .adm-review__go svg { width: 16px; height: 16px; } .adm-review:hover .adm-review__go { background: var(--p2); } /* Stat cards */ body.admin .adm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; } body.admin .adm-stat { background: #fff !important; border: 0; border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; min-width: 0; } body.admin .adm-stat__l { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; } body.admin .adm-stat__l svg { width: 18px; height: 18px; color: var(--g-ink); } body.admin .adm-stat__n { font-size: 32px; font-weight: 800; letter-spacing: -.03em; color: var(--p); line-height: 1.05; overflow-wrap: anywhere; } body.admin .adm-stat__m { font-size: 13.5px; color: var(--ink); margin-top: 8px; } body.admin .adm-stat--revenue { background: var(--p) !important; } body.admin .adm-stat--revenue .adm-stat__n { color: #fff; } body.admin .adm-stat--revenue .adm-stat__l, body.admin .adm-stat--revenue .adm-stat__m { color: rgba(255,255,255,.72); } body.admin .adm-stat--revenue .adm-stat__l svg { color: var(--g); } body.admin .adm-stat--owed { background: var(--g) !important; } body.admin .adm-stat--owed .adm-stat__l, body.admin .adm-stat--owed .adm-stat__m, body.admin .adm-stat--owed .adm-stat__l svg { color: var(--p); } /* Small count tiles */ .adm-minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } .adm-mini { background: #fff; border-radius: 16px; padding: 14px 18px; display: flex; align-items: baseline; gap: 12px; } .adm-mini__n { font-size: 22px; font-weight: 800; color: var(--p); letter-spacing: -.02em; } .adm-mini__l { font-size: 13.5px; color: var(--ink); font-weight: 600; } .adm-mini--warn { background: var(--amber-bg); } .adm-mini--warn .adm-mini__n { color: var(--amber); } /* Event money cards */ body.admin .adm-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 16px; } body.admin .adm-moneycard { border: 0; border-radius: 20px; padding: 22px 24px; background: #fff !important; } body.admin .adm-moneycard--fee { background: var(--p) !important; color: #fff; } body.admin .adm-moneycard--owed { background: var(--g) !important; color: var(--p); } body.admin .adm-moneycard__l { font-size: 12.5px; letter-spacing: .05em; margin-bottom: 10px; } body.admin .adm-moneycard__n { font-size: 32px; font-weight: 800; letter-spacing: -.03em; } .adm-orgline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; background: #fff; border-radius: 16px; padding: 14px 20px; font-size: 14.5px; color: var(--ink); margin-top: 0; } .adm-orgline b { color: var(--p); } .adm-orgline__l { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--g-ink); } /* Chart */ body.admin .adm-chart { background: #fff !important; border: 0; border-radius: 20px; padding: 24px 26px 18px; margin: 0; } body.admin .adm-chart__key { font-size: 13px; } body.admin .adm-live { color: var(--g-ink); } /* Section headings */ body.admin .adm-h { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--p); margin: 48px 0 6px; display: flex; align-items: center; gap: 10px; scroll-margin-top: calc(var(--bar-h) + 80px); } body.admin .adm-h--flush { margin: 0; font-size: 18px; } body.admin .adm-note { font-size: 14.5px; color: var(--ink); margin: 0 0 16px; } .adm-count { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 10px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 800; color: var(--p); letter-spacing: 0; } /* Tables: flat, roomy, row hover */ body.admin .adm-table-wrap { background: #fff !important; border: 0; border-radius: 20px; overflow: hidden; overflow-x: auto; padding: 6px 8px; } body.admin .adm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; min-width: 0; } body.admin .adm-table th { background: none; color: var(--mute); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 14px 16px 10px; text-align: left; border: 0; white-space: nowrap; } body.admin .adm-table th.num, body.admin .adm-table td.num { text-align: right; } body.admin .adm-table td { padding: 16px; color: var(--ink); vertical-align: middle; border: 0; background: none; } body.admin .adm-table tbody tr:nth-child(even) td { background: none; } body.admin .adm-table tbody tr td:first-child { border-radius: 14px 0 0 14px; } body.admin .adm-table tbody tr td:last-child { border-radius: 0 14px 14px 0; } body.admin .adm-table tbody tr:not(.adm-emptyrow):hover td { background: var(--lilac); } body.admin .adm-table tfoot td { background: var(--tile); color: var(--p); font-weight: 800; padding: 16px; } body.admin .adm-table tfoot td:first-child { border-radius: 14px 0 0 14px; } body.admin .adm-table tfoot td:last-child { border-radius: 0 14px 14px 0; } body.admin .adm-table .adm-td-main a.rowlink { display: block; font-weight: 800; font-size: 15px; color: var(--p); } body.admin .adm-table .adm-td-main a.rowlink:hover { color: var(--g-ink); } body.admin .adm-table .adm-td-main .adm-stat__m { display: block; margin-top: 3px; font-size: 13px; } body.admin .adm-table code { background: var(--tile); font-size: 13px; padding: 3px 8px; border-radius: 8px; } body.admin .adm-td-wrap { overflow-wrap: anywhere; } body.admin .adm-money-pos { color: var(--g-ink); } body.admin .adm-table--kv th { width: 34%; color: var(--ink); font-size: 13px; letter-spacing: .03em; padding: 16px; vertical-align: top; } body.admin .adm-table--kv tr:hover td, body.admin .adm-table--kv tr:hover th { background: none; } body.admin .adm-table--kv td, body.admin .adm-table--kv th { border-radius: 0 !important; } body.admin .adm-table--kv tr + tr th, body.admin .adm-table--kv tr + tr td { box-shadow: none; } /* Status pills */ body.admin .tagpill { height: 28px; padding: 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .03em; border: 0; } body.admin .tagpill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } body.admin .tagpill--approved, body.admin .tagpill--paid, body.admin .tagpill--valid { background: var(--ok-bg); color: #1F7A3A; } body.admin .tagpill--pending, body.admin .tagpill--pending2 { background: var(--amber-bg); color: var(--amber); } body.admin .tagpill--rejected, body.admin .tagpill--refunded { background: var(--red-bg); color: var(--red); } body.admin .tagpill--used { background: var(--tile); color: var(--ink); } /* Row actions */ body.admin .adm-rowbtns { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: nowrap; } body.admin .adm-rowbtns form { margin: 0; } body.admin .adm-rowbtns .btn { --h: 40px; font-size: 14px; padding: 0 16px; gap: 6px; } body.admin .adm-rowbtns .btn svg { width: 16px; height: 16px; } body.admin .adm-iconbtn { width: 40px; height: 40px; border-radius: 50%; background: var(--tile); color: var(--p); border: 0; display: inline-grid; place-items: center; cursor: pointer; } body.admin .adm-iconbtn:hover { background: var(--line); } body.admin .adm-iconbtn--danger { background: var(--red-bg); color: var(--red); } body.admin .adm-iconbtn--danger:hover { background: var(--red); color: #fff; } /* Empty states */ .adm-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 36px 20px; color: var(--ink); font-size: 14.5px; } .adm-empty b { color: var(--p); font-size: 17px; } .adm-empty__ic { width: 56px; height: 56px; border-radius: 50%; background: var(--tile); color: var(--p); display: grid; place-items: center; margin-bottom: 6px; } .adm-empty__ic svg { width: 26px; height: 26px; } .adm-empty--box { background: #fff; border-radius: 20px; padding: 44px 24px; } .adm-empty a { color: var(--p); font-weight: 700; text-decoration: underline; text-decoration-color: var(--g); } /* Add tickets form */ body.admin .adm-form { background: #fff; border: 0; border-radius: 20px; padding: 28px; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; align-items: end; } body.admin .adm-form > input[type=hidden] { display: none; } body.admin .adm-form .oform__row { display: contents; } body.admin .adm-form .oform__field { margin: 0; } body.admin .adm-form .oform__check { grid-column: 1 / -1; margin: 0; } body.admin .adm-form .oform__submit { grid-column: 1 / 2; width: auto; justify-self: start; } body.admin .adm-form .adm-pay-note { grid-column: 2 / -1; margin: 0; align-self: center; } body.admin .adm-form .oform__field input { background: #fff; } /* Two-up layout (ticket page) */ .adm-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; } .adm-sidecard { background: #fff; border-radius: 20px; padding: 24px; } .adm-sidecard__btns { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .adm-sidecard__btns form { margin: 0; } .adm-sidecard__btns .btn { width: 100%; justify-content: center; } /* Organisers */ body.admin .adm-users { gap: 12px; } body.admin .auser { background: #fff !important; border: 0; border-radius: 20px; padding: 20px 22px; grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 1.4fr); gap: 24px; } body.admin .auser:hover { background: #fff !important; } body.admin .auser--locked { background: var(--red-bg) !important; } body.admin .auser__av { width: 52px; height: 52px; } body.admin .auser__av--ph { background: var(--g); color: var(--p); font-weight: 800; } body.admin .auser__stats { gap: 8px; } body.admin .auser__stats > div { background: var(--lilac); border-radius: 12px; padding: 8px 14px; min-width: 76px; } body.admin .auser--locked .auser__stats > div { background: #fff; } body.admin .auser__n { font-size: 17px; font-weight: 800; } body.admin .auser__actions .btn { --h: 40px; font-size: 14px; padding: 0 16px; gap: 6px; } body.admin .auser__actions .btn svg { width: 16px; height: 16px; } body.admin .auser__pwform input { height: 40px; } /* Door scanner */ .admscan__grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; } .admscan__cam { background: var(--p); border-radius: 20px; min-height: 360px; overflow: hidden; display: grid; place-items: center; color: rgba(255,255,255,.8); } .admscan__reader { width: 100%; max-width: 520px; } .admscan__reader .muted, .admscan__reader p { color: rgba(255,255,255,.8) !important; text-align: center; } .admscan__reader:empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 360px; padding: 24px; } .admscan__reader:empty::before { content: ""; width: 120px; height: 120px; border-radius: 24px; background: rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236AD583%27 stroke-width=%271.8%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3M4 12h16%27/%3E%3C/svg%3E") center / 56px no-repeat; } .admscan__reader:empty::after { content: "Camera starts here. Allow access when asked."; font-size: 15px; font-weight: 600; color: rgba(255,255,255,.8); text-align: center; } .admscan__side { display: flex; flex-direction: column; gap: 16px; } .admscan__form { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 14px; } .admscan__form label { font-size: 13.5px; font-weight: 700; color: var(--p); } .admscan__form input { width: 100%; } .scan-result { border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; } .scan-result strong { font-size: 18px; } .scan-result--ok { background: var(--g); color: var(--p); } .scan-result--used { background: var(--amber-bg); color: var(--amber); } .scan-result--bad { background: var(--red-bg); color: var(--red); } /* Admin sign-in: intro left, card right, on the container */ body.admin .adminlogin { display: block; min-height: 0; padding: 64px 0 88px; } .adminlogin__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 64px; align-items: center; } .adminlogin__eyebrow { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--g-ink); margin-bottom: 12px; } .adminlogin__aside h1 { font-size: 48px; line-height: 1.06; letter-spacing: -.03em; } .adminlogin__aside p { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--ink); max-width: 46ch; } body.admin .adminlogin__card { max-width: none; border: 0; border-radius: 24px; padding: 36px; text-align: left; } body.admin .adminlogin__ic { margin: 0 0 16px; } body.admin .adminlogin__h { font-size: 26px; } body.admin .adminlogin__back { margin-top: 18px; } /* Admin footer: slim, purple, full bleed */ body.admin .admfoot { background: var(--p); color: rgba(255,255,255,.7); padding: 26px 0; border: 0; margin: 0; } body.admin .admfoot__inner { color: rgba(255,255,255,.7); font-size: 14px; } body.admin .admfoot__inner a { color: var(--g); } @media (max-width: 1060px) { body.admin .adm-stats, .adm-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-split, .admscan__grid, .adminlogin__wrap { grid-template-columns: 1fr; } body.admin .auser { grid-template-columns: 1fr; gap: 16px; } body.admin .auser__actions { justify-content: flex-start; } } @media (max-width: 760px) { /* Tables stack into cards on phones */ body.admin .adm-table-wrap { background: none !important; padding: 0; overflow: visible; border-radius: 0; } body.admin .adm-table, body.admin .adm-table tbody, body.admin .adm-table tfoot, body.admin .adm-table tr, body.admin .adm-table td { display: block; width: 100%; } body.admin .adm-table thead { display: none; } body.admin .adm-table tbody tr, body.admin .adm-table tfoot tr { background: #fff; border-radius: 18px; padding: 14px 16px; margin-bottom: 10px; } body.admin .adm-table tfoot tr { background: var(--tile); } body.admin .adm-table td, body.admin .adm-table tfoot td { padding: 6px 0; border-radius: 0 !important; background: none !important; text-align: left; display: flex; justify-content: space-between; gap: 16px; } body.admin .adm-table td[data-label]::before { content: attr(data-label); font-size: 12.5px; font-weight: 700; color: var(--mute); flex: none; } body.admin .adm-table td.num { text-align: right; } body.admin .adm-table .adm-td-main { display: block; padding-bottom: 8px; } body.admin .adm-table .adm-td-blank { display: none; } body.admin .adm-table .adm-td-actions { padding-top: 10px; } body.admin .adm-table .adm-td-actions .adm-rowbtns { justify-content: flex-start; flex-wrap: wrap; } body.admin .adm-table tbody tr:not(.adm-emptyrow):hover td { background: none; } body.admin .adm-table .adm-emptyrow td { display: block; } body.admin .adm-table--kv tr { display: block; padding: 10px 16px; } body.admin .adm-table--kv th { display: block; width: auto; padding: 4px 0 0; background: none; } body.admin .adm-table--kv td { display: block; padding: 2px 0 6px; } body.admin .adm-table--kv tbody tr { margin-bottom: 8px; } body.admin .adm-form { grid-template-columns: 1fr 1fr; padding: 22px 18px; } body.admin .adm-form .oform__field:has(#em) { grid-column: 1 / -1; } body.admin .adm-form .oform__submit, body.admin .adm-form .adm-pay-note { grid-column: 1 / -1; } body.admin .adm-form .oform__submit { width: 100%; } } @media (max-width: 640px) { body.admin .adm { padding: 28px 0 64px; } body.admin .adm__bar h1 { font-size: 30px; } body.admin .adm__actions { width: 100%; } body.admin .adm__actions .btn { flex: 1; } body.admin .adm-stat { padding: 18px; } body.admin .adm-stat__n { font-size: 26px; } body.admin .adm-money { grid-template-columns: 1fr; } .adm-minis { gap: 10px; } .adm-mini { flex-direction: column; gap: 2px; padding: 12px 14px; } .adm-review { flex-wrap: wrap; } .adm-review__go { width: 100%; justify-content: center; } .admtabs a:first-child { margin-left: 0; } body.admin .admbar .acct__name { display: none; } .adminlogin__aside h1 { font-size: 34px; } body.admin .adminlogin__card { padding: 24px 20px; } } @media (max-width: 420px) { body.admin .adm-stats { grid-template-columns: 1fr 1fr; gap: 10px; } body.admin .adm-stat__l { font-size: 11px; letter-spacing: .03em; } body.admin .adm-stat__n { font-size: 22px; } } /* ========================================================================== 98f · Batch 9: events list + single event page tidy ========================================================================== */ /* ---- Events list ---- */ /* Hero matches the home hero: centred heading, intro, search pill and chips. */ .evlist .evlist__hero { text-align: center; padding-top: 56px; padding-bottom: 48px; } .evlist .evlist__hero h1 { font-size: 52px; } .evlist .evlist__hero .hero__sub { margin: 12px auto 0; max-width: 720px; } .evlist .evlist__hero .search { margin: 30px auto 0; max-width: 720px; } .evlist .evlist__hero .chips { justify-content: center; margin-top: 20px; } .evlist .sec--events { padding-top: 48px; padding-bottom: 88px; } .evlist .sec__head--tools { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; } .evlist .sec__head--tools h2 { font-size: 30px; } .evlist #event-count { margin-top: 4px; font-size: 15px; color: var(--ink); } .evlist .evgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .evlist .evgrid .ev { border-radius: 20px; } .evlist .evgrid:not(.is-list) .ev__blk { height: auto; aspect-ratio: 16 / 10; } .evlist .evgrid .ev__blk::after { display: none; } .evlist .evgrid .ev__bd { padding: 20px 22px 22px; gap: 8px; } .evlist .evgrid .ev__title { font-size: 20px; } .evlist .evgrid .ev__title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .evlist .evgrid .ev__ft { padding-top: 16px; } .evlist .evgrid .ev__ft b { font-size: 16px; color: var(--p); } .evlist .evgrid .ev__buy { height: 42px; padding: 0 16px 0 18px; margin: 0; border-radius: 999px; background: var(--g); color: var(--p); font-size: 14.5px; } .evlist .evgrid .ev__buy:hover { background: var(--p); color: #fff; } .evlist .evgrid .ev__out { font-weight: 800; color: var(--mute); } .evlist .evgrid.is-list { grid-template-columns: 1fr; gap: 12px; } .evlist .evgrid.is-list .ev__blk { width: 200px; aspect-ratio: auto; } .evlist .evempty { background: var(--lilac); border-radius: 24px; padding: 64px 24px; } .evlist .evempty .emptystate__ic { background: #fff; } .evlist .evempty h3 { font-size: 26px; } .evlist .evempty p { max-width: 520px; font-size: 16px; line-height: 1.6; } .evempty__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .evlist .evempty--sm { padding: 48px 24px; } /* ---- Single event page ---- */ .evpage .evtop__in { padding-top: 32px; padding-bottom: 40px; } .evpage .evtop .back-link { color: rgba(255,255,255,.8); margin-bottom: 22px; } .evpage .evtop .back-link:hover { color: #fff; } .evtop__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .evpage .evtop h1 { font-size: 56px; line-height: 1.04; letter-spacing: -.035em; max-width: 18ch; overflow-wrap: anywhere; } .evfacts { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; } .evfacts li { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.08); border-radius: 16px; padding: 12px 18px 12px 14px; min-width: 0; } .evfacts .ci { font-size: 28px; flex: none; } .evfacts span { display: flex; flex-direction: column; font-size: 15.5px; font-weight: 700; min-width: 0; } .evfacts small { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--g); margin-bottom: 1px; } .evfacts a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; overflow-wrap: anywhere; } .evfacts a:hover { text-decoration-color: var(--g); } /* Banner: full container width, fixed ratio, half over the purple */ .evbanner { background: linear-gradient(var(--p) 0 50%, #fff 50% 100%); } .evbanner__art { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 3 / 1; display: flex; align-items: center; justify-content: center; } .evbanner__art .ev__icon { font-size: 150px; position: relative; } .evbanner__art::before { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: var(--ring); } .evbanner__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .evpage .evsec { padding-top: 48px; padding-bottom: 88px; } .evpage .evbody { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; } .evpage .evbody__main h2 { font-size: 26px; margin: 0 0 16px; } .evpage .evbody__main h2:not(:first-child) { margin-top: 48px; } .evpage .evbody__desc { font-size: 17px; line-height: 1.75; max-width: 68ch; } .evpage .goodtoknow .ic { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: start; } .evpage .goodtoknow .ico { grid-row: span 2; margin: 0; } .evpage .goodtoknow .ic h3 { margin: 2px 0 0; } /* Ticket panel */ .evpage .evbuy { position: sticky; top: calc(var(--bar-h) + 24px); padding: 28px; border-radius: 24px; background: var(--lilac); } .evpage .evbuy .evbuy__h { font-size: 20px; letter-spacing: -.01em; margin: 0 0 14px; } .evbuy__types { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .evbuy__types li { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-radius: 16px; padding: 14px 18px; } .evbuy__types span { display: flex; flex-direction: column; } .evbuy__types b { font-size: 16px; color: var(--p); } .evbuy__types small { font-size: 13px; color: var(--ink); } .evbuy__types strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--p); } .evbuy__fee { margin: 10px 0 0; font-size: 13.5px; color: var(--ink); } .evbuy__avail { margin: 18px 0 14px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--p); } .evbuy__avail .meter { background: #fff; } .evpage .evbuy .btn--lg { --h: var(--btn-h); } .evbuy__avail--low { color: #8A5A00; } .evbuy__avail--low .pulse { background: #F0A030; } .evbuy__qty { margin: 10px 0 0; text-align: center; font-size: 13.5px; color: var(--ink); } .evbuy__state { margin: 20px 0 14px; background: #fff; border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; } .evbuy__state b { font-size: 16px; color: var(--p); } .evbuy__state span { font-size: 14px; color: var(--ink); line-height: 1.5; } .evbuy__alt { display: block; margin-top: 12px; text-align: center; font-weight: 700; font-size: 14.5px; color: var(--p); text-decoration: underline; text-decoration-color: var(--g); text-underline-offset: 3px; } .evbuy--off .evbuy__types li { opacity: .7; } .evpage .evbuy__extra { margin-top: 20px; padding-top: 0; display: flex; flex-direction: column; gap: 14px; } .evpage .evbuy__extra .sharebar { margin-top: 0; } .evpage .evbuy__note { margin-top: 18px; } @media (max-width: 1060px) { .evlist .evgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .evpage .evbody { grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; } .evbanner__art { aspect-ratio: 5 / 2; } } @media (max-width: 860px) { .evpage .evbody { grid-template-columns: 1fr; gap: 40px; } .evpage .evbuy { position: static; } /* Phones/tablets: tickets straight after the description */ .evpage .evbody { display: flex; flex-direction: column; gap: 0; } .evpage .evbody__main { display: contents; } .evpage .evbody__main > * { order: 2; } .evpage .evbody__main > :nth-child(-n+2) { order: 0; } .evpage .evbody__side { order: 1; margin-top: 32px; } .evbanner__art { aspect-ratio: 16 / 9; } } @media (max-width: 640px) { .evlist .evlist__hero { padding-top: 32px; padding-bottom: 36px; } .evlist .evlist__hero h1 { font-size: 34px; } .evlist .evlist__hero .search { margin-top: 22px; } .evlist .evlist__hero .chips { justify-content: flex-start; margin-top: 18px; } .evlist .sec--events { padding-top: 32px; padding-bottom: 64px; } .evlist .sec__head--tools { flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; } .evlist .sec__head--tools h2 { font-size: 24px; } .evlist .evgrid { grid-template-columns: 1fr; gap: 16px; } .evlist .evgrid.is-list .ev__blk { width: auto; } .evlist .evempty { padding: 44px 20px; } .evempty__btns { flex-direction: column; width: 100%; } .evempty__btns .btn { width: 100%; } .evpage .evtop__in { padding-top: 22px; padding-bottom: 28px; } .evpage .evtop h1 { font-size: 36px; } .evfacts { flex-direction: column; gap: 0; margin-top: 20px; background: rgba(255,255,255,.08); border-radius: 16px; padding: 6px 16px; } .evfacts li { background: none; border-radius: 0; padding: 9px 0; } .evfacts span { font-size: 15px; } .evfacts .ci { font-size: 24px; } .evfacts li { padding: 10px 14px 10px 12px; } .evbanner__art { border-radius: 18px; } .evbanner__art .ev__icon { font-size: 96px; } .evbanner__art::before { width: 160px; height: 160px; } .evpage .evsec { padding-top: 32px; padding-bottom: 48px; } .evpage .evbody__desc { font-size: 16px; } .evpage .evbuy { padding: 22px 18px; } .evpage .mobilebuy { padding-left: 20px; padding-right: 20px; } .evpage .mobilebuy .btn { --h: var(--btn-h); } } /* ===== Batch 10: organisers landing, home intro band, 404 extras ===== */ .hero__btns { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .orgland__hero .hero__sub { max-width: 760px; } .sec__btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .steps { list-style: none; padding: 0; margin: 0; counter-reset: none; } .steps > li { padding: 26px 24px 24px; } .steps__n { width: 44px; height: 44px; border-radius: 50%; background: var(--g); color: var(--p); font-weight: 800; font-size: 18px; display: grid; place-items: center; margin-bottom: 18px; } .steps h3 { font-size: 19px; color: var(--p); } .steps p { margin-top: 8px; color: var(--ink); line-height: 1.55; } .orgland__local { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; } .orgland__local h2 { margin-bottom: 14px; } .orgland__local p { color: var(--ink); font-size: 16.5px; line-height: 1.65; max-width: 66ch; } .orgland__local p + p { margin-top: 14px; } .orgland__local p a { color: var(--p); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .orgland__cta { padding: 28px; background: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .orgland__cta h3 { font-size: 21px; color: var(--p); } .orgland__cta p { color: var(--ink); margin-bottom: 8px; } .orgland__cta .more { margin-top: 6px; } .aboutband { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; } .aboutband h2 { font-size: 34px; line-height: 1.15; } .aboutband__txt p { color: var(--ink); font-size: 16.5px; line-height: 1.65; } .aboutband__txt p + p { margin-top: 14px; } .statuscard__more { margin-top: 22px; color: var(--ink); font-size: 15px; } .statuscard__more a { color: var(--p); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 960px) { .orgland__local, .aboutband { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 640px) { .hero__btns { flex-direction: column; align-items: stretch; } .hero__btns .btn { width: 100%; justify-content: center; } .sec__btns { width: 100%; } .sec__btns .btn { flex: 1 1 auto; justify-content: center; } .aboutband h2 { font-size: 27px; } .steps > li { padding: 20px; } .orgland__cta { padding: 22px; } .orgland__cta .btn { width: 100%; justify-content: center; } } /* ---------- Batch 12: green welcome banner (partials/head.php .hellobar) ---------- Flat: no borders, shadows or transitions. Hover is a colour change only. Purple #2A1261 on green #6AD583 is 8.4:1 contrast; white on purple button is 15.5:1 (both pass WCAG AA and AAA). */ .hellobar { background: var(--g); color: var(--p); width: 100%; margin: 0; border-radius: 0; } .hellobar__inner { max-width: var(--wrap); display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 18px; padding-bottom: 18px; } .hellobar__text { min-width: 0; } .hellobar__title { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; color: var(--p); } .hellobar__line { margin: 4px 0 0; font-size: 15.5px; line-height: 1.45; font-weight: 500; color: var(--p); } .hellobar__actions { display: flex; align-items: center; gap: 24px; flex: none; } .hellobar__btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border-radius: var(--r-pill); background: var(--p); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; } .hellobar__btn:hover { background: var(--p2); color: #fff; } .hellobar__link { color: var(--p); font-weight: 700; font-size: 15.5px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; white-space: nowrap; } .hellobar__link:hover { color: var(--p2); } .hellobar__btn:focus-visible, .hellobar__link:focus-visible { outline: 3px solid var(--p); outline-offset: 3px; } @media (max-width: 820px) { .hellobar__inner { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 14px; padding-bottom: 14px; } .hellobar__title { font-size: 18px; } .hellobar__line { font-size: 14px; } .hellobar__actions { gap: 18px; } .hellobar__btn { height: 44px; padding: 0 22px; font-size: 15px; } .hellobar__link { font-size: 14.5px; } } @media print { .hellobar { display: none; } } .hellobar__l1, .hellobar__l2 { display: block; } /* ---------- Batch 13: line-art crowd along the bottom of the home hero ---------- Decorative background (div is aria-hidden). Tiles across any width. The hero gets extra bottom padding so the crowd sits below the search and chips, never behind them. */ .herowrap--crowd { position: relative; } .herowrap--crowd .hero { position: relative; z-index: 1; padding-bottom: 176px; } .hero__crowd { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: url("img/hero-crowd-line.svg?v=b13") center bottom / auto 150px repeat-x; pointer-events: none; } @media (max-width: 820px) { .herowrap--crowd .hero { padding-bottom: 116px; } .hero__crowd { height: 96px; background-size: auto 96px; } } /* ---------- Home "without the faff" band: two-line heading + punchline (local, awaiting Martin) ---------- Deep green #2F9E52 on lilac #F7F5FC is 3.17:1, which passes WCAG AA for large text (this is 40px+ bold). */ .aboutband__head { min-width: 0; } .aboutband__punch { margin: 22px 0 0; color: var(--g-ink); font-size: 46px; line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; } .aboutband__punch span { display: block; } @media (max-width: 820px) { .aboutband__punch { margin-top: 14px; font-size: 36px; } } /* ========================================================================== 98k · Batch 20: support tickets (public Get help form + admin Support) Flat: no borders except inputs, no shadows or transitions. ========================================================================== */ /* ---------- Public: shared ---------- */ .supportpage .sec { background: #fff; } .supportpage .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; } /* Form card */ .sform { background: var(--lilac); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 20px; } .sform__h { font-size: 22px; letter-spacing: -.02em; } .sform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .sform__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .sform__field > span, .sform__field > legend { font-weight: 800; font-size: 14.5px; color: var(--p); padding: 0; } .sform__field > legend { margin-bottom: 10px; } .sform__field em { font-style: normal; font-weight: 600; color: var(--mute); } .sform__field.has-err input, .sform__field.has-err textarea { border-color: var(--red); } .sform__err { color: var(--red); font-size: 13.5px; font-weight: 700; } .sform__alert { background: var(--red-bg); color: var(--red); border-radius: 14px; padding: 14px 18px; font-weight: 700; font-size: 14.5px; } .sform textarea { min-height: 150px; } .sform .btn { min-height: 52px; height: 52px; } .sform__send { align-self: flex-start; padding-left: 34px; padding-right: 34px; } .sform__fine { font-size: 13.5px; color: var(--ink); margin-top: -6px; } /* Topic picker: four big pills */ .stopics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .stopic { position: relative; display: block; cursor: pointer; } .stopic input { position: absolute; opacity: 0; pointer-events: none; } .stopic > span { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 96px; height: 100%; padding: 16px; border-radius: 16px; background: #fff; font-weight: 800; font-size: 14.5px; line-height: 1.25; color: var(--p); } .stopic > span .ci { font-size: 28px; } .stopic:hover > span { background: var(--tile); } .stopic input:checked + span { background: var(--p); color: #fff; --a: #fff; --b: #6AD583; --c: #2A1261; } .stopic input:focus-visible + span { outline: 2px solid var(--p); outline-offset: 2px; } .sform__field.has-err .stopic > span { background: var(--red-bg); } /* Side column */ .sside { display: flex; flex-direction: column; gap: 10px; } .sside h2 { font-size: 20px; letter-spacing: -.02em; margin-bottom: 4px; } .slink2 { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--lilac); color: var(--p); text-decoration: none; } .slink2:hover { background: var(--tile); } .slink2 .ico { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: grid; place-items: center; flex: none; } .slink2 .ico .ci { font-size: 26px; } .slink2 > span:last-child { display: flex; flex-direction: column; font-size: 14px; color: var(--ink); line-height: 1.4; } .slink2 b { color: var(--p); font-size: 15.5px; } .sside__mail { margin-top: 8px; font-size: 14px; color: var(--ink); } .sside__mail a { color: var(--p2); font-weight: 700; text-decoration: underline; text-decoration-color: var(--g); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; } /* Success / notes */ .sdone { display: flex; gap: 18px; align-items: flex-start; background: var(--ok-bg); border-radius: 24px; padding: 28px 32px; margin-bottom: 28px; } .sdone__ic { flex: none; } .sdone__ic .ci { font-size: 44px; --a: #2A1261; --b: #2F9E52; --c: #fff; } .sdone h2 { font-size: 24px; letter-spacing: -.02em; line-height: 1.2; } .sdone p { margin-top: 6px; color: var(--ink); font-size: 15.5px; } .sdone--slim { padding: 20px 24px; } .sdone--slim h2 { font-size: 19px; } .snote { background: var(--lilac); border-radius: 20px; padding: 24px 28px; max-width: 760px; } .snote--bad { background: var(--amber-bg); } /* Thread */ .sthread { max-width: 820px; } .sthread__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .sthread__meta { font-size: 14px; color: var(--ink); font-weight: 600; } .sthread__private { margin-top: 16px; font-size: 13.5px; color: var(--mute); } .spill { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .02em; } .spill--open { background: var(--tile); color: var(--p); } .spill--waiting { background: var(--g); color: var(--p); } .spill--closed { background: var(--line); color: var(--ink); } .smsgs { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .smsg { background: var(--lilac); border-radius: 20px; padding: 20px 24px; margin-right: 56px; } .smsg--team { background: var(--ok-bg); margin-right: 0; margin-left: 56px; } .smsg--note { background: var(--amber-bg); margin-right: 0; margin-left: 56px; } .smsg__who { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .smsg__who b { font-size: 15px; color: var(--p); } .smsg__who span { font-size: 13px; color: var(--mute); font-weight: 600; } .smsg__body { font-size: 15.5px; line-height: 1.6; color: var(--p); overflow-wrap: anywhere; } .sform--reply { padding: 28px; } .sform--reply .btn { align-self: flex-start; padding-left: 34px; padding-right: 34px; } /* ---------- Admin: list ---------- */ .stk-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 28px 0 16px; } .stk-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .stk-tabs a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; font-weight: 700; font-size: 14.5px; color: var(--ink); text-decoration: none; } .stk-tabs a span { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--lilac); display: inline-grid; place-items: center; font-size: 12.5px; font-weight: 800; color: var(--p); } .stk-tabs a:hover { color: var(--p); background: var(--tile); } .stk-tabs a.is-on { background: var(--p); color: #fff; } .stk-tabs a.is-on span { background: var(--g); } .stk-search input { width: 280px; min-height: 44px; padding: 10px 16px; } .stk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .stk { display: grid; gap: 6px; background: #fff; border-radius: 20px; padding: 18px 22px; color: var(--p); text-decoration: none; } .stk:hover { background: var(--tile); } .stk__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .stk__top .adm-code { font-size: 13px; padding: 4px 10px; background: var(--lilac); font-weight: 800; } .stk__needs { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--g-ink); } .stk__needs::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--g); margin-right: 6px; vertical-align: 1px; } .stk__when { margin-left: auto; font-size: 13px; color: var(--mute); font-weight: 600; } .stk__who b { font-size: 16px; } .stk__who span { font-size: 14px; color: var(--ink); margin-left: 6px; overflow-wrap: anywhere; } .stk__topic { font-size: 13.5px; font-weight: 700; color: var(--ink); } .stk__snip { font-size: 14.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Admin: ticket ---------- */ .stk-split { align-items: start; } .stk-thread .smsg { background: #fff; } .stk-thread .smsg--team { background: var(--ok-bg); } .stk-thread .smsg--note { background: var(--amber-bg); } .stk-compose { background: #fff; border-radius: 20px; padding: 24px; } .stk-compose__tabs { display: flex; gap: 6px; margin-bottom: 18px; } .stk-compose__tabs button { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--lilac); font: 700 14px var(--font); color: var(--ink); cursor: pointer; } .stk-compose__tabs button.is-on { background: var(--p); color: #fff; } .stk-pane { display: flex; flex-direction: column; gap: 16px; } .stk-pane[hidden] { display: none; } .stk-pane__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .stk-pane__status { display: flex; flex-direction: column; gap: 6px; } .stk-pane__status span { font-size: 13.5px; font-weight: 800; } .stk-pane__status select { width: 240px; } .stk-pane .btn { min-height: 52px; } .stk-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 14px 0 26px; font-size: 14.5px; } .stk-kv dt { color: var(--ink); font-weight: 600; } .stk-kv dd { margin: 0; color: var(--p); font-weight: 700; overflow-wrap: anywhere; } .stk-install { max-width: 640px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } /* ---------- Mobile ---------- */ @media (max-width: 960px) { .sgrid { grid-template-columns: 1fr; } .stopics { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .sform { padding: 22px 18px; border-radius: 20px; gap: 18px; } .sform__row { grid-template-columns: 1fr; } .stopic > span { min-height: 0; flex-direction: row; align-items: center; padding: 14px; } .stopic > span .ci { font-size: 24px; flex: none; } .sform__send, .sform--reply .btn { align-self: stretch; width: 100%; } .sdone { padding: 20px; gap: 14px; border-radius: 20px; } .sdone__ic .ci { font-size: 36px; } .sdone h2 { font-size: 19px; } .smsg { margin-right: 20px; padding: 16px 18px; } .smsg--team, .smsg--note { margin-left: 20px; margin-right: 0; } .stk-bar { flex-direction: column; align-items: stretch; } .stk-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; } .stk-tabs a { flex: none; } .stk-search input { width: 100%; } .stk { padding: 16px 18px; } .stk__when { margin-left: 0; width: 100%; } .stk-compose { padding: 18px; } .stk-pane__status, .stk-pane__status select, .stk-pane .btn { width: 100%; } } .sdone .sref { white-space: nowrap; } /* ========================================================================== 98l · Batches 21–22: FAQ side column on contact.php Desktop: sticky left column (intro, "Still need a hand?" card, quick links). Single column (<=960): intro, FAQs, help card, quick links. Not sticky. ========================================================================== */ .faqwrap__side { position: sticky; top: calc(var(--bar-h) + 24px); display: flex; flex-direction: column; gap: 20px; } .needhand { background: #fff; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 10px; } .needhand h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; letter-spacing: -.02em; color: var(--p); } .needhand__ic { display: inline-flex; flex: none; } .needhand__ic .ci { font-size: 26px; } .needhand > p { font-size: 15px; line-height: 1.55; color: var(--ink); } .needhand .btn { --h: 52px; height: 52px; width: 100%; justify-content: center; position: relative; margin-top: 6px; } .needhand .btn .bi { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); } .needhand__addr { font-size: 13.5px !important; color: var(--mute) !important; text-align: center; overflow-wrap: anywhere; } .needhand__addr a { color: var(--p); font-weight: 700; text-decoration: underline; text-decoration-color: var(--g); text-decoration-thickness: 2px; text-underline-offset: 3px; } .faqwrap__intro .muted { margin-top: 8px; font-size: 16px; } .qlinks { padding: 0 4px; } .qlinks h3 { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; } .qlinks ul { list-style: none; margin: 0; padding: 0; } .qlinks a { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 700; font-size: 15px; color: var(--p); text-decoration: none; } .qlinks a .ci { font-size: 24px; flex: none; } .qlinks a:hover { color: var(--p2); text-decoration: underline; text-decoration-color: var(--g); text-decoration-thickness: 2px; text-underline-offset: 4px; } @media (max-width: 960px) { .faqwrap { display: flex; flex-direction: column; gap: 24px; } .faqwrap__side { display: contents; position: static; } .faqwrap__intro { order: 1; } .faqwrap > .accordion { order: 2; } .needhand { order: 3; padding: 20px; border-radius: 20px; } .qlinks { order: 4; } } @media (max-width: 640px) { .needhand h3 { font-size: 18px; } .needhand__ic .ci { font-size: 24px; } .needhand .btn { --h: 50px; height: 50px; } } /* ===== Batch 23: event photo picker (organiser event forms) ===== */ .evphoto { position: relative; } .evphoto__drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 200px; padding: 28px 20px; text-align: center; cursor: pointer; background: #fff; border: 2px dashed var(--line-2); border-radius: 16px; color: var(--p); } .evphoto__drop:hover, .evphoto__drop.is-dragover { background: var(--lilac); border-color: var(--p); } .evphoto:focus-within .evphoto__drop { border-color: var(--g-ink); } .evphoto__ic { width: 56px; height: 56px; border-radius: 50%; background: var(--tile); color: var(--p); display: grid; place-items: center; } .evphoto__ic svg { width: 28px; height: 28px; } .evphoto__title { font-size: 16px; font-weight: 800; color: var(--p); } .evphoto__tap { display: none; } .evphoto__hint { font-size: 13.5px; line-height: 1.5; color: var(--ink); max-width: 40ch; } @media (hover: none) and (pointer: coarse) { .evphoto__tap { display: inline; } .evphoto__drag { display: none; } } .evphoto.has-photo .evphoto__drop { display: none; } .evphoto.is-busy .evphoto__drop { opacity: .6; cursor: progress; } .evphoto__preview { background: #fff; border-radius: 16px; overflow: hidden; } .evphoto__preview[hidden] { display: none; } .evphoto__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--tile); } .evphoto__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; flex-wrap: wrap; } .evphoto__name { font-size: 14px; font-weight: 700; color: var(--p); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 140px; } .evphoto__btns { display: flex; gap: 8px; flex: none; } .evphoto__btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--tile); color: var(--p); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; } .evphoto__btn svg { width: 16px; height: 16px; } .evphoto__btn:hover { background: var(--line); } .evphoto__btn--rm { background: transparent; color: var(--red); } .evphoto__btn--rm:hover { background: var(--red-bg); } .evphoto__btn:focus-visible { outline: 2px solid var(--g-ink); outline-offset: 2px; } /* The real input stays in the page for keyboards and screen readers, just invisible. */ .evphoto__input { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); } .evphoto__err { margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: var(--red-bg); color: var(--red); font-size: 14px; font-weight: 600; } .evphoto__err[hidden] { display: none; } @media (max-width: 640px) { .evphoto__drop { min-height: 170px; padding: 22px 16px; } .evphoto__bar { padding: 10px 12px; } .evphoto__btns { width: 100%; } .evphoto__name { flex-basis: 100%; } .evphoto__btn { flex: 1 1 0; min-width: 0; justify-content: center; height: 44px; padding: 0 10px; } } /* ============================================================ Batch 24: event page views. Organiser per-event panel, admin overview and the tiny flat bar chart. Flat: no borders/shadows. ============================================================ */ .vbars { display: flex; align-items: flex-end; gap: 3px; height: 56px; } .vbars__col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; background: var(--tile); border-radius: 4px; min-width: 0; } .vbars__bar { display: block; width: 100%; background: var(--g); border-radius: 4px; } .vbars__col.is-today .vbars__bar { background: var(--g-ink); } .vbars__axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--mute); } /* Organiser dashboard, per event */ .dviews { margin-top: 16px; padding: 16px; border-radius: 16px; background: var(--lilac); } .dviews__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .dviews__t { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 800; color: var(--p); } .dviews__t svg { width: 18px; height: 18px; color: var(--g-ink); } .dviews__since { font-size: 12.5px; color: var(--mute); font-weight: 600; } .dviews__body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: stretch; } .dviews__nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .dviews__nums > div { background: #fff; border-radius: 12px; padding: 12px; min-width: 0; } .dviews__n { display: block; font-size: 20px; font-weight: 800; color: var(--p); letter-spacing: -.02em; } .dviews__l { display: block; font-size: 12.5px; color: var(--ink); line-height: 1.3; } .dviews__chart { background: #fff; border-radius: 12px; padding: 12px 14px 10px; min-width: 0; } .dviews__cl { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; color: var(--p); } .dviews__chart .vbars { height: 48px; } .dviews__empty { margin: 0; font-size: 14px; color: var(--ink); } .dviews__hint { margin: 10px 0 0; font-size: 12.5px; color: var(--mute); line-height: 1.45; } /* Admin overview */ .vchart .vbars { height: 120px; gap: 6px; margin-top: 14px; } .vchart .vbars__col { border-radius: 6px; } .vchart .vbars__bar { border-radius: 6px; } .vtable__spark { width: 168px; } .vtable__spark .vbars { height: 28px; gap: 2px; } .vtable__spark .vbars__col, .vtable__spark .vbars__bar { border-radius: 2px; } .vtable__spark .vbars__axis { display: none; } @media (max-width: 960px) { .dviews__body { grid-template-columns: 1fr; } } @media (max-width: 640px) { .dviews { padding: 14px; } .dviews__nums { grid-template-columns: 1fr 1fr; } .vtable__spark { width: auto; } .vtable__spark .vbars { width: 100%; max-width: 200px; margin-left: auto; } } /* ========================================================================== 99 · Responsive (1060 · 820 · 640) ========================================================================== */ @media (max-width: 1060px) { .g4, .help { grid-template-columns: repeat(2, 1fr); } .bar__links { gap: 22px; } } @media (max-width: 820px) { .bar__links li.hide { display: none; } .menu { display: flex; } .bar__menu { display: block; } .bar__links { gap: 10px; } .g3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { :root { --bar-h: 72px; } .wrap { padding-left: 20px; padding-right: 20px; } .statusbar { font-size: 12.5px; } .bar__nav { gap: 10px; } .bar .logo img { height: 38px; } .bar .btn { --h: 38px; font-size: 14px; padding-left: 14px; gap: 7px; } .bar .btn.has-bi { padding-right: 5px; } .menu { width: 38px; height: 38px; } .bar__links { gap: 8px; } .bar__nav { justify-content: space-between; } .bar .logo { flex: 0 1 auto; min-width: 0; } .bar .logo img { max-width: 100%; height: auto; max-height: 38px; } .hero { padding-top: 40px; padding-bottom: 56px; } .hero h1 { font-size: 38px; } .hero__sub { font-size: 16px; } .search { height: 60px; padding: 0 6px 0 18px; margin-top: 28px; gap: 10px; } .search .search__ic { font-size: 22px; } .search input { font-size: 16px; } .search .btn { --h: 46px; width: 46px; padding: 0; gap: 0; } .search .btn .btn__txt { display: none; } .chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin: 18px -20px 0; padding: 0 20px 4px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { flex: none; } .sec { padding: 56px 0; } .sec__head h2, .sec h2 { font-size: 27px; } .sec__head { flex-direction: column; align-items: flex-start; margin-bottom: 24px; gap: 12px; } .g4, .g3, .g2, .help { grid-template-columns: 1fr; gap: 14px; } .ev__blk { height: 132px; } .g4 .ic { flex-direction: row; gap: 16px; padding: 20px; } .g4 .ic .ico { margin: 0; width: 50px; height: 50px; } .g4 .ic .ico .ci { font-size: 30px; } .ic h3 { font-size: 17px; } .note { flex-direction: column; align-items: flex-start; padding: 20px; } .footer__row { flex-direction: column; align-items: flex-start; } .footer__links { gap: 12px 18px; } .footer__cta { flex-basis: 100%; margin-top: 6px; } .footer__small { flex-direction: column; align-items: flex-start; } .cookie { left: 12px; right: 12px; bottom: 12px; width: auto; } .helpbot { right: 14px; bottom: 14px; } .helpbot__fab { width: 52px; height: 52px; } } /* ---------- Batch 16: simpler, cleaner phones (max-width 640px only) ---------- Mobile-only. Desktop is untouched. Flat: no borders, shadows or transitions. Nothing here hides legal content: cookie banner, terms/privacy/cookies links and booking fee wording all stay. */ @media (max-width: 640px) { /* Green help banner: headline + one button on a single row. The long line and the "List your event free" link are hidden (the header already has that button). */ .hellobar__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; padding-bottom: 12px; } .hellobar__title { font-size: 16px; line-height: 1.3; } .hellobar__line, .hellobar__link { display: none; } .hellobar__actions { gap: 0; } .hellobar__btn { height: 44px; padding: 0 20px; font-size: 15px; } /* Already on the help page, so the banner just repeats it. */ body:has(main.support) .hellobar { display: none; } /* Hero: a little tighter; the line-art crowd stays but is shorter. */ .hero h1 { font-size: 36px; line-height: 1.08; } .herowrap--crowd .hero { padding-bottom: 84px; } .herowrap--crowd .hero__crowd { height: 64px; background-size: auto 64px; } /* Sections: tighter rhythm. */ .sec { padding: 44px 0; } .sec__head { margin-bottom: 20px; } .sec__head p { font-size: 16px; } /* Event cards (home, events, 404): compact row with a small colour tile, instead of a tall picture block. Whole card stays tappable. */ .ev.ev { flex-direction: row; align-items: stretch; border-radius: 18px; } .ev.ev .ev__blk { width: 92px; height: auto; min-height: 0; aspect-ratio: auto; flex: none; } .ev.ev .ev__blk::before { width: 60px; height: 60px; } .ev.ev .ev__blk::after, .ev.ev .ev__tag { display: none; } .ev.ev .ev__blk .ev__icon { font-size: 40px; } .ev.ev .ev__flag { top: auto; bottom: 8px; left: 6px; right: 6px; font-size: 10.5px; padding: 4px 6px; text-align: center; } .ev.ev .ev__bd { padding: 14px 16px; gap: 4px; min-width: 0; } .ev.ev .ev__date { font-size: 13px; } .ev.ev .ev__title { font-size: 17px; line-height: 1.25; } .ev.ev .ev__ven { font-size: 14px; } .ev.ev .ev__ft { padding-top: 8px; } .ev.ev .ev__buy { min-height: 44px; } .evlist .evgrid .ev.ev .ev__buy { height: 44px; padding: 0 14px 0 16px; } .grid.g4[role="list"], .evlist .evgrid { gap: 12px; } /* Home "Selling tickets?" block: keep the heading, buttons and booking fee box; drop the four feature cards (the organisers page has them in full). */ #sell .grid.g4 { display: none; } #sell .sec__btns { width: 100%; display: flex; flex-direction: column; gap: 10px; } #sell .sec__btns .btn { width: 100%; justify-content: center; } /* Small text links get a comfortable 44px tap height. */ .more { min-height: 44px; } .back-link { min-height: 44px; } /* Feature cards everywhere: icon beside the text, not above it. */ .ic, .g3 .ic { flex-direction: row; gap: 14px; padding: 18px; align-items: flex-start; } .ic .ico { margin: 0 !important; width: 46px; height: 46px; flex: none; } .ic .ico .ci { font-size: 28px; } .ic h3 { font-size: 16.5px; margin-bottom: 4px; } .ic p, .help .ic p { font-size: 14.5px; } .help .ic h3 { font-size: 16.5px; } .statuscard__done { display: inline-flex; align-items: center; min-height: 44px; } /* Organisers "How it works": number beside the heading. */ .steps > li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center; padding: 18px; } .steps__n { width: 40px; height: 40px; font-size: 17px; margin: 0 !important; } .steps h3 { font-size: 17px; margin: 0; } .steps p { grid-column: 1 / -1; margin-top: 10px; font-size: 15px; } /* Event page: date/doors/venue/organiser as a 2 x 2 grid; the decorative colour block is hidden unless the event has its own photo. */ .evfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 8px 12px; } .evfacts li { padding: 8px 4px; align-items: flex-start; gap: 10px; } .evfacts .ci { font-size: 22px; margin-top: 2px; } .evfacts span { font-size: 14.5px; } .evfacts small { font-size: 12px; } .evbanner:not(:has(img)) { display: none; } .evpage .evsec { padding-top: 28px; } /* Footer: shorter. Stripe badge hidden (the "Payments secured by Stripe" line stays), duplicate "Email us" link hidden (the address is shown above). */ .footer { padding-top: 40px; } .footer__top { gap: 28px; } .footer__tag { margin-top: 12px; font-size: 15px; } .footer__stripe { display: none; } .mobilenav__ctas .btn { min-height: 50px; font-size: 16px; } .footer__mail { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; } .footer__cols { gap: 24px 16px; } .footer__col h2 { margin-bottom: 4px; } .footer__col ul { gap: 0; } .footer__col li:has(a[href^="mailto:"]) { display: none; } .footer__col a, .footer .footer__linkbtn { display: flex; align-items: center; min-height: 40px; font-size: 15px; } .footer__small { margin-top: 24px; } /* Floating help button: a touch smaller so it covers less text. */ .helpbot__fab { width: 50px; height: 50px; } .helpbot__fab-ic .ci { font-size: 26px; } } /* ---------- Batch 27: age policy badge, checkout confirm, admin price form ---------- */ .agebadge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--tile); color: var(--p); font-size: 12px; font-weight: 800; letter-spacing: .01em; line-height: 1.3; white-space: nowrap; vertical-align: middle; text-transform: none; } .agebadge--adult { background: var(--p); color: #fff; } .agebadge--hero { padding: 6px 12px; font-size: 13px; background: #fff; color: var(--p); } .agebadge--hero.agebadge--adult { background: var(--g); color: var(--p); } .agebadge--card { margin-left: 8px; font-size: 11px; padding: 2px 8px; letter-spacing: 0; } .evbuy__age { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--lilac); font-size: 13.5px; color: var(--p); font-weight: 600; line-height: 1.4; } .evbuy__age .agebadge { flex: none; } .co__age { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--lilac); border: 2px solid transparent; font-size: 13.5px; color: var(--p); } .co__age p { margin: 0; line-height: 1.45; } .co__age p b { display: inline-block; margin-right: 4px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--p); color: #fff; font-size: 12px; } .co__agecheck { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; font-weight: 700; cursor: pointer; } .co__agecheck input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--g-ink); } .co__age.is-err { border-color: var(--red); background: var(--red-bg); } .adm-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .adm-twocol .adm-form { max-width: none; } .adm-pricelog { list-style: none; margin: 12px 0 0; padding: 0; font-size: 13px; color: var(--ink); } .adm-pricelog li { padding: 6px 0; border-bottom: 1px solid var(--line); } .adm-pricelog li span { color: var(--mute); margin-right: 6px; } @media (max-width: 860px) { .adm-twocol { grid-template-columns: 1fr; gap: 0; } } /* ==== Batch 28: admin email, unsubscribe, news opt-in, organiser email settings ==== */ /* Order page: optional news opt-in */ .done__news { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--lilac); text-align: left; } .done__newsform { display: flex; flex-direction: row !important; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; } .done__newscheck { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 260px; font-size: 14px; font-weight: 700; color: var(--p); cursor: pointer; line-height: 1.4; } .done__newscheck input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--g-ink); } .done__newscheck small { display: block; margin-top: 3px; font-weight: 500; font-size: 12.5px; color: var(--ink); } .done__newscheck small a { color: var(--p); text-decoration: underline; text-decoration-color: var(--g); } .done__newsok { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 14px; font-weight: 700; color: var(--g-ink); } .done__newsok svg { width: 18px; height: 18px; flex: none; } .done__newserr { margin: 8px 0 0; font-size: 13px; color: var(--red, #C0392B); font-weight: 700; } /* Unsubscribe page */ .unsub .statuscard__text b { color: var(--p); word-break: break-all; } /* Organiser email settings */ .notif { margin-top: 18px; } .notif--fixed { margin-top: 34px; } .notif__lead { margin: -4px 0 10px; font-size: 14px; color: var(--ink); } .notif__row { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 16px 18px; border: 2px solid var(--line); border-radius: 16px; margin-bottom: 10px; background: #fff; cursor: pointer; } .notif__row.is-fixed { cursor: default; background: var(--lilac); border-color: transparent; } .notif__txt { display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: var(--ink); line-height: 1.45; } .notif__txt b { font-size: 15.5px; color: var(--p); } .notif__on { flex: none; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--g-ink); font-size: 12.5px; font-weight: 800; white-space: nowrap; } .notif__sw { position: relative; flex: none; width: 50px; height: 30px; } .notif__sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } .notif__sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2); transition: background .15s; } .notif__sw i::after { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; } .notif__sw input:checked + i { background: var(--g-ink); } .notif__sw input:checked + i::after { transform: translateX(20px); } .notif__sw input:focus-visible + i { outline: 3px solid var(--g); outline-offset: 2px; } .notif__row:has(input:focus-visible) { border-color: var(--g); } /* Admin email */ .mx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mx-stat__s { display: block; margin-top: 4px; font-size: 12.5px; color: var(--mute); } .mx-limits { margin-top: 18px; } .mx-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; } .mx-steps li { display: flex; gap: 8px; align-items: center; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--lilac); color: var(--ink); font-size: 13.5px; font-weight: 700; } .mx-steps b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--p); font-size: 12.5px; } .mx-steps li.is-done { background: var(--p); color: #fff; } .mx-steps li.is-done b { background: var(--g); } .mx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 26px; align-items: start; } .mx-form { margin: 0; } body.admin .adm-form.mx-form { display: block; padding: 26px; } body.admin .mx-form .oform__field { margin: 0 0 16px; } body.admin .mx-form .oform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } body.admin .mx-form .oform__field input, body.admin .mx-form .oform__field select, body.admin .mx-form .oform__field textarea { background: #fff; } body.admin .mx-form .oform__submit { width: auto; margin-top: 4px; } body.admin .mx-form .adm-pay-note { margin-top: 10px; } .mx-field { border: 0; padding: 0; margin: 0 0 16px; } .mx-field legend { padding: 0; margin-bottom: 8px; font-size: 13.5px; font-weight: 800; color: var(--p); } .mx-radio { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; margin-bottom: 8px; font-size: 14px; color: var(--ink); cursor: pointer; line-height: 1.4; background: #fff; } .mx-radio input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--p); } .mx-radio b { display: block; color: var(--p); } .mx-radio:has(input:checked) { border-color: var(--p); } .mx-radio.is-off { opacity: .45; cursor: not-allowed; } .mx-event { margin-top: 6px; } .mx-event[hidden] { display: none; } .mx-count { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; background: var(--lilac); color: var(--p); } .mx-count:empty { display: none; } .mx-count.is-ok { background: #E8F8EC; color: var(--g-ink); } .mx-count.is-zero, .mx-count.is-err { background: #FDEDEC; color: #B03A2E; } .mx-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 16px; } .mx-preview { border: 2px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--lilac); } .mx-preview__bar { display: flex; gap: 10px; align-items: baseline; padding: 10px 14px; background: #fff; border-bottom: 2px solid var(--line); font-size: 12.5px; font-weight: 800; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; } .mx-preview__subj { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--p); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mx-preview iframe { display: block; width: 100%; height: 560px; border: 0; background: #fff; } .mx-send .adm-h { margin-top: 0; } .mx-send__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 16px; } .mx-send__go { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 14px; border-top: 2px solid var(--line); } .mx-send .btn[disabled] { opacity: .45; cursor: not-allowed; } .mx-ok { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; font-weight: 700; color: var(--g-ink); } .mx-ok svg { width: 16px; height: 16px; } .mx-link { margin-top: 12px; padding: 0; border: 0; background: none; color: var(--mute); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; } .mx-prog { margin-bottom: 26px; } .mx-bar { height: 14px; border-radius: 999px; background: var(--line); overflow: hidden; } .mx-bar i { display: block; height: 100%; background: var(--g-ink); border-radius: 999px; transition: width .4s; } .mx-prog__nums { margin: 12px 0 4px; font-size: 15px; color: var(--ink); } .mx-prog__nums b { color: var(--p); } .mx-prog__btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; } .mx-log { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 16px 0 0; font-size: 13.5px; } .mx-log dt { color: var(--mute); font-weight: 700; } .mx-log dd { margin: 0; color: var(--ink); } @media (max-width: 960px) { .mx-grid { grid-template-columns: 1fr; } .mx-side { position: static; } body.admin .mx-form .oform__row { grid-template-columns: 1fr; gap: 0; } .mx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .notif__row { padding: 14px; gap: 12px; } .mx-stats { grid-template-columns: 1fr; } .mx-preview iframe { height: 520px; } .done__newsform .btn { width: 100%; } } /* Potts the TickTap mascot: flat, CSS-only motion. Static pose when reduced motion is set. */ .potts{display:block;overflow:visible} .potts .pt-eyes,.potts [class^="pt-p"]{transform-box:fill-box;transform-origin:center} .potts--ondark .pt-body{fill:#553093}.potts--ondark .pt-arm{stroke:#553093} .potts--ondark .pt-hand{fill:#3B1D72}.potts--ondark .pt-handf{stroke:#3B1D72} /* hello: gentle bob, blink, wave */ .potts--hello .pt-bob{animation:pt-bob 3.2s ease-in-out infinite} .potts--hello .pt-eyes{animation:pt-blink 6.4s infinite} .potts--sad .pt-eyes{animation:pt-blink 4.5s infinite} .potts--hello .pt-wave{animation:pt-wave 3.2s ease-in-out infinite} @keyframes pt-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes pt-blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}} @keyframes pt-wave{0%,62%,100%{transform:rotate(-35deg)}12%,36%{transform:rotate(-12deg)}24%,48%{transform:rotate(-40deg)}} /* yay: arms up, bounce, green smoke puff. Plays once. */ .potts--yay .pt-bob{animation:pt-hop 1.5s cubic-bezier(.3,.7,.4,1) both} .potts--yay .pt-upl{animation:pt-upl 1.5s cubic-bezier(.3,.7,.4,1) both} .potts--yay .pt-upr{animation:pt-upr 1.5s cubic-bezier(.3,.7,.4,1) both} .potts--yay .pt-p0{animation:pt-puff 1.9s .35s ease-out both} .potts--yay .pt-p1{animation:pt-puff 1.9s .55s ease-out both} .potts--yay .pt-p2{animation:pt-puff 1.9s .75s ease-out both} @keyframes pt-hop{0%{transform:translateY(0)}18%{transform:translateY(6px)}38%{transform:translateY(-26px)}56%{transform:translateY(0)}68%{transform:translateY(-8px)}80%,100%{transform:translateY(0)}} @keyframes pt-upl{0%,14%{transform:rotate(-155deg)}40%{transform:rotate(-28deg)}55%{transform:rotate(-44deg)}66%{transform:rotate(-34deg)}78%,100%{transform:rotate(-38deg)}} @keyframes pt-upr{0%,14%{transform:rotate(155deg)}40%{transform:rotate(28deg)}55%{transform:rotate(44deg)}66%{transform:rotate(34deg)}78%,100%{transform:rotate(38deg)}} @keyframes pt-puff{0%{opacity:0;transform:translateY(40px) scale(.3)}25%{opacity:1;transform:translateY(8px) scale(.9)}60%{opacity:1;transform:translateY(-10px) scale(1)}100%{opacity:0;transform:translateY(-46px) scale(1.15)}} /* sad: slow sway from the base */ .potts--sad .pt-bob{transform-box:fill-box;transform-origin:50% 100%;animation:pt-sway 4.5s ease-in-out infinite} @keyframes pt-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}} /* ask (batch 30): question mark bobs and tilts, blink, raised hand sways. Mini = head crop for small round launchers. */ .potts .pt-q{transform-box:fill-box;transform-origin:50% 100%} .potts--ask .pt-q,.potts--askmini .pt-q{animation:pt-qbob 2.8s ease-in-out infinite} .potts--ask .pt-eyes,.potts--askmini .pt-eyes{animation:pt-blink 5.2s infinite} .potts--ask .pt-hand-up{animation:pt-handup 2.8s ease-in-out infinite} @keyframes pt-qbob{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-8px) rotate(7deg)}} @keyframes pt-handup{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(-14deg)}} .potts--ongreen .pt-q{stroke:#2A1261}.potts--ongreen .pt-q circle{fill:#2A1261} @media (prefers-reduced-motion:reduce){.potts *{animation:none!important}} /* ---- Placements ---- */ /* success.php + 404: Potts replaces the small icon tile. Fixed box, so no layout shift. */ .statuscard__potts { width: 88px; height: 104px; margin: 8px 0 18px; } .statuscard__potts .potts { width: 100%; height: 100%; } /* support.php hero: small waving Potts standing on the bottom edge, wide screens only. */ .pagehero--potts { position: relative; } .pagehero__potts { display: none; } @media (min-width: 900px) { .pagehero__potts { display: block; position: absolute; right: 48px; bottom: -6px; width: 128px; height: 147px; } .pagehero__potts .potts { width: 100%; height: 100%; } } /* ---------- Batch 30: TickTap Helper (Potts launcher, topics, search, full-height sheet on phones) ---------- */ html.helpbot-lock { overflow: hidden; } .helpbot { z-index: 90; } .helpbot__srlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; } /* Launcher: Potts asking, on a green circle */ .helpbot__fab { position: relative; z-index: 2; width: 60px; height: 60px; background: var(--g); color: var(--p); overflow: hidden; --a: #2A1261; --b: #2A1261; --c: #6AD583; } .helpbot__fab:hover { background: var(--g-hover); } .helpbot__fab:focus-visible { outline: 3px solid var(--p) !important; outline-offset: 3px; } .helpbot__fab-ic { width: 100%; height: 100%; display: grid; place-items: center; } .helpbot__fab-ic .potts { width: 100%; height: 100%; } .helpbot__fab-ic--close .ci { font-size: 22px; } .helpbot.is-open .helpbot__fab { background: var(--p); color: #fff; --a: #fff; --b: #fff; } .helpbot.is-open .helpbot__fab:hover { background: var(--p2); } /* Scrim behind the panel so it has a clear edge without shadows or borders */ .helpbot__scrim { position: fixed; inset: 0; background: rgba(26,11,64,.42); opacity: 0; visibility: hidden; } .helpbot.is-open .helpbot__scrim { opacity: 1; visibility: visible; } /* Panel */ .helpbot__panel { z-index: 1; bottom: 76px; width: min(400px, calc(100vw - 32px)); height: min(640px, calc(100vh - 120px)); max-height: none; border-radius: 22px; background: var(--lilac); } .helpbot__head { gap: 12px; padding: 14px 14px 14px 16px; } .helpbot__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--g); overflow: hidden; flex: none; } .helpbot__avatar .potts { width: 100%; height: 100%; } .helpbot__titles { flex: 1; min-width: 0; } .helpbot__title { font-size: 17px; line-height: 1.2; font-weight: 800; color: #fff; margin: 0; } .helpbot__title:focus { outline: none; } .helpbot__title:focus-visible { outline: 3px solid var(--g) !important; outline-offset: 2px; } .helpbot__head .helpbot__sub { margin: 2px 0 0; font-size: 13px; opacity: .8; color: #fff; } .helpbot__x { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.1); flex: none; --a: #fff; --b: #fff; } .helpbot__x:hover { background: rgba(255,255,255,.2); } .helpbot__x .ci { font-size: 20px; } .helpbot__search { position: relative; padding: 12px 14px; background: #fff; } .helpbot__searchic { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); display: grid; color: var(--p); --a: #2A1261; --b: #2F9E52; pointer-events: none; } .helpbot__searchic .ci { font-size: 20px; } .helpbot__search input { width: 100%; min-height: 52px; padding: 12px 16px 12px 46px; border-radius: 999px; font-size: 16px; } .helpbot__body { padding: 16px 14px 18px; gap: 12px; background: var(--lilac); overscroll-behavior: contain; } .helpbot__hi { margin: 0; font-size: 15px; line-height: 1.5; color: var(--p); font-weight: 600; } .helpbot__h { margin: 4px 0 0; font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); } .helpbot__h--big { text-transform: none; letter-spacing: 0; font-size: 19px; line-height: 1.3; color: var(--p); margin: 0; } .helpbot__h:focus { outline: none; } /* Fan / organiser switch */ .helpbot__aud { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: var(--tile); } .helpbot__audbtn { min-height: 44px; padding: 6px 10px; border-radius: 999px; font-weight: 800; font-size: 14px; color: var(--p); line-height: 1.2; } .helpbot__audbtn:hover { background: #fff; } .helpbot__audbtn[aria-pressed="true"] { background: var(--p); color: #fff; } /* Quick topics */ .helpbot__chips { display: grid; grid-template-columns: 1fr; gap: 8px; } .helpbot__chip { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 16px 6px 8px; border-radius: 999px; background: var(--g); color: var(--p); font-weight: 800; font-size: 15px; text-align: left; --a: #2A1261; --b: #fff; --c: #6AD583; } .helpbot__chip:hover { background: var(--g-hover); } .helpbot__chip .helpbot__ic { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; --b: #2F9E52; } .helpbot__chip .ci { font-size: 24px; } /* Question rows */ .helpbot__qs { gap: 8px; } .helpbot .helpbot__q { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px 10px 16px; border-radius: 16px; background: #fff; font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--p); text-align: left; --a: #2A1261; --b: #2F9E52; } .helpbot .helpbot__q:hover { background: var(--tile); } .helpbot__qt { flex: 1; } .helpbot__tag { flex: none; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--tile); color: var(--ink); } .helpbot__q .helpbot__ic, .helpbot__link .helpbot__ic { display: grid; flex: none; } .helpbot__q .ci { font-size: 18px; } .helpbot__more { align-self: flex-start; min-height: 44px; font-weight: 800; font-size: 14px; color: var(--g-ink); text-decoration: underline; text-underline-offset: 3px; } .helpbot__more:hover { color: var(--p); } .helpbot .helpbot__back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px 0 8px; margin-left: -4px; border-radius: 999px; font-weight: 800; font-size: 14px; color: var(--p); --a: #2A1261; --b: #2A1261; } .helpbot .helpbot__back:hover { background: var(--tile); } .helpbot__back .ci { font-size: 18px; } /* Answer */ .helpbot__ans { background: #fff; border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .helpbot__ans p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--p); } .helpbot__links { display: flex; flex-direction: column; gap: 8px; } .helpbot__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 20px; border-radius: 999px; font-weight: 800; font-size: 15px; color: var(--p) !important; background: #fff; text-decoration: none !important; --a: #2A1261; --b: #2F9E52; } .helpbot__link:hover { background: var(--tile); } .helpbot__link--main { background: var(--g); --b: #2A1261; } .helpbot__link--main:hover { background: var(--g-hover); } .helpbot__link .ci { font-size: 20px; } .helpbot__still { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); } .helpbot__still a, .helpbot__none a:not(.helpbot__link) { color: var(--p) !important; font-weight: 800; text-decoration: underline; } .helpbot__none { display: flex; flex-direction: column; gap: 10px; } .helpbot__none p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--p); } .helpbot__none .helpbot__h { text-transform: none; letter-spacing: 0; font-size: 17px; } /* Always-there routes */ .helpbot__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); background: #fff; text-align: left; } .helpbot__route { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 12px; border-radius: 999px; background: var(--tile); color: var(--p) !important; font-weight: 800; font-size: 14px; text-decoration: none !important; --a: #2A1261; --b: #2F9E52; } .helpbot__route:hover { background: #E6DFF8; } .helpbot__route .ci { font-size: 22px; flex: none; } .helpbot__route[hidden] { display: none; } /* Phones: full-height sheet over the whole page */ @media (max-width: 640px) { .helpbot__fab { width: 56px; height: 56px; } .helpbot.is-open .helpbot__fab { visibility: hidden; } .helpbot__panel { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; border-radius: 0; transform: translateY(16px); } .helpbot.is-open .helpbot__panel { transform: none; } .helpbot__head { padding: calc(12px + env(safe-area-inset-top)) 12px 12px 14px; } .helpbot__search input, .helpbot__chip, .helpbot .helpbot__q, .helpbot__link, .helpbot__route { min-height: 50px; } .helpbot__chips { grid-template-columns: 1fr; } } @media (min-width: 641px) { .helpbot__chips { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: no-preference) { .helpbot__panel { transition: opacity .16s ease, transform .16s ease, visibility .16s; } .helpbot__scrim { transition: opacity .16s ease, visibility .16s; } } /* batch 31: home hero subline. Two clean lines from 768px up (one sentence each); balanced wrapping on phones; hyphenated words never split. */ .hero__sub { text-wrap: balance; } .hero__sub .nw { white-space: nowrap; } @media (min-width: 768px) { .hero__sub { max-width: 720px; } .hero__sub > span { display: block; } }