/* ============================================================================ BuzzHive — Global Stylesheet Light, modern, neutral. Inter typography. BuzzHive orange accent. Built mobile-first. No external dependencies (Inter loaded via Google Fonts in ). ============================================================================ */ /* ---------- Tokens ---------- */ :root { /* Surface */ --bg: #ffffff; --bg-soft: #f8fafc; --bg-sunk: #f1f5f9; /* Text */ --fg: #0f172a; --fg-muted: #475569; --fg-soft: #94a3b8; --fg-inverse: #ffffff; /* Borders */ --border: #e2e8f0; --border-strong: #cbd5e1; /* Brand / accent (BuzzHive orange) */ --accent: #ec6b1c; --accent-hover: #c25714; --accent-soft: #fff3e7; --accent-fg: #0f172a; /* Status colors */ --success: #059669; --success-soft: #ecfdf5; --warning: #d97706; --warning-soft: #fffbeb; --danger: #dc2626; --danger-soft: #fef2f2; /* Spacing scale (rem) */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-7: 1.75rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Radii */ --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px; --r-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04); --shadow-md: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04); --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04); /* Layout */ --container-max: 1120px; --container-narrow: 720px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.55; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-8) 0; } code, pre, kbd { font-family: var(--font-mono); font-size: 0.875em; } button { font-family: inherit; } /* ---------- Layout ---------- */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--s-5); } .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--s-5); } .stack > * + * { margin-top: var(--s-5); } .stack-tight > * + * { margin-top: var(--s-3); } .stack-loose > * + * { margin-top: var(--s-8); } .row { display: flex; gap: var(--s-4); align-items: center; } .row.between { justify-content: space-between; } .row.wrap { flex-wrap: wrap; } .grid { display: grid; gap: var(--s-5); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* ---------- Landing-page visual treatments ---------- */ .section-soft { background: var(--bg-soft); } .section-accent-soft { background: var(--accent-soft); } .section-pad { padding: var(--s-12) 0; } .section-pad-lg { padding: var(--s-16) 0; } .hero-gradient { position: relative; overflow: hidden; background: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(236, 107, 28, 0.12), transparent 60%), radial-gradient(ellipse 60% 50% at 100% 100%, rgba(236, 72, 153, 0.08), transparent 60%), linear-gradient(180deg, #ffffff 0%, #fafbff 100%); } .icon-circle { width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; margin-bottom: var(--s-4); } .step-number { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--accent-fg); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; font-feature-settings: 'tnum'; box-shadow: 0 6px 20px -6px rgba(236, 107, 28, 0.5); } .cta-gradient { background: linear-gradient(135deg, #ec6b1c 0%, #f38139 50%, #ec4899 100%); color: white; border: 0; } .cta-gradient h2, .cta-gradient h3, .cta-gradient p { color: white; } .cta-gradient .btn-primary { background: white; color: var(--accent); border-color: white; } .cta-gradient .btn-primary:hover { background: #f8fafc; color: var(--accent); } .hero-art { position: relative; aspect-ratio: 1; max-width: 420px; margin: 0 auto; } .feature-row { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-10); align-items: center; } @media (max-width: 760px) { .feature-row { grid-template-columns: 1fr; } } /* ========================================================================== LANDING PAGE — DARK THEME (BuzzHive + TicketLeap) Scoped to so other pages stay on the light theme. ========================================================================== */ body.landing-dark { background: #0a0a0a; color: #f5f5f5; } body.landing-dark .site-header { background: rgba(10, 10, 10, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } body.landing-dark .brand { color: #ffffff; } body.landing-dark .brand-mark { background: #ec6b1c; color: #0a0a0a; } body.landing-dark .nav a { color: #cbd5e1; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; font-weight: 600; } body.landing-dark .nav a:hover { color: #ffffff; } body.landing-dark .nav a.btn-secondary { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.2); letter-spacing: 0.06em; border-radius: 999px; padding: 8px 18px; } body.landing-dark .nav a.btn-secondary:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; } body.landing-dark .nav a.btn-primary { background: #ec6b1c; color: #ffffff; border-color: #ec6b1c; border-radius: 999px; padding: 8px 18px; letter-spacing: 0.06em; } body.landing-dark .nav a.btn-primary:hover { background: #f97316; border-color: #f97316; } /* Hero with photo background + dark overlay + animated color glow */ body.landing-dark .land-hero { position: relative; min-height: 86vh; display: flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate; text-align: center; padding: var(--s-10) var(--s-5); } body.landing-dark .land-hero::before { /* Photo background with darkening overlay */ content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, 0.7) 0%, rgba(10, 10, 10, 0.55) 50%, rgba(10, 10, 10, 0.85) 100%), url('/assets/img/hero.jpg') center/cover no-repeat; z-index: -2; } body.landing-dark .land-hero::after { /* Animated color-glow blobs that drift to give the page motion */ content: ''; position: absolute; inset: -10%; background: radial-gradient(ellipse 35% 45% at 20% 30%, rgba(236, 107, 28, 0.30), transparent 60%), radial-gradient(ellipse 30% 40% at 80% 70%, rgba(6, 182, 212, 0.22), transparent 60%), radial-gradient(ellipse 25% 35% at 60% 20%, rgba(236, 72, 153, 0.18), transparent 60%); z-index: -1; pointer-events: none; animation: drift 18s ease-in-out infinite; mix-blend-mode: screen; } @keyframes drift { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(3%, -2%) scale(1.05); } 66% { transform: translate(-2%, 3%) scale(0.97); } 100% { transform: translate(0, 0) scale(1); } } /* Pulsing accent line under the eyebrow */ @keyframes pulseGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } body.landing-dark .land-eyebrow { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: #ec6b1c; font-weight: 600; } body.landing-dark .land-eyebrow::before { content: '— '; letter-spacing: 0; } body.landing-dark .land-hero h1, body.landing-dark .land-section h2, body.landing-dark .footer-cta h2 { font-family: 'Archivo Black', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 900; letter-spacing: -0.01em; } body.landing-dark .land-hero h1 { font-size: clamp(2.5rem, 7.5vw, 6rem); line-height: 0.92; text-transform: uppercase; color: #ffffff; margin: var(--s-4) 0 var(--s-5); text-shadow: 0 4px 32px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.4); } body.landing-dark .land-hero h1 .accent { color: #ec6b1c; -webkit-text-fill-color: #ec6b1c; background: none; text-shadow: 0 2px 24px rgba(236, 107, 28, 0.4); } body.landing-dark .land-hero h1 .neon { color: #06b6d4; } body.landing-dark .land-hero p.lead { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; color: #cbd5e1; max-width: 600px; margin: 0 auto var(--s-7); } body.landing-dark .btn-pill { display: inline-block; background: #ec6b1c; color: #ffffff; padding: 16px 32px; border-radius: 999px; font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border: 0; transition: transform 0.15s, box-shadow 0.2s; box-shadow: 0 8px 32px -8px rgba(236, 107, 28, 0.5); } body.landing-dark .btn-pill:hover { background: #f97316; transform: translateY(-1px); box-shadow: 0 12px 40px -8px rgba(236, 107, 28, 0.7); text-decoration: none; color: white; } body.landing-dark .btn-pill-ghost { background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: none; } body.landing-dark .btn-pill-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); color: white; box-shadow: none; } /* Vertical text on the right edge (BuzzHive signature element) */ body.landing-dark .vertical-rail { position: absolute; top: 50%; right: 16px; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: 0.4em; color: rgba(255, 255, 255, 0.35); pointer-events: none; } /* Section bands */ body.landing-dark .land-section { padding: var(--s-12) var(--s-5); position: relative; } body.landing-dark .land-section.alt { background: #111111; border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } body.landing-dark .land-section h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; color: #ffffff; margin: var(--s-3) 0 var(--s-4); } body.landing-dark .land-section h2 .accent { color: #ec6b1c; } body.landing-dark .land-section h3 { color: #ffffff; } body.landing-dark .land-section p { color: #cbd5e1; } body.landing-dark .land-section .muted { color: #94a3b8; } body.landing-dark .feature-card { background: #141414; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: var(--s-7); transition: border-color 0.2s, transform 0.2s; } body.landing-dark .feature-card:hover { border-color: rgba(236, 107, 28, 0.3); transform: translateY(-2px); } body.landing-dark .feature-card .icon-circle { background: rgba(236, 107, 28, 0.15); color: #ec6b1c; } body.landing-dark .price-card { background: #141414; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: var(--s-10) var(--s-8); } body.landing-dark .price-card.featured { border-color: #ec6b1c; box-shadow: 0 24px 80px -32px rgba(236, 107, 28, 0.5); } body.landing-dark .price-card .price-num { font-size: 44px; font-weight: 900; color: #ffffff; letter-spacing: -0.03em; } body.landing-dark .table { color: #f5f5f5; } body.landing-dark .table th { color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; border-bottom-color: rgba(255, 255, 255, 0.1); } body.landing-dark .table td { border-bottom-color: rgba(255, 255, 255, 0.06); } /* Row hover — light-theme uses --bg-soft (#f8fafc near-white), which would wash out the row and make white text invisible. Override with a subtle warm-orange tint that reads against #0a0a0a and keeps text legible. */ body.landing-dark .table tr:hover td { background: rgba(236, 107, 28, 0.12); } body.landing-dark .footer-cta { background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(236, 107, 28, 0.25), transparent 70%), linear-gradient(180deg, #0a0a0a 0%, #1a0f1f 100%); padding: var(--s-12) var(--s-5); text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.06); } /* EQ-bar decorative element — animated audio bars */ body.landing-dark .eq-bars { display: inline-flex; align-items: flex-end; gap: 4px; height: 28px; } body.landing-dark .eq-bars span { display: block; width: 4px; height: 60%; background: linear-gradient(180deg, #ec6b1c 0%, #ec4899 100%); border-radius: 2px; animation: eqPulse 1.2s ease-in-out infinite; } body.landing-dark .eq-bars span:nth-child(1) { animation-delay: 0.0s; } body.landing-dark .eq-bars span:nth-child(2) { animation-delay: 0.15s; height: 80%; } body.landing-dark .eq-bars span:nth-child(3) { animation-delay: 0.3s; height: 50%; } body.landing-dark .eq-bars span:nth-child(4) { animation-delay: 0.45s; height: 95%; background: linear-gradient(180deg, #06b6d4 0%, #ec6b1c 100%); } body.landing-dark .eq-bars span:nth-child(5) { animation-delay: 0.6s; height: 40%; } body.landing-dark .eq-bars span:nth-child(6) { animation-delay: 0.75s; height: 70%; } body.landing-dark .eq-bars span:nth-child(7) { animation-delay: 0.9s; height: 55%; } @keyframes eqPulse { 0%, 100% { transform: scaleY(0.5); transform-origin: bottom; } 50% { transform: scaleY(1); transform-origin: bottom; } } /* Section divider line + accent dot */ body.landing-dark .section-divider { position: relative; height: 1px; background: rgba(255, 255, 255, 0.06); margin: 0; } body.landing-dark .section-divider::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #ec6b1c; box-shadow: 0 0 16px #ec6b1c; } body.landing-dark .site-footer { background: #0a0a0a; color: #94a3b8; border-top: 1px solid rgba(255, 255, 255, 0.06); } body.landing-dark .site-footer a { color: #cbd5e1; } /* Flash banner overrides — the default .alert variants are styled for a light page (white-ish backgrounds + saturated colored text) which leaks onto the dark landing pages as a glaring white bar. Re-skin them to feel native to the dark theme: subtle tinted background, light text. */ body.landing-dark .alert { background: #141414; border: 1px solid rgba(255,255,255,0.08); color: #cbd5e1; border-radius: 10px; padding: 12px 16px; } body.landing-dark .alert a { color: #ec6b1c; } body.landing-dark .alert-success { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.25); color: #d1fae5; } body.landing-dark .alert-info { background: rgba(236,107,28,0.08); border-color: rgba(236,107,28,0.25); color: #fde2c8; } body.landing-dark .alert-warning { background: rgba(234,179,8,0.08); border-color: rgba(234,179,8,0.25); color: #fef9c3; } body.landing-dark .alert-danger { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3); color: #fecaca; } /* ---------- Header ---------- */ .site-header { border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 50; } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: var(--s-4); padding-bottom: var(--s-4); } .brand { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--fg); text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-2); } .brand:hover { color: var(--fg); text-decoration: none; } .brand-mark { width: 22px; height: 22px; border-radius: var(--r-sm); background: var(--accent); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 13px; font-weight: 700; } /* Bee glyph inside the brand tile — fills the tile, no overflow. */ .brand-mark svg { width: 100%; height: 100%; display: block; } .nav { display: flex; gap: var(--s-5); align-items: center; } .nav a { color: var(--fg-muted); font-weight: 500; font-size: 14px; text-decoration: none; } .nav a:hover { color: var(--fg); text-decoration: none; } .nav a.btn-primary { color: var(--accent-fg); } .nav a.btn-primary:hover { color: var(--accent-fg); } .nav a.btn-secondary { color: var(--fg); } /* Hamburger toggle is hidden — we keep nav links always visible on mobile. The button stays in the HTML but never displays. */ .nav-toggle { display: none !important; } /* On phones AND phone-landscape, let the nav wrap onto a second row so all links stay visible. Also un-stick the header — sticky positioning combined with a multi-row nav causes visible jitter on iOS Safari during fast scrolls, and on long pages (like the help guide) the sticky header eats too much vertical room. Breakpoint is 960px (not 768px) so iPhone landscape (780–932px) also gets the wrapped nav. iPad portrait at 810px also benefits; iPad landscape stays on the desktop single-row layout (1024px+). */ @media (max-width: 960px) { .site-header { position: static; } .site-header .container { flex-wrap: wrap; row-gap: var(--s-3); } .site-header .nav { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: var(--s-2); } .site-header .nav a { font-size: 13px; padding: 6px 8px; } .site-header .nav a.btn, .site-header .nav a.btn-sm { padding: 7px 12px; font-size: 12px; } } /* Even tighter at very narrow widths so the row never overflows */ @media (max-width: 380px) { .site-header .nav a { font-size: 12px; padding: 5px 6px; } .site-header .nav { gap: 6px; } } /* ---------- Footer ---------- */ .site-footer { margin-top: var(--s-16); border-top: 1px solid var(--border); padding: var(--s-10) 0; color: var(--fg-soft); font-size: 13px; } .site-footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-4); } .site-footer a { color: var(--fg-muted); /* Keep multi-word link labels (e.g. "Help Guide") on one line even when the footer row wraps to a second line on narrow viewports. */ white-space: nowrap; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { color: var(--fg); letter-spacing: -0.02em; line-height: 1.2; margin: 0; } h1 { font-size: 2.25rem; font-weight: 700; } h2 { font-size: 1.5rem; font-weight: 600; } h3 { font-size: 1.125rem; font-weight: 600; } h4 { font-size: 1rem; font-weight: 600; } .eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-soft); font-weight: 500; } .muted { color: var(--fg-muted); } .soft { color: var(--fg-soft); } .lead { font-size: 17px; color: var(--fg-muted); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 10px 16px; border-radius: var(--r-md); border: 1px solid transparent; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; white-space: nowrap; line-height: 1; } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: white; text-decoration: none; } .btn-secondary { background: var(--bg); color: var(--fg); border-color: var(--border-strong); } .btn-secondary:hover:not(:disabled) { background: var(--bg-soft); text-decoration: none; } .btn-ghost { background: transparent; color: var(--fg-muted); border-color: transparent; } .btn-ghost:hover:not(:disabled) { background: var(--bg-sunk); color: var(--fg); text-decoration: none; } .btn-danger { background: var(--danger); color: white; border-color: var(--danger); } .btn-danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; color: white; text-decoration: none; } .btn-sm { padding: 6px 12px; font-size: 13px; } .btn-lg { padding: 14px 22px; font-size: 16px; } .btn-block { width: 100%; } /* ---------- Cards ---------- */ .card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-6); } .card-flat { background: var(--bg-soft); border-color: var(--border); } .card-padless { padding: 0; overflow: hidden; } .card-header { padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .card-body { padding: var(--s-6); } .card-footer { padding: var(--s-4) var(--s-6); border-top: 1px solid var(--border); background: var(--bg-soft); } /* ---------- Forms ---------- */ .field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); } .field label { font-size: 13px; font-weight: 500; color: var(--fg); } .field .help { font-size: 12px; color: var(--fg-soft); } .field .error { font-size: 12px; color: var(--danger); } .input, .select, .textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); font-size: 14px; font-family: inherit; background: var(--bg); color: var(--fg); transition: border-color 120ms ease, box-shadow 120ms ease; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .textarea { min-height: 100px; resize: vertical; } /* Checkbox/radio */ .checkfield { display: flex; align-items: flex-start; gap: var(--s-3); } .checkfield input { margin-top: 3px; accent-color: var(--accent); } /* Inline form (login etc.) */ .form-narrow { max-width: 420px; margin: 0 auto; } /* ---------- Tables ---------- */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); } .table th { font-weight: 600; font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-soft); } .table tr:last-child td { border-bottom: 0; } .table tr:hover td { background: var(--bg-soft); } .table-padless { margin: 0 -1px; } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: var(--r-full); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-mono); } .badge-neutral { background: var(--bg-sunk); color: var(--fg-muted); } .badge-success { background: var(--success-soft); color: var(--success); } .badge-warning { background: var(--warning-soft); color: var(--warning); } .badge-danger { background: var(--danger-soft); color: var(--danger); } .badge-info { background: var(--accent-soft); color: var(--accent); } /* ---------- Alerts ---------- */ .alert { padding: var(--s-4) var(--s-5); border-radius: var(--r-md); border: 1px solid var(--border); font-size: 14px; } .alert-success { background: var(--success-soft); border-color: #a7f3d0; color: #064e3b; } .alert-warning { background: var(--warning-soft); border-color: #fcd34d; color: #78350f; } .alert-danger { background: var(--danger-soft); border-color: #fca5a5; color: #7f1d1d; } .alert-info { background: var(--accent-soft); border-color: #c7d2fe; color: #312e81; } /* ---------- Empty state ---------- */ .empty-state { text-align: center; padding: var(--s-16) var(--s-5); color: var(--fg-soft); } .empty-state h3 { color: var(--fg); margin-bottom: var(--s-2); } .empty-state p { max-width: 380px; margin: 0 auto var(--s-5); } /* ---------- Event card (marketplace) ---------- */ .event-card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; } .event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); text-decoration: none; color: inherit; } .event-card .flyer { aspect-ratio: 4 / 5; background: var(--bg-sunk) center/cover no-repeat; border-bottom: 1px solid var(--border); } .event-card .body { padding: var(--s-5); } .event-card .date { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--s-2); } .event-card h3 { font-size: 17px; margin-bottom: var(--s-2); line-height: 1.3; } .event-card .venue { font-size: 14px; color: var(--fg-muted); margin-bottom: var(--s-3); } .event-card .price { font-size: 14px; font-weight: 600; color: var(--fg); } /* ---------- Auth pages ---------- */ .auth-shell { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: var(--s-10) var(--s-5); } .auth-card { width: 100%; max-width: 420px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-8); box-shadow: var(--shadow-md); } .auth-card h1 { font-size: 1.5rem; margin-bottom: var(--s-2); } .auth-card .lead { font-size: 14px; margin-bottom: var(--s-6); } /* ---------- Dashboard sidebar layout ---------- */ .dash-shell { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 64px); } .dash-sidebar { border-right: 1px solid var(--border); background: var(--bg-soft); padding: var(--s-6) var(--s-4); } .dash-sidebar .menu { display: flex; flex-direction: column; gap: 2px; } .dash-sidebar .menu a { padding: 8px 12px; border-radius: var(--r-md); color: var(--fg-muted); text-decoration: none; font-size: 14px; font-weight: 500; } .dash-sidebar .menu a:hover { background: var(--bg); color: var(--fg); text-decoration: none; } .dash-sidebar .menu a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .dash-sidebar .menu .group-label { padding: var(--s-4) 12px var(--s-1); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-soft); } .dash-main { padding: var(--s-8); } .dash-main h1 { margin-bottom: var(--s-6); } /* Dashboard sidebar collapse — fires at phone-landscape widths too so iPhone landscape (780–932px) doesn't waste 220px on a sidebar that leaves the main column too narrow for stat-card grids and tables. Breakpoint matches the nav-wrap rule above. */ @media (max-width: 960px) { .dash-shell { grid-template-columns: 1fr; } .dash-sidebar { display: none; } .dash-main { padding: var(--s-5); } } /* ---------- Stats / KPI cards ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4); } .stat-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); } .stat-card .label { font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .stat-card .value { font-size: 24px; font-weight: 700; margin-top: var(--s-2); letter-spacing: -0.02em; } .stat-card .delta { font-size: 12px; color: var(--fg-muted); margin-top: var(--s-1); } .stat-card .delta.up { color: var(--success); } .stat-card .delta.down { color: var(--danger); } /* ---------- Mono utilities (codes, IDs, timestamps) ---------- */ .mono { font-family: var(--font-mono); font-size: 13px; } .mono-sm { font-family: var(--font-mono); font-size: 12px; } /* ---------- Helpers ---------- */ .text-center { text-align: center; } .text-right { text-align: right; } .flex-1 { flex: 1; } .hidden { display: none !important; } .mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } /* ---------- Responsive ---------- */ @media (max-width: 640px) { h1 { font-size: 1.875rem; } .site-header .nav a { font-size: 13px; } .dash-main { padding: var(--s-5); } } /* ============================================================================ Mobile horizontal-overflow containment (iPhone Chrome portrait is the primary target — Chrome on iOS still runs WebKit, so this also fixes Safari and any other iOS browser). The previous behavior: a wide admin/promoter table (orders, finance, promoters list, etc.) would push the entire page width past the viewport, so the user could scroll the whole page horizontally and the header/nav would slide out of view. That's confusing and feels broken. New behavior: 1. + never scroll horizontally at narrow viewports — the page chrome stays anchored. 2. Any .card or .card-padless that CONTAINS a table gets overflow-x: auto so the table scrolls horizontally INSIDE its card instead of pushing the page out. Uses CSS :has() which is supported by every iOS WebKit 15.4+ (any iPhone in active use) and every shipping Chrome / Firefox / Safari since 2023. 3.

 blocks (help-guide code samples, etc.) also scroll internally.
     4. The promoter-table-wrap pattern in admin/promoters.php still works —
        this is additive, not a replacement.
   ============================================================================ */
/* Mobile + phone-landscape overflow + grid containment fixes.
   Breakpoint bumped from 768 → 960 on 2026-06-07 because iPhone
   landscape widths (780–932px) fell above the old threshold, so phones
   in landscape were getting the desktop layout — sidebar eating 220px,
   stat cards overflowing, tables crushing. 960px catches iPhone
   landscape + iPad portrait, leaves iPad landscape (1024+) on desktop. */
@media (max-width: 960px) {
  html, body {
    overflow-x: hidden;
    /* IMPORTANT: do NOT set `max-width: 100vw` here. iOS Safari does not
       reliably recalculate `vw` units on orientation change, so the page
       gets stuck rendered at portrait width when the user rotates to
       landscape — making it look like the page failed to flip. The
       `overflow-x: hidden` above, combined with the grid `minmax(0, 1fr)`
       rules below, is sufficient to contain horizontal overflow without
       triggering that bug. Caught 2026-06-03 on Baytek's event page. */
  }

  /* ---- CSS Grid intrinsic-blowout fix ----
     ALL CSS Grid containers with implicit `1fr` (= minmax(auto, 1fr)) let
     their column tracks expand to fit the widest intrinsic child — so any
     wide table or long card label pushes the column past viewport width.
     Forcing minmax(0, 1fr) breaks the intrinsic-content propagation while
     letting overflow-x: auto on the card scroll the table internally. */
  .dash-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .dash-main {
    min-width: 0;
    max-width: 100%;
  }

  /* KPI / stats card grid — same intrinsic-blowout fix. Stack to 2 columns
     of equal width that can shrink instead of expanding past viewport. */
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Generic grid helpers — same minmax(0, ...) treatment so they can never
     expand past their container. */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* Defensive catch-all: any inline-styled .grid or .row that hard-codes
     grid-template-columns (filter bars in admin/events, admin/orders, etc.)
     gets force-collapsed to single-column at this breakpoint. The
     !important is needed because inline styles otherwise win. Without
     this, 4-up filter rows hard-code 2fr 1fr 1fr auto and crush their
     content on iPhone landscape. */
  .dash-main .grid[style*="grid-template-columns"],
  .dash-main .row[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Every direct child of dash-main also needs min-width: 0 so cards don't
     refuse to shrink below their intrinsic content size. */
  .dash-main > * {
    min-width: 0;
    max-width: 100%;
  }

  /* Cards containing tables scroll horizontally within themselves.
     `.aff-table-wrap` (admin/affiliates.php) and `.ad-table-wrap`
     (ambassador/dashboard.php) are part of the same family — listed
     explicitly so they pick up touch-scroll on iOS. */
  .card:has(table),
  .card-padless:has(table),
  .promoter-table-wrap,
  .aff-table-wrap,
  .ad-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tables take their natural content width so columns don't crush — the
     card scrolls around them. min-width: 100% keeps the table filling its
     card width when it would otherwise be narrower. */
  .card:has(table) table,
  .card-padless:has(table) table,
  .promoter-table-wrap table,
  .aff-table-wrap table,
  .ad-table-wrap table {
    width: max-content;
    min-width: 100%;
  }

  /* Compact mobile cell padding + tighter buttons so more columns fit per
     viewport width before the user needs to swipe. */
  .card .table th,
  .card .table td,
  .card-padless .table th,
  .card-padless .table td {
    padding: 8px 10px !important;
    font-size: 13px;
  }
  .card .table .btn-sm,
  .card-padless .table .btn-sm {
    padding: 4px 8px;
    font-size: 11px;
  }

  /* Pre-formatted code samples scroll internally on narrow viewports */
  pre {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* Generic safety net — any element with .table-responsive wraps content */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* ---- Long-URL containment on prose surfaces ----
     Reported 2026-06-04 on iPhone 16 Pro Max in Chrome: the help guide,
     terms, privacy, and refunds pages all overflowed horizontally because
     unbreakable strings (long URLs like buzzhive.info/promoter/signup and
     long IDs in code samples) pushed the prose container past viewport
     width. `overflow-wrap: anywhere` lets the browser break those at any
     character when they would otherwise blow out the container. We apply
     it to the prose surfaces specifically, not body-wide, so display
     fonts / headings still get to keep their natural breaks. */
  .help-content,
  .help-content p,
  .help-content li,
  .help-content a,
  .help-content code,
  .legal-shell,
  .legal-shell p,
  .legal-shell li,
  .legal-shell a {
    overflow-wrap: anywhere;
    word-break: break-word;
    /* Also clamp these surfaces to their parent's width — defensive
       against any inner element that tries to push them wider. */
    max-width: 100%;
    min-width: 0;
  }
}