/* ========================================================================== TIKI DESIGN SYSTEM — DESIGN TOKENS -------------------------------------------------------------------------- The single source of truth for colour, type, space, radius, elevation and motion. Nothing below this file should contain a raw hex value or a magic pixel number; components compose these tokens instead. Palette intent: Navy — the brand's structural voice. Surfaces, text, headers, trust. Coral — reserved for action and emphasis. Used sparingly, so that when it appears the eye knows it means "do this". Purple — analytics, categories and secondary accents. White — the material the product is made of. Space is a feature. The three brand colours are deliberately never used together at full strength in the same block. ========================================================================== */ :root { /* --------------------------------------------------------------------- Brand — Navy Ramp built around #1B2A4A so text, surfaces and borders stay in the same family instead of drifting toward neutral grey. --------------------------------------------------------------------- */ --tiki-navy-950: #070D18; --tiki-navy-900: #0B1424; --tiki-navy-800: #0F1B33; --tiki-navy-700: #1B2A4A; --tiki-navy-600: #2F3E5C; --tiki-navy-500: #46587A; --tiki-navy-400: #6B7C9B; --tiki-navy-300: #9AA7BF; --tiki-navy-200: #C6CEDD; --tiki-navy-100: #E3E8F0; --tiki-navy-50: #F2F5FA; /* Brand — Coral (action) */ --tiki-coral-700: #C93338; --tiki-coral-600: #E8474C; --tiki-coral-500: #FF5A5F; --tiki-coral-400: #FF7F83; --tiki-coral-300: #FFA5A8; --tiki-coral-100: #FFE3E4; --tiki-coral-50: #FFF3F3; /* Brand — Purple (secondary accent, data) */ --tiki-purple-700: #4F31C7; --tiki-purple-600: #6A48F0; --tiki-purple-500: #7C5CFF; --tiki-purple-400: #9C83FF; --tiki-purple-100: #EDE8FF; --tiki-purple-50: #F6F3FF; /* --------------------------------------------------------------------- Neutrals — cool-tinted so they sit with navy rather than against it --------------------------------------------------------------------- */ --tiki-white: #FFFFFF; --tiki-slate-50: #F7F9FC; --tiki-slate-100: #F1F4F9; --tiki-slate-200: #E4E9F0; --tiki-slate-300: #CFD7E3; --tiki-slate-400: #A8B3C5; --tiki-slate-500: #8A94A6; --tiki-slate-600: #5B6B85; --tiki-slate-700: #3D4A61; /* --------------------------------------------------------------------- Semantic --------------------------------------------------------------------- */ --tiki-success: #0FA37F; --tiki-success-soft: #E4F6F1; --tiki-warning: #E08A00; --tiki-warning-soft: #FFF3DF; --tiki-danger: #E8474C; --tiki-danger-soft: #FFE9EA; --tiki-info: #3A72D8; --tiki-info-soft: #E8F0FD; /* --------------------------------------------------------------------- Applied roles — components reference these, not the ramps above. Swapping a theme means rebinding this block only. --------------------------------------------------------------------- */ --tiki-bg: var(--tiki-white); --tiki-bg-subtle: var(--tiki-slate-50); --tiki-bg-sunken: var(--tiki-slate-100); --tiki-surface: var(--tiki-white); --tiki-surface-hover: var(--tiki-slate-50); --tiki-text: var(--tiki-navy-800); --tiki-text-strong: var(--tiki-navy-900); --tiki-text-muted: var(--tiki-slate-600); --tiki-text-subtle: var(--tiki-slate-500); --tiki-text-invert: var(--tiki-white); --tiki-border: var(--tiki-slate-200); --tiki-border-strong: var(--tiki-slate-300); --tiki-accent: var(--tiki-coral-500); --tiki-accent-hover: var(--tiki-coral-600); --tiki-accent-active: var(--tiki-coral-700); --tiki-accent-soft: var(--tiki-coral-100); --tiki-focus-ring: rgba(255, 90, 95, 0.32); /* --------------------------------------------------------------------- Typography Plus Jakarta Sans for Latin; IBM Plex Sans Arabic carries Arabic so the RTL build keeps the same visual weight rather than falling back to a default system face. --------------------------------------------------------------------- */ --tiki-font-sans: "Plus Jakarta Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --tiki-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Type scale — 1.200 (minor third), rounded to whole pixels */ --tiki-text-2xs: 0.6875rem; /* 11px — dense table meta */ --tiki-text-xs: 0.75rem; /* 12px — labels, captions */ --tiki-text-sm: 0.8125rem; /* 13px — secondary UI */ --tiki-text-md: 0.9375rem; /* 15px — body default */ --tiki-text-lg: 1.0625rem; /* 17px — lead paragraph */ --tiki-text-xl: 1.25rem; /* 20px — card titles */ --tiki-text-2xl: 1.5rem; /* 24px — section headings */ --tiki-text-3xl: 1.875rem; /* 30px — page titles */ --tiki-text-4xl: 2.375rem; /* 38px — display small */ --tiki-text-5xl: 3rem; /* 48px — display */ --tiki-text-6xl: 3.75rem; /* 60px — hero */ --tiki-weight-regular: 400; --tiki-weight-medium: 500; --tiki-weight-semibold: 600; --tiki-weight-bold: 700; --tiki-weight-extra: 800; --tiki-leading-tight: 1.15; --tiki-leading-snug: 1.3; --tiki-leading-normal: 1.55; --tiki-leading-relaxed:1.7; /* Negative tracking on large type is what makes headlines read as designed rather than as default browser output. */ --tiki-tracking-tight: -0.02em; --tiki-tracking-tighter:-0.035em; --tiki-tracking-wide: 0.02em; --tiki-tracking-caps: 0.08em; /* --------------------------------------------------------------------- Spacing — 4px base --------------------------------------------------------------------- */ --tiki-space-0: 0; --tiki-space-1: 0.25rem; /* 4 */ --tiki-space-2: 0.5rem; /* 8 */ --tiki-space-3: 0.75rem; /* 12 */ --tiki-space-4: 1rem; /* 16 */ --tiki-space-5: 1.25rem; /* 20 */ --tiki-space-6: 1.5rem; /* 24 */ --tiki-space-8: 2rem; /* 32 */ --tiki-space-10: 2.5rem; /* 40 */ --tiki-space-12: 3rem; /* 48 */ --tiki-space-16: 4rem; /* 64 */ --tiki-space-20: 5rem; /* 80 */ --tiki-space-24: 6rem; /* 96 */ /* Vertical rhythm between page sections, tightened on small screens in tiki-base.css. */ --tiki-section-y: 4.5rem; /* --------------------------------------------------------------------- Radius — generous but not pill-shaped, except where a pill is the point --------------------------------------------------------------------- */ --tiki-radius-xs: 6px; --tiki-radius-sm: 8px; --tiki-radius-md: 12px; --tiki-radius-lg: 16px; --tiki-radius-xl: 22px; --tiki-radius-2xl: 28px; --tiki-radius-pill: 999px; /* --------------------------------------------------------------------- Elevation Very low-contrast, navy-tinted shadows. A grey/black shadow on a cool background reads as dirt; tinting it to the brand keeps surfaces clean. --------------------------------------------------------------------- */ --tiki-shadow-xs: 0 1px 2px rgba(15, 27, 51, 0.04); --tiki-shadow-sm: 0 1px 3px rgba(15, 27, 51, 0.06), 0 1px 2px rgba(15, 27, 51, 0.04); --tiki-shadow-md: 0 4px 12px rgba(15, 27, 51, 0.07), 0 1px 3px rgba(15, 27, 51, 0.04); --tiki-shadow-lg: 0 12px 28px rgba(15, 27, 51, 0.10), 0 2px 6px rgba(15, 27, 51, 0.05); --tiki-shadow-xl: 0 24px 56px rgba(15, 27, 51, 0.14), 0 4px 12px rgba(15, 27, 51, 0.06); /* Coloured lift used only on the primary CTA */ --tiki-shadow-accent: 0 6px 18px rgba(255, 90, 95, 0.28); /* --------------------------------------------------------------------- Motion — short and functional. Nothing decorative. --------------------------------------------------------------------- */ --tiki-ease: cubic-bezier(0.4, 0, 0.2, 1); --tiki-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --tiki-duration-fast: 120ms; --tiki-duration-base: 180ms; --tiki-duration-slow: 280ms; --tiki-transition: all var(--tiki-duration-base) var(--tiki-ease); /* --------------------------------------------------------------------- Layout --------------------------------------------------------------------- */ --tiki-container: 1240px; --tiki-container-wide: 1440px; --tiki-container-narrow: 760px; --tiki-gutter: 1.25rem; --tiki-header-height: 72px; /* --------------------------------------------------------------------- Z-index — named, so stacking is a decision rather than an arms race --------------------------------------------------------------------- */ --tiki-z-base: 1; --tiki-z-sticky: 100; --tiki-z-header: 1020; --tiki-z-dropdown: 1040; --tiki-z-offcanvas: 1050; --tiki-z-modal: 1060; --tiki-z-toast: 1080; /* ===================================================================== 2026 — EDITORIAL DISPLAY --------------------------------------------------------------------- The scale above tops out at 60px, which is a heading. A front page needs a voice: type large enough to be the composition rather than a label sitting on top of one. Tracking tightens as size grows, because letter-spacing that reads as normal at 15px reads as loose at 72px. --------------------------------------------------------------------- */ --tiki-text-7xl: 4.5rem; /* 72px */ --tiki-text-8xl: 5.5rem; /* 88px */ --tiki-tracking-display: -0.045em; /* Fluid display sizes. clamp() means one declaration covers 320→1920 without a stack of breakpoints each redefining the same property. */ --tiki-display-lg: clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem); --tiki-display-md: clamp(2rem, 1.1rem + 3.8vw, 3.75rem); --tiki-display-sm: clamp(1.625rem, 1.1rem + 2.2vw, 2.375rem); /* ===================================================================== 2026 — THE STUB --------------------------------------------------------------------- Tiki's one borrowed shape. A ticket is torn along a perforation, and that silhouette — a notch bitten out of each edge, a dashed line between — is the single most recognisable object in this industry. It is built from gradients and a mask rather than an image, so it recolours with the surface it sits on and costs no request. Used at three scales and nowhere else: the date block on a card, a ticket row in the selector, and the digital ticket itself. A motif used everywhere stops being a motif. --------------------------------------------------------------------- */ --tiki-notch-sm: 8px; --tiki-notch-md: 14px; --tiki-notch-lg: 22px; --tiki-perf-gap: 6px; /* dash + space of the tear line */ --tiki-perf-size: 2px; /* thickness of the tear line */ /* ===================================================================== 2026 — THE STAGE --------------------------------------------------------------------- Deep navy sections. Not a gradient and not glass: one flat, very dark surface that makes the covers on top of it glow the way a house light going down makes a stage brighten. Text roles are rebound rather than overridden per component, so any component dropped inside a stage inherits legible colours automatically. --------------------------------------------------------------------- */ --tiki-stage-bg: var(--tiki-navy-950); --tiki-stage-surface: var(--tiki-navy-900); --tiki-stage-border: rgba(255, 255, 255, 0.10); --tiki-stage-text: #EEF2F8; --tiki-stage-muted: #96A3BC; /* ===================================================================== 2026 — RING --------------------------------------------------------------------- Borders on this site are a hairline plus a ring, never a thick rule. Keeping the ring in a variable is what lets a card raise its own contrast on hover without re-declaring its geometry. --------------------------------------------------------------------- */ --tiki-ring: inset 0 0 0 1px var(--tiki-border); --tiki-ring-strong: inset 0 0 0 1px var(--tiki-border-strong); --tiki-ring-accent: inset 0 0 0 1.5px var(--tiki-accent); --tiki-ring-stage: inset 0 0 0 1px var(--tiki-stage-border); /* Cover images: one ratio for every card on the site, so a rail of mixed uploads still lines up. */ --tiki-cover-ratio: 3 / 2; } /* ========================================================================== Bootstrap bridge -------------------------------------------------------------------------- Bootstrap 5 is themed through its own custom properties rather than by overriding its selectors. This keeps our overrides to a handful of variables instead of a growing pile of !important rules. ========================================================================== */ :root { --bs-primary: #FF5A5F; --bs-primary-rgb: 255, 90, 95; --bs-body-color: #0F1B33; --bs-body-bg: #FFFFFF; --bs-body-font-family: var(--tiki-font-sans); --bs-body-font-size: var(--tiki-text-md); --bs-body-line-height: var(--tiki-leading-normal); --bs-border-color: #E4E9F0; --bs-border-radius: var(--tiki-radius-md); --bs-link-color: #E8474C; --bs-link-hover-color: #C93338; --bs-emphasis-color: #0B1424; --bs-secondary-color: #5B6B85; } /* ========================================================================== Reduced motion Respected globally: transitions are a convenience, never information. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --tiki-duration-fast: 0ms; --tiki-duration-base: 0ms; --tiki-duration-slow: 0ms; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }