/* ============================================================ Drive Studio — pages.css Page-specific layout. Each page's rules are grouped under a comment banner keyed to its value. Shared component look-and-feel belongs in components.css, not here. ============================================================ */ /* ---------- Shared across every page ---------- */ /* First section on interior pages (everything except the Home hero) */ .page-hero { padding-top: calc(var(--nav-height) + var(--space-6)); padding-bottom: var(--space-4); } /* ---------- data-page="home" ---------- */ .hero { min-height: 92vh; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: var(--nav-height); } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 18% 22%, rgba(242, 14, 75, 0.08), transparent 55%), radial-gradient(circle at 82% 74%, rgba(4, 151, 242, 0.07), transparent 50%); pointer-events: none; animation: heroGlowPulse 8s var(--ease-in-out) infinite; } @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } } .hero-content { position: relative; max-width: 760px; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } .hero-stats { display: flex; flex-wrap: wrap; gap: var(--space-6); } .hero-stats > div { display: flex; flex-direction: column; align-items: center; justify-content: center; } .cta-banner { background: linear-gradient(135deg, rgba(242, 14, 75, 0.05), rgba(4, 151, 242, 0.05)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-4); text-align: center; }