* perché era un disegno, ma una navigazione vera è una lista, ed è così che * un lettore di schermo annuncia "menu, 6 voci" invece di leggere sei link * sciolti. Le regole qui sotto tengono conto della lista. */ /* I valori (--rl-*) non stanno più qui: sono in design-system.css, su :root, caricato su tutto il sito. Qui resta solo ciò che DIPINGE — e resta legato a .rl apposta, perché è la classe che il template mette sul : spostare queste cinque righe su :root ridipingerebbe di scuro l'intero sito. */ .rl { background: var(--rl-bg); color: var(--rl-text); font-family: var(--rl-body); font-size: 18px; line-height: 1.5; } .rl *, .rl *::before, .rl *::after { box-sizing: border-box; } .rl a { color: var(--rl-gold); text-decoration: none; } .rl a:hover { color: var(--rl-gold-light); } .rl h1, .rl h2, .rl h3 { font-family: var(--rl-display); font-weight: 400; margin: 0; color: var(--rl-text); } .rl p { margin: 0; } .rl__wrap { max-width: 1440px; margin: 0 auto; } /* Il salto al contenuto: invisibile finché non lo si raggiunge da tastiera. Definito qui e non lasciato a Blocksy, perché questo template non carica la sua testata e non deve dipendere da una sua classe per non mostrare un link vagante in cima alla pagina. */ .rl .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .rl .screen-reader-text:focus { position: fixed; top: 12px; left: 12px; z-index: 100; width: auto; height: auto; clip: auto; clip-path: none; background: var(--rl-gold); color: #140d06; padding: 12px 18px; border-radius: 4px; font-family: var(--rl-cond); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* Etichetta di sezione: filetto rosso + testo condensato oro. */ .rl__eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--rl-cond); font-weight: 700; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--rl-gold); } .rl__eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--rl-red); display: block; flex: none; } /* --- fascia immagine in testa ----------------------------------------------- */ /* Il punto della versione 2: l'immagine non ha scritte sopra e si vede intera. Niente background-image e niente altezza forzata — un che scala. Sta nel guscio perché la usano sia la home sia le pagine convertite, per l'immagine in evidenza. --------------------------------------------------------------------------- L'uscita dal contenitore: il resto della pagina è largo al massimo 1440px, l'immagine no — arriva al 90% dello schermo e resta centrata. larghezza = max(100%, min(90vw, 1860px)) Le due funzioni fanno due lavori diversi, e servono entrambe. Il max() impedisce che l'immagine diventi più STRETTA del testo: con un 90vw secco, sotto i 1600px di finestra si restringerebbe, e sul telefono comparirebbero due bande ai lati dove oggi arriva al bordo. Il min() è il tetto, e il numero non è arbitrario: la foto è larga 1672px e oltre i 1860 comincia a vedersi ingrandita (a 1860 siamo all'11%, che non si nota; su un monitor 4K senza tetto arriverebbe al 38%). Se un giorno si carica una foto più grande, questo è il numero da alzare. Il margine negativo la ricentra: quando è più larga del contenitore, (100% - larghezza) / 2 è negativo e la tira fuori di uguale da entrambi i lati, senza bisogno di transform. */ .rl-hero { --rl-hero-w: max(100%, min(90vw, 1860px)); background: var(--rl-bg-deep); width: var(--rl-hero-w); margin-inline: calc((100% - var(--rl-hero-w)) / 2); } .rl-hero img { display: block; width: 100%; height: auto; } /* --- header ---------------------------------------------------------------- */ .rl-header { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 14px var(--rl-pad); background: var(--rl-bg-header); border-bottom: 1px solid var(--rl-border-soft); position: relative; z-index: 40; } .rl-brand { display: flex; align-items: center; gap: 14px; } .rl-brand img { height: 52px; width: auto; display: block; } .rl-brand__name { font-family: var(--rl-display); font-size: 17px; letter-spacing: .02em; color: var(--rl-gold-light); display: block; } .rl-brand__tag { font-family: var(--rl-cond); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--rl-muted-2); display: block; } /* Il

porta la tipografia, la

dentro porta la disposizione: il walker produce nav > ul.rl-nav__list > li.rl-nav__item. */ .rl-nav { font-family: var(--rl-cond); font-weight: 600; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; } .rl-nav__list { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; } .rl-nav__item { position: relative; display: flex; align-items: center; } .rl-nav a, .rl-nav__toggle { color: var(--rl-text); padding: 14px 0; display: flex; align-items: center; gap: 7px; background: none; border: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } .rl-nav a:hover, .rl-nav__toggle:hover, .rl-nav__item:hover > .rl-nav__toggle { color: var(--rl-gold); } /* Freccetta della tendina: quadratino ruotato, come nel mockup. */ .rl-nav__caret { width: 5px; height: 5px; border-right: 2px solid var(--rl-muted-2); border-bottom: 2px solid var(--rl-muted-2); transform: rotate(45deg); display: block; margin-bottom: 3px; flex: none; } .rl-nav__drop { position: absolute; top: 100%; left: -18px; z-index: 20; min-width: 250px; background: #1b1207; border: 1px solid var(--rl-border); border-radius: 5px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); padding: 8px; display: none; flex-direction: column; list-style: none; margin: 0; } .rl-nav__drop li { display: flex; } .rl-nav__drop a { flex: 1; } /* Si apre al passaggio del mouse e — per chi naviga da tastiera — quando il fuoco è dentro la voce. :focus-within è ciò che rende la tendina raggiungibile senza mouse: il mockup aveva solo l'hover. */ .rl-nav__item:hover > .rl-nav__drop, .rl-nav__item:focus-within > .rl-nav__drop { display: flex; } .rl-nav__drop a { padding: 12px 14px; border-radius: 4px; color: var(--rl-text); font-family: var(--rl-body); font-size: 15px; font-weight: 400; letter-spacing: .06em; text-transform: none; } .rl-nav__drop a:hover { background: var(--rl-border-soft); color: var(--rl-gold); } .rl-header__end { display: flex; align-items: center; gap: 18px; } .rl-lang { display: flex; gap: 8px; font-family: var(--rl-cond); font-weight: 600; font-size: 13px; letter-spacing: .08em; color: var(--rl-muted-2); } .rl-lang a { color: var(--rl-muted-2); } .rl-lang a:hover { color: var(--rl-gold-light); } .rl-lang [aria-current="true"] { color: var(--rl-gold-light); } .rl-wa { display: flex; align-items: center; gap: 8px; background: var(--rl-gold); color: #140d06 !important; font-family: var(--rl-cond); font-weight: 700; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; padding: 11px 20px; border-radius: 4px; white-space: nowrap; } .rl-wa:hover { background: var(--rl-gold-light); color: #140d06 !important; } .rl-wa::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #0f6b2f; display: block; flex: none; } /* Hamburger: nascosto su desktop, vedi media query. */ .rl-burger { display: none; width: 48px; height: 48px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: 0; } .rl-burger span { width: 22px; height: 2px; background: var(--rl-text); display: block; transition: transform .18s ease, opacity .18s ease; } .rl-burger[aria-expanded="true"] span { background: var(--rl-gold); } .rl-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .rl-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .rl-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .rl-btn { display: inline-block; font-family: var(--rl-cond); font-weight: 700; font-size: 22px; letter-spacing: .06em; text-transform: uppercase; padding: 20px 34px; border-radius: 4px; text-align: center; } .rl-btn--primary { background: var(--rl-red); color: #fff !important; } .rl-btn--primary:hover { background: var(--rl-red-hover); color: #fff !important; } .rl-btn--ghost { border: 1px solid var(--rl-line); color: var(--rl-text) !important; padding: 20px 30px; } .rl-btn--ghost:hover { border-color: var(--rl-gold); color: var(--rl-gold) !important; } .rl-btn--dark { background: #140d06; color: var(--rl-gold-light) !important; font-size: 19px; padding: 16px 26px; } .rl-btn--dark:hover { background: #000; color: var(--rl-gold-light) !important; } /* Dal 2026-08-31 nessuno la usa: il bottone con l'email in fondo alla home e' stato tolto e questa ne era l'unica occorrenza. Tenuta perche' e' una variante del componente bottone, come --ghost e --dark, non impalcatura di un singolo elemento: se serve di nuovo basta la classe. Se al prossimo giro e' ancora inutilizzata, si elimina con le sue due righe. */ .rl-btn--outline { border: 1px solid rgba(255, 255, 255, .6); color: #fff !important; font-size: 19px; padding: 16px 26px; } .rl-btn--outline:hover { background: rgba(0, 0, 0, .15); color: #fff !important; } /* --- footer ---------------------------------------------------------------- */ .rl-footer { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding: 56px var(--rl-pad); background: var(--rl-bg-header); border-top: 1px solid var(--rl-border-soft); font-size: 16px; color: var(--rl-muted); } /* Il logo nel piede: misurato in percentuale della colonna, non in pixel di altezza. Con un'altezza fissa cambiava peso a ogni cambio di griglia — 56px sono grandi su una colonna stretta e minuscoli su una larga. Il tetto in px serve solo a impedirgli di diventare enorme quando su mobile la prima colonna occupa tutta la riga. */ .rl-footer img { width: 60%; height: auto; max-width: 250px; align-self: flex-start; } .rl-footer > div { display: flex; flex-direction: column; gap: 10px; } .rl-footer > div:first-child { gap: 14px; } .rl-footer h2 { font-family: var(--rl-cond); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--rl-text); } /* --- link social ------------------------------------------------------------ Una riga di icone che compare in due posti: nel riquadro DOVE / QUANDO / INFO della home, sotto l'etichetta SOCIAL, e in fondo alla colonna CONTATTI del piede. Le regole stanno qui, in shell.css, e non in home-ruedaloca.css, proprio perché i posti sono due: il markup lo genera rl_social_links(). Il tondo attorno all'icona non è decorazione. Il disegno è 22px, che a dito nudo è un bersaglio scomodo; il tondo lo porta a 44px, la misura minima perché si prenda al primo colpo. Sul desktop dà anche un'area di hover riconoscibile. Il colore lo prende l'SVG da currentColor, quindi qui si tocca solo `color` e cambiano insieme tratto e riempimento. Nota: .rl a (in cima a questo file) ha la stessa specificità di .rl-social a — vince questa perché viene dopo. */ .rl-social { display: flex; align-items: center; gap: 10px; } .rl-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; /* Il tondo si deve vedere anche da fermo. --rl-border, il colore dei filetti, qui non basta: su questo fondo sta a 1,15:1, cioè non esiste. --rl-muted-2 tiene 4,1:1 anche sul punto chiaro del legno, e resta un gradino sotto al disegno dell'icona (--rl-muted) — l'icona davanti, l'anello dietro, che è l'ordine giusto. */ border: 1px solid var(--rl-muted-2); border-radius: 50%; color: var(--rl-muted); transition: color .18s ease, border-color .18s ease, background-color .18s ease; } /* Al passaggio del mouse l'anello prende l'oro dei link, e con lo stesso scarto di prima: cerchio --rl-gold, icona --rl-gold-light. Il velo d'oro dietro è appena accennato — a .12 il legno continua a vedersi, serve solo a far "accendere" il bersaglio invece di cambiargli solo il bordo. */ .rl-social a:hover, .rl-social a:focus-visible { color: var(--rl-gold-light); border-color: var(--rl-gold); background-color: rgba(242, 178, 60, .12); } .rl-social svg { display: block; } /* Nel piede la riga chiude la colonna: un filo di aria in più sopra, perché sotto non ha niente che la trattenga. */ .rl-footer .rl-social { margin-top: 6px; } /* Stessa aria sotto l'etichetta SOCIAL nel riquadro della home. Non è un capriccio: sotto DOVE o QUANDO c'è del testo, e fra l'etichetta e la maiuscola successiva si infila l'interlinea (18px per 1.5 fa 27, cioè circa 6px di spazio vuoto sopra le lettere). Un cerchio quello spazio non ce l'ha — comincia dal primo pixel — quindi con lo stesso gap risultava più stretto degli altri. I 6px qui sotto rimettono le quattro voci sulla stessa misura OTTICA, che è l'unica che si vede. */ .rl-facts .rl-social { margin-top: 6px; } /* La firma in fondo. Occupa tutta la griglia (1 / -1 vale sia a quattro colonne sia a due, quindi non serve ripeterla nella media query) e riprende l'idioma delle etichette minori del progetto: condensato, maiuscoletto, spaziato. Il filetto sopra la stacca dalle colonne senza aggiungere una fascia a parte. */ .rl-colophon { grid-column: 1 / -1; /* Niente margin-top: lo stacco dalle colonne lo fa già il gap della griglia del piede. (E non funzionerebbe comunque: .rl p { margin: 0 } ha specificità 0-1-1 contro lo 0-1-0 di questa classe, quindi vince lui — un margine scritto qui sarebbe codice morto che sembra vivo.) I 20px qui sotto sono lo spazio SOPRA il testo, misurato dal filetto. Su mobile il piede chiude con altrettanti 20px, così la riga risulta centrata; su desktop sotto ce ne sono di più, ed è voluto. */ padding-top: 20px; border-top: 1px solid var(--rl-border-soft); text-align: center; font-family: var(--rl-cond); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--rl-muted-2); } @media (max-width: 900px) { /* Nessuno spazio riservato in fondo: la barra fissa non viene mostrata (vedi la nota su .rl-sticky in fondo a questo file). Se un giorno la si riaccende, qui va rimesso un padding-bottom pari alla sua altezza — 77px + env(safe-area-inset-bottom) — altrimenti coprirà la firma. */ .rl { font-size: 17px; --rl-pad: 20px; } /* Il menu orizzontale diventa un pannello a tutta pagina sotto l'header. */ .rl-burger { display: flex; } .rl-header { padding: 10px var(--rl-pad); position: sticky; top: 0; } .rl-brand img { height: 38px; } .rl-brand__tag { display: none; } .rl-header .rl-wa { display: none; } .rl-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--rl-bg-header); padding: 18px var(--rl-pad) 24px; max-height: calc(100vh - 60px); max-height: calc(100svh - 60px); overflow: auto; border-bottom: 1px solid var(--rl-border); } .rl-nav.is-open { display: block; } .rl-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .rl-nav__item { flex-direction: column; align-items: stretch; } .rl-nav__item > a, .rl-nav__toggle { min-height: 56px; font-size: 24px; justify-content: space-between; border-bottom: 1px solid var(--rl-border-soft); width: 100%; } .rl-nav__caret { transform: rotate(-45deg); width: 8px; height: 8px; margin: 0 4px 0 0; } .rl-nav__toggle[aria-expanded="true"] .rl-nav__caret { transform: rotate(45deg); } /* Su mobile la tendina si apre col tocco, non con l'hover: comanda aria-expanded del bottone, non :hover, che sul touch resta "attaccato". */ .rl-nav__item:hover > .rl-nav__drop, .rl-nav__item:focus-within > .rl-nav__drop { display: none; } .rl-nav__toggle[aria-expanded="true"] + .rl-nav__drop { display: flex; } .rl-nav__drop { position: static; min-width: 0; border: 0; box-shadow: none; background: none; padding: 2px 0 14px 2px; } .rl-nav__drop a { min-height: 48px; font-size: 17px; color: #d8c8ad; align-items: center; display: flex; } .rl-btn { font-size: 20px; padding: 17px; min-height: 52px; } .rl-btn--ghost { padding: 16px; } /* In fondo 20px, cioè quanto la firma ha sopra di sé: così è centrata fra il suo filetto e la fine del piede. Lo spazio per la barra fissa non è più qui — vedi il padding-bottom di .rl in cima a questa media query. */ .rl-footer { grid-template-columns: 1fr 1fr; gap: 22px; padding: 32px var(--rl-pad) 20px; } .rl-footer > div:first-child { grid-column: span 2; } /* Barra fissa in fondo: l'azione unica sempre a portata di pollice. */ .rl-sticky { display: flex; gap: 10px; padding: 12px 16px; background: rgba(15, 10, 5, .96); border-top: 1px solid var(--rl-border); position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } .rl-sticky .rl-btn { flex: 1; font-size: 17px; padding: 15px; } .rl-sticky__tel { width: 56px; min-height: 52px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rl-line); border-radius: 4px; color: var(--rl-gold); font-family: var(--rl-cond); font-weight: 700; font-size: 15px; flex: none; } } @media (prefers-reduced-motion: reduce) { .rl-burger span { transition: none; } } /* --- barra fissa mobile ------------------------------------------------ */ /* Una sola azione sempre a portata di pollice. Sta nel guscio e non nella home perché serve su ogni pagina: chi legge "Il metodo didattico" deve poter prenotare senza tornare indietro. --------------------------------------------------------------------------- ATTENZIONE — questa riga è la ragione per cui la barra NON si vede, né su desktop né su mobile. Doveva essere il valore di partenza, da ribaltare nella media query qui sopra; essendo scritta DOPO, e avendo la stessa specificità (0-1-0) del `display: flex` di quella, vince per ordine. Il markup c'è su tutte le pagine, ma è invisibile ovunque. Per riaccenderla: spostare questa riga PRIMA della media query, e rimettere il padding-bottom su .rl dentro la media query, o coprirà la firma del piede. Lasciata com'è di proposito: riaccenderla aggiunge una barra fissa su ogni pagina mobile, ed è una decisione di progetto, non una svista da correggere in silenzio. */ .rl-sticky { display: none; }