/* ==========================================================================
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));
/* Il pannello del menu mobile: post-9709
`.wpr-mobile-menu-display-dropdown .wpr-mobile-nav-menu{margin-top:…}` */
--ph-hf-mobile-offset: 35px;
/* 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 e il
pannello del menu mobile, che si posiziona su di lei, arriva ai bordi
della finestra come fa la `fullWidthMobileDropdown()` di royal. */
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;
}
/* 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. Il pannello è a tendina
(`.wpr-mobile-menu-display-dropdown .wpr-mobile-mega-menu-wrap{display:none;
position:absolute;z-index:9999}`) e a larghezza piena
(`.wpr-mobile-menu-full-width .wpr-mobile-mega-menu-wrap{width:100vw}`, più
la `fullWidthMobileDropdown()` del JS di Royal che gli dà un `left` negativo
fino al bordo sinistro della finestra).
Qui il pannello è posizionato sulla testata invece che sul contenitore del
menu: la testata occupa già tutta la larghezza della finestra, quindi
`left:0; right:0` fa esattamente quello che sul sito fa il JS, senza `100vw`
(che conterebbe anche la barra di scorrimento e farebbe traboccare la
pagina). */
.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 si posiziona sulla testata, non su 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. L'offset verticale dell'originale è misurato dal fondo
dell'hamburger: `margin-top` 10px di base, 35px sotto 1024 e 37px sotto
767. L'hamburger è alto 19px (3+5+3+5+3) ed è centrato verticalmente
nella colonna, che è stirata su tutta la riga; sotto 1024 la testata non
ha imbottitura verticale, quindi il suo centro coincide col centro
dell'hamburger: `top:50%` più mezzo hamburger dà il suo bordo inferiore,
ed è da lì che partono i 35px. */
.site-header__col--nav .site-nav {
position: absolute;
top: calc(50% + 9.5px);
left: 0;
right: 0;
width: auto;
margin-top: var(--ph-hf-mobile-offset);
display: none;
z-index: 9999;
}
.site-header__col--nav .site-nav.is-open {
display: block;
}
/* royal: `.wpr-mobile-nav-menu{padding:0;margin:0;list-style:none;
font-size:0}` e `.wpr-mobile-nav-menu li{margin:0}`. Nessuna classe
`wpr-mobile-menu-item-align-*` sul widget: l'allineamento resta a sinistra
e le voci non hanno rientri. */
.menu--primary {
display: block;
margin: 0;
padding: 0;
font-size: 0;
list-style: none;
text-align: left;
}
.menu__item {
position: relative;
/* `wpr-mobile-divider-yes` non è fra le classi del widget: sul sito le
voci del menu mobile non hanno divisori. */
border-bottom: 0;
}
/* royal: `.wpr-mobile-menu-item{position:relative;display:block}` e, per il
mega menu, `.wpr-mobile-mega-menu .wpr-mobile-menu-item{display:flex;
align-items:center}`.
post-9709: fondo bianco sul `li`, Poppins 500 13px maiuscolo #333333,
imbottitura 14px 22px; hover e voce attiva bianco su viola. */
.menu__link {
position: relative;
display: flex;
align-items: center;
padding: 14px 22px;
font-family: var(--ph-font-heading, "Poppins", sans-serif);
font-size: 13px;
font-weight: 500;
line-height: 1.4;
text-transform: uppercase;
color: var(--ph-hf-sub-link);
background-color: var(--ph-hf-white);
}
.menu__item > .menu__link:hover,
.menu__item.is-current > .menu__link,
.menu__item > .menu__link:focus-visible {
color: var(--ph-hf-white);
background-color: var(--ph-hf-primary);
}
/* royal: `.wpr-mobile-mega-menu > li > a > .wpr-mobile-sub-icon{display:flex;
align-items:flex-end;position:absolute;right:0}` — senza `top`, quindi la
posizione statica in un link flex `align-items:center` lo centra.
post-9709: imbottitura 22px, glifo 14px. */
.menu__item--has-children > .menu__link > .menu__sub-icon {
position: absolute;
top: 50%;
right: 22px;
margin: 0;
transform: translateY(-50%);
}
/* Il pulsante di apertura, aggiunta del tema: zona sensibile trasparente
sopra il caret, larga quanto il caret più le sue imbottiture di 22px.
L'altezza è quella della voce — imbottitura 14px sopra e sotto più una
riga di testo da 13px con interlinea 1,4 — e non `bottom:0`, che sotto la
voce coprirebbe anche il sottomenu aperto. */
.menu__toggle {
position: absolute;
top: 0;
right: 0;
bottom: auto;
display: block;
width: 52px; /* 22px + 7,8px di glifo + 22px */
height: calc(14px * 2 + 13px * 1.4);
padding: 0;
background: none;
border: 0;
color: inherit;
cursor: pointer;
transform: none;
}
/* royal: `.wpr-mobile-sub-menu{display:none}` */
.menu__submenu {
display: none;
margin: 0;
padding: 0;
list-style: none;
background-color: var(--ph-hf-white);
}
.menu__item.is-expanded > .menu__submenu {
display: block;
}
/* post-9709: sotto-voci a 13px con imbottitura 5px 10px. Sono maiuscole come
le voci di primo livello: la regola tipografica del widget elenca anche
`.wpr-mobile-sub-menu-item`. */
.menu__submenu .menu__link {
padding: 5px 10px;
font-size: 13px;
text-transform: uppercase;
}
/* Nei livelli interni il caret di royal non è in posizione assoluta ma
spinto in fondo al link (`margin-left:auto`). */
.menu__submenu .menu__item--has-children > .menu__link > .menu__sub-icon {
position: static;
margin-left: auto;
transform: none;
}
.menu__submenu .menu__toggle {
width: 40px;
height: calc(5px * 2 + 13px * 1.4);
}
.menu__submenu .menu__item:last-child {
border-bottom: 0;
}
/* Aggiunta, non sostituzione: il pannello dell'originale è in posizione
assoluta e, con dieci voci e i sottomenu aperti, supera lo schermo senza
che se ne possa raggiungere il fondo. Lo scorrimento interno non cambia
nulla di ciò che si vede a riposo. */
.site-nav.is-open .menu--primary {
max-height: calc(100vh - 120px);
overflow-y: auto;
}
}
@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, le colonne diventano 57% / 34% e il pannello scende di 37px. */
.nav-toggle-wrap {
text-align: right;
}
:root {
--ph-hf-mobile-offset: 37px;
}
.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;
}
}
.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;
}
/* ==========================================================================
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,
.footer-social__link,
.floating-contact__link,
.back-to-top,
.back-to-top__icon {
transition: none;
}
}