/* ==========================================================================
Paradise Home — testata, menu, piè di pagina, pulsanti flottanti
Va caricato DOPO main.css: main.css tiene i token e la base, qui c'è il
valore letto nel CSS reale del sito ogni volta che i due si sovrappongono.
Ogni numero qui dentro è copiato da uno di questi file, in research/assets/:
post-6.css kit Elementor: --e-global-color-primary:#692A98,
--e-global-color-text:#7A7A7A, --container-max-width
1350px / 1024px (≤1024) / 767px (≤767), --widgets-spacing
20px, nessun override di --container-default-padding-*
(quindi i contenitori restano a 10px)
post-9709.css template della testata (ID 9709): due contenitori
sovrapposti, menu Royal "wpr-mega-menu", bottone CTA
post-258.css template del piè di pagina (ID 258): card grigia, colonne,
barra legale, torna su
post-1631.css pulsanti di contatto flottanti (widget Elementor 1631)
royal plugins__royal-elementor-addons__…__frontend.min.css
royal-link-fx …__css__lib__animations__wpr-link-animations.min.css
el-contact uploads__elementor__css__custom-widget-contact-buttons-
base.min.css e …-var-10.min.css
el-social plugins__elementor__assets__css__widget-social-icons.min.css
el-con uploads__elementor__css__custom-frontend.min.css
(default del sistema di contenitori .e-con)
hello reset themes__hello-elementor__assets__css__reset.css
Le classi vere del widget menu, dall'HTML delle 35 pagine:
wpr-main-menu-align-center wpr-main-menu-align--laptopleft
wpr-main-menu-align--tabletcenter wpr-main-menu-align--mobilecenter
wpr-mobile-toggle-v2 wpr-pointer-line-fx wpr-pointer-fx-none
wpr-pointer-underline wpr-sub-icon-caret-down wpr-sub-menu-fx-fade
wpr-nav-menu-bp-tablet wpr-mobile-menu-display-dropdown
wpr-mobile-menu-full-width wpr-sub-divider-yes
e il widget è `elementor-widget-wpr-mega-menu`: quindi valgono le regole
`.wpr-mega-menu …` di royal, non quelle `.wpr-nav-menu:not(.wpr-mega-menu)`.
Breakpoint reali: 1221px (royal, allineamento del menu su laptop), 1024px
(passaggio al menu mobile), 767px (mobile).
NOTA SUL CONTRASTO. Il viola del marchio è #692A98 e resta questo: su bianco
fa 8,3:1. Il grigio di hover delle voci di menu è #7A7A7A (--e-global-color-
text del kit): su bianco fa 4,5:1, il limite AA per il testo normale, e resta
anche lui — la voce sotto il mouse guadagna in più la sottolineatura viola da
1px, che la distingue anche a chi non percepisce quel salto di grigio.
========================================================================== */
:root {
/* Colori. I fallback ci sono perché questo foglio deve reggere anche se
main.css rinomina i token. */
--ph-hf-primary: var(--ph-primary, #692a98);
--ph-hf-nav-link: var(--ph-text, #3f3f3f); /* post-9709: voci di 1° livello */
--ph-hf-nav-hover: var(--ph-text-soft, #7a7a7a); /* post-6: --e-global-color-text */
--ph-hf-sub-link: var(--ph-submenu-text, #333333);
--ph-hf-border: var(--ph-border, #e8e8e8);
--ph-hf-white: var(--ph-white, #ffffff);
/* Testata: post-9709.css contenitori 7c1f7bbe / a0e9732 + post-6.css */
--ph-hf-container: var(--ph-container, 1350px);
--ph-hf-pad: 10px; /* el-con: --container-default-padding-*, 10px */
--ph-hf-row-gap: 10px; /* post-9709: --gap:10px 10px */
--ph-hf-shadow: var(--ph-shadow-header, 0px 0px 20px 0px rgba(202.5, 202.5, 202.5, 0.5));
/* Piè di pagina: post-258.css */
--ph-hf-footer-bg: var(--ph-surface, #f0f4f7);
--ph-hf-footer-rule: var(--ph-border-soft, #dae1e6);
--ph-hf-footer-title: var(--ph-heading-alt, #242566);
--ph-hf-footer-link: var(--ph-secondary, #54595f);
--ph-hf-footer-muted: var(--ph-text-muted, #777777);
--ph-hf-footer-max: var(--ph-container-wide, 1600px);
--ph-hf-widget-gap: 20px; /* post-6.css: --widgets-spacing:20px 20px */
/* Pulsanti flottanti: el-contact + post-1631 */
--ph-hf-contact-svg: 24px; /* has-size-medium → --…-svg-size-medium */
--ph-hf-contact-offset: 8px; /* --…-margin-offset per la taglia media */
--ph-hf-contact-radius: 20px; /* has-corners-rounded */
}
/* ==========================================================================
1. TESTATA
==========================================================================
Nell'originale ci sono due contenitori fratelli con lo stesso contenuto:
A #7c1f7bbe wpr-sticky-section-yes wpr-sticky-replace-header-yes
background-color:#FFFFFF00 (bianco con alfa 0 → trasparente)
box-shadow:0px 0px 20px 0px rgba(202.5,202.5,202.5,0.5)
colonne 18% / 66% / 16%
data-settings: wpr_sticky_effects_offset:100 (desktop)
--wpr-animation-duration:0.3s, sticky_animation:"fade"
B #a0e9732 stesso contenuto, background-color:#FFFFFF (bianco pieno)
colonne 15% / 70% / 14.666%
royal tiene B fuori dallo schermo
(`.wpr-sticky-replace-header-yes + div{position:fixed;top:-1000px}`) e il JS
di Royal, superati i 100px di scroll, mette `wpr-visibility-hidden` su A e
`wpr-hidden-header-flex` + `wpr-fade-in` su B — cioè `position:fixed`,
`top:0`, `z-index:50` e l'animazione `opacity:0→1` in 0.3s.
Quindi: in cima alla pagina si vede A, trasparente; dopo 100px compare in
dissolvenza B, bianco, fissato in alto e con le colonne un po' diverse.
Qui c'è una sola testata: `position:sticky`, che resta nel flusso e non fa
sobbalzare la pagina come il doppio contenitore dell'originale, più la
classe `.is-stuck` che porta in 0.3s il fondo bianco e le larghezze di
colonna del contenitore B. La sentinella che accende `.is-stuck` la crea
app.js e scatta a 100px, che è il `wpr_sticky_effects_offset` del sito. */
.site-header {
position: sticky;
top: 0;
z-index: 50; /* post-9709: z-index:50 */
/* post-9709 contenitore A: #FFFFFF00 — la barra in cima è trasparente. */
background-color: transparent;
box-shadow: var(--ph-hf-shadow);
/* Nessuna imbottitura sulla testata: l'imbottitura del contenitore sta
sull'inner, così il box della testata resta a tutta larghezza. */
padding: 0;
/* royal: --wpr-animation-duration:0.3s, animazione "fade" del contenitore B */
transition: background-color 0.3s linear;
}
/* Oltre i 100px di scroll: il fondo bianco del contenitore B. */
.site-header.is-stuck {
background-color: var(--ph-hf-white);
}
/* La sentinella la crea app.js subito prima della testata, e
IntersectionObserver ci aggancia `.is-stuck`. Alta 100px con margine
negativo di pari valore: non occupa spazio nel layout ma esce dal viewport
esattamente a 100px di scroll. */
.header-sentinel {
height: 100px;
margin-bottom: -100px;
pointer-events: none;
}
/* el-con: in un `.e-con-boxed` l'imbottitura orizzontale sta sull'esterno e il
contenuto è centrato a --content-width, cioè min(100%, --container-max-width)
= 1350px (post-6.css); quella verticale sta sull'inner insieme al gap.
Qui le due imbottiture stanno sullo stesso elemento: `max-width` conta i
10px laterali (box-sizing:border-box), quindi 1350+20 lascia al contenuto
esattamente i 1350px dell'originale. */
.site-header__inner {
display: flex;
flex-direction: row;
align-items: stretch; /* post-9709: --align-items:stretch */
gap: var(--ph-hf-row-gap);
width: 100%;
max-width: calc(var(--ph-hf-container) + var(--ph-hf-pad) * 2);
margin-inline: auto;
padding: var(--ph-hf-pad);
}
/* Le tre colonne sono contenitori `.e-con-full` con imbottitura di default
10px, `--justify-content:center` e `--flex-direction:column`.
el-con: `.e-con{width:var(--width); min-width:0; position:relative}` e
`.e-con.e-flex{flex:var(--flex-grow) var(--flex-shrink) var(--flex-basis)}`
con basis `auto`. */
.site-header__col {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--ph-hf-pad);
min-width: 0;
}
/* post-9709, contenitore A: 18% / 66% / 16% da 768px in su. Le prime due
colonne hanno anche --flex-grow:0 e --flex-shrink:0, la terza solo
--flex-grow:0. */
.site-header__col--logo {
flex: 0 0 18%;
}
.site-header__col--nav {
position: relative;
flex: 0 0 66%;
}
.site-header__col--cta {
flex: 0 1 16%;
}
/* post-9709, contenitore B: 15% / 70% / 14.666%. */
.site-header.is-stuck .site-header__col--logo {
flex-basis: 15%;
}
.site-header.is-stuck .site-header__col--nav {
flex-basis: 70%;
}
.site-header.is-stuck .site-header__col--cta {
flex-basis: 14.666%;
}
/* I widget dentro una colonna prendono `--container-widget-width:100%`
(el-con, valore di default di `.e-con`). */
.site-logo,
.site-header__col--nav .site-nav,
.site-header__col--cta .site-header__cta {
flex: 0 0 auto;
width: 100%;
}
/* Il logo: post-9709 non ha nessuna regola di dimensione per l'immagine.
Prende la larghezza della colonna (hello reset: `img{max-width:100%;
height:auto}`) e il file originale è 1200×330, quindi a 1350px di
contenitore viene ~223×61px, e ~183×50px quando la barra si fissa. */
.site-logo {
display: block;
line-height: 0;
}
.site-logo__img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.site-header__col--nav .site-nav {
display: block;
}
/* post-9709 elemento 34e8ddbb: `text-align:center` sul widget e
`.wpr-button-wrap{max-width:100%}` → il bottone occupa tutta la colonna. */
.site-header__col--cta .site-header__cta {
display: inline-flex;
}
/* ==========================================================================
2. MENU PRINCIPALE — desktop (≥1025px)
==========================================================================
post-9709.css elemento 1a182509, widget wpr-mega-menu. */
@media (min-width: 1025px) {
.nav-toggle-wrap {
display: none;
}
/* La barra (loghino + X) e i social appartengono al pannello mobile:
sul desktop non esistono. */
.site-nav__bar,
.site-nav__social {
display: none;
}
/* royal: `.wpr-nav-menu{padding:0;margin:0;list-style:none;font-size:0}` e
`.wpr-nav-menu-horizontal>.wpr-nav-menu>li{display:inline-block}`, con
allineamento centrale (wpr-main-menu-align-center). Non è un flex: sono
inline-block, così le dieci voci vanno a capo come sul sito invece di
stringersi. */
.menu--primary {
display: block;
margin: 0;
padding: 0;
font-size: 0;
list-style: none;
text-align: center;
}
/* royal: `.wpr-nav-menu li{position:relative}` */
.menu--primary > .menu__item {
display: inline-block;
position: relative;
/* post-9709: `.wpr-nav-menu > .menu-item{margin-left:18px;margin-right:18px}` */
margin: 0 18px;
text-align: left;
}
/* royal: prima e ultima voce senza margine esterno (regole con !important). */
.menu--primary > .menu__item:first-child {
margin-left: 0;
}
.menu--primary > .menu__item:last-child {
margin-right: 0;
}
/* royal: `.wpr-nav-menu .wpr-menu-item{display:block;position:relative;
z-index:1}` e, per il mega menu, `.wpr-mega-menu a.wpr-menu-item{
display:flex;align-items:center}`; `.wpr-nav-menu > li > a{line-height:1}`.
post-9709: Poppins 15px 500 maiuscolo #3F3F3F, imbottitura 12px 0,
transizione 0.7s (`.wpr-menu-item.wpr-pointer-item`). */
.menu--primary > .menu__item > .menu__link {
position: relative;
z-index: 1;
display: flex;
align-items: center;
padding: 12px 0;
font-family: var(--ph-font-heading, "Poppins", sans-serif);
font-size: 15px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
color: var(--ph-hf-nav-link);
transition-property: color;
transition-duration: var(--ph-transition-menu, 0.7s);
}
/* post-9709: hover e voce attiva vanno su --e-global-color-text (#7A7A7A).
Royal accende `wpr-active-menu-item` sulla voce corrente E sui suoi
antenati diretti (nell'HTML reale «Trattamenti», che è
current-menu-ancestor, ce l'ha): il walker rispecchia quella regola. */
.menu--primary > .menu__item > .menu__link:hover,
.menu--primary > .menu__item.is-current > .menu__link,
.menu--primary > .menu__item > .menu__link:focus-visible {
color: var(--ph-hf-nav-hover);
}
/* Il puntatore. royal-link-fx dichiara
`.wpr-pointer-underline .wpr-pointer-item:after{
content:'';display:block;height:0;width:100%;left:0;z-index:2}`
royal aggiunge, per il mega menu,
`.wpr-mega-menu .wpr-pointer-item:after{position:absolute}`
e post-9709 porta l'altezza a 1px, il colore a --e-global-color-primary
(#692A98) e trasla la linea di 13px verso il basso.
`wpr-pointer-fx-none` vuol dire nessuna animazione: la linea compare e
scompare di colpo (`opacity` 0/1 con `transition:none !important`), e
sulla voce attiva resta accesa.
Senza `top`/`bottom` la posizione statica in un contenitore flex con
`align-items:center` è il centro verticale del link: da lì i 13px di
traslazione la portano appena sotto il testo, come sul sito. */
.menu--primary > .menu__item > .menu__link::after {
content: "";
position: absolute;
display: block;
inset: auto auto auto 0;
width: 100%;
height: 1px;
background-color: var(--ph-hf-primary);
transform: translateY(13px);
opacity: 0;
transition: none;
z-index: 2;
}
.menu--primary > .menu__item > .menu__link:hover::after,
.menu--primary > .menu__item > .menu__link:focus-visible::after,
.menu--primary > .menu__item.is-current > .menu__link::after {
opacity: 1;
}
/* Il caret. royal: `.wpr-nav-menu-horizontal .wpr-menu-item .wpr-sub-icon{
margin-left:7px}` e `.wpr-nav-menu-horizontal .wpr-mega-menu .wpr-sub-icon{
margin-top:-1px}`; post-9709 lo mette a 14px.
È dentro il link, come nell'originale (`…`):
così la sottolineatura, larga il 100% del link, copre anche il caret. */
.menu--primary .menu__sub-icon {
margin-left: 7px;
margin-top: -1px;
}
/* royal: nel sottomenu il caret è spinto in fondo al link
(`.wpr-mega-menu .wpr-sub-icon{margin-left:auto}`) e NON è ruotato: la
rotazione di -90° vale solo per i menu verticali. */
.menu__submenu .menu__sub-icon {
margin-left: auto;
margin-top: 0;
}
/* Il pulsante di apertura è un'aggiunta del tema, non c'è nell'originale:
lì i sottomenu si aprono solo al passaggio del mouse. Qui è una zona
sensibile trasparente sovrapposta al caret, così da tastiera e da touch il
sottomenu si raggiunge senza che si veda nulla di diverso. */
.menu__toggle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: block;
width: 21px; /* 7px di distacco + 14px di glifo */
height: auto;
padding: 0;
background: none;
border: 0;
color: inherit;
cursor: pointer;
}
.menu__submenu .menu__toggle {
right: 0;
width: 36px;
padding: 0;
}
/* Sottomenu. royal: `.wpr-nav-menu .wpr-sub-menu{position:absolute;
z-index:9999;width:180px;text-align:left;list-style:none;margin:0}` senza
top/left, quindi si apre esattamente sotto il link; l'apertura è in
dissolvenza (`div[class*="wpr-sub-menu-fx"] .wpr-mega-menu .wpr-sub-menu
{display:block;visibility:hidden;opacity:0;z-index:-1;
transition:all .2s ease-in}`).
post-9709: larghezza 222px, fondo #ffffff, bordo 1px #E8E8E8. */
.menu__submenu {
position: absolute;
top: 100%;
left: 0;
width: 222px;
margin: 0;
padding: 0;
list-style: none;
background-color: var(--ph-hf-white);
border: 1px solid var(--ph-hf-border);
text-align: left;
visibility: hidden;
opacity: 0;
z-index: -1;
transition: all 0.2s ease-in;
}
.menu__item:hover > .menu__submenu,
.menu__item:focus-within > .menu__submenu,
.menu__item.is-expanded > .menu__submenu {
visibility: visible;
opacity: 1;
z-index: 9999;
}
.menu__submenu > .menu__item {
display: block;
position: relative;
}
/* post-9709, wpr-sub-divider-yes: divisore fra le voci, non sotto l'ultima. */
.menu__submenu > .menu__item:not(:last-child) {
border-bottom: 1px solid var(--ph-hf-border);
}
/* Le voci di sottomenu NON sono maiuscole: la regola tipografica di
post-9709 elenca `.wpr-menu-item` e le voci mobili, non
`.wpr-sub-menu-item`. Di quest'ultima il sito dichiara solo il corpo
(15px), il colore e l'imbottitura 13px 15px; la famiglia la eredita dal
testo corrente (sul sito il font di sistema di hello-elementor, qui il
font di testo del tema).
royal: `.wpr-mega-menu a.wpr-sub-menu-item{display:flex;align-items:center}` */
.menu__submenu .menu__link {
display: flex;
align-items: center;
padding: 13px 15px;
font-family: inherit;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
text-transform: none;
color: var(--ph-hf-sub-link);
background-color: var(--ph-hf-white);
}
.menu__submenu .menu__item > .menu__link:hover,
.menu__submenu .menu__item.is-current > .menu__link,
.menu__submenu .menu__item > .menu__link:focus-visible {
color: var(--ph-hf-white);
background-color: var(--ph-hf-primary);
}
/* royal: il terzo livello si apre di lato
(`.wpr-nav-menu .wpr-sub-menu .wpr-sub-menu{top:0;left:100%}`). */
.menu__submenu .menu__submenu {
top: 0;
left: 100%;
}
}
/* Il caret: un triangolo pieno disegnato con i bordi, della misura del glifo
`caret-down` di Font Awesome 5 a 14px — 285,6/512 em di larghezza e
162,8/512 em di altezza, cioè 7,8×4,45px — appoggiato 2,5px sopra la linea
di base come fa il glifo. Nessun font da scaricare. */
.menu__sub-icon {
display: inline-block;
flex: 0 0 auto;
width: 0;
height: 0;
border-left: 3.9px solid transparent;
border-right: 3.9px solid transparent;
border-top: 4.45px solid currentColor;
border-bottom: 0;
transform: none;
transition: none;
}
/* main.css disegnava il caret come chevron dentro il pulsante: qui il glifo
sta nel link e il pulsante è solo la zona sensibile. */
.menu__chevron {
display: none;
}
/* royal usa 1221px come soglia "laptop": sotto quella misura il menu si allinea
a sinistra (`wpr-main-menu-align--laptopleft`). Il corpo del testo scende a
13px solo sotto 1024, dove però il menu desktop non c'è più. */
@media (min-width: 1025px) and (max-width: 1221px) {
.menu--primary {
text-align: left;
}
}
/* ==========================================================================
3. MENU MOBILE (≤1024px)
==========================================================================
royal: `wpr-nav-menu-bp-tablet` nasconde il menu desktop e mostra quello
mobile sotto i 1024px.
Qui il menu mobile NON replica il dropdown dell'originale: su richiesta del
cliente è un pannello a schermo intero, con la X di chiusura in alto a
destra, il loghino in alto a sinistra, le voci ad accordion (un solo ramo
aperto per volta, ci pensa app.js) e le icone social in fondo. L'hamburger
invece resta identico all'originale. */
.nav-toggle-wrap {
/* royal: `.wpr-mobile-toggle-wrap{font-size:0;line-height:0}`
post-9709: `text-align:center`, `right` sotto 767px */
text-align: center;
line-height: 0;
font-size: 0;
}
/* royal: `.wpr-mobile-toggle{display:inline-block;padding:7px;border-style:
solid;text-align:center}` — post-9709 azzera imbottitura e bordo e fissa la
larghezza a 33px. */
.nav-toggle {
order: 0;
display: inline-block;
width: 33px;
margin-left: 0;
padding: 0;
border: 0;
background: none;
cursor: pointer;
text-align: center;
}
.nav-toggle__bars {
display: block;
width: 33px;
}
/* post-9709: linee alte 3px, distanziate 5px, del colore primario.
royal: `.wpr-mobile-toggle-line{display:block;width:100%}`,
`:last-child{margin-bottom:0 !important}` e, per wpr-mobile-toggle-v2, la
seconda linea larga il 78% con 24% di rientro e la terza il 45% con 57%. */
.nav-toggle__bars span {
display: block;
width: 100%;
height: 3px;
margin-bottom: 5px;
background-color: var(--ph-hf-primary);
border-radius: 0;
transition: none;
}
.nav-toggle__bars span:nth-child(2) {
width: 78%;
margin-left: 24%;
}
.nav-toggle__bars span:nth-child(3) {
width: 45%;
margin-left: 57%;
margin-bottom: 0;
}
/* Sul sito l'hamburger non si trasforma in croce: la classe che il JS di
Royal aggiunge all'apertura (`wpr-mobile-toggle-fx`) non ha nessuna regola
in tutto il foglio del plugin. Qui si annulla la trasformazione di
main.css; lo stato aperto resta annunciato da `aria-expanded`. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1),
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2),
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
transform: none;
opacity: 1;
}
@media (max-width: 1024px) {
/* post-9709: `--padding:0px 20px` sulla testata sotto 1024, gap sempre 10px.
Il contenuto non è più limitato a 1350px: post-6.css porta
--container-max-width a 1024px, cioè sempre più della finestra.
`flex-wrap:nowrap` è deliberato: el-con dà `--flex-wrap:var(--flex-wrap-mobile)`
solo sotto i 767px, quindi fra 768 e 1024 la riga dell'originale NON va a
capo. Con `wrap` le tre colonne (18+66+16 = 100% più 20px di gap) non
starebbero su una riga e il bottone CTA finirebbe sotto al menu, cosa che sul
sito non succede: la terza colonna si limita a restringersi (--flex-shrink:1). */
.site-header__inner {
max-width: 100%;
flex-wrap: nowrap;
gap: var(--ph-hf-row-gap);
padding-block: 0;
padding-inline: 20px;
}
/* Sotto 1024 le colonne restano quelle del contenitore A: solo sotto 767
diventano 57% / 34%. */
.site-header__col--logo {
flex-basis: 18%;
}
.site-header__col--nav {
flex-basis: 66%;
/* Il pannello è fisso sulla finestra, non ancorato a questa colonna. */
position: static;
}
.site-header.is-stuck .site-header__col--logo {
flex-basis: 15%;
}
.site-header.is-stuck .site-header__col--nav {
flex-basis: 70%;
}
/* Il bottone CTA è nascosto solo sotto 767px (`elementor-hidden-mobile` sui
contenitori 42753bf0 e 01e9ed2): fra 768 e 1024 sul sito si vede, accanto
all'hamburger. */
.site-header__col--cta .site-header__cta {
display: inline-flex;
}
.nav-toggle-wrap {
display: block;
}
/* -----------------------------------------------------------------------
Il pannello a schermo intero.
Rifacimento voluto: l'originale aveva un dropdown appeso alla testata,
qui il menu occupa tutta la finestra e si apre in dissolvenza da 0.3s.
`visibility` al posto di `display`: la dissolvenza può avvenire e, da
chiuso, il pannello esce dal tab order e dall'albero accessibile senza
uscire dal DOM. `position:fixed` funziona perché nessun antenato ha
transform o filter (la testata sticky anima solo il colore di fondo). */
.site-header__col--nav .site-nav {
position: fixed;
inset: 0;
z-index: var(--ph-z-top, 9999);
display: flex;
flex-direction: column;
/* main.css centra il contenuto della colonna nav: qui la colonna è il
pannello intero e l'impilamento riparte dall'alto. */
align-items: stretch;
justify-content: flex-start;
width: auto;
margin: 0;
/* Bianco che chiude su un bianco appena violaceo: il pannello deve
sembrare parte del sito, non un foglio appoggiato sopra. */
background: linear-gradient(180deg, var(--ph-hf-white) 0%, #f6f6ff 100%);
visibility: hidden;
opacity: 0;
/* `visibility` cambia senza durata: in chiusura è ritardata di 0.3s così la
dissolvenza arriva in fondo prima che il pannello sparisca; in apertura
(sotto) scatta subito, perché il focus sulla X è dato nello stesso istante
del click e il browser rifiuta il focus su un elemento ancora hidden. */
transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.site-header__col--nav .site-nav.is-open {
visibility: visible;
opacity: 1;
transition: opacity 0.3s ease, visibility 0s;
}
/* A pannello aperto la pagina sotto non scorre: la classe la mette e la
toglie app.js insieme a `is-open`. */
html.nav-is-open,
html.nav-is-open body {
overflow: hidden;
}
/* I pulsanti flottanti (z-index 10000) e il torna-su (9999, ma dopo nel
DOM) starebbero sopra il pannello e coprirebbero voci e social: a
pannello aperto spariscono. */
html.nav-is-open .floating-contact,
html.nav-is-open .back-to-top {
visibility: hidden;
}
/* Barra del pannello: rientro orizzontale di 20px come la testata sotto i
1024px, così il loghino cade dove sta il logo della pagina. */
.site-nav__bar {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 20px;
border-bottom: 1px solid var(--ph-hf-border);
}
/* Il loghino: largo 140px, non la colonna intera come nella testata. */
.site-nav__logo {
flex: 0 0 auto;
width: 140px;
}
.site-nav__logo .site-logo {
display: block;
width: 100%;
}
/* La X: 44px di zona sensibile (il minimo comodo al tocco) con il glifo
disegnato da due barrette ruotate, nessuna icona da caricare. Il margine
negativo porta il glifo, non la zona sensibile, a filo del rientro. */
.site-nav__close {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-right: -11px;
padding: 0;
border: 0;
background: none;
color: var(--ph-hf-primary);
cursor: pointer;
}
.site-nav__close-icon {
position: relative;
display: block;
width: 22px;
height: 22px;
}
.site-nav__close-icon::before,
.site-nav__close-icon::after {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 0;
width: 100%;
height: 2px;
border-radius: 1px;
background-color: currentColor;
}
.site-nav__close-icon::before {
transform: rotate(45deg);
}
.site-nav__close-icon::after {
transform: rotate(-45deg);
}
/* L'elenco: l'unica parte del pannello che scorre, così barra e social
restano ferme anche con tutti i rami aperti. */
.menu--primary {
flex: 1 1 auto;
display: block;
margin: 0;
padding: 10px 20px 30px;
overflow-y: auto;
list-style: none;
text-align: left;
}
/* Ogni voce è una riga flessibile: il link e, per chi ha figli, il
pulsante accordion; il sottomenu va a capo a riga intera. Con
`align-items:stretch` il pulsante resta alto quanto la voce anche quando
il testo va a capo su due righe. */
.menu__item {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
border-bottom: 0;
}
.menu--primary > .menu__item {
border-bottom: 1px solid var(--ph-hf-border);
}
.menu--primary > .menu__item:last-child {
border-bottom: 0;
}
/* Voci di primo livello: Poppins maiuscolo nel viola del marchio. */
.menu__link {
flex: 1 1 auto;
min-width: 0;
position: relative;
display: flex;
align-items: center;
padding: 15px 0;
font-family: var(--ph-font-heading, "Poppins", sans-serif);
font-size: 16px;
font-weight: 600;
line-height: 1.4;
text-transform: uppercase;
color: var(--ph-hf-primary);
background: none;
}
/* Anche il selettore `:hover` sul `li`: main.css a queste misure dipinge la
voce di viola pieno quando il dito sfiora la riga, e va spento. */
.menu__item:hover > .menu__link,
.menu__item > .menu__link:hover,
.menu__item.is-current > .menu__link,
.menu__item > .menu__link:focus-visible {
color: var(--ph-primary-dark, #4e1f72);
background: none;
}
/* Il caret dentro il link serve al desktop: nel pannello il glifo sta sul
pulsante accordion, che qui è visibile e tappabile. */
.menu__item--has-children > .menu__link > .menu__sub-icon {
display: none;
}
/* Il pulsante accordion: colonna fissa a destra della voce, chevron
disegnato dai bordi del ::before che ruota di 180 gradi a ramo aperto. */
.menu__toggle {
position: static;
flex: 0 0 52px;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: auto;
padding: 0;
border: 0;
background: none;
color: var(--ph-hf-primary);
cursor: pointer;
transform: none;
}
.menu__toggle::before {
content: "";
display: block;
width: 9px;
height: 9px;
border-style: solid;
border-color: currentColor;
border-width: 0 2px 2px 0;
transform: translateY(-2px) rotate(45deg);
transition: transform 0.3s ease;
}
.menu__item.is-expanded > .menu__toggle::before {
transform: translateY(3px) rotate(225deg);
}
/* Il sottomenu ad accordion. Chiuso è `height:0` più `visibility:hidden`,
che lo toglie da tastiera e screen reader; `interpolate-size` permette la
transizione fino ad `auto` nei browser che la sanno fare, gli altri
aprono di colpo (il chevron ruota comunque). Un solo ramo aperto per
volta: ci pensa app.js chiudendo i fratelli. */
.menu__submenu {
flex: 0 0 100%;
display: block;
margin: 0;
padding: 0 0 0 14px;
list-style: none;
background: none;
interpolate-size: allow-keywords;
height: 0;
overflow: hidden;
visibility: hidden;
transition: height 0.3s ease, visibility 0.3s;
}
.menu__item.is-expanded > .menu__submenu {
height: auto;
visibility: visible;
}
/* Sotto-voci: tonde e basse, nel grigio del testo, viola su hover e sulla
voce corrente. Il terzo livello rientra di altri 14px grazie al padding
del suo `ul` annidato. */
.menu__submenu .menu__link {
padding: 10px 0;
font-family: var(--ph-font-body, "Montserrat", sans-serif);
font-size: 15px;
font-weight: 500;
text-transform: none;
color: var(--ph-hf-nav-link);
}
.menu__submenu .menu__item:hover > .menu__link,
.menu__submenu .menu__item > .menu__link:hover,
.menu__submenu .menu__item.is-current > .menu__link,
.menu__submenu .menu__item > .menu__link:focus-visible {
color: var(--ph-hf-primary);
background: none;
}
.menu__submenu .menu__toggle {
flex-basis: 44px;
width: 44px;
height: auto;
}
.menu__submenu .menu__item:last-child {
border-bottom: 0;
}
/* I social: le stesse icone del footer, ferme in fondo al pannello.
`env(safe-area-inset-bottom)` tiene la fila sopra la barra gestuale di
iOS. */
.site-nav__social {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
margin: 0;
padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--ph-hf-border);
list-style: none;
}
.site-nav__social-item {
display: block;
}
.site-nav__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: var(--ph-hf-primary);
fill: var(--ph-hf-primary);
transition: opacity 0.3s;
}
.site-nav__social-link:hover,
.site-nav__social-link:focus-visible {
opacity: 0.8;
}
.site-nav__social-icon {
display: block;
width: 26px;
height: 26px;
}
}
@media (max-width: 767px) {
/* el-con: sotto 767 i contenitori flex prendono `--flex-wrap:wrap`. */
.site-header__inner {
flex-wrap: wrap;
}
/* post-9709 @media(max-width:767px): il pulsante hamburger si allinea a
destra e le colonne diventano 57% / 34%. */
.nav-toggle-wrap {
text-align: right;
}
.site-header__col--logo,
.site-header.is-stuck .site-header__col--logo {
flex-basis: 57%;
}
.site-header__col--nav,
.site-header.is-stuck .site-header__col--nav {
flex-basis: 34%;
}
.site-header__col--cta {
display: none;
}
}
/* ==========================================================================
4. PIÈ DI PAGINA
==========================================================================
post-258.css. La struttura reale è:
#f82eb0b contenitore esterno (e-con-full), solo l'imbottitura di
default (10px)
└ #8ff34ad LA CARD (e-con-full): #F0F4F7, raggio 20px,
imbottitura 50px 10px 20px 10px
└ #e5c8ff2 colonna di contenuto (e-con-boxed):
--content-width:1600px da 768px, imbottitura 10px di
default, azzerata sotto 767px
├ #220c4a9 fascia CTA
├ #84837e0 divisore 1px #DAE1E6 con 2px di respiro sopra e sotto
├ #cff7234 cinque colonne
├ #ee77592 divisore
└ #080c474 barra legale
Fra una fascia e l'altra c'è il gap di default del kit, 20px
(post-6.css: --widgets-spacing:20px 20px). */
.site-footer {
padding: var(--ph-hf-pad);
background: none;
border-radius: 0;
}
.site-footer__card {
padding: 50px 10px 20px 10px;
background-color: var(--ph-hf-footer-bg);
border-radius: 20px;
}
/* Come per la testata: `max-width` conta i 10px laterali, così al contenuto
restano esattamente i 1600px dell'originale. */
.site-footer__inner {
display: flex;
flex-direction: column;
gap: var(--ph-hf-widget-gap);
width: 100%;
max-width: calc(var(--ph-hf-footer-max) + var(--ph-hf-pad) * 2);
margin-inline: auto;
padding: var(--ph-hf-pad);
}
@media (max-width: 767px) {
.site-footer__inner {
padding: 0;
}
}
/* Divisori: post-258.css elementi 84837e0 e ee77592 — 1px solido #DAE1E6,
largo il 100%, con `padding-block:2px` sul widget.
hello reset: `hr{box-sizing:content-box;height:0;overflow:visible}`. */
.footer-rule {
box-sizing: content-box;
height: 0;
margin: 0;
padding-block: 2px;
border: 0;
border-top: 1px solid var(--ph-hf-footer-rule);
}
/* Le celle delle tre fasce sono contenitori `.e-con-full` senza `--padding`
dichiarato, quindi tengono i 10px di default di el-con: nell'originale
ognuna rientra di 10px rispetto ai divisori, che invece sono widget appesi
direttamente alla colonna di contenuto. Fra due celle vicine lo spazio è
quindi 20px di gap più 10+10 di imbottitura.
`box-sizing:border-box` (hello reset) fa sì che le percentuali di larghezza
comprendano questi 10px, come sul sito. */
.footer-cta__title,
.footer-cta__actions,
.footer-brand,
.footer-col,
.footer-legal__copy,
.footer-legal__links,
.footer-social {
padding: var(--ph-hf-pad);
}
/* --- fascia CTA ---------------------------------------------------------- */
/* post-258 #220c4a9: riga, allineamento verticale al centro, imbottitura 0. */
.footer-cta {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--ph-hf-widget-gap);
padding: 0;
}
/* post-258 #f6cc7c6: 62.797% da 768px, 60% fra 768 e 1024, senza crescere né
restringersi. Sotto 767px el-con porta tutti i contenitori flex a
--width:100%, quindi il titolo va a riga intera. */
.footer-cta__title {
flex: 0 0 62.797%;
margin: 0;
font-family: var(--ph-font-heading, "Poppins", sans-serif);
/* post-258 #806f98a: doppio titolo a 50px, 34px sotto 767px */
font-size: var(--ph-cta-title, 50px);
line-height: 1.2; /* hello reset: h1…h6 */
color: var(--ph-hf-primary);
text-align: left; /* post-258: `.wpr-dual-heading-wrap{text-align:left}` */
}
/* royal: `.wpr-dual-title{margin:0 0 0 0}` e
`.wpr-dual-title .first,.wpr-dual-title .second{display:inline-block}`.
post-258: `.first` 300 corsivo con `margin-right:0`, `.second` 600, tutte e
due 50px nel colore primario. Fra i due `span` l'originale ha uno spazio
bianco nel markup: qui lo dà il `word-spacing` del testo, che i due span
ereditano. */
.footer-cta__title-light,
.footer-cta__title-strong {
display: inline-block;
}
.footer-cta__title-light {
margin-right: 0;
font-weight: 300;
font-style: italic;
}
.footer-cta__title-strong {
font-weight: 600;
}
/* post-258 #ee70420: `.wpr-button-wrap{max-width:170px}` con dentro
`.wpr-button{display:block;width:100%}` → il bottone è largo esattamente
170px, non quanto il suo testo, e il contenuto è centrato. */
.footer-cta__btn {
width: 170px;
max-width: 100%;
}
/* Il bottone: post-258 #ee70420, `.wpr-button-wrap{max-width:170px}`,
imbottitura 10px, allineato a destra (a sinistra sotto 767px). La colonna
che lo contiene non ha larghezza dichiarata, quindi prende il --width:100%
di default e si restringe su quello che resta. */
.footer-cta__actions {
flex: 0 1 100%;
min-width: 0;
text-align: right;
}
@media (max-width: 1024px) and (min-width: 768px) {
.footer-cta__title {
flex-basis: 60%;
}
}
@media (max-width: 767px) {
.footer-cta {
flex-wrap: wrap;
}
.footer-cta__title {
flex-basis: 100%;
}
.footer-cta__actions {
flex-basis: 100%;
text-align: left;
}
}
/* --- cinque colonne ------------------------------------------------------ */
/* post-258 #cff7234: riga, imbottitura 0, gap 20px di default, 0 sotto 1024,
a capo sotto 767. */
.footer-cols {
display: flex;
flex-direction: row;
gap: var(--ph-hf-widget-gap);
padding: 0;
}
/* #4f18940: 25% da 768px, senza crescere né restringersi. */
.footer-brand {
flex: 0 0 25%;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--ph-hf-widget-gap);
}
/* Le quattro colonne di link non hanno larghezza dichiarata: prendono il
--width:100% di default di `.e-con` con `flex:0 1 auto`, quindi si
restringono in parti uguali su quello che resta della riga. */
.footer-col {
flex: 0 1 100%;
min-width: 0;
}
@media (max-width: 1024px) {
.footer-cols {
gap: 0;
}
}
@media (max-width: 767px) {
.footer-cols {
flex-wrap: wrap;
gap: 0;
}
/* post-258: `#4f18940{--margin-bottom:20px}` sotto 767. */
.footer-brand {
flex-basis: 100%;
margin-bottom: 20px;
}
/* post-258: le quattro colonne passano a `--width:50%` (griglia 2×2) e le
due in basso prendono `--margin-top:20px`. */
.footer-col {
flex: 0 0 50%;
}
.footer-col:nth-of-type(3),
.footer-col:nth-of-type(4) {
margin-top: 20px;
}
}
/* post-258 #af3eca7: `text-align:start` e `img{width:76%}`. */
.site-footer__logo {
display: block;
text-align: start;
line-height: 0;
}
.site-footer__logo__img {
width: 76%;
height: auto;
}
/* post-258 #ec47868: Montserrat 14px 500 #777777. Sopra c'è il gap fra i due
widget della colonna, 20px, già sul contenitore. */
.footer-brand__tagline {
margin: 0;
font-family: var(--ph-font-body, "Montserrat", sans-serif);
font-size: 14px;
font-weight: 500;
color: var(--ph-hf-footer-muted);
}
/* post-258: titoli di colonna Poppins 20px 500 #242566, 16px sotto 1024.
elementor: `.elementor-heading-title{margin:0}`; lo spazio fino all'elenco è
il gap del contenitore, 20px (15px sotto 767). */
.footer-col__title {
margin: 0 0 var(--ph-hf-widget-gap);
font-family: var(--ph-font-heading, "Poppins", sans-serif);
font-size: var(--ph-footer-title, 20px);
font-weight: 500;
line-height: 1.2;
color: var(--ph-hf-footer-title);
}
@media (max-width: 1024px) {
.footer-col__title {
font-size: 16px;
}
}
@media (max-width: 767px) {
/* Sotto 767 le colonne dichiarano `--gap:15px 15px`. */
.footer-col__title {
margin-bottom: 15px;
}
}
/*
* Il titolo di colonna è cliccabile ma resta un titolo: il link non porta con sé
* nessuna delle sue misure — eredita carattere, corpo, peso e colore dall'h2 — e
* non si sottolinea.
*
* Col mouse il colore NON cambia, come nelle voci dell'elenco qui sotto: è il
* comportamento del piè di pagina originale, dove la regola del widget vince su
* `a:hover`. Il viola compare solo sul focus da tastiera, dove serve a dire dove
* si è arrivati.
*/
.footer-col__title-link {
font: inherit;
color: inherit;
text-decoration: none;
}
.footer-col__title-link:focus-visible {
color: var(--ph-hf-primary);
}
.footer-col__menu {
margin: 0;
padding: 0;
list-style: none;
}
/* post-258: `li:not(:last-child){margin-bottom:5px}` */
.footer-col__menu li:not(:last-child) {
margin-bottom: 5px;
}
/* post-258: Montserrat 15px, colore e fill #54595F, imbottitura 5px 0.
Sul sito il colore non cambia col mouse, perché la regola del widget è più
specifica di `a:hover`. Qui resta uguale, e il viola compare solo sul focus
da tastiera — che l'originale non ha e che col mouse non si vede. */
.footer-col__menu a {
display: block;
padding: 5px 0;
font-family: var(--ph-font-body, "Montserrat", sans-serif);
font-size: 15px;
font-weight: 400;
color: var(--ph-hf-footer-link);
fill: var(--ph-hf-footer-link);
}
.footer-col__menu a:hover {
color: var(--ph-hf-footer-link);
}
.footer-col__menu a:focus-visible {
color: var(--ph-hf-primary);
}
/* --- barra legale -------------------------------------------------------- */
/* post-258 #080c474: riga, centrata verticalmente, imbottitura 0, gap 20px
(0 sotto 767). Le tre celle non hanno larghezza dichiarata, quindi si
dividono la riga in parti uguali. */
.footer-legal {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--ph-hf-widget-gap);
padding: 0;
}
.footer-legal__copy,
.footer-legal__links,
.footer-social {
flex: 0 1 100%;
min-width: 0;
}
/* post-258 #6ae1592 e #75450d3: Poppins 14px 400 #777777, il primo allineato
all'inizio, il secondo al centro, entrambi centrati sotto 767px.
Il `margin-bottom:-14px` dell'originale serve solo a rientrare il margine
di default del `` di Elementor: qui il margine è già zero. */
.footer-legal__copy,
.footer-legal__links {
margin: 0;
font-family: var(--ph-font-heading, "Poppins", sans-serif);
font-size: 14px;
font-weight: 400;
color: var(--ph-hf-footer-muted);
}
.footer-legal__copy {
text-align: start;
}
.footer-legal__links {
text-align: center;
}
/* el-social + post-258 #c17a6d2: griglia in linea allineata a destra, 10px fra
le icone (0 fra le righe), riquadro 26px con imbottitura zero, raggio 4px,
fondo trasparente (#F4C73000), glifo del colore primario.
el-social: `.elementor-icon.elementor-social-icon{font-size:var(--icon-size);
height:calc(var(--icon-size) + 2*var(--icon-padding));width:idem}` con
--icon-size:26px e --icon-padding:0em, e `.elementor-icon svg{width:1em;
height:1em}` → riquadro e glifo tutti e due da 26px. */
.footer-social {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
margin: 0;
padding: var(--ph-hf-pad);
list-style: none;
}
.footer-social__item {
display: block;
}
.footer-social__link {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background-color: transparent;
border: 0;
border-radius: 4px;
color: var(--ph-hf-primary);
fill: var(--ph-hf-primary);
transition: all 0.3s;
}
/* el-social: `.elementor-social-icon:hover{opacity:.9}` — il colore non cambia. */
.footer-social__link:hover,
.footer-social__link:focus-visible {
color: var(--ph-hf-primary);
opacity: 0.9;
}
.footer-social__icon {
display: block;
width: 26px;
height: 26px;
}
@media (max-width: 767px) {
.footer-legal {
flex-wrap: wrap;
gap: 0;
}
.footer-legal__copy,
.footer-legal__links {
flex-basis: 100%;
text-align: center;
}
/* post-258: `#c17a6d2{text-align:center}` sotto 767 (e-grid-align-mobile-center). */
.footer-social {
flex-basis: 100%;
justify-content: center;
}
}
/* ==========================================================================
5. TORNA SU
==========================================================================
post-258.css #731ac2f, widget wpr-back-to-top, classi reali
wpr-stt-btn-align-fixed-left, wpr-stt-btn-align-fixed, wpr-stt-btn-icon-left:
royal `.wpr-stt-btn{border:none;cursor:pointer;font-size:16px;
line-height:1;text-align:center;padding:20px;max-width:5cm;
display:flex;align-items:center;justify-content:center;
box-shadow:0 0 10px 0 rgba(0,0,0,.25)}`
`.wpr-stt-btn-align-fixed .wpr-stt-btn{visibility:hidden;
position:fixed;z-index:9999}`
`.wpr-stt-btn-align-fixed-left .wpr-stt-btn{right:auto}`
post-258 left:0; bottom:0 (in basso a SINISTRA);
padding:14px 15px 15px 15px; border-radius:10px;
box-shadow:0 0 10px 0 rgba(0,0,0,0) → dichiarata e invisibile;
transition:all 0.3s ease-in-out 0s; icona e testo del colore
primario, icona 24px con 18px di distacco a destra; in hover
cambia solo l'icona, che va a #AA95DC; testo 12px sotto 767px.
Nessun fondo dichiarato: il pulsante è trasparente. */
.back-to-top {
position: fixed;
left: 0;
right: auto;
bottom: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
max-width: 5cm;
padding: 14px 15px 15px 15px;
border: 0;
border-radius: 10px;
background: none;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0);
color: var(--ph-hf-primary);
font-size: 16px;
line-height: 1;
text-align: center;
cursor: pointer;
transition: all 0.3s ease-in-out 0s;
}
.back-to-top[hidden] {
display: none;
}
/* post-258: `.wpr-stt-btn-icon-left .wpr-stt-icon{margin-right:18px}` e
`.wpr-stt-icon svg{width:24px;height:24px}` */
.back-to-top__icon {
width: 24px;
height: 24px;
margin-right: 18px;
color: var(--ph-hf-primary);
fill: var(--ph-hf-primary);
transition: all 0.3s ease-in-out 0s;
}
.back-to-top:hover .back-to-top__icon,
.back-to-top:focus-visible .back-to-top__icon {
color: var(--ph-primary-mid, #aa95dc);
fill: var(--ph-primary-mid, #aa95dc);
}
/* post-258: `.wpr-stt-content{color:var(--e-global-color-primary)}` */
.back-to-top__label {
color: var(--ph-hf-primary);
}
@media (max-width: 767px) {
.back-to-top__label {
font-size: 12px;
}
}
/* ==========================================================================
6. PULSANTI DI CONTATTO FLOTTANTI
==========================================================================
Widget Elementor "contact-buttons-var-10", template 1631. Nell'HTML il
contenitore porta `has-h-alignment-end has-v-alignment-bottom` e ogni link
`has-size-medium has-corners-rounded e-contact-buttons__contact-box-shadow`.
el-contact base: `.e-contact-buttons{position:fixed;z-index:10000;
display:flex;flex-direction:column;gap:20px;pointer-events:none;
width:var(--…-chat-box-width)}`, ma var-10 riporta la larghezza ad `auto`
(`.e-contact-buttons-var-10{width:auto}`), e la stessa regola vince anche
sul `width:90vw` che il foglio base dà sotto i 767px, perché var-10 è
caricato dopo. La colonna quindi è larga quanto il pulsante più largo.
has-h-alignment-end align-items:flex-end; justify-content:flex-end;
inset-inline-end:var(--…-horizontal-offset)
has-v-alignment-bottom bottom:var(--…-vertical-offset)
box-shadow 4px 4px 10px 0px rgba(0,0,0,.15)
post-1631: --…-vertical-offset:100px, --…-horizontal-offset:0 (da var-10),
--…-contact-button-bg:var(--e-global-color-primary) → #692A98,
--…-contact-button-icon:#FFFFFF, --…-contact-gap:7px,
imbottitura dell'etichetta 17px sopra, 14px sotto, 17px ai lati,
testo "Poppins" 14px 500.
var-10, per l'allineamento a destra: elenco in colonna allineato a destra,
link `display:flex;align-items:center` con `padding-inline-start:12px`,
angoli di sinistra da 20px e destri a zero, icona prima (order 1) e
etichetta dopo (order 2), e a riposo il link è traslato fuori a destra di
`calc(100% - svg-size*2 + margin-offset)` = `calc(100% - 40px)`, cioè
resta in vista solo l'icona; da 768px in su hover e focus lo riportano
dentro (`transform:none`) e l'etichetta compare. */
.floating-contact {
position: fixed;
inset-inline-end: 0;
bottom: 100px;
z-index: 10000;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
gap: 7px;
width: auto;
/* Il contenitore non intercetta il puntatore, i link sì: così la colonna
non copre la pagina che le sta sotto. */
pointer-events: none;
}
.floating-contact__link {
pointer-events: auto;
display: flex;
align-items: center;
padding-inline-start: 12px;
background-color: var(--ph-hf-primary);
border-start-start-radius: var(--ph-hf-contact-radius);
border-end-start-radius: var(--ph-hf-contact-radius);
border-start-end-radius: 0;
border-end-end-radius: 0;
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);
font-family: var(--ph-font-heading, "Poppins", sans-serif);
font-size: 14px;
font-weight: 500;
color: var(--ph-hf-white);
transform: translateX(
calc(100% - var(--ph-hf-contact-svg) * 2 + var(--ph-hf-contact-offset))
);
transition: all 0.3s;
}
/* el-contact: hover e focus non cambiano fondo né colore, solo la posizione. */
.floating-contact__link:hover,
.floating-contact__link:focus-visible {
background-color: var(--ph-hf-primary);
color: var(--ph-hf-white);
}
@media (min-width: 768px) {
.floating-contact__link:hover {
transform: none;
transition: all 0.3s;
}
}
/* Aggiunta: sul sito il focus da tastiera rivela l'etichetta solo da 768px in
su, come l'hover. Sotto quella misura chi naviga da tastiera resterebbe con
la sola icona; qui l'etichetta compare a ogni larghezza. Niente cambia a
riposo. */
.floating-contact__link:focus-visible {
transform: none;
}
/* var-10: `.has-h-alignment-end .e-contact-buttons__contact-icon-container
{order:1}` e `… .e-contact-buttons__contact-title{order:2}` — nel DOM
l'etichetta viene prima, sullo schermo l'icona. */
.floating-contact__icon {
order: 1;
flex: 0 0 auto;
width: var(--ph-hf-contact-svg);
height: var(--ph-hf-contact-svg);
fill: currentColor;
}
.floating-contact__text {
order: 2;
display: inline-block;
padding: 17px 17px 14px 17px;
white-space: nowrap;
}
/* --- la corsia che i due pulsanti occupano sui piccoli schermi ------------
A riposo il link è traslato fuori a destra e in vista resta soltanto la
parte larga `svg-size * 2 - margin-offset`, cioè 40px, incollata al bordo
della finestra. Su uno schermo da 390px la gabbia del sito arriva a x=370
e la pillola comincia a x=350: le ultime lettere di ogni riga di testo che
arriva al bordo della colonna finiscono sotto il viola. Misurato sulla
pagina Allineamento Spirituale: «…capacità innate», «…della capacità
respiratoria» — 20px di sovrapposizione, due o tre caratteri.
I pulsanti non si possono nascondere: sotto i 768px il bottone di contatto
della testata sparisce e questi restano l'unica via di contatto sempre in
vista (vedi template-parts/floating-contact.php). Quindi è il contenuto che
fa spazio: 24px di imbottitura a destra su tutto il corpo della pagina —
quattro più dei 40 della pillola contando i 20 di gabbia che il contenuto
ha già — applicati una volta sola su `main`, così valgono per ogni
contenitore che ci sta dentro senza doverli inseguire foglio per foglio.
Testata e piè di pagina restano fuori: nella loro riga non c'è testo che
arrivi al bordo.
`pointer-events` era già a posto: la colonna non intercetta il puntatore e
solo i due link lo fanno, quindi il tocco sul testo sotto funzionava già.
Qui cambia solo che il testo non ci finisce più sotto. */
@media (max-width: 767px) {
.site-main {
padding-inline-end: 24px;
}
}
/* ==========================================================================
7. Movimento ridotto
==========================================================================
Aggiunta del tema, non sostituzione: nessuno stato a riposo cambia, quindi
la resa della pagina resta identica. */
@media (prefers-reduced-motion: reduce) {
.site-header,
.menu--primary > .menu__item > .menu__link,
.menu__submenu,
.site-header__col--nav .site-nav,
.menu__toggle::before,
.site-nav__social-link,
.footer-social__link,
.floating-contact__link,
.back-to-top,
.back-to-top__icon {
transition: none;
}
}