/** * Leading V2 — header, footer, and page (from Figma export leading-v2). * Use with layout-v2.js + aifo-page-bg.css (same background pattern as promotion-activity). */ #leading-v2 { --primary: #f98715; --bg-page: #070400; --text-main: #f9f9f9; --text-muted: #909090; --aifo-page-bg-height: 805px; --aifo-page-content-offset: 1.375rem; --lv2-header-height: 5.75rem; background: var(--bg-page); color: var(--text-main); overflow-x: hidden; } @media (max-width: 768px) { #leading-v2 { --aifo-page-bg-height: 445px; --aifo-page-content-offset: 1rem; --lv2-header-height: 72px; } } #leading-v2 { --aifo-nav-height: var(--lv2-header-height); } /* ── Header (glass-panel — same as components/nav.html) ── */ .lv2-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1541; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } @media (min-width: 992px) { .lv2-header.glass-panel { background-color: rgba(0, 0, 0, 0.5); } } .lv2-header__inner { display: flex; align-items: center; justify-content: flex-start; max-width: 1128px; margin: 0 auto; padding: 20px; } @media (min-width: 768px) { .lv2-header__inner { padding: 30px 32px; } } .lv2-header__logo { display: inline-flex; flex-shrink: 0; } .lv2-header__logo img { display: block; height: 32px; width: auto; } /* ── Page ── */ #leading-v2 .leading-v2-page { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; padding: 0 18px 24px; } #leading-v2 .lv2-hero { display: flex; flex-direction: column; align-items: center; max-width: 900px; margin: 0 auto; padding: 48px 0 0; text-align: center; } @media (min-width: 768px) { #leading-v2 .lv2-hero { padding-top: 80px; } } #leading-v2 .lv2-hero__title { margin: 0; font-size: clamp(34px, 5vw, 60px); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; color: #fff; } #leading-v2 .lv2-hero__title-accent { color: var(--primary); } #leading-v2 .lv2-hero__subtitle { margin: 16px 0 0; font-size: clamp(18px, 2.5vw, 20px); line-height: 1.5; letter-spacing: -0.01em; color: #fff; } #leading-v2 .lv2-hero__form { width: 100%; max-width: 900px; margin-top: 40px; } #leading-v2 #promo-compare-module { width: 100%; margin-top: 64px; } @media (min-width: 768px) { #leading-v2 #promo-compare-module { margin-top: 112px; } } #leading-v2 #promo-compare-module .promo-section { padding: 48px 0 24px; } #leading-v2 #promo-compare-module .promo-section--compare { padding-top: 32px; padding-bottom: 24px; } @media (max-width: 768px) { #leading-v2 #promo-compare-module .promo-section { padding: 32px 0 16px; } #leading-v2 #promo-compare-module .promo-section__title { margin-bottom: 24px; } } /* ── Footer (RegisterLanding) ── */ .lv2-footer { position: relative; overflow: hidden; margin-top: 32px; padding: 40px 20px 48px; background: var(--bg-page); } @media (min-width: 768px) { .lv2-footer { padding: 40px 32px 48px; } } .lv2-footer__glow { position: absolute; bottom: 0; left: 50%; width: 120%; height: 400px; border-radius: 50%; background: var(--primary); opacity: 0.25; filter: blur(175px); transform: translateX(-50%); pointer-events: none; } .lv2-footer__inner { position: relative; max-width: 1046px; margin: 0 auto; } .lv2-footer__logo-row { display: flex; justify-content: center; padding-bottom: 24px; border-bottom: 1px solid rgba(152, 151, 149, 0.5); } .lv2-footer__logo img { display: block; height: 32px; width: auto; } .lv2-footer__text { margin: 32px 0 0; font-size: 13px; line-height: 20px; letter-spacing: -0.01em; color: #fff; } .lv2-footer__company { margin-top: 20px; font-size: 13px; line-height: 20px; color: #fff; } .lv2-footer__company p { margin: 0; } .lv2-footer__bottom { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 12px; line-height: 1.5; letter-spacing: 0.24px; color: #f9f9f9; } @media (min-width: 768px) { .lv2-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } } .lv2-footer__bottom > p { margin: 0; } .lv2-footer__bottom-links { display: flex; flex-wrap: wrap; gap: 8px 32px; } .lv2-footer__bottom-links a { color: #fff; text-decoration: none; transition: color 0.2s ease; } .lv2-footer__bottom-links a:hover { color: var(--primary); text-decoration: none; }