/* ========================================================================== Africa CPTA Theme — Header & Navbar (Updated) Depends on Bootstrap 5 + Bootstrap Icons Target markup uses navbar-expand-xl (desktop = ≥1200px) Changes vs. original: - Keeps original styling and micro-interactions - Allows natural wrapping on xl+ instead of a “More” dropdown - Small a11y/focus and reduced-motion refinements - Optional dark theme hooks via .theme-dark on ========================================================================== */ /* ---------- CSS Custom Properties (safe defaults) ---------- */ :root { --header-height: 80px; --header-height-shrink: 60px; --color-text: #222; --color-surface: #fff; --color-border: rgba(0,0,0,.08); --color-primary: #007b5e; --color-primary-contrast: #fff; --color-accent: #ffb703; --shadow-1: 0 2px 4px rgba(0,0,0,.05); --shadow-2: 0 6px 18px rgba(0,0,0,.08); --transition: .24s ease; } /* Optional: dark theme overrides (toggle via .theme-dark on ) */ .theme-dark :root, html.theme-dark { --color-text: #eaeaea; --color-surface: #0f1115; --color-border: rgba(255,255,255,.1); --color-primary: #22b07d; --color-primary-contrast: #0b1210; --shadow-1: 0 2px 4px rgba(0,0,0,.4); --shadow-2: 0 6px 18px rgba(0,0,0,.5); } /* ---------- Header shell ---------- */ .site-header { position: sticky; top: 0; z-index: 1030; background: rgba(255,255,255,.96); backdrop-filter: saturate(140%) blur(6px); box-shadow: var(--shadow-1); transition: background var(--transition), box-shadow var(--transition), transform var(--transition); } .theme-dark .site-header { background: rgba(15,17,21,.9); } .site-header.shrink { background: var(--color-surface); box-shadow: var(--shadow-2); } /* ---------- Navbar baseline ---------- */ .navbar { min-height: var(--header-height); padding-top: .5rem; padding-bottom: .5rem; transition: min-height var(--transition); } .site-header.shrink .navbar { min-height: var(--header-height-shrink); } /* ---------- Branding ---------- */ .navbar-brand { margin-right: 1rem; } .navbar-brand img { max-height: 50px; height: auto; width: auto; transition: max-height var(--transition); } .site-header.shrink .navbar-brand img { max-height: 44px; } /* ---------- Primary nav: layout & links ---------- */ .navbar-nav { align-items: center; } /* Allow wrapping on XL+ because “More” is removed */ @media (min-width: 1200px) { .navbar-nav { flex-wrap: wrap; /* allow second line if needed */ row-gap: .25rem; /* spacing between wrapped rows */ } } .navbar-nav .nav-link { padding: .5rem .75rem; font-weight: 600; color: var(--color-text); transition: color var(--transition), opacity var(--transition); white-space: normal; /* allow wrapping instead of forcing one line */ outline: none; text-decoration: none; } /* Hover/active color */ .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus, .navbar-nav .nav-link.active { color: var(--color-primary); } /* Keyboard focus ring for nav links (accessibility) */ .navbar-nav .nav-link:focus-visible { box-shadow: 0 0 0 .2rem rgba(0, 123, 94, .25); border-radius: .35rem; } /* Tighten spacing on mid-wide desktops to fit 7+ items */ @media (min-width: 1200px) and (max-width: 1399.98px) { .navbar-nav.mx-lg-auto { gap: .2rem; } .navbar-nav .nav-link { padding: .45rem .6rem; font-size: .95rem; } } /* ---------- Micro-interaction underline (desktop only) ---------- */ @media (min-width: 1200px) { .navbar-nav .nav-link { position: relative; } .navbar-nav .nav-link::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .2rem; /* slightly closer to work with wrapped labels */ height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .2s ease; opacity: .6; pointer-events: none; } .navbar-nav .nav-link:hover::after, .navbar-nav .nav-link:focus::after, .navbar-nav .nav-link.active::after { transform: scaleX(1); } } /* ---------- Dropdowns ---------- */ .navbar-nav .dropdown-menu { border: 1px solid var(--color-border); border-radius: .5rem; padding: .5rem; box-shadow: var(--shadow-2); margin-top: 0; /* snug under toggle to avoid hover gaps */ min-width: 14rem; background: var(--color-surface); } .theme-dark .navbar-nav .dropdown-menu { background: #121620; } .dropdown-item { border-radius: .35rem; color: var(--color-text); font-weight: 500; transition: background-color var(--transition), color var(--transition); } .dropdown-item:hover, .dropdown-item:focus { background: var(--color-primary); color: var(--color-primary-contrast); } .dropdown-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(0,0,0,.15), 0 0 0 .2rem rgba(0, 123, 94, .25); } /* ---------- Header actions (search, share, CTAs) ---------- */ .navbar .btn-link { color: var(--color-text); font-size: 1.25rem; line-height: 1; transition: color var(--transition), opacity var(--transition), transform .15s ease; } .navbar .btn-link:hover, .navbar .btn-link:focus { color: var(--color-primary); } .navbar .btn-link:active { transform: scale(.96); } .navbar .btn-primary { --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary); --bs-btn-hover-bg: var(--color-accent); --bs-btn-hover-border-color: var(--color-accent); color: var(--color-primary-contrast); border-radius: 999px; padding-inline: 1rem; transition: transform .15s ease; } .navbar .btn-primary:active { transform: translateY(1px); } /* Secondary button variant (if used for Contact) */ .navbar .btn-secondary { --bs-btn-bg: var(--color-accent); --bs-btn-border-color: var(--color-border); --bs-btn-color: var(--color-text); --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary); border-radius: 999px; padding-inline: 1rem; } /* ---------- Offcanvas tweaks (mobile/tablet) ---------- */ .offcanvas { background: var(--color-surface); color: var(--color-text); transition: transform .3s ease, background-color var(--transition); } .offcanvas-header { border-bottom: 1px solid var(--color-border); } .offcanvas .navbar-nav .nav-link { padding: .6rem .25rem; font-weight: 600; } .offcanvas .btn-primary { width: 100%; } /* ---------- Scroll progress bar (injected via JS) ---------- */ .scroll-progress { position: fixed; left: 0; top: var(--header-height); width: 0%; height: 4px; background: var(--color-primary); z-index: 2000; transition: width .15s ease-out, top var(--transition), opacity var(--transition); } .site-header.shrink + .scroll-progress { top: var(--header-height-shrink); } /* Optional: hide the bar until JS sets width > 0 for a cleaner mount */ .scroll-progress[style*="width: 0%"] { opacity: 0; } .scroll-progress[style*="width: 1%"], .scroll-progress[style*="width: 2%"], .scroll-progress[style*="width: 3%"], .scroll-progress[style*="width: 4%"], .scroll-progress[style*="width: 5%"] { opacity: 1; } /* ---------- Scroll-to-top button (if present) ---------- */ .scroll-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 1030; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transition), transform var(--transition), visibility 0s linear .24s; } .scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s, 0s, 0s; } /* ---------- Reduced motion preference ---------- */ @media (prefers-reduced-motion: reduce) { .site-header, .navbar, .navbar-brand img, .navbar .btn-link, .navbar .btn-primary, .scroll-progress, .scroll-top { transition: none !important; } .navbar-nav .nav-link::after { transition: none !important; } } /* ---------- Minor utilities ---------- */ .visually-hidden-focusable.skip-link:focus { position: absolute; z-index: 2001; top: .5rem; left: .5rem; background: var(--color-primary); color: var(--color-primary-contrast); padding: .5rem .75rem; border-radius: .35rem; box-shadow: var(--shadow-2); } /* Ensure Bootstrap’s navbar-toggler-icon remains visible in dark mode */ .theme-dark .navbar-light .navbar-toggler { border-color: rgba(255,255,255,.25); } .theme-dark .navbar-light .navbar-toggler-icon { filter: invert(1) grayscale(100%); }