/* ============================================================ HERO HOMEREACH — main.css Shared across all pages. Link this in every HTML . Last updated: 2026-05-11 ============================================================ */ /* ── VARIABLES ── */ :root { --navy: #0C2D5E; --mid-navy: #1A4A8A; --gold: #C9973A; --bright-gold: #EAB84A; --white: #F5F7FA; --near-black: #1C1C1E; --green: #1A6B4A; --warm-gray: #D3D1C7; --font-head: 'Playfair Display', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --max-w: 1140px; --nav-h: 82px; --radius: 10px; --transition: all 0.24s ease; } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--near-black); background: var(--white); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* ── TYPOGRAPHY ── */ h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; color: var(--navy); line-height: 1.15; } h1 { font-size: clamp(36px, 5vw, 58px); } h2 { font-size: clamp(28px, 4vw, 42px); } h3 { font-size: clamp(20px, 2.5vw, 26px); } /* ── LAYOUT ── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; } .section { padding: 96px 0; } .section-sm { padding: 64px 0; } @media (max-width: 768px) { .container { padding: 0 20px; } .section { padding: 64px 0; } } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: 15px; padding: 16px 32px; border-radius: var(--radius); transition: var(--transition); letter-spacing: 0.01em; white-space: nowrap; } .btn-gold { background: var(--gold); color: var(--navy); box-shadow: 0 4px 20px rgba(201,151,58,0.35); } .btn-gold:hover { background: var(--bright-gold); transform: translateY(-2px); box-shadow: 0 6px 28px rgba(201,151,58,0.45); } .btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.5); } .btn-outline:hover { border-color: var(--gold); color: var(--gold); } .btn-navy { background: var(--navy); color: #fff; } .btn-navy:hover { background: var(--mid-navy); transform: translateY(-2px); } .btn-arrow::after { content: '→'; font-size: 18px; transition: transform 0.2s; } .btn-arrow:hover::after { transform: translateX(4px); } /* ── SECTION UTILITIES ── */ .section-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } .section-eyebrow::before { content: ''; display: block; width: 28px; height: 2px; background: var(--gold); } .section-title-center { text-align: center; margin-bottom: 12px; } .section-sub-center { text-align: center; font-size: 18px; color: #666; max-width: 560px; margin: 0 auto 64px; } /* ════════════════════════════════ NAVIGATION ════════════════════════════════ */ #nav { position: fixed; top: 0; left: 0; right: 0; z-index: 999; height: var(--nav-h); display: flex; align-items: center; transition: var(--transition); } #nav.scrolled { background: rgba(12, 45, 94, 0.97); backdrop-filter: blur(12px); box-shadow: 0 2px 24px rgba(0,0,0,0.2); border-bottom: 1px solid rgba(201,151,58,0.2); } /* Non-hero pages: nav needs background on load */ #nav.nav-solid { background: rgba(12, 45, 94, 0.97); border-bottom: 1px solid rgba(201,151,58,0.2); } .nav-inner { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .nav-logo-mark { width: 42px; height: 42px; flex-shrink: 0; } .nav-wordmark { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: #fff; line-height: 1; white-space: nowrap; } .nav-wordmark span { color: var(--gold); } .nav-tm { font-size: 12px; vertical-align: super; color: var(--gold); } .nav-links { display: flex; align-items: center; gap: 20px; /* reduced from 36px to fit 6 items cleanly */ flex-wrap: nowrap; /* never allow items to wrap to a second line */ } .nav-links a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.8); transition: var(--transition); position: relative; white-space: nowrap; /* keeps each link on one line at all times */ } .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform 0.2s ease; } .nav-links a:hover { color: #fff; } .nav-links a:hover::after { transform: scaleX(1); } .nav-links a.active { color: #fff; } .nav-links a.active::after { transform: scaleX(1); } .nav-cta { margin-left: 16px; flex-shrink: 0; } .nav-cta .btn { padding: 9px 14px; font-size: 13px; } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; } .nav-hamburger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: var(--transition); } /* Mobile full-screen nav */ #mobile-nav { position: fixed; top: var(--nav-h); /* starts at 82px, below the nav bar */ left: 0; right: 0; bottom: 0; z-index: 998; background: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; opacity: 0; pointer-events: none; transition: opacity 0.3s; } #mobile-nav.open { opacity: 1; pointer-events: all; } #mobile-nav a { font-family: var(--font-head); font-size: 32px; font-weight: 700; color: #fff; transition: color 0.2s; } #mobile-nav a:hover { color: var(--gold); } /* Bumped from 900px to 1060px — six nav items need more room before collapsing to hamburger */ @media (max-width: 1060px) { .nav-links, .nav-cta { display: none; } .nav-hamburger { display: flex; } } /* ════════════════════════════════ FOOTER ════════════════════════════════ */ #footer { background: #080f1c; padding: 64px 0 32px; border-top: 1px solid rgba(201,151,58,0.15); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer-brand .wordmark { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 16px; } .footer-brand .wordmark span { color: var(--gold); } .footer-brand p { font-size: 14px; color: rgba(255,255,255,0.45); line-height: 1.7; max-width: 280px; } .footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; } .footer-col a { display: block; font-size: 14px; color: rgba(255,255,255,0.5); margin-bottom: 10px; transition: color 0.2s; } .footer-col a:hover { color: rgba(255,255,255,0.85); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.06); } .footer-copy { font-size: 12px; color: rgba(255,255,255,0.3); } .footer-legal { display: flex; gap: 24px; } .footer-legal a { font-size: 12px; color: rgba(255,255,255,0.3); transition: color 0.2s; } .footer-legal a:hover { color: rgba(255,255,255,0.6); } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } } /* ════════════════════════════════ INTERIOR PAGE HERO Used on Programs, Who We Serve, About, Contact, Blog ════════════════════════════════ */ .page-hero { background: var(--navy); padding: calc(var(--nav-h) + 64px) 0 80px; position: relative; overflow: hidden; border-bottom: 4px solid var(--gold); } .page-hero::before { content: ''; position: absolute; top: -80px; right: -80px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(201,151,58,0.08) 0%, transparent 70%); } .page-hero-inner { position: relative; z-index: 2; text-align: center; } .page-hero h1 { color: #fff; margin-bottom: 16px; } .page-hero h1 span { color: var(--gold); } .page-hero p { font-size: 18px; color: rgba(255,255,255,0.7); max-width: 600px; margin: 0 auto 32px; line-height: 1.7; } /* ════════════════════════════════ SCROLL ANIMATIONS ════════════════════════════════ */ .fade-up { opacity: 0; transform: translateY(32px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } .fade-up.delay-1 { transition-delay: 0.1s; } .fade-up.delay-2 { transition-delay: 0.2s; } .fade-up.delay-3 { transition-delay: 0.3s; } .fade-up.delay-4 { transition-delay: 0.4s; } /* ════════════════════════════════ SHARED NAV JAVASCRIPT HOOK Add class="nav-solid" to #nav on any page without a full-bleed hero ════════════════════════════════ */