/* SquadPicks frontend - layout.css */ /* Page-level containers, navbar, footer, grid utilities. */ /* ============================================================ * Container * ============================================================ */ .container { width: 100%; max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-5); } @media (min-width: 768px) { .container { padding: 0 var(--space-5); } } /* ============================================================ * Navbar — transparent over hero, becomes opaque on scroll * Default: .sp-navbar is light text on transparent bg (sits over Hero image). * When the page is scrolled past the hero, the host page adds `.is-scrolled` * to (via Alpine.js x-data scrollY watcher) which swaps to white bg + dark text. * Auth pages without a hero should add `.is-solid` to .sp-navbar to opt-out. * ============================================================ */ .sp-navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: var(--z-sticky); padding: var(--space-4) 0; background: transparent; transition: background var(--transition), box-shadow var(--transition), border-color var(--transition); border-bottom: 1px solid transparent; } .sp-navbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-5); } .sp-navbar-brand { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-2xl); font-weight: var(--font-weight-extrabold); letter-spacing: -0.02em; color: var(--color-text-strong); } .sp-navbar-brand-icon { width: 36px; height: 36px; background: var(--color-emerald-500); border-radius: var(--radius); flex-shrink: 0; } .sp-navbar-brand img { height: 36px; width: 36px; display: block; border-radius: var(--radius); } .sp-navbar-brand .highlight { color: var(--color-emerald-500); } .sp-navbar-menu { display: none; align-items: center; gap: var(--space-7); } /* Switch to the full horizontal nav only at ≥1024px. Below that (phones AND * tablets) the 5 links + lang select + account button get cramped, so use the * hamburger drawer instead. */ @media (min-width: 1024px) { .sp-navbar-menu { display: flex; } } .sp-navbar-menu > a { font-size: 0.95rem; font-weight: var(--font-weight-semibold); color: var(--color-slate-600); transition: color var(--transition-fast); } .sp-navbar-menu > a:hover { color: var(--color-emerald-500); } .sp-navbar-actions { display: flex; align-items: center; gap: var(--space-5); /* match V2 nav-auth gap */ } /* Guest auth actions container — keep Login + Sign Up on a single row. The parent .sp-navbar-actions is flex, which can shrink an inline span and force its children to wrap. inline-flex + nowrap locks the layout. */ .sp-navbar-guest { display: inline-flex; align-items: center; gap: var(--space-4); flex-shrink: 0; white-space: nowrap; } /* Any explicit display value overrides the [hidden] attribute's default display:none. Re-assert it so navbar-auth-swap.js can hide guest/user blocks via el.hidden = true. */ .sp-navbar-guest[hidden], .sp-navbar-user[hidden] { display: none !important; } /* Login link inside navbar — V2 sizing */ .sp-login-btn { font-size: 0.95rem; font-weight: var(--font-weight-semibold); color: var(--color-slate-600); transition: color var(--transition-fast); } .sp-login-btn:hover { color: var(--color-slate-900); } /* Transparent / light mode (default — over hero) * All nav text is solid #ffffff per spec — no slate tint. * Hover keeps emerald accent so the interactive cue is preserved. * * Bright-hero protection: scrim + blur is applied only to .sp-navbar-inner * (the centered container from brand to user actions), not the full-width * bar. Two side strips stay fully transparent so the bar reads as a floating * pill on top of the hero. Pill shape + soft shadow help separation. */ .sp-navbar:not(.is-solid):not(.is-scrolled) .sp-navbar-inner { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--radius-pill); padding: var(--space-3) var(--space-5); box-shadow: 0 4px 24px rgba(15, 23, 42, 0.18); } .sp-navbar:not(.is-solid):not(.is-scrolled) .sp-navbar-brand { color: #ffffff; } .sp-navbar:not(.is-solid):not(.is-scrolled) .sp-navbar-menu > a { color: #ffffff; } .sp-navbar:not(.is-solid):not(.is-scrolled) .sp-navbar-menu > a:hover { color: var(--color-emerald-400); } .sp-navbar:not(.is-solid):not(.is-scrolled) .sp-login-btn { color: #ffffff; } .sp-navbar:not(.is-solid):not(.is-scrolled) .sp-login-btn:hover { color: var(--color-emerald-400); } /* Scrolled / solid mode (white bg, dark text, shadow) */ .sp-navbar.is-scrolled, .sp-navbar.is-solid { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); } /* Mobile hamburger toggle */ .sp-navbar-toggle { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; font-size: var(--font-size-xl); background: transparent; color: inherit; border: 1px solid currentColor; border-radius: var(--radius); cursor: pointer; } @media (min-width: 1024px) { .sp-navbar-toggle { display: none; } } .sp-navbar:not(.is-solid):not(.is-scrolled) .sp-navbar-toggle { color: #ffffff; border-color: rgba(255,255,255,0.4); } /* Mobile menu drawer (Alpine x-show toggled) — phones + tablets up to 1023.98px */ @media (max-width: 1023.98px) { .sp-navbar-menu.sp-navbar-menu-open { display: flex; flex-direction: column; align-items: stretch; position: fixed; inset: 76px 0 auto 0; background: rgba(15, 23, 42, 0.98); backdrop-filter: blur(12px); padding: var(--space-5); gap: var(--space-3); border-bottom: 1px solid var(--color-border-on-dark); } .sp-navbar-menu.sp-navbar-menu-open > a { color: #ffffff; padding: var(--space-3); } .sp-navbar-menu.sp-navbar-menu-open .sp-navbar-actions { flex-direction: column; align-items: stretch; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border-on-dark); } /* Account dropdown: inside the drawer the "My account" button sits on the left, so left-align its popover here (desktop keeps right:0, where the button lives at the bar's right edge). */ .sp-navbar-menu.sp-navbar-menu-open .sp-dropdown-menu { left: 0; right: auto; } } /* Mobile nav backdrop — dims the page behind the dropdown drawer. z-index sits * one below the navbar (z-sticky) so the bar and the drawer stay crisp above the * scrim, while everything else on the page is dimmed. Tap-to-close is wired in * the markup (@click=mobileOpen=false). Never shown on desktop. */ .sp-navbar-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: calc(var(--z-sticky) - 1); } @media (min-width: 1024px) { .sp-navbar-backdrop { display: none !important; } } /* Body offset for fixed navbar height (≈76px) — only when navbar is solid from page-load */ body.has-solid-navbar { padding-top: 76px; } /* ============================================================ * Footer * ============================================================ */ .sp-footer { background-color: var(--color-slate-50); padding: var(--space-9) 0 var(--space-8); text-align: center; } .sp-footer-links { display: flex; justify-content: center; gap: var(--space-6); margin-bottom: var(--space-7); flex-wrap: wrap; } .sp-footer-links a { color: var(--color-slate-500); font-weight: var(--font-weight-semibold); font-size: var(--font-size-lg); transition: color var(--transition-fast); } .sp-footer-links a:hover { color: var(--color-slate-900); } .sp-footer-disclaimer { font-size: var(--font-size-sm); color: var(--color-slate-400); max-width: 800px; margin: 0 auto var(--space-5); line-height: 1.8; } .sp-footer-copyright { font-size: 0.95rem; color: var(--color-slate-400); font-weight: var(--font-weight-medium); } /* ============================================================ * Section spacing — generous Linear/Stripe-grade breathing room * ============================================================ */ .sp-section { padding: var(--section-padding-y) 0; position: relative; } .sp-section > .container { width: 100%; } .sp-section-title { text-align: center; margin-bottom: 72px; } .sp-section-title h2 { font-size: 2.5rem; /* match V2 — fixed, not clamped */ font-weight: var(--font-weight-extrabold); color: var(--color-slate-900); letter-spacing: -0.02em; line-height: 1.1; } .sp-section-title p, .sp-section-title small { color: var(--color-slate-500); font-size: var(--font-size-lg); /* 1.125rem — matches V2 sports-header p */ margin-top: var(--space-4); display: block; } /* Compact section — for inline CTA strips between huge modules */ .sp-section-compact { padding: 4rem 0; } @media (min-width: 1024px) { .sp-section-compact { padding: 5rem 0; } } /* Section background variants */ .sp-section-tinted { background: var(--color-slate-100); } .sp-section-white { background: #ffffff; border-top: 1px solid var(--color-slate-200); border-bottom: 1px solid var(--color-slate-200); } .sp-section-dark { background: var(--color-slate-900); color: #ffffff; } .sp-section-dark .sp-section-title h2 { color: #ffffff; } .sp-section-dark .sp-section-title p, .sp-section-dark .sp-section-title small { color: var(--color-slate-400); } .sp-section-cta { background: var(--gradient-cta); color: #ffffff; } .sp-section-cta .sp-section-title h2 { color: #ffffff; } .sp-section-cta .sp-section-title p, .sp-section-cta .sp-section-title small { color: #d1fae5; font-size: 1.25rem; /* notify CTA copy is larger than default subtitle */ max-width: 600px; margin-left: auto; margin-right: auto; } /* ============================================================ * Grid helpers * ============================================================ */ .sp-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 640px) { .sp-grid-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .sp-grid-3 { grid-template-columns: repeat(3, 1fr); } .sp-grid-4 { grid-template-columns: repeat(4, 1fr); } } .sp-stack { display: flex; flex-direction: column; gap: var(--space-5); } .sp-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }