/* CAPFA custom header — desktop + mobile. * Tokens come from capfa-tokens.css (loaded globally; see functions.php). */ /* Divi reserves top padding on #page-container for its (now-removed) fixed * header (padding-top: 80px and responsive 111/147/177px). Our custom header * is position: sticky and in-flow, so that reservation only adds a dead gap * above the header. Neutralize it. Divi's own rules use !important, so we must * too. The .et-tb-has-header overrides only apply when a TB header is active * (not our case), so this plain-selector rule wins over Divi's padding-top:Npx. */ #page-container { padding-top: 0 !important; } /* On Divi pagebuilder pages, Divi sets inline overflow (overflow-x:hidden on * , overflow-y:hidden on #page-container) to contain full-width sections. * That turns those elements into scroll containers and breaks the sticky header * (it scrolls away instead of sticking). overflow-x: clip contains horizontal * overflow WITHOUT creating a scroll container, and keeping the other axis * visible preserves position: sticky. !important beats Divi's inline styles. * Body's overflow-y is left untouched so the mobile-menu scroll lock * (body.capfa-no-scroll) still works. */ body { overflow-x: clip !important; } #page-container { overflow-x: clip !important; overflow-y: visible !important; } /* ---------- Base ---------- */ .capfa-header { position: sticky; top: 0; z-index: 1000; background: var(--capfa-white, #fff); border-bottom: 1px solid rgba(0, 0, 0, 0.08); font-family: var(--capfa-font-sans, sans-serif); } .capfa-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 64px; padding-inline: 1.25rem; max-width: 1800px; margin-inline: auto; } .capfa-header__logo { display: block; line-height: 0; } .capfa-header__logo img, .capfa-header__logo .custom-logo-link img { display: block; height: 44px; width: auto; transition: opacity .28s ease; } .capfa-header__logo:hover img { opacity: 0.85; } /* ---------- Social icons (desktop position; mobile uses .capfa-mobile-menu__social) ---------- */ .capfa-header__social { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.75rem; } .capfa-header__social a { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; color: var(--capfa-navy, #0a2540); text-decoration: none; transition: color .28s ease, background-color .28s ease, transform .28s ease; } .capfa-header__social a:hover, .capfa-header__social a:focus-visible { color: var(--capfa-teal, #1f8a8a); background: var(--capfa-bg-light, #f4f6f8); transform: translateY(-1px); } .capfa-header__social svg { width: 24px; height: 24px; display: block; } /* ---------- Burger button (mobile-only visibility set in @media) ---------- */ .capfa-header__burger { display: none; background: transparent; border: 0; width: 44px; height: 44px; padding: 0; cursor: pointer; position: relative; } .capfa-header__burger-lines, .capfa-header__burger-lines::before, .capfa-header__burger-lines::after { content: ""; display: block; position: absolute; left: 10px; width: 24px; height: 2px; background: var(--capfa-navy, #0a2540); transition: transform .2s ease, opacity .2s ease, top .2s ease; } .capfa-header__burger-lines { top: 21px; } .capfa-header__burger-lines::before { top: -7px; } .capfa-header__burger-lines::after { top: 7px; } /* ---------- Desktop nav (≥ 981px) ---------- */ @media (min-width: 981px) { .capfa-header__inner { height: 72px; } .capfa-nav { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.75rem; } .capfa-nav > li { position: relative; } .capfa-nav > li > a { display: block; padding: 0.5rem 0; text-decoration: none; color: var(--capfa-navy, #0a2540); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; } .capfa-nav > li > a:hover, .capfa-nav > li > a:focus-visible, .capfa-nav > li.is-open > a { color: var(--capfa-teal, #1f8a8a); } .capfa-nav .sub-menu { list-style: none; margin: 0; padding: 0.5rem 0; position: absolute; top: calc(100% + 0.25rem); left: 0; min-width: 240px; background: var(--capfa-white, #fff); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px; box-shadow: 0 12px 32px rgba(10, 37, 64, 0.10); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .28s cubic-bezier(0.16, 1, 0.3, 1), transform .28s cubic-bezier(0.16, 1, 0.3, 1), visibility .28s; } .capfa-nav > li:hover > .sub-menu, .capfa-nav > li.is-open > .sub-menu, .capfa-nav > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .capfa-nav .sub-menu li a { display: block; padding: 0.5rem 1rem; text-decoration: none; color: var(--capfa-navy, #0a2540); font-size: 0.9rem; transition: background-color .2s ease, color .2s ease; } .capfa-nav .sub-menu li a:hover, .capfa-nav .sub-menu li a:focus-visible { background: var(--capfa-bg-light, #f4f6f8); color: var(--capfa-teal, #1f8a8a); } .capfa-nav > li > a { transition: color .22s ease; } .capfa-mobile-menu { display: none !important; } } /* ---------- Mobile (≤ 980px) ---------- */ @media (max-width: 980px) { .capfa-header__nav, .capfa-header__social { display: none; } .capfa-header__burger { display: block; } .capfa-header__logo img { height: 38px; } .capfa-mobile-menu { position: fixed; inset: 0; z-index: 1100; background: var(--capfa-navy, #0a2540); color: var(--capfa-white, #fff); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .38s cubic-bezier(0.16, 1, 0.3, 1), transform .38s cubic-bezier(0.16, 1, 0.3, 1), visibility .38s; overflow-y: auto; } .capfa-header[data-menu-state="open"] .capfa-mobile-menu { opacity: 1; visibility: visible; transform: translateY(0); } .capfa-mobile-menu[hidden] { display: none; } .capfa-mobile-menu__topbar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; /* Right padding (1.5rem) matches the mobile-nav item right padding so * the × button's right edge aligns with the chevron arrows below. */ padding: 0.75rem 1.5rem; background: var(--capfa-navy, #0a2540); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .capfa-mobile-menu__logo { line-height: 0; } .capfa-mobile-menu__logo img { filter: brightness(0) invert(1); height: 40px; width: auto; display: block; } .capfa-mobile-menu__close { background: transparent; border: 0; color: #fff; font-size: 2rem; line-height: 1; width: 32px; height: 32px; cursor: pointer; padding: 0; margin-right: -6px; /* align the visual × glyph with chevron right edge */ transition: opacity .2s ease, transform .2s ease; } .capfa-mobile-menu__close:hover { opacity: 0.8; transform: scale(1.05); } .capfa-mobile-nav { list-style: none; margin: 0; padding: 1rem 0; } .capfa-mobile-nav > li { border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .capfa-mobile-nav > li > a { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; color: #fff; text-decoration: none; font-size: 1.125rem; font-weight: 600; min-height: 44px; transition: color .22s ease, background-color .22s ease; } .capfa-mobile-nav > li > a:hover, .capfa-mobile-nav > li.is-open > a { color: var(--capfa-teal, #76c8c1); } .capfa-mobile-nav > li.menu-item-has-children > a::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1); margin-left: 0.75rem; flex-shrink: 0; } .capfa-mobile-nav > li.is-open > a::after { transform: rotate(-135deg); } .capfa-mobile-nav .sub-menu { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(0.16, 1, 0.3, 1); background: rgba(0, 0, 0, 0.12); } .capfa-mobile-nav > li.is-open > .sub-menu { max-height: 80vh; } .capfa-mobile-nav .sub-menu li a { display: block; padding: 0.75rem 2.25rem; color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 1rem; min-height: 44px; transition: color .2s ease; } .capfa-mobile-nav .sub-menu li a:hover { color: var(--capfa-teal, #76c8c1); } /* Social icons inside mobile overlay — sit below the menu, centered. */ .capfa-mobile-menu__social { list-style: none; margin: 1.5rem 0 2rem; padding: 0; display: flex; justify-content: center; gap: 2.5rem; } .capfa-mobile-menu__social a { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, 0.08); text-decoration: none; transition: background-color .25s ease, transform .25s ease, color .25s ease; } .capfa-mobile-menu__social a:hover, .capfa-mobile-menu__social a:focus-visible { background: var(--capfa-teal, #1f8a8a); transform: translateY(-2px); } .capfa-mobile-menu__social svg { width: 29px; height: 29px; display: block; } /* Body-locked state while overlay is open. Set on by header.js. */ body.capfa-no-scroll { position: fixed; width: 100%; overflow: hidden; } } /* Hide the mobile-overlay social list on desktop (header has its own copy). */ @media (min-width: 981px) { .capfa-mobile-menu__social { display: none; } } /* ---------- Suppress Divi's leftover header markup ---------- */ /* Divi TB template still renders a header slot on most URLs (empty when TB * header is disabled, or the default Divi nav otherwise). Hide it so only * .capfa-header is visible. Footer is left intact. */ #main-header, .et-l--header, .et_pb_section_header { display: none !important; } /* ---------- Focus rings (a11y) ---------- */ .capfa-header :focus-visible, .capfa-mobile-menu :focus-visible { outline: 2px solid var(--capfa-teal, #1f8a8a); outline-offset: 2px; }