/* ==========================================================================
Menu di navigazione condiviso — aggiunto il 17 settembre 2026
Sta su home, pagine servizio, blog e strumenti. NON sulle landing (sono
pagine di conversione: un menu offrirebbe scorciatoie per saltare
l'argomentazione) né sulle demo.
Su schermo largo: barra orizzontale con tendine.
Su telefono: icona che diventa X e pannello a lista sulla destra.
Le variabili hanno un ripiego perché questo file viene caricato sia dove
c'è style.css (home) sia dove c'è lp.css (servizi, blog, strumenti).
========================================================================== */
.navml{
--navml-testo: var(--text, #fff);
--navml-muto: var(--text-muted, rgba(255,255,255,.66));
--navml-accento: var(--secondary-testo, #9E75E2);
--navml-attivo: var(--primary, #015E82);
/* .78 e non .96: con un fondo quasi pieno il blur dietro non si vedrebbe
comunque. Sotto c'è il perché non si vedeva nemmeno con .7. */
--navml-fondo: rgba(22,22,24,.78);
--navml-bordo: rgba(255,255,255,.12);
font-family: var(--textFont, var(--font, system-ui, sans-serif));
}
/* --- il pulsante: tre righe che diventano una X -------------------------- */
.navml__tasto{
display:inline-flex;align-items:center;justify-content:center;
width:42px;height:42px;padding:0;border:1px solid var(--navml-bordo);
border-radius:11px;cursor:pointer;
color:var(--navml-testo);
}
.navml__tasto:focus-visible{outline:3px solid var(--navml-accento);outline-offset:2px;}
/* stesso fondo sfocato della barra: sulla home serve perché l'header è
trasparente e il tasto sta sopra la hero, altrove per non avere due aspetti
diversi della stessa cosa */
.navml__tasto{
background:rgba(22,22,24,.72);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.navml__righe{position:relative;display:block;width:19px;height:13px;}
.navml__righe i{
position:absolute;left:0;width:100%;height:2px;border-radius:2px;
background:currentColor;transition:transform .26s ease, opacity .18s ease, top .26s ease;
}
.navml__righe i:nth-child(1){top:0;}
.navml__righe i:nth-child(2){top:50%;margin-top:-1px;}
.navml__righe i:nth-child(3){top:calc(100% - 2px);}
.navml__tasto[aria-expanded="true"] .navml__righe i:nth-child(1){top:50%;margin-top:-1px;transform:rotate(45deg);}
.navml__tasto[aria-expanded="true"] .navml__righe i:nth-child(2){opacity:0;}
.navml__tasto[aria-expanded="true"] .navml__righe i:nth-child(3){top:50%;margin-top:-1px;transform:rotate(-45deg);}
/* --- il pannello sul telefono: lista a destra, non a tutto schermo -------- */
.navml__pannello{
position:absolute;top:calc(100% + 10px);right:14px;z-index:70;
min-width:232px;max-width:min(80vw, 300px);
max-height:min(70vh, 560px);overflow-y:auto;overscroll-behavior:contain;
padding:8px;border-radius:14px;border:1px solid var(--navml-bordo);
background:var(--navml-fondo);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
box-shadow:0 22px 48px rgba(0,0,0,.45);
opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;
transition:opacity .2s ease, transform .2s ease;
}
.navml__pannello.is-aperto{opacity:1;transform:none;pointer-events:auto;}
.navml__pannello a{
display:block;padding:11px 13px;border-radius:9px;
color:var(--navml-testo);text-decoration:none;font-size:.97rem;line-height:1.35;
}
.navml__pannello a:hover{background:rgba(255,255,255,.07);}
.navml__pannello > a[aria-current],
.navml__pannello > .navml__gruppo > button[data-dentro]{
background:var(--navml-attivo);color:var(--navml-testo);font-weight:600;
}
.navml__sotto a[aria-current]{color:var(--navml-accento);font-weight:700;}
/* voce che apre le sottovoci */
.navml__gruppo > button{
display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
padding:11px 13px;border:0;border-radius:9px;background:none;cursor:pointer;
color:var(--navml-testo);font:inherit;font-size:.97rem;text-align:left;
}
.navml__gruppo > button:hover{background:rgba(255,255,255,.07);}
.navml__gruppo > button::after{
content:"";width:8px;height:8px;flex:0 0 auto;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s ease;opacity:.7;
}
.navml__gruppo > button[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-3px,-3px);}
.navml__sotto{
display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease;
}
.navml__gruppo > button[aria-expanded="true"] + .navml__sotto{grid-template-rows:1fr;}
.navml__sotto > div{overflow:hidden;}
.navml__sotto a{
padding-left:26px;font-size:.92rem;color:var(--navml-muto);position:relative;
}
.navml__sotto a::before{
content:"";position:absolute;left:14px;top:50%;width:5px;height:1px;background:currentColor;opacity:.5;
}
.navml__sotto a:hover{color:var(--navml-testo);}
.navml__attesa{padding:11px 13px 11px 26px;font-size:.88rem;color:var(--navml-muto);}
/* ==========================================================================
Il marchio: un cursore che lampeggia e scrive "ml"
Stesso effetto del badge "Powered by" di powered-by.html, ridotto a due
caratteri. Sta a sinistra: sulla home da solo (l'header non aveva nulla),
sulle altre pagine dentro il link del brand, prima del nome.
⚠ Il font è un sottoinsieme di Press Start 2P (CodeMan38, SIL OFL 1.1) di
980 byte, incorporato qui: nessuna chiamata a Google Fonts, nessun file in
più. Copre solo i caratteri « .0Pabdegilmortuwy», cioè quelli del badge:
se il marchio cambia lettere il sottoinsieme va rigenerato (e va rifatto
anche in powered-by.html, che ne tiene una copia perché è un frammento da
incollare sui siti dei clienti).
========================================================================== */
@font-face{
font-family:'MLPixel';
font-style:normal;
font-weight:400;
font-display:block; /* niente ripiego a schermo: le misure in ch dipendono da questo font */
src:url(data:font/woff2;base64,d09GMgABAAAAAAPUAAwAAAAACRAAAAOGAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHCgGYACBHBEICodghTQLKAABNgIkAygEIAWESgcgG+sGyASeT91/nmv5k2R7kbyM8FALVr+zFUHCRUl9JkUdrogXHVJA/3OpmrFwgYwpHArijf0z1+oAKdcKWMyVoqW+WEpe6zK8w151eQoBNCOEG9GyFeu20fXc4foFMjguNgMhpFbqR7lJy0J0I9oFrDV75ABT5MPGcAuWfRtXl+7espwPyLmifqS16kdp5qI3/NGTcixHZbAGlI13R83oN7sTcx0YSGcUGTkTmMQmjnCck5zmPBep0sByZX5Um+Ywx8TnJPW7wlfh2/BVeCe8Hd4Kb4Y3wmvh1fA4PAoPw4ORDrb6BQmBToy4G4wYK4JkdFBmgcQxsYotWyhUCCqdl7g91nEWJ1pHFsdaZ3SlPU50O/3Qzt3b451tnVpPpCohRUdGtLR1wkSaBJWqZKdoMZJKIjWxC6mU8i2GtN1xRBCptGm9kPN0gmYzsXAilQSIYYh3inXpjmtiOCVGaUkjw04xLVrS2CAto/qVdmks5Bg3zhp0pFtMSiJHFS6foYj3mY1SZeKdBp3B4IIUpYNGjUy2+jRrwXBGjKQ0jjem2TENhH6g2SmGojj75OzLprWls85b5xzu7BPnrHOlt9ZaisJZbMkvVJwrLxXWVeSfeF92Cr0sOBzwxp+9VLhScc5XXOleNk0Cicd52vukwiub1s/1qp113r38beycLb1TWS9N2Sfe4SpPpIAv3U2M9KiK5qWas77i599Lsyi981bA+a48pS9t6Sv8/TdRrpxzoCxn4Cpnw9mVYgT9/G0+Yz3f38VCUWaAvwvv/Y10iPDF9oeT5h/sNO/3dvUC8x+NzP8I55vf3P73k/9vqB/roI3BAdRL9f/7SbrzfXwk6kdc2emES1cLHvS5bswiYRhtOEDysXZOvApv3MEkvxCdmoT+PDFFZHxpUizgbVPMOJqmFvqyz9TKKKaxmfATOEWdOpeYw0QmUuMoVU5ziTqtmkAtfo4Jv8X3TzKRjaxgHZuocpwaNbZS5/BP0j+FTYxny/8Tb3Cupr6D41Th/Re5QM7UXwizN8CXuQi5aCvfAPw1c1nKbrawnLnj78gdPGb/Ui5yiStrh5N7gtX9l0lMZgo52zjFcfJZYy39FznDcY7WRBfToOHU3mG9+UdxlIsc4wqLuLojwuPsLBGL+eqMZhw5ltMAYhegtoNsk60fI2cFi+Gtb+Aw5+fz+iEiDPl3Ufnd8D5TfnI=) format('woff2');
}
.navml-logo-link{display:inline-flex;align-items:center;text-decoration:none;}
.navml-logo-link:focus-visible{
outline:3px solid var(--navml-accento, #9E75E2);outline-offset:4px;border-radius:6px;
}
/* 16px perché il font è disegnato su una griglia di un ottavo di em: sui
multipli di 8 i pixel cadono interi e il marchio resta nitido. */
.navml-logo{
--navml-logo-c:#0086bb;
/* ⚠ content-box: le pagine hanno *{box-sizing:border-box}, e con il bordo
destro che fa da cursore la larghezza in ch andrebbe a finire dentro il
bordo (misurato: "ml" restava tagliato a meta'). Lo stesso motivo per cui
ce l'ha il badge di powered-by.html. */
box-sizing:content-box;
display:inline-flex;align-items:center;
font:400 16px/1 'MLPixel',ui-monospace,"Courier New",monospace;
color:var(--navml-logo-c);
}
/* larghezza fissa: due caratteri più mezza cella per il cursore. Il resto
dell'header non si sposta mentre il marchio si scrive. */
.navml-logo__slot{box-sizing:content-box;display:block;flex:none;width:2.5ch;}
.navml-logo__clip{
box-sizing:content-box;
display:block;width:0;overflow:hidden;white-space:nowrap;
color:var(--navml-logo-c);
border-right:.5ch solid var(--navml-logo-c);
animation:navml-logo-scrivi 12s linear .5s infinite both,
navml-logo-cursore 1.06s steps(1,end) infinite;
}
/* ciclo di 12s: si scrive in mezzo secondo, resta ~10s, si cancella e si riscrive
(stesso schema del badge di powered-by.html, più corto: qui sono due lettere) */
@keyframes navml-logo-scrivi{
0% {width:0; animation-timing-function:steps(2,end);}
4% {width:2ch;}
88% {width:2ch; animation-timing-function:steps(2,end);}
91% {width:0;}
100% {width:0;}
}
@keyframes navml-logo-cursore{
0%,49.9%{border-right-color:var(--navml-logo-c);}
50%,100%{border-right-color:transparent;}
}
/* Dal 29/09/2026 si riscrive ogni 12 secondi (richiesta di Mario). Prima si
scriveva una volta sola: il ciclo è lungo apposta, così il movimento resta
un dettaglio e non porta l'occhio via dal contenuto. */
@media (prefers-reduced-motion:reduce){
.navml-logo__clip{animation:none;width:2ch;border-right-color:transparent;}
}
/* Nelle pagine servizio/blog/strumenti il marchio entra nel brand che c'è già.
⚠ Là il nome si porta dietro "· XYZ Studio", e a 1000px l'header ha pochi
pixel di margine (vedi la soglia qui sotto): il suffisso torna solo da
1200px, dove lo spazio c'è davvero. Fino a lì il marchio prende il suo posto. */
/* ==========================================================================
INTESTAZIONE CONDIVISA (29/09/2026)
La stessa `.lp-header` su home, pagine servizio, blog e strumenti. Prima la
home aveva un header suo (#headerFixed, in style.css): stesso menu, ma senza
il nome, senza "Parliamone", trasparente e alto 64px invece di 78.
Le regole di base stanno qui e non in lp.css, perché la home lp.css non lo
carica e perché menu.css ha la versione nel nome: la stessa intestazione
arriva uguale ovunque, anche a chi ha in cache i fogli senza versione.
Sulle pagine che caricano anche lp.css i valori coincidono.
========================================================================== */
.lp-header{
position:sticky;top:0;z-index:50;
border-bottom:1px solid rgba(255,255,255,.10);
/* corpo e interlinea fissati qui: le pagine li danno diversi (lp.css 17px/1.65,
style.css 16px/normale) e l'intestazione cambiava altezza, 78px contro 71 */
font-size:17px;line-height:1.65;
}
.lp-header__inner{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:12px 20px;max-width:1120px;margin:0 auto;
}
.lp-header__brand{
display:flex;align-items:center;gap:10px;text-decoration:none;
font-family:'Montserrat',system-ui,sans-serif;font-weight:700;font-size:.95rem;color:#fff;
}
.lp-header__inner > .btn{
display:inline-flex;align-items:center;justify-content:center;
padding:10px 16px;border-radius:12px;border:1px solid var(--primary, #015E82);
background:var(--primary, #015E82);color:#fff;
font-family:'Montserrat',system-ui,sans-serif;font-size:.88rem;font-weight:700;line-height:1.2;
text-decoration:none;white-space:nowrap;transition:background-color .18s ease,transform .12s ease;
}
.lp-header__inner > .btn:hover{background:var(--primary-10, #0086bb);border-color:var(--primary-10, #0086bb);transform:translateY(-1px);}
.lp-header__inner > .btn:focus-visible{outline:3px solid var(--secondary, #8C5CDD);outline-offset:3px;}
/* Variante "sito" (29/09/2026, indicazioni di Mario): niente nome né "Parliamone"
(c'è già il pulsante fluttuante); da 1000px menu al centro con il marchio «ml»
dentro la pillola, sotto marchio a sinistra e tasto del menu a destra. Dal 30/09/2026 su
tutte le pagine col menu: home, servizi (aggiorna-menu.py) e pagine PHP (_inc/testa.php). */
.lp-header--sito .lp-header__inner{max-width:none;padding-left:24px;padding-right:24px;}
/* tre classi: più avanti ".lp-header__brand .lp-header__nome" riaccende il nome */
.lp-header--sito .lp-header__brand .lp-header__nome,
.lp-header--sito .lp-header__brand > span:last-child,
.lp-header--sito .lp-header__inner > .btn{display:none;}
/* il marchio dentro la pillola esiste solo nella variante e solo da 1000px:
sotto, la pillola non c'è e il marchio sta nel brand a sinistra */
.navml__marchio{display:none;}
@media (min-width:1000px){
/* menu al centro, marchio dentro la pillola come prima voce (29/09/2026) */
.lp-header--sito .lp-header__inner{display:flex;justify-content:center;}
.lp-header--sito .lp-header__brand{display:none;}
.lp-header--sito .navml__marchio{display:flex;align-items:center;}
.lp-header--sito .navml__marchio a{padding:0 12px 0 14px;height:36px;display:flex;align-items:center;}
}
/* style.css della home dà margini a tutti i /
e toglie i puntini alle liste:
dentro l'header non devono cambiare niente */
.lp-header ul, .lp-header li{margin:0;}
/* "· XYZ Studio" resta fuori dall'header delle pagine col menu (sulle landing
c'è ancora): serve lo spazio a sinistra per tenere la barra al centro
esatto. Col suffisso il brand misura 257px e la colonna di sinistra non
basterebbe — la barra si sposterebbe a destra da 1200px in su. */
.lp-header__brand > span:last-child{display:none;}
/* Il nome non va spezzato: il brand è un elemento flessibile e con il marchio
davanti si stringeva, mandando "Mario Liguori" su due righe e alzando
l'header (misurato: 50px invece di 25). */
.lp-header__brand{white-space:nowrap;}
/* ⚠ Marchio e nome vanno ridichiarati qui, con due classi, e non possono
dipendere da lp.css: quel file NON ha la versione nel nome e resta in cache
un giorno, quindi a chi ha già visitato il sito arriva subito il menu.css
nuovo e per un giorno ancora il lp.css vecchio — dove
".lp-header__brand span" spegneva ogni span del brand, marchio compreso.
Visto in produzione il 17/09/2026: nome e suffisso smorti, e sotto i 640px
il marchio sarebbe scomparso del tutto. Queste regole vincono in ogni caso. */
.lp-header__brand .navml-logo{display:inline-flex;font-weight:400;}
.lp-header__brand .navml-logo__slot{display:block;font-weight:400;}
.lp-header__brand .navml-logo__clip{
display:block;font-weight:400;color:var(--navml-logo-c);
}
.lp-header__brand .lp-header__nome{
display:block;color:var(--text, #fff);font-weight:700;
}
/* Sotto i 480px a sinistra resta solo il marchio: marchio, nome, "Parliamone"
e tasto del menu insieme non ci stanno (misurato: 7px di troppo a 320px).
Il nome resta nell'aria-label del link, quindi chi usa lo screen reader lo
sente comunque. */
@media (max-width:479px){
.lp-header__brand .lp-header__nome{display:none;}
}
/* ==========================================================================
⚠ PERCHÉ IL BLUR DEL MENU CHE SI APRE NON FUNZIONAVA
Un elemento con `backdrop-filter` diventa "backdrop root" per tutto quello
che sta dentro: i discendenti che hanno a loro volta un backdrop-filter non
sfocano più la pagina, ma il contenuto del root — cioè niente. Sopra il
pannello e le tendine ce n'erano due, la pillola `.navml__barra` e
l'header `.lp-header`, quindi il loro `blur(14px)` era lettera morta: si
vedeva il contenuto dietro **nitido** attraverso il fondo translucido.
Verificato il 17/09/2026 mettendo dietro alla tendina delle righe bianche e
nere: restavano righe nette. Togliendone uno solo non cambiava nulla,
toglierli entrambi risolveva.
La correzione: fondo e blur passano a uno **::before**. Lo pseudo-elemento
non contiene niente, quindi non fa da backdrop root per il menu, e il
risultato a schermo è identico (il fondo si dipinge sopra il blur dello
stesso elemento). ⚠ Aggiungendo in futuro un `backdrop-filter` a un
antenato del menu — header, wrapper, sezione — il blur delle tendine si
rompe di nuovo senza errori: va messo su uno ::before anche lì.
========================================================================== */
.lp-header{
background:none;
-webkit-backdrop-filter:none;backdrop-filter:none;
}
.lp-header::before{
content:"";position:absolute;inset:0;z-index:-1;
background:rgba(22,22,24,.86);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
/* Sulla home il menu sta nell'header trasparente #headerFixed, che è in
style.css. ⚠ Anche style.css non ha la versione nel nome: per chi ha il
sito in cache arriverebbe il menu.css nuovo e per un giorno l'header
vecchio. Le righe che contano stanno quindi anche qui, in un file
versionato (stessa specificità, e menu.css è caricato dopo). */
#headerFixed{
justify-content:space-between;
gap:12px;
padding:6px 14px;
}
/* --- fino a 999px: il tasto del menu va a destra di tutto -----------------
Nell'header delle pagine servizio/blog/strumenti l'ordine nel documento è
brand · menu · "Parliamone", quindi il tasto resterebbe in mezzo. Sul
telefono il posto del menu è l'angolo destro: è dove arriva il pollice ed
è il lato da cui si apre il pannello. Sulla home ci pensa #headerFixed,
che da qui in poi è space-between (marchio a sinistra, menu a destra). */
@media (max-width:999px){
.lp-header__inner{justify-content:flex-start;}
.lp-header__brand{margin-right:auto;}
.lp-header__inner .navml{order:3;}
}
/* --- da 1000px in su: barra orizzontale con tendine ----------------------
Non 900: fra 900 e 980 la barra, il logo e il pulsante "Parliamone"
dell'header di _inc/testa.php non ci stanno insieme e il pulsante esce
dallo schermo (misurato: 53px a 900px). Sotto la soglia c'è il pannello. */
.navml__barra{display:none;}
@media (min-width:1000px){
.navml__tasto{display:none;}
.navml__pannello{display:none;}
/* Barra al centro esatto della pagina, marchio dov'è. Tre colonne
`1fr auto 1fr`: le due laterali valgono lo stesso, quindi la barra sta
nel mezzo qualunque sia la larghezza del marchio o del pulsante.
⚠ Non un posizionamento assoluto: se un lato non ci sta, la colonna
cresce e la barra si sposta un po', invece di finire sotto al brand. */
#headerFixed,
.lp-header__inner{
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}
.lp-header__inner > .btn{justify-self:end;}
/* La pillola scura sfocata che la home aveva prima del menu condiviso.
Su tutte le pagine: sulla home perché l'header è trasparente e il menu
sta sopra la hero, altrove perché il menu dev'essere lo stesso ovunque. */
.navml__barra{
display:flex;align-items:center;gap:2px;
padding:4px;border-radius:999px;
border:1px solid var(--navml-bordo);
box-shadow:0 8px 24px rgba(0,0,0,.35);
/* il fondo sfocato sta nello ::before, non qui: vedi più sotto */
position:relative;isolation:isolate;
}
.navml__barra::before{
content:"";position:absolute;inset:0;z-index:-1;
border-radius:inherit;
background:rgba(22,22,24,.72);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.navml__barra > li{position:relative;list-style:none;}
.navml__barra a,
.navml__barra > li > button{
display:inline-flex;align-items:center;gap:7px;
padding:9px 14px;border:0;background:none;border-radius:999px;cursor:pointer;
color:var(--navml-muto);text-decoration:none;font:inherit;font-size:.93rem;font-weight:500;
white-space:nowrap;
}
.navml__barra a:hover,
.navml__barra > li > button:hover{color:var(--navml-testo);background:rgba(255,255,255,.06);}
/* il selettore colorato: sulla home lo sposta l'IntersectionObserver mentre
si scorre, altrove segna la pagina aperta */
.navml__barra > li > a[aria-current],
.navml__barra > li > button[data-dentro]{
background:var(--navml-attivo);color:var(--navml-testo);font-weight:600;
}
.navml__barra > li > a[aria-current]:hover,
.navml__barra > li > button[data-dentro]:hover{background:var(--navml-attivo);}
.navml__barra .navml__sotto a[aria-current]{color:var(--navml-accento);font-weight:700;}
.navml__barra > li > button::after{
content:"";width:6px;height:6px;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg) translateY(-2px);opacity:.7;transition:transform .2s ease;
}
.navml__barra > li > button[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-1px);}
/* la tendina */
.navml__barra .navml__sotto{
position:absolute;top:calc(100% + 8px);left:0;z-index:70;
display:block;min-width:250px;padding:7px;
border-radius:13px;border:1px solid var(--navml-bordo);
background:var(--navml-fondo);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
box-shadow:0 20px 44px rgba(0,0,0,.45);
opacity:0;transform:translateY(-6px);pointer-events:none;
transition:opacity .18s ease, transform .18s ease;
}
.navml__barra > li > button[aria-expanded="true"] + .navml__sotto{
opacity:1;transform:none;pointer-events:auto;
}
/* l'ultima voce è la più vicina al bordo: la tendina si allinea a destra,
altrimenti alla soglia uscirebbe dallo schermo (misurato: 53px) */
.navml__barra > li:last-child .navml__sotto{left:auto;right:0;}
.navml__barra .navml__sotto > div{overflow:visible;}
.navml__barra .navml__sotto a{
display:block;padding:10px 12px;border-radius:8px;font-size:.92rem;color:var(--navml-muto);
}
.navml__barra .navml__sotto a::before{display:none;}
.navml__barra .navml__sotto a:hover{color:var(--navml-testo);background:rgba(255,255,255,.07);}
}
/* Fra 1000 e 1119px barra, brand (che adesso ha il marchio davanti al nome) e
pulsante "Parliamone" stanno insieme per pochi pixel: le voci si stringono
di 3px per lato invece di far comparire la barra più tardi, così a 1024 —
il tablet in orizzontale — il menu resta quello da schermo largo.
Misurato: col padding pieno a 1000px l'header sbordava di 5px. */
@media (min-width:1000px) and (max-width:1119px){
.navml__barra a,
.navml__barra > li > button{padding-left:11px;padding-right:11px;}
}
@media (prefers-reduced-motion:reduce){
.navml__pannello,.navml__sotto,.navml__righe i,
.navml__gruppo > button::after,.navml__barra > li > button::after{transition:none;}
}
/* ==========================================================================
FISSA SOLO LA NAVBAR (30/09/2026, richiesta di Mario, su tutto il sito)
L'header esce dal flusso (fixed) ed è trasparente: la pagina parte dal bordo
alto dello schermo e scorre sotto e attorno alla pillola del menu. Vale per
home, servizi, blog, strumenti, 404 e anche per le landing (che caricano
questo foglio solo per l'intestazione, il menu lì non c'è).
⚠ Due strade scartate da Mario: header sticky trasparente (occupava ancora i
suoi 77px, "come se ci fosse la barra") e striscia opaca col colore della pagina.
========================================================================== */
.lp-header{position:fixed;top:0;left:0;right:0;border-bottom:0;box-shadow:none;}
.lp-header::before{display:none;}
/* le pagine con lp.css non hanno una prima schermata alta come la home: il
contenuto scende di quanto è alta l'intestazione, così il titolo non finisce
sotto la pillola. La home non ha accanto all'header: resta da sola. */
.lp-header ~ main{padding-top:77px;}
.lp-header ~ main [id]{scroll-margin-top:90px;}
/* La prima sezione (.hero) risale fino al bordo alto e tiene i 77px come spazio interno.
⚠ Senza questo, il bagliore viola in alto a destra della hero (.hero::before, tagliato
dall'overflow:hidden della sezione) aveva un taglio netto a 77px, proprio sotto la navbar
trasparente: sembrava che ci fosse ancora una barra (segnalato da Mario il 02/10/2026).
Il padding ripete quello di lp.css (56px, 76px da 900px) più l'altezza dell'header. */
.lp-header ~ main > .hero:first-child,
.lp-header ~ main > article:first-child > .hero:first-child{margin-top:-77px;padding-top:calc(56px + 77px);}
@media (min-width:900px){
.lp-header ~ main > .hero:first-child,
.lp-header ~ main > article:first-child > .hero:first-child{padding-top:calc(76px + 77px);}
}
/* il marchio (e sulle landing il nome) diventano una pillola uguale al tasto del
menu: altrimenti starebbero sopra il testo che scorre. Il blur sta sul brand,
che non contiene il menu: non rompe lo sfocato delle tendine. */
.lp-header__brand{
height:42px;padding:0 14px;border-radius:11px;box-sizing:border-box;
border:1px solid var(--navml-bordo, rgba(255,255,255,.12));
background:rgba(22,22,24,.72);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
box-shadow:0 8px 24px rgba(0,0,0,.35);
}
/* da 1000px l'intestazione è una griglia a tre colonne: senza questo, sulle landing
(dove il brand è l'unico elemento) la pillola si allargava a tutta la colonna */
.lp-header__brand{justify-self:start;}