/* ============================================================================= MARKETING.CSS - Styles for public marketing homepage All selectors scoped to #marketingPage Self-contained: does NOT load the app's base.css. Brand colours mirror theme.css. Dark is default; light via [data-theme="light"] on . ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,900&family=Outfit:wght@400;500;600;700;800&display=swap'); /* ----------------------------------------------------------------------------- Tokens (dark default) ----------------------------------------------------------------------------- */ #marketingPage { --m-purple: #764ba2; --m-purple-light: #667eea; --m-orange: #f97316; --m-amber: #f5a623; --m-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 60%, #9333ea 100%); --m-bg: #16162a; --m-surface: #1e2332; --m-surface-2: #262b3d; --m-ink: rgba(255, 255, 255, 0.96); --m-ink-soft: rgba(255, 255, 255, 0.68); --m-muted: rgba(255, 255, 255, 0.45); --m-line: rgba(255, 255, 255, 0.1); --m-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4); --m-shadow: 0 10px 36px rgba(0, 0, 0, 0.5); } [data-theme="light"] #marketingPage { --m-bg: #f7f4fc; --m-surface: #ffffff; --m-surface-2: #f4f0fa; --m-ink: #221a33; --m-ink-soft: #574a6e; --m-muted: #8b80a0; --m-line: rgba(118, 75, 162, 0.14); --m-shadow-sm: 0 2px 10px rgba(118, 75, 162, 0.1); --m-shadow: 0 10px 36px rgba(118, 75, 162, 0.16); } /* ----------------------------------------------------------------------------- Base ----------------------------------------------------------------------------- */ html, body { margin: 0; padding: 0; background: #16162a; } [data-theme="light"] html, [data-theme="light"] body { background: #f7f4fc; } #marketingPage * { box-sizing: border-box; margin: 0; padding: 0; } #marketingPage { font-family: 'Outfit', system-ui, sans-serif; color: var(--m-ink); background: var(--m-bg); line-height: 1.6; overflow-x: hidden; min-height: 100vh; transition: background 0.3s, color 0.3s; } /* ----------------------------------------------------------------------------- Header ----------------------------------------------------------------------------- */ #marketingPage .marketing-header { display: flex; align-items: center; justify-content: flex-end; height: 106px; padding: 0 40px; max-width: 1280px; margin: 0 auto; position: relative; overflow: visible; } #marketingPage .marketing-brand { position: absolute; top: 6px; left: 50px; display: flex; align-items: center; text-decoration: none; z-index: 10; } #marketingPage .marketing-brand-logo { height: 120px; width: auto; display: block; } #marketingPage .marketing-brand-logo-light { display: none; } [data-theme="light"] #marketingPage .marketing-brand-logo-dark { display: none; } [data-theme="light"] #marketingPage .marketing-brand-logo-light { display: block; } #marketingPage .marketing-header-right { display: flex; align-items: center; gap: 22px; } #marketingPage .marketing-nav { display: flex; gap: 24px; } #marketingPage .marketing-nav-link { text-decoration: none; color: var(--m-ink-soft); font-weight: 600; font-size: 0.95rem; transition: color 0.2s; } #marketingPage .marketing-nav-link:hover { color: var(--m-purple-light); } #marketingPage .marketing-theme-toggle { background: var(--m-surface-2); border: 1px solid var(--m-line); cursor: pointer; width: 38px; height: 38px; border-radius: 50%; font-size: 1rem; display: flex; align-items: center; justify-content: center; color: var(--m-ink); } /* ----------------------------------------------------------------------------- Hero ----------------------------------------------------------------------------- */ #marketingPage .marketing-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; max-width: 1160px; margin: 0 auto; padding: 10px 24px 70px; } #marketingPage .marketing-hero-left { animation: marketing-rise 0.6s ease both; } #marketingPage .marketing-hero-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--m-surface-2); border: 1px solid var(--m-line); color: var(--m-ink-soft); font-weight: 600; font-size: 0.82rem; padding: 8px 16px; border-radius: 50px; margin-bottom: 24px; } #marketingPage .marketing-hero-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: marketing-pulse 2s infinite; } #marketingPage .marketing-hero-title { font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.9rem); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 20px; color: var(--m-ink); } #marketingPage .marketing-hero-title-accent { background: var(--m-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #marketingPage .marketing-hero-subtitle { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--m-ink-soft); max-width: 46ch; margin-bottom: 30px; } #marketingPage .marketing-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } /* ----------------------------------------------------------------------------- Buttons ----------------------------------------------------------------------------- */ #marketingPage .marketing-btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.02rem; text-decoration: none; padding: 15px 30px; border-radius: 14px; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; border: none; } #marketingPage .marketing-btn-primary { background: var(--m-orange); color: #fff; box-shadow: 0 6px 22px rgba(249, 115, 22, 0.42); } #marketingPage .marketing-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(249, 115, 22, 0.52); } #marketingPage .marketing-btn-secondary { background: transparent; color: var(--m-ink); border: 2px solid var(--m-line); } #marketingPage .marketing-btn-secondary:hover { border-color: var(--m-purple); transform: translateY(-2px); } /* ----------------------------------------------------------------------------- Phone ----------------------------------------------------------------------------- */ #marketingPage .marketing-hero-right { display: flex; justify-content: center; animation: marketing-rise 0.6s 0.15s ease both; } #marketingPage .marketing-phone { position: relative; width: 300px; height: 600px; background: #0d0d18; border-radius: 42px; padding: 12px; box-shadow: 0 30px 70px rgba(118, 75, 162, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.06); transform: rotate(3deg); transition: transform 0.4s; } #marketingPage .marketing-phone:hover { transform: rotate(0); } #marketingPage .marketing-phone::before { content: ""; position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: 90px; height: 7px; background: #000; border-radius: 10px; z-index: 3; } #marketingPage .marketing-phone-screen { width: 100%; height: 100%; object-fit: cover; border-radius: 32px; display: block; } #marketingPage .marketing-phone-light { display: none; } [data-theme="light"] #marketingPage .marketing-phone-dark { display: none; } [data-theme="light"] #marketingPage .marketing-phone-light { display: block; } #marketingPage .marketing-phone-glow { position: absolute; inset: -40px; background: radial-gradient(circle, rgba(118, 75, 162, 0.5), transparent 70%); z-index: -1; filter: blur(20px); } /* ----------------------------------------------------------------------------- Stat Band ----------------------------------------------------------------------------- */ #marketingPage .marketing-band { background: var(--m-gradient); padding: 38px 24px; } #marketingPage .marketing-band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 840px; margin: 0 auto; text-align: center; } #marketingPage .marketing-band-number { font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(2rem, 5vw, 3rem); color: #fff; line-height: 1; } #marketingPage .marketing-band-label { color: rgba(255, 255, 255, 0.85); font-weight: 600; font-size: 0.92rem; margin-top: 6px; } #marketingPage .marketing-band-badges { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; } /* ----------------------------------------------------------------------------- Badges ----------------------------------------------------------------------------- */ #marketingPage .marketing-badge { display: inline-flex; align-items: center; gap: 12px; background: #000; color: #fff; text-decoration: none; padding: 13px 26px; border-radius: 12px; transition: transform 0.2s; min-width: 200px; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.12); } #marketingPage .marketing-badge:hover { transform: translateY(-2px); } #marketingPage .marketing-badge-icon { font-size: 1.7rem; } #marketingPage .marketing-badge-text { text-align: left; line-height: 1.2; } #marketingPage .marketing-badge-text small { display: block; font-size: 0.7rem; opacity: 0.85; font-weight: 400; } #marketingPage .marketing-badge-text strong { font-size: 1.1rem; } #marketingPage .marketing-badge-on-band { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.25); min-width: 180px; padding: 11px 22px; } #marketingPage .marketing-badge-on-band:hover { background: rgba(0, 0, 0, 0.5); } /* ----------------------------------------------------------------------------- Snaps ----------------------------------------------------------------------------- */ #marketingPage .marketing-snaps { max-width: 1160px; margin: 0 auto; padding: 64px 24px; } #marketingPage .marketing-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; } #marketingPage .marketing-section-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); } #marketingPage .marketing-section-link { color: var(--m-muted); font-weight: 600; } #marketingPage .marketing-snaps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } #marketingPage .marketing-snap { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 18px; overflow: hidden; transition: transform 0.2s; } #marketingPage .marketing-snap:hover { transform: translateY(-4px); } #marketingPage .marketing-snap-image { aspect-ratio: 1; background: linear-gradient(135deg, #3a2f1a, #1a1410); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; } #marketingPage .marketing-snap-body { padding: 14px; } #marketingPage .marketing-snap-beer { font-size: 1rem; font-weight: 700; margin-bottom: 3px; } #marketingPage .marketing-snap-meta { font-size: 0.82rem; color: var(--m-muted); } /* ----------------------------------------------------------------------------- Tiers ----------------------------------------------------------------------------- */ #marketingPage .marketing-tiers { padding: 64px 0; background: var(--m-surface-2); transition: background 0.3s; } #marketingPage .marketing-tiers-inner { max-width: 1160px; margin: 0 auto; padding: 0 24px; text-align: center; } #marketingPage .marketing-tiers-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 10px; } #marketingPage .marketing-tiers-subtitle { color: var(--m-ink-soft); max-width: 50ch; margin: 0 auto 38px; } #marketingPage .marketing-tier-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } #marketingPage .marketing-tier { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 16px; padding: 22px 24px; min-width: 140px; } #marketingPage .marketing-tier-icon { font-size: 2rem; margin-bottom: 8px; } #marketingPage .marketing-tier-name { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; } #marketingPage .marketing-tier-desc { font-size: 0.8rem; color: var(--m-muted); } /* ----------------------------------------------------------------------------- Download ----------------------------------------------------------------------------- */ #marketingPage .marketing-download { max-width: 1160px; margin: 0 auto; padding: 70px 24px; text-align: center; } #marketingPage .marketing-download-title { font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 14px; } #marketingPage .marketing-download-subtitle { color: var(--m-ink-soft); margin-bottom: 30px; } #marketingPage .marketing-badges { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ----------------------------------------------------------------------------- Footer ----------------------------------------------------------------------------- */ #marketingPage .marketing-footer { padding: 46px 24px; text-align: center; border-top: 1px solid var(--m-line); } #marketingPage .marketing-footer-links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; } #marketingPage .marketing-footer-link { color: var(--m-ink-soft); text-decoration: none; font-weight: 600; font-size: 0.9rem; } #marketingPage .marketing-footer-link:hover { color: var(--m-purple-light); } #marketingPage .marketing-footer-copy { color: var(--m-muted); font-size: 0.85rem; } /* ----------------------------------------------------------------------------- Animations ----------------------------------------------------------------------------- */ @keyframes marketing-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes marketing-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } /* ----------------------------------------------------------------------------- Responsive ----------------------------------------------------------------------------- */ @media (max-width: 860px) { #marketingPage .marketing-hero { grid-template-columns: 1fr; text-align: center; } #marketingPage .marketing-hero-subtitle { margin-left: auto; margin-right: auto; } #marketingPage .marketing-hero-actions { justify-content: center; } #marketingPage .marketing-hero-right { margin-top: 20px; } #marketingPage .marketing-snaps-row { grid-template-columns: repeat(2, 1fr); } #marketingPage .marketing-brand { left: 0px; top: 10px; } #marketingPage .marketing-brand-logo { height: 96px; } #marketingPage .marketing-header-right { gap: 30px; } #marketingPage .marketing-theme-toggle { position: relative; right: -22px; } }