/* ═══════════════════════════════════════════════════════════ ROSTR+ GCC — Design System v3 Sleek monochrome glass · cool graphite base · swappable accent Phase-1 port: tokens only, legacy names preserved so every existing page (using --gold, --text-*, --bg-*, --space-*, --radius-*) keeps working unchanged — they just resolve to the new values. ═══════════════════════════════════════════════════════════ */ /* ── Fonts — Satoshi body, Chillax display, JetBrains Mono ── 2026-05-13 audit P0-7: the two webfont imports below were originally @import statements. That blocked font discovery on `system.css` parse, costing 200-400ms of serialised RTTs on cold load. Webfont stylesheets are now loaded via in each HTML (alongside preconnects), so the browser fetches `api.fontshare.com` / `fonts.googleapis.com` in parallel with `system.css`. These @imports are left here as a fallback for any page that hasn't been updated yet, and so that opening this file directly still has the right typography. */ @import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700,900&f[]=chillax@500,600,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ── Reset ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Global reduced-motion safety net (2026-05-13 audit P2-19). Collapses every animation + transition to near-instant when the user opts out at the OS level. Targeted overrides further down the file can still re-introduce specific motion when essential (e.g. the spinning loading indicator stays visible because it communicates progress, not aesthetic). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } :root { /* ═══ ACCENT SYSTEM ═══ Default is cool-white monochrome. Override on to swap: — warm gold (legacy) — warm sand — acid lime — hot pink — cold sky blue */ --accent: #f3f5f8; --accent-soft: #ffffff; --accent-deep: #8a92a0; --accent-dim-05: rgba(243,245,248,0.04); --accent-dim-10: rgba(243,245,248,0.08); --accent-dim-20: rgba(243,245,248,0.14); --accent-dim-30: rgba(243,245,248,0.22); --accent-glow: 0 0 32px rgba(243,245,248,0.08), 0 0 64px rgba(243,245,248,0.03); /* ═══ LEGACY ACCENT ALIASES ═══ Every existing page references --gold / --gold-dim / --gold-glow / --gold-text / --border-gold. Re-point them at the new accent so we don't have to edit 20+ HTML files. When pages are ported in Phase 2 we'll migrate callers to --accent directly. */ --gold: var(--accent); --gold-dim: var(--accent-dim-10); --gold-glow: var(--accent-dim-05); --gold-text: var(--accent-soft); --border-gold: var(--accent-dim-30); --shadow-gold: var(--accent-glow); /* ═══ SURFACES ═══ cool graphite base */ --bg-base: #08090b; --bg-1: #0c0d10; --bg-2: #101116; --bg-3: #15171d; --bg-raised: rgba(14,16,22,0.80); --bg-card: rgba(255,255,255,0.025); --bg-card-hover: rgba(255,255,255,0.045); --bg-input: rgba(255,255,255,0.035); --bg-input-focus: rgba(255,255,255,0.065); /* Glass — core design language */ --glass-bg: rgba(255,255,255,0.04); --glass-bg-strong: rgba(255,255,255,0.07); --glass-border: rgba(255,255,255,0.08); --glass-blur: 14px; --glass-shine: linear-gradient(135deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.005) 40%, transparent 80%); /* Borders */ --border-subtle: rgba(255,255,255,0.05); --border-medium: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14); /* Text — slightly lifted from previous for cool-white palette. 2026-05-13 audit P0-13: bumped --text-tertiary from 0.34 (~2.8:1 against bg-base, fails WCAG AA 4.5:1 for body text) to 0.62 (~5.7:1, passes AA). Quaternary stays low — only used for decorative dividers and not text. */ --text-primary: rgba(255,255,255,0.96); --text-secondary: rgba(255,255,255,0.70); --text-tertiary: rgba(255,255,255,0.62); --text-quaternary: rgba(255,255,255,0.32); --text-inverse: #08090b; /* Status — desaturated toward grey for cooler palette */ --status-confirmed: #8ee6b5; --status-confirmed-bg: rgba(142,230,181,0.08); --status-pending: #e9cf92; --status-pending-bg: rgba(233,207,146,0.08); --status-cancelled: #f3a0a0; --status-cancelled-bg: rgba(243,160,160,0.08); --status-info: #a6c5ea; --status-info-bg: rgba(166,197,234,0.08); --status-draft: rgba(255,255,255,0.4); --status-draft-bg: rgba(255,255,255,0.05); /* ── Brand warm accent ── Single ownable hue introduced 2026-05-14 (impeccable colorize pass). Sodium-amber, the colour of GCC street-lighting at 2am. Used sparingly: founding-cohort pill, the closing-CTA italic emphasis, the page-wide text selection, the "Live now" pulse dot, and the lead feature-card eyebrow. NOT applied to body copy, buttons, headlines, or surfaces — restraint is the system. --warm-soft is the highlight (used on text); --warm is the mid (used on background washes + dot); --warm-deep is the rim (used on borders + glow). */ --warm: oklch(0.78 0.16 75); --warm-soft: oklch(0.86 0.13 78); --warm-deep: oklch(0.54 0.14 65); --warm-bg-08: oklch(0.78 0.16 75 / 0.08); --warm-bg-14: oklch(0.78 0.16 75 / 0.14); --warm-rim-32: oklch(0.78 0.16 75 / 0.32); --warm-glow: 0 0 22px oklch(0.78 0.16 75 / 0.32), 0 0 56px oklch(0.78 0.16 75 / 0.12); /* Shadows — tinted to bg hue */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --shadow-md: 0 4px 20px rgba(0,0,0,0.40), 0 0 1px rgba(255,255,255,0.05); --shadow-lg: 0 20px 40px rgba(0,0,0,0.45), 0 0 1px rgba(255,255,255,0.08); /* Typography */ --font-body: 'Satoshi', -apple-system, system-ui, sans-serif; --font-display: 'Chillax', 'Satoshi', -apple-system, system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', monospace; /* Spacing — same scale as before, extended */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; --space-5xl: 128px; /* Radius */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 160ms; --duration-base: 280ms; --duration-slow: 480ms; /* Layout */ --max-width: 1360px; --nav-height: 64px; } /* ═══ Accent theme swaps ═══ */ html[data-accent="gold"] { --accent: #c9a84c; --accent-soft: #dbbe62; --accent-deep: #8a6f27; --accent-dim-05: rgba(201,168,76,0.05); --accent-dim-10: rgba(201,168,76,0.10); --accent-dim-20: rgba(201,168,76,0.20); --accent-dim-30: rgba(201,168,76,0.30); --accent-glow: 0 0 32px rgba(201,168,76,0.18), 0 0 64px rgba(201,168,76,0.06); } html[data-accent="sand"] { --accent: #e4c588; --accent-soft: #efd8a5; --accent-deep: #a68b4c; --accent-dim-05: rgba(228,197,136,0.05); --accent-dim-10: rgba(228,197,136,0.10); --accent-dim-20: rgba(228,197,136,0.20); --accent-dim-30: rgba(228,197,136,0.30); --accent-glow: 0 0 32px rgba(228,197,136,0.18), 0 0 64px rgba(228,197,136,0.06); } html[data-accent="neon"] { --accent: #d4ff3d; --accent-soft: #e5ff7a; --accent-deep: #9bbd20; --accent-dim-05: rgba(212,255,61,0.05); --accent-dim-10: rgba(212,255,61,0.10); --accent-dim-20: rgba(212,255,61,0.20); --accent-dim-30: rgba(212,255,61,0.30); --accent-glow: 0 0 32px rgba(212,255,61,0.22), 0 0 64px rgba(212,255,61,0.08); } html[data-accent="magenta"] { --accent: #ff3d88; --accent-soft: #ff78a8; --accent-deep: #b01b58; --accent-dim-05: rgba(255,61,136,0.05); --accent-dim-10: rgba(255,61,136,0.10); --accent-dim-20: rgba(255,61,136,0.20); --accent-dim-30: rgba(255,61,136,0.30); --accent-glow: 0 0 32px rgba(255,61,136,0.22), 0 0 64px rgba(255,61,136,0.08); } html[data-accent="ice"] { --accent: #7dd3fc; --accent-soft: #b3e3fd; --accent-deep: #3d8eb5; --accent-dim-05: rgba(125,211,252,0.05); --accent-dim-10: rgba(125,211,252,0.10); --accent-dim-20: rgba(125,211,252,0.20); --accent-dim-30: rgba(125,211,252,0.30); --accent-glow: 0 0 32px rgba(125,211,252,0.20), 0 0 64px rgba(125,211,252,0.06); } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { font-family: var(--font-body); font-weight: 400; color: var(--text-primary); background: var(--bg-base); /* Cool graphite ambient — neutral hue picks up whichever --accent is active */ background-image: radial-gradient(ellipse 80% 60% at 10% -10%, var(--accent-dim-05) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 80% 110%, var(--accent-dim-05) 0%, transparent 60%); background-attachment: fixed; line-height: 1.6; min-height: 100vh; overflow-x: hidden; } /* ── Grain overlay ── */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; } /* ── Typography ── */ h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.04em; line-height: 1.15; color: var(--text-primary); } h1 { font-size: clamp(2rem, 4vw, 3.2rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); } h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); } h4 { font-size: 1.1rem; } /* 2026-05-13 audit P1: visual size of h3 on an h2 element, so we can fix heading-hierarchy skips (h1 → h3) without changing the visual rhythm. Use as

. */ .h-as-h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); } p { max-width: 65ch; line-height: 1.65; } small, .text-sm { font-size: 0.85rem; } .text-xs { font-size: 0.75rem; } .text-mono { font-family: var(--font-mono); font-size: 0.85em; letter-spacing: -0.02em; } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-gold { color: var(--gold-text); } /* ── Status colour utilities ── */ .text-status-confirmed { color: var(--status-confirmed); } .text-status-pending { color: var(--status-pending); } .text-accent-soft { color: var(--accent-soft); } .text-accent { color: var(--accent); } /* ── Mono caption ── Recurring "tiny uppercase mono label" pattern — matches the eyebrow look used by stat tiles, suggestion blocks, and meta rows. The contextual `.eyebrow` rules below override per-component when needed, but most callers wanted exactly this triplet. */ .label-mono { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); } .label-mono-sm { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-tertiary); } /* ── Flex helpers ── */ .flex-row { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-1 { flex: 1; min-width: 0; } .gap-xs { gap: 8px; } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .items-end { align-items: end; } .items-center { align-items: center; } .justify-center { justify-content: center; } .text-center { text-align: center; } /* ── Spacing helpers ── */ .mt-xs { margin-top: 4px; } .mt-sm { margin-top: 8px; } .mt-md { margin-top: 12px; } .mb-md { margin-bottom: 8px; } .mb-xl { margin-bottom: var(--space-xl); } .mb-lg { margin-bottom: var(--space-lg); } /* ── Display ── */ .is-hidden { display: none; } /* ── Links ── */ a { color: var(--gold-text); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--gold); } /* ── Layout containers ── */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); } .page-shell { padding-top: var(--nav-height); min-height: 100vh; } /* ── Navigation ── */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); background: rgba(8,8,12,0.65); backdrop-filter: blur(32px) saturate(1.6); -webkit-backdrop-filter: blur(32px) saturate(1.6); border-bottom: 1px solid rgba(255,255,255,0.06); box-shadow: 0 1px 0 rgba(255,255,255,0.03); z-index: 1000; display: flex; align-items: center; } .nav-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); width: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-brand { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.04em; color: var(--text-primary); text-decoration: none; } .nav-brand span { color: var(--gold); } .nav-links { display: flex; align-items: center; gap: var(--space-xs); list-style: none; } .nav-links a { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.88rem; font-weight: 500; transition: all var(--duration-fast) var(--ease-out); text-decoration: none; } .nav-links a:hover, .nav-links a.active { color: var(--text-primary); background: var(--bg-card); } .nav-links a.active { color: var(--gold-text); } .nav-actions { display: flex; align-items: center; gap: var(--space-sm); } .nav-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--gold-dim); border: 1px solid var(--border-gold); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; color: var(--gold-text); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } .nav-avatar:hover { border-color: var(--gold); box-shadow: var(--shadow-gold); } /* Mobile nav toggle */ .nav-toggle { display: none; background: none; border: none; color: var(--text-primary); cursor: pointer; padding: 8px; } /* ── Double-Bezel Card ── */ .card { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)) saturate(1.3); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 1px; transition: all var(--duration-base) var(--ease-out); position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; inset: 0; background: var(--glass-shine); pointer-events: none; border-radius: inherit; opacity: 0.7; transition: opacity var(--duration-base) var(--ease-out); } .card:hover { background: var(--glass-bg-strong); border-color: rgba(255,255,255,0.14); box-shadow: var(--shadow-md); transform: translateY(-2px); } .card:hover::before { opacity: 1; } .card-inner { background: rgba(10,10,16,0.55); border-radius: calc(var(--radius-lg) - 1px); padding: var(--space-lg); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); height: 100%; position: relative; } /* Card variants */ .card--gold:hover { border-color: var(--border-gold); box-shadow: var(--shadow-gold); } .card--interactive { cursor: pointer; } .card--interactive:active { transform: scale(0.98); } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; border: none; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); text-decoration: none; white-space: nowrap; line-height: 1.4; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.4; pointer-events: none; } .btn-primary { background: var(--accent); color: var(--text-inverse); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 -1px 0 rgba(0,0,0,0.08) inset, 0 1px 2px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.20); font-weight: 600; letter-spacing: 0.01em; } .btn-primary:hover { background: var(--accent-soft); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.08) inset, 0 4px 14px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.20); transform: translateY(-1px); } .btn-secondary { background: rgba(255,255,255,0.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: var(--text-primary); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); } .btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); } .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background: var(--bg-card); color: var(--text-primary); } .btn-danger { background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.2); } .btn-danger:hover { background: rgba(248,113,113,0.18); } .btn-sm { padding: 8px 14px; font-size: 0.8rem; min-height: 36px; } .btn-lg { padding: 14px 28px; font-size: 1rem; } /* 2026-05-13 audit v2 P1-9 — bumped from 36×36 to 44×44 to meet WCAG 2.5.5 Target Size minimum (24×24 AA / 44×44 AAA). Modal close buttons + admin toolbar icon-only buttons now hit-safe on touch. Padding bumped to 10 so the visible glyph stays at 14-16 px (was hugging the edge). */ .btn-icon { padding: 10px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ── Form elements ── */ .form-group { margin-bottom: var(--space-lg); } .form-label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; } .form-input, .form-select, .form-textarea { width: 100%; padding: 12px 16px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-md); color: var(--text-primary); font-family: var(--font-body); font-size: 0.92rem; transition: all var(--duration-fast) var(--ease-out); outline: none; } .form-input:focus, .form-select:focus, .form-textarea:focus { background: rgba(255,255,255,0.06); border-color: var(--accent-dim-30); box-shadow: 0 0 0 3px var(--accent-dim-10), 0 0 20px var(--accent-dim-05); } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-tertiary); } .form-textarea { resize: vertical; min-height: 100px; } .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } /* ── Tags / Badges ── */ .tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 100px; font-size: 0.72rem; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.03em; } .tag--gold { background: var(--gold-dim); color: var(--gold-text); } .tag--confirmed { background: var(--status-confirmed-bg); color: var(--status-confirmed); } .tag--pending { background: var(--status-pending-bg); color: var(--status-pending); } .tag--cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled); } .tag--draft { background: var(--status-draft-bg); color: var(--status-draft); } /* ── Tables ── */ .table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } th { text-align: left; padding: 12px 16px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border-subtle); } td { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); } tr:last-child td { border-bottom: none; } tr:hover td { background: rgba(255,255,255,0.015); } /* ── Modal / Dialog ── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-out); } .modal-overlay.active { opacity: 1; pointer-events: all; } .modal { background: rgba(14,14,22,0.85); backdrop-filter: blur(32px) saturate(1.4); -webkit-backdrop-filter: blur(32px) saturate(1.4); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-xl); padding: var(--space-xl); max-width: 540px; width: 90%; max-height: 85vh; overflow-y: auto; box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(0,0,0,0.3); transform: translateY(16px); transition: transform var(--duration-base) var(--ease-out); } .modal-overlay.active .modal { transform: translateY(0); } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-lg); } /* ── Sidebar layout ── */ .layout-sidebar { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - var(--nav-height)); } .sidebar { background: var(--bg-raised); border-right: 1px solid var(--border-subtle); padding: var(--space-lg); position: sticky; top: var(--nav-height); height: calc(100vh - var(--nav-height)); overflow-y: auto; } .sidebar-section { margin-bottom: var(--space-xl); } .sidebar-label { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); margin-bottom: var(--space-sm); padding: 0 var(--space-sm); } .sidebar-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); text-decoration: none; border: none; background: none; width: 100%; text-align: left; } .sidebar-item:hover { color: var(--text-primary); background: var(--bg-card); } .sidebar-item.active { color: var(--gold-text); background: var(--gold-dim); } .sidebar-item .count { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-tertiary); } .main-content { padding: var(--space-2xl); overflow-y: auto; } /* ── Stats row ── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-2xl); } .stat-card .card-inner { padding: var(--space-lg); } .stat-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); margin-bottom: 6px; } .stat-value { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; letter-spacing: -0.04em; color: var(--text-primary); font-variant-numeric: tabular-nums; } .stat-change { font-size: 0.78rem; font-family: var(--font-mono); margin-top: 4px; } .stat-change.up { color: var(--status-confirmed); } .stat-change.down { color: var(--status-cancelled); } /* ── Empty state ── */ .empty-state { text-align: center; padding: var(--space-4xl) var(--space-xl); } .empty-state svg { margin-bottom: var(--space-lg); opacity: 0.2; } .empty-state h3 { margin-bottom: var(--space-sm); color: var(--text-secondary); } .empty-state p { color: var(--text-tertiary); max-width: 40ch; margin: 0 auto var(--space-lg); } /* ── Animations ── */ @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes slideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-in { animation: fadeIn var(--duration-slow) var(--ease-out) both; } .stagger-1 { animation-delay: 50ms; } .stagger-2 { animation-delay: 100ms; } .stagger-3 { animation-delay: 150ms; } .stagger-4 { animation-delay: 200ms; } .stagger-5 { animation-delay: 250ms; } .stagger-6 { animation-delay: 300ms; } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); } /* ── Selection ── */ /* Page-wide text selection picks up the warm accent so even highlighting a passage reads as branded. Reuses --warm-bg-14 + --warm-soft. */ ::selection { background: var(--warm-bg-14); color: var(--warm-soft); } /* ── Accessibility ── */ /* Skip-to-content link — hidden off-screen until keyboard focused. First tab-stop on every page. Jumps straight past the nav for users who rely on a keyboard or screen reader. */ .skip-link { position: absolute; top: -100px; left: 0; background: var(--accent); color: var(--bg-base); padding: 10px 18px; text-decoration: none; font-weight: 600; border-radius: 0 0 var(--radius-sm) 0; z-index: 10000; transition: top var(--duration-fast) var(--ease-out); } .skip-link:focus { top: 0; outline: 2px solid var(--accent-soft); outline-offset: 2px; } /* Visible focus outline — browsers have been inconsistently suppressing outlines; make ours explicit so tab-through navigation is obvious. */ :focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; border-radius: 2px; } /* Utility: visually-hidden but readable by AT (for labels we need for screen readers but not for sighted users). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Responsive ── */ @media (max-width: 1024px) { .layout-sidebar { grid-template-columns: 1fr; } .sidebar { position: relative; top: 0; height: auto; border-right: none; border-bottom: 1px solid var(--border-subtle); padding: var(--space-md); display: flex; gap: var(--space-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; } .sidebar .sidebar-section { display: flex; gap: var(--space-xs); } .sidebar .sidebar-label { display: none; } .sidebar .sidebar-item { white-space: nowrap; padding: 8px 14px; font-size: 0.82rem; } } @media (max-width: 768px) { :root { --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; } .container { padding: 0 var(--space-md); } .nav-links { display: none; position: fixed; top: 56px; left: 0; right: 0; background: var(--bg-raised); border-bottom: 1px solid var(--border-subtle); padding: var(--space-md); z-index: 999; flex-direction: column; gap: 0; box-shadow: var(--shadow-lg); } .nav-links.show { display: flex !important; } .nav-links li a { padding: 12px var(--space-md); display: flex; border-bottom: 1px solid var(--border-subtle); } .nav-toggle { display: flex; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .main-content { padding: var(--space-lg); } /* Touch-friendly buttons */ .btn { min-height: 44px; padding: 10px 18px; } .btn-sm { min-height: 36px; padding: 8px 14px; } /* Tables scroll horizontally on mobile */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { min-width: 600px; } /* Forms */ .form-grid { grid-template-columns: 1fr; } /* Quick actions */ .quick-actions { grid-template-columns: 1fr; } /* Modal full width on mobile */ .modal { margin: var(--space-md); max-height: 90vh; overflow-y: auto; } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } .nav-inner { padding: 0 var(--space-sm); } .nav-brand { font-size: 1.1rem; } h1 { font-size: 1.6rem; } h2 { font-size: 1.3rem; } /* Calendar cells smaller */ .calendar-cell { min-height: 50px; padding: 4px; } .calendar-header-cell { padding: 4px; font-size: 0.65rem; } /* EPK adjustments */ .epk-name { font-size: 1.8rem !important; } .avatar-xlarge { width: 120px !important; height: 120px !important; font-size: 3rem !important; } } /* ── Star Rating ── */ .stars { display: inline-flex; gap: 1px; } .stars .star { color: var(--border-medium); font-size: 0.85rem; } .stars .star.filled { color: var(--gold); } /* ── Service Tags ── */ .service-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .service-tag { padding: 3px 10px; border-radius: 100px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; border: 1px solid rgba(255,255,255,0.08); color: var(--text-secondary); background: rgba(255,255,255,0.03); } /* ── Photo Gallery ── */ .photo-gallery { display: flex; gap: var(--space-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-sm); scroll-snap-type: x mandatory; } .photo-gallery img { width: 200px; height: 140px; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; scroll-snap-align: start; cursor: pointer; border: 1px solid var(--border-subtle); transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast); } .photo-gallery img:hover { transform: scale(1.03); border-color: var(--gold); } /* ── Lightbox ── */ .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 3000; display: flex; align-items: center; justify-content: center; cursor: zoom-out; opacity: 0; pointer-events: none; transition: opacity var(--duration-base); } .lightbox.active { opacity: 1; pointer-events: all; } .lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius-md); } /* ── Media Embed ── */ .media-embed { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); margin-bottom: var(--space-md); } .media-embed iframe { width: 100%; border: none; } /* ── Trust Stats ── */ .trust-stats { display: flex; gap: var(--space-lg); flex-wrap: wrap; } .trust-stat { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.85rem; color: var(--text-secondary); } .trust-stat .trust-value { font-weight: 600; color: var(--text-primary); } /* ── Mini Calendar ── */ .mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 0.7rem; } .mini-cal-day { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-family: var(--font-mono); } .mini-cal-day.available { background: rgba(52,211,153,0.15); color: var(--status-confirmed); } .mini-cal-day.blocked { background: rgba(248,113,113,0.1); color: var(--status-cancelled); } .mini-cal-day.today { border: 1px solid var(--gold); } /* ── Profile Completeness ── */ .completeness-bar { height: 6px; background: var(--bg-input); border-radius: 3px; overflow: hidden; } .completeness-fill { height: 100%; background: linear-gradient(90deg, var(--gold), #34d399); border-radius: 3px; transition: width var(--duration-base) var(--ease-out); } /* ── Utility ── */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } .w-full { width: 100%; } .hidden { display: none !important; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .relative { position: relative; } /* ── Admin / list utilities ── Tokens for the patterns that recur across admin.html, dashboard.html, artist-dashboard.html. Cosmetic-only; no behaviour change. */ /* Tiny type scale */ .fs-2xs { font-size: 0.7rem; } .fs-mxs { font-size: 0.72rem; } .fs-xs { font-size: 0.75rem; } .fs-tiny { font-size: 0.76rem; } .fs-fine { font-size: 0.78rem; } .fs-sm { font-size: 0.82rem; } .fs-md { font-size: 0.88rem; } /* Push to right inside a flex row */ .ml-auto { margin-left: auto; } /* Inline list message — one-line "loading" / "no rows" / "error" placeholder rendered inside a scrollable list container. The richer .empty-state up around line 814 is for full-card empties; this is for inline messages within already-laid-out lists. */ .list-msg { padding: var(--space-md); font-size: 0.82rem; } .list-msg-muted { color: var(--text-tertiary); } .list-msg-error { color: var(--status-cancelled); } /* Cancelled / destructive text */ .text-status-cancelled { color: var(--status-cancelled); } /* Section card — bordered surface that wraps an admin list */ .section-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; } /* Toolbar above an admin list (search + actions) */ .toolbar-row { display: flex; gap: 8px; margin-bottom: var(--space-md); align-items: center; flex-wrap: wrap; } /* The first
inside a .toolbar-row is the explanatory label (e.g. "All registered accounts."). Styling it here so every admin tab toolbar reads the same without per-tab class overrides. */ .toolbar-row > div:first-child { font-size: 0.92rem; color: var(--text-secondary); flex: 1 1 auto; min-width: 0; } /* Compact form input variant — used inside .toolbar-row */ .form-input-compact, .form-select-compact { font-size: 0.82rem; padding: 6px 10px; } /* Tiny dropdown variant — even denser, used by filter selects in admin tabs (email-type-filter, err-range, etc). */ .form-select-tiny { font-size: 0.78rem; padding: 4px 8px; } /* Compact button variant — admin export / refresh buttons */ .btn-compact { font-size: 0.76rem; } /* Inline code snippet inside admin help text */ .code-mono { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-primary); } /* ═══════════════════════════════════════════════════════════ Phase-2 landing components (from the new design bundle). Also reusable on profile / dashboard pages. ═══════════════════════════════════════════════════════════ */ /* Editorial hero */ .lp-hero { padding: var(--space-4xl) 0 var(--space-3xl); position: relative; overflow: hidden; } .lp-hero-top { display: flex; justify-content: space-between; align-items: start; gap: var(--space-2xl); margin-bottom: var(--space-2xl); } .lp-hero-col { flex: 1.3; max-width: 880px; } .lp-hero-side { flex: 1; max-width: 380px; min-width: 300px; } @media (max-width: 900px) { .lp-hero-top { flex-direction: column; } .lp-hero-side { max-width: 100%; width: 100%; } } .lp-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; background: var(--accent-dim-10); border: 1px solid var(--accent-dim-30); border-radius: 100px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-soft); margin-bottom: var(--space-lg); } .lp-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .lp-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(3rem, 7.5vw, 7rem); line-height: 0.95; letter-spacing: -0.05em; color: var(--text-primary); text-wrap: balance; } .lp-title em { font-style: italic; font-weight: 500; color: var(--accent-soft); } .lp-sub { font-size: 1.1rem; color: var(--text-secondary); max-width: 54ch; line-height: 1.55; margin-top: var(--space-lg); } .lp-cta { display: flex; gap: var(--space-sm); margin-top: var(--space-xl); align-items: center; flex-wrap: wrap; } /* Stats strip under hero */ .lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); margin-top: var(--space-3xl); } .lp-stat { padding: var(--space-lg) var(--space-md); border-left: 1px solid var(--border-subtle); } .lp-stat:first-child { border-left: none; } .lp-stat .eyebrow { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); margin-bottom: 8px; } .lp-stat .v { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text-primary); } .lp-stat .v em { font-style: normal; color: var(--accent-soft); } @media (max-width: 640px) { .lp-stats { grid-template-columns: repeat(2, 1fr); } .lp-stat:nth-child(3) { border-left: none; border-top: 1px solid var(--border-subtle); } .lp-stat:nth-child(4) { border-top: 1px solid var(--border-subtle); } } /* Marquee — scrolling artist names */ .lp-marquee-wrap { margin: var(--space-3xl) 0; overflow: hidden; padding: var(--space-md) 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); } .lp-marquee { display: flex; gap: var(--space-3xl); animation: lp-marquee-scroll 40s linear infinite; white-space: nowrap; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-secondary); } .lp-marquee span { display: inline-flex; align-items: center; gap: var(--space-3xl); } .lp-marquee .star { color: var(--accent); font-size: 0.9rem; } @keyframes lp-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Section header */ .lp-section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-lg); } .lp-section-head h2 { margin: 0; } .lp-section-head .eyebrow { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); display: block; margin-bottom: 8px; } /* Social-proof strip — sits between marquee and feature grid. Per 2026-05-12 homepage audit (#7). Vertical "Booking nights at" label on the left, six placeholder venue glyphs spread across. Replace glyphs with real logo SVGs as you collect rights. */ .lp-social-proof { padding: var(--space-lg) var(--space-xl); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); display: flex; align-items: center; gap: var(--space-xl); } .lp-social-proof-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); writing-mode: vertical-rl; transform: rotate(180deg); border-right: 1px solid var(--border-subtle); padding-right: var(--space-md); flex-shrink: 0; } .lp-social-proof-logos { display: flex; flex: 1; align-items: center; justify-content: space-around; gap: var(--space-xl); flex-wrap: wrap; } .lp-logo-mark { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); opacity: 0.6; transition: opacity 200ms ease; font-family: var(--font-display); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em; } .lp-logo-mark:hover { opacity: 1; } /* Partner logos: white-on-transparent PNGs at /assets/images/partners/.png. Constrained to a single uniform row height so brands of different intrinsic sizes sit on a clean visual baseline. `object-fit: contain` keeps any aspect ratio readable. */ .lp-logo-mark img { height: 32px; max-width: 140px; width: auto; object-fit: contain; filter: brightness(0) invert(1); /* force pure white even if the PNG isn't */ } /* Wordmark behind the image is the typographic fallback. When the loads it sits right next to the wordmark (gives both signal: visual logo + readable text for screen readers + tiny screens). If the 404s, the inline `onerror="this.remove()"` strips it and the wordmark alone carries the slot — never paints a broken-image icon. */ .lp-logo-wordmark { font-family: var(--font-display); font-size: 0.85rem; white-space: nowrap; } /* When the image successfully loads, drop the wordmark text so we don't double up. `:has()` is supported on every browser we care about (Safari 15.4+, Chrome 105+, FF 121+ — all well below our floor of "evergreens"). */ .lp-logo-mark:has(img:not([src=""])) .lp-logo-wordmark { display: none; } @media (max-width: 768px) { .lp-social-proof { flex-direction: column; gap: var(--space-md); padding: var(--space-md); } .lp-social-proof-label { writing-mode: horizontal-tb; transform: none; border-right: none; border-bottom: 1px solid var(--border-subtle); padding-right: 0; padding-bottom: var(--space-sm); width: 100%; text-align: center; } .lp-social-proof-logos { gap: var(--space-md); justify-content: center; } } /* Editorial feature grid ─── 1 hero item (spans 2 rows on the left) + 7 standard items that fill the remaining cells via grid auto-flow. The hero anchors the eye while the rest read as a paired-column rhythm rather than the banned "3 equal cards" cliché. */ .lp-feature-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: minmax(220px, auto); gap: var(--space-md); } @media (max-width: 900px) { .lp-feature-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } } @media (min-width: 901px) and (max-width: 1200px) { .lp-feature-grid { grid-template-columns: 1.3fr 1fr; } } .lp-feature-item { padding: var(--space-lg); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-sm); min-height: 220px; position: relative; overflow: hidden; transition: all var(--duration-base) var(--ease-out); } .lp-feature-item:hover { border-color: var(--border-medium); background: var(--bg-card-hover); } .lp-feature-item.hero-item { grid-column: span 1; grid-row: span 2; background: linear-gradient(150deg, var(--accent-dim-05), var(--bg-card)); border-color: var(--accent-dim-20); min-height: 460px; justify-content: space-between; } @media (max-width: 900px) { .lp-feature-item.hero-item { grid-row: auto; min-height: 320px; } } @media (min-width: 901px) and (max-width: 1200px) { .lp-feature-item.hero-item { grid-row: span 2; } } .lp-feature-item h3 { font-size: 1.25rem; } .lp-feature-item p { font-size: 0.9rem; } /* In-card inline link — used on feature card 06 (EPK example). Small, mono, sits below the paragraph. Hover lifts to accent. */ .lp-feature-link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-md); font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--border-subtle); padding-bottom: 4px; transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .lp-feature-link:hover { color: var(--accent-soft); border-color: var(--accent-soft); } .lp-feature-num { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-tertiary); letter-spacing: 0.1em; text-transform: uppercase; } /* Lead card (01 / ROSTER) gets the warm accent on its eyebrow so the eye lands here first. The other seven cards stay neutral — repeating the accent across all eight would re-create the kicker-scaffolding tic the audit just flagged. */ .lp-feature-item.hero-item .lp-feature-num { color: var(--warm-soft); } .lp-feature-visual { margin-top: auto; border-radius: var(--radius-md); padding: var(--space-sm); background: rgba(0,0,0,0.25); border: 1px solid var(--border-subtle); } /* .lp-automations-strip / .lp-auto-tile / .lp-auto-eyebrow removed 2026-05-16 — automations sub-strip pulled from the homepage. To restore: see git history commit 73d6e8a^..291e853 for the markup + styles. */ /* Feature-01 gallery tile. Photo on top of a deterministic gradient fallback so a missing image still renders something. The initials span is below the ; visible only when the errors and removes itself. */ .lp-gallery-tile { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; border: 1px solid var(--border-subtle); background: linear-gradient(180deg, var(--bg-2), var(--bg-base)); overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--text-primary); letter-spacing: -0.02em; } .lp-gallery-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* .lp-gallery-initials + .lp-gallery-tile:has(img) rules removed 2026-05-13 audit v2 P2-B — initials concept retired from the homepage roster gallery; tiles are now just or empty card. */ /* Featured artist card (MiniNowPlaying) */ .lp-mini-card { padding: 0; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); backdrop-filter: blur(14px) saturate(1.1); } .lp-mini-visual { aspect-ratio: 4 / 3; background: radial-gradient(ellipse 70% 60% at 30% 30%, var(--accent-dim-10) 0%, transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg-base)); position: relative; } .lp-mini-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(8,9,11,0.9)); z-index: 1; pointer-events: none; } /* Background photo placeholder. Sits at the bottom of the stacking context so the existing gradient (::after, z-index 1) and the badge/avatar/caption (z-index 2) layer over it correctly. */ .lp-mini-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .lp-mini-visual .avatar { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 88px; height: 88px; border-radius: 50%; background: var(--bg-card-hover); border: 1px solid var(--border-medium); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--text-primary); overflow: hidden; z-index: 2; } /* Avatar photo: fills the circular wrapper, sits above the initials. When the errors and removes itself, the initials behind it stay visible. */ .lp-mini-visual .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 1; } .lp-mini-visual .avatar .avatar-initials { position: relative; z-index: 0; } .lp-mini-badge { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 100px; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; backdrop-filter: blur(8px); background: rgba(142,230,181,0.18); color: var(--status-confirmed); border: 1px solid rgba(142,230,181,0.3); } .lp-mini-pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: lp-pulse 2.4s ease-in-out infinite; } @keyframes lp-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; } 50% { opacity: 0.5; box-shadow: 0 0 0 4px transparent; } } .lp-mini-caption { position: absolute; bottom: 14px; left: 14px; right: 14px; z-index: 2; color: var(--text-primary); } .lp-mini-caption .genre { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-soft); text-transform: uppercase; letter-spacing: 0.1em; } .lp-mini-caption .stage { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; letter-spacing: -0.03em; margin-top: 2px; } .lp-mini-meta { padding: var(--space-md); display: flex; gap: var(--space-sm); } .lp-mini-meta > div { flex: 1; } .lp-mini-meta .eyebrow { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); } .lp-mini-meta .val { font-family: var(--font-mono); color: var(--text-secondary); margin-top: 4px; font-weight: 500; font-size: 0.88rem; } /* City chip list (legacy, kept for callers that still need chips) */ .lp-city-list { display: flex; gap: 12px; flex-wrap: wrap; } .lp-city-chip { padding: 10px 18px; font-size: 0.88rem; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 100px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; transition: all var(--duration-fast) var(--ease-out); } .lp-city-chip:hover { background: var(--bg-card-hover); border-color: var(--border-medium); color: var(--text-primary); } /* ═══ Reach map ═══ Interactive SVG world with scroll-triggered arcs fanning out from Dubai. Equirectangular projection, dot-grid texture, no library. */ /* ═══ Reach — typographic city ledger (2026-05-14) Globe video retired; section is now a typographic block: section head (eyebrow + h2) followed by the .lp-map-list (4 region groups). No stage, no overlay, no legend. Padding mirrors other typographic sections on the page. */ .lp-reach-section { position: relative; padding: var(--space-3xl) 0; } /* ── City list ── 4 region groups in a responsive auto-fit grid. Rules unchanged from the globe-era version; the top border separates the list from the section heading above. */ /* Reach section — editorial statement (2026-05-14 critique). Replaced the dot-separated city ledger with a lede + region rows that read as prose, not a footer. .lp-map-list is retired; the styles below cover the new HTML. */ .lp-reach-statement { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--border-subtle); max-width: 78ch; } .lp-reach-lede { margin: 0 0 var(--space-xl); font-family: var(--font-display); font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.45; letter-spacing: -0.015em; color: var(--text-secondary); text-wrap: balance; } .lp-reach-lede b { color: var(--text-primary); font-weight: 600; } .lp-reach-regions { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin: 0; padding: 0; } .lp-reach-row { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px dashed var(--border-subtle); align-items: baseline; } .lp-reach-row:last-child { border-bottom: none; } .lp-reach-row dt { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-primary); margin: 0; } .lp-reach-row dd { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--text-secondary); } @media (max-width: 600px) { .lp-reach-row { grid-template-columns: 1fr; gap: 6px; } .lp-reach-row dt { font-size: 0.72rem; } } /* Trust microcopy row under hero CTA */ .lp-trust-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: var(--space-md); font-size: 0.82rem; color: var(--text-tertiary); font-family: var(--font-mono); letter-spacing: 0.04em; } .lp-trust-row .sep { opacity: 0.5; } /* Pricing band — 3-card strip of promoter / artist / future-fee. Featured card (artists) gets the accent glow. */ .lp-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); } .lp-pricing-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-xl); transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); } .lp-pricing-card:hover { border-color: var(--border-medium); transform: translateY(-2px); } .lp-pricing-card.featured { border-color: var(--accent-dim-30); background: linear-gradient(145deg, var(--accent-dim-05), var(--bg-card)); box-shadow: 0 0 0 1px var(--accent-dim-10); } .lp-pricing-tier { margin-bottom: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--border-subtle); } .lp-pricing-tier .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); display: block; margin-bottom: 4px; } .lp-pricing-tier h3 { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: -0.02em; color: var(--text-primary); margin: 0; } .lp-pricing-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .lp-pricing-list li { position: relative; padding-left: 20px; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; } .lp-pricing-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent-soft); font-weight: 600; } @media (max-width: 780px) { .lp-pricing { grid-template-columns: 1fr; } } /* Two-card variant (2026-05-12 audit fix #6). Replaces the 3-equal layout for the launch story; the future commission model lives in .lp-future-strip below. */ .lp-pricing-two { grid-template-columns: repeat(2, 1fr); } @media (max-width: 780px) { .lp-pricing-two { grid-template-columns: 1fr; } } .lp-pricing-when { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-md); margin-top: calc(var(--space-md) * -1); padding-bottom: var(--space-md); } /* Future-state strip — dashed border telegraphs "this is later, not today". "Later" tag pill on the left, soft copy in the middle, transparency note on the right. */ .lp-future-strip { margin-top: var(--space-lg); padding: var(--space-md) var(--space-xl); background: var(--bg-raised); border: 1px dashed var(--border-medium); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); } .lp-future-l { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; } .lp-future-tag { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); padding: 4px 8px; border: 1px solid var(--border-subtle); border-radius: 99px; } .lp-future-txt { font-family: var(--font-display); font-size: 1.05rem; color: var(--text-secondary); } .lp-future-txt b { color: var(--text-primary); font-weight: 500; } .lp-future-r { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; text-align: right; flex-shrink: 0; } @media (max-width: 780px) { .lp-future-strip { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } .lp-future-r { text-align: left; } } /* FAQ — native
/ styled to feel platform-native. Per 2026-05-12 homepage audit (#10). */ .lp-faq { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-lg); } .lp-faq-item { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: border-color var(--duration-fast) var(--ease-out); } .lp-faq-item:hover { border-color: var(--border-medium); } .lp-faq-item[open] { border-color: var(--accent-dim-20); background: linear-gradient(180deg, var(--bg-raised), var(--bg-card)); } .lp-faq-item summary { list-style: none; cursor: pointer; padding: var(--space-md) var(--space-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); user-select: none; } .lp-faq-item summary::-webkit-details-marker { display: none; } .lp-faq-q { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.4; } .lp-faq-icon { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 400; color: var(--text-tertiary); flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-subtle); border-radius: 50%; transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .lp-faq-item[open] .lp-faq-icon { transform: rotate(45deg); color: var(--accent-soft); border-color: var(--accent-dim-20); } /* Forced-colors fallback (2026-05-14 critique). Windows High Contrast strips custom colors + borders, so the only [open] differentiator becomes the chevron's 45deg rotate. Add an outline on the item itself — outline survives forced-colors as a system color. */ @media (forced-colors: active) { .lp-faq-item[open] { outline: 2px solid CanvasText; outline-offset: -2px; } .lp-faq-item[open] .lp-faq-icon { /* `border` is stripped in forced-colors; the rotate alone carries the state. Make sure the icon stays visible as text color. */ border-color: CanvasText; color: CanvasText; } } .lp-faq-a { padding: 0 var(--space-lg) var(--space-md); color: var(--text-secondary); font-size: 0.95rem; line-height: 1.65; } .lp-faq-a p { margin: 0; /* Cap line-length to keep FAQ answers readable. The default would run the full width of the
(~1100px on desktop) and read as a wall of text. 70ch is the upper end of the readability band. */ max-width: 70ch; } .lp-faq-a a { color: var(--accent-soft); border-bottom: 1px solid var(--border-medium); text-decoration: none; } .lp-faq-a a:hover { border-color: var(--accent-soft); } .lp-faq-section h2 em { font-style: italic; font-weight: 400; } /* Closing CTA panel */ .lp-cta-panel { padding: var(--space-3xl) var(--space-2xl); border-radius: var(--radius-xl); background: linear-gradient(145deg, var(--accent-dim-05), var(--bg-card)); border: 1px solid var(--accent-dim-20); text-align: center; position: relative; overflow: hidden; } .lp-cta-panel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 120%, var(--accent-dim-10), transparent); pointer-events: none; } .lp-cta-panel h2 { font-size: clamp(2rem, 4vw, 3rem); max-width: 720px; margin: 0 auto; position: relative; } .lp-cta-panel p { margin: var(--space-md) auto 0; max-width: 540px; position: relative; } .lp-cta-panel .cta-row { display: flex; gap: 12px; justify-content: center; margin-top: var(--space-lg); position: relative; flex-wrap: wrap; align-items: center; } /* Cohort variant (2026-05-12 audit fix #17): urgency pill above the headline, em italic in the H2, "X claimed · closes Y" meta after the buttons. */ /* Closing-CTA italic emphasis. Was --text-secondary (grey); now carries the warm accent so the one piece of typographic flourish on the page actually earns its space. */ .lp-cta-cohort h2 em { font-style: italic; color: var(--warm-soft); font-weight: 400; } /* Founding-cohort urgency pill. Was --status-pending (desaturated sand); now uses the warm accent so the scarcity moment reads as category-native nightlife signage, not a generic SaaS notification. */ .lp-urgency-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; padding: 7px 14px; border: 1px solid var(--warm-rim-32); color: var(--warm-soft); background: var(--warm-bg-08); border-radius: 99px; margin-bottom: var(--space-md); position: relative; box-shadow: var(--warm-glow); } .lp-cohort-meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; margin-left: 8px; } /* Quiet escape-hatch line under the closing CTA. Centers under the button row, uses tertiary text so it doesn't compete with the primary action, and underlines the contact link inline so the affordance is unambiguous. */ .lp-cta-talk { margin: var(--space-md) 0 0; font-size: 0.92rem; color: var(--text-tertiary); text-align: center; } .lp-cta-talk a { color: var(--text-secondary); border-bottom: 1px solid var(--border-medium); padding-bottom: 1px; transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .lp-cta-talk a:hover { color: var(--text-primary); border-bottom-color: var(--text-secondary); } @media (max-width: 600px) { .lp-cohort-meta { display: block; width: 100%; text-align: center; margin: var(--space-sm) 0 0; } } /* Intro-reveal animation utilities */ @keyframes lp-fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .lp-anim { animation: lp-fadeInUp var(--duration-slow) var(--ease-out) both; } .lp-d-1 { animation-delay: 60ms; } .lp-d-2 { animation-delay: 120ms; } .lp-d-3 { animation-delay: 180ms; } .lp-d-4 { animation-delay: 240ms; } .lp-d-5 { animation-delay: 300ms; } /* ═══════════════════════════════════════════════════════════ HERO v4 (2026-05-13 impeccable redo) Monochromatic on the site's existing cool-white --accent system. Voice comes from typography (monumental Chillax headline) and layout (vertical departures-board), not from a custom color. All classes scoped under .hero-flyer so the legacy .lp-hero* rules used by older pages stay intact. ═══════════════════════════════════════════════════════════ */ .hero-flyer { position: relative; isolation: isolate; overflow: hidden; padding: clamp(24px, 3.6vw, 48px) 0 clamp(28px, 4vw, 56px); } .hero-flyer-bleed { position: absolute; inset: 0; z-index: 0; pointer-events: none; /* Same ambient glow shape as the body, just stronger inside the hero so the section reads as the visual head of the page. */ background: radial-gradient(ellipse 60% 70% at 92% 0%, var(--accent-dim-10) 0%, var(--accent-dim-05) 32%, transparent 64%), radial-gradient(ellipse 38% 40% at 8% 100%, var(--accent-dim-05) 0%, transparent 60%); } .hero-flyer::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient( to right, transparent 0%, var(--border-subtle) 8%, var(--border-medium) 50%, var(--border-subtle) 92%, transparent 100%); z-index: 1; } .hero-flyer-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); grid-template-rows: auto auto; grid-template-areas: "head board" "meta board"; column-gap: clamp(24px, 3.2vw, 56px); row-gap: clamp(16px, 2.4vw, 28px); align-items: start; } @media (max-width: 900px) { .hero-flyer-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "meta"; } /* .hero-how { display: none } moved to a later @media block below the base .hero-how rule — see comment near line ~2538. Source-order cascade was reinstating display:flex here otherwise. */ } .hero-ticker { grid-area: ticker; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: clamp(18px, 2.4vw, 28px); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); } .hero-ticker-label { color: var(--text-secondary); font-weight: 600; letter-spacing: 0.14em; } .hero-ticker-sep { width: 4px; height: 4px; background: var(--border-medium); flex-shrink: 0; } .hero-ticker-city { display: inline-flex; align-items: baseline; gap: 8px; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .hero-ticker-city b { color: var(--text-primary); font-weight: 600; } .hero-ticker-city time { color: var(--text-tertiary); font-weight: 400; } .hero-headline { grid-area: head; margin: 0; font-family: var(--font-display); font-weight: 600; /* Editorial scale, not poster scale. Caps around 3rem (~48px) on wide viewports so the headline reads as a confident statement, not a billboard. Pairs with the departures-board to the right and the meta cluster below, where the visual mass actually belongs. */ font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -0.035em; color: var(--text-primary); text-wrap: balance; max-width: 18ch; } .hero-meta { grid-area: meta; max-width: 56ch; display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px); } .hero-sub { margin: 0; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.5; color: var(--text-secondary); max-width: 52ch; } .hero-cta { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); flex-wrap: wrap; } .hero-cta-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--font-mono); /* 2026-05-14 critique: bumped from 0.78rem (~12.5px). Mono + uppercase + tracking + tertiary opacity was a 3-way tax on legibility, especially on phones. Bigger font earns its place back. */ font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); } .hero-cta-foot b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; } .hero-cta-foot .hero-plus { color: var(--text-tertiary); font-weight: 400; margin-left: 1px; } .hero-cta-foot-sep { width: 3px; height: 3px; background: var(--border-medium); flex-shrink: 0; } .hero-platforms { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(4px, 1vw, 10px); } /* ── How-it-works panel (right column) ── Three numbered steps. Each step is [big mono number] [name + desc]. The whole panel sits on a single left-border rule with a short accent tick at the top, matching the visual anchor pattern used by the original departures-board. */ .hero-how { grid-area: board; align-self: stretch; display: flex; flex-direction: column; padding-left: clamp(16px, 1.6vw, 22px); border-left: 1px solid var(--border-medium); position: relative; } .hero-how::before { content: ''; position: absolute; top: 0; left: -1px; width: 1px; height: 32px; background: var(--accent); } .hero-how-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; } /* Eyebrow on the how-it-works panel. Was a ; promoted to

2026-05-14 to fix the h1→h3 outline skip. Overrides the global h2 rule (Chillax display @ clamp(1.5rem, 3vw, 2.2rem)) so it stays a tiny mono uppercase label visually. */ .hero-how-eyebrow { color: var(--text-primary); font-weight: 700; font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.2; letter-spacing: 0.14em; margin: 0; } .hero-how-meta { color: var(--text-tertiary); font-weight: 400; } .hero-how-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; } .hero-how-step { display: grid; grid-template-columns: 42px 1fr; align-items: baseline; gap: 14px; padding-bottom: 18px; border-bottom: 1px dashed var(--border-subtle); } .hero-how-step:last-child { padding-bottom: 0; border-bottom: none; } .hero-how-num { font-family: var(--font-mono); font-size: 0.86rem; font-weight: 500; letter-spacing: 0.04em; color: var(--text-tertiary); font-variant-numeric: tabular-nums; padding-top: 3px; } .hero-how-body { min-width: 0; } .hero-how-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 4px; line-height: 1.2; } .hero-how-desc { margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--text-secondary); } /* Two-row role grid inside each step: [Promoter | text] / [Artist | text]. Fixed label column (64px) keeps the colon-style alignment crisp across all three steps. Collapses gracefully on narrow widths because the text column stays `1fr`. */ .hero-how-roles { display: grid; grid-template-columns: 64px 1fr; row-gap: 6px; column-gap: 10px; margin-top: 4px; } .hero-how-role-label { font-family: var(--font-mono); /* 2026-05-14 critique: bumped from 0.66rem (~10.5px tertiary) which was uncomfortable small + low-contrast. Now 0.72rem secondary — ~11.5px at secondary opacity gives comfortable AA scanning. */ font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); padding-top: 2px; } .hero-how-role-text { font-size: 0.82rem; line-height: 1.45; color: var(--text-secondary); } /* Hero-scoped selection — same warm accent as the global selection. */ .hero-flyer ::selection { background: var(--warm-bg-14); color: var(--warm-soft); } .hero-anim { animation: lp-fadeInUp 720ms var(--ease-out) both; } .hero-d-1 { animation-delay: 80ms; } .hero-d-2 { animation-delay: 140ms; } .hero-d-3 { animation-delay: 200ms; } .hero-d-4 { animation-delay: 320ms; } @media (max-width: 640px) { .hero-flyer { padding-top: 24px; } .hero-headline { font-size: clamp(1.6rem, 6.5vw, 2.2rem); max-width: none; } } /* Mobile hide of How-it-works panel must appear AFTER the base .hero-how rule (line ~2399) or source-order cascade reinstates display:flex and the aside reflows the hero grid into implicit columns, crushing the headline to ~99px on phones. The original rule at the @media block near .hero-flyer-grid lost the cascade for that reason. (2026-05-16 mobile audit fix.) */ @media (max-width: 900px) { .hero-how { display: none; } } /* ═══════════════════════════════════════════════════════════ Directory — artist browsing ═══════════════════════════════════════════════════════════ */ /* Artist cover card (3:4 aspect, dark gradient over abstract tile) */ .artist-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-1); border: 1px solid var(--border-subtle); cursor: pointer; transition: all var(--duration-base) var(--ease-out); aspect-ratio: 3 / 4; isolation: isolate; } .artist-card:hover { border-color: var(--accent-dim-30); transform: translateY(-3px); box-shadow: 0 24px 60px rgba(0,0,0,0.60), 0 0 0 1px var(--accent-dim-20); } .artist-card .cover { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform var(--duration-slow) var(--ease-out); } .artist-card:hover .cover { transform: scale(1.05); } .artist-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(8,9,11,0.2) 50%, rgba(8,9,11,0.95) 100%); pointer-events: none; } .artist-card-content { position: absolute; inset: 0; padding: var(--space-md); display: flex; flex-direction: column; justify-content: space-between; z-index: 2; } .artist-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .artist-card-genre { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-soft); margin-bottom: 4px; } .artist-card-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--text-primary); } .artist-card-meta { display: flex; align-items: center; gap: var(--space-sm); margin-top: 10px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-secondary); } .artist-card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-tertiary); } .artist-card-verified { width: 22px; height: 22px; border-radius: 50%; background: rgba(8,9,11,0.7); backdrop-filter: blur(8px); border: 1px solid var(--accent-dim-30); display: flex; align-items: center; justify-content: center; color: var(--accent-soft); } /* Availability dot pill */ .availability-dot { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 100px; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; backdrop-filter: blur(8px); } .availability-dot.avail { background: rgba(142,230,181,0.18); color: var(--status-confirmed); border: 1px solid rgba(142,230,181,0.3); } .availability-dot.busy { background: rgba(233,207,146,0.18); color: var(--status-pending); border: 1px solid rgba(233,207,146,0.3); } .availability-dot.booked { background: rgba(243,160,160,0.18); color: var(--status-cancelled); border: 1px solid rgba(243,160,160,0.3); } .availability-dot .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: lp-pulse 2.4s ease-in-out infinite; } /* Directory toolbar (search + filters) */ .dir-header { margin-bottom: var(--space-lg); } .dir-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: var(--space-md); } .dir-search { position: relative; flex: 1; min-width: 260px; max-width: 420px; } .dir-search .js-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; } .dir-input, .dir-select { font-family: var(--font-body); font-size: 0.92rem; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px 14px; color: var(--text-primary); transition: all var(--duration-fast) var(--ease-out); outline: none; height: 40px; } .dir-input:focus, .dir-select:focus { background: var(--bg-card-hover); border-color: var(--accent-dim-30); box-shadow: 0 0 0 3px var(--accent-dim-10); } .dir-input { width: 100%; padding-left: 38px; } .dir-input::placeholder { color: var(--text-tertiary); } .dir-select { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%), linear-gradient(135deg, var(--text-tertiary) 50%, transparent 50%); background-position: calc(100% - 14px) 18px, calc(100% - 9px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; } .dir-view-toggle { margin-left: auto; display: flex; gap: 4px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 3px; } .dir-view-toggle button { width: 34px; height: 34px; border: none; background: transparent; color: var(--text-secondary); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--duration-fast) var(--ease-out); } .dir-view-toggle button.active { background: var(--accent-dim-10); color: var(--accent-soft); } .dir-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-tertiary); margin-bottom: var(--space-md); } /* Stats strip above the grid (2026-05-12 web polish #15). Display-font headline + mono sub-line. Together they give an at-a-glance "what am I looking at" right above the directory. */ .dir-stats-strip { margin-bottom: var(--space-md); } .dir-stats-headline { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.1; margin-bottom: 4px; } .dir-stats-strip .dir-meta { margin-bottom: 0; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; } /* ── Social-proof activity ticker (activation #6, 2026-05-29) ── Sits between the stats strip and the grid. Two states: .activity-ticker — real recent-booking activity .activity-ticker--founding — honest fallback when <2 bookings Calm by default — a thin bordered band, not a loud banner. The point is ambient "this place is alive", not a shout. */ .activity-ticker { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); padding: 10px var(--space-md); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-size: 0.84rem; color: var(--text-secondary); overflow: hidden; } .activity-ticker strong { color: var(--text-primary); font-weight: 600; } .at-label { flex-shrink: 0; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--status-confirmed); padding: 2px 8px; border: 1px solid rgba(142, 230, 181, 0.3); border-radius: 100px; background: rgba(142, 230, 181, 0.08); } /* The scrolling track. CSS-only marquee on a duplicated row would be ideal, but with a handful of entries a simple horizontal-scroll flex row (no scrollbar) reads cleaner and avoids motion-sickness risk. Wraps to nothing on overflow — first entries are the freshest so truncation is acceptable. */ .at-track { display: flex; gap: var(--space-lg); overflow-x: auto; scrollbar-width: none; white-space: nowrap; } .at-track::-webkit-scrollbar { display: none; } .at-item { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } /* Pulsing green dot — the "live" signal. Respects reduced-motion. */ .at-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-confirmed); flex-shrink: 0; animation: at-pulse 2.4s ease infinite; } @keyframes at-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(142, 230, 181, 0.5); } 50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(142, 230, 181, 0); } } @media (prefers-reduced-motion: reduce) { .at-dot { animation: none; } } /* Founding-state — same shell, calmer (no "Live" pill, dimmer dot). */ .activity-ticker--founding { color: var(--text-tertiary); font-size: 0.82rem; } .activity-ticker--founding .at-dot { background: var(--accent-soft); animation: none; } /* Grid layout */ .dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-md); } /* List layout */ .dir-list { padding: 0; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; } .dir-list-row { display: grid; grid-template-columns: 56px 1.5fr 1fr 1fr 1fr auto; align-items: center; gap: 12px; padding: var(--space-md); border-top: 1px solid var(--border-subtle); cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .dir-list-row:first-child { border-top: none; } .dir-list-row:hover { background: var(--bg-card-hover); } .dir-list-thumb { width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--border-medium); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text-primary); letter-spacing: -0.02em; } .dir-list-name { font-weight: 600; display: flex; align-items: center; gap: 6px; color: var(--text-primary); } .dir-list-name .verified-badge { color: var(--accent-soft); display: inline-flex; } .dir-list-sub { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-tertiary); margin-top: 2px; } .dir-list-cell { color: var(--text-secondary); font-size: 0.85rem; display: inline-flex; align-items: center; gap: 4px; } .dir-list-cell.mono { font-family: var(--font-mono); color: var(--text-tertiary); font-size: 0.78rem; } @media (max-width: 900px) { .dir-list-row { grid-template-columns: 56px 1fr auto; } .dir-list-row > :nth-child(n+4):nth-last-child(n+2) { display: none; } } /* Empty / loading state */ .dir-empty { padding: var(--space-3xl); text-align: center; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); color: var(--text-tertiary); } /* ═══════════════════════════════════════════════════════════ Artist profile — editorial public view ═══════════════════════════════════════════════════════════ */ .ap-cover { height: 360px; position: relative; overflow: hidden; background-size: cover; background-position: center; } .ap-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,9,11,0.3), rgba(8,9,11,0.6) 60%, var(--bg-base)); } .ap-narrow { max-width: 1100px; margin: -120px auto 0; padding: 0 var(--space-lg) var(--space-3xl); position: relative; z-index: 1; } .ap-header { display: flex; align-items: end; gap: var(--space-lg); margin-bottom: var(--space-2xl); flex-wrap: wrap; } .ap-avatar { width: 160px; height: 160px; border-radius: 20px; border: 2px solid var(--border-medium); box-shadow: 0 20px 40px rgba(0,0,0,0.5); flex-shrink: 0; position: relative; overflow: hidden; background: var(--bg-1); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 3.5rem; letter-spacing: -0.04em; color: var(--text-primary); } .ap-avatar img { width: 100%; height: 100%; object-fit: cover; } .ap-head-col { flex: 1; min-width: 280px; } .ap-meta-line { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-soft); text-transform: uppercase; letter-spacing: 0.12em; } .ap-name { font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 3.5rem); letter-spacing: -0.04em; line-height: 1.05; margin-top: 6px; color: var(--text-primary); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ap-name .verified { color: var(--accent-soft); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-dim-10); border: 1px solid var(--accent-dim-30); } .ap-badges { display: flex; gap: var(--space-md); margin-top: 10px; flex-wrap: wrap; align-items: center; } .ap-actions { display: flex; gap: 8px; flex-wrap: wrap; } .ap-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-lg); } @media (max-width: 820px) { .ap-grid { grid-template-columns: 1fr; } } .ap-col { display: flex; flex-direction: column; gap: var(--space-lg); } .ap-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-xl); backdrop-filter: blur(14px) saturate(1.1); } .ap-card .eyebrow { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); } .ap-card h3 { margin-top: 4px; font-size: 1.1rem; font-family: var(--font-display); letter-spacing: -0.02em; } .ap-card p { margin-top: 10px; color: var(--text-primary); font-size: 1rem; line-height: 1.6; } .ap-quickfacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--border-subtle); } .ap-quickfact .val { font-weight: 600; margin-top: 4px; color: var(--text-secondary); } /* Availability mini-calendar (next 21 days) */ .ap-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .ap-cal-head { font-family: var(--font-mono); font-size: 0.62rem; text-align: center; color: var(--text-tertiary); } .ap-cal-cell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.68rem; border-radius: 6px; border: 1px solid transparent; background: rgba(255,255,255,0.02); color: var(--text-tertiary); } .ap-cal-cell.available { background: var(--accent-dim-10); color: var(--accent-soft); } .ap-cal-cell.booked { background: rgba(243,160,160,0.12); color: var(--status-cancelled); } .ap-cal-cell.today { border-color: var(--accent); } .ap-cal-legend { display: flex; gap: 14px; margin-top: 14px; font-size: 0.72rem; color: var(--text-tertiary); } .ap-cal-legend .chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); } .ap-cal-legend .chip .sw { width: 8px; height: 8px; border-radius: 2px; } /* Tech rider list */ .ap-rider { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .ap-rider li { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-secondary); } .ap-rider .check { color: var(--accent-soft); display: inline-flex; } /* Socials row (keeping existing concept) */ .ap-socials { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .ap-social-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 100px; color: var(--text-secondary); font-size: 0.82rem; text-decoration: none; transition: all var(--duration-fast) var(--ease-out); } .ap-social-chip:hover { background: var(--bg-card-hover); border-color: var(--border-medium); color: var(--text-primary); } /* Similar artists row */ .ap-similar { margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: 1px solid var(--border-subtle); } .ap-similar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-md); margin-top: var(--space-md); } /* ── Artist profile media (added 2026-05-13) ── Photo strip, video/mix grid, lightbox. Used by profile.html and epk.html. The photo strip mirrors the existing .photo-gallery rule but with a slightly tighter scale that fits the artist- profile column width. */ .ap-photo-strip { display: flex; gap: var(--space-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-sm); scroll-snap-type: x mandatory; } .ap-photo-strip img { width: 220px; height: 165px; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; scroll-snap-align: start; cursor: zoom-in; border: 1px solid var(--border-subtle); transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast); } .ap-photo-strip img:hover { transform: scale(1.03); border-color: var(--gold); } .ap-video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); } .ap-video-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; } /* 16:9 responsive iframe — padding-bottom percent based on width. */ .ap-video-frame { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; } .ap-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ap-video-title { padding: var(--space-sm) var(--space-md); font-size: 0.88rem; color: var(--text-secondary); } .ap-video-link { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); text-decoration: none; color: var(--text-primary); min-height: 88px; } .ap-video-link:hover { border-color: var(--gold); } .ap-video-platform { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); flex-shrink: 0; } /* Lightbox overlay: closes on click anywhere. */ .ap-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); display: none; align-items: center; justify-content: center; z-index: 1000; cursor: zoom-out; padding: var(--space-lg); } .ap-lightbox.open { display: flex; } .ap-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6); } /* ═══════════════════════════════════════════════════════════ Promoter dashboard — cockpit (No sidebar on our app — single-scroll; only the content blocks) ═══════════════════════════════════════════════════════════ */ /* Welcome block */ .dash-welcome { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: var(--space-2xl); } .dash-welcome h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.04em; line-height: 1.05; margin-top: 8px; } .dash-welcome h1 em { font-style: normal; color: var(--accent-soft); } .dash-welcome p { margin-top: 6px; color: var(--text-secondary); max-width: 60ch; } /* Big stats row (4-up, sparkline bg) */ .dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-bottom: var(--space-2xl); } @media (max-width: 820px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } } .dash-stat { padding: var(--space-lg); border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border-subtle); position: relative; overflow: hidden; backdrop-filter: blur(14px) saturate(1.1); } .dash-stat .label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); } .dash-stat .value { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-top: 6px; line-height: 1; } .dash-stat .sub { margin-top: 10px; display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-family: var(--font-mono); color: var(--text-tertiary); } .dash-stat .sub.up { color: var(--status-confirmed); } .dash-stat .sub.down { color: var(--status-cancelled); } /* Two-column body: timeline + sidebar cards */ .dash-body { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-lg); margin-top: var(--space-xl); } @media (max-width: 980px) { .dash-body { grid-template-columns: 1fr; } } /* Filter pill-group (week / month / all) */ .dash-filter { display: flex; gap: 4px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 3px; } .dash-filter button { padding: 6px 12px; border: none; background: transparent; color: var(--text-secondary); font-size: 0.8rem; font-family: var(--font-body); font-weight: 500; border-radius: 8px; cursor: pointer; text-transform: capitalize; transition: all var(--duration-fast) var(--ease-out); } .dash-filter button.active { background: var(--accent-dim-10); color: var(--accent-soft); } /* Timeline (grouped-by-day booking list) */ .timeline-day { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-lg); padding: var(--space-lg) 0; border-top: 1px solid var(--border-subtle); } .timeline-day:first-child { border-top: none; } @media (max-width: 640px) { .timeline-day { grid-template-columns: 60px 1fr; gap: var(--space-md); } } .timeline-date { font-family: var(--font-display); letter-spacing: -0.02em; } .timeline-date .dd { font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--text-primary); } .timeline-date .mm { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); margin-top: 4px; } .timeline-date.today .dd { color: var(--accent); } .timeline-events { display: flex; flex-direction: column; gap: var(--space-sm); } .event-row { display: grid; grid-template-columns: 72px 44px 1fr auto auto; align-items: center; gap: var(--space-md); padding: var(--space-md); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: all var(--duration-fast) var(--ease-out); cursor: pointer; } .event-row:hover { background: var(--bg-card-hover); border-color: var(--border-medium); transform: translateX(2px); } .event-row .time { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .event-row .avatar { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-medium); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: var(--text-primary); letter-spacing: -0.02em; } .event-row .meta-name { font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--text-primary); } .event-row .meta-venue { font-size: 0.8rem; color: var(--text-tertiary); margin-top: 2px; display: flex; align-items: center; gap: 6px; } .event-row .fee { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; } .event-row .fee small { color: var(--text-tertiary); font-weight: 400; margin-right: 4px; } @media (max-width: 640px) { /* Drop the leading time column on phones (the day header above each event group already shows the date). Keep fee visible — money-at-a-glance is the dashboard's core purpose, so hiding it on mobile defeats the use case. (2026-05-16 mobile audit.) */ .event-row { grid-template-columns: 44px 1fr auto auto; gap: 8px; } .event-row .time { display: none; } .event-row .fee { font-size: 0.82rem; padding-left: 4px; } } /* Sidebar-right cards: pipeline, inbox, suggestion */ .dash-side { display: flex; flex-direction: column; gap: var(--space-lg); } .dash-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-lg); backdrop-filter: blur(14px) saturate(1.1); } .dash-card .head { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: var(--space-md); } .dash-card .head h3 { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.02em; margin-top: 4px; } .dash-card .head .eyebrow { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); } /* Pipeline bars */ .dash-pipeline-row { } .dash-pipeline-row + .dash-pipeline-row { margin-top: 10px; } .dash-pipeline-row .label-line { display: flex; justify-content: space-between; font-size: 0.82rem; margin-bottom: 4px; } .dash-pipeline-row .label-line .count { font-family: var(--font-mono); color: var(--text-primary); font-weight: 600; } .dash-pipeline-row .track { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.04); overflow: hidden; } .dash-pipeline-row .fill { height: 100%; border-radius: 3px; transition: width 600ms var(--ease-out); } /* Inbox list inside the dashboard side card */ .dash-inbox { display: flex; flex-direction: column; gap: 0; } .dash-inbox .row { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-subtle); align-items: start; } .dash-inbox .row:first-child { border-top: none; } .dash-inbox .row .bubble { flex: 1; min-width: 0; } .dash-inbox .row .head-line { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; } .dash-inbox .row .name { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.85rem; color: var(--text-primary); } .dash-inbox .row .unread-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .dash-inbox .row .time { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-tertiary); } .dash-inbox .row .preview { font-size: 0.8rem; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Highlighted suggestion card */ .dash-suggest { background: linear-gradient(150deg, var(--accent-dim-05), var(--bg-card)); border: 1px solid var(--accent-dim-20); border-radius: var(--radius-md); padding: var(--space-lg); } .dash-suggest .who { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .dash-suggest .tile { width: 56px; height: 56px; border-radius: 12px; border: 1px solid var(--accent-dim-30); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--text-primary); } .dash-suggest .stage { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); } .dash-suggest .meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-tertiary); margin-top: 2px; } .dash-suggest p { font-size: 0.82rem; margin-top: 12px; color: var(--text-secondary); } /* ═══════════════════════════════════════════════════════════ Booking wizard — 3-step create flow ═══════════════════════════════════════════════════════════ */ /* Container: narrow column */ .bk-wrap { max-width: 1100px; margin: 0 auto; padding: var(--space-xl) var(--space-lg) var(--space-3xl); } .bk-head { margin-bottom: var(--space-xl); } .bk-head h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.04em; line-height: 1.05; } .bk-head p { margin-top: 6px; color: var(--text-secondary); max-width: 60ch; } /* Step progress strip */ .bk-progress { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-xl); } .bk-step { display: flex; align-items: center; gap: 10px; color: var(--text-tertiary); font-size: 0.85rem; font-weight: 500; } .bk-step .dot { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-medium); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; background: var(--bg-card); flex-shrink: 0; transition: all var(--duration-fast) var(--ease-out); } .bk-step.active { color: var(--text-primary); } .bk-step.active .dot { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); box-shadow: 0 0 0 4px var(--accent-dim-10); } .bk-step.done { color: var(--text-secondary); } .bk-step.done .dot { background: var(--accent-dim-10); color: var(--accent-soft); border-color: var(--accent-dim-30); } .bk-line { flex: 1; height: 1px; background: linear-gradient(to right, var(--border-medium), var(--border-subtle)); } .bk-line.done { background: var(--accent-dim-30); } @media (max-width: 640px) { .bk-progress { gap: 6px; } .bk-step span:last-child { display: none; } .bk-step.active span:last-child { display: inline; } } /* Step body */ .bk-step-body h3 { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -0.03em; margin-bottom: var(--space-md); } /* Step 1: artist pick grid */ .bk-artist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: var(--space-lg); } .bk-artist-card { padding: 12px; cursor: pointer; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: all var(--duration-fast) var(--ease-out); } .bk-artist-card:hover { border-color: var(--border-medium); background: var(--bg-card-hover); } .bk-artist-card.selected { border-color: var(--accent); box-shadow: var(--accent-glow); background: var(--accent-dim-05); } .bk-artist-tile { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.8rem; color: var(--text-primary); letter-spacing: -0.03em; } .bk-artist-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); } .bk-artist-meta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-tertiary); margin-top: 2px; } /* Chosen-artist summary block (steps 2 + 3) */ .bk-chosen { display: flex; gap: var(--space-md); margin-bottom: var(--space-xl); padding: var(--space-md); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); align-items: center; } .bk-chosen .tile { width: 64px; height: 64px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--text-primary); letter-spacing: -0.03em; } .bk-chosen .name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); } .bk-chosen .meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-tertiary); margin-top: 2px; } /* Form fields (wizard uses distinct class names so we don't collide with the legacy .form-input rules) */ .bk-field { display: flex; flex-direction: column; gap: 6px; } .bk-field-label { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); } .bk-input, .bk-select, .bk-textarea { width: 100%; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 10px; color: var(--text-primary); font-family: var(--font-body); font-size: 0.92rem; transition: all var(--duration-fast) var(--ease-out); outline: none; } .bk-input:focus, .bk-select:focus, .bk-textarea:focus { background: var(--bg-card-hover); border-color: var(--accent-dim-30); box-shadow: 0 0 0 3px var(--accent-dim-10); } .bk-input::placeholder, .bk-textarea::placeholder { color: var(--text-tertiary); } .bk-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; cursor: pointer; } .bk-textarea { resize: vertical; min-height: 96px; font-family: var(--font-body); } .bk-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } .bk-form-grid .span-2 { grid-column: span 2; } @media (max-width: 640px) { .bk-form-grid { grid-template-columns: 1fr; } .bk-form-grid .span-2 { grid-column: auto; } } .bk-currency-group { display: flex; gap: 8px; } .bk-currency-group .bk-select { max-width: 90px; } /* Footer nav (Back / Continue) */ .bk-foot { display: flex; justify-content: space-between; margin-top: var(--space-xl); gap: 10px; } /* Review card (step 3) */ .bk-review { padding: var(--space-xl); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-bottom: var(--space-lg); } .bk-review-head { display: flex; align-items: center; gap: 16px; margin-bottom: var(--space-lg); padding-bottom: var(--space-md); border-bottom: 1px solid var(--border-subtle); } .bk-review-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .bk-review-facts .eyebrow { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); } .bk-review-facts .val { margin-top: 6px; font-size: 0.95rem; color: var(--text-primary); font-weight: 500; } .bk-review-notes { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border-subtle); } .bk-review-notes .eyebrow { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); } .bk-review-notes p { margin-top: 6px; color: var(--text-secondary); font-size: 0.9rem; } /* Reassurance banner above the Send button */ .bk-reassure { padding: var(--space-md); background: var(--accent-dim-05); border: 1px solid var(--accent-dim-20); border-radius: var(--radius-md); display: flex; gap: 12px; margin-bottom: var(--space-lg); } .bk-reassure .i { color: var(--accent-soft); padding-top: 2px; flex-shrink: 0; } .bk-reassure .title { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); } .bk-reassure p { margin-top: 4px; color: var(--text-secondary); font-size: 0.85rem; } /* ═══════════════════════════════════════════════════════════════════ App-store / web-live badges ─── Inline SVG, no external image fetch (avoids the cross-origin path the SW can't safely cache). Coming-soon treatment uses a desaturated overlay; live treatment uses a quiet pulse dot. ═══════════════════════════════════════════════════════════════════ */ .app-badge-block { display: inline-flex; flex-direction: column; gap: 8px; align-items: flex-start; } .app-badge { display: inline-flex; align-items: center; gap: 10px; /* Auto-width pill — content drives the size. Generous vertical padding (10/14) and a moderate corner radius read as a real button at small sizes without looking like a "media-pill". */ padding: 10px 16px; background: var(--bg-card); border: 1px solid var(--border-medium); border-radius: 999px; /* fully rounded — peer of the Start booking CTA */ color: var(--text-primary); text-decoration: none; white-space: nowrap; font-family: var(--font-display); font-size: 0.92rem; font-weight: 500; letter-spacing: -0.005em; transition: border-color 200ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .app-badge:hover { border-color: var(--border-strong); background: var(--bg-card-hover); } .app-badge:active { transform: translateY(1px); } .app-badge-glyph { flex-shrink: 0; color: var(--text-primary); } .app-badge-label { /* Single-line label inside the chip. Inherits font from .app-badge so we don't fight specificity. */ display: inline-block; line-height: 1; } /* Legacy classes kept (--coming, --live, .app-badge-eyebrow, .app-badge-store, .app-badge-text) so any other page rendering the older markup still styles OK. Both modifiers now share the same base; differentiation is in the caption underneath. */ .app-badge--coming, .app-badge--live, .app-badge--ios, .app-badge--web { /* same shape; no per-modifier overrides today */ } .app-badge-eyebrow { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 3px; } .app-badge-text, .app-badge-store { display: inline-block; line-height: 1; white-space: nowrap; } .app-badge-caption { font-size: 0.74rem; color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 6px; } /* "Live now" pulse dot. Uses --status-confirmed (green) so the warm accent stays reserved for the closing-CTA Founding-50 pill — the one piece of category-native urgency on the page. Status is not the same as scarcity; separating them lets each signal land. */ .app-badge-pulse { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--status-confirmed); box-shadow: 0 0 0 0 rgba(142, 230, 181, 0.45); animation: appBadgePulse 2200ms cubic-bezier(0.16, 1, 0.3, 1) infinite; } @keyframes appBadgePulse { 0% { box-shadow: 0 0 0 0 rgba(142, 230, 181, 0.45); } 70% { box-shadow: 0 0 0 8px rgba(142, 230, 181, 0); } 100% { box-shadow: 0 0 0 0 rgba(142, 230, 181, 0); } } /* ═══════════════════════════════════════════════════════════════════ Site footer ─── Asymmetric 3-col grid (brand 2fr, then two 1fr columns). Stacks on mobile. Uses spacing tokens, no magic numbers. ═══════════════════════════════════════════════════════════════════ */ .site-footer { margin-top: var(--space-4xl); padding-top: var(--space-3xl); padding-bottom: var(--space-2xl); background: var(--bg-1); border-top: 1px solid var(--border-subtle); } .site-footer-grid { display: grid; /* 2026-05-16: added 4th column (Connect — Instagram, WhatsApp, book@, all-channels). Brand stays widest at 2fr. */ grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-2xl); padding-bottom: var(--space-2xl); border-bottom: 1px solid var(--border-subtle); } @media (max-width: 768px) { .site-footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); } } .site-footer-brand { max-width: 460px; } .site-footer-wordmark { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-md); } .site-footer-wordmark .plus { color: var(--accent-soft); margin-left: 1px; } .site-footer-tagline { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; margin: 0 0 var(--space-lg); max-width: 52ch; } .site-footer-badges { display: flex; flex-wrap: wrap; gap: var(--space-md); } .site-footer-heading { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-md); } .site-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .site-footer-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 160ms cubic-bezier(0.16, 1, 0.3, 1); } .site-footer-links a:hover { color: var(--text-primary); } .site-footer-base { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding-top: var(--space-lg); font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-tertiary); } .site-footer-base-sep { color: var(--text-quaternary); } /* ═══════════════════════════════════════════════════════════════════ Hero "Available on" strip ─── Sits beneath the hero trust microcopy. Two badges side-by-side on desktop, stacked on mobile. ═══════════════════════════════════════════════════════════════════ */ .lp-hero-platforms { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xl); } /* ═══════════════════════════════════════════════════════════════════ Platform-parity strip (between Pricing and Closing CTA) ─── Single split: parity claim left, badges right. ═══════════════════════════════════════════════════════════════════ */ .lp-parity { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-2xl); align-items: center; padding: var(--space-2xl); background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } @media (max-width: 768px) { .lp-parity { grid-template-columns: 1fr; } } .lp-parity h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 var(--space-md); } .lp-parity p { color: var(--text-secondary); margin: 0; max-width: 52ch; line-height: 1.6; } .lp-parity-badges { display: flex; flex-direction: column; gap: var(--space-lg); } /* Proof row: two mono lines showing the same event hitting iOS and web ~20ms apart. Sells the "instantly" claim without needing a screenshot. Sits below the paragraph copy in the left column. */ .lp-parity-proof { margin-top: var(--space-lg); padding: 14px 16px; background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.78rem; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: 6px; max-width: 380px; } .lp-parity-proof-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: baseline; gap: 12px; } .lp-parity-proof-os { color: var(--text-tertiary); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.66rem; font-weight: 600; } .lp-parity-proof-event { color: var(--text-primary); } .lp-parity-proof-time { color: var(--accent-soft); } /* ─────────────────────────────────────────────────────────────── LINKTREE SURFACE (shared) Used by: - /link.html — ROSTR+ brand "link in bio" page - /a.html — per-artist Linktree (artist's own bio page) Both pages render a single-column phone-shaped surface that reads at-a-glance from a mobile browser. Tokens come from above; only the layout primitives live here. Adapted from the "ROSTR Linktree — Variant A · Glass dark" design package (2026-05-12, ~/Downloads/roster/lintree/). ─────────────────────────────────────────────────────────────── */ .lt-page-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-start; justify-content: center; padding: var(--space-2xl) var(--space-md); position: relative; overflow: hidden; } .lt-page-wrap::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,255,255,0.06), transparent 70%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255,255,255,0.03), transparent); pointer-events: none; } .lt-inner { position: relative; z-index: 1; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--space-md); align-items: center; padding-top: var(--space-2xl); } /* Brand mark — square tile with gradient + accent dot */ .lt-logo { width: 80px; height: 80px; border-radius: 22px; background: linear-gradient(135deg, #1a1d24 0%, #0c0d10 100%); border: 1px solid var(--border-medium); display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08); position: relative; } .lt-logo-mark { font-family: var(--font-display); font-weight: 700; font-size: 32px; letter-spacing: -0.04em; background: linear-gradient(180deg, var(--text-primary), var(--text-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .lt-logo-plus { position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--status-confirmed); box-shadow: 0 0 8px rgba(142,230,181,0.6); } /* Per-artist (a.html) variant: an actual photo fills the tile. */ .lt-logo.lt-logo-photo { background: var(--bg-card); padding: 0; overflow: hidden; } .lt-logo-photo-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* Handle + tagline */ .lt-handle { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; } .lt-handle-verified { width: 16px; height: 16px; border-radius: 50%; background: var(--text-primary); color: var(--bg-base); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; } .lt-tagline { font-size: 0.85rem; color: var(--text-secondary); text-align: center; max-width: 280px; line-height: 1.5; } .lt-tagline em { font-style: italic; color: var(--text-primary); } /* Live + est meta line */ .lt-meta-line { display: flex; gap: 10px; font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-tertiary); margin-top: -2px; flex-wrap: wrap; justify-content: center; } .lt-meta-live { display: inline-flex; align-items: center; gap: 5px; color: var(--status-confirmed); } .lt-meta-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--status-confirmed); box-shadow: 0 0 6px var(--status-confirmed); animation: lt-pulse 2s var(--ease-out) infinite; } @keyframes lt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .lt-meta-sep { opacity: 0.5; } /* Featured artist card (link.html uses for the artist of the week, a.html re-uses for the artist's own "hero" card). */ .lt-featured { width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border: 1px solid var(--border-subtle); cursor: pointer; transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); text-decoration: none; color: inherit; display: block; } .lt-featured:hover { border-color: var(--border-medium); } .lt-featured:active { transform: scale(0.985); } .lt-featured-vis { position: relative; aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(135deg, #2a2126 0%, #0c0d10 100%); } .lt-featured-vis.lt-featured-vis-portrait { aspect-ratio: 4 / 5; } .lt-featured-vis::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 25% 45%, rgba(255,255,255,0.08), transparent 50%), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.05), transparent 45%); } .lt-featured-vis::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(8,9,11,0.92)); } .lt-featured-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .lt-featured-badge { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; padding: 4px 8px; border-radius: 999px; background: rgba(8,9,11,0.7); backdrop-filter: blur(8px); border: 1px solid var(--border-medium); color: var(--text-secondary); } .lt-featured-cap { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; } .lt-featured-pre { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-secondary); margin-bottom: 3px; } .lt-featured-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1; color: var(--text-primary); } .lt-featured-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); } .lt-featured-foot-go { color: var(--text-primary); display: inline-flex; align-items: center; gap: 4px; } /* Link buttons — vertical stack */ .lt-links { display: flex; flex-direction: column; gap: 8px; width: 100%; } .lt-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,0.04); backdrop-filter: blur(14px); border: 1px solid var(--border-subtle); color: var(--text-primary); text-decoration: none; transition: transform var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); position: relative; } .lt-link:active { transform: scale(0.985); } .lt-link:hover { background: rgba(255,255,255,0.06); border-color: var(--border-medium); } .lt-link.lt-link-primary { background: var(--text-primary); color: var(--bg-base); border-color: transparent; } .lt-link.lt-link-primary:hover { background: var(--text-primary); } .lt-link-ico { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid var(--border-subtle); } .lt-link.lt-link-primary .lt-link-ico { background: rgba(8,9,11,0.08); border-color: rgba(8,9,11,0.12); } .lt-link-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .lt-link-title { font-family: var(--font-display); font-size: 0.9rem; font-weight: 500; letter-spacing: -0.005em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lt-link-sub { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lt-link.lt-link-primary .lt-link-sub { color: rgba(8,9,11,0.55); } .lt-link-arrow { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.4; display: flex; align-items: center; justify-content: center; } .lt-link.lt-link-primary .lt-link-arrow { opacity: 0.6; } .lt-link-tag { position: absolute; top: -7px; right: 14px; font-family: var(--font-mono); font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.14em; padding: 3px 7px; border-radius: 999px; background: rgba(142,230,181,0.18); color: var(--status-confirmed); border: 1px solid rgba(142,230,181,0.3); } .lt-link-tag.lt-link-tag-amber { background: rgba(233,207,146,0.12); color: var(--status-pending); border-color: rgba(233,207,146,0.3); } /* Divider with mono label */ .lt-divider { display: flex; align-items: center; gap: 10px; width: 100%; font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-tertiary); margin-top: 6px; } .lt-divider::before, .lt-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); } /* Stats strip */ .lt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; } .lt-stat { padding: 12px 10px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); text-align: center; } .lt-stat-val { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; } .lt-stat-val sup { font-size: 0.55em; color: var(--text-tertiary); font-weight: 400; vertical-align: top; margin-left: 2px; font-family: var(--font-mono); font-style: normal; } .lt-stat-lbl { font-family: var(--font-mono); font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-tertiary); margin-top: 4px; } /* Cities pill strip (and the same shape works for genre tags on a.html) */ .lt-cities { width: 100%; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 2px; } .lt-city { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.16em; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-medium); color: var(--text-secondary); } /* Social row */ .lt-social { display: flex; gap: 8px; width: 100%; } .lt-social a { flex: 1; aspect-ratio: 1.5 / 1; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); color: var(--text-secondary); transition: all var(--duration-base) var(--ease-out); text-decoration: none; } .lt-social a:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); border-color: var(--border-medium); } .lt-social svg { width: 18px; height: 18px; } /* Media-embed wrap — used by a.html for SoundCloud / Spotify / YouTube iframes returned by UI.mediaEmbed(). */ .lt-media-embed { width: 100%; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); } .lt-media-embed iframe { display: block; width: 100%; border: 0; } /* Footer */ .lt-footer { margin-top: 8px; font-family: var(--font-mono); font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-tertiary); text-align: center; line-height: 1.7; padding-bottom: var(--space-xl); } .lt-footer a { color: var(--text-secondary); text-decoration: none; } .lt-footer a:hover { color: var(--text-primary); } .lt-footer .lt-footer-sep { opacity: 0.5; margin: 0 5px; } /* ═══════════════════════════════════════════════════════════ Admin console utilities — 2026-05-12 Extracted from admin.html (148 inline styles → utility classes). Most are also reusable on dashboard/audit-style surfaces. ═══════════════════════════════════════════════════════════ */ /* Mono family alone, no size override */ .font-mono { font-family: var(--font-mono); } /* Mono micro-text scale */ .mono-2xs { font-family: var(--font-mono); font-size: 0.68rem; } .mono-xxs { font-family: var(--font-mono); font-size: 0.7rem; } .mono-xs { font-family: var(--font-mono); font-size: 0.72rem; } .mono-tiny { font-family: var(--font-mono); font-size: 0.74rem; } .mono-fine { font-family: var(--font-mono); font-size: 0.76rem; } .mono-sm { font-family: var(--font-mono); font-size: 0.78rem; } .mono-md { font-family: var(--font-mono); font-size: 0.82rem; } .mono-lg { font-family: var(--font-mono); font-size: 0.85rem; } /* Mono row meta — recurring "right-aligned mono timestamp" pattern */ .meta-mono-right { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-tertiary); text-align: right; } /* Tertiary text micro — "X imported · Y failed", footer notes */ .text-sub { font-size: 0.68rem; color: var(--text-tertiary); margin-top: 2px; } /* Eyebrow variants — accent vs accent-soft above the page H1 */ .eyebrow-soft { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-soft); margin-bottom: 6px; } .eyebrow-accent { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); } /* Help paragraph — 14px-ish body text used as page-section intro */ .help-text { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: var(--space-md); line-height: 1.6; } /* Margin helpers using --space-* tokens (the .mb-md helper uses 8px; these match the actual CSS variables for inline-style equivalence). */ .mb-space-sm { margin-bottom: var(--space-sm); } .mb-space-md { margin-bottom: var(--space-md); } .mb-space-lg { margin-bottom: var(--space-lg); } .mb-space-xl { margin-bottom: var(--space-xl); } .mb-space-2xl { margin-bottom: var(--space-2xl); } .mt-space-sm { margin-top: var(--space-sm); } .mt-space-md { margin-top: var(--space-md); } .mt-space-lg { margin-top: var(--space-lg); } .p-space-sm { padding: var(--space-sm); } .p-space-xl-center { padding: var(--space-xl); text-align: center; } .empty-state-muted { text-align: center; padding: var(--space-xl); color: var(--text-tertiary); } .empty-state-error { text-align: center; padding: var(--space-xl); color: var(--status-cancelled); } .fw-500 { font-weight: 500; } .tabular-nums { font-variant-numeric: tabular-nums; } .m-0 { margin: 0; } .text-right { text-align: right; } .flex-2-min-200 { flex: 2; min-width: 200px; } .stack-xs-md { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-md); } /* Section padding + max-width helpers (replaces inline style="..." on index.html homepage sections — 2026-05-14 critique). All top-level sections now align to --space-3xl; the closing CTA gets an extra --space-4xl bottom because it's the page closer with no following section before the footer. */ .section-pad-3xl { padding: var(--space-3xl) 0; } .section-pad-cta { padding: var(--space-3xl) 0 var(--space-4xl); } .max-w-780 { max-width: 780px; } /* Three-column equal-fr grid with 8px gutters (artist-tile gallery inside the hero feature card). */ .grid-3-tight-8 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } /* ═══════════════════════════════════════════════════════════ Dashboard utilities (2026-05-16 F7 sweep) Replaces inline style="…" attrs on dashboard.html and artist-dashboard.html. Same approach as the homepage sweep: every inline style becomes a named class (even singletons), so the markup tells the story. Dynamic styles (JS variable interpolations) stay inline — they can't be classes. ═══════════════════════════════════════════════════════════ */ /* ── First-booking tour (activation quick-win #5, 2026-05-29) ── Prominent getting-started card shown to promoters with 0 bookings. Accent-tinted so it reads as "do this next", not "system notice". Self-removes once the promoter books (renderFirstBookingTour). */ .fbt-card { position: relative; background: linear-gradient(150deg, var(--accent-dim-10), var(--bg-card)); border: 1px solid var(--accent-dim-30); border-radius: var(--radius-lg); padding: var(--space-xl); margin-bottom: var(--space-xl); box-shadow: var(--accent-glow); } .fbt-dismiss { position: absolute; top: var(--space-md); right: var(--space-md); background: none; border: none; color: var(--text-tertiary); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); transition: color var(--duration-fast) var(--ease-out); } .fbt-dismiss:hover { color: var(--text-primary); } .fbt-eyebrow { display: block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 6px; } .fbt-title { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 6px; color: var(--text-primary); } .fbt-sub { margin: 0 0 var(--space-lg); color: var(--text-secondary); font-size: 0.95rem; } .fbt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg); } .fbt-step { display: flex; gap: var(--space-sm); align-items: flex-start; } .fbt-step-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-dim-20); color: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; } .fbt-step-title { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .fbt-step-text { font-size: 0.8rem; line-height: 1.45; color: var(--text-tertiary); } .fbt-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; } /* Stack steps vertically on narrow viewports so the roadmap stays legible on a phone. */ @media (max-width: 720px) { .fbt-steps { grid-template-columns: 1fr; gap: var(--space-sm); } } /* — Page chrome — */ .main-pad-y-dash { padding-top: var(--space-xl); padding-bottom: var(--space-3xl); } .h2-display-sm { margin-top: 4px; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.03em; } .welcome-date-mono { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); margin-bottom: 8px; } .welcome-headline { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.04em; line-height: 1.05; } .welcome-name-em { color: var(--accent-soft); } .welcome-sub { margin-top: 6px; color: var(--text-secondary); max-width: 60ch; } /* — Action-required card (promoter dashboard) — */ .action-req-card { border: 1px solid var(--accent-dim-20); box-shadow: var(--accent-glow); } .action-req-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-md); } .action-req-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-dim-10); display: flex; align-items: center; justify-content: center; color: var(--accent); } .action-req-eyebrow { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--font-mono); color: var(--accent); } .action-req-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-top: 2px; } .action-req-list { display: flex; flex-direction: column; gap: 8px; } .action-req-row { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); text-decoration: none; color: inherit; transition: border-color 120ms ease; } .action-req-row:hover { border-color: var(--border-medium); } .action-req-row-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--bg-raised); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); flex-shrink: 0; } .action-req-row-title { font-size: 0.88rem; color: var(--text-primary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .action-req-row-body { font-size: 0.74rem; color: var(--text-tertiary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .action-req-row-cta { font-size: 0.76rem; color: var(--accent); white-space: nowrap; flex-shrink: 0; font-weight: 500; } /* — Suggestion card (promoter dashboard) — */ .sug-link-full { margin-top: 12px; width: 100%; justify-content: center; } .empty-soft-help { color: var(--text-tertiary); font-size: 0.9rem; margin-bottom: 16px; } /* — Timeline event row (promoter dashboard) — */ .timeline-city-dot { width: 2px; height: 2px; border-radius: 50%; background: var(--text-quaternary); } .timeline-city-pill { display: inline-flex; align-items: center; gap: 4px; } /* — Pipeline bar fill is dynamic (width + color from JS) — must stay inline — */ /* — Artist dashboard layout helpers — */ .qb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); flex-wrap: wrap; } .qb-h3-fine { margin: 0 0 2px; font-size: 1rem; } .qb-presets { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-md); } .qb-custom-row { display: flex; align-items: center; gap: 6px; margin-left: auto; } .qb-date-input { background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 6px 10px; color: var(--text-primary); font-size: 0.82rem; color-scheme: dark; } .qb-list { display: flex; flex-direction: column; gap: 6px; } .qb-empty-fine { font-size: 0.78rem; color: var(--text-tertiary); padding: var(--space-sm) 0; } .qb-blocked-pill { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: 0.82rem; } .qb-unblock-btn { font-size: 0.72rem; padding: 4px 10px; } /* Share-EPK quick-action card uses