/* ============================================================================= Marketing site spacing - single source of truth (all public pages) Toggle on in resources/views/layouts/site.blade.php (one class only): marketing-spacing-compact - tighter sections (default) marketing-spacing-none - zero vertical padding on all sections marketing-spacing-loose - original large section padding Per-section overrides (any page): .sec-compact | .sec-medium | .sec-loose | .sec-none .home-split-band | .home-channel-stack (homepage flush bands) ============================================================================= */ :root { --section-pad-loose: clamp(90px, 12vh, 160px); --section-pad-medium: clamp(64px, 8vh, 96px); --section-pad-compact: clamp(48px, 6vh, 72px); --section-pad-none: 0; --section-pad-y: var(--section-pad-compact); --trust-strip-pad: 2rem; --verifier-band-pad: 2.25rem; --deliverability-pad: clamp(48px, 6vh, 72px); --faq-band-pad: clamp(48px, 6vh, 72px); --stack-card-pad: 3rem; --stack-card-gap: 1.5rem; } body.marketing-spacing-loose { --section-pad-y: var(--section-pad-loose); --stack-card-pad: 3rem; --stack-card-gap: 1.5rem; } body.marketing-spacing-compact { --section-pad-y: var(--section-pad-compact); --stack-card-pad: 1.35rem; --stack-card-gap: 0.65rem; } body.marketing-spacing-none { --section-pad-y: var(--section-pad-none); --trust-strip-pad: 0; --verifier-band-pad: 0; --deliverability-pad: 0; --faq-band-pad: 0; --stack-card-pad: 0; --stack-card-gap: 0; } /* ---------- Section vertical rhythm ---------- */ .sec, section.sec, .section-cream, .section-mint, .section-peach, .section-lavender, .section-brand, .section-ink, .section-accent, .section-tight { padding-top: var(--section-pad-y); padding-bottom: var(--section-pad-y); } .sec-medium { padding-top: var(--section-pad-medium); padding-bottom: var(--section-pad-medium); } .sec-compact, .section-tight { padding-top: var(--section-pad-compact); padding-bottom: var(--section-pad-compact); } .sec-loose { padding-top: var(--section-pad-loose); padding-bottom: var(--section-pad-loose); } .sec-none, .home-split-band, .home-channel-stack { padding-top: 0 !important; padding-bottom: 0 !important; } body.marketing-spacing-none main .sec, body.marketing-spacing-none main > section, body.marketing-spacing-none main section.sec, body.marketing-spacing-none .deliverability-promise, body.marketing-spacing-none .section-email-verifier-band, body.marketing-spacing-none .site-faq.site-faq-band, body.marketing-spacing-none .trust-strip { padding-top: 0 !important; padding-bottom: 0 !important; } /* Special bands */ .trust-strip { padding-top: var(--trust-strip-pad); padding-bottom: var(--trust-strip-pad); } .section-email-verifier-band { padding-top: var(--verifier-band-pad); padding-bottom: var(--verifier-band-pad); } .deliverability-promise { padding-top: var(--deliverability-pad); padding-bottom: var(--deliverability-pad); } .site-faq.site-faq-band { padding-top: var(--faq-band-pad); padding-bottom: var(--faq-band-pad); } /* Homepage flush stack bands */ body.page-home .home-channel-stack .stack-card { padding: 0 !important; margin-bottom: 0; border-radius: 0; border-left: none; border-right: none; } body.page-home .home-channel-stack .stack-card:last-child { margin-bottom: 0; } body.page-home .home-channel-stack .home-section-head { margin-bottom: 0 !important; padding: 0; } body.page-home .home-split-band > .wrap, body.page-home .home-channel-stack > .wrap { padding-top: 0; padding-bottom: 0; } /* Cards & section heads */ .stack-card { padding: var(--stack-card-pad); margin-bottom: var(--stack-card-gap); } main .sec .home-section-head { margin-bottom: 1.5rem; } /* ---------- Hero (global - cinematic heroes with image or video) ---------- */ .hero:has(.hero-fallback), .hero:has(.hero-video) { min-height: max(100vh, 720px); align-items: flex-start; } .hero-lede-mobile { display: none; } .hero:has(.hero-fallback) .hero-content, .hero:has(.hero-video) .hero-content { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; min-height: max(100vh, 720px); } .hero:has(.hero-fallback) .hero-content > .wrap, .hero:has(.hero-video) .hero-content > .wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; } .hero:has(.hero-fallback) .hero-content > .wrap > .kicker, .hero:has(.hero-video) .hero-content > .wrap > .kicker { flex: none; } .hero:has(.hero-fallback) .hero-copy, .hero:has(.hero-video) .hero-copy { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; } .hero:has(.hero-fallback) .hero-copy h1, .hero:has(.hero-video) .hero-copy h1 { margin-top: 0; } @media (min-width: 769px) { .hero:has(.hero-fallback) .hero-content, .hero:has(.hero-video) .hero-content { padding-top: calc(var(--site-nav-height, 72px) + 8px); padding-bottom: 88px; } .hero.hero--has-mobile-poster .hero-fallback--mobile-lcp { display: none !important; } } @media (max-width: 768px) { .hero:has(.hero-fallback), .hero:has(.hero-video) { min-height: max(100vh, 100dvh, 720px); height: auto; align-items: flex-start; } .hero.hero--has-mobile-poster .hero-video--desktop-only { display: none !important; } .hero.hero--has-mobile-poster .hero-fallback--mobile-lcp { display: block !important; visibility: visible !important; object-fit: cover; object-position: 80% 20%; } .hero.hero--has-mobile-poster .scrim { background: linear-gradient(105deg, rgba(0, 15, 34, .72) 0%, rgba(0, 15, 34, .38) 40%, rgba(0, 15, 34, .08) 68%, rgba(0, 15, 34, .28) 100%), linear-gradient(0deg, rgba(0, 15, 34, .5) 0%, rgba(0, 15, 34, 0) 34%); } .hero:has(.hero-fallback) .hero-content, .hero:has(.hero-video) .hero-content { min-height: max(100vh, 100dvh, 720px); height: auto; padding-top: calc(var(--site-nav-height, 72px) + env(safe-area-inset-top, 0px) + 0.35rem); padding-bottom: 4.5rem; } .hero:has(.hero-fallback) .hero-content > .wrap, .hero:has(.hero-video) .hero-content > .wrap { padding-left: clamp(20px, 5vw, 28px); padding-right: clamp(20px, 5vw, 28px); } .hero:has(.hero-fallback) .hero-copy h1, .hero:has(.hero-video) .hero-copy h1 { font-size: clamp(36px, 9vw, 52px); max-width: none; line-height: 1.08; } .hero:has(.hero-fallback) .hero-copy .lede, .hero:has(.hero-video) .hero-copy .lede { margin-top: 1.25rem; max-width: 42ch; font-size: clamp(16px, 4vw, 18px); line-height: 1.55; } .hero-lede--desktop { display: none !important; } .hero-lede-mobile { display: block; margin-top: 1rem; max-width: 42ch; padding: 0; } .hero-lede-mobile__primary { margin: 0 0 6px; font-size: clamp(16px, 4vw, 18px); line-height: 1.4; font-weight: 600; color: rgba(255, 255, 255, .95); letter-spacing: -.01em; } .hero-lede-mobile__secondary { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .68); } .hero-lede-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; margin-bottom: 0; padding: 0; } .hero-lede-chip { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.2; color: rgba(255, 255, 255, .88); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); } .hero:has(.hero-fallback) .hero-copy .hero-cta, .hero:has(.hero-video) .hero-copy .hero-cta { margin-top: 1.75rem; padding-top: 0; flex-wrap: wrap; gap: 12px; } .hero:has(.hero-fallback) .scrolldown, .hero:has(.hero-video) .scrolldown { display: flex; bottom: 28px; } } @media (max-width: 560px) { .hero:has(.hero-fallback) .hero-copy h1, .hero:has(.hero-video) .hero-copy h1 { font-size: clamp(32px, 9.5vw, 44px); } .hero:has(.hero-fallback) .hero-copy .lede, .hero:has(.hero-video) .hero-copy .lede { margin-top: 1rem; font-size: 16px; } .hero-lede-mobile__primary { font-size: 16px; } .hero-lede-mobile__secondary { font-size: 15px; } .hero:has(.hero-fallback) .hero-copy .hero-cta, .hero:has(.hero-video) .hero-copy .hero-cta { margin-top: 1.5rem; } } /* ---------- Mobile section rhythm ---------- */ @media (max-width: 768px) { :root { --section-pad-loose: clamp(52px, 7vh, 80px); --section-pad-medium: clamp(44px, 6vh, 64px); --section-pad-compact: clamp(36px, 5vh, 52px); --trust-strip-pad: 1.25rem; --verifier-band-pad: 1.5rem; --deliverability-pad: clamp(36px, 5vh, 52px); --stack-card-pad: 1.75rem; --stack-card-gap: 1rem; } body.marketing-spacing-none { --trust-strip-pad: 0; --verifier-band-pad: 0; --deliverability-pad: 0; --stack-card-pad: 0; --stack-card-gap: 0; } main .sec .mb-5, main .sec .home-section-head { margin-bottom: 1.25rem !important; } body.page-home .stats-row { gap: 20px; } } @media (max-width: 560px) { :root { --section-pad-loose: clamp(40px, 5vh, 56px); --section-pad-medium: clamp(36px, 4.5vh, 48px); --section-pad-compact: clamp(28px, 4vh, 40px); --trust-strip-pad: 1rem; --verifier-band-pad: 1.25rem; --deliverability-pad: clamp(28px, 4vh, 40px); --stack-card-pad: 1.25rem; --stack-card-gap: 0.75rem; } .stack-card .desc { font-size: 1rem; } .section-email-verifier-band .ev-band-head { margin-bottom: 0.85rem; } main .sec .mb-5, main .sec .home-section-head { margin-bottom: 1.25rem !important; } .faq { margin-top: 28px; gap: 10px; } .faq-item summary { padding: 16px 18px; font-size: 16px; } body.page-home .integration-tiles { gap: 0.65rem; } body.page-home .site-card { padding: 1.15rem; } }