/* ============================================================ EVERBEATZ — THEME SYSTEM Light is the only supported look. Variables live on :root, and the many [data-theme="light"] overrides below (added when a dark mode existed alongside light) are kept as-is since always carries data-theme="light" now — removing the dead dark variant is enough for them to apply unconditionally. ============================================================ */ :root { --bg: #ffffff; --surface: #f7f7f7; --surface-soft: #eeeeee; --surface-strong: #e2e2e2; --text-primary: #111111; --text-secondary: #555555; --text-tertiary: #767676; --text-muted: #949494; --border: rgba(0, 0, 0, 0.10); --accent: #FF6A00; --accent-dark: #e05a00; --accent-contrast: #ffffff; --success: #16a34a; --success-bg: rgba(22, 163, 74, 0.12); --success-border: rgba(22, 163, 74, 0.30); --danger: #dc2626; --danger-bg: rgba(220, 38, 38, 0.10); --danger-border: rgba(220, 38, 38, 0.30); --warning: #b45309; --warning-bg: rgba(180, 83, 9, 0.10); --warning-border: rgba(180, 83, 9, 0.28); --info: #1d4ed8; --info-bg: rgba(29, 78, 216, 0.10); --info-border: rgba(29, 78, 216, 0.28); --violet: #7e22ce; --violet-bg: rgba(126, 34, 206, 0.10); --violet-border: rgba(126, 34, 206, 0.28); --input-bg: #ffffff; --overlay: rgba(0, 0, 0, 0.45); --surface-elevated: rgba(255, 255, 255, 0.7); /* Minimal — just enough to keep the centered text/buttons legible near the bottom of the photo. The image itself must stay crisp and rich, never washed out with a flat white/light tint. */ --hero-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.22) 55%, rgba(0, 0, 0, 0.5) 100%); } /* ============================================================ SHARED RESPONSIVE CONTAINER SYSTEM Every page previously hardcoded its own fixed max-width (640–1280px) with nothing beyond that for large screens, so on big MacBooks/monitors the content stopped growing while the surrounding whitespace kept expanding. These four tiers are used site-wide instead of one-off values, and widen in two steps for large/ultrawide viewports. Base values match each page's original width (within a few px) so normal-laptop appearance is unchanged. - --container-wide: grids/stores/hero pages (beat store, beat detail, placements, home sections) — also used by the nav, footer and mini-player so they stay aligned with page content. - --container-standard: two-column layouts with a fixed-width side panel (checkout, cart). - --container-narrow: single-column list/body content (booking package sections, dashboard licenses, blog). - --container-tight: focused single-column pages (checkout success / order confirmation). - --container-detail: admin single-record detail views (order detail, booking detail) — a few substantial cards rather than a list or a form. Narrower than --container-narrow's list shape since a single-record view has less to show per row. ============================================================ */ :root { --container-wide: 1280px; --container-standard: 1120px; --container-narrow: 1060px; --container-tight: 640px; --container-detail: 900px; } @media (min-width: 1600px) { :root { --container-wide: 1440px; --container-standard: 1240px; --container-narrow: 1160px; --container-tight: 720px; --container-detail: 1000px; } } @media (min-width: 2200px) { :root { --container-wide: 1680px; --container-standard: 1360px; --container-narrow: 1280px; --container-tight: 780px; --container-detail: 1120px; } } html { background: var(--bg); overflow-x: hidden; max-width: 100%; } body { transition: background-color .2s ease, color .2s ease; overflow-x: hidden; max-width: 100%; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2) !important; } [data-theme="light"] ::selection { background: rgba(255, 106, 0, 0.25); } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #8a8a8a !important; opacity: 1; } /* ── TAILWIND UTILITY OVERRIDES (LIGHT MODE ONLY) ──────────────── */ [data-theme="light"] .bg-black, [data-theme="light"] .bg-gray-950, [data-theme="light"] .bg-neutral-950 { background-color: var(--bg) !important; } [data-theme="light"] .bg-gray-900, [data-theme="light"] .bg-gray-800, [data-theme="light"] .bg-neutral-900, [data-theme="light"] .bg-neutral-800 { background-color: var(--surface) !important; } [data-theme="light"] .bg-gray-700, [data-theme="light"] .bg-neutral-700 { background-color: var(--surface-soft) !important; } [data-theme="light"] .text-white { color: var(--text-primary) !important; } [data-theme="light"] .text-gray-200, [data-theme="light"] .text-gray-300, [data-theme="light"] .text-gray-400, [data-theme="light"] .text-gray-500, [data-theme="light"] .text-neutral-300, [data-theme="light"] .text-neutral-400 { color: var(--text-secondary) !important; } [data-theme="light"] .text-gray-600, [data-theme="light"] .text-gray-700, [data-theme="light"] .text-gray-800 { color: var(--text-tertiary) !important; } [data-theme="light"] .border-gray-700, [data-theme="light"] .border-gray-800, [data-theme="light"] .border-gray-900, [data-theme="light"] .border-neutral-800, [data-theme="light"] .border-neutral-900 { border-color: var(--border) !important; } [data-theme="light"] .divide-gray-800>*+*, [data-theme="light"] .divide-gray-900>*+* { border-color: var(--border) !important; } /* Success / error badges & alerts (bg-green-900/50, text-green-300, etc.) */ [data-theme="light"] [class*="bg-green-9"], [data-theme="light"] [class*="bg-green-8"] { background-color: var(--success-bg) !important; } [data-theme="light"] [class*="text-green-3"], [data-theme="light"] [class*="text-green-4"] { color: var(--success) !important; } [data-theme="light"] [class*="border-green"] { border-color: var(--success-border) !important; } [data-theme="light"] [class*="bg-red-9"], [data-theme="light"] [class*="bg-red-8"] { background-color: var(--danger-bg) !important; } [data-theme="light"] [class*="text-red-3"], [data-theme="light"] [class*="text-red-4"] { color: var(--danger) !important; } [data-theme="light"] [class*="border-red"] { border-color: var(--danger-border) !important; } /* Tailwind arbitrary-value classes (bg-[#0a0a0a], border-[#1a1a1a], etc.) — these are literal, distinct classes that neither a hex-value sweep nor the utility overrides above can reach; enumerated from what's actually used across the admin forms/tables that rely on them. */ [data-theme="light"] .bg-\[\#0a0a0a\], [data-theme="light"] .bg-\[\#0d0d0d\], [data-theme="light"] .bg-\[\#0f0f0f\] { background-color: var(--bg) !important; } [data-theme="light"] .bg-\[\#111\] { background-color: var(--surface) !important; } [data-theme="light"] .bg-\[\#1a1a1a\], [data-theme="light"] .bg-\[\#222\] { background-color: var(--surface-soft) !important; } [data-theme="light"] .bg-\[\#333\] { background-color: var(--surface-strong) !important; } [data-theme="light"] .hover\:bg-\[\#111\]:hover, [data-theme="light"] .hover\:bg-\[\#1a1a1a\]:hover { background-color: var(--surface-soft) !important; } [data-theme="light"] .border-\[\#111\], [data-theme="light"] .border-\[\#141414\], [data-theme="light"] .border-\[\#1a1a1a\], [data-theme="light"] .border-\[\#1e1e1e\], [data-theme="light"] .border-\[\#222\], [data-theme="light"] .border-\[\#252525\], [data-theme="light"] .border-\[\#2a2a2a\], [data-theme="light"] .border-\[\#333\] { border-color: var(--border) !important; } [data-theme="light"] .hover\:border-\[\#252525\]:hover, [data-theme="light"] .hover\:border-\[\#2a2a2a\]:hover { border-color: var(--border) !important; } [data-theme="light"] .text-\[\#1e1e1e\] { color: var(--text-muted) !important; }