/* =========================================================================
Omniyat — Header & Primary Nav (Phase 5.5.2 consulting-premium polish)
Reference style : BCG / McKinsey / Bain — uppercase nav, refined hover,
thin signature lines, no-frills dropdowns.
Loaded AFTER main.css ; overrides the base header look + behaviour.
Mobile (<768px) styles stay in main.css.
========================================================================= */
/* --------------------------------------------------------------------- *
* 1. Header height — single source of truth. *
* Was re-declared here (80px) vs main.css (72px). Consolidated in *
* main.css to 80px in Phase 5.6 ; this section kept as documentation. *
* Adjust --header-h in main.css if changing height again. *
* --------------------------------------------------------------------- */
/* --------------------------------------------------------------------- *
* 2. Sticky header — dynamic shadow on scroll. *
* main.css strips the always-on shadow ; we add it back ONLY when *
* header.js toggles .is-scrolled (window.scrollY > 50). *
* --------------------------------------------------------------------- */
.site-header {
box-shadow: none;
border-bottom: 1px solid transparent;
transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header.is-scrolled {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border-bottom-color: rgba(0, 0, 0, 0.05);
}
/* --------------------------------------------------------------------- *
* 3. Logo polish — slab + tighter spacing. *
* --------------------------------------------------------------------- */
.site-logo {
font-family: var(--font-display, var(--font-sans));
font-weight: 700;
font-size: 1.375rem;
letter-spacing: 0.05em;
}
/* --------------------------------------------------------------------- *
* 4. Desktop-only nav polish (>= 768px). *
* Mobile off-canvas stays untouched in main.css. *
* --------------------------------------------------------------------- */
@media (min-width: 768px) {
/* Container padding — wider gutters on desktop. */
.site-header__inner {
padding-inline: 2.5rem;
min-height: var(--header-h);
gap: 2rem;
}
/* Push the nav (and everything after) to the right of the logo. */
.site-logo {
margin-right: auto;
}
/* Primary list — uppercase consulting typography, generous gap. */
.site-nav__list {
gap: 2rem;
align-items: center;
}
.site-nav__list > li {
position: relative;
display: flex;
align-items: center;
}
.site-nav__list > li > a {
display: inline-flex;
align-items: center;
position: relative;
padding: 0.625rem 0;
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-dark, #272727);
text-decoration: none;
transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.site-nav__list > li > a:hover,
.site-nav__list > li > a:focus-visible,
.site-nav__list > li.current-menu-item > a,
.site-nav__list > li.current_page_item > a {
color: var(--color-primary, #83A522);
}
/* --------------------------------------------------------------------- *
* 5. Animated underline on hover (::before, so ::after stays for caret).*
* Scales horizontally from left edge. *
* --------------------------------------------------------------------- */
.site-nav__list > li > a::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: var(--color-primary, #83A522);
transform: scaleX(0);
transform-origin: left center;
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.site-nav__list > li:hover > a::before,
.site-nav__list > li > a:focus-visible::before,
.site-nav__list > li.current-menu-item > a::before,
.site-nav__list > li.current_page_item > a::before,
.site-nav__list > li.menu-item-has-children:focus-within > a::before {
transform: scaleX(1);
}
/* --------------------------------------------------------------------- *
* 6. Inline chevron caret on parents-of-children (::after). *
* Subtle, inline, rotates on hover. *
* --------------------------------------------------------------------- */
.site-nav__list > li.menu-item-has-children > a::after {
content: "";
display: inline-block;
margin-left: 0.25rem;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid currentColor;
vertical-align: middle;
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center 30%;
}
.site-nav__list > li.menu-item-has-children:hover > a::after,
.site-nav__list > li.menu-item-has-children:focus-within > a::after,
.site-nav__list > li.menu-item-has-children.is-open > a::after {
transform: rotate(180deg);
}
/* --------------------------------------------------------------------- *
* 7. Sub-menu base — standard dropdown (Parcours / Ressources). *
* Signature 2px primary top border, refined shadow, no rounded top. *
* --------------------------------------------------------------------- */
.site-nav__list .sub-menu {
position: absolute;
top: calc(100% + 0px);
left: 0;
min-width: 280px;
margin: 0;
padding: 0.5rem 0;
list-style: none;
background: var(--color-white, #fff);
border-top: 2px solid var(--color-primary, #83A522);
border-radius: 0 0 4px 4px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
z-index: 60;
/* Hidden state — opacity/transform animatable, visibility deferred. */
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition:
opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
visibility 0s linear 200ms;
/* Close delay : 300ms — gives time to mouse-over the sub-menu. */
transition-delay: 0s, 0s, 300ms;
}
/* Open : hover, focus-within, or .is-open (touch). */
.site-nav__list > li.menu-item-has-children:hover > .sub-menu,
.site-nav__list > li.menu-item-has-children:focus-within > .sub-menu,
.site-nav__list > li.menu-item-has-children.is-open > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
/* Open delay : 100ms — avoid accidental triggers. */
transition:
opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
visibility 0s linear 100ms;
}
/* Sub-menu items — refined consulting type. */
.site-nav__list .sub-menu li {
list-style: none;
}
.site-nav__list .sub-menu a {
display: block;
padding: 0.75rem 1.5rem;
color: var(--color-dark, #272727);
font-family: var(--font-sans);
font-weight: 500;
font-size: 0.9rem;
letter-spacing: 0;
text-transform: none; /* sub-items NOT uppercase */
text-decoration: none;
border-radius: 0;
transition: background-color 140ms ease, color 140ms ease;
}
.site-nav__list .sub-menu a:hover,
.site-nav__list .sub-menu a:focus-visible,
.site-nav__list .sub-menu .current-menu-item > a {
background: rgba(0, 0, 0, 0.03); /* very light grey, BCG-style */
color: var(--color-primary, #83A522);
}
/* --------------------------------------------------------------------- *
* 8. Mega-menu (Solutions) — contained-width, 3 columns grid. *
* DOM produced by Omniyat_Nav_Walker : *
* *
* --------------------------------------------------------------------- */
.site-nav__list .sub-menu--megamenu {
left: 50%;
transform: translateX(-50%) translateY(-6px);
min-width: min(1140px, calc(100vw - 2rem));
max-width: calc(100vw - 2rem);
padding: 2rem 2.5rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem 3rem;
/* border-top + shadow + border-radius inherited from .sub-menu */
}
.site-nav__list > li.menu-item-has-children:hover > .sub-menu--megamenu,
.site-nav__list > li.menu-item-has-children:focus-within > .sub-menu--megamenu,
.site-nav__list > li.menu-item-has-children.is-open > .sub-menu--megamenu {
transform: translateX(-50%) translateY(0);
}
/* Mega-menu column container. */
.site-nav__list .sub-menu--megamenu .mega-menu__title-item {
margin: 0;
padding: 0;
list-style: none;
}
/* Column heading — refined consulting eyebrow. */
.site-nav__list .sub-menu--megamenu .mega-menu__title {
display: block;
padding: 0 1rem;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-primary, #83A522);
margin: 0 0 1rem;
}
/* Inner list of column links. */
.site-nav__list .sub-menu--megamenu .mega-menu__items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.site-nav__list .sub-menu--megamenu .mega-menu__items > li {
list-style: none;
margin: 0;
}
.site-nav__list .sub-menu--megamenu .mega-menu__items a {
display: block;
padding: 0.625rem 1rem;
color: var(--color-dark, #272727);
font-size: 0.9rem;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
border-radius: 0;
text-decoration: none;
transition: background-color 140ms ease, color 140ms ease;
}
.site-nav__list .sub-menu--megamenu .mega-menu__items a:hover,
.site-nav__list .sub-menu--megamenu .mega-menu__items a:focus-visible,
.site-nav__list .sub-menu--megamenu .mega-menu__items .current-menu-item > a {
background: rgba(0, 0, 0, 0.03);
color: var(--color-primary, #83A522);
}
/* Optional 4th column — pitch + CTA. */
.site-nav__list .sub-menu--megamenu.has-pitch {
grid-template-columns: repeat(3, 1fr) 1.2fr;
}
/* --------------------------------------------------------------------- *
* 9. Header CTA polish — flatter, more institutional. *
* Scoped to .site-header__cta so the global .btn-primary stays as-is.*
* --------------------------------------------------------------------- */
.site-header__cta.btn,
.site-header__cta.btn-primary {
display: inline-flex;
align-items: center;
padding: 0.625rem 1.5rem;
border-radius: 2px;
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.04em;
line-height: 1.4;
transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.site-header__cta.btn-primary:hover,
.site-header__cta.btn-primary:focus-visible {
background-color: var(--color-primary-dark, #6F8C1C);
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(131, 165, 34, 0.25);
}
/* --------------------------------------------------------------------- *
* 10. Language switcher (FR | EN) — visual placeholder. *
* Wire to WPML / Polylang / custom URLs when the i18n stack lands. *
* --------------------------------------------------------------------- */
.lang-switcher {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.lang-switcher__link {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
color: var(--color-text-muted, #7A7A7A);
padding: 0.25rem 0.125rem;
transition: color 160ms ease;
}
.lang-switcher__link:hover,
.lang-switcher__link:focus-visible {
color: var(--color-primary, #83A522);
}
.lang-switcher__link.is-active {
color: var(--color-dark, #272727);
}
.lang-switcher__sep {
color: var(--color-border, #E5E7EB);
font-size: 0.875rem;
font-weight: 300;
user-select: none;
line-height: 1;
}
/* Solo variant — used while the site is FR-only (no EN/AR pages yet).
Renders as the same chip as the active link in the future 2-language
switcher, but as a non-interactive so there's no dead href. */
.lang-switcher--solo {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-dark, #272727);
padding: 0.25rem 0.125rem;
cursor: default;
}
}
/* --------------------------------------------------------------------- *
* Mobile : hide the language switcher (room is for the burger). *
* --------------------------------------------------------------------- */
@media (max-width: 767px) {
.lang-switcher {
display: none;
}
}
/* --------------------------------------------------------------------- *
* 11. Reduced motion — strip animations + delays for users who ask. *
* --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.site-header,
.site-nav__list > li > a,
.site-nav__list > li > a::before,
.site-nav__list > li.menu-item-has-children > a::after,
.site-nav__list .sub-menu,
.site-nav__list .sub-menu a,
.site-header__cta.btn,
.site-header__cta.btn-primary,
.lang-switcher__link {
transition: none !important;
}
.site-nav__list > li > a::before {
transform: scaleX(1); /* always show underline-ready */
opacity: 0;
}
.site-nav__list > li:hover > a::before,
.site-nav__list > li > a:focus-visible::before,
.site-nav__list > li.current-menu-item > a::before {
opacity: 1;
}
.site-nav__list .sub-menu,
.site-nav__list > li.menu-item-has-children:hover > .sub-menu,
.site-nav__list > li.menu-item-has-children:focus-within > .sub-menu,
.site-nav__list > li.menu-item-has-children.is-open > .sub-menu {
transform: none;
}
.site-nav__list .sub-menu--megamenu,
.site-nav__list > li.menu-item-has-children:hover > .sub-menu--megamenu,
.site-nav__list > li.menu-item-has-children:focus-within > .sub-menu--megamenu {
transform: translateX(-50%);
}
.site-header__cta.btn-primary:hover {
transform: none;
}
}