/* ───────────────────────────────────────────────────────────────────────────── nav.css - La barra di navigazione, un foglio solo per tutto il sito. PERCHÉ UN FILE A PARTE. Le regole della barra stavano in tre posti: app.css (94 blocchi), page.css (32) e dentro wordpress.html (23). Cento- sessantasette regole per un componente solo, e infatti le barre erano diverse in modo visibile: voci diverse, selettore lingua presente in una sola, e su /wordpress il menù spariva del tutto. Finché le regole vivono in fogli diversi la deriva è questione di tempo, e nessuna guardia che confronta due copie la impedisce: la impedisce non avere due copie. Questo file lo carica OGNI pagina, compresa la home; il markup lo genera lib/navigazione.js. Un markup, un foglio. Caricato dopo app.css / page.css, che definiscono i token della tavolozza. I fallback nelle var() servono a un caso solo: una pagina che carichi questo foglio e non l'altro. Meglio un colore scritto due volte che una barra invisibile. ────────────────────────────────────────────────────────────────────────── */ /* I token della barra sono SUOI, non presi in prestito dalla tavolozza. In tema scuro app.css e page.css non concordano: --primary-fondo esiste solo in app.css, e --primary vale #8696a9 di là e #6b7f96 di qua. Un componente condiviso che legge un token definito in un foglio solo è la stessa deriva di prima, un piano più sotto: stessa barra, due colori. I valori sono misurati, non scelti a occhio: bottone chiaro #1a3a5c con testo #fafaf7 -> 11.13 bottone scuro #82a0c4 con testo #0f0f0f -> 7.10, e 6.60 contro la pagina Il primo valore che avevo messo in scuro (#617489) dava 3.99, sotto AA. */ :root { --nav-h: 73px; --nav-velo: rgba(250, 250, 247, 0.92); --nav-cta-fondo: #1a3a5c; --nav-cta-fondo-hover: #0f253d; --nav-cta-ink: #fafaf7; /* La voce della pagina corrente. Un token suo e non --primary: in tema scuro page.css porta --primary a #6b7f96, che sul fondo #14181c dà 4.33, sotto AA. È la lezione delle isole scure già scritta in CLAUDE.md, e ci sono ricascato: sulla home non si vedeva, perché lì la voce corrente non esiste (nessuna delle cinque punta alla home). */ --nav-corrente: #1a3a5c; /* 11.13 su crema */ } /* ── Guscio ──────────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; background: var(--nav-velo); backdrop-filter: saturate(180%) blur(8px); -webkit-backdrop-filter: saturate(180%) blur(8px); /* Il bordo c'è sempre. Prima compariva solo con la classe .scrolled, che la aggiunge il JS della home: sulle pagine statiche non arrivava mai e la barra restava senza stacco dal contenuto. Uno stato che esiste su una pagina sola è il modo in cui nascono due barre diverse. */ border-bottom: 1px solid var(--border, #d9d4ca); } .nav-inner { display: flex; align-items: center; gap: 12px; padding: 16px 24px; max-width: 1180px; margin: 0 auto; box-sizing: border-box; min-height: var(--nav-h); /* Dichiarati, non ereditati. Misurata sulle sette pagine, la barra usciva alta 77px sulla home e 78 sulle statiche, con il selettore lingua spostato di 4px: app.css e page.css danno al interlinea e spaziatura diverse, e la barra se le prendeva dalla pagina che la ospita. Un componente condiviso che eredita non è condiviso: è simile. */ font-family: var(--font-body, "Inter", system-ui, -apple-system, sans-serif); line-height: 1.4; letter-spacing: normal; } /* ── Logo ────────────────────────────────────────────────────────────────── */ .nav .brand-mark { display: inline-flex; align-items: center; /* Il marchio resta di 36px, il BERSAGLIO diventa di 44: e' il modo di tornare alla home da ogni pagina del sito, e su un telefono era il piu' piccolo della barra. Ingrandire il logo sarebbe stato un cambio di disegno; qui cresce solo l'area che il dito colpisce, e la barra e' alta 73px quindi in verticale non si muove niente. */ justify-content: center; min-width: 44px; min-height: 44px; text-decoration: none; flex-shrink: 0; } .nav .brand-logo { width: 36px; height: 36px; display: block; transition: transform 0.25s var(--ease, cubic-bezier(.4, 0, .2, 1)); } .nav .brand-mark:hover .brand-logo { transform: scale(1.04); } .nav .brand-mark:focus-visible { outline: 2px solid var(--primary, #1a3a5c); outline-offset: 4px; border-radius: 6px; } /* ── Voci ────────────────────────────────────────────────────────────────── */ /* margin-left:auto sulle voci e basta: spinge tutto il resto a destra senza space-between, che con un numero variabile di figli distribuisce lo spazio in modo diverso a seconda di quanti ce ne sono. Il gap si stringe con lo schermo invece di rompere il layout: le stesse voci occupano 508px in inglese e 561 in spagnolo, e una soglia in pixel è per forza sbagliata per qualche lingua. */ .nav-links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); margin-left: auto; } .nav-links a { font-size: 14px; font-weight: 500; color: var(--ink-soft, #3a3a38); text-decoration: none; white-space: nowrap; transition: color 0.18s var(--ease, cubic-bezier(.4, 0, .2, 1)); } .nav-links a:hover { color: var(--ink, #0f0f0f); } .nav-links a[aria-current="page"] { color: var(--nav-corrente); font-weight: 700; } .nav-links a.nav-link-agency { color: var(--terracotta, #a14d3a); font-weight: 600; } .nav-links a.nav-link-agency[aria-current="page"] { font-weight: 700; } /* ── Selettore lingua ────────────────────────────────────────────────────── */ /* Un

, non un bottone con listener: sulle pagine statiche quel listener non c'è mai stato e il selettore semplicemente non si apriva. */ .nav-lang { position: relative; flex-shrink: 0; } .nav-lang > summary { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1.5px solid var(--border, #d9d4ca); border-radius: 99px; font-size: 14px; font-weight: 500; color: var(--ink-soft, #3a3a38); cursor: pointer; list-style: none; transition: border-color 0.18s var(--ease, cubic-bezier(.4, 0, .2, 1)); } .nav-lang > summary::-webkit-details-marker { display: none; } .nav-lang > summary::marker { content: ""; } .nav-lang > summary:hover { border-color: var(--primary, #1a3a5c); } .nav-lang > summary:focus-visible { outline: 2px solid var(--primary, #1a3a5c); outline-offset: 2px; } .nav-lang-breve { display: none; } .nav-lang-chev { transition: transform 0.2s var(--ease, cubic-bezier(.4, 0, .2, 1)); } .nav-lang[open] .nav-lang-chev { transform: rotate(180deg); } .nav-lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; background: var(--cream, #fafaf7); border: 1px solid var(--border, #d9d4ca); border-radius: 12px; box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.12); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 60; } .nav-lang-menu a { padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--ink-soft, #3a3a38); text-decoration: none; border-bottom: none; } .nav-lang-menu a:hover { background: var(--cream-soft, #f4f1ea); color: var(--ink, #0f0f0f); } /* La lingua corrente si MARCA, non si nasconde: chi apre il selettore vede in quale lingua sta. Prima spariva dall'elenco con `hidden`, e la regola che serviva a farlo valere era il difetto della Fase 2.5.5 rimesso in piedi. */ .nav-lang-menu a[aria-current="true"] { background: var(--cream-soft, #f4f1ea); color: var(--nav-corrente); font-weight: 600; } /* ── Accedi / Crea account ───────────────────────────────────────────────── */ .nav-auth { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .nav-auth-link { font-size: 14px; font-weight: 500; color: var(--ink-soft, #3a3a38); text-decoration: none; padding: 9px 4px; white-space: nowrap; border-bottom: none; } .nav-auth-link:hover { color: var(--ink, #0f0f0f); } .nav-auth-cta { font-size: 14px; font-weight: 600; color: var(--nav-cta-ink); background: var(--nav-cta-fondo); text-decoration: none; padding: 11px 18px; border-radius: 10px; white-space: nowrap; border-bottom: none; transition: background 0.18s var(--ease, cubic-bezier(.4, 0, .2, 1)); } .nav-auth-cta:hover { background: var(--nav-cta-fondo-hover); } .nav-auth-link:focus-visible, .nav-auth-cta:focus-visible { outline: 2px solid var(--primary, #1a3a5c); outline-offset: 2px; } /* ── Tasto del menù (telefono) ───────────────────────────────────────────── */ /* `position: static` e non `relative`, ed è la differenza fra un pannello a piena larghezza e uno largo 40px. Con `relative` il riquadro di riferimento per il pannello diventa il TASTO, quindi `left: 0; right: 0` lo stiravano fra i due lati di un quadrato di 40 pixel. Da statico, il riferimento sale alla barra, che essendo `sticky` è già un elemento posizionato. */ .nav-menu { display: none; position: static; } .nav-menu > summary { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; /* 44 e non 40: sotto i 960px questo tasto E' la navigazione, e 40 sta sotto il minimo che Apple e Google chiedono per un bersaglio da dito. Le tre barrette restano di 22px e la X continua a chiudersi, perche' l'animazione si regola sul gap e non sul lato del quadrato. */ width: 44px; height: 44px; border-radius: 8px; cursor: pointer; list-style: none; } .nav-menu > summary::-webkit-details-marker { display: none; } .nav-menu > summary::marker { content: ""; } .nav-menu > summary:hover { background: var(--cream-soft, #f4f1ea); } .nav-menu > summary:focus-visible { outline: 2px solid var(--primary, #1a3a5c); outline-offset: 2px; } .ham-bar { width: 22px; height: 2px; background: var(--ink, #0f0f0f); border-radius: 2px; transition: transform 0.25s var(--ease, cubic-bezier(.4, 0, .2, 1)), opacity 0.2s var(--ease, cubic-bezier(.4, 0, .2, 1)); } .nav-menu[open] .ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-menu[open] .ham-bar:nth-child(2) { opacity: 0; } .nav-menu[open] .ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Pannello del telefono ───────────────────────────────────────────────── */ /* Niente altezza fissa in pixel: ogni voce nuova la sfonderebbe e overflow:hidden mozzerebbe l'ultima, com'era successo con "Accedi". */ .nav-panel { position: absolute; top: 100%; left: 0; right: 0; background: var(--cream, #fafaf7); border-top: 1px solid var(--border, #d9d4ca); border-bottom: 1px solid var(--border, #d9d4ca); box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.18); padding: 8px 0 20px; max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; } .nav-panel-links { display: flex; flex-direction: column; } .nav-panel-links a { padding: 16px 24px; font-size: 17px; font-weight: 500; color: var(--ink-soft, #3a3a38); text-decoration: none; border-bottom: none; } .nav-panel-links a:hover { background: var(--cream-soft, #f4f1ea); color: var(--ink, #0f0f0f); } .nav-panel-links a[aria-current="page"] { color: var(--nav-corrente); font-weight: 600; } .nav-panel-links a.nav-link-agency { color: var(--terracotta, #a14d3a); } .nav-panel-lang { padding: 14px 24px 4px; } .nav-panel-lang-et { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted, #6b675c); margin-bottom: 8px; } .nav-panel-lang-link { display: flex; flex-wrap: wrap; gap: 6px; } .nav-panel-lang-link a { padding: 7px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ink-soft, #3a3a38); text-decoration: none; background: var(--cream-soft, #f4f1ea); border-bottom: none; } .nav-panel-lang-link a[aria-current="true"] { color: var(--nav-corrente); font-weight: 600; } .nav-panel-auth { display: flex; flex-direction: column; gap: 10px; padding: 18px 24px 0; } .nav-panel-auth .nav-auth-link, .nav-panel-auth .nav-auth-cta { display: block; text-align: center; padding: 14px; font-size: 16px; border-radius: 12px; } .nav-panel-auth .nav-auth-link { border: 1.5px solid var(--border, #d9d4ca); } /* ── Sotto i 960px ───────────────────────────────────────────────────────── */ /* 960 e non 768: misurato, la barra in inglese con cinque voci, il selettore lingua e i due tasti dell'account chiede circa 900px. Fra 768 e 900 le voci andavano a capo a metà parola, e in italiano non si vedeva perché le etichette sono più corte. */ @media (max-width: 960px) { .nav-links, .nav-lang, .nav-auth { display: none; } .nav-menu { display: block; margin-left: auto; } } /* ── Chi è collegato non vede la navigazione di marketing ─────────────────── */ /* In dashboard "Funzioni", "Prezzi" e "Blog" sono la vetrina del prodotto a qualcuno che l'ha già comprato: rubano spazio al chip dell'account e non portano da nessuna parte utile. Per tornare al sito c'è il logo. La classe la mette il JS della home; le pagine senza quel JS non la hanno mai, e mostrano la barra intera, che è il comportamento giusto per una pagina pubblica. */ body.is-logged-in .nav-links, body.is-logged-in .nav-lang, body.is-logged-in .nav-menu { display: none; } /* ── Anti sfarfallio dell'account ─────────────────────────────────────────── */ /* La classe la mette in la PAGINA che poi chiama /api/auth/me, e la tolgono setLoggedIn/setLoggedOut. Prima era `body:not(.auth-resolved)`, cioè al contrario: nascondeva finché qualcuno non dichiarava di aver risolto, e su una pagina senza quel codice non lo dichiarava nessuno. Su /wordpress la barra è rimasta invisibile per questo, con le voci presenti nell'HTML: il controllo sul sorgente diceva che c'erano. Le voci NON sono qui dentro: sono uguali per chi è dentro e per chi è fuori, quindi non c'è nessuno sfarfallio da prevenire. */ body.auth-in-corso .nav-auth, body.auth-in-corso .nav-user { visibility: hidden; } /* ── Tema scuro (REGOLA CSS-2: sempre in doppia forma) ───────────────────── */ /* rgba(20,24,28) è #14181c, cioè il --cream scuro dei due fogli: il velo della barra deve essere la pagina con un filo di trasparenza, non un grigio a caso. In scuro il bottone si SCHIARISCE per staccare dalla pagina, quindi il suo inchiostro si scurisce: è la regola delle isole, al contrario. */ [data-theme="dark"] { --nav-velo: rgba(20, 24, 28, 0.92); --nav-cta-fondo: #82a0c4; --nav-cta-fondo-hover: #9ab4d3; --nav-cta-ink: #0f0f0f; --nav-corrente: #9db4cd; /* 8.36 sul fondo scuro */ } [data-theme="dark"] .nav-lang-menu, [data-theme="dark"] .nav-panel { background: var(--cream-soft); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nav-velo: rgba(20, 24, 28, 0.92); --nav-cta-fondo: #82a0c4; --nav-cta-fondo-hover: #9ab4d3; --nav-cta-ink: #0f0f0f; --nav-corrente: #9db4cd; } :root:not([data-theme="light"]) .nav-lang-menu, :root:not([data-theme="light"]) .nav-panel { background: var(--cream-soft); } } @media (prefers-reduced-motion: reduce) { .ham-bar, .nav-lang-chev, .nav .brand-logo, .nav-links a { transition: none; } }