/*
* Header (parts/header.html, root .smh-header). Owner: chrome. Design: mockup A "Living Network".
* A FIXED bar over the page: transparent over a dark first band (the hero, or any band marked .smh-under-header),
* dark glass once the page scrolls 24 px (living.js adds .is-solid; pages without a dark first band get the glass
* from the start, base.css section 2), hidden while scrolling down past 90% of the viewport and back on scroll up
* (.is-hidden). Every change is a transform or an opacity:
* 88 px tall (76 below 1080, 68 below 760); solid = the bar moves up and the glass scales to A's 72 / 72 / 64 px.
* Content: white lockup (smh/brand, functions.php section 7) | the menu centred | language + white CTA (from 1080)
* | the menu toggle (below 1080; core/navigation overlay, parts/navigation-overlay.html).
* Never transform an ancestor of the open menu: core's overlay is position: fixed inside the navigation.
* Chromium 114 floor: no nesting, no :dir(); logical properties except the physical scale origins noted.
*/
.smh-header {
--smh-hdr-shift: -8px;
--smh-hdr-glass: .909; /* (88 - 8) / 88: the glass ends at 72 px once the bar has moved up */
--smh-logo-solid: .852; /* 54 -> 46 px */
position: fixed;
inset-inline: 0;
top: var(--wp-admin--admin-bar--height, 0px);
z-index: 100;
block-size: var(--smh-hdr);
color: var(--smh-white);
transition: transform .6s var(--smh-e-out);
}
@media (max-width: 1079px) {
.smh-header { --smh-hdr-shift: -2px; --smh-hdr-glass: .974; --smh-logo-solid: .958; }
}
@media (max-width: 759px) {
.smh-header { --smh-hdr-shift: -2px; --smh-hdr-glass: .97; --smh-logo-solid: 1; }
}
/* The glass. */
.smh-header::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: rgb(9 44 55 / 0.74);
-webkit-backdrop-filter: blur(18px) saturate(1.25);
backdrop-filter: blur(18px) saturate(1.25);
border-block-end: 1px solid rgb(255 255 255 / 0.08);
box-shadow: 0 18px 40px -30px rgb(0 0 0 / 0.8);
opacity: 1;
transform-origin: top;
transition: opacity .45s var(--smh-e-std), transform .5s var(--smh-e-out);
}
/* Phones and tablets, and slow devices: no live blur while scrolling (it re-blurs every frame); a denser glass. */
@media (max-width: 1079px) {
.smh-header::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(9 44 55 / 0.95); }
}
.smh-lowpower .smh-header::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(9 44 55 / 0.95); }
body:has(.smh-under-header, .smh-hero) .smh-header:not(.is-solid)::before { opacity: 0; }
.smh-header.is-solid { transform: translateY(var(--smh-hdr-shift)); }
.smh-header.is-solid::before { transform: scaleY(var(--smh-hdr-glass)); }
.smh-header.is-hidden { transform: translateY(-102%); }
/* The open menu is fixed inside the header: no transform on the header while it is open, at once. */
.smh-header:has(.is-menu-open), .smh-header:has(.is-menu-open)::before { transform: none !important; transition: none !important; }
.smh-header:has(.is-menu-open) { z-index: 9100; } /* above the WhatsApp tab (9000) while the menu covers the page */
.smh-header .smh-header__bar {
position: relative;
block-size: 100%;
gap: 28px;
align-items: center;
flex-wrap: nowrap;
}
.smh-header .smh-header__bar > * { margin: 0; }
/* ---------- Brand: the white lockup ---------- */
.smh-header__bar > .smh-brand { flex: none; }
.smh-header .smh-brand__link { min-block-size: 0; border-radius: 2px; }
.smh-header .smh-brand__logo {
block-size: 54px;
inline-size: auto;
overflow: visible;
transform-origin: right center;
transition: transform .5s var(--smh-e-out);
}
html:not([dir="rtl"]) .smh-header .smh-brand__logo { transform-origin: left center; }
.smh-header .smh-brand__img { display: block; block-size: 100%; inline-size: auto; max-inline-size: none; }
.smh-header.is-solid .smh-brand__logo { transform: scale(var(--smh-logo-solid)); }
.smh-header .smh-brand__name { position: absolute !important; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1079px) { .smh-header .smh-brand__logo { block-size: 48px; } }
@media (max-width: 759px) { .smh-header .smh-brand__logo { block-size: 42px; } }
/* ---------- Navigation: centred from 1080, a toggle below ---------- */
.smh-header__bar > .smh-nav--primary { flex: none; margin-inline-start: auto; }
.smh-header__bar > .smh-header__tools { display: none; flex: none; gap: 22px; align-items: center; }
/* The toggle (A: a 48 px bordered square with two lines that cross when open). */
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container-open {
position: relative;
display: block;
inline-size: 48px;
block-size: 48px;
padding: 0;
border: 1px solid rgb(255 255 255 / 0.22);
border-radius: var(--smh-r-control);
background: rgb(255 255 255 / 0.04);
color: var(--smh-white);
cursor: pointer;
transition: background-color .3s, border-color .3s;
}
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container-open:hover { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.4); }
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container-open svg { display: none; }
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container-open::before,
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container-open::after {
content: "";
position: absolute;
inset-inline: 13px;
block-size: 2px;
background: currentColor;
}
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container-open::before { top: 18px; }
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container-open::after { top: 27px; inset-inline-end: 19px; }
@media (min-width: 1080px) {
.smh-header__bar > .smh-nav--primary { flex: 0 1 auto; margin-inline: auto; align-self: stretch; }
.smh-header__bar > .smh-header__tools { display: flex; }
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container-open { display: none; }
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
display: block;
position: relative;
inset: auto;
z-index: auto;
inline-size: 100%;
block-size: 100%;
background: none;
}
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
display: flex;
align-items: center;
block-size: 100%;
inline-size: 100%;
}
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__overlay-container { display: none; }
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 2px;
margin: 0;
}
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
position: relative;
display: block;
padding: 10px 13px;
color: rgb(255 255 255 / 0.78);
font-size: 0.96875rem; /* 15.5 px */
font-weight: 500;
line-height: 1.4;
white-space: nowrap;
text-decoration: none;
transition: color .25s;
}
/* hover: a hairline draws in under the label */
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content::after {
content: "";
position: absolute;
inset-inline: 13px;
bottom: 3px;
height: 1px;
background: var(--smh-white);
transform: scaleX(0);
transform-origin: right;
transition: transform .55s var(--smh-e-out);
}
html:not([dir="rtl"]) .smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content::after { transform-origin: left; }
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover,
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content[aria-current] { color: var(--smh-white); }
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }
/* current page: a small lit square under the label's start (a network node) */
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content[aria-current]::before,
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-item > .wp-block-navigation-item__content::before {
content: "";
position: absolute;
inset-inline-start: 13px;
bottom: 1px;
width: 5px;
height: 5px;
background: var(--smh-white);
box-shadow: 0 0 12px 2px rgb(190 230 240 / 0.7);
}
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:focus-visible { outline-offset: -2px; }
}
@media (min-width: 1080px) and (max-width: 1180px) {
.smh-header .smh-header__bar { gap: 20px; }
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { padding-inline: 9px; font-size: 0.9375rem; }
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content::after { inset-inline: 9px; }
.smh-header__bar > .smh-nav--primary .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content[aria-current]::before { inset-inline-start: 9px; }
.smh-header__bar > .smh-header__tools { gap: 16px; }
}
/* ---------- Tools: language + the white CTA (A: .btn--light.btn--sm) ---------- */
.smh-header__tools > * { margin: 0; }
.smh-header .smh-header__tools .smh-lang-switch__link {
min-inline-size: 0;
padding: 8px 2px;
color: rgb(255 255 255 / 0.82);
font-size: 0.90625rem; /* 14.5 px */
font-weight: 500;
}
.smh-header .smh-header__tools .smh-lang-switch__link:hover { color: var(--smh-white); background: none; }
.smh-header .smh-header__tools .smh-lang-switch__link:lang(ar) { font-size: 1rem; }
.smh-header .smh-header__tools .smh-cta .smh-cta__link {
min-block-size: 46px;
padding-block: 0;
padding-inline: 20px;
font-size: 0.96875rem;
white-space: nowrap;
}
@media print {
.smh-header { position: static; color: var(--smh-ink); }
.smh-header::before, .smh-header__bar > .smh-nav--primary, .smh-header__tools { display: none !important; }
}
/* Block editor canvas (Site Editor): the header is part of the page flow and painted, never fixed over the canvas. */
.editor-styles-wrapper .smh-header { position: relative; top: auto; background: var(--smh-petrol-deep); }
.editor-styles-wrapper .smh-header::before { opacity: 1 !important; }
/* The bar's CTA sits on the bar's centre line like the nav and the language link (mockup A; integrator 2026-10-01). */
.smh-header__tools .smh-cta { display: flex; align-items: center; }