/*
* Navbar desktop layout (global-templates/navbar-collapse-bootstrap5.php +
* global-templates/navbar-branding.php).
*
* The markup, the "fixed + scrolled" header behaviour and the hamburger
* open/close logic already work and are handled by jQuery living in
* js/Legacy_child-theme.js / js/Legacy_new-child-theme.js (DO NOT touch those
* files, see .claude/context/project-context.md). What is genuinely missing is
* a *desktop* layout: every rule that touches #main-menu in
* css/Legacy_new-child-theme.css (~lines 47325-47481) styles it exclusively as
* an off-canvas full-height panel (.menu-wrapper is "position: fixed; right:
* -100vw" sliding to "right: 0" on ".show"), even at >=1200px where it is just
* a narrower off-canvas panel. There is no rule anywhere that lays the nav
* links out inline in the header row, which is what the mock
* (mocks/matteria_hero_section.png) shows on desktop.
*
* This file only touches the >=1200px (xl) breakpoint - see the long note
* above that media query for why the inline desktop row cannot start at 992px
* with this menu. Below 1200px nothing changes: the off-canvas hamburger panel
* keeps working exactly as it does today.
*
* These selectors intentionally mirror, chain-for-chain, the ones in
* Legacy_new-child-theme.css so that - loaded after 'child-understrap-styles'
* via matteria_custom_components_assets() - they win by source order at equal
* specificity, the same technique documented in hero.css. Where the legacy
* off-canvas rules use "!important" (the dropdown-menu position/transform
* lock), matching "!important" declarations are the only way to win that
* specific property back for desktop; this is a deliberate, scoped exception
* to the project's "avoid !important" rule, not a shortcut.
*/
/* Header row: logo on the left, nav/off-canvas trigger on the right, at every
breakpoint. Legacy_new-child-theme.css already sets this same
display:flex/justify-content on .header-wrapper (line ~47279) - restated
here so the row layout is owned by our own component file rather than
relying on the legacy bundle for it. */
.main-nav .header-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
/* Padding horitzontal dels enllaços del menú inline, compartit amb el
subratllat del ::before (més avall) perquè la línia cobreixi exactament
el text. Fluid: 9px a 1200px -> 14px (valor de disseny) a 1600px, perquè
la fila es comprimeixi sola en comptes de fer-ho aixafant els ítems. */
--nav-link-px: clamp(9px, 1.25vw - 6px, 14px);
/* Same reasoning as hero.css: Bootstrap's stock .container caps at 1320px
(>=1400px). Edge padding itself comes from the shared ".container-edge"
class (css/components/_layout.css, applied on this element's markup) -
this just drops the max-width cap so padding is the only width bound. */
max-width: 100%;
}
/* El wordmark NO és comprimible. Sense això, quan el menú inline demana més
amplada de la que hi ha (10 ítems de primer nivell: en calen ~1562px i a
1600px només n'hi ha ~1300 disponibles), el flex de .header-wrapper reparteix
la manca d'espai encongint TOTS els seus fills, i el logo -una imatge sense
min-width propi- és el primer que arriba a 0px: el resultat era una
cantonada superior esquerra buida a totes les pàgines per sota de ~1500px
(mesurat: width 0 a 992, 1100, 1200, 1366 i 1440). */
.main-nav .header-wrapper .custom-logo-link {
flex-shrink: 0;
}
/* Logo visibility bug (pre-existing, not caused by this file): on
.page-template-home-page, before any scroll, Legacy_new-child-theme.css
hides BOTH logo images - "body.page-template-home-page .custom-logo-link
.green { display: none !important; }" (line ~47240) with no matching
default for ".dark" (which is "display: none" by default, only becoming
visible under ".scrolled", line ~47268). Result: an empty top-left corner
until the user scrolls. There is no white logo asset (only logo_black.png
/ Ebony Clay and logo_green.png / Jonquil, see img/), so the mock's white
"matteria_" wordmark is produced here with a CSS filter (brightness(0)
invert(1) turns opaque pixels white, transparent stays transparent) on the
existing dark asset, rather than adding a new image file.
On the home page the nav background only ever alternates between
transparent (over the hero) and solid dark (.nav-dark, past the hero - see
below), never white, so the logo stays white throughout - no need to
revert the filter on ".scrolled" like a white-background page would. */
.page-template-home-page .main-nav .header-wrapper .custom-logo-link .dark {
display: block !important;
filter: brightness(0) invert(1);
}
/* Sentinel (page-templates/home-page.php, right after #hero-header) used by
js/components/navbar.js to detect "scrolled past the hero" via
IntersectionObserver. Zero footprint so it doesn't affect the hero/ribbon
peek spacing tuned in hero.css/customers.css. */
#hero-sentinel {
height: 0;
pointer-events: none;
}
/* The inherited ".scrolled" class (jQuery, scrollTop > 80px, see
js/Legacy_new-child-theme.js) fires far too early for a hero this tall -
still deep inside the transparent hero - and would otherwise force a white
background (Legacy_new-child-theme.css, ".main-nav.scrolled") and dark
nav-link/logo colors meant for a white background. On the home page we
drive the solid-background state exclusively off the sentinel/
IntersectionObserver instead (".nav-dark", set by navbar.js), so ".scrolled"
is neutralized here and nav text/logo stay white throughout - both the
transparent hero and the solid-dark past-hero state need white content. */
.page-template-home-page .main-nav.scrolled {
background-color: transparent;
}
.page-template-home-page .main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li a,
.page-template-home-page .main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li .dropdown-toggle.nav-link {
color: #ffffff;
}
/* Solid dark background once the user has scrolled past the hero (sentinel
out of view above the viewport - see navbar.js). Source order after the
".scrolled" neutralizer above so it wins when both classes are present
(equal specificity, ".nav-dark" declared later). */
.page-template-home-page .main-nav.nav-dark {
background-color: var(--color-dark);
}
.navbar-toggler-light {
filter: brightness(0) invert(1);
}
/* Off-canvas mobile/tablet/laptop panel (below 1200px, see
Legacy_new-child-theme.css ~line 47324: ".menu-wrapper" is "width: 100vw;
position: fixed").
"#main-menu" there carries a legacy "margin-right: -20px", meant to pull
the list under its own reserved scrollbar gutter ("overflow-y: scroll")
so the gutter doesn't eat into the visible 20px left margin. On touch
devices scrollbars overlay with zero reserved width, so that -20px just
pulls the whole list flush against the screen's right edge instead -
links/dropdown items lose all breathing room on the right. Neutralized
below 1200px only; the >=1200px rules further down replace this off-canvas
panel with the inline desktop menu entirely. */
@media screen and (max-width: 1199.98px) {
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu {
margin-right: 0;
padding-right: 20px;
}
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li .dropdown-menu {
padding-right: 20px;
}
/* Safety net: if the menu list (its own "max-height: 70vh" scroll) plus
the hero banner below (see .navbar-hero-banner) plus the footer add up
to more than the panel's fixed "height: 100vh" on a short phone, the
overflow would otherwise be genuinely unreachable (a fixed-position
panel with visible overflow isn't scrollable by any other element).
Letting the whole panel scroll keeps everything reachable. */
.main-nav .header-wrapper .menu-wrapper {
overflow-y: auto;
}
}
/* Off-canvas hero-side banner ("La IA al dIA #N", home template only - see
navbar-collapse-bootstrap5.php/global-templates/hero-side-card.php). This
reuses the same ACF-driven markup as the desktop hero column's own card
(".hero-side", hero.css "#hero-header .hero-side-*"), but that file's
rules are scoped to "#hero-header" so none of it ever reached this second
copy - it rendered as plain unstyled text/link/image. Restated here as a
compact single-row banner (thumbnail + clamped title + CTA), not a tall
stacked card - the off-canvas panel has no room to spare above the nav
list + footer without forcing ".menu-wrapper" to scroll (see its
"overflow-y: auto" safety net above). Hidden at lg (".navbar-hero-banner
d-lg-none" in the markup) since the real desktop card already shows
separately in the hero itself, so no need to gate this on a media query. */
.main-nav .header-wrapper .menu-wrapper .navbar-hero-banner {
margin-top: 24px;
padding: 0 20px;
}
.main-nav .header-wrapper .menu-wrapper .navbar-hero-banner .hero-side-label {
display: block;
color: var(--color-primary);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 8px;
}
.main-nav .header-wrapper .menu-wrapper .navbar-hero-banner .hero-side-card {
display: flex;
align-items: center;
gap: 12px;
max-width: none;
padding: 10px 12px;
background-color: rgba(255, 255, 255, 0.06);
border-radius: 10px;
}
.main-nav .header-wrapper .menu-wrapper .navbar-hero-banner .hero-side-image {
display: block;
flex: 0 0 auto;
width: 44px;
height: 44px;
overflow: hidden;
border-radius: 6px;
}
.main-nav .header-wrapper .menu-wrapper .navbar-hero-banner .hero-side-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.main-nav .header-wrapper .menu-wrapper .navbar-hero-banner .hero-side-title {
flex: 1 1 auto;
min-width: 0;
color: #ffffff;
font-weight: 600;
font-size: 14px;
line-height: 130%;
padding: 0;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.main-nav .header-wrapper .menu-wrapper .navbar-hero-banner .hero-side-link {
flex: 0 0 auto;
color: var(--color-primary);
font-weight: 600;
font-size: 13px;
padding: 0;
white-space: nowrap;
text-decoration: underline;
}
/* ---------------------------------------------------------------------------
Menú inline d'escriptori: a partir de 1200px, NO de 992px.
Mesurat en aquest mateix menú (10 ítems de primer nivell: Inicio,
Consultoría, Agencia, Ayudas NoN ACCIÓ 2026, API ACCIÓ 2026, Casos de éxito,
Equipo, Compromisos, La IA al dIA, Blog - idèntic a producció): la fila
inline necessita ~1562px (logo 192 + enllaços 1275 + selector d'idioma 107)
mentre l'amplada disponible dins de .container-edge és de ~835px a 992px,
~994px a 1200px i ~1300px a 1600px. Per sota de 1200px no hi cap de cap
manera i el resultat era el header trencat que es veia a tota la web en
aquest tram: logo aixafat a 0px, etiquetes partides en 3 línies i els
últims ítems tallats fora de la pantalla. En aquest tram es manté el panell
off-canvas (el disseny que ja funciona a mòbil i tauleta) i el menú inline
torna a partir de 1200px, on hi cap amb el logo intacte.
ATENCIÓ: aquest breakpoint el comparteixen les utilitats "d-xl-*" del
marcat (global-templates/navbar-collapse-bootstrap5.php) - si es canvia
aquí, cal canviar-les allà (i a l'inrevés).
--------------------------------------------------------------------------- */
@media screen and (min-width: 1200px) {
/* Off-canvas toggler ("hamburger" button in the header, and the "x" close
icon rendered inside .menu-wrapper) is meaningless once the menu is a
static inline row - the mock's desktop header shows only the logo and
the nav links. */
.main-nav .header-wrapper .navbar-toggler {
display: none;
}
/* Undo the off-canvas panel (fixed, full height, dark background sliding in
from the right) and let .menu-wrapper sit as a normal flex item in
.header-wrapper's row (which already has justify-content: space-between),
right next to the logo. */
.main-nav .header-wrapper .menu-wrapper {
position: static;
top: auto;
right: auto;
width: auto;
height: auto;
background-color: transparent;
color: inherit;
transition: none;
/* Fila pròpia (menú + selector d'idioma) alineada a la dreta i centrada
verticalment amb el logo. Els altres dos fills de .menu-wrapper
(.navbar-hero-banner i .navbar-footer) són display:none en aquest
breakpoint, així que no participen en aquest flex. Sense això el
selector d'idioma queia a una línia pròpia sota el menú quan el menú
ocupava més d'una fila. */
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap;
gap: 28px;
}
.main-nav .header-wrapper .menu-wrapper.show {
right: auto;
}
/* Decorative overlay only relevant to the off-canvas panel. */
.main-nav .header-wrapper .menu-wrapper::after {
content: none;
}
/* "Contacte" CTA + language switcher were only ever meant for the
off-canvas panel; the mock's desktop header doesn't show them. */
.main-nav .header-wrapper .menu-wrapper .navbar-footer {
display: none;
}
/* Horizontal nav row, vertically centered against the logo.
"flex-wrap: wrap" (abans "nowrap"): amb 10 ítems la fila no hi cap en una
sola línia per sota de ~1900px (calen ~1275px només per als enllaços), i
amb "nowrap" el flex ho resolia encongint cada ítem per igual - els que
tenen paraules llargues ("Ayudas NoN ACCIÓ 2026", "Casos de éxito")
quedaven partits en 3 línies i tallats mentre "Inicio" o "Blog" els
sobrava espai. Ara cada etiqueta es queda sencera en una línia
("white-space: nowrap", a sota) i és la LLISTA la que passa a dues files
alineades a la dreta; a ≥1920px torna a caber en una sola fila, com fins
ara. */
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0 4px;
margin: 0;
padding: 0;
max-height: none;
overflow: visible;
}
/* Compact inline nav typography (Montserrat UI text) instead of the
off-canvas panel's large Raleway display sizes (23-33px).
Color: negre corporatiu (--color-dark, la mateixa tinta del wordmark) com
a NORMA GENERAL. Abans el default era #ffffff, pensat nomes per a
capcaleres transparents sobre fons fosc - pero a la majoria de plantilles
(blog, equip, compromisos, legal, arxius...) Legacy_new-child-theme.css
(~linia 47226) pinta .main-nav amb fons BLANC des del primer pixel, i els
enllacos quedaven blanc-sobre-blanc, invisibles fins que .scrolled els
fosquia. Ara la norma es fosc per defecte i el blanc es l'excepcio
explicita (regles de sota) nomes alla on el nav realment flota sobre fons
fosc: home (regla propia mes amunt), coupons-page, single-post i
plantilla-2026 amb capcalera fosca (body.plantilla-2026-dark-header),
mentre NO hi ha .scrolled. */
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li a,
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li .dropdown-toggle.nav-link {
font-family: var(--font-main);
/* Mida i padding fluids (14px/9px a 1200px -> 16px/14px, els valors de
disseny, a 1600px) en comptes dels dos graons anteriors (15px per sota
de 1200 i 16px a partir d'allà): la fila es comprimeix sola en el tram
on l'espai just no arriba, i recupera la tipografia de disseny sencera
tan bon punt hi cap. */
font-size: clamp(14px, 0.5vw + 8px, 16px);
font-weight: 600;
padding: 10px var(--nav-link-px);
color: var(--color-dark);
/* Cap etiqueta es parteix: si no hi cap tot, wrappeja la llista (veure
"flex-wrap: wrap" a #main-menu), no la paraula. */
white-space: nowrap;
transition: color 0.2s ease-in-out;
}
/* Excepcio a la norma "enllacos negres": plantilles on el nav es
transparent sobre un fons fosc mentre no s'ha fet scroll (coupons-page:
hero verd fosc; single-post: capcalera de blobs foscos; plantilla-2026
NOMES quan la capcalera es realment fosca - vegeu sota). Es el mateix
conjunt que Legacy_new-child-theme.css (~47226) exclou del fons blanc de
.main-nav. Nomes mentre NO hi ha .scrolled: en fer scroll el legacy posa
fons blanc (~47260) i la regla de sota retorna els enllacos a fosc. La
home no es aqui: te la seva propia regla blanca permanent mes amunt (el
seu nav mai es torna blanc).
plantilla-2026: amb el color picker de la plantilla de serveis
(bg_gradient_color) la capcalera pot ser fosca (/consultoria, negre/
bluetowhite) o clara - la plantilla per si sola ja no implica fons fosc,
i amb capcalera clara els enllacos blancs quedaven il-legibles. Per aixo
el selector es "plantilla-2026-dark-header": classe que
agregar_clase_plantilla_2026() (functions.php) nomes afegeix al body quan
matteria_services_header_is_dark() diu que el color triat es fosc (mateix
calcul de luminancia que tria --custom-fg-color a services-page.php).
NOMES els enllacos de primer nivell ("#main-menu > li > a"): la primera
versio d'aquesta excepcio feia servir "li a" descendant, que tambe
atrapava els .dropdown-item de dins del desplegable - i com que aquests
selectors (2 IDs + 5 classes + 3 elements) guanyen a la regla que pinta
els items foscos, els items sortien BLANCS sobre el popover blanc del
dropdown (invisible, vist a /consultoria). El desplegable te sempre fons
blanc, en tots els contexts, aixi que els seus items mai han de seguir
aquesta excepcio. */
body.page-template-coupons-page .main-nav:not(.scrolled) .header-wrapper .menu-wrapper #main-menu-nav #main-menu > li > a,
body.page-template-coupons-page .main-nav:not(.scrolled) .header-wrapper .menu-wrapper #main-menu-nav #main-menu > li > .dropdown-toggle.nav-link,
body.single-post .main-nav:not(.scrolled) .header-wrapper .menu-wrapper #main-menu-nav #main-menu > li > a,
body.single-post .main-nav:not(.scrolled) .header-wrapper .menu-wrapper #main-menu-nav #main-menu > li > .dropdown-toggle.nav-link,
body.plantilla-2026-dark-header .main-nav:not(.scrolled) .header-wrapper .menu-wrapper #main-menu-nav #main-menu > li > a,
body.plantilla-2026-dark-header .main-nav:not(.scrolled) .header-wrapper .menu-wrapper #main-menu-nav #main-menu > li > .dropdown-toggle.nav-link {
color: #ffffff;
}
/* Links switch back to the dark tone once .main-nav.scrolled kicks in
(existing scroll-based class, see js/Legacy_new-child-theme.js) and the
legacy white background appears. Redundant with the new dark default on
most pages, but still load-bearing for the dark-backdrop exceptions
above (their selectors carry higher specificity than this one, hence the
:not(.scrolled) guard there instead of relying on source order here).
Excludes the home page: there, ".scrolled" is neutralized in favour of
the sentinel-driven ".nav-dark" (see above), and nav text stays white
against both the transparent hero and the solid-dark past-hero
background - never against white. */
body:not(.page-template-home-page) .main-nav.scrolled .header-wrapper .menu-wrapper #main-menu-nav #main-menu li a,
body:not(.page-template-home-page) .main-nav.scrolled .header-wrapper .menu-wrapper #main-menu-nav #main-menu li .dropdown-toggle.nav-link {
color: var(--color-dark);
}
/* Hover dels enllacos del menu: subratllat animat en lloc del canvi de
color llima del legacy. La regla legacy "#main-menu li:hover .nav-link
{ color: #DEF561 !important }" (Legacy_new-child-theme.css ~47411, tambe
al .min carregat) pinta l'enllac de llima sobre el fons BLANC que el nav
te a la majoria de plantilles - contrast quasi nul, il-legible. Es
neutralitza restablint per a :hover el mateix color que ja te l'estat
normal en cada context (les tres regles de sota calquen els contexts de
color del bloc de dalt), amb "!important" perque es l'unica manera de
guanyar un "!important" alie: mateixa especificitat (selector calcat) +
ordre de font posterior per al cas general, especificitat superior per a
les excepcions. Nomes desktop: al panell off-canvas (<1200px, fons fosc)
el llima te bon contrast i es mante tal qual. */
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li:hover .nav-link {
color: var(--color-dark) !important;
}
/* La fletxa del dropdown (::after, icona Material Design) tambe es tornava
llima en hover (legacy ~47414, sense !important): que segueixi el color
del text. */
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li:hover .nav-link::after {
color: inherit;
}
.page-template-home-page .main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li:hover .nav-link {
color: #ffffff !important;
}
body.page-template-coupons-page .main-nav:not(.scrolled) .header-wrapper .menu-wrapper #main-menu-nav #main-menu > li:hover > .nav-link,
body.single-post .main-nav:not(.scrolled) .header-wrapper .menu-wrapper #main-menu-nav #main-menu > li:hover > .nav-link,
body.plantilla-2026-dark-header .main-nav:not(.scrolled) .header-wrapper .menu-wrapper #main-menu-nav #main-menu > li:hover > .nav-link {
color: #ffffff !important;
}
/* El subratllat: pseudo-element de 2px sota el text que creix des del
centre en hover/focus. Va al ::before de l'enllac (l'::after ja es la
fletxa del dropdown) - per aixo el position:relative d'aqui sota, que no
afecta el posicionament del .dropdown-menu (es germa de l'enllac, el seu
ancestre posicionat segueix sent el ). "currentColor" fa que el
subratllat segueixi sol el color del text en tots els contexts (fosc,
home blanca, capcaleres fosques, .scrolled) sense duplicar les regles de
color. left/right: 14px = el padding horitzontal dels enllacos, perque
la linia cobreixi nomes el text. S'anima transform (scaleX) i no width:
no provoca layout i el navegador la pot compondre a la GPU. Tots els
enllacos de primer nivell porten .nav-link (class-wp-bootstrap-navwalker
.php linies 204/212); els .dropdown-item de dins del popover no, i per
tant queden fora (ja tenen el seu propi hover de fons gris).
left/right surten de --nav-link-px (el padding horitzontal fluid dels
enllaços) i no d'un 14px fix, perquè la línia segueixi cobrint només el
text quan el padding s'encongeix en pantalles mitjanes. */
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu > li > .nav-link {
position: relative;
}
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu > li > .nav-link::before {
content: "";
position: absolute;
left: var(--nav-link-px);
right: var(--nav-link-px);
bottom: 6px;
height: 2px;
background-color: currentColor;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.25s ease;
}
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu > li:hover > .nav-link::before,
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu > li > .nav-link:focus-visible::before {
transform: scaleX(1);
}
/* Reset the dropdown ("Serveis", "Sobre nosaltres") from the off-canvas
forced in-flow accordion style back to a normal small Bootstrap popover:
override position/transform (the only way to win those two properties
back from the legacy "!important" off-canvas lock) and restore the
default Bootstrap dropdown chrome (white surface, border, radius) instead
of the transparent/borderless off-canvas look. */
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li .dropdown-menu {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: auto !important;
transform: none !important;
margin-top: 8px;
padding: 8px 0;
min-width: 200px;
border: 1px solid rgba(44, 44, 68, 0.08);
border-radius: 12px;
background-color: #ffffff;
box-shadow: 0 12px 24px rgba(44, 44, 68, 0.12);
}
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li .dropdown-menu li {
color: var(--color-dark);
}
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li .dropdown-menu li .dropdown-item {
font-size: 14px;
font-weight: 500;
padding: 8px 20px;
color: var(--color-dark);
}
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li .dropdown-menu li:hover .dropdown-item {
background-color: rgba(44, 44, 68, 0.06);
color: var(--color-dark);
}
/* Desktop: dropdown obert amb NOMES :hover, i que s'hi quedi. L'antiga
regla ("li.dropdown:hover > .dropdown-menu { display:block }") ja obria
el menu en passar-hi per sobre, pero es tancava abans de poder-hi entrar:
el .dropdown-menu comenca 8px per sota del (el margin-top de dalt) i
en creuar aquest buit el punter surt del li -> es perd :hover -> el menu
desapareix, aixi que a la practica calia fer click (que el pinna via
.show de Bootstrap). Dues mesures, nomes en aquest breakpoint:
1) Pont invisible: un ::before del propi menu cobreix el buit de 8px, de
manera que mentre el punter el creua segueix estant sobre un fill del
li i :hover no es trenca. (+1px de solapament per evitar un forat de
subpixel amb zoom/DPI fraccionari.)
2) Periode de gracia: el menu es sempre display:block (es absolut, no
ocupa flux) i s'amaga amb visibility/opacity; en sortir del li, la
visibility triga 0.25s a tallar-se, aixi una sortida accidental de
punter d'un instant no col-lapsa el menu i l'opacity fa un fade suau.
El click-to-toggle de Bootstrap (data-bs-toggle="dropdown",
class-wp-bootstrap-navwalker.php) segueix funcionant: la classe .show que
gestiona tambe forca l'estat visible (regla de sota), imprescindible per
a teclat/tactil. :focus-within mante el menu obert mentre el focus de
teclat es dins seu (accessibilitat). Per sota de 1200px res no canvia:
panell off-canvas amb click/tap, com fins ara. */
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li.dropdown .dropdown-menu {
display: block;
visibility: hidden;
opacity: 0;
transition: opacity 0.15s ease-in-out, visibility 0s linear 0.25s;
}
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li.dropdown .dropdown-menu::before {
content: "";
position: absolute;
top: -9px;
left: 0;
right: 0;
height: 9px;
}
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li.dropdown:hover > .dropdown-menu,
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li.dropdown:focus-within > .dropdown-menu,
.main-nav .header-wrapper .menu-wrapper #main-menu-nav #main-menu li.dropdown > .dropdown-menu.show {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
/* Put #main-menu-nav (the nav) and the new desktop language switcher
(".navbar-lang-desktop", see navbar-collapse-bootstrap5.php) inline next
to each other without making .menu-wrapper itself flex - it also
(conditionally, home template only) wraps ".navbar-hero-banner", a
pre-existing block-stacked element with its own separate, unrelated
layout that this shouldn't touch. inline-flex + vertical-align on just
these two is enough to sit them side by side in normal flow. */
.main-nav .header-wrapper .menu-wrapper #main-menu-nav {
display: inline-flex;
vertical-align: middle;
/* Ítem flex encongible dins de .menu-wrapper: quan la llista no hi cap en
una fila, s'estreny i és #main-menu qui passa a dues files (veure el seu
"flex-wrap: wrap"), en comptes d'empènyer el selector d'idioma a una
línia pròpia. */
flex: 0 1 auto;
min-width: 0;
}
.main-nav .header-wrapper .menu-wrapper .navbar-lang-desktop {
vertical-align: middle;
/* La separació amb el menú la posa el "gap" de .menu-wrapper. */
flex: 0 0 auto;
}
/* Compact desktop language switcher - a second, independent instance of
custom_wpml_language_selector() (functions.php) from the one in
.navbar-footer above, which stays sized for the mobile off-canvas panel
(large Raleway type) and is hidden here. Typography matches the compact
Montserrat nav links right next to it. */
.main-nav .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
/* Mateixa "norma general" fosca que els enllacos del menu (veure el bloc
de #main-menu li a mes amunt): abans el default era blanc + accent llima,
invisible/il-legible sobre el fons blanc que el legacy dona al nav a la
majoria de plantilles. Sobre fons clar l'idioma actual es marca amb
opacitat plena (el llima #DEF561 no te prou contrast sobre blanc); el
blanc + llima queda com a excepcio per als fons foscos, mes avall. */
.main-nav .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li a {
font-family: var(--font-main);
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
text-decoration: none;
color: var(--color-dark);
opacity: 0.6;
transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
}
.main-nav .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li a:hover {
opacity: 1;
}
.main-nav .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li.current a {
opacity: 1;
}
/* "/" separator between languages, e.g. "CA / ES" - drawn between items
rather than after each one so there's no trailing separator. */
.main-nav .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li + li::before {
content: "/";
margin: 0 8px;
color: rgba(44, 44, 68, 0.4);
}
/* Excepcio fons fosc del selector d'idioma: home (nav sempre sobre fons
fosc) i les mateixes plantilles de nav transparent-sobre-fosc que els
enllacos del menu (coupons-page, single-post, plantilla-2026 amb
capcalera fosca - classe condicional, vegeu el bloc dels enllacos - sense
.scrolled). Es recupera l'esquema blanc + accent llima original. */
body.page-template-home-page .main-nav .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li a,
body.page-template-coupons-page .main-nav:not(.scrolled) .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li a,
body.single-post .main-nav:not(.scrolled) .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li a,
body.plantilla-2026-dark-header .main-nav:not(.scrolled) .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li a {
color: #ffffff;
}
body.page-template-home-page .main-nav .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li.current a,
body.page-template-coupons-page .main-nav:not(.scrolled) .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li.current a,
body.single-post .main-nav:not(.scrolled) .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li.current a,
body.plantilla-2026-dark-header .main-nav:not(.scrolled) .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li.current a {
color: var(--color-primary);
}
body.page-template-home-page .main-nav .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li + li::before,
body.page-template-coupons-page .main-nav:not(.scrolled) .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li + li::before,
body.single-post .main-nav:not(.scrolled) .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li + li::before,
body.plantilla-2026-dark-header .main-nav:not(.scrolled) .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li + li::before {
color: rgba(255, 255, 255, 0.4);
}
/* Same dark-on-white swap as the nav links (body:not(.page-template-home-page)
.main-nav.scrolled rule above) - never applies on the home page, where
".scrolled" is neutralized and the header stays transparent/dark. */
body:not(.page-template-home-page) .main-nav.scrolled .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li a {
color: var(--color-dark);
}
body:not(.page-template-home-page) .main-nav.scrolled .header-wrapper .menu-wrapper .navbar-lang-desktop .language-selector li + li::before {
color: rgba(44, 44, 68, 0.4);
}
}