/* Theme Name: Hello Elementor Child Author: Gruppo Formiche Description: Child theme di Hello Elementor — progetto MLMAX / Marco Lucacci. Template: hello-elementor Version: 2.1.0 Text Domain: hello-elementor-child */ /* ========================================================================== MLMAX — style.css del child theme Ricostruzione del design MLMAX (Claude Design) in WordPress + Elementor. REGOLE DEL FILE - Sezioni numerate. Le correzioni a una sezione esistente si scrivono IN CODA come "N-bis", "N-ter": non si riscrive la sezione originale. - I colori e la tipografia arrivano SEMPRE dai globali del kit (--e-global-color-*, --e-global-typography-*). Nessun hex a mano dove esiste il globale. I soli valori letterali ammessi sono gli rgba (i Global Colors di Elementor non rappresentano l'alfa). - Le classi di progetto hanno tutte prefisso "mlmax-". - Gli hook JS sono le classi mlmax-* e gli attributi data-mlmax-*. - !important solo contro CSS di terze parti irraggiungibile, sempre commentato con il perché. INDICE 01 Token (:root) 25 Subnav ancore 02 Base 26 Lista con check 03 Reset widget Elementor 27 Riga a 3 colonne 04 Skip link 28 Timeline verticale 05 Container & section 29 Il libro 06 Tipografia (classi ruolo) 30 Processo numerato 07 Link animato 31 Staff 08 Bottoni 32 Teaser 09 Header 33 Servizi 10 Menu mobile 34 FAQ 11 Preloader 35 Sedi 12 Transizione pagina 36 Form contatti 13 Cursore custom 37 Fasce di prezzo 14 Hero home 38 Tabella comparativa 15 Promessa 39 MLMAX Class 16 Metodo anteprima 40 News: filtri e griglia 17 Chi è Marco 41 Articolo news 18 Percorsi (scroll orizzontale) 42 Listini palestre 19 Risultati / contatori 43 Galleria + lightbox 20 Recensioni 44 Utility spaziature 21 News (card) 45 Link inline 22 CTA finale 46 Pagina 404 23 Footer 47 Carosello foto 24 Hero interno 48+ Adattamenti Elementor ========================================================================== */ /* === 01. TOKEN (:root) ==================================================== Ogni token di colore e di font punta al globale del kit: cambiando il globale in Elementor cambia tutto il sito, senza toccare questo file. Global Colors del kit (ID 6): primary MLMAX / Accent #FFB33F secondary MLMAX / Surface #0D0D0F text MLMAX / Text #FFFFFF accent MLMAX / Text Secondary #C5C5CB f33d374c MLMAX / Surface Alt #18181B 8a8024fa MLMAX / Surface Raised #1F1F23 0cc5fc74 MLMAX / Surface Sunken #070708 2461d7b2 MLMAX / Accent Hover #FFC266 65e794db MLMAX / Text Muted #9C9CA4 719a03ba MLMAX / On Accent #0D0D0F a479324d MLMAX / Border #2E2E34 d3e3ad89 MLMAX / Border Strong #3D3D45 60f6f2e8 MLMAX / Error #FF6A5E cf2bee43 MLMAX / Success #5FE19B Global Typography del kit: primary MLMAX / Display 2 206e8227 MLMAX / Hero secondary MLMAX / H3 9c262c48 MLMAX / Display 1 text MLMAX / Body b51b4674 MLMAX / Display 3 accent MLMAX / Button d395c392 MLMAX / H2 cfa4b4cb MLMAX / Lead 1da75224 MLMAX / Nav 3e7a832e MLMAX / Meta 3db51721 MLMAX / Eyebrow cb64c410 MLMAX / Micro PERCHE' "body" E NON ":root": Elementor dichiara le variabili --e-global-* sulla classe .elementor-kit-6, che sta sul . Su :root quelle variabili NON esistono: un token scritto li' come var(--e-global-...) vale "guaranteed invalid", si eredita come stringa vuota e fa saltare l'INTERA dichiarazione che lo usa (il font shorthand compreso). Risultato osservato in pagina prima della correzione: tutto il sito in Times 16px. I token stanno quindi sullo stesso elemento che porta le variabili globali. Non riportare questo blocco su :root. ========================================================================== */ body{ /* --- Colori: dai Global Colors --- */ --color-surface:var(--e-global-color-secondary); --color-surface-alt:var(--e-global-color-f33d374c); --color-surface-raised:var(--e-global-color-8a8024fa); --color-surface-sunken:var(--e-global-color-0cc5fc74); --color-accent:var(--e-global-color-primary); --color-accent-hover:var(--e-global-color-2461d7b2); --color-text:var(--e-global-color-text); --color-text-secondary:var(--e-global-color-accent); --color-text-muted:var(--e-global-color-65e794db); --color-on-accent:var(--e-global-color-719a03ba); --color-border:var(--e-global-color-a479324d); --color-border-strong:var(--e-global-color-d3e3ad89); --color-error:var(--e-global-color-60f6f2e8); --color-success:var(--e-global-color-cf2bee43); /* --- Colori con alfa: non rappresentabili come Global Color --- */ --color-hairline:rgba(255,255,255,.08); --color-white-04:rgba(255,255,255,.04); --color-white-12:rgba(255,255,255,.12); --color-amber-16:rgba(255,179,63,.16); /* --- Font: dai Global Fonts --- */ --font-display:var(--e-global-typography-primary-font-family),'Helvetica Neue',sans-serif; --font-body:var(--e-global-typography-text-font-family),'Helvetica Neue',sans-serif; --font-data:var(--e-global-typography-accent-font-family),'Helvetica Neue',sans-serif; /* --- Scala tipografica: dai Global Fonts (ancore DS 52/70/96px) --- */ --fs-hero:var(--e-global-typography-206e8227-font-size); --fs-display-1:var(--e-global-typography-9c262c48-font-size); --fs-display-2:var(--e-global-typography-primary-font-size); --fs-display-3:var(--e-global-typography-b51b4674-font-size); --fs-h2:var(--e-global-typography-d395c392-font-size); --fs-h3:var(--e-global-typography-secondary-font-size); --fs-lead:var(--e-global-typography-cfa4b4cb-font-size); --fs-body:var(--e-global-typography-text-font-size); --fs-nav:var(--e-global-typography-1da75224-font-size); --fs-meta:var(--e-global-typography-3e7a832e-font-size); --fs-eyebrow:var(--e-global-typography-3db51721-font-size); --fs-body-s:var(--e-global-typography-45c795c1-font-size); --fs-micro:var(--e-global-typography-cb64c410-font-size); --lh-tight:.94; --lh-heading:1.06; --lh-body:1.6; --ls-display:-0.01em; --ls-eyebrow:.14em; --ls-button:.06em; /* --- Spazio: scala fluida in rem --------------------------------------- Ogni passo e' un clamp con lo stesso metodo: il valore di oggi resta il MASSIMO, il minimo e' il 65% arrotondato a mezzo pixel, e la crescita e' lineare fra 375px e 1440px. Sopra i 1440 e sotto i 375 il valore si ferma. Cosi' sul desktop il sito e' identico a prima e sul telefono si stringe. --space-1 resta fisso: 4px sono gia' il minimo utile, un clamp lo porterebbe a 2,6px e produrrebbe solo arrotondamenti a mezzo pixel. Le unita' sono rem, mai px: il passo segue la dimensione di base scelta dall'utente nel browser. */ --space-1:.25rem; --space-2:clamp(0.3125rem,0.2465rem + 0.2817vw,0.5rem); --space-3:clamp(0.5rem,0.412rem + 0.3756vw,0.75rem); --space-4:clamp(0.6562rem,0.5352rem + 0.5164vw,1rem); --space-5:clamp(0.8125rem,0.6585rem + 0.6573vw,1.25rem); --space-6:clamp(0.9688rem,0.7817rem + 0.7981vw,1.5rem); --space-8:clamp(1.312rem,1.07rem + 1.033vw,2rem); --space-9:clamp(1.469rem,1.194rem + 1.174vw,2.25rem); --space-10:clamp(1.625rem,1.317rem + 1.315vw,2.5rem); --space-12:clamp(1.938rem,1.563rem + 1.596vw,3rem); --space-16:clamp(2.594rem,2.099rem + 2.113vw,4rem); --space-20:clamp(3.25rem,2.634rem + 2.629vw,5rem); --space-24:clamp(3.906rem,3.169rem + 3.146vw,6rem); --space-32:clamp(5.188rem,4.197rem + 4.225vw,8rem); --space-40:clamp(6.5rem,5.268rem + 5.258vw,10rem); /* Questi due erano gia' clamp e restano scritti com'erano. Ora i loro estremi sono a loro volta fluidi, quindi il ritmo verticale scala. */ --section-y:clamp(var(--space-16),4rem + 4vw,var(--space-24)); --section-y-lg:clamp(var(--space-20),5rem + 5vw,var(--space-32)); --gutter:clamp(1.25rem,4vw,4.5rem); /* Distanza dal bordo alto per i blocchi che passano sotto l'header fisso. Il minimo non scende sotto i 104px perche' l'header e' alto 96px e il contenuto ci finirebbe sotto. */ --space-hero-top:clamp(6.5rem,5.708rem + 3.38vw,8.75rem); --space-phero-top:clamp(7.5rem,6.18rem + 5.634vw,11.25rem); --space-menu-top:clamp(6.5rem,6.148rem + 1.502vw,7.5rem); --max-content:100%; --max-prose:68ch; /* --- Superfici --- */ --radius-xs:2px; --radius-sm:4px; --radius-md:8px; --radius-pill:999px; --rule-accent:3px; --shadow-md:0 1px 0 rgba(255,255,255,.08),0 12px 28px -8px rgba(0,0,0,.7); --scrim-bottom:linear-gradient(to top,rgba(7,7,8,.95) 0%,rgba(7,7,8,.7) 35%,rgba(7,7,8,0) 80%); --texture-grid:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); /* --- Motion: meccanico, nessun bounce --- */ --dur-instant:80ms; --dur-fast:140ms; --dur-base:220ms; --dur-slow:400ms; --ease-standard:cubic-bezier(.2,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-mechanical:cubic-bezier(.7,0,.3,1); } /* === 02. BASE ============================================================= Fondo e colore del testo del body NON stanno qui: sono impostati nel kit (Impostazioni sito → Sfondo / Tipografia). Qui solo ciò che il kit non copre. Niente scroll-behavior:smooth — confligge con Lenis. ========================================================================== */ html{-webkit-text-size-adjust:100%;} body{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;} img{max-width:100%;height:auto;display:block;} ::selection{background:var(--color-accent);color:var(--color-on-accent);} :focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:var(--radius-xs);} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;} } /* === 03. RESET WIDGET ELEMENTOR =========================================== Perché i widget ereditino dal container che porta la classe di progetto, invece di imporre il proprio font/colore/margine. Gli !important qui sono contro il CSS di Elementor e di Hello Elementor, che vestono direttamente il nodo interno del widget. ========================================================================== */ /* Il titolo del widget Heading non deve portare margini propri. NOTA: qui c'era anche font:inherit!important, che faceva ereditare tutto dal wrapper classificato. E' stato tolto quando tipografia e colore sono passati al pannello Stile di Elementor: un !important sul nodo interno batteva le regole per-widget generate da Elementor e le rendeva inutili. I pochi titoli che devono ancora ereditare sono elencati nella 03-bis. */ .elementor-widget-heading .elementor-heading-title{margin:0;} /* Text Editor: niente margine sull'ultimo paragrafo, eredita il testo. */ .elementor-widget-text-editor{color:inherit;} .elementor-widget-text-editor p:last-child{margin-bottom:0;} /* Icon List: la lista di Elementor porta padding e bullet propri. */ .elementor-widget-icon-list .elementor-icon-list-items{padding:0;margin:0;list-style:none;} .elementor-widget-icon-list .elementor-icon-list-item{margin:0;} /* Il wrapper del contenuto del bottone è flex senza align-items: con un'icona più alta del testo, il testo si appoggia in alto. */ .elementor-button-content-wrapper{align-items:center;} /* Clearfix di terze parti prima di flex/grid: altrimenti gli pseudo diventano celle di griglia. */ .mlmax-container::before,.mlmax-container::after{content:none;} /* min-width:auto nelle griglie: va spento su tutta la catena dei container. */ /* L'immagine dentro il widget Image non deve essere ristretta dal wrapper. */ .elementor-widget-image .elementor-widget-container{line-height:0;} .elementor-widget-image img{width:100%;} /* === 04. SKIP LINK === */ .mlmax-skip{position:fixed;top:var(--space-3);left:var(--space-3);z-index:200;padding:var(--space-3) var(--space-4);background:var(--color-accent);font:700 var(--fs-meta)/1 var(--font-data);letter-spacing:var(--ls-button);text-transform:uppercase;text-decoration:none;border-radius:var(--radius-xs);transform:translateY(-200%);transition:transform var(--dur-fast) var(--ease-standard);} .mlmax-skip:focus-visible{transform:translateY(0);color:var(--color-on-accent);} /* === 05. LAYOUT: CONTAINER & SECTION === Elementor: container esterno full-width → .container interno (boxed) */ .mlmax-container{width:100%;max-width:var(--max-content);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter);} .mlmax-section{padding-top:var(--section-y);padding-bottom:var(--section-y);} .mlmax-section--lg{padding-top:var(--section-y-lg);padding-bottom:var(--section-y-lg);} .mlmax-section--alt{background:var(--color-surface-alt);} .mlmax-section--hairline{border-top:1px solid var(--color-hairline);} /* === 06. TIPOGRAFIA (classi ruolo) === */ .mlmax-display-2{margin:0;} .mlmax-display-3{margin:0;} .mlmax-h3{margin:0;} .mlmax-lead{margin:0;text-wrap:pretty;} .mlmax-body{margin:0;text-wrap:pretty;} .mlmax-eyebrow{display:flex;align-items:center;gap:var(--space-3);margin:0;} .mlmax-eyebrow::before{content:"";width:28px;height:2px;background:var(--color-accent);flex:none;} .mlmax-accent{color:var(--color-accent);} /* === 07. LINK ANIMATO (underline) === */ .mlmax-link{display:inline-flex;gap:var(--space-2);font:700 var(--fs-meta)/1 var(--font-data);letter-spacing:var(--ls-button);text-transform:uppercase;text-decoration:none;padding-bottom:var(--space-1);background-image:linear-gradient(var(--color-accent),var(--color-accent));background-repeat:no-repeat;background-size:100% 2px;background-position:0 100%;transition:color var(--dur-fast) var(--ease-standard),background-size var(--dur-base) var(--ease-mechanical);} .mlmax-link:hover{background-size:32% 2px;} .mlmax-link__icon{width:14px;height:14px;transition:transform var(--dur-base) var(--ease-mechanical);} .mlmax-link:hover .mlmax-link__icon{transform:translateX(4px);} /* === 08. BOTTONI (widget Button) — rollover a inversione con linea di riempimento: un layer di colore entra da sinistra con bordo netto (background-size), fluido === */ .mlmax-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-6);border:1px solid transparent;border-radius:var(--radius-xs);text-decoration:none;cursor:pointer;background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;transition:background-size var(--dur-slow) var(--ease-mechanical),background-color var(--dur-fast) var(--ease-standard),color var(--dur-slow) var(--ease-mechanical),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-standard);} .mlmax-btn:active{transform:translateY(1px);} /* Doppia classe: il kit di Elementor colora ogni link con .elementor-kit-6 a (0,1,1). Un pulsante scritto nel testo di un articolo e' un , quindi senza (0,2,0) qui il testo restava ambra su fondo ambra. */ .mlmax-btn.mlmax-btn--primary{background-color:var(--color-accent);background-image:linear-gradient(var(--color-surface),var(--color-surface));border-color:var(--color-accent);color:var(--color-on-accent);} .mlmax-btn.mlmax-btn--primary:hover{background-size:100% 100%;color:var(--color-accent);border-color:var(--color-accent);} .mlmax-btn.mlmax-btn--outline{background-color:transparent;background-image:linear-gradient(var(--color-text),var(--color-text));border-color:var(--color-text);color:var(--color-text);} .mlmax-btn.mlmax-btn--outline:hover{background-size:100% 100%;color:var(--color-surface);border-color:var(--color-text);} .mlmax-btn.mlmax-btn--on-accent{border-color:var(--color-on-accent);color:var(--color-on-accent);} .mlmax-btn.mlmax-btn--inverse{background-color:var(--color-surface);background-image:linear-gradient(var(--color-text),var(--color-text));border-color:var(--color-surface);color:var(--color-text);} .mlmax-btn.mlmax-btn--inverse:hover{background-size:100% 100%;color:var(--color-surface);border-color:var(--color-text);} .mlmax-btn--lg{min-height:56px;padding:0 var(--space-8);} /* === 09. HEADER (Theme Builder: template unico) === */ .mlmax-header{position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid transparent;transition:background-color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);} .mlmax-header.is-scrolled{background:rgba(13,13,15,.82);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);border-bottom-color:var(--color-hairline);} .mlmax-header__inner{height:96px;transition:height var(--dur-base) var(--ease-standard);} .mlmax-header.is-scrolled .mlmax-header__inner{height:60px;} .mlmax-logo__img{height:64px;width:auto;transition:height var(--dur-base) var(--ease-standard);} .mlmax-header.is-scrolled .mlmax-logo__img{height:34px;} .mlmax-nav{display:none;} @media (min-width:1025px){ .mlmax-nav{display:flex;align-items:center;gap:var(--space-8);} } /* === 10. MENU MOBILE (fullscreen) === Il pannello non e' piu' un
del sorgente: e' il widget Off-Canvas di Elementor (sezione 72). Posizione, dimensioni, apertura, chiusura e blocco dello scroll li mette il widget; qui resta solo il filetto in cima al blocco dei contatti, che e' un valore del design system. */ .mlmax-menu__foot{gap:var(--space-3);border-top:1px solid var(--color-hairline);padding:var(--space-6) 0 0;} /* === 11. PRELOADER (solo home; mostrato via JS, invisibile senza JS) === */ .mlmax-preloader{position:fixed;inset:0;z-index:300;background:var(--color-surface-sunken);display:none;padding:var(--space-10) var(--gutter);} .js-enabled .mlmax-preloader{display:flex;} /* === 12. TRANSIZIONE PAGINA (overlay; gestito da JS) === */ .mlmax-transition{position:fixed;inset:0;z-index:250;background:var(--color-surface-sunken);transform:scaleY(0);transform-origin:top;pointer-events:none;} /* === 13. CURSORE CUSTOM === (le regole vive stanno nella sezione 74) */ /* === 14. HERO (home) — full-bleed: in Elementor = immagine di sfondo del container + overlay === */ .mlmax-hero{position:relative;min-height:100svh;padding-top:var(--space-hero-top);padding-bottom:var(--space-8);overflow:hidden;background:var(--color-surface-sunken);} .mlmax-hero__bg{position:absolute;inset:0;} .mlmax-hero__bg-img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.08);} .mlmax-hero__bg-scrim{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(7,7,8,.72) 0%,rgba(7,7,8,0) 30%),linear-gradient(to right,rgba(7,7,8,.9) 0%,rgba(7,7,8,.5) 55%,rgba(7,7,8,.25) 100%),linear-gradient(to top,rgba(7,7,8,.95) 0%,rgba(7,7,8,0) 45%);pointer-events:none;} .mlmax-hero__content{position:relative;gap:var(--space-8);} .mlmax-hero__crown{width:28px;height:26px;} .mlmax-hero__title{margin:0 0 0 -.04em;max-width:none;} .mlmax-hero__foot{gap:var(--space-4);border-top:1px solid var(--color-white-12);padding-top:var(--space-4);margin-top:var(--space-4);} /* === 15. PROMESSA (01) === */ .mlmax-promise__head{align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-10);} .mlmax-promise__col{gap:var(--space-4);border-top:1px solid var(--color-hairline);padding-top:var(--space-4);} @media (min-width:768px){ .mlmax-promise__col{flex:1;} } /* === 16. METODO ANTEPRIMA (02) === */ .mlmax-method__head{gap:var(--space-4);margin-bottom:var(--space-12);}.mlmax-method__steps{counter-reset:none;} .mlmax-step{gap:var(--space-3);border-top:1px solid var(--color-hairline);padding-top:var(--space-5);transition:border-color var(--dur-base) var(--ease-standard);} .mlmax-step:hover{border-top-color:var(--color-accent);} .mlmax-step__title{margin:0;} .mlmax-step__text{margin:0;} /* === 17. CHI È MARCO (03) === */ .mlmax-about{background:var(--color-surface-alt);} .mlmax-about__media{position:relative;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:3/4;} .mlmax-about__img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.08);} .mlmax-about__caption{position:absolute;left:var(--space-4);bottom:var(--space-4);right:var(--space-4);} .mlmax-about__scrim{position:absolute;inset:0;background:var(--scrim-bottom);pointer-events:none;} .mlmax-about__titles{gap:var(--space-2);border-top:1px solid var(--color-hairline);padding-top:var(--space-4);} .mlmax-about__titles-row{gap:var(--space-4);font:600 var(--fs-meta)/1.5 var(--font-data);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);} /* === 18. PERCORSI — SCROLL ORIZZONTALE (04) === */ .mlmax-hscroll__track{gap:var(--space-6);overflow-x:auto;padding-bottom:var(--space-4);scrollbar-width:none;} .mlmax-path-card{flex:none;width:min(78vw,380px);gap:var(--space-4);background:var(--color-surface-alt);border:1px solid var(--color-hairline);border-radius:var(--radius-md);padding:var(--space-8) var(--space-6) var(--space-6);min-height:340px;transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);} .mlmax-path-card:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-md);} .mlmax-path-card__title{margin:0;} .mlmax-path-card__text{margin:0;flex:1;} @media (min-width:1025px){ .mlmax-path-card{width:420px;min-height:380px;} } /* === 19. RISULTATI / CONTATORI (05) === */ .mlmax-stats{border-top:1px solid var(--color-hairline);border-bottom:1px solid var(--color-hairline);} .mlmax-stat{gap:var(--space-2);} .mlmax-stat__value{font:400 clamp(3rem,2rem + 4.5vw,5.5rem)/1 var(--font-display);color:var(--color-accent);} /* === 20. RECENSIONI (06) === */ .mlmax-reviews__head{margin-bottom:var(--space-12);gap:var(--space-4);} .mlmax-review{gap:var(--space-6);background:var(--color-surface-alt);border:1px solid var(--color-hairline);border-radius:var(--radius-md);padding:var(--space-8) var(--space-6);transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);} .mlmax-review:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-md);} .mlmax-review--featured{border-top:var(--rule-accent) solid var(--color-accent);} .mlmax-review__stars{display:flex;gap:var(--space-1);color:var(--color-accent);} .mlmax-review__quote{margin:0;flex:1;text-wrap:pretty;} .mlmax-review__author{gap:var(--space-1);border-top:1px solid var(--color-hairline);padding-top:var(--space-4);} /* === 21. NEWS (07) — card unica ripetibile (Loop Item Elementor) === */ .mlmax-news-card{text-decoration:none;} .mlmax-news-card__media{position:relative;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:16/10;border:1px solid var(--color-hairline);transition:border-color var(--dur-base) var(--ease-standard);} .mlmax-news-card__img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.08);transition:transform var(--dur-slow) var(--ease-out);} .mlmax-news-card:hover .mlmax-news-card__img{transform:scale(1.04);} .mlmax-news-card:hover .mlmax-news-card__media{border-color:var(--color-border-strong);} .mlmax-news-card__title{transition:color var(--dur-fast) var(--ease-standard);} .mlmax-news-card:hover .mlmax-news-card__title{color:var(--color-accent);} /* === 22. CTA FINALE (banda amber, inversione full-bleed) === */ .mlmax-cta{background:var(--color-accent);color:var(--color-on-accent);} .mlmax-cta__title{margin:0;} .mlmax-cta__body{margin:0;} .mlmax-cta__actions{gap:var(--space-3);} .mlmax-cta__link{text-decoration:underline;text-underline-offset:3px;} /* === 23. FOOTER (Theme Builder: template unico) === */ .mlmax-footer{background:var(--color-surface-sunken);border-top:1px solid var(--color-hairline);padding-top:var(--space-16);padding-bottom:var(--space-8);}.mlmax-footer__grid{margin-bottom:var(--space-16);} .mlmax-footer__brand{gap:var(--space-4);max-width:340px;} .mlmax-footer__col{gap:var(--space-3);} .mlmax-footer__heading{margin:0 0 var(--space-2);} .mlmax-footer__legal{gap:var(--space-4);border-top:1px solid var(--color-hairline);padding-top:var(--space-6);} /* === 24. HERO INTERNO (pagine) === */ .mlmax-phero{position:relative;padding-top:var(--space-phero-top);padding-bottom:var(--space-12);border-bottom:1px solid var(--color-hairline);background-image:var(--texture-grid);background-size:48px 48px;} .mlmax-phero--badge .mlmax-container{position:relative;z-index:1;} .mlmax-phero__badge{position:absolute;top:0;bottom:0;right:clamp(-200px,-6vw,-80px);z-index:0;pointer-events:none;} .mlmax-phero__badge-img{display:block;width:min(540px,58vw);height:auto;opacity:.14;filter:grayscale(30%) contrast(1.05);animation:mlmax-badge-wave 12s ease-in-out infinite;} @keyframes mlmax-badge-wave{0%,100%{transform:rotate(-8deg) translateY(-16px);}50%{transform:rotate(6deg) translateY(16px);}} @media (prefers-reduced-motion:reduce){.mlmax-phero__badge-img{animation:none;}} .mlmax-phero__label{gap:var(--space-4);margin-bottom:var(--space-6);} .mlmax-phero__title{margin:0 0 0 -.03em;} .mlmax-phero__lead{margin-top:var(--space-6);} .mlmax-phero__media{position:relative;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:4/5;} .mlmax-phero__img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.08);} .mlmax-phero__scrim{position:absolute;inset:0;background:var(--scrim-bottom);pointer-events:none;} .mlmax-hazard{width:120px;height:6px;background:repeating-linear-gradient(135deg,var(--color-accent) 0 10px,var(--color-surface) 10px 20px);margin-top:var(--space-8);} /* === 25. SUBNAV ANCORE (chip) === */ .mlmax-subnav{gap:var(--space-3);margin-top:var(--space-10);} .mlmax-subnav__link{display:inline-flex;min-height:44px;padding:0 var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-xs);font:700 var(--fs-meta)/1 var(--font-data);letter-spacing:var(--ls-button);text-transform:uppercase;text-decoration:none;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard);} .mlmax-subnav__link:hover{border-color:var(--color-accent);background:var(--color-amber-16);} /* === 26. LISTA CON CHECK (Icon List Elementor) === */ .mlmax-list{display:flex;flex-direction:column;gap:var(--space-3);list-style:none;margin:0;padding:0;} /* === 27. RIGA A 3 COLONNE CON FILETTO (riusabile) === */ .mlmax-row-3{gap:var(--space-8);} .mlmax-col-rule{gap:var(--space-4);border-top:1px solid var(--color-hairline);padding-top:var(--space-4);flex:1;} /* === 28. TIMELINE VERTICALE (marco-lucacci) === */ .mlmax-timeline{position:relative;max-width:760px;} .mlmax-timeline__rail{position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--color-border);} .mlmax-timeline__progress{position:absolute;left:-1px;top:4px;bottom:4px;width:3px;background:var(--color-accent);transform-origin:top;} .mlmax-timeline__item{position:relative;gap:var(--space-2);} .mlmax-timeline__item::before{content:"";position:absolute;left:calc(var(--space-10) * -1 - 5px);top:8px;width:11px;height:11px;border-radius:var(--radius-pill);background:var(--color-surface);border:2px solid var(--color-accent);} .mlmax-timeline__title{margin:0;} .mlmax-timeline__text{margin:0;} /* === 29. IL LIBRO (marco-lucacci) === */ .mlmax-book__cover{aspect-ratio:2/3;width:min(72vw,340px);background:var(--color-surface-sunken);background-image:var(--texture-grid);background-size:48px 48px;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-8) var(--space-6);} .mlmax-book__cover--img{display:block;padding:0;background:none;border-color:var(--color-hairline);overflow:hidden;transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);} .mlmax-book__cover--img:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-md);} .mlmax-book__cover-img{width:100%;height:100%;object-fit:cover;display:block;} @media (min-width:1025px){.mlmax-book__grid{justify-items:start;} } /* === 30. PROCESSO NUMERATO (il-metodo) === */ /* .mlmax-process__list: era display:flex + column, ora nel pannello del container */.mlmax-process-step{padding:var(--space-8) 0;border-top:1px solid var(--color-hairline);} .mlmax-process-step__num{min-width:2.2ch;} .mlmax-process-step__body{gap:var(--space-3);} .mlmax-process-step__title{margin:0;} .mlmax-process-step__text{margin:0;} @media (min-width:1025px){ .mlmax-process__intro{position:sticky;top:120px;} } /* === 31. STAFF (il-metodo) === */ .mlmax-staff-card{background:var(--color-surface-alt);border:1px solid var(--color-hairline);border-radius:var(--radius-md);overflow:hidden;transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);} .mlmax-staff-card:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-md);} .mlmax-staff-card__media{aspect-ratio:4/5;background:var(--color-surface-sunken);background-image:var(--texture-grid);background-size:48px 48px;} .mlmax-staff-card__img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.08);} .mlmax-staff-card__body{gap:var(--space-2);padding:var(--space-6);} .mlmax-staff-card__name{margin:0;} .mlmax-staff-card__text{margin:0;} /* === 32. TEASER ABBONAMENTI (il-metodo) === */ .mlmax-teaser{border-top:1px solid var(--color-hairline);} .mlmax-teaser__body{gap:var(--space-6);} /* === 33. SERVIZI (consulenza) === */ .mlmax-service{padding:var(--space-20) 0;border-top:1px solid var(--color-hairline);scroll-margin-top:90px;} .mlmax-service__media{position:relative;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:4/3;border:1px solid var(--color-hairline);} .mlmax-service__img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.08);} .mlmax-service__head{gap:var(--space-4);}.mlmax-service__detail-grid{margin-top:var(--space-6);} .mlmax-service__cell{gap:var(--space-3);border-top:1px solid var(--color-hairline);padding-top:var(--space-4);} .mlmax-service__cell-text{margin:0;} @media (min-width:1025px){ .mlmax-service--flip .mlmax-service__media{order:2;} .mlmax-service__media{position:sticky;top:120px;} } /* === 34. FAQ (accordion nativo details/summary → widget Accordion) === */ .mlmax-faq{max-width:880px;} /* === 35. SEDI (dove-siamo) — tre blocchi, trattamenti distinti === */ .mlmax-place{padding:var(--space-20) 0;border-top:1px solid var(--color-hairline);scroll-margin-top:90px;} .mlmax-place--alt{background:var(--color-surface-alt);} .mlmax-place__body{gap:var(--space-5);} .mlmax-place__address{margin:0;position:relative;padding-left:var(--space-10);} .mlmax-place__address::before{content:"";position:absolute;left:0;top:.68em;width:28px;height:2px;background:var(--color-accent);} .mlmax-place__tags{gap:var(--space-2);} .mlmax-place__tag{border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-3);} .mlmax-place__rows{gap:var(--space-3);border-top:1px solid var(--color-hairline);padding-top:var(--space-4);align-self:stretch;} .mlmax-place__row{gap:var(--space-3);font:400 var(--fs-body-s)/1.55 var(--font-body);color:var(--color-text-secondary);} .mlmax-place__actions{gap:var(--space-3);margin-top:var(--space-2);} @media (min-width:1025px){.mlmax-place--flip .mlmax-carousel{order:2;} } /* === 36. FORM CONTATTI (widget Form di Elementor Pro) === Stati (estensioni dai colori brand): focus = ring amber; errore = --color-error; successo = --color-success. */ .mlmax-form{display:flex;flex-direction:column;gap:var(--space-5);} .mlmax-form__link{color:var(--color-accent);} .mlmax-form__link:hover{color:var(--color-accent-hover);} .mlmax-form-aside{gap:var(--space-6);} @media (min-width:1025px){ .mlmax-form-aside{position:sticky;top:120px;} } /* === 39. MLMAX CLASS (listino reale dal volantino) === */ .mlmax-class{background:var(--color-surface-alt);border-top:1px solid var(--color-hairline);} /* Nel sorgente queste due sono regole base, non dentro una media: il blocco @media 1100px apparteneva a .class__plans, che qui non esiste piu'. Erano finite dentro quel blocco durante la riparazione delle graffe. */ .mlmax-class__prices{gap:var(--space-8) var(--space-12);} .mlmax-class-price{gap:var(--space-2);border-top:1px solid var(--color-hairline);padding-top:var(--space-4);min-width:130px;} /* === 40. NEWS — filtri + griglia editoriale === */ .mlmax-filter{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-12);} .mlmax-news-card.is-hidden{display:none;} /* === 41. ARTICOLO NEWS (dettaglio) === */ .mlmax-article__media{border-radius:var(--radius-md);overflow:hidden;margin:0 0 var(--space-8);} .mlmax-article__img{display:block;width:100%;height:auto;filter:saturate(.85) contrast(1.08);} .mlmax-article p{font:400 var(--fs-body)/1.75 var(--font-body);color:var(--color-text-muted);margin:0 0 var(--space-5);} .mlmax-article h2{font:400 var(--fs-h3)/var(--lh-heading) var(--font-display);text-transform:uppercase;margin:var(--space-9) 0 var(--space-4);} .mlmax-article ul{list-style:none;margin:0 0 var(--space-6);padding:0;display:flex;flex-direction:column;gap:var(--space-3);} .mlmax-article ul li{font:400 var(--fs-body)/1.6 var(--font-body);color:var(--color-text-muted);position:relative;padding-left:var(--space-10);} .mlmax-article ul li::before{content:"";position:absolute;left:0;top:.7em;width:28px;height:2px;background:var(--color-accent);} /* I link del testo sono ambra, ma un link con la veste di pulsante segue le regole del pulsante (sezione 08): senza :not() vincerebbe questa riga, piu' specifica, e il testo resterebbe ambra su fondo ambra. */ .mlmax-article a:not(.mlmax-btn){color:var(--color-accent);} .mlmax-article a:not(.mlmax-btn):hover{color:var(--color-accent-hover, var(--color-accent));} .mlmax-article__note{border:1px solid var(--color-hairline);background:var(--color-surface-alt);border-radius:var(--radius-md);padding:var(--space-6);margin-top:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;} .mlmax-article__note p{margin:0;} /* === 42. LISTINI PALESTRE (palestre) === */ .mlmax-listino{margin-top:var(--space-16);} .mlmax-tariff{background:var(--color-surface-alt);border:1px solid var(--color-hairline);border-radius:var(--radius-md);padding:var(--space-8);gap:var(--space-8);} .mlmax-tariff--accent{border-top:var(--rule-accent) solid var(--color-accent);} .mlmax-tariff__head{gap:var(--space-3);} .mlmax-tariff__note{margin:0;} .mlmax-tariff__bar{gap:var(--space-4);border-top:1px solid var(--color-hairline);padding-top:var(--space-6);} /* === 43. GALLERIA FOTOGRAFICA (news) + LIGHTBOX === */ .mlmax-gallery{margin:var(--space-10) 0;} .mlmax-gallery__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-6);} /* === 44. UTILITY SPAZIATURE === */ /* === 45. LINK INLINE NEL TESTO === */ .mlmax-link-inline{color:var(--color-accent);text-decoration:underline;} .mlmax-link-inline:hover{color:var(--color-accent-hover,var(--color-accent));} /* === 46. PAGINA 404 === */ /* === 47. CAROSELLO FOTO (in Elementor: widget Carousel / Galleria) === */ .mlmax-carousel{display:flex;flex-direction:column;gap:var(--space-4);} /* === 48. BOTTONI — QUATTRO STATI E AGGANCIO AL WIDGET BUTTON ============== Estende la sezione 08. Il reset di Hello Elementor colora button:hover / button:focus SENZA escludere [disabled]: ogni pulsante deve quindi dichiarare esplicitamente normale, :hover, :focus-visible, :disabled e :disabled:hover/:focus/:active. Aggancio: sul widget Button si assegnano, in Avanzate → Classi CSS, "mlmax-btn mlmax-btn--primary" (o la variante). Elementor veste .elementor-button con padding, sfondo e tipografia proprie: le si annullano alzando la specificità con .elementor-element, che è la stessa del CSS di Elementor ma viene caricata dopo. ========================================================================== */ .elementor-element .mlmax-btn{padding:0 var(--space-6);border-radius:var(--radius-xs);fill:currentColor;} .elementor-element .mlmax-btn--lg{padding:0 var(--space-8);} .elementor-element .mlmax-btn .elementor-button-content-wrapper{align-items:center;gap:var(--space-2);} .elementor-element .mlmax-btn .elementor-button-icon svg{width:18px;height:18px;} /* Stato di messa a fuoco: sempre visibile, mai rimosso dal rollover. */ .mlmax-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;}.mlmax-btn--primary:focus-visible{outline-color:var(--color-text);} /* Stato disabilitato: nessuna reazione al puntatore, contrasto ridotto ma ancora leggibile. Le quattro pseudo-classi vanno tutte dichiarate perché il reset del tema colora hover e focus anche sugli elementi disabilitati. */ .mlmax-btn:disabled, .mlmax-btn[disabled], .mlmax-btn[aria-disabled="true"]{background-color:var(--color-surface-raised);background-image:none;color:var(--color-text-muted);border-color:var(--color-border);cursor:not-allowed;opacity:1;} .mlmax-btn:disabled:hover,.mlmax-btn:disabled:focus,.mlmax-btn:disabled:active, .mlmax-btn[disabled]:hover,.mlmax-btn[disabled]:focus,.mlmax-btn[disabled]:active, .mlmax-btn[aria-disabled="true"]:hover,.mlmax-btn[aria-disabled="true"]:focus,.mlmax-btn[aria-disabled="true"]:active{background-color:var(--color-surface-raised);background-image:none;background-size:0% 100%;color:var(--color-text-muted);border-color:var(--color-border);transform:none;} /* === 49. WIDGET NAV MENU (Pro Elements) =================================== Il menu principale è il widget Nav Menu nativo, non un markup custom. Si veste il widget con le sue classi: le voci desktop replicano .nav__link della sezione 09, il pannello mobile replica il menu fullscreen (sez. 10). ATTENZIONE: il widget Menu commuta a una soglia PROPRIA, impostata nel widget stesso (Breakpoint: Tablet/Mobile), indipendente dal kit. Qui è impostato su "Tablet" così il passaggio avviene a 1024px, come nel design. ========================================================================== */ .mlmax-navmenu .elementor-nav-menu{gap:var(--space-8);} .mlmax-navmenu .elementor-nav-menu a.elementor-item{font-family:var(--font-data);font-size:var(--fs-nav);font-weight:700;line-height:1;letter-spacing:var(--ls-button);text-transform:uppercase;color:var(--color-text-secondary);padding:var(--space-2) 0;background-image:linear-gradient(var(--color-accent),var(--color-accent));background-repeat:no-repeat;background-size:0 2px;background-position:0 100%;transition:color var(--dur-fast) var(--ease-standard),background-size var(--dur-base) var(--ease-mechanical);} .mlmax-navmenu .elementor-nav-menu a.elementor-item:hover, .mlmax-navmenu .elementor-nav-menu a.elementor-item.highlighted, .mlmax-navmenu .elementor-nav-menu a.elementor-item:focus{color:var(--color-text);background-size:100% 2px;background-color:transparent;} .mlmax-navmenu .elementor-nav-menu a.elementor-item.elementor-item-active{color:var(--color-accent);background-size:100% 2px;} .mlmax-navmenu .elementor-nav-menu a.elementor-item:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px;} /* Il widget Nav Menu dell'header non ha piu' ne' menu a tendina ne' pulsante hamburger propri: sotto i 1025px si nasconde e al suo posto compare il widget Off-Canvas (sezione 72). Le regole del vecchio pannello a tendina e del suo toggle sono state rimosse perche' non descrivevano piu' nulla di presente in pagina. */ /* === 50. WIDGET FORM (Pro Elements) ======================================= Si passa PRIMA dalle variabili che il widget espone (--forms-fields-*): è la strada stabile. Gli allungamenti di selettore restano per ciò che il widget veste direttamente sul nodo interno. ========================================================================== */ .mlmax-form{--forms-fields-background-color:var(--color-surface-alt);--forms-fields-border-color:var(--color-border);--forms-fields-border-width:1px;--forms-fields-border-radius:var(--radius-xs);--forms-fields-color:var(--color-text);--forms-fields-padding:0 var(--space-4);} .mlmax-form .elementor-field-group>label{font-family:var(--font-data);font-size:var(--fs-eyebrow);font-weight:700;line-height:1.2;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:var(--space-2);} .mlmax-form .elementor-field-group .elementor-field{min-height:48px;font-family:var(--font-body);font-size:var(--fs-body);line-height:1.4;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);} .mlmax-form .elementor-field-group .elementor-field-textual:focus{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-surface),0 0 0 4px var(--color-accent);outline:none;} .mlmax-form textarea.elementor-field{min-height:150px;padding:var(--space-3) var(--space-4);resize:vertical;} .mlmax-form .elementor-field-type-acceptance .elementor-field-option{display:flex;gap:var(--space-3);align-items:flex-start;font-family:var(--font-body);font-size:var(--fs-body-s);line-height:1.55;color:var(--color-text-secondary);} .mlmax-form input[type="checkbox"]{width:20px;height:20px;accent-color:var(--color-accent);margin-top:.125rem;flex:none;} .mlmax-form .elementor-field-required .elementor-field-label:after, .mlmax-form .elementor-mark-required .elementor-field-label:after{color:var(--color-accent);} .mlmax-form .elementor-message.elementor-message-danger{color:var(--color-error);font-family:var(--font-body);} .mlmax-form .elementor-message.elementor-message-success{color:var(--color-success);font-family:var(--font-body);} .mlmax-form .elementor-field-group.elementor-error .elementor-field{border-color:var(--color-error);} /* === 51. WIDGET ACCORDION (FAQ) =========================================== La FAQ del sorgente è details/summary; in Elementor è il widget Accordion. Stessi valori della sezione 34, applicati alle classi del widget. ========================================================================== */ .mlmax-accordion .elementor-accordion-item{border:0;border-top:1px solid var(--color-hairline);} .mlmax-accordion .elementor-tab-title{padding:var(--space-6) 0;background:transparent;font-family:var(--font-display);font-size:var(--fs-h3);font-weight:400;line-height:1.2;text-transform:uppercase;color:var(--color-text);transition:color var(--dur-fast) var(--ease-standard);} .mlmax-accordion .elementor-tab-title:hover, .mlmax-accordion .elementor-tab-title.elementor-active{color:var(--color-accent);} .mlmax-accordion .elementor-tab-title a:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;} .mlmax-accordion .elementor-accordion-icon{color:var(--color-accent);width:20px;transition:transform var(--dur-base) var(--ease-mechanical);} .mlmax-accordion .elementor-active .elementor-accordion-icon{transform:rotate(45deg);} .mlmax-accordion .elementor-tab-content{padding:0 0 var(--space-8);border:0;background:transparent;max-width:68ch;color:var(--color-text-secondary);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.6;} /* === 52. LOOP GRID NEWS =================================================== L'archivio News è un Loop Grid: si passa dalle variabili della griglia, non da selettori sui figli. ========================================================================== */ .mlmax-news-loop{--grid-columns:1;--grid-column-gap:var(--space-6);--grid-row-gap:var(--space-10);} @media (min-width:768px){ .mlmax-news-loop{--grid-columns:2;} } @media (min-width:1025px){ .mlmax-news-loop{--grid-columns:3;} } .mlmax-news-loop .elementor-loop-container{min-width:0;} /* === 53. GALLERIA E CAROSELLO NATIVI ====================================== Widget Galleria immagini (con lightbox attiva) e widget Carousel: si vestono con gli stessi valori delle sezioni 43 e 47. ========================================================================== */ .mlmax-carousel-w .swiper-slide img{filter:saturate(.85) contrast(1.08);} .mlmax-carousel-w .elementor-swiper-button{width:44px;height:44px;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:rgba(13,13,15,.62);backdrop-filter:blur(6px);color:var(--color-text);transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);} .mlmax-carousel-w .elementor-swiper-button:hover{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent);} .mlmax-carousel-w .swiper-pagination-bullet{width:28px;height:4px;border-radius:2px;background:var(--color-border-strong);opacity:1;} .mlmax-carousel-w .swiper-pagination-bullet-active{background:var(--color-accent);} /* === 54. HEADER FISSO E BARRA DI AMMINISTRAZIONE ========================== L'header è position:fixed. Da collegati la #wpadminbar occupa i primi 32px (46px sotto 783px) e sposta tutto: la compensazione vale solo quando la barra c'è davvero, altrimenti l'header staccherebbe dal bordo. ========================================================================== */ body.admin-bar .mlmax-header{top:32px;} @media (max-width:782px){ body.admin-bar .mlmax-header{top:46px;} } /* === 55. ECCEZIONI MOBILE RIPETUTE IN CODA ================================ Le regole per schermi stretti scritte prima nel file vengono battute da regole di pari specificità scritte dopo: le sezioni 48–54 aggiunte sopra ripetono qui le proprie eccezioni mobile. ========================================================================== */ @media (max-width:767px){ .elementor-element .mlmax-btn{padding:0 var(--space-5);} .elementor-element .mlmax-btn--lg{padding:0 var(--space-6);} .mlmax-form .elementor-field-group .elementor-field{min-height:48px;} } /* === 56. ADATTATORI: CLASSI DI PROGETTO SUI WIDGET ELEMENTOR ============== Elementor mette le "Classi CSS" di un widget sul WRAPPER (.elementor-widget), non sul nodo interno che disegna davvero (l'ancora del bottone, l' del widget Immagine). Per Heading e Text Editor non serve nulla: il reset della sezione 03 li fa già ereditare font e colore dal wrapper classificato. Qui si coprono i due casi che l'ereditarietà non risolve. Convenzione adottata in tutto il progetto: - classi che descrivono il BOX (layout, spazi, sfondo, bordi) → sul container; - classi che descrivono il TESTO → sul widget (ereditarietà, sezione 03); - bottoni e immagini → classe sul widget + adattatore qui sotto. ========================================================================== */ /* --- 56.1 Bottoni: la classe sta sul widget, lo stile va sull'ancora ------ */ .mlmax-btn .elementor-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-6);border:1px solid transparent;border-radius:var(--radius-xs);text-decoration:none;cursor:pointer;background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;transition:background-size var(--dur-slow) var(--ease-mechanical),background-color var(--dur-fast) var(--ease-standard),color var(--dur-slow) var(--ease-mechanical),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-standard);} .mlmax-btn .elementor-button:active{transform:translateY(1px);} .mlmax-btn--primary .elementor-button{background-color:var(--color-accent);background-image:linear-gradient(var(--color-surface),var(--color-surface));border-color:var(--color-accent);} .mlmax-btn--primary .elementor-button:hover{background-size:100% 100%;border-color:var(--color-accent);} .mlmax-btn--outline .elementor-button{background-color:transparent;background-image:linear-gradient(var(--color-text),var(--color-text));border-color:var(--color-text);} .mlmax-btn--outline .elementor-button:hover{background-size:100% 100%;border-color:var(--color-text);} .mlmax-btn--inverse .elementor-button{background-color:var(--color-surface);background-image:linear-gradient(var(--color-text),var(--color-text));border-color:var(--color-surface);} .mlmax-btn--inverse .elementor-button:hover{background-size:100% 100%;border-color:var(--color-text);} .mlmax-btn.mlmax-btn--on-accent .elementor-button{border-color:var(--color-on-accent);} .mlmax-btn--lg .elementor-button{min-height:56px;padding:0 var(--space-8);} .mlmax-btn .elementor-button-icon svg{width:18px;height:18px;flex:none;fill:currentColor;} .mlmax-btn .elementor-button-content-wrapper{align-items:center;gap:var(--space-2);} /* Quattro stati anche sull'ancora del widget (vedi sezione 48 per il perché). */ .mlmax-btn .elementor-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;}.mlmax-btn--primary .elementor-button:focus-visible{outline-color:var(--color-text);} .mlmax-btn .elementor-button:disabled, .mlmax-btn .elementor-button[disabled], .mlmax-btn .elementor-button[aria-disabled="true"]{background-color:var(--color-surface-raised);background-image:none;color:var(--color-text-muted);border-color:var(--color-border);cursor:not-allowed;opacity:1;} .mlmax-btn .elementor-button:disabled:hover,.mlmax-btn .elementor-button:disabled:focus,.mlmax-btn .elementor-button:disabled:active, .mlmax-btn .elementor-button[disabled]:hover,.mlmax-btn .elementor-button[disabled]:focus,.mlmax-btn .elementor-button[disabled]:active, .mlmax-btn .elementor-button[aria-disabled="true"]:hover,.mlmax-btn .elementor-button[aria-disabled="true"]:focus,.mlmax-btn .elementor-button[aria-disabled="true"]:active{background-color:var(--color-surface-raised);background-image:none;background-size:0% 100%;color:var(--color-text-muted);border-color:var(--color-border);transform:none;} /* Il wrapper del widget non deve aggiungere spazio né stirare il bottone. */ .mlmax-btn .elementor-widget-container, .mlmax-btn .elementor-button-wrapper{display:inline-flex;} /* --- 56.2 Immagini: geometria dal wrapper all' ---------------------- */ /* Immagine che riempie il proprio box (media di card, hero, sedi, servizi). */ .mlmax-img-fill, .mlmax-img-fill .elementor-widget-container{height:100%;width:100%;} .mlmax-img-fill img{width:100%;height:100%;object-fit:cover;display:block;} /* Logo dell'header: altezza fissa, si contrae con l'header allo scroll. */ .mlmax-logo__img img{height:64px;width:auto;transition:height var(--dur-base) var(--ease-standard);} .mlmax-header.is-scrolled .mlmax-logo__img img{height:34px;} /* Logo del footer. */ .mlmax-footer__logo img{width:150px;height:auto;} /* === 57. HEADER: COMPOSIZIONE IN ELEMENTOR ================================ Nel design l'header ha tre celle: logo | nav | azioni. La navigazione orizzontale e' il widget Nav Menu, visibile dai 1025px in su; sotto quella soglia al suo posto c'e' l'hamburger, che sta nella cella delle azioni accanto al pulsante telefono. Le due visibilita' non sono scritte qui: sono i controlli "Nascondi su" dei due widget (Avanzate -> Responsive), cosi' restano leggibili e modificabili dall'editor. La cella delle azioni percio' non si spegne piu' sotto i 1025px: il pulsante telefono ha gia' un suo display:none nel design, e l'hamburger deve restare. Con la navigazione nascosta, lo space-between dell'header porta da solo il logo a sinistra e le azioni a destra. ========================================================================== */ .mlmax-header__inner .mlmax-navmenu{flex:none;} /* === 58. ADATTATORI: TEXT EDITOR, ICON LIST, ICONA ======================== Completa la sezione 56 con i tre widget che annidano il contenuto in nodi propri. Le regole di "ereditarietà" usano :where() per avere specificità zero: qualsiasi regola di progetto scritta prima nel file le batte, quindi non possono rompere sezioni già scritte (es. 41, articolo news). ========================================================================== */ /* --- 58.1 Text Editor: il testo sta in

, che eredita già font e colore dal wrapper classificato. Serve solo togliere il margine del tema. --- */ :where(.elementor-widget-text-editor) p{margin:0 0 var(--space-5);} :where(.elementor-widget-text-editor) p:last-child{margin-bottom:0;} /* --- 58.2 Icon List usata come elenco di link (colonne del footer) ------- */ .mlmax-linklist .elementor-icon-list-items{display:flex;flex-direction:column;gap:var(--space-3);} .mlmax-linklist .elementor-icon-list-icon{display:none;} .mlmax-linklist .elementor-icon-list-item{font:inherit;} .mlmax-linklist .elementor-icon-list-item a{display:inline-flex;font:inherit;color:inherit;text-decoration:none;transition:color var(--dur-fast) var(--ease-standard);} .mlmax-linklist .elementor-icon-list-item a:hover{color:var(--color-accent);} .mlmax-linklist .elementor-icon-list-item a:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;} .mlmax-linklist--inline .elementor-icon-list-items{flex-direction:row;flex-wrap:wrap;gap:var(--space-6);} /* Varianti tipografiche dell'elenco: la classe sta sul widget, il testo eredita perché le regole qui sopra dichiarano font:inherit. */ /* --- 58.3 Widget Icona usato come pulsante social ------------------------ */ .mlmax-social .elementor-icon-wrapper{display:flex;} .mlmax-social .elementor-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-xs);color:var(--color-text-secondary);transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard);} .mlmax-social .elementor-icon:hover{color:var(--color-accent);border-color:var(--color-border-strong);background:var(--color-white-04);} .mlmax-social .elementor-icon:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;} .mlmax-social .elementor-icon svg{width:18px;height:18px;fill:none;} /* --- 58.4 Il widget non deve aggiungere spazio proprio ------------------- */ /* === 59. LAYOUT DEI CONTAINER: SPECIFICITA CONTRO ELEMENTOR ============== Elementor scrive display, flex-direction, gap, justify-content e simili come variabili CSS su .elementor-element e le applica su .e-con: stessa specificita delle classi di progetto, ma caricate dopo. Questa sezione ripete SOLO le proprieta di layout delle sezioni 04-47, prefissate con .elementor-element, cosi il layout del design vince sul default del builder. Nessun valore nuovo: e' una copia meccanica, rigenerabile. ========================================================================== */ .elementor-element.mlmax-eyebrow{display:flex; align-items:center; gap:var(--space-3);} .elementor-element.mlmax-link{display:inline-flex;gap:var(--space-2);} .elementor-element.mlmax-btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);} .elementor-element.mlmax-nav{display:none;} .elementor-element.mlmax-menu__foot{gap:var(--space-3);} .elementor-element.mlmax-preloader{display:none;} .elementor-element.mlmax-hero__content{gap:var(--space-8);} .elementor-element.mlmax-hero__foot{gap:var(--space-4);} .elementor-element.mlmax-promise__head{align-items:baseline;gap:var(--space-4);} .elementor-element.mlmax-promise__col{gap:var(--space-4);} .elementor-element.mlmax-method__head{gap:var(--space-4);} .elementor-element.mlmax-step{gap:var(--space-3);} .elementor-element.mlmax-about__titles{gap:var(--space-2);} .elementor-element.mlmax-about__titles-row{gap:var(--space-4);} .elementor-element.mlmax-hscroll__track{gap:var(--space-6);} .elementor-element.mlmax-path-card{flex:none;gap:var(--space-4);} .elementor-element.mlmax-path-card__text{flex:1;} .elementor-element.mlmax-stat{gap:var(--space-2);} .elementor-element.mlmax-reviews__head{gap:var(--space-4);} .elementor-element.mlmax-review{gap:var(--space-6);} .elementor-element.mlmax-review__stars{display:flex; gap:var(--space-1);} .elementor-element.mlmax-review__quote{flex:1;} .elementor-element.mlmax-review__author{gap:var(--space-1);} .elementor-element.mlmax-cta__actions{gap:var(--space-3);} .elementor-element.mlmax-footer__brand{gap:var(--space-4);} .elementor-element.mlmax-footer__col{gap:var(--space-3);} .elementor-element.mlmax-footer__legal{gap:var(--space-4);} .elementor-element.mlmax-phero__badge-img{display:block;} .elementor-element.mlmax-phero__label{gap:var(--space-4);} .elementor-element.mlmax-subnav{gap:var(--space-3);} .elementor-element.mlmax-subnav__link{display:inline-flex;} .elementor-element.mlmax-list{display:flex; flex-direction:column; gap:var(--space-3);} .elementor-element.mlmax-row-3{gap:var(--space-8);} .elementor-element.mlmax-col-rule{gap:var(--space-4);flex:1;} .elementor-element.mlmax-timeline__item{gap:var(--space-2);} .elementor-element.mlmax-book__cover--img{display:block;} .elementor-element.mlmax-book__cover-img{display:block;} .elementor-element.mlmax-process-step__body{gap:var(--space-3);} .elementor-element.mlmax-staff-card__body{gap:var(--space-2);} .elementor-element.mlmax-teaser__body{gap:var(--space-6);} .elementor-element.mlmax-service__head{gap:var(--space-4);} .elementor-element.mlmax-service__cell{gap:var(--space-3);} .elementor-element.mlmax-place__body{gap:var(--space-5);} .elementor-element.mlmax-place__tags{gap:var(--space-2);} .elementor-element.mlmax-place__rows{gap:var(--space-3);align-self:stretch;} .elementor-element.mlmax-place__row{gap:var(--space-3);} .elementor-element.mlmax-place__actions{gap:var(--space-3);} .elementor-element.mlmax-form{display:flex; flex-direction:column; gap:var(--space-5);} .elementor-element.mlmax-form-aside{gap:var(--space-6);} .elementor-element.mlmax-class__prices{gap:var(--space-8) var(--space-12);} .elementor-element.mlmax-class-price{gap:var(--space-2);} .elementor-element.mlmax-filter{display:flex; flex-wrap:wrap; gap:var(--space-3);} .elementor-element.mlmax-article__img{display:block;} .elementor-element.mlmax-article__note{display:flex; flex-direction:column; gap:var(--space-4); align-items:flex-start;} .elementor-element.mlmax-tariff{gap:var(--space-8);} .elementor-element.mlmax-tariff__head{gap:var(--space-3);} .elementor-element.mlmax-tariff__bar{gap:var(--space-4);} .elementor-element.mlmax-gallery__head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:var(--space-4);} .elementor-element.mlmax-carousel{display:flex; flex-direction:column; gap:var(--space-4);} @media (min-width:1025px){ .elementor-element.mlmax-nav{display:flex; align-items:center; gap:var(--space-8);} } @media (min-width:768px){ .elementor-element.mlmax-promise__col{flex:1;} } /* === 60. WIDGET STELLE (recensioni) ====================================== Nel design le stelle sono cinque SVG dentro uno span con aria-label. Qui è il widget Stelle nativo, che porta già il markup schema.org Rating e le stelle in aria-hidden. Il controllo "title" del widget stampa un testo VISIBILE, quindi non si usa: l'etichetta accessibile arriva da role="img" + aria-label sull'elemento (Avanzate → Attributi). ========================================================================== */ .mlmax-review__stars .elementor-star-rating__wrapper{display:flex;} .mlmax-review__stars .elementor-star-rating{display:flex;gap:var(--space-1);color:var(--color-accent);line-height:1;} .mlmax-review__stars .elementor-star-rating i{font-style:normal;font-size:1rem;line-height:1;color:inherit;} /* === 61. ICON LIST COME ELENCO CON CHECK ================================= Il .list del design (sezione 26) diventa il widget Lista Icone. La classe di progetto sta sul widget; qui la geometria scende sui nodi interni. ========================================================================== */ .mlmax-list .elementor-icon-list-items{display:flex;flex-direction:column;gap:var(--space-3);} .mlmax-list .elementor-icon-list-item{display:flex;gap:var(--space-3);align-items:flex-start;font:400 var(--fs-body-s)/1.55 var(--font-body);color:var(--color-text-secondary);} .mlmax-list .elementor-icon-list-icon{flex:none;margin-top:.125rem;display:flex;} .mlmax-list .elementor-icon-list-icon svg{width:18px;height:18px;fill:none;color:var(--color-accent);} .mlmax-list .elementor-icon-list-text{padding:0;} /* Variante "righe della sede": stessa forma, icona diversa per riga. */ /* === 62. IMMAGINI DENTRO I BOX DEL DESIGN ================================ I box media del design (.mlmax-phero__media, .mlmax-about__media, .mlmax-service__media, .mlmax-place__media, .mlmax-news-card__media, .mlmax-staff-card__media, .mlmax-book__cover--img) hanno gia aspect-ratio, raggio e overflow. Al widget Immagine dentro si assegna anche "mlmax-img-fill" (sezione 56.2) perche' l' riempia il box. Qui si toglie di mezzo il wrapper del widget, che altrimenti non eredita l'altezza del box e lascia l'immagine alta quanto il suo contenuto. ========================================================================== */ .mlmax-phero__media .elementor-widget-image,.mlmax-about__media .elementor-widget-image,.mlmax-service__media .elementor-widget-image,.mlmax-news-card__media .elementor-widget-image,.mlmax-staff-card__media .elementor-widget-image,.mlmax-book__cover--img .elementor-widget-image,.mlmax-hero__bg .elementor-widget-image{width:100%;height:100%;} /* === 63. LINK ANIMATO E ICONE INLINE COSTRUITI CON I WIDGET ============== Il .link del design e' un con dentro testo e una freccia. In Elementor diventa un container html_tag="a" con dentro un Titolo e un widget Icona: la classe .mlmax-link resta sul container (quindi la sottolineatura animata della sezione 07 funziona), qui si sistema solo l'icona. ========================================================================== */ .mlmax-link__icon .elementor-icon-wrapper, .mlmax-link__icon .elementor-icon{display:flex;color:inherit;} .mlmax-link__icon svg{width:14px;height:14px;fill:none;color:inherit;} .mlmax-link .elementor-widget-heading{font:inherit;color:inherit;} /* Il container-link non deve ereditare il sottolineato del tema. */ .mlmax-link,.mlmax-subnav__link,.mlmax-logo,.mlmax-book__cover--img,.mlmax-news-card,.mlmax-skip{text-decoration:none;} /* === 64. CAROSELLO NATIVO AL POSTO DI QUELLO DEL DESIGN ================== Il design ha un carosello scritto a mano (ul/li + button + data-mlmax-*). In Elementor si usa il widget Carosello d'immagini nativo: stesso comportamento (una foto per volta, frecce, dot, trascinamento) senza markup HTML custom. Qui il widget prende la forma del design: rapporto 16/10, angoli, bordo, immagini che riempiono, frecce e dot della sezione 53. La classe sul widget e' "mlmax-carousel-w" e NON "mlmax-carousel", che e' l'aggancio JS del carosello del sorgente: due cose diverse. ========================================================================== */ .mlmax-carousel-w .elementor-image-carousel-wrapper{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-hairline);background:var(--color-surface-sunken);} .mlmax-carousel-w .swiper-slide{aspect-ratio:16/10;} .mlmax-carousel-w .swiper-slide figure, .mlmax-carousel-w .swiper-slide .swiper-slide-inner{height:100%;margin:0;} .mlmax-carousel-w .swiper-slide img{width:100%;height:100%;object-fit:cover;display:block;} .mlmax-carousel-w .elementor-swiper-button svg{width:20px;height:20px;fill:none;} .mlmax-carousel-w .swiper-pagination{position:static;margin-top:var(--space-4);display:flex;flex-wrap:wrap;gap:var(--space-2);} /* === 65. RIGHE DELLA SCHEDA SEDE ========================================= .mlmax-place__row del design: icona a sinistra, testo con link inline a destra. Non e' una Lista Icone (il testo contiene ), quindi e' un container riga con widget Icona + Editor di testo. ========================================================================== */ .mlmax-place__row .elementor-widget-icon, .mlmax-place__row .elementor-icon-wrapper, .mlmax-place__row .elementor-icon{display:flex;color:var(--color-accent);} .mlmax-place__row .elementor-icon svg{width:18px;height:18px;fill:none;} .mlmax-place__row .elementor-widget-text-editor{flex:1;min-width:0;} /* === 66. FILTRO PER CATEGORIA (widget Taxonomy Filter) =================== Nel design i filtri sono