/* * Osmova Base — navigation component (PF-TH-2). * * Plain hand-written CSS, `o-nav*` BEM, neutral `--osmova-base-*` tokens with * literal fallbacks, native nesting, gap over margin, NO !important, no * Tailwind (parent asset contract). Loaded by inc/nav-config.php only when the * parent chrome renders (osmova_base_chrome_renders). * * The component is engaged only by NON-default config; the classic * navbar/static/normal header keeps its pre-PF-TH-2 markup + the baseline * style.css rules and never reaches these classes. * * Degradation matrix (the renderer + this CSS cooperate — see * docs/nav-component.md): * - Both on (.js + Alpine): toggle state opens the off-canvas panel; nested * Alpine disclosures use scoped x-cloak until Alpine boots. * - JS off (no `.js`): the toggle is `display:none` (base rule) and the * `.js`-scoped cloak is inert, so the panel + stacked submenus stay * visible — every link reachable as a static list. * - Alpine off (.js present, no Alpine): the renderer emits NO toggle and NO * x-* attrs, so there is nothing to cloak and no dead toggle — again an * always-visible static list. * - navbar/megamenu dropdowns also open on :hover / :focus-within, so they * work with no JS regardless. * - `.js` is added to pre-paint by osmova_base_js_gate(). * * Mobile breakpoint: the config breakpoint is emitted as `--o-nav-breakpoint` * on the header (consumed by Alpine/JS); the CSS desktop switch uses the * platform `lg` (64rem = the 1024px default). A child using a non-default * breakpoint overrides the media query below. */ .o-nav-header { --o-nav-ink: var(--osmova-base-color-text, #111827); --o-nav-bg: var(--osmova-base-color-background, #ffffff); --o-nav-muted: var(--osmova-base-color-muted, #6b7280); --o-nav-border: var(--osmova-base-color-border, #e5e7eb); --o-nav-accent: var(--osmova-base-color-accent, #2563eb); --o-nav-pad: 1rem; background: var(--o-nav-bg); color: var(--o-nav-ink); border-bottom: 1px solid var(--o-nav-border); } /* Height variants ---------------------------------------------------------- */ .o-nav-header--h-compact { --o-nav-pad: 0.5rem; } .o-nav-header--h-normal { --o-nav-pad: 1rem; } .o-nav-header--h-tall { --o-nav-pad: 1.75rem; } .o-nav-header .osmova-base-container { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-block: var(--o-nav-pad); } /* Bounded slot layouts (PF-33) -------------------------------------------- */ .o-nav--configured { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; width: 100%; gap: 1rem; } .o-nav--configured .o-nav__group { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; gap: 0.75rem; } .o-nav--configured .o-nav__group--start { justify-content: flex-start; } .o-nav--configured .o-nav__group--end { justify-content: flex-end; } .o-nav--configured .o-nav__center { display: flex; justify-content: center; min-width: 0; } .o-nav--configured .o-nav__primary { min-width: 0; } .o-nav--configured .o-nav__primary .o-nav__list--bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .o-nav--configured .o-nav__brand { display: flex; align-items: center; max-inline-size: 100%; } .o-nav--configured .o-nav__brand .custom-logo { width: auto; max-width: 100%; height: auto; } .o-nav--logo-small .o-nav__brand .custom-logo { max-height: 2rem; } .o-nav--logo-medium .o-nav__brand .custom-logo { max-height: 3rem; } .o-nav--logo-large .o-nav__brand .custom-logo { max-height: 4rem; } .o-nav--logo-xlarge .o-nav__brand .custom-logo { max-height: 5rem; } .o-nav--ratio-square .o-nav__brand .custom-logo { aspect-ratio: 1; object-fit: contain; } .o-nav--ratio-wide .o-nav__brand .custom-logo { aspect-ratio: 3 / 1; object-fit: contain; } .o-nav--ratio-wordmark .o-nav__brand .custom-logo { aspect-ratio: 4 / 1; object-fit: contain; } .o-nav__utility, .o-nav__language a { color: var(--o-nav-ink); text-decoration: none; } .o-nav__language { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* At the documented default breakpoint, groups wrap inside their grid tracks * rather than overlapping the center layer. Children may override this media * query when they choose a different configured breakpoint. */ @media (max-width: 63.999rem) { .o-nav--configured { gap: 0.5rem; } .o-nav--configured .o-nav__group { gap: 0.5rem; } .o-nav--configured .o-nav__primary .o-nav__list--bar { display: flex; flex-direction: column; gap: 0.25rem; } .js .o-nav--configured .o-nav__primary.o-nav--interactive .o-nav__list--bar { display: none; } .js .o-nav--configured .o-nav__primary.o-nav--interactive.is-open .o-nav__list--bar { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 60; display: flex; width: min(20rem, 85vw); padding: 4rem 1.5rem 1.5rem; overflow-y: auto; background: var(--o-nav-bg); border-left: 1px solid var(--o-nav-border); box-shadow: -8px 0 24px rgb(0 0 0 / 12%); } .js .o-nav--configured .o-nav__toggle { display: inline-flex; } .o-nav--configured.o-nav--mobile-brand-center .o-nav__brand { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; } } /* Positioning -------------------------------------------------------------- */ .o-nav-header--pos-sticky { position: sticky; top: var(--osmova-admin-bar-h, 0px); z-index: 50; } .o-nav-header--pos-fixed { position: fixed; inset-inline: 0; top: var(--osmova-admin-bar-h, 0px); z-index: 50; } /* Reset list chrome for every nav list in the component. */ .o-nav__list, .o-nav__submenu, .o-nav__mega-grid { margin: 0; padding: 0; list-style: none; } .o-nav__link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.25rem; color: var(--o-nav-ink); text-decoration: none; &:hover, &:focus-visible { color: var(--o-nav-accent); } } /* CTA item: a bordered button. */ .o-nav__link--cta { padding: 0.5rem 1rem; border: 1px solid currentColor; border-radius: 0.25rem; &:hover, &:focus-visible { color: var(--o-nav-bg); background: var(--o-nav-accent); border-color: var(--o-nav-accent); } } /* Disclosure + burger icon buttons. */ .o-nav__disclosure, .o-nav__toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0.4rem; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1.25rem; line-height: 1; &:focus-visible { outline: 2px solid var(--o-nav-accent); outline-offset: 2px; } } .o-nav__icon { display: block; } /* The toggle exists only as a JS affordance: hide it when JS is absent so the * fallback list (always visible) is used instead. */ .o-nav__toggle { display: none; } .js .o-nav__toggle { display: inline-flex; } /* ========================================================================== * NAVBAR + MEGAMENU (horizontal from lg up; burger drawer below) * ========================================================================== */ .o-nav--navbar, .o-nav--megamenu { .o-nav__list--bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } /* Submenus are dropdowns: hidden by default, shown on hover/focus (no-JS) * or when Alpine sets x-show (open). */ .o-nav__submenu { display: none; } } @media (min-width: 64rem) { .o-nav--navbar, .o-nav--megamenu { .o-nav__toggle { display: none; } .js .o-nav__toggle { display: none; } .o-nav__list--bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; } .o-nav__item { position: relative; } /* Dropdown submenu: appears under its parent. */ .o-nav__item--has-children { & > .o-nav__submenu, & > div > .o-nav__submenu { position: absolute; top: 100%; left: 0; min-width: 12rem; flex-direction: column; gap: 0.25rem; padding: 0.5rem; background: var(--o-nav-bg); border: 1px solid var(--o-nav-border); border-radius: 0.25rem; box-shadow: 0 8px 24px rgb(0 0 0 / 8%); } /* No-JS: reveal on hover / keyboard focus within the item. */ &:hover > .o-nav__submenu, &:focus-within > .o-nav__submenu { display: flex; } } /* The disclosure chevron is informative on desktop; hover/focus drives * the dropdown, so the button is a no-op affordance kept for keyboard. */ .o-nav__disclosure { font-size: 1rem; } } /* Megamenu: full-width panel under the bar. */ .o-nav--megamenu { .o-nav__item--mega { position: static; & > .o-nav__mega { position: absolute; inset-inline: 0; top: 100%; padding: 1.5rem clamp(1rem, 4vw, 3rem); background: var(--o-nav-bg); border-top: 1px solid var(--o-nav-border); box-shadow: 0 8px 24px rgb(0 0 0 / 8%); } &:hover > .o-nav__mega, &:focus-within > .o-nav__mega { display: block; } } .o-nav__mega-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem 2rem; } } } /* ========================================================================== * DRAWER / BURGER + the mobile fallback of navbar/megamenu * ========================================================================== */ .o-nav--drawer, .o-nav--burger { /* No-JS baseline: an always-visible stacked list (links reachable). The * interactive scope rules turn the opened list into an off-canvas panel. */ .o-nav__list { display: flex; flex-direction: column; gap: 0.25rem; } } /* Stacked submenu (drawer/burger + mobile navbar): full-width, indented. */ .o-nav__submenu--stacked { display: flex; flex-direction: column; gap: 0.25rem; padding-left: 1rem; } /* When JS is on, the off-canvas panel overlays the page from the side. */ .js { .o-nav--drawer, .o-nav--burger { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 60; width: min(20rem, 85vw); padding: 4rem 1.5rem 1.5rem; overflow-y: auto; background: var(--o-nav-bg); border-left: 1px solid var(--o-nav-border); box-shadow: -8px 0 24px rgb(0 0 0 / 12%); } } /* ========================================================================== * FULLSCREEN OVERLAY PANEL LAYOUT (nav_panel_layout = fullscreen) * The burger/drawer panel covers the whole viewport instead of a side drawer; * the header is lifted above it so the toggle (close) and branding stay on top. * ========================================================================== */ .js .o-nav--fullscreen { inset: 0; width: 100%; max-width: none; border-left: 0; box-shadow: none; } /* Establish a stacking context for a static header so the open-state lift * applies (sticky/fixed headers already create one). */ .o-nav-header--panel-fullscreen.o-nav-header--pos-static { position: relative; } .o-nav-open .o-nav-header--panel-fullscreen { z-index: 70; } .o-nav-open .o-nav-header--panel-fullscreen .o-nav__toggle { position: relative; z-index: 80; } /* Hide branding while the overlay is open unless nav_overlay_show_brand. */ .o-nav-open .o-nav-header--panel-fullscreen:not(.o-nav-header--show-brand) .osmova-base-site-branding { opacity: 0; pointer-events: none; } /* With show-brand, lift the branding above the fullscreen overlay (z-60) so it * is actually visible — the header lift alone is not enough inside the shared * stacking context. */ .o-nav-open .o-nav-header--panel-fullscreen.o-nav-header--show-brand .osmova-base-site-branding { position: relative; z-index: 80; } /* Below lg, navbar/megamenu collapse to the burger drawer. */ @media (max-width: 63.999rem) { .js { /* Mobile dropdowns become stacked accordions. */ .o-nav--navbar .o-nav__submenu, .o-nav--megamenu .o-nav__submenu, .o-nav--megamenu .o-nav__mega { position: static; display: flex; flex-direction: column; box-shadow: none; border: 0; padding-left: 1rem; } } } /* Burger scope + configured breakpoint runtime -------------------------------- * The header's semantic scope and runtime viewport classes are set from the * saved breakpoint. CSS never infers configuration from an inline style. * Interactive lists alone are hidden; Alpine-disabled and no-JS markup stays * visible, preserving the static-list fallback. */ .js .o-nav-header--scope-all .o-nav__toggle, .js .o-nav-header--scope-mobile.o-nav-header--mobile .o-nav__toggle { display: inline-flex; } .js .o-nav-header--scope-all .o-nav--interactive > .o-nav__list, .js .o-nav-header--scope-all .o-nav__primary.o-nav--interactive > .o-nav__list, .js .o-nav-header--scope-mobile.o-nav-header--mobile .o-nav--interactive > .o-nav__list, .js .o-nav-header--scope-mobile.o-nav-header--mobile .o-nav__primary.o-nav--interactive > .o-nav__list { display: none; } .js .o-nav-header--scope-all .o-nav--interactive.is-open > .o-nav__list, .js .o-nav-header--scope-all .o-nav__primary.o-nav--interactive.is-open > .o-nav__list, .js .o-nav-header--scope-mobile.o-nav-header--mobile .o-nav--interactive.is-open > .o-nav__list, .js .o-nav-header--scope-mobile.o-nav-header--mobile .o-nav__primary.o-nav--interactive.is-open > .o-nav__list { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 60; display: flex; flex-direction: column; gap: 0.25rem; width: min(20rem, 85vw); padding: 4rem 1.5rem 1.5rem; overflow-y: auto; background: var(--o-nav-bg); border-left: 1px solid var(--o-nav-border); box-shadow: -8px 0 24px rgb(0 0 0 / 12%); } .o-nav-header--mobile .o-nav--configured { gap: 0.5rem; } .o-nav-header--mobile .o-nav--configured .o-nav__group { gap: 0.5rem; } .o-nav-header--mobile .o-nav--configured .o-nav__primary .o-nav__list--bar { flex-direction: column; gap: 0.25rem; } .o-nav-header--mobile .o-nav--configured.o-nav--mobile-brand-center .o-nav__brand { position: absolute; left: 50%; z-index: 1; transform: translateX(-50%); } /* Override the default CSS fallback when a saved breakpoint is below 1024px. */ .js .o-nav-header--desktop.o-nav-header--scope-mobile .o-nav__toggle { display: none; } .js .o-nav-header--desktop.o-nav-header--scope-mobile .o-nav--drawer, .js .o-nav-header--desktop.o-nav-header--scope-mobile .o-nav--burger { position: static; inset: auto; z-index: auto; width: auto; padding: 0; overflow: visible; background: transparent; border: 0; box-shadow: none; } .js .o-nav-header--desktop.o-nav-header--scope-mobile .o-nav--interactive > .o-nav__list, .js .o-nav-header--desktop.o-nav-header--scope-mobile .o-nav__primary.o-nav--interactive > .o-nav__list { position: static; display: flex; flex-direction: row; width: auto; padding: 0; overflow: visible; background: transparent; border: 0; box-shadow: none; } .o-nav-header--desktop .o-nav--configured .o-nav__primary .o-nav__list--bar { flex-direction: row; gap: 1rem; } .o-nav-header--desktop .o-nav--configured.o-nav--mobile-brand-center .o-nav__brand { position: static; z-index: auto; transform: none; } /* ========================================================================== * FOOTER NAV-BAND * ========================================================================== */ .o-nav-footer { --o-nav-band-ink: var(--osmova-base-color-text, #111827); --o-nav-band-muted: var(--osmova-base-color-muted, #6b7280); --o-nav-band-accent: var(--osmova-base-color-accent, #2563eb); } .o-nav-band { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-block: 2rem; } @media (min-width: 48rem) { .o-nav-band { grid-template-columns: var(--o-nav-band-grid, repeat(4, minmax(0, 1fr))); } } .o-nav-band__heading { margin: 0 0 0.75rem; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--o-nav-band-muted); } .o-nav-band__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.4rem; } .o-nav-band__link { color: var(--o-nav-band-ink); text-decoration: none; &:hover, &:focus-visible { color: var(--o-nav-band-accent); } } .o-nav-band__link--cta { display: inline-block; margin-top: 0.5rem; padding: 0.4rem 0.9rem; border: 1px solid currentColor; border-radius: 0.25rem; } .o-nav-band__socials-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem; } .o-nav-band__social { color: var(--o-nav-band-ink); text-decoration: none; &:hover, &:focus-visible { color: var(--o-nav-band-accent); } } .o-nav-band__social-icon { width: 1.5rem; height: 1.5rem; vertical-align: middle; } /* x-cloak: hide Alpine-controlled chrome until Alpine initializes — but ONLY * when JS is present (`.js`, set pre-paint by osmova_base_js_gate). Without JS * the cloak is inert, so the drawer/burger panel and any cloaked submenu stay * visible (the documented always-visible inline fallback) instead of being * hidden behind a toggle that can never open them. */ .js [x-cloak] { display: none; }