/* * PlaySpot Design System * Owns: CSS custom properties (tokens), typography scale, spacing system, component base styles, animations * Does NOT own: page layout, grids — those live in helpers.js getSharedCSS() * * Light mode = :root (default) * Dark mode = [data-theme="dark"] on * System pref handled by theme.js — data-theme is always set before paint (anti-FOUC) */ /* ===== PERFORMANCE: Selective transitions only ===== */ /* Only elements that change on theme toggle get transitions */ .theme-toggle, .nav-auth-btn, .submit-btn, .cta-btn, .update-btn, .nav-links a, .ps-btn, .ps-btn-ghost, .ps-input, .ps-select, .ps-textarea { transition: background-color 0.2s ease-out, color 0.15s ease-out, border-color 0.2s ease-out, opacity 0.15s ease-out, box-shadow 0.2s ease-out, transform 0.15s ease-out; } /* Never animate — kills mobile scrolling performance */ img, video, canvas, svg, .venue-grid, .info-grid, .live-grid, .nbhd-layout { transition: none !important; } /* ===== TYPOGRAPHY SCALE ===== */ :root { /* Font family */ --font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* Type scale */ --text-xs: 0.75rem; /* 12px caption */ --text-sm: 0.8125rem; /* 13px small */ --text-base: 1rem; /* 16px body */ --text-lg: 1.125rem; /* 18px section */ --text-xl: 1.25rem; /* 20px h4 */ --text-2xl: 1.5rem; /* 24px h3 */ --text-3xl: 2rem; /* 32px h2 */ --text-4xl: 2.5rem; /* 40px h1 */ /* Line heights */ --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.7; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.03em; /* Font weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; } /* ===== SPACING SYSTEM (4px base unit) ===== */ :root { --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ --sp-20: 5rem; /* 80px */ } /* ===== RADIUS TOKENS (max 16px) ===== */ :root { --radius-sm: 9px; /* inputs, small elements */ --radius-md: 12px; /* cards, panels */ --radius-lg: 14px; /* buttons, large cards */ --radius-xl: 16px; /* bottom sheets, modals */ --radius-full: 9999px; } /* Legacy token aliases for backward compat */ :root { --r: var(--radius-md); --r-sm: var(--radius-sm); --r-lg: var(--radius-lg); --r-full: var(--radius-full); } /* ===== LIGHT MODE (default) ===== */ :root { color-scheme: light; /* Backgrounds */ --bg: #fafaf8; /* page canvas — off-white */ --bg-2: #f0efea; /* inset surfaces, hover states */ --surface: #ffffff; /* cards, panels */ --surface-2: #f8f8f5; /* slightly tinted surface */ /* Borders */ --border: rgba(0, 0, 0, 0.07); --border-strong: rgba(0, 0, 0, 0.12); /* Text hierarchy */ --text: #1a1a1e; /* headings, primary */ --text-2: #5a5f6e; /* body copy, secondary */ --text-3: #9aa0b0; /* captions, muted */ /* Brand accent */ --accent: #16a34a; --accent-soft: #dcfce7; --accent-hover: #15803d; --accent-muted: rgba(22, 163, 74, 0.08); /* Semantic status — NEVER change meaning */ --green: #22c55e; --green-bg: #dcfce7; --green-text: #14532d; --yellow: #eab308; --yellow-bg: #fef9c3; --yellow-text:#713f12; --red: #ef4444; --red-bg: #fee2e2; --red-text: #7f1d1d; --gray: #9ca3af; --gray-bg: #f3f4f6; /* Tag pills — colored bg at 15%, colored text */ --blue: #3b82f6; --blue-bg: #dbeafe; --blue-text: #1e3a8a; --purple: #8b5cf6; --purple-bg: #ede9fe; --purple-text: #4c1d95; --orange: #d97706; /* Elevation */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 -4px 20px rgba(0, 0, 0, 0.15); /* bottom sheets */ --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12); /* Focus ring */ --ring: 0 0 0 2px var(--accent-soft), 0 0 0 4px var(--accent); /* Toggle icon */ --toggle-icon: '☀️'; } /* ===== DARK MODE ===== */ [data-theme="dark"] { color-scheme: dark; --bg: #1a1a1e; /* charcoal */ --bg-2: #242428; /* slightly elevated */ --surface: #2a2a30; /* card surfaces */ --surface-2: #32323c; /* raised surfaces */ --border: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.12); --text: #f0f0f5; --text-2: #9098b0; --text-3: #5a6070; --accent: #22c55e; --accent-soft: rgba(34, 197, 94, 0.12); --accent-hover: #16a34a; --accent-muted: rgba(34, 197, 94, 0.08); --green: #22c55e; --green-bg: rgba(34, 197, 94, 0.15); --green-text: #86efac; --yellow: #eab308; --yellow-bg: rgba(234, 179, 8, 0.15); --yellow-text:#fde047; --red: #ef4444; --red-bg: rgba(239, 68, 68, 0.15); --red-text: #fca5a5; --gray: #6b7280; --gray-bg: rgba(107, 114, 128, 0.15); --blue: #60a5fa; --blue-bg: rgba(96, 165, 250, 0.15); --blue-text: #93c5fd; --purple: #a78bfa; --purple-bg: rgba(167, 139, 250, 0.15); --purple-text: #c4b5fd; --orange: #fbbf24; /* Elevated cards get subtle border in dark mode */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40); --shadow-lg: 0 -4px 24px rgba(0, 0, 0, 0.35); --shadow-xl: 0 8px 40px rgba(0, 0, 0, 0.50); --toggle-icon: '🌙'; } /* ===== THEME TOGGLE BUTTON ===== */ .theme-toggle { background: none; border: 1.5px solid var(--border-strong); border-radius: var(--radius-full); cursor: pointer; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: 0.9rem; color: var(--text-2); flex-shrink: 0; padding: 0; line-height: 1; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); transform: scale(1.05); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle-icon { pointer-events: none; display: block; transition: transform 0.3s ease; } .theme-toggle.switching .theme-toggle-icon { transform: rotate(360deg); } /* ============================================================ COMPONENT LIBRARY ============================================================ */ /* ---- BUTTONS ---- */ .ps-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px; /* mobile touch target */ padding: var(--sp-3) var(--sp-5); /* 12px 20px */ border-radius: var(--radius-lg); border: none; font-family: var(--font); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-normal); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; text-decoration: none; user-select: none; transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.15s ease-out, opacity 0.15s ease-out; } .ps-btn:active { transform: scale(0.97); } .ps-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* Primary — green fill */ .ps-btn-primary { background: var(--accent); color: #ffffff; box-shadow: var(--shadow-sm); } .ps-btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); } .ps-btn-primary:active { background: var(--accent-hover); } /* Secondary — outlined */ .ps-btn-secondary { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); } .ps-btn-secondary:hover { background: var(--accent-muted); } /* Ghost — text only */ .ps-btn-ghost { background: transparent; color: var(--text-2); border: none; min-height: 44px; padding: var(--sp-2) var(--sp-4); } .ps-btn-ghost:hover { color: var(--text); background: var(--bg-2); } /* Update CTA button — large, obvious, green */ .update-btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); background: var(--accent); color: #fff; border: none; border-radius: var(--radius-full); font-family: var(--font); font-weight: var(--weight-bold); font-size: var(--text-sm); cursor: pointer; min-height: 48px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.15s ease-out; box-shadow: var(--shadow-sm); } .update-btn:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); } .update-btn:active { transform: scale(0.97); } /* ---- CARDS ---- */ .ps-card { background: var(--surface); border-radius: var(--radius-md); padding: var(--sp-4); box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: box-shadow 0.2s ease-out, transform 0.15s ease-out, border-color 0.2s ease-out; } .ps-card-elevated:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .ps-card:active { transform: scale(0.98); box-shadow: var(--shadow-sm); } /* Dark mode: elevated cards get subtle border */ [data-theme="dark"] .ps-card { border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .ps-card-elevated { border-color: rgba(255, 255, 255, 0.10); } /* Venue card — already styled in shared CSS, refine here */ .venue-card { background: var(--surface); border-radius: var(--radius-md); padding: var(--sp-4); box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: box-shadow 0.2s ease-out, transform 0.15s ease-out, border-color 0.2s ease-out; } .venue-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); } .venue-card:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-sm); } /* ---- TAGS / PILLS ---- */ .ps-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 var(--sp-3); /* 0 12px */ border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-normal); white-space: nowrap; } /* Colored bg at 15%, colored text — NEVER solid bg */ .ps-tag-blue { background: var(--blue-bg); color: var(--blue-text); } .ps-tag-green { background: var(--green-bg); color: var(--green-text); } .ps-tag-yellow { background: var(--yellow-bg); color: var(--yellow-text); } .ps-tag-purple { background: var(--purple-bg); color: var(--purple-text); } .ps-tag-gray { background: var(--gray-bg); color: var(--text-2); } /* Legacy compat */ .card-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 9px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); } .card-tag-blue { background: var(--blue-bg); color: var(--blue-text); } .card-tag-green { background: var(--green-bg); color: var(--green-text); } .card-tag-yellow { background: var(--yellow-bg); color: var(--yellow-text); } .card-tag-purple { background: var(--purple-bg); color: var(--purple-text); } .card-tag-gray { background: var(--gray-bg); color: var(--text-2); } /* ---- INPUT FIELDS ---- */ .ps-input, .ps-select, .ps-textarea { width: 100%; min-height: 48px; padding: var(--sp-3) var(--sp-4); /* 12px 16px */ border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); font-family: var(--font); font-size: var(--text-base); font-weight: var(--weight-normal); background: var(--surface); color: var(--text); outline: none; transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; -webkit-appearance: none; appearance: none; } .ps-input::placeholder, .ps-textarea::placeholder { color: var(--text-3); } .ps-input:focus, .ps-select:focus, .ps-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .ps-input.error, .ps-select.error, .ps-textarea.error { border-color: var(--red); } .ps-error-text { font-size: var(--text-sm); color: var(--red); margin-top: var(--sp-1); font-weight: var(--weight-medium); } /* ---- BOTTOM SHEET / MODAL ---- */ .ps-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000; display: none; align-items: flex-end; justify-content: center; padding: 0; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .ps-modal-overlay.open { display: flex; } /* Mobile: bottom sheet slides up */ @media (max-width: 640px) { .ps-modal-overlay { align-items: flex-end; } } /* Desktop: centered */ @media (min-width: 641px) { .ps-modal-overlay { align-items: center; } } .ps-modal { background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md); padding: var(--sp-6); max-width: 440px; width: 100%; box-shadow: var(--shadow-lg); position: relative; /* Bottom sheet slide-in on mobile */ animation: sheetSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1); border: 1px solid var(--border); } @keyframes sheetSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Desktop modal: fade+scale */ @media (min-width: 641px) { .ps-modal { animation: modalIn 0.2s ease-out; border-radius: var(--radius-xl); } @keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: none; } } } .ps-modal-close { position: absolute; top: var(--sp-3); right: var(--sp-3); background: var(--bg-2); border: none; border-radius: var(--radius-full); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); color: var(--text-3); cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.15s; } .ps-modal-close:hover { background: var(--border-strong); color: var(--text); } .ps-modal-close:active { transform: scale(0.95); } /* Progress indicator */ .ps-modal-progress { display: flex; gap: 6px; margin-bottom: var(--sp-5); } .ps-modal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); transition: background 0.2s ease-out, transform 0.2s ease-out; } .ps-modal-dot.active { background: var(--accent); transform: scale(1.25); } .ps-modal-dot.done { background: var(--text); } .ps-modal h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--text); margin-bottom: var(--sp-5); text-align: center; } /* Update modal options */ .ps-modal-options { display: flex; flex-direction: column; gap: var(--sp-3); } .ps-modal-opt { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); font-family: var(--font); font-size: var(--text-base); font-weight: var(--weight-medium); background: var(--surface); color: var(--text); cursor: pointer; text-align: left; min-height: 52px; /* comfortable touch target */ -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: border-color 0.15s ease-out, background 0.15s ease-out, transform 0.15s ease-out, box-shadow 0.15s ease-out; } .ps-modal-opt:hover { border-color: var(--accent); background: var(--accent-muted); } .ps-modal-opt:active { transform: scale(0.97); } .ps-modal-opt.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); } .ps-modal-opt .opt-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; color: transparent; transition: all 0.15s ease-out; } .ps-modal-opt.selected .opt-check { background: var(--accent); border-color: var(--accent); color: #fff; } .ps-modal-confirm { width: 100%; min-height: 48px; padding: var(--sp-3) var(--sp-4); background: var(--accent); color: #fff; border: none; border-radius: var(--radius-lg); font-family: var(--font); font-weight: var(--weight-bold); font-size: var(--text-base); cursor: pointer; margin-top: var(--sp-5); transition: background 0.2s ease-out, transform 0.15s ease-out, box-shadow 0.2s ease-out; box-shadow: var(--shadow-sm); } .ps-modal-confirm:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); } .ps-modal-confirm:active { transform: scale(0.97); } .ps-modal-confirm:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* Success state */ .ps-modal-success { text-align: center; padding: var(--sp-8) 0; } .ps-modal-success .check-icon { font-size: 3rem; margin-bottom: var(--sp-4); display: block; animation: successPop 0.3s ease-out; } @keyframes successPop { 0% { transform: scale(0.5); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } .ps-modal-success p { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--text); } .ps-modal-success .sub { font-size: var(--text-sm); color: var(--text-2); margin-top: var(--sp-1); font-weight: var(--weight-normal); } /* Toast notification */ .ps-toast { position: fixed; bottom: var(--sp-6); left: 50%; transform: translateX(-50%) translateY(120%); background: var(--text); color: var(--bg); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--weight-semibold); z-index: 2000; display: flex; align-items: center; gap: var(--sp-2); box-shadow: var(--shadow-lg); opacity: 0; transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease-out; pointer-events: none; white-space: nowrap; } .ps-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .ps-toast .toast-check { color: var(--green); font-size: var(--text-base); } /* ---- LIVE STATUS INDICATORS ---- */ .live-active .card-live-status { color: var(--green); } .live-busy .card-live-status { color: var(--yellow); } .live-quiet .card-live-status { color: var(--red); } .live-unknown .card-live-status { color: var(--text-3); } .live-active { background: var(--green-bg); } .live-busy { background: var(--yellow-bg); } .live-quiet { background: var(--red-bg); } .live-unknown { background: var(--gray-bg); } /* Status pulse — 2s infinite */ .live-pulse { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; animation: statusPulse 2s ease-in-out infinite; } @keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .pulse-green { background: var(--green); } .pulse-yellow{ background: var(--yellow); } .pulse-red { background: var(--red); } .pulse-gray { background: var(--gray); animation: none; } /* ---- FORM STYLES ---- */ .form-group { margin-bottom: var(--sp-5); } .form-group label { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--sp-2); color: var(--text-2); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .submit-btn { min-height: 48px; padding: var(--sp-3) var(--sp-5); background: var(--text); color: var(--bg); border: none; border-radius: var(--radius-lg); font-family: var(--font); font-weight: var(--weight-bold); font-size: var(--text-sm); cursor: pointer; transition: opacity 0.15s ease-out, transform 0.1s ease-out; } .submit-btn:hover { opacity: 0.85; } .submit-btn:active { transform: scale(0.97); } .submit-btn:disabled { opacity: 0.4; cursor: not-allowed; } .form-success { background: var(--green-bg); color: var(--green-text); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-weight: var(--weight-semibold); font-size: var(--text-sm); margin-bottom: var(--sp-4); display: none; } .form-error { background: var(--red-bg); color: var(--red-text); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-weight: var(--weight-semibold); font-size: var(--text-sm); margin-bottom: var(--sp-4); display: none; } /* ---- SPORTS FILTER PILLS ---- */ .sport-pills { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5); } .sport-pill { padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--weight-semibold); border: 1.5px solid var(--border-strong); color: var(--text-2); background: var(--surface); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: all 0.15s ease-out; text-decoration: none; } .sport-pill:hover { border-color: var(--accent); color: var(--accent); } .sport-pill:active { opacity: 0.85; } .sport-pill.active { background: var(--text); color: var(--bg); border-color: var(--text); } /* ---- AUTH CARDS ---- */ .auth-card { background: var(--surface); border-radius: var(--radius-xl); padding: var(--sp-8); box-shadow: var(--shadow-md); border: 1px solid var(--border); } .auth-card h1 { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--text); margin-bottom: var(--sp-1); } .auth-card .subtitle { color: var(--text-2); font-size: var(--text-sm); margin-bottom: var(--sp-6); } .auth-wrap { max-width: 420px; margin: var(--sp-10) auto; padding: 0 var(--sp-4); } .auth-card .submit-btn { width: 100%; margin-top: var(--sp-3); } .auth-footer { text-align: center; margin-top: var(--sp-6); font-size: var(--text-sm); color: var(--text-2); } /* ---- FOOTER ---- */ .footer { text-align: center; padding: var(--sp-6) var(--sp-4); color: var(--text-3); font-size: var(--text-xs); max-width: 1080px; margin: var(--sp-8) auto 0; } /* ---- CTA SECTIONS ---- */ .ps-cta { background: var(--surface); border-radius: var(--radius-xl); padding: var(--sp-10) var(--sp-6); text-align: center; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .ps-cta h2 { font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--text); margin-bottom: var(--sp-2); } .ps-cta p { color: var(--text-2); font-size: var(--text-sm); margin-bottom: var(--sp-5); max-width: 420px; margin-left: auto; margin-right: auto; line-height: var(--leading-relaxed); } /* ---- DETAIL PAGE OVERRIDES ---- */ .detail-card { background: var(--surface); border-radius: var(--radius-xl); padding: var(--sp-6); box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: var(--sp-5); } .detail-card h1 { font-size: var(--text-2xl); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-tight); margin-bottom: var(--sp-1); color: var(--text); } .detail-meta { display: flex; gap: var(--sp-5); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-2); margin: var(--sp-3) 0; } /* ---- LIVE BLOCK ---- */ .live-block { background: var(--surface); border-radius: var(--radius-xl); padding: var(--sp-5); box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: var(--sp-5); } .live-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); } .live-title { font-weight: var(--weight-bold); font-size: var(--text-lg); display: flex; align-items: center; gap: var(--sp-2); } .live-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); } .live-item { text-align: center; padding: var(--sp-4); background: var(--bg-2); border-radius: var(--radius-sm); } .live-item-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); font-weight: var(--weight-semibold); margin-bottom: var(--sp-1); } .live-item-value { font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--text); } .live-time { font-size: var(--text-xs); color: var(--text-3); margin-top: var(--sp-3); } .live-empty { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--text-3); font-size: var(--text-sm); } .live-update-btn-wrap { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); } /* ---- SECTION LABELS ---- */ .section-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); font-weight: var(--weight-bold); margin-bottom: var(--sp-1); } .section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); flex-wrap: wrap; gap: var(--sp-2); } .section-head h2 { font-size: var(--text-lg); font-weight: var(--weight-bold); } .section-head a { font-size: var(--text-sm); color: var(--text-3); font-weight: var(--weight-medium); } /* ---- TAGS BLOCK ---- */ .tags-block { background: var(--surface); border-radius: var(--radius-xl); padding: var(--sp-4); box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: var(--sp-5); } .tags-block h3 { font-size: var(--text-sm); margin-bottom: var(--sp-3); color: var(--text); font-weight: var(--weight-bold); } .tag-pills { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .tag-pill { font-size: var(--text-xs); padding: 4px 11px; border-radius: var(--radius-full); font-weight: var(--weight-medium); } /* ---- SCHEDULE BLOCK ---- */ .sched-block { background: var(--surface); border-radius: var(--radius-xl); padding: var(--sp-4); box-shadow: var(--shadow-sm); border: 1px solid var(--border); margin-bottom: var(--sp-5); } .sched-block h3 { font-size: var(--text-sm); color: var(--text); margin-bottom: var(--sp-1); font-weight: var(--weight-bold); } .sched-note { font-size: var(--text-xs); color: var(--text-3); margin-bottom: var(--sp-3); } .sched-list { list-style: none; } .sched-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); } .sched-item:last-child { border-bottom: none; } .sched-day { font-weight: var(--weight-bold); font-size: var(--text-sm); min-width: 80px; color: var(--text); } .sched-time { font-size: var(--text-sm); color: var(--text-2); min-width: 70px; } .sched-desc { font-size: var(--text-xs); color: var(--text-3); } /* ---- INFO GRID ---- */ .info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); } .info-item { padding: var(--sp-3); background: var(--bg-2); border-radius: var(--radius-sm); } .info-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); margin-bottom: 3px; font-weight: var(--weight-semibold); } .info-value { font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--text); } /* ---- REVIEW SECTION ---- */ .reviews-section { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--border); opacity: 0.85; } .reviews-section h2 { font-size: var(--text-xs); margin-bottom: var(--sp-4); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); font-weight: var(--weight-semibold); } .review-card { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--sp-4); border: 1px solid var(--border); margin-bottom: var(--sp-3); } .review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); } .review-author { font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--text-2); } .review-date { font-size: var(--text-xs); color: var(--text-3); } .review-text { font-size: var(--text-sm); color: var(--text-2); line-height: var(--leading-relaxed); } .review-meta { display: flex; gap: var(--sp-5); margin-top: var(--sp-2); font-size: var(--text-xs); color: var(--text-3); } .stars { color: var(--orange); font-size: var(--text-xs); letter-spacing: 0.5px; } .rating-num { font-weight: var(--weight-semibold); font-size: var(--text-xs); color: var(--text-2); } .review-count { color: var(--text-3); font-size: var(--text-xs); } /* ---- REVIEW FORM ---- */ .review-form-section { background: var(--surface); border-radius: var(--radius-xl); padding: var(--sp-5); border: 1px solid var(--border); margin-top: var(--sp-5); } .review-form-section h3 { font-size: var(--text-base); margin-bottom: var(--sp-4); font-weight: var(--weight-bold); } /* ---- LOGIN PROMPT ---- */ .login-prompt { text-align: center; padding: var(--sp-5); color: var(--text-2); } .login-prompt p { margin-bottom: var(--sp-4); font-size: var(--text-sm); } .login-prompt .btn { display: inline-block; padding: var(--sp-2) var(--sp-4); background: var(--text); color: var(--bg); border-radius: var(--radius-lg); font-weight: var(--weight-bold); font-size: var(--text-sm); text-decoration: none; } /* ---- BACK LINK ---- */ .back-link { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--text-3); font-size: var(--text-sm); margin-bottom: var(--sp-4); text-decoration: none; font-weight: var(--weight-medium); } .back-link:hover { color: var(--accent); } /* ---- EMPTY STATE ---- */ .empty { text-align: center; padding: var(--sp-12) var(--sp-4); color: var(--text-2); } .empty h3 { font-size: var(--text-xl); margin-bottom: var(--sp-2); color: var(--text); } /* ---- LEADERBOARD MINI ---- */ .lb-mini-grid { background: var(--surface); border-radius: var(--radius-xl); border: 1px solid var(--border); overflow: hidden; } .lb-mini-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); } .lb-mini-row:last-child { border-bottom: none; } .lb-mini-row:hover { background: var(--bg-2); } .lb-mini-rank { font-weight: var(--weight-bold); font-size: var(--text-xs); color: var(--text-3); min-width: 24px; } .lb-mini-info { display: flex; align-items: center; gap: var(--sp-2); flex: 1; } .lb-mini-name { font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--text); } .lb-mini-streak { font-size: var(--text-xs); color: var(--orange); } .lb-mini-updates { font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; } /* ---- HERO (home page) ---- */ .hero { padding: var(--sp-12) var(--sp-4) var(--sp-8); max-width: 1080px; margin: 0 auto; } .hero h1 { font-size: var(--text-4xl); margin-bottom: var(--sp-3); color: var(--text); font-weight: var(--weight-extrabold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } .hero p { font-size: var(--text-base); color: var(--text-2); max-width: 460px; margin-bottom: var(--sp-6); line-height: var(--leading-relaxed); } .hero-search { display: flex; gap: var(--sp-2); max-width: 500px; } .hero-search input { flex: 1; padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--border-strong); border-radius: var(--radius-lg); font-family: var(--font); font-size: var(--text-sm); background: var(--surface); color: var(--text); outline: none; transition: border-color 0.15s; } .hero-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .hero-search input::placeholder { color: var(--text-3); } .hero-search button { padding: var(--sp-3) var(--sp-5); background: var(--text); color: var(--bg); border: none; border-radius: var(--radius-lg); font-family: var(--font); font-weight: var(--weight-bold); font-size: var(--text-sm); cursor: pointer; white-space: nowrap; transition: opacity 0.15s, transform 0.1s; } .hero-search button:hover { opacity: 0.85; } .hero-search button:active { transform: scale(0.97); } .hero-stats { display: flex; gap: var(--sp-8); margin-top: var(--sp-6); } .hero-stat-num { font-weight: var(--weight-extrabold); font-size: var(--text-2xl); color: var(--text); } .hero-stat-label { font-size: var(--text-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em; font-weight: var(--weight-semibold); margin-top: 2px; } /* ---- VENUE CARD INTERNAL ---- */ .card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); } .card-name { font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--text); line-height: 1.3; } .card-sport { font-size: var(--text-xs); font-weight: var(--weight-bold); padding: 3px 9px; border-radius: var(--radius-full); background: var(--bg-2); color: var(--text-3); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; } .card-addr { font-size: var(--text-xs); color: var(--text-3); line-height: 1.4; } .card-tags { display: flex; gap: 6px; flex-wrap: wrap; } .card-live { border-radius: var(--radius-md); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-1); } .card-live-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .card-live-status { font-weight: var(--weight-extrabold); font-size: var(--text-xl); line-height: 1; letter-spacing: var(--tracking-tight); } .card-live-trust { font-size: var(--text-xs); color: var(--text-3); font-weight: var(--weight-medium); } .card-live-detail { font-size: var(--text-sm); color: var(--text-2); font-weight: var(--weight-medium); } .card-rating { display: flex; align-items: center; gap: var(--sp-1); } /* ---- RESULTS HEAD ---- */ .results-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); flex-wrap: wrap; gap: var(--sp-2); } .results-head h2 { font-size: var(--text-base); font-weight: var(--weight-bold); } .results-count { color: var(--text-3); font-size: var(--text-sm); } /* ---- SECTION (home page) ---- */ .section { margin-bottom: var(--sp-8); } /* ---- PAGE CONTAINER ---- */ .container { max-width: 1080px; margin: 0 auto; padding: var(--sp-6); } /* ---- NAV ---- */ .app-nav { padding: 0 var(--sp-4); height: 58px; display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin: 0 auto; } .nav-wrap { width: 100%; } .logo { font-weight: var(--weight-extrabold); font-size: 1.1rem; color: var(--text); display: flex; align-items: center; gap: 7px; text-decoration: none; letter-spacing: var(--tracking-tight); } .logo-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; } .nav-links { display: flex; gap: var(--sp-5); align-items: center; } .nav-links a { font-size: var(--text-xs); color: var(--text-2); font-weight: var(--weight-medium); text-decoration: none; } .nav-links a:hover { color: var(--text); } .nav-links a.active { color: var(--accent); } .nav-auth-btn { padding: 7px 16px; background: var(--text); color: var(--bg) !important; border-radius: var(--radius-full); font-weight: var(--weight-bold); font-size: var(--text-xs); letter-spacing: 0.01em; transition: opacity 0.15s; } .nav-auth-btn:hover { opacity: 0.8; } .nav-user { display: flex; align-items: center; gap: var(--sp-2); } .nav-user-name { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text); } .nav-user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); font-size: var(--text-xs); } .nav-logout { font-size: var(--text-xs); color: var(--text-3) !important; cursor: pointer; } /* ---- VENUE GRID ---- */ .venue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); contain: layout style; } /* ---- CTA BUTTON ---- */ .cta-btn { display: inline-block; padding: 14px 32px; background: var(--accent); color: #fff; border-radius: var(--radius-full); font-weight: var(--weight-bold); font-size: var(--text-sm); text-decoration: none; transition: background 0.2s ease-out, transform 0.15s ease-out, box-shadow 0.2s ease-out; box-shadow: var(--shadow-sm); min-height: 48px; } .cta-btn:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); } .cta-btn:active { transform: scale(0.97); } /* ---- CONFIRM STEP (review summary in modal) ---- */ .ps-confirm-summary { background: var(--bg-2); border-radius: var(--radius-md); padding: var(--sp-4); margin-bottom: var(--sp-4); } .ps-confirm-row { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); } .ps-confirm-row:last-child { border-bottom: none; } .ps-confirm-label { font-size: var(--text-sm); color: var(--text-2); } .ps-confirm-value { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text); } /* ============================================================ RESPONSIVE OVERRIDES ============================================================ */ @media (max-width: 768px) { .container { padding: var(--sp-4); } .hero { padding: var(--sp-8) var(--sp-4) var(--sp-6); } .hero h1 { font-size: var(--text-3xl); } .hero-search { flex-direction: column; } .hero-stats { gap: var(--sp-5); } .search-form { flex-direction: column; } .detail-card { padding: var(--sp-4); } .detail-card h1 { font-size: var(--text-xl); } .detail-meta { gap: var(--sp-3); } .info-grid { grid-template-columns: 1fr 1fr; } .app-nav { padding: 0 var(--sp-4); } .auth-wrap { margin: var(--sp-8) auto; } .auth-card { padding: var(--sp-5); } .live-grid { grid-template-columns: 1fr; gap: var(--sp-2); } .form-row { grid-template-columns: 1fr; } .ps-modal { border-radius: var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md); } } @media (max-width: 480px) { .container { padding: var(--sp-3); } .venue-grid { grid-template-columns: 1fr; gap: var(--sp-3); } .hero { padding: var(--sp-6) var(--sp-3) var(--sp-4); } .hero h1 { font-size: var(--text-2xl); } .hero-stats { gap: var(--sp-4); } .info-grid { grid-template-columns: 1fr; } .live-grid { grid-template-columns: 1fr; } .app-nav { padding: 0 var(--sp-3); } .nav-links { gap: var(--sp-2); } } @media (max-width: 360px) { .container { padding: var(--sp-2); } .hero { padding: var(--sp-4) var(--sp-2) var(--sp-3); } .hero h1 { font-size: var(--text-xl); } .hero-search { flex-direction: column; } .hero-stats { gap: var(--sp-3); } .nav-auth-btn { padding: 6px 12px; font-size: 11px; } .pills { gap: var(--sp-1); } .venue-card { padding: var(--sp-3); } .results-head h2 { font-size: var(--text-sm); } .card-live-status { font-size: var(--text-lg); } }