/* ========================================================== TixHub -- Listing Page Styles tixhub-listing.css ========================================================== */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap'); /* ---------------------------------------------------------- BRAND FONT: Nourd (Cool theme body font) Nourd is a licensed font -- it is NOT on Google Fonts, so it must be self-hosted. Drop the licensed webfont files into /fonts/ using the names below and this picks them up automatically. Until the files are uploaded the stack falls back to DM Sans, so nothing breaks. ---------------------------------------------------------- */ @font-face { font-family: 'Nourd'; src: url('fonts/Nourd-Regular.woff2') format('woff2'), url('fonts/Nourd-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Nourd'; src: url('fonts/Nourd-Medium.woff2') format('woff2'), url('fonts/Nourd-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Nourd'; src: url('fonts/Nourd-Bold.woff2') format('woff2'), url('fonts/Nourd-Bold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } /* ---------------------------------------------------------- Custom Properties -- DEFAULT THEME (Dark: warm dark + cream + coral) Dark is the default: with no theme class on , these values apply. No JS, no localStorage, no pre-paint script needed to get the default look. Classic/Cool/Plum are overrides below, each of which redefines every palette variable declared here. ---------------------------------------------------------- */ :root { /* Brand colors -- navy inverts to cream for chip-active, headings */ --tx-navy: #F5F2EC; --tx-navy-dark: #E8E2D4; --tx-coral: #E85540; --tx-on-accent: #111110; /* CTA goes CORAL in dark mode -- gives the page a warm focal anchor */ --tx-cta-bg: #E85540; --tx-cta-bg-hover: #D44530; --tx-cta-text: #111110; /* Surfaces -- slightly warm near-black (less brown than before) Page bg is lifted above the navbar so the two visually separate when you look at the top of the page. */ --tx-page-bg: #25231F; --tx-card-bg: #2F2D2A; --tx-card-edge: rgba(255, 255, 255, 0.04); --tx-card-hover-shadow: 0 8px 32px rgba(232, 85, 64, 0.15); --tx-search-bg: #2F2D2A; --tx-dropdown-bg: #38362F; --tx-dropdown-hover: rgba(245, 242, 236, 0.06); /* Ambient warm glow at top-right of page -- barely visible */ --tx-page-glow: radial-gradient(ellipse 90% 60% at 85% -10%, rgba(232, 85, 64, 0.06), transparent 60%); /* Borders -- warmer, slightly stronger */ --tx-border: rgba(245, 242, 236, 0.09); --tx-border-mid: rgba(245, 242, 236, 0.16); --tx-divider: rgba(245, 242, 236, 0.07); /* Text */ --tx-text: #F5F2EC; --tx-muted: rgba(245, 242, 236, 0.92); --tx-hint: rgba(245, 242, 236, 0.78); /* Navbar -- matches page bg */ --tx-nav-bg: #111110; --tx-nav-bg-scrolled: rgba(17, 17, 16, 0.88); --tx-nav-text: #F5F2EC; --tx-nav-text-muted: rgba(245, 242, 236, 0.72); --tx-nav-hover-bg: rgba(245, 242, 236, 0.08); --tx-nav-active-bg: rgba(232, 85, 64, 0.15); --tx-nav-border-strong: rgba(245, 242, 236, 0.3); --tx-nav-border: rgba(245, 242, 236, 0.08); --tx-focus-ring: rgba(232, 85, 64, 0.25); /* Cart timer chip -- lives ON the navbar, so these are tuned against --tx-nav-bg, NOT the page. Never reuse --tx-coral here: in Cool the accent (#E44652) sits on a #062D48 bar at ~2.6:1 -- too weak. --tx-timer-on-urgent is dark in every theme; white text on these warm fills fails contrast (~2:1) across the board. */ --tx-timer: #F59E0B; /* 8.80:1 on nav */ --tx-timer-bg: rgba(245, 158, 11, 0.12); --tx-timer-urgent: #FF6B54; /* 6.73:1 on nav */ --tx-timer-on-urgent: #1A1A1A; /* 6.20:1 on urgent fill */ --tx-avail-good: #4FC3A1; --tx-avail-low: #E5B454; --tx-avail-out: #E26565; /* Solid "ink" fill for active pills / today markers / tooltips. Defaults to the text colour -- in Dark, Classic and Plum --tx-text is already a near-black ink, so those themes are unaffected. Cool overrides it, because Cool's body text is the brand grey #666 and a grey fill reads as disabled rather than selected. */ --tx-ink: var(--tx-text); /* Dropdown caret. `appearance:none` strips the native arrow, so every themed