/* ========================================================================== Open Tickets — Design tokens -------------------------------------------------------------------------- Every colour, font, size, radius, shadow and timing used by theme.css lives here. To retheme the site, edit THIS file only. 1. Brand & palette 2. Typography 3. Shape, depth & motion 4. Layout 5. Bootstrap 5.3 bridge (maps BS variables onto the tokens above) ========================================================================== */ :root { /* ---- 1. Brand & palette --------------------------------------------- */ /* Chrome (navigation, hero, footer). Dark so the white logo reads. */ --ot-ink: #0a0d24; /* navy-black, from the logo navy #050857 */ --ot-ink-rgb: 10, 13, 36; --ot-navy: #050857; /* logo-navy.svg */ --ot-glow-rgb: 38, 54, 168; /* royal-navy glows behind dark bands */ --ot-ink-2: #121734; --ot-ink-3: #1c2350; --ot-ink-line: rgba(255, 255, 255, .10); /* Primary: brand gold. */ --ot-primary: #d9a63f; --ot-primary-rgb: 217, 166, 63; --ot-primary-hover: #c49232; --ot-primary-soft: #f8efda; --ot-primary-on-dark: #f1cd75; /* light gold for text/accents on ink */ --ot-primary-text: #8a6414; /* deep gold: links & text on light surfaces (AA) */ --ot-on-primary: #17130a; /* ink text on gold buttons */ /* Accent: the red that has always marked event dates. */ --ot-accent: #e5484d; --ot-accent-rgb: 229, 72, 77; --ot-accent-on-dark: #ff8a8d; --ot-accent-soft: #fdecec; /* Logo (official artwork, recoloured via these two tokens) */ --ot-logo-color: var(--ot-text-on-dark); --ot-logo-accent: var(--ot-primary); /* gold ticket perforation */ /* Status badges ("Just announced", "Sold out") */ --ot-highlight: #f1cd75; --ot-on-highlight: #14120a; /* Status */ --ot-success: #1f9d6b; --ot-success-rgb: 31, 157, 107; --ot-info: #2f6fd6; --ot-info-soft: #eef3fd; --ot-warning: #c98a12; /* Page surfaces (warm off-white instead of the old grey). */ --ot-bg: #f6f5f1; --ot-surface: #ffffff; --ot-surface-2: #efede7; --ot-border: #e3e0d8; --ot-border-strong: #cfcbc1; /* Text */ --ot-text: #14172a; --ot-text-muted: #5d6175; --ot-text-subtle: #8a8d9b; --ot-text-on-dark: #f4f3ee; --ot-text-on-dark-muted: rgba(244, 243, 238, .68); --ot-text-on-dark-subtle: rgba(244, 243, 238, .45); /* ---- 2. Typography --------------------------------------------------- */ --ot-font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --ot-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --ot-fw-display: 700; /* headings, dates, big numbers */ --ot-tracking-display: .01em; --ot-fs-xs: .75rem; /* 12 */ --ot-fs-sm: .875rem; /* 14 */ --ot-fs-base: 1rem; /* 16 */ --ot-fs-md: 1.0625rem; /* 17 */ --ot-fs-lg: 1.25rem; /* 20 */ --ot-fs-xl: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem); --ot-fs-2xl: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); --ot-fw-regular: 400; --ot-fw-medium: 500; --ot-fw-semibold: 600; --ot-fw-bold: 700; --ot-lh-tight: 1.15; --ot-lh-base: 1.6; --ot-tracking-caps: .12em; /* ---- 3. Shape, depth & motion --------------------------------------- */ --ot-radius-sm: 8px; --ot-radius: 14px; --ot-radius-lg: 20px; --ot-radius-pill: 999px; --ot-shadow-sm: 0 1px 2px rgba(var(--ot-ink-rgb), .06), 0 1px 1px rgba(var(--ot-ink-rgb), .04); --ot-shadow: 0 1px 2px rgba(var(--ot-ink-rgb), .05), 0 6px 16px -6px rgba(var(--ot-ink-rgb), .12); --ot-shadow-lg: 0 2px 4px rgba(var(--ot-ink-rgb), .06), 0 18px 40px -12px rgba(var(--ot-ink-rgb), .22); --ot-shadow-hero: 0 30px 60px -20px rgba(0, 0, 0, .65); --ot-ring: 0 0 0 3px rgba(var(--ot-primary-rgb), .35); --ot-ease: cubic-bezier(.2, .7, .2, 1); --ot-dur-fast: .15s; --ot-dur: .3s; --ot-dur-slow: .6s; --ot-hero-interval: 6s; /* read by theme.js for autoplay */ /* ---- 4. Layout ------------------------------------------------------- */ --ot-nav-h: 76px; --ot-nav-h-compact: 60px; --ot-logo-h: 40px; --ot-logo-h-compact: 32px; --ot-container: 1320px; --ot-gutter: clamp(16px, 3vw, 32px); --ot-hero-slide-max: 1180px; --ot-bookbar-h: 72px; /* ---- 5. Bootstrap 5.3 bridge ---------------------------------------- */ --bs-body-font-family: var(--ot-font-sans); --bs-body-font-size: var(--ot-fs-base); --bs-body-line-height: var(--ot-lh-base); --bs-body-color: var(--ot-text); --bs-body-bg: var(--ot-bg); --bs-secondary-color: var(--ot-text-muted); --bs-tertiary-bg: var(--ot-surface-2); --bs-emphasis-color: var(--ot-text); --bs-border-color: var(--ot-border); --bs-border-radius: var(--ot-radius-sm); --bs-border-radius-lg: var(--ot-radius); --bs-border-radius-xl: var(--ot-radius-lg); --bs-primary: var(--ot-primary); --bs-primary-rgb: var(--ot-primary-rgb); --bs-danger: var(--ot-accent); --bs-link-color: var(--ot-primary-text); --bs-link-color-rgb: var(--ot-primary-rgb); --bs-link-hover-color: var(--ot-text); --bs-heading-color: var(--ot-text); --bs-focus-ring-color: rgba(var(--ot-primary-rgb), .35); } /* ---- 6. Dark scope ------------------------------------------------------ Add class "ot-theme-dark" to (home, search) or any wrapper. Every component reads the same tokens, so cards, counts and empty states flip automatically. */ .ot-theme-dark { --ot-bg: var(--ot-ink); --ot-surface: #151a2d; --ot-surface-2: #1d2338; --ot-border: rgba(255, 255, 255, .08); --ot-border-strong: rgba(255, 255, 255, .18); --ot-text: var(--ot-text-on-dark); --ot-text-muted: var(--ot-text-on-dark-muted); --ot-text-subtle: var(--ot-text-on-dark-subtle); --ot-primary-soft: rgba(var(--ot-primary-rgb), .16); --ot-primary-text: var(--ot-primary-on-dark); --bs-link-color: var(--ot-primary-on-dark); --ot-shadow-sm: 0 1px 0 rgba(255, 255, 255, .03) inset; --ot-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 30px -14px rgba(0, 0, 0, .8); --ot-shadow-lg: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 50px -18px rgba(0, 0, 0, .9); --bs-body-color: var(--ot-text); --bs-body-bg: var(--ot-bg); --bs-secondary-color: var(--ot-text-muted); --bs-tertiary-bg: var(--ot-surface-2); --bs-emphasis-color: var(--ot-text); --bs-border-color: var(--ot-border); --bs-heading-color: var(--ot-text); color: var(--ot-text); background-color: var(--ot-bg); }