/* * components/shared.css * Shared styles for all Wilben Foundation pages. * Included via in head-links.html (SSI-injected into every page). */ /* ── Typography baseline ────────────────────── */ body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } /* ── Desktop hover dropdown ─────────────────── */ .dropdown:hover .dropdown-menu { display: block; } /* ── Utility: hero gradient overlay ────────── */ .hero-overlay { background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5)); } /* ── Utility: generous section padding ──────── */ .section-spacing { padding-top: 120px; padding-bottom: 120px; } /* ════════════════════════════════════════════ ACTIVE NAV STATES Set by header.js reading data-page on ════════════════════════════════════════════ */ .nav-active { color: #823898 !important; font-weight: 700; } /* ════════════════════════════════════════════ MOBILE MENU SYSTEM ════════════════════════════════════════════ */ /* Semi-transparent backdrop */ #mob-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); z-index: 60; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } #mob-overlay.open { opacity: 1; pointer-events: all; } /* Slide-in drawer panel */ #mob-menu { position: fixed; top: 0; right: 0; height: 100dvh; width: min(340px, 90vw); background: #ffffff; z-index: 70; transform: translateX(100%); transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18); } #mob-menu.open { transform: translateX(0); } /* Accordion chevron rotation */ .mob-accordion-btn .chevron { transition: transform 0.28s ease; } .mob-accordion-btn[aria-expanded="true"] .chevron { transform: rotate(180deg); } /* Accordion panel expand / collapse */ .mob-accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1); } .mob-accordion-panel.open { max-height: 500px; } /* Hamburger three-line icon */ .ham-line { display: block; width: 22px; height: 2px; background: #823898; border-radius: 2px; transition: transform 0.3s ease, opacity 0.2s ease; transform-origin: center; } /* Hamburger → X morph when drawer is open */ #mob-hamburger.is-open .ham-line:nth-child(1) { transform: translateY(8px) rotate(45deg); } #mob-hamburger.is-open .ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); } #mob-hamburger.is-open .ham-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Mobile active link highlight */ .mob-nav-active { color: #823898 !important; font-weight: 600; background-color: rgba(130, 56, 152, 0.08); }