/* ── Hide Olivero's built-in header entirely ─────────────── */ .site-header, .sticky-header-toggle, .social-bar { display: none !important; } /* Push page content below the fixed header */ body { padding-top: 80px; } /* ── Custom header shell ─────────────────────────────────── */ .rpt-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 80px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } .rpt-header__inner { display: flex; align-items: center; height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; gap: 2rem; } /* ── Brand / site name ───────────────────────────────────── */ .rpt-header__brand { font-size: 1.125rem; font-weight: 700; color: #1e3a5f; text-decoration: none; white-space: nowrap; flex-shrink: 0; } .rpt-header__brand:hover { color: #1e3a8a; } /* ── Nav list ────────────────────────────────────────────── */ .rpt-header__nav { flex: 1; min-width: 0; } .rpt-header__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0.25rem; } .rpt-header__items--cta { margin-left: auto; display: flex; gap: 0.25rem; } /* ── Nav links ───────────────────────────────────────────── */ .rpt-header__link { display: block; font-size: 0.9375rem; font-weight: 400; color: #374151; text-decoration: none; padding: 0.25rem 0.875rem; } .rpt-header__link:hover, .rpt-header__link:focus { color: #1e3a8a; } .rpt-header__link.is-active { color: #1e3a8a; font-weight: 500; } /* ── CTA button ──────────────────────────────────────────── */ .rpt-header__cta { display: inline-block; padding: 0.5rem 1.25rem; background: #1e3a5f; color: #fff; font-size: 0.9rem; font-weight: 500; text-decoration: none; border-radius: 4px; border: 1.5px solid #1e3a5f; transition: background 0.15s, border-color 0.15s; white-space: nowrap; } .rpt-header__cta:hover, .rpt-header__cta:focus { background: #152a45; border-color: #152a45; color: #fff; } .rpt-header__item--cta { padding: 0.5rem 1.5rem; } /* ── Hamburger button (hidden on desktop) ────────────────── */ .rpt-header__hamburger { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 8px; background: none; border: none; cursor: pointer; flex-shrink: 0; margin-left: auto; } .rpt-header__hamburger span { display: block; height: 4px; background: #1e3a5f; border-radius: 3px; transition: transform 0.25s ease, opacity 0.2s ease, width 0.25s ease; } .rpt-header__hamburger span:nth-child(1) { width: 45%; } .rpt-header__hamburger span:nth-child(2) { width: 100%; } .rpt-header__hamburger span:nth-child(3) { width: 45%; align-self: flex-end; } /* Animate to X when open */ .rpt-header__hamburger[aria-expanded="true"] span:nth-child(1) { width: 100%; transform: translateY(10px) rotate(45deg); } .rpt-header__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .rpt-header__hamburger[aria-expanded="true"] span:nth-child(3) { width: 100%; transform: translateY(-10px) rotate(-45deg); } /* ── Mobile layout ───────────────────────────────────────── */ @media (max-width: 768px) { .rpt-header__hamburger { display: flex !important; } .rpt-header__nav { position: absolute; top: 80px; left: 0; right: 0; background: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.25s ease; } .rpt-header__nav.is-open { max-height: 500px; opacity: 1; } .rpt-header__list { flex-direction: column; align-items: stretch; gap: 0; } .rpt-header__link { padding: 0.75rem 1.5rem; font-size: 1rem; } .rpt-header__cta { display: block; text-align: center; } }