/* Shared layout + site theme tokens. Site default = light / purple (same tokens as event scheme `light-purple`). Public event/series pages override via applyColorScheme() on . */ :root { /* One measure for every page. Widths were set page by page and ranged from 400px on a ticket to 1180px on an event, so no two screens lined up with each other. Change it here, not in twenty stylesheets. */ --ot-measure: 1000px; --ot-measure-pad: 32px; --ot-gutter: 20px; --ot-gutter-sm: 16px; /* The site header's height. Anything else that sticks to the top has to clear it, and three places need the same number, so it lives here rather than being typed out three times and drifting. */ --ot-header-h: 60px; /* Surface - white base */ --ot-bg: #ffffff; --ot-surface: #ffffff; --ot-surface-2: #f4f4f5; --ot-text: #111827; --ot-muted: #374151; --ot-faint: #4b5563; --ot-border: #e5e7eb; --ot-border-strong: #d1d5db; /* Control boundary, held apart from the decorative borders above: a field edge is the only thing identifying the input, so it needs 3:1 (WCAG 1.4.11). */ --ot-field-border: #6b7280; --ot-input-bg: #ffffff; --ot-chip: rgba(124, 58, 237, 0.10); --ot-success: #047857; /* Success as a *surface*, held apart from --ot-success above, which is a text colour on a light ground and correct as it is. #047857 behind the #06281c label these buttons use is 2.88:1 - under even the 3:1 floor for large text, and the reason the hover state was the only legible one. This is 9.45:1, and the hover below is 8.10:1, so the affordance does not cost the contrast. */ --ot-success-surface: #4be0ab; --ot-success-surface-hover: #38d19b; --ot-success-ink: #06281c; --ot-danger: #b91c1c; --ot-danger-bg: #fef2f2; --ot-color-scheme: light; --ot-skel-mid: #e5e7eb; --ot-shadow: 0 8px 28px rgba(15, 23, 42, 0.08); /* Elevation, as a scale rather than a value per component. Each level is layered: a hairline ring that draws the edge, a tight contact shadow, and a broad ambient one. A single blur reads as a sticker; two read as an object above a surface. --ot-shadow above is left exactly as it was. Every page that uses it keeps the look it has - these are additive, and only what opts in moves. */ --ot-elev-1: 0 0 0 1px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.07); --ot-elev-2: 0 0 0 1px rgba(16, 24, 40, 0.05), 0 2px 6px rgba(16, 24, 40, 0.06), 0 12px 24px -8px rgba(16, 24, 40, 0.18); --ot-elev-3: 0 0 0 1px rgba(16, 24, 40, 0.04), 0 2px 6px rgba(16, 24, 40, 0.06), 0 22px 44px -12px rgba(16, 24, 40, 0.28); /* Radius, tied to size: the bigger the surface, the rounder its corner. A 9px button inside a 16px card is the kind of mismatch that reads as an accident, because it is one. */ --ot-r-sm: 8px; /* controls under 40px: chips, small buttons */ --ot-r-md: 12px; /* fields, buttons, list rows */ --ot-r-lg: 16px; /* cards, popovers */ --ot-r-xl: 20px; /* modal sheets */ /* One duration and one easing, so a popover and a sheet feel like the same product opening two different things. */ --ot-t-pop: 120ms; --ot-t-sheet: 240ms; --ot-ease: cubic-bezier(0.22, 1, 0.36, 1); /* The scrim. Lighter than a blackout, and blurred, so the page behind is pushed back rather than hidden - you can still see what you were working on, which is half of what tells you the sheet is temporary. */ --ot-scrim: rgba(9, 14, 24, 0.38); --ot-icon-well: #f3f4f6; /* Accent - light purple */ --ot-link: #5b21b6; --ot-link-hover: #4c1d95; --ot-cta: #ddd6fe; --ot-cta-hover: #c4b5fd; --ot-cta-ink: #1e1b4b; --ot-accent: #7c3aed; --ot-accent-soft: rgba(124, 58, 237, 0.10); --ot-accent-veil: rgba(124, 58, 237, 0.58); --ot-header: linear-gradient(180deg, #f5f3ff 0%, #ffffff 72%); --ot-focus-ring: #7c3aed; /* Cards / subscribe tiles */ --ot-card-0: #ffffff; --ot-card-1: #fafafa; --ot-card-2: #f8fafc; --ot-card-3: #f9fafb; --ot-card-4: #f5f5f4; --ot-card-ink: #111827; --ot-card-muted: #374151; --ot-card-border: #e5e7eb; --ot-subscribe-card: linear-gradient(145deg, #ffffff 0%, #faf5ff 48%, #f5f3ff 100%); /* Legacy aliases */ --ot-pop: var(--ot-cta); --ot-pop-hover: var(--ot-cta-hover); --ot-pop-ink: var(--ot-cta-ink); } /* Make all form controls use a white fill for consistency across the app. Uses !important to override inline styles that previously set var(--ot-surface). */ /* :not(.ne-toggle) - a switch is an input with appearance:none whose whole look is its own background and border, and this rule sets both with !important, so it painted the track white with a hairline round it and left the knob invisible on top. Nothing else here needs excluding: the arms below name text-like types, and a switch is a checkbox. */ input:not(.ne-toggle):not(.ot-toggle), textarea, select, .es-input, .es-modal input, .tk-modal input, .pass-actions input, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] { background: var(--ot-input-bg, #ffffff) !important; color: var(--ot-text, #111827) !important; border: 1px solid var(--ot-field-border, #6b7280) !important; } input::placeholder, textarea::placeholder { color: var(--ot-faint, #4b5563) !important; } /* Invalid fields. The rule above sets every input border with !important, which silently defeated the inline red "bad" border each page was already computing , so an invalid field looked identical to a valid one. Driving the error state off aria-invalid fixes it in one place and keeps the marker and the assistive -tech signal in step. The ring is deliberate: border colour alone is a single cue, and a shape change carries for anyone who cannot separate red from grey. */ /* Scoped by [data-ot-surface] as well as bare, because some pages carry their own `[data-ot-surface="light"] input { border-color: ... !important }` in an inline