/* Ticket Talkies: the near-black brand, from the 6 September 2026 handover. * * Tokens are taken from that handover: background #08080B, surfaces #111116, * text #F7F7FB, muted #A8A8B3, cyan #43E7E0, blue #57A5FF, violet #AE75FF. * * This now dresses the organiser screens AND the two marketing pages, index * and pricing, which a partner reviewed and preferred to the older warm-paper * look. It deliberately still does not touch the buyer flow: event, my-ticket, * wallet and confirm-free stay on site.css. Those pages are selling London * Sangamam right now, and a restyle is not something to do to a page mid * on-sale. Two brands for a while is the lesser problem. * * Every screen using this sheet needs class="tt" on . */ /* The brand faces, served from this origin. See the note on --tt-display. swap, not block: the page must be readable while 60 KB arrives, and on the buyer pages that 60 KB is between somebody and a ticket. */ @font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "DM Sans"; src: url("/assets/fonts/dm-sans.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; } :root { --tt-bg: #08080b; --tt-surface: #111116; --tt-surface-2: #17171e; --tt-line: #26262f; --tt-line-strong: #34343f; --tt-text: #f7f7fb; --tt-muted: #a8a8b3; --tt-cyan: #43e7e0; --tt-blue: #57a5ff; --tt-violet: #ae75ff; --tt-grad: linear-gradient(97deg, #43e7e0 0%, #57a5ff 52%, #ae75ff 100%); --tt-warn: #ffcb6b; --tt-warn-bg: #241d0e; /* Named because site.css needs the same values, and a colour that exists as a literal in two sheets is a colour that drifts apart. */ --tt-text-soft: #cfcfd8; /* between text and muted, for body copy */ --tt-hover: #1e1e26; /* a quiet control under the pointer */ --tt-hover-line: #43434f; --tt-placeholder: #6a6a76; --tt-on-accent: #08080b; /* ink on the gradient, which is a bright field */ /* Status colours, and nothing else. They were named --tt-coral and --tt-lime and used as decoration: a section eyebrow, a card date, a border, a button gradient. Section 02 of the 6 September handover says plainly to add no coral or lime brand accents, and the prototype enforces it, product.css loads after styles.css and sets both to var(--cyan). The names are the fix. There is no longer a token here to reach for when a heading needs a bit of colour, only one that says "this went wrong" and one that says "this is fine", and a screen that cannot tell those two apart is not readable. Decoration is cyan, blue and violet. */ --tt-bad: #ff5b6c; --tt-bad-soft: #ff8894; --tt-good: #ceff5a; /* Manrope and DM Sans are the brand faces, served by this site from assets/fonts. Self-hosted rather than pulled from Google: a font host sees every visitor to every page, which would be a new processor in front of buyers, and the privacy notice names all four we currently use. Two variable files, 60 KB together, cover every weight the design asks for. */ --tt-display: "Manrope", "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --tt-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --tt-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; --tt-r: 14px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.tt { margin: 0; background: var(--tt-bg); color: var(--tt-text); font: 16px/1.6 var(--tt-body); min-height: 100vh; display: flex; flex-direction: column; /* Two soft brand glows. Cheap gradients, no image request. */ background-image: radial-gradient(circle at 8% -4%, rgba(67, 231, 224, .10), transparent 38%), radial-gradient(circle at 96% 2%, rgba(174, 117, 255, .12), transparent 42%); background-attachment: fixed; } .tt-wrap { width: 100%; max-width: 62rem; margin: 0 auto; padding: 0 1.25rem; } .tt-wrap-narrow { max-width: 27rem; } .tt h1, .tt h2, .tt h3 { font-family: var(--tt-display); line-height: 1.14; letter-spacing: -.02em; margin: 0 0 .5rem; text-wrap: balance; } .tt h1 { font-size: clamp(1.75rem, 4.4vw, 2.5rem); font-weight: 800; } .tt h2 { font-size: 1.25rem; font-weight: 700; } .tt h3 { font-size: 1rem; font-weight: 700; } .tt p { margin: 0 0 1rem; } .tt a { color: var(--tt-cyan); } .tt-muted { color: var(--tt-muted); } .tt-small { font-size: .875rem; } .tt-tiny { font-size: .78rem; } .tt-mono { font-family: var(--tt-mono); letter-spacing: .03em; } [hidden] { display: none !important; } .tt-eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tt-cyan); margin: 0 0 .6rem; } /* ------------------------------------------------- the preview banner -- */ /* Loud on purpose. Nobody should mistake these for a working sign-in. */ .tt-preview { background: var(--tt-warn-bg); border-bottom: 1px solid #3a2f14; color: var(--tt-warn); font-size: .8rem; text-align: center; padding: .55rem 1.25rem; } .tt-preview strong { font-weight: 800; } /* ------------------------------------------------------------ header -- */ .tt-head { border-bottom: 1px solid var(--tt-line); } .tt-head .tt-wrap { display: flex; align-items: center; gap: 1rem; padding-block: 1rem; } .tt-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--tt-text); font-family: var(--tt-display); font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; } .tt-brand span:last-child { color: var(--tt-blue); } .tt-mark { width: 1.6rem; height: 1.6rem; border-radius: 6px; flex: none; background: var(--tt-grad); } .tt-by { font-family: var(--tt-body); font-size: .68rem; font-weight: 500; color: var(--tt-muted); letter-spacing: .02em; display: block; margin-top: -.2rem; } .tt-head nav { margin-left: auto; display: flex; gap: 1.2rem; font-size: .92rem; } .tt-head nav a { color: var(--tt-muted); text-decoration: none; } .tt-head nav a:hover { color: var(--tt-text); } /* ------------------------------------------------------------- cards -- */ .tt-main { flex: 1 1 auto; padding: 2.5rem 0 4rem; } .tt-card { background: var(--tt-surface); border: 1px solid var(--tt-line); border-radius: var(--tt-r); padding: 1.5rem; } .tt-card + .tt-card { margin-top: 1.1rem; } .tt-card-sunk { background: var(--tt-surface-2); } .tt-note { border-left: 3px solid var(--tt-blue); background: rgba(87, 165, 255, .08); padding: .85rem 1rem; border-radius: 0 8px 8px 0; font-size: .9rem; color: var(--tt-muted); } .tt-note strong { color: var(--tt-text); } /* ----------------------------------------------------------- buttons -- */ .tt-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font: inherit; font-weight: 700; line-height: 1; min-height: 48px; padding: .85rem 1.2rem; border-radius: 10px; border: 1px solid var(--tt-line-strong); background: var(--tt-surface-2); color: var(--tt-text); cursor: pointer; text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .06s ease; } .tt-btn:hover { background: var(--tt-hover); border-color: var(--tt-hover-line); } .tt-btn:active { transform: translateY(1px); } .tt-btn-block { width: 100%; } /* The one gradient action per screen. Dark ink on a bright field reads better here than white, and clears contrast comfortably. */ .tt-btn-primary { background: var(--tt-grad); border-color: transparent; color: var(--tt-on-accent); } .tt-btn-primary:hover { background: var(--tt-grad); filter: brightness(1.08); } /* Same reason as .btn-signal in site.css: at 45 per cent the gradient is still the loudest thing on a near-black card. */ .tt-btn-primary:disabled, .tt-btn-primary[aria-disabled="true"] { background: var(--tt-surface-2); color: var(--tt-muted); border-color: var(--tt-line); } .tt-btn svg { flex: none; } /* An anchor that looks like a button must read like one. ".tt a" sets the cyan link colour and outranks .tt-btn on specificity, which left "Create an event" as pale text on its own gradient. */ .tt a.tt-btn { color: var(--tt-text); } .tt a.tt-btn-primary { color: var(--tt-on-accent); } /* ------------------------------------------------------------- forms -- */ .tt-field { margin-bottom: 1.1rem; } .tt-field:last-child { margin-bottom: 0; } .tt-field label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .4rem; } .tt-field .tt-hint { color: var(--tt-muted); font-weight: 400; } .tt-input, .tt-select, .tt-textarea { width: 100%; font: inherit; color: var(--tt-text); background: var(--tt-bg); border: 1px solid var(--tt-line-strong); border-radius: 10px; padding: .8rem .9rem; min-height: 48px; } .tt-textarea { min-height: 6.5rem; resize: vertical; } .tt-input::placeholder, .tt-textarea::placeholder { color: var(--tt-placeholder); } .tt-input:focus-visible, .tt-textarea:focus-visible, .tt-select:focus-visible, .tt-btn:focus-visible, .tt a:focus-visible { outline: 2px solid var(--tt-cyan); outline-offset: 2px; } .tt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .tt-or { display: flex; align-items: center; gap: .9rem; color: var(--tt-muted); font-size: .8rem; margin: 1.25rem 0; } .tt-or::before, .tt-or::after { content: ""; height: 1px; background: var(--tt-line); flex: 1 1 auto; } /* --------------------------------------------------- ticket tier rows -- */ .tt-tier { display: grid; grid-template-columns: 1fr 7rem 7rem auto; gap: .75rem; align-items: end; padding: 1rem; border: 1px solid var(--tt-line); border-radius: 10px; background: var(--tt-surface-2); } .tt-tier + .tt-tier { margin-top: .75rem; } .tt-tier .tt-field { margin-bottom: 0; } .tt-remove { min-height: 48px; min-width: 48px; border: 1px solid var(--tt-line-strong); border-radius: 10px; background: transparent; color: var(--tt-muted); font: inherit; font-size: 1.1rem; cursor: pointer; } .tt-remove:hover { color: var(--tt-text); border-color: #43434f; } /* -------------------------------------------------------- the summary -- */ .tt-summary { position: sticky; top: 1.25rem; } .tt-summary dl { margin: 0; display: grid; gap: .55rem; } .tt-summary .tt-line { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; padding-bottom: .55rem; border-bottom: 1px solid var(--tt-line); } .tt-summary .tt-line:last-of-type { border-bottom: 0; padding-bottom: 0; } .tt-summary dt { color: var(--tt-muted); } .tt-summary dd { margin: 0; font-weight: 700; text-align: right; } .tt-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; } /* -------------------------------------------------------------- feet -- */ .tt-foot { border-top: 1px solid var(--tt-line); padding: 1.5rem 0 2.5rem; font-size: .82rem; color: var(--tt-muted); } .tt-foot a { color: var(--tt-muted); } @media (max-width: 52rem) { .tt-grid-2 { grid-template-columns: minmax(0, 1fr); } .tt-summary { position: static; } .tt-tier { grid-template-columns: 1fr 1fr; } .tt-tier .tt-remove { grid-column: 2; justify-self: end; } } @media (max-width: 30rem) { .tt-row { grid-template-columns: 1fr; } .tt-head nav { gap: .9rem; font-size: .85rem; } } @media (prefers-reduced-motion: reduce) { .tt-btn, .tt-input, .tt-textarea { transition: none; } .tt-btn:active { transform: none; } } /* ------------------------------------------------- your events list -- */ /* The signed-in home. An organiser lands here, not on a blank form: the first question they have is "how is my event doing", not "what shall I make". */ .tt-events { display: grid; gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; } .tt-event { background: var(--tt-surface); border: 1px solid var(--tt-line); border-radius: var(--tt-r); padding: 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.5rem; align-items: start; } .tt-event h3 { margin: .2rem 0 .1rem; font-size: 1.2rem; line-height: 1.25; } .tt-event-when { color: var(--tt-muted); font-size: .9rem; } /* Status is a fact about the event, so it is set in words as well as colour. Colour alone would leave it unreadable to anyone who cannot separate these three hues. */ .tt-pill { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 999px; border: 1px solid var(--tt-line-strong); color: var(--tt-muted); } .tt-pill-live { color: #0a0a0d; background: var(--tt-cyan); border-color: transparent; } .tt-pill-draft { color: var(--tt-warn); background: var(--tt-warn-bg); border-color: #4a3c17; } /* How full the room is, at a glance. */ .tt-meter { height: 6px; border-radius: 999px; background: var(--tt-surface-2); border: 1px solid var(--tt-line); overflow: hidden; margin: .7rem 0 .4rem; max-width: 22rem; } .tt-meter > span { display: block; height: 100%; background: var(--tt-grad); } .tt-event-figs { font-size: .9rem; color: var(--tt-muted); } .tt-event-figs strong { color: var(--tt-text); font-variant-numeric: tabular-nums; } .tt-event-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; } .tt-event-actions .tt-btn { min-height: 44px; padding: .6rem .9rem; font-size: .9rem; } .tt-head-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; } @media (max-width: 46rem) { .tt-event { grid-template-columns: minmax(0, 1fr); } .tt-event-actions { justify-content: flex-start; } .tt-event-actions .tt-btn { flex: 1 1 auto; } } /* ------------------------------------------- states the pages now have -- */ /* A button that reads as a link. Used for sign out and for "try another address": both are actions, not navigation, so they must be buttons for a keyboard and a screen reader even though they should not look like one. */ .tt-linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--tt-cyan); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .tt-linkish:hover { color: var(--tt-text); } .tt-linkish:focus-visible { outline: 2px solid var(--tt-cyan); outline-offset: 3px; } /* Something went wrong and the person needs to read it. Amber rather than red: nothing here is a catastrophe, and red on this dark ground vibrates. */ .tt-bad { margin: 0 0 1.1rem; padding: .85rem 1rem; border: 1px solid #4a3c17; border-left: 3px solid var(--tt-warn); border-radius: 10px; background: var(--tt-warn-bg); color: var(--tt-text); font-size: .93rem; line-height: 1.5; } /* The first screen a new organiser sees. Centred and roomy on purpose: an empty list that looks like a broken list is the fastest way to lose somebody in the first minute. */ .tt-empty { margin-top: 1.5rem; padding: 3rem 1.5rem; text-align: center; background: var(--tt-surface); border: 1px dashed var(--tt-line-strong); border-radius: var(--tt-r); } .tt-empty h2 { margin: 0 0 .6rem; } .tt-empty p { max-width: 34rem; margin: 0 auto .8rem; } .tt-empty .tt-btn { margin-top: 1rem; } /* A disabled button has to look disabled. Google and Apple sit here switched off until the OAuth work lands, and with no styling they read as working buttons that silently do nothing when tapped, which is worse than not showing them at all. */ .tt-btn:disabled { opacity: .45; cursor: not-allowed; background: var(--tt-surface-2); border-style: dashed; } .tt-btn:disabled:hover { background: var(--tt-surface-2); border-color: var(--tt-line-strong); } /* ============================================================================ Marketing pages: index and pricing. Added when those two moved off site.css onto this brand. The organiser screens above are forms; these are read, so they need a wider measure, a bigger first button and a few components the forms never had. ========================================================================= */ .tt-wrap-wide { max-width: 72rem; } .tt-center { text-align: center; } .tt-grow { flex: 1 1 auto; } /* The lead paragraph under an h1. Larger than body text, not as large as a heading, which is the gap the marketing pages read into. */ .tt-lead { font-size: 1.12rem; color: var(--tt-muted); max-width: 44rem; } /* One size up for the first action on a page somebody is deciding on, as opposed to a form they are already committed to filling in. */ .tt-btn-lg { min-height: 54px; padding: 1rem 1.6rem; font-size: 1.02rem; } /* Auto-fitting card grid. Used for the six reasons on the home page and the three money columns on pricing, so the count can change without a new rule. */ .tt-cards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .tt-cards-tight { gap: .9rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } /* ------------------------------------------------- the ticket callout -- */ /* A ticket with a torn stub. The perforation is a dashed border rather than an image, and the notches are two circles in the page background colour, so it costs no request and survives a colour change. */ .tt-ticket { display: grid; grid-template-columns: minmax(0, 1fr) 12rem; background: var(--tt-surface); border: 1px solid var(--tt-line); border-radius: var(--tt-r); overflow: hidden; position: relative; } .tt-ticket::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tt-grad); } .tt-ticket-body { padding: 1.5rem 1.5rem 1.5rem 1.75rem; } .tt-ticket-stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: 1.5rem 1rem; background: var(--tt-surface-2); border-left: 2px dashed var(--tt-line-strong); text-align: center; } .tt-ref { font-family: var(--tt-display); font-weight: 800; line-height: 1.05; background: var(--tt-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ------------------------------------------------------ the fee bill -- */ /* An itemised bill rather than a row of pricing cards. It reads like something a treasurer would recognise, and it is deliberately nothing like the slider-and-cards every competitor uses. Class names match what calculator.js writes, so the two must change together. */ .tt-bill { font-family: var(--tt-mono); font-size: .95rem; } .tt-bill .bill-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .55rem 0; border-bottom: 1px dotted var(--tt-line); align-items: baseline; } .tt-bill .who { font-family: var(--tt-body); } .tt-bill .how { display: block; font-size: .74rem; color: var(--tt-muted); } .tt-bill .bill-row.ours { border-bottom: 0; padding-top: 1rem; } .tt-bill .bill-row.ours .who { font-weight: 700; font-size: 1.05rem; } .tt-bill .bill-row.ours .amount { font-size: 1.6rem; font-weight: 800; font-family: var(--tt-display); background: var(--tt-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .tt-savings { background: rgba(67, 231, 224, .10); border: 1px solid rgba(67, 231, 224, .28); color: var(--tt-cyan); border-radius: 10px; padding: .8rem 1rem; font-weight: 700; margin-top: .9rem; font-size: .92rem; } /* ------------------------------------------------------- price table -- */ .tt-data { width: 100%; border-collapse: collapse; font-size: .92rem; } .tt-data th, .tt-data td { padding: .6rem 0; border-bottom: 1px solid var(--tt-line); text-align: left; } .tt-data tr:last-child th, .tt-data tr:last-child td { border-bottom: 0; } .tt-data th { font-weight: 400; color: var(--tt-muted); } .tt-data .num { text-align: right; font-family: var(--tt-mono); font-weight: 700; } /* A second note colour. The blue one states a fact; this one is an offer, and they sit next to each other on the pricing page. */ .tt-note-good { border-left-color: var(--tt-cyan); background: rgba(67, 231, 224, .07); } @media (max-width: 40rem) { /* The stub goes under the body rather than squashing to nothing. */ .tt-ticket { grid-template-columns: minmax(0, 1fr); } .tt-ticket-stub { border-left: 0; border-top: 2px dashed var(--tt-line-strong); flex-direction: row; gap: .6rem; } }