/* ===================================================== Digital Medica — nuova homepage, palette sobria Concept: tipografia editoriale, molto bianco, blu petrolio + accento warm sand. Niente effetti gratuiti. ===================================================== */ :root { /* Palette ufficiale Digital Medica Primario blu petrolio #127298 (usato come CTA / blocchi forti) Azzurro chiaro #56B2D7 (per sfondi soft, accent secondario) Arancione #FF973B (accent caldo, eyebrow, dettagli) Grigio chiaro #F2F2F2 (sfondi sezione) Testo scuro #333 (corpo testo) */ --color-bg: #ffffff; --color-bg-soft: #f5f8fa; --color-surface: #ffffff; --color-ink: #1f2933; --color-ink-soft: #4a5560; --color-muted: #8a9099; --color-line: #e6ecf0; --color-line-strong: #ccd6dd; --color-primary: #127298; --color-primary-dark: #0d5673; --color-primary-light: #56B2D7; --color-primary-soft: #e8f3f8; --color-accent: #FF973B; --color-accent-dark: #d97720; /* Colore unico dei CTA di conversione: arancione profondo (testo bianco leggibile) + tono ancora più scuro per lo "spessore" 3D. */ --color-cta: #db6e0c; --color-cta-dark: #a5560a; --color-warn-bg: #fff3e6; --color-warn-border: #FF973B; --color-warn-ink: #8a4a10; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: "Elms Sans", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --shadow-card: 0 1px 2px rgba(20, 30, 40, .04), 0 8px 24px rgba(20, 30, 40, .05); --radius: 6px; --radius-lg: 14px; --container: 1120px; --container-narrow: 880px; } /* ---------- Reset minimal ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: 18px; line-height: 1.6; color: var(--color-ink); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--color-primary-dark); } button { font-family: inherit; cursor: pointer; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; color: var(--color-ink); letter-spacing: 0; margin: 0 0 .4em; line-height: 1.15; } h1 { font-size: clamp(3rem, 6.2vw, 4.8rem); font-weight: 500; letter-spacing: -.005em; line-height: 1.05; } h2 { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 500; letter-spacing: 0; line-height: 1.15; } h3 { font-size: 1.4rem; font-weight: 500; letter-spacing: 0; line-height: 1.25; } h4 { font-size: 1.1rem; font-weight: 500; letter-spacing: .005em; } em { font-style: italic; color: var(--color-accent); font-weight: inherit; } p { margin: 0 0 1em; color: var(--color-ink-soft); } p:last-child { margin-bottom: 0; } .eyebrow, .section-eyebrow, .percorso-tag, .caso-tag { display: inline-block; font-size: .8rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 1.2rem; } .section-eyebrow { margin-bottom: .8rem; } .section-head { max-width: none; margin-bottom: 56px; } .section-sub { font-size: 1.1rem; color: var(--color-ink-soft); margin-top: 12px; max-width: 640px; } /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 14px 22px; font-size: .95rem; font-weight: 500; letter-spacing: .01em; border-radius: var(--radius); border: 1px solid transparent; text-align: center; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; cursor: pointer; } .btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; } .btn-ghost { background: transparent; color: var(--color-ink); border-color: var(--color-line-strong); } .btn-ghost:hover { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-dark); } .btn-large { padding: 16px 28px; font-size: 1rem; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .85); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; } .site-header.is-scrolled { background: rgba(255, 255, 255, .96); border-bottom-color: var(--color-line); box-shadow: 0 4px 24px rgba(18, 114, 152, .04); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 96px; transition: height .3s cubic-bezier(.4, 0, .2, 1); } .site-header.is-scrolled .header-inner { height: 64px; } .logo { display: inline-flex; align-items: center; gap: 10px; color: var(--color-ink); font-weight: 600; } .logo:hover { color: var(--color-ink); } .logo img { height: 56px; width: auto; display: block; transition: height .3s cubic-bezier(.4, 0, .2, 1); } .site-header.is-scrolled .logo img { height: 34px; } .logo-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--color-primary); color: #fff; font-family: var(--font-display); font-size: .95rem; letter-spacing: .02em; } .logo-text { font-size: 1.05rem; letter-spacing: -.01em; } .site-nav { display: flex; align-items: center; gap: 28px; } .site-nav a { font-size: .94rem; color: var(--color-ink-soft); font-weight: 500; } .site-nav a:hover { color: var(--color-primary-dark); } .site-nav .nav-cta { padding: 9px 16px; background: var(--color-primary); color: #fff; border-radius: var(--radius); } .site-nav .nav-cta:hover { background: var(--color-primary-dark); color: #fff; } /* ---------- Header — adattamento al markup reale di GeneratePress ---------- Le regole .header-inner / .logo / .site-nav qui sopra erano scritte per il markup della bozza HTML. Sul sito live l'header lo genera GeneratePress con classi diverse (.inside-header, .main-navigation, .site-logo, .header-image, .menu-toggle): quelle regole non agganciavano nulla. Le regole seguenti riportano l'header al design della bozza (logo a sinistra, nav a destra, "Parliamone" a bottone, shrink sticky) usando le classi reali di GP. --------------------------------------------------------------------------- */ /* Barra interna: allineata alla stessa colonna delle sezioni (1120px) e non alla grid-container GP da 1400px, così il logo è in asse con l'hero/contenuti. */ .site-header .inside-header { /* Allineato all'hero allargato (1320) così logo/nav sono in asse col pannello testo e con l'illustrazione. */ max-width: 1320px; padding: 18px 24px; gap: 24px; transition: padding .3s cubic-bezier(.4, 0, .2, 1); } .site-header.is-scrolled .inside-header { padding-top: 9px; padding-bottom: 9px; } /* Logo: dimensione equilibrata + shrink on scroll. Override del width:360px impostato dal Customizer GP (.site-header .header-image). */ .site-header .site-logo { flex-shrink: 0; line-height: 0; } .site-header .header-image, .site-header .site-logo img { width: auto; height: 60px; transition: height .3s cubic-bezier(.4, 0, .2, 1); } .site-header.is-scrolled .header-image, .site-header.is-scrolled .site-logo img { height: 36px; } /* Navigazione: sfondo trasparente (eredita la barra translucida dell'header). */ .site-header .main-navigation, .site-header .main-navigation ul, .site-header .main-navigation ul ul { background: transparent; } .site-header #site-navigation .inside-navigation { padding: 0; } /* ---- Desktop (>= 769px): nav orizzontale a destra, link sobri, CTA a bottone ---- */ @media (min-width: 769px) { .site-header .main-navigation .main-nav > ul { display: flex; align-items: center; gap: 2px; } .site-header .main-navigation .main-nav ul li a { font-size: 1.05rem; font-weight: 500; color: var(--color-ink-soft); line-height: 1.2; padding: 10px 14px; border-radius: var(--radius); transition: color .15s ease, font-size .3s cubic-bezier(.4, 0, .2, 1); } /* Compatta le voci sullo scroll, come logo e padding. */ .site-header.is-scrolled .main-navigation .main-nav ul li a { font-size: .95rem; } /* Solo hover cambia colore: le voci "current" qui non sono affidabili (i link ad ancore /#sezione risultano tutti current in home), quindi niente evidenziazione di "pagina corrente" per non colorare mezzo menu. */ .site-header .main-navigation .main-nav ul li:hover > a, .site-header .main-navigation .main-nav ul li.sfHover > a { color: var(--color-primary-dark); } /* CTA "Parliamone" = ultima voce di primo livello, resa come bottone primario (equivalente a .nav-cta della bozza). Robustness: targetta l'ultima voce. */ .site-header .main-navigation .main-nav > ul > li:last-child { margin-left: 12px; } /* Solo dimensione/colore qui: lo stile 3D + riflesso è nel blocco condiviso "Pulsanti 3D" più sotto (vale per hero, menu e submit form). */ .site-header .main-navigation .main-nav > ul > li:last-child > a, .site-header .main-navigation .main-nav > ul > li:last-child[class*="current-menu-"] > a { color: #fff; padding: 10px 18px; } } /* ---- Mobile (<= 768px): logo compatto su una riga con l'hamburger ---- */ @media (max-width: 768px) { .site-header .inside-header { padding: 12px 18px; gap: 12px; } .site-header.is-scrolled .inside-header { padding-top: 8px; padding-bottom: 8px; } /* Logo più piccolo: lascia spazio all'hamburger -> niente wrap su 2 righe. */ .site-header .header-image, .site-header .site-logo img { height: 40px; } .site-header.is-scrolled .header-image, .site-header.is-scrolled .site-logo img { height: 34px; } /* Hamburger: pulito, colore brand, niente box grigio pesante. */ .site-header .mobile-menu-control-wrapper { margin-left: auto; } .site-header .mobile-menu-control-wrapper .menu-toggle, .site-header #site-navigation .menu-toggle { color: var(--color-primary); background: transparent; padding: 6px 8px; line-height: 1; font-size: 1.5rem; border-radius: var(--radius); } .site-header .mobile-menu-control-wrapper .menu-toggle:hover, .site-header .mobile-menu-control-wrapper .menu-toggle:focus { background: var(--color-primary-soft); color: var(--color-primary-dark); } /* Menu aperto: voci a piena larghezza, separatori sottili, colori brand. */ .site-header #site-navigation, .site-header #site-navigation.toggled { background: #fff; } .site-header #site-navigation .inside-navigation { padding: 0; } .site-header .main-navigation.toggled .main-nav > ul { display: block; } .site-header .main-navigation.toggled .main-nav ul li a { padding: 14px 18px; font-size: 1rem; color: var(--color-ink); border-top: 1px solid var(--color-line); } .site-header .main-navigation.toggled .main-nav > ul > li:first-child > a { border-top: none; } .site-header .main-navigation.toggled .main-nav ul li:hover > a { color: var(--color-primary); } /* CTA "Parliamone" nel menu mobile: bottone pieno, centrato. */ .site-header .main-navigation.toggled .main-nav > ul > li:last-child { margin: 14px 18px 4px; } .site-header .main-navigation.toggled .main-nav > ul > li:last-child > a, .site-header .main-navigation.toggled .main-nav > ul > li:last-child[class*="current-menu-"] > a { color: #fff; text-align: center; border-top: none; padding: 13px 18px; } } /* Offset per gli anchor del menu (#percorsi, #servizi, …): la sticky header non deve coprire il titolo della sezione raggiunta. */ .percorsi[id], .servizi[id], .casi[id], .faq[id], .contatti[id], #percorsi, #servizi, #casi, #faq, #contatti { scroll-margin-top: 96px; } /* ---------- Hero ---------- */ .hero { padding: 100px 0 90px; background: radial-gradient(circle at 20% 0%, var(--color-primary-soft) 0%, transparent 55%), radial-gradient(circle at 80% 100%, rgba(255, 151, 59, 0.06) 0%, transparent 40%), var(--color-bg); } .hero-inner { max-width: 920px; text-align: center; } .hero h1 { margin: 0 0 24px; } .hero .lede { font-size: 1.2rem; color: var(--color-ink-soft); max-width: 680px; margin: 0 auto 36px; } .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; } .hero-meta { font-size: .85rem; color: var(--color-muted); margin: 0; } /* ---------- Sections base ---------- */ section { padding: 90px 0; } .manifesto { background: var(--color-surface); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); } .percorsi { background: var(--color-bg-soft); } .servizi { background: var(--color-surface); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); } .casi { background: var(--color-bg-soft); } .metodo { background: var(--color-primary); color: #fff; } .faq { background: var(--color-bg-soft); } .contatti { background: var(--color-bg-soft); border-top: 1px solid var(--color-line); } /* ---------- Manifesto ---------- */ .manifesto-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; margin-bottom: 70px; } .manifesto-text { display: flex; flex-direction: column; gap: 18px; } .manifesto-illustration { margin: 0; } .manifesto-illustration img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: 0 14px 40px rgba(18, 114, 152, .12); } .manifesto-lede { font-size: 1.1rem; color: var(--color-ink); line-height: 1.65; } .pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .pillars li { padding: 32px 24px; background: var(--color-bg-soft); border: 1px solid var(--color-line); border-radius: var(--radius-lg); } .pillar-num { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 2.4vw, 2.4rem); font-weight: 700; line-height: 1; color: var(--color-accent); margin-bottom: 12px; letter-spacing: .02em; font-variant-numeric: tabular-nums; } .pillars h3 { margin-bottom: 8px; } .pillars p { font-size: 1rem; } /* ---------- Percorsi ---------- */ .percorsi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .percorso { position: relative; background: #fff; border: 1px solid var(--color-line); border-top: 4px solid var(--pc, var(--color-primary)); border-radius: var(--radius-lg); padding: 30px 28px 32px; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; } /* Accento-persona per ciascuna card */ .percorsi-grid .percorso:nth-child(1) { --pc: var(--color-primary); --pc-soft: var(--color-primary-soft); } .percorsi-grid .percorso:nth-child(2) { --pc: var(--color-primary-light); --pc-soft: #e4f3f9; } .percorsi-grid .percorso:nth-child(3) { --pc: var(--color-accent); --pc-soft: #fff3e6; } .percorso:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(18, 114, 152, .10); } /* Badge icona persona */ .percorso-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--pc-soft); color: var(--pc); margin-bottom: 18px; } .percorso-icon svg { width: 28px; height: 28px; } .percorso-tag { color: var(--pc) !important; margin-bottom: .85rem !important; } /* "Più richiesto": evidenza leggera, senza schiacciare le laterali */ .percorso-featured { border-color: var(--pc); box-shadow: 0 18px 46px rgba(18, 114, 152, .16); transform: translateY(-10px); } .percorso-featured:hover { transform: translateY(-12px); } .percorso-badge { position: absolute; top: 16px; right: 16px; background: var(--color-accent); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; } .percorso h3 { margin-top: 4px; } .percorso-desc { font-size: 1.02rem; margin-bottom: 20px; line-height: 1.6; } .percorso-list { list-style: none; padding: 0; margin: auto 0 0; } .percorso-list li { position: relative; padding: 10px 0 10px 24px; border-top: 1px solid var(--color-line); font-size: .92rem; color: var(--color-ink-soft); } .percorso-list li::before { content: "›"; position: absolute; left: 6px; top: 9px; color: var(--pc); font-weight: 600; } /* ---------- Servizi ---------- */ .servizi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 48px; } .servizio { padding: 8px 0 0; } .servizio-icon { font-size: 1.4rem; color: var(--color-primary); margin-bottom: 14px; } .servizio h3 { margin-bottom: 8px; } .servizio p { font-size: 1rem; line-height: 1.55; } .servizi-note { margin: 0; padding: 24px; background: var(--color-primary-soft); border-radius: var(--radius); font-size: .92rem; color: var(--color-ink); text-align: center; } /* ---------- Casi ---------- */ .casi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .caso { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .caso-thumb { aspect-ratio: 4 / 3; background: var(--color-primary-soft); overflow: hidden; position: relative; } .caso-thumb figure, .caso-thumb .wp-block-image { width: 100%; height: 100%; margin: 0; display: block; } .caso-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .caso-body { padding: 28px; } .caso h3 { margin: 6px 0 10px; } .caso-link { display: inline-block; margin-top: 8px; font-weight: 500; font-size: .92rem; } /* ---------- Metodo (sezione scura) ---------- */ .metodo .section-eyebrow { color: var(--color-accent); } .metodo h2 { color: #fff; } .metodo p { color: rgba(255,255,255,.78); } .metodo-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: step; } .metodo-steps li { padding: 28px 22px; background: rgba(255,255,255,.04); border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.08); } .metodo-num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-accent); color: #fff; font-family: var(--font-display); font-size: .95rem; margin-bottom: 14px; } .metodo-steps h3 { color: #fff; font-size: 1.15rem; margin-bottom: 8px; } .metodo-steps p { font-size: .98rem; line-height: 1.55; } /* ---------- FAQ ---------- */ .faq-list { max-width: 820px; } .faq-item { border-top: 1px solid var(--color-line-strong); padding: 0; } .faq-item:last-child { border-bottom: 1px solid var(--color-line-strong); } .faq-item summary { font-family: var(--font-display); font-size: 1.1rem; color: var(--color-ink); padding: 22px 36px 22px 0; cursor: pointer; position: relative; list-style: none; font-weight: 600; letter-spacing: -.015em; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--font-sans); font-size: 1.4rem; color: var(--color-primary); font-weight: 300; transition: transform .2s ease; } .faq-item[open] summary::after { content: "−"; } .faq-item p { padding: 0 36px 22px 0; font-size: 1rem; color: var(--color-ink-soft); } /* ---------- Contatti / Form ---------- */ .contatti .container { display: block; } .contatti .section-head { margin-bottom: 32px; max-width: 760px; } .lead-form { background: transparent; border: none; border-radius: 0; padding: 0; } .form-section { border: none; padding: 0 0 24px; margin: 0; } .form-section + .form-section { margin-top: 24px; padding-top: 28px; border-top: 1px solid var(--color-line); } .form-section legend { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.25rem; color: var(--color-ink); margin-bottom: 18px; padding: 0; } .form-step { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary); color: #fff; font-family: var(--font-sans); font-size: .8rem; font-weight: 600; letter-spacing: .02em; } .form-row { margin-bottom: 18px; } .form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-row label, .form-row-checks legend { display: block; font-size: .92rem; font-weight: 500; color: var(--color-ink); margin-bottom: 8px; padding: 0; } .req { color: var(--color-accent); } .form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"], .form-row input[type="url"], .form-row select, .form-row textarea { width: 100%; font-family: inherit; font-size: 1rem; padding: 11px 14px; background: #fff; border: 1px solid var(--color-line-strong); border-radius: var(--radius); color: var(--color-ink); transition: border-color .15s ease, box-shadow .15s ease; } .form-row select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .form-row textarea { resize: vertical; min-height: 120px; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); } .form-hint { margin: 6px 0 0; font-size: .82rem; color: var(--color-muted); } .form-row-checks { border: 1px solid var(--color-line); border-radius: var(--radius); padding: 18px 18px 8px; background: #fff; } .check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: .94rem; color: var(--color-ink); cursor: pointer; } .check input { margin-top: 4px; flex-shrink: 0; accent-color: var(--color-primary); } .form-privacy { padding: 16px; background: var(--color-primary-soft); border-radius: var(--radius); } .form-privacy .check { font-size: .88rem; color: var(--color-ink-soft); margin: 0; } /* CF7 reale: checkbox/acceptance escono come span.wpcf7-list-item > label > input + span.wpcf7-list-item-label (NON come .check, che è solo nel markup della bozza e CF7 non emette mai). Qui riproduciamo il layout previsto sulla struttura vera di CF7: vale per obiettivi (step 2), giorni (step 3) e la privacy. */ .lead-form .form-row-checks .wpcf7-checkbox, .lead-form .form-privacy .wpcf7-acceptance { display: block; } .lead-form .form-row-checks .wpcf7-list-item { display: block; margin: 0 0 10px; } .lead-form .form-privacy .wpcf7-list-item { display: block; margin: 0; } .lead-form .form-row-checks .wpcf7-list-item label, .lead-form .form-privacy .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } .lead-form .form-row-checks .wpcf7-list-item label { font-size: .94rem; color: var(--color-ink); } .lead-form .form-privacy .wpcf7-list-item label { font-size: .88rem; color: var(--color-ink-soft); } .lead-form .form-row-checks .wpcf7-list-item input[type="checkbox"], .lead-form .form-privacy .wpcf7-list-item input[type="checkbox"] { margin-top: 4px; flex-shrink: 0; accent-color: var(--color-primary); } .form-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .form-meta { font-size: .82rem; color: var(--color-muted); margin: 12px 0 0; } /* Wizard navigation (Avanti / Indietro). Quando c'è un solo bottone (step 1), margin-left:auto lo spinge a destra. Quando ci sono due, justify-content space-between li distribuisce. */ .form-wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; } /* CF7 wpautop wrappa il contenuto di step 3 in

: propaghiamo flex al

e nascondiamo i
generati automaticamente. */ .form-wizard-nav > p { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0; width: 100%; flex-wrap: wrap; } .form-wizard-nav > p > br { display: none; } .form-wizard-nav > .btn:only-child, .form-wizard-nav > .wpcf7-submit:only-child { margin-left: auto; } .form-wizard-nav .btn[disabled], .form-wizard-nav .btn:disabled, .form-wizard-nav .wpcf7-submit[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; } /* CF7 appende uno

gestiscano da sole sfondi a tutta pagina e .container interno. ===================================================== */ .dm-fullbleed-page, .dm-fullbleed-page #content, .dm-fullbleed-page .site-content, .dm-fullbleed-page #primary, .dm-fullbleed-page .content-area, .dm-fullbleed-page #main, .dm-fullbleed-page .inside-article, .dm-fullbleed-page .entry-content { display: block; width: 100%; max-width: none; padding: 0; margin: 0; } /* ===================================================== PAGINA BLOG (blog.html) ===================================================== */ .page-hero { padding: clamp(48px, 6vw, 72px) 0 36px; background: radial-gradient(circle at 20% 0%, var(--color-primary-soft) 0%, transparent 55%), radial-gradient(circle at 80% 100%, rgba(255, 151, 59, 0.05) 0%, transparent 40%), var(--color-bg); } .page-hero-inner { max-width: 820px; } .page-hero h1 { margin: 0 0 20px; } .page-hero .lede { font-size: 1.15rem; color: var(--color-ink-soft); max-width: 640px; } /* Testata magazine: intro contenuta + articolo in evidenza nella testata. */ .blog-hero-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); } .blog-hero .post-featured { margin-bottom: 0; } .blog-list { padding: 40px 0 80px; background: var(--color-bg); } /* ---------- Filtri categoria ---------- */ .blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--color-line); } .filter-chip { border: 1px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-ink-soft); padding: 8px 16px; border-radius: 100px; font-size: .88rem; font-weight: 500; cursor: pointer; transition: all .15s ease; } .filter-chip:hover { border-color: var(--color-primary); color: var(--color-primary); } .filter-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } /* ---------- Post featured (in evidenza) ---------- */ .post-featured { display: grid; grid-template-columns: 5fr 4fr; gap: 0; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 56px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .post-featured:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--color-primary-light); } .post-featured-thumb { display: block; min-height: 320px; background: var(--color-primary-soft); } .post-featured-body { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; } .post-featured h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin: 0 0 16px; line-height: 1.2; } .post-featured h2 a { color: var(--color-ink); text-decoration: none; } .post-featured h2 a:hover { color: var(--color-primary); } /* ---------- Empty state filtri ---------- */ .blog-empty { padding: 60px 20px; text-align: center; color: var(--color-ink-soft); background: var(--color-surface); border: 1px dashed var(--color-line-strong); border-radius: var(--radius-lg); margin-top: 16px; } /* ---------- Paginazione ---------- */ .pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 60px; padding-top: 36px; border-top: 1px solid var(--color-line); } .pagination a { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 12px; border-radius: var(--radius); font-size: .92rem; color: var(--color-ink-soft); text-decoration: none; border: 1px solid transparent; } .pagination a:hover { background: var(--color-primary-soft); color: var(--color-primary); } .pagination a.is-active { background: var(--color-primary); color: #fff; } .pagination-dots { color: var(--color-muted); padding: 0 6px; } .pagination-next { font-weight: 500; } /* ---------- CTA in fondo al blog ---------- */ .blog-cta { background: var(--color-primary); color: #fff; text-align: center; padding: 80px 0; } .blog-cta h2 { color: #fff; margin-bottom: 12px; } .blog-cta p { color: rgba(255,255,255,.85); max-width: 540px; margin: 0 auto 28px; font-size: 1.1rem; } .blog-cta .btn-primary { background: var(--color-cta); border-color: var(--color-cta); text-shadow: 0 1px 1px rgba(90, 45, 5, .35); } .blog-cta .btn-primary:hover { background: var(--color-cta-dark); border-color: var(--color-cta-dark); } /* ===================================================== PAGINA ARTICOLO (articolo.html) ===================================================== */ .breadcrumb { padding: 18px 0; font-size: .85rem; background: var(--color-bg); border-bottom: 1px solid var(--color-line); } .breadcrumb a { color: var(--color-ink-soft); } .breadcrumb a:hover { color: var(--color-primary); } .breadcrumb span[aria-hidden] { color: var(--color-muted); margin: 0 6px; } .breadcrumb span[aria-current] { color: var(--color-ink); font-weight: 500; } .article { background: var(--color-bg); } .article-header { padding: 64px 0 32px; } .article-narrow { max-width: 760px; margin: 0 auto; } .article-header h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); letter-spacing: -.005em; font-weight: 500; margin: 14px 0 24px; line-height: 1.12; } .article-lede { font-size: 1.25rem; line-height: 1.5; color: var(--color-ink-soft); margin: 0 0 36px; font-weight: 400; } .post-readtime-inline { color: var(--color-muted); } .article-author { display: flex; align-items: center; gap: 14px; padding-top: 28px; border-top: 1px solid var(--color-line); } .article-author-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--color-primary); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .88rem; letter-spacing: .03em; } .article-author-name { margin: 0; font-weight: 600; color: var(--color-ink); font-size: .94rem; } .article-author-role { margin: 0; font-size: .82rem; color: var(--color-muted); } .article-cover { height: 420px; margin: 0 0 60px; background-size: cover; background-position: center; } .article-body { padding-bottom: 80px; } .article-body p, .article-body ul, .article-body ol, .article-body blockquote { font-family: var(--font-sans); font-size: 1.12rem; line-height: 1.7; color: var(--color-ink); margin: 0 0 1.4em; } .article-intro { font-size: 1.2rem !important; color: var(--color-ink) !important; font-weight: 400; } .article-body h2 { font-size: 1.9rem; margin: 56px 0 18px; letter-spacing: 0; font-weight: 500; } .article-body h3 { font-size: 1.25rem; margin: 40px 0 14px; color: var(--color-ink); } .article-body ul, .article-body ol { padding-left: 24px; } .article-body li { margin-bottom: .6em; } .article-body blockquote { border-left: 3px solid var(--color-accent); padding: 8px 0 8px 24px; margin: 32px 0; font-style: italic; color: var(--color-ink); } .article-body strong { color: var(--color-ink); font-weight: 600; } .article-body a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; } .article-body em { color: var(--color-ink); font-family: var(--font-sans); font-weight: 500; } /* ---------- Indice articolo (auto-TOC dagli H2) ---------- */ .post-toc { margin: 0 0 48px; padding: 22px 26px 24px; background: var(--color-bg-soft); border-left: 3px solid var(--color-primary); border-radius: 6px; } .post-toc-label { margin: 0 0 10px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); } .article-body .post-toc-list { margin: 0; padding-left: 22px; font-family: var(--font-sans); font-size: 1rem; line-height: 1.55; color: var(--color-ink); } .article-body .post-toc-list li { margin: 4px 0; font-size: 1rem; } .post-toc-list a { color: var(--color-ink-soft); text-decoration: none; border-bottom: 1px solid transparent; } .post-toc-list a:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); } /* offset per anchor scroll, cosi' l'H2 non finisce sotto la sticky header */ .article-body h2 { scroll-margin-top: 96px; } .article-body h3 { scroll-margin-top: 96px; } /* ---------- FAQ in fondo articolo ---------- */ .post-faq { margin: 24px 0 16px; border-top: 1px solid var(--color-line); } .faq-item { border-bottom: 1px solid var(--color-line); padding: 18px 0; } .faq-item[open] { background: var(--color-bg-soft); margin: 0 -16px; padding: 18px 16px; border-radius: 6px; border-bottom: 1px solid transparent; } .faq-q { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--color-ink); cursor: pointer; list-style: none; display: flex; align-items: flex-start; gap: 12px; line-height: 1.4; } .faq-q::-webkit-details-marker { display: none; } .faq-q::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; background: var(--color-primary-soft); color: var(--color-primary); border-radius: 50%; font-size: 1.1rem; font-weight: 600; line-height: 1; transition: transform .2s ease, background .2s ease; } .faq-item[open] .faq-q::before { content: "−"; background: var(--color-primary); color: #fff; } .faq-a { padding: 14px 0 4px 34px; font-size: 1rem; color: var(--color-ink-soft); line-height: 1.6; } .faq-a p { margin: 0 0 .8em; font-size: 1rem; line-height: 1.6; color: var(--color-ink-soft); } .faq-a p:last-child { margin-bottom: 0; } /* ---------- Box di confronto a 3 colonne ---------- */ .dm-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 36px 0; font-family: var(--font-sans); } .dm-compare-col { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 10px; padding: 20px 22px; border-top: 4px solid var(--color-line-strong); } .dm-compare-yes { border-top-color: #2d6e35; } .dm-compare-maybe { border-top-color: var(--color-accent); } .dm-compare-no { border-top-color: #c8403d; } .dm-compare-title { margin: 0 0 12px !important; font-family: var(--font-display); font-size: .82rem !important; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; } .dm-compare-yes .dm-compare-title { color: #2d6e35; } .dm-compare-maybe .dm-compare-title { color: var(--color-accent-dark); } .dm-compare-no .dm-compare-title { color: #c8403d; } .dm-compare-body ul { margin: 0; padding-left: 18px; font-size: .95rem !important; line-height: 1.55; } .dm-compare-body li { margin-bottom: 6px; color: var(--color-ink); } .dm-compare-body p { margin: 0 0 .6em; font-size: .95rem !important; line-height: 1.55; } /* ---------- Callout (Nota, Attenzione, In sintesi) ---------- */ .dm-callout { margin: 32px 0; padding: 18px 22px; border-radius: 8px; border-left: 3px solid var(--color-primary); background: var(--color-primary-soft); font-family: var(--font-sans); } .dm-callout-warn { border-left-color: #c8403d; background: #fdeded; } .dm-callout-tip { border-left-color: #2d6e35; background: #ecf6ee; } .dm-callout-title { margin: 0 0 6px !important; font-family: var(--font-display); font-size: .8rem !important; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--color-primary); } .dm-callout-warn .dm-callout-title { color: #c8403d; } .dm-callout-tip .dm-callout-title { color: #2d6e35; } .dm-callout-body p { margin: 0 0 .6em !important; font-size: 1rem !important; line-height: 1.6 !important; color: var(--color-ink) !important; } .dm-callout-body p:last-child { margin-bottom: 0 !important; } .article-share { margin-top: 60px; padding-top: 32px; border-top: 1px solid var(--color-line); } .article-share-label { font-size: .85rem; color: var(--color-muted); margin: 0 0 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; } .article-share-buttons { display: flex; gap: 8px; flex-wrap: wrap; } .share-btn { padding: 10px 18px; background: var(--color-surface); border: 1px solid var(--color-line-strong); border-radius: var(--radius); font-size: .88rem; font-weight: 500; color: var(--color-ink-soft); text-decoration: none; } .share-btn:hover { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary); } /* ---------- Sezione correlati ---------- */ .related { padding: 80px 0; background: var(--color-surface); border-top: 1px solid var(--color-line); } /* ---------- Responsive blog ---------- */ @media (max-width: 960px) { .post-grid, .post-grid-home { grid-template-columns: 1fr 1fr; } .section-head-row { flex-direction: column; align-items: flex-start; } .post-featured { grid-template-columns: 1fr; } .post-featured-thumb { min-height: 220px; aspect-ratio: 16 / 9; } .post-featured-body { padding: 32px 28px; } .article-header { padding: 40px 0 24px; } .article-cover { height: 280px; margin-bottom: 40px; } } @media (max-width: 560px) { .post-grid, .post-grid-home { grid-template-columns: 1fr; } .blog-filters { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .filter-chip { flex-shrink: 0; } .article-body p, .article-body ul, .article-body ol { font-size: 1.05rem; } .article-body h2 { font-size: 1.4rem; margin-top: 40px; } .dm-compare { grid-template-columns: 1fr; } } /* ===================================================== VARIANTI DI DESIGN — banner + hero alternativi + trust ===================================================== */ /* ---------- Variant switcher bar ---------- */ .variant-bar { background: var(--color-ink); color: rgba(255,255,255,.9); padding: 10px 0; font-size: .85rem; position: relative; z-index: 60; } .variant-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .variant-bar-label { font-weight: 500; color: rgba(255,255,255,.7); letter-spacing: .03em; } .variant-bar-links { display: flex; gap: 6px; flex-wrap: wrap; } .variant-bar-links a { padding: 5px 12px; border-radius: 100px; color: rgba(255,255,255,.85); text-decoration: none; font-size: .82rem; border: 1px solid rgba(255,255,255,.15); transition: all .15s ease; } .variant-bar-links a:hover { background: rgba(255,255,255,.08); color: #fff; } .variant-bar-links a.is-current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } /* ===================================================== VARIANTE 1 — EDITORIALE Hero split: testo + composizione di card mockup ===================================================== */ .hero-split { padding: 90px 0 80px; background: radial-gradient(circle at 90% 20%, rgba(86, 178, 215, .12) 0%, transparent 50%), radial-gradient(circle at 10% 90%, rgba(255, 151, 59, 0.05) 0%, transparent 40%), var(--color-bg); } .hero-split-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .hero-split .eyebrow { margin-bottom: 18px; } .hero-split h1 { margin: 0 0 24px; text-align: left; } .hero-split .lede { text-align: left; font-size: 1.18rem; margin: 0 0 32px; max-width: 540px; } .hero-split .hero-actions { justify-content: flex-start; margin: 0 0 24px; } .hero-split .hero-meta { text-align: left; margin: 0; } /* Mockup composition a destra */ .hero-mockup { position: relative; min-height: 480px; } .mock-card { position: absolute; background: #fff; border: 1px solid var(--color-line); border-radius: 14px; padding: 18px 20px; box-shadow: 0 8px 30px rgba(18, 114, 152, .08); font-size: .85rem; line-height: 1.5; } .mock-card-1 { /* anteprima articolo */ top: 0; left: 0; width: 70%; z-index: 2; } .mock-card-1 .mock-cat { display: inline-block; padding: 3px 9px; background: var(--color-primary-soft); color: var(--color-primary); border-radius: 100px; font-size: .65rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; } .mock-card-1 .mock-title { font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: var(--color-ink); margin: 0 0 6px; line-height: 1.3; } .mock-card-1 .mock-excerpt { color: var(--color-ink-soft); font-size: .78rem; margin: 0; } .mock-card-2 { /* scheda patologia */ top: 145px; right: 0; width: 62%; z-index: 3; border-left: 3px solid var(--color-accent); } .mock-card-2 .mock-label { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-dark); font-weight: 600; margin-bottom: 8px; } .mock-card-2 .mock-h { font-family: var(--font-display); font-size: .95rem; color: var(--color-ink); margin: 0 0 8px; font-weight: 500; } .mock-card-2 .mock-body { font-size: .76rem; color: var(--color-ink-soft); line-height: 1.5; } .mock-card-3 { /* post social */ bottom: 0; left: 30px; width: 58%; z-index: 1; padding: 14px 16px; } .mock-card-3 .mock-avatar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .mock-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); } .mock-avatar-info { font-size: .72rem; color: var(--color-ink-soft); line-height: 1.2; } .mock-avatar-info strong { color: var(--color-ink); display: block; font-weight: 600; font-size: .78rem; } .mock-card-3 .mock-post { font-size: .78rem; color: var(--color-ink); line-height: 1.5; margin: 0 0 8px; } .mock-card-3 .mock-stats { font-size: .7rem; color: var(--color-muted); letter-spacing: .03em; } /* ---------- Trust band — NUMERI ---------- */ .trust-numeri { padding: 50px 0; background: var(--color-primary); color: #fff; } .trust-numeri-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; text-align: center; } .trust-num { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 3.5vw, 2.8rem); letter-spacing: -.01em; line-height: 1; color: #fff; margin: 0 0 6px; font-variant-numeric: tabular-nums; } .trust-num-accent { color: var(--color-accent); } .trust-label { font-size: .88rem; color: rgba(255,255,255,.78); letter-spacing: .02em; } /* ===================================================== VARIANTE 2 — MAGAZINE Hero immersivo dark + logo strip + testimonial ===================================================== */ .theme-magazine { --color-bg-soft: #faf6f0; } /* ---------- Hero illustrato (illustrazione reale, non più sfondo) ---------- Desktop: split a 2 colonne su fondo chiaro — testo (titoli + lede + CTA) a sinistra, illustrazione (bordi stondati + ombra) a destra. Mobile (vedi media query): illustrazione a tutta larghezza non tagliata, con i titoli sovrapposti in basso su uno scrim. */ .hero-illu { position: relative; /* Override del padding di default delle
(90px): l'hero è la prima sezione sotto l'header e non deve lasciare un grande vuoto in alto. */ padding: 20px 0; background: radial-gradient(circle at 12% 0%, var(--color-primary-soft) 0%, transparent 52%), radial-gradient(circle at 92% 96%, rgba(255, 151, 59, .07) 0%, transparent 46%), var(--color-bg); overflow: hidden; } .hero-illu-inner { display: grid; /* Hero più largo del container standard (1120) per dare respiro sia al pannello testo sia all'illustrazione. */ max-width: 1320px; grid-template-columns: [full-start] minmax(460px, 0.6fr) [panel-end] 0.4fr [full-end]; grid-template-rows: auto auto; grid-template-areas: "titles ." "body ."; row-gap: 12px; align-items: center; position: relative; padding-top: 28px; padding-bottom: 28px; } /* Illustrazione grande: occupa la parte destra e riempie l'altezza, facendo da sfondo al pannello di testo sovrapposto. */ .hero-illu-figure { grid-column: full-start / full-end; grid-row: 1 / 3; justify-self: end; align-self: center; width: 56%; margin: 0; z-index: 0; } /* Pannello semi-trasparente dietro al testo, sovrapposto al bordo sinistro dell'immagine (effetto "contenuto sopra l'immagine" anche su desktop). */ .hero-illu-inner::before { content: ""; grid-column: full-start / panel-end; grid-row: 1 / 3; align-self: stretch; margin: 0; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: var(--radius-lg); box-shadow: 0 22px 54px rgba(18, 114, 152, .16); z-index: 1; } .hero-illu-titles { grid-area: titles; z-index: 2; align-self: end; padding: 36px 34px 0; } .hero-illu-body { grid-area: body; z-index: 2; align-self: start; padding: 0 34px 36px; } .hero-illu-figure img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: 0 18px 50px rgba(18, 114, 152, .14); } /* Hero video: stessa resa dell'immagine. Aspect 16:9 nativo del video, object-fit cover così il poster (3:2) riempie senza deformarsi mentre carica. */ .hero-illu-figure video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: var(--radius-lg); box-shadow: 0 18px 50px rgba(18, 114, 152, .14); background: var(--color-primary-soft); } .hero-illu-figure video img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } .hero-illu .eyebrow { color: var(--color-primary); margin-bottom: 14px; } .hero-illu h1 { color: var(--color-ink); font-size: clamp(2.1rem, 3.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.005em; font-weight: 600; margin: 0; text-align: left; } .hero-illu h1 em { color: var(--color-accent-dark); font-style: italic; } /* ---- Parole evidenziate nell'hero: marker animato (effetto wow) ---- Le due parole chiave ("Comunica" e "professionalità") vengono avvolte in dal JS. Dietro al testo un marker accent si "disegna" da sinistra (con micro-rimbalzo), ha un bagliore e una luce che scorre. Testo invariato (leggibile su bianco e su scrim scuro). */ .hero-hl { position: relative; isolation: isolate; font-weight: 700; } .hero-hl::before { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.04em; bottom: .04em; height: .26em; border-radius: .16em; /* Azzurro del logo (--color-primary-light = #56B2D7): l'enfasi resta distinta dall'arancione dei pulsanti (arancione = azione, azzurro = enfasi/brand). Il punto centrale solo di un soffio più chiaro: serve allo sheen, non altera il colore percepito (resta l'azzurro del logo). */ background: linear-gradient(90deg, var(--color-primary-light) 0%, #6abfdd 50%, var(--color-primary-light) 100%); background-size: 220% 100%; box-shadow: 0 4px 12px rgba(86, 178, 215, .28); transform: scaleX(0); transform-origin: left center; animation: hero-hl-draw .8s cubic-bezier(.22, 1.1, .36, 1) .5s both, hero-hl-sheen 3.2s ease-in-out 1.6s infinite; } .hero-hl:nth-of-type(2)::before { animation: hero-hl-draw .8s cubic-bezier(.22, 1.1, .36, 1) .95s both, hero-hl-sheen 3.2s ease-in-out 2s infinite; } @keyframes hero-hl-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes hero-hl-sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } } /* Hover: un riflesso di luce attraversa la sottolineatura (glint one-shot). Vive su ::after, stessa forma/posizione del marker, dietro al testo. */ .hero-hl::after { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.04em; bottom: .04em; height: .26em; border-radius: .16em; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .9) 50%, transparent 70%); background-size: 220% 100%; background-position: 150% 0; opacity: 0; pointer-events: none; } .hero-hl:hover::after { animation: hero-hl-glint .65s ease-out both; } @keyframes hero-hl-glint { 0% { background-position: 150% 0; opacity: 0; } 15% { opacity: 1; } 100% { background-position: -60% 0; opacity: 0; } } /* Hover: le lettere fanno un'onda morbida, una dopo l'altra (stagger via --i). inline-block per poterle traslare; il flusso del titolo resta invariato. */ .hero-hl__char { display: inline-block; will-change: transform; } .hero-hl:hover .hero-hl__char { animation: hero-hl-wave .5s ease both; animation-delay: calc(var(--i, 0) * 38ms); } @keyframes hero-hl-wave { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-.07em); } } @media (prefers-reduced-motion: reduce) { .hero-hl::before, .hero-hl:nth-of-type(2)::before { animation: none; transform: scaleX(1); } .hero-hl:hover::after { animation: none; opacity: 0; } .hero-hl:hover .hero-hl__char { animation: none; transform: none; } } /* ---- CTA primaria dell'hero: più grande, 3D, con richiamo animato ---- 3D: rilievo con "gradino" d'ombra (box-shadow solido) + lucido interno; si preme al :active. Richiamo: parte ~2s (dopo le due parole evidenziate) con un rimbalzo, poi una luce che scorre in loop. */ /* ===================================================== Pulsanti 3D piatti con SPESSORE — usati per: CTA hero, "Parliamone" nel menu, submit del form. Faccia piatta su uno spessore solido (box-shadow 0 --thk 0 scuro); al :active si abbassa di --thk (premuta). Animazione: un RIFLESSO DI LUCE che attraversa il pulsante (background-position animata: funziona anche su ). L'hero lo ripete in loop come richiamo (dopo le due parole); tutti lo fanno anche all'hover. ===================================================== */ .hero-illu .hero-actions .btn-primary, .site-header .main-navigation .main-nav > ul > li:last-child > a, .site-header .main-navigation.toggled .main-nav > ul > li:last-child > a, .lead-form .wpcf7-submit { --thk: 6px; position: relative; border: none; color: #fff; text-shadow: 0 1px 1px rgba(90, 45, 5, .35); /* micro-ombra: testo bianco più leggibile sull'arancio */ background-color: var(--color-cta); background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%); background-repeat: no-repeat; background-size: 220% 100%; background-position: -25% 0; /* riflesso fuori campo a riposo */ box-shadow: 0 var(--thk) 0 var(--color-cta-dark), 0 calc(var(--thk) + 4px) 12px rgba(120, 60, 10, .26); transform: translateY(0); transition: transform .09s ease, box-shadow .09s ease, filter .12s ease; } .hero-illu .hero-actions .btn-primary:active, .site-header .main-navigation .main-nav > ul > li:last-child > a:active, .site-header .main-navigation.toggled .main-nav > ul > li:last-child > a:active, .lead-form .wpcf7-submit:active { transform: translateY(var(--thk)); box-shadow: 0 0 0 var(--color-cta-dark), 0 2px 4px rgba(120, 60, 10, .26); } .hero-illu .hero-actions .btn-primary:focus-visible, .site-header .main-navigation .main-nav > ul > li:last-child > a:focus-visible, .site-header .main-navigation.toggled .main-nav > ul > li:last-child > a:focus-visible, .lead-form .wpcf7-submit:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; } .hero-illu .hero-actions .btn-primary:hover, .site-header .main-navigation .main-nav > ul > li:last-child > a:hover, .site-header .main-navigation.toggled .main-nav > ul > li:last-child > a:hover, .lead-form .wpcf7-submit:hover { color: #fff; filter: brightness(1.06); animation: btn-shine-once .85s ease; } /* spessore + dimensioni per contesto */ .hero-illu .hero-actions .btn-primary { --thk: 7px; padding: 16px 34px; font-size: 1.06rem; font-weight: 600; border-radius: 10px; } .lead-form .wpcf7-submit { --thk: 6px; padding: 15px 32px; font-size: 1rem; border-radius: 10px; } /* Il submit è un : GeneratePress lo colora di grigio (#55555e / #3f4047) su hover e focus. Ri-affermiamo l'arancione del CTA così si comporta come gli altri pulsanti (hero/header), che sono e non vengono toccati da GP. */ .lead-form .wpcf7-submit:hover, .lead-form .wpcf7-submit:focus { background-color: var(--color-cta); color: #fff; } .site-header .main-navigation .main-nav > ul > li:last-child > a { --thk: 4px; border-radius: 8px; } .site-header .main-navigation.toggled .main-nav > ul > li:last-child > a { --thk: 5px; border-radius: 8px; } /* hero: riflesso in loop come richiamo, dopo le due parole evidenziate */ .hero-illu .hero-actions .btn-primary { animation: btn-shine 5s ease-in-out 2.2s infinite; } @keyframes btn-shine { 0% { background-position: -25% 0; } 16%, 100% { background-position: 125% 0; } } @keyframes btn-shine-once { from { background-position: -25% 0; } to { background-position: 125% 0; } } @media (prefers-reduced-motion: reduce) { .hero-illu .hero-actions .btn-primary, .hero-illu .hero-actions .btn-primary:hover, .site-header .main-navigation .main-nav > ul > li:last-child > a:hover, .site-header .main-navigation.toggled .main-nav > ul > li:last-child > a:hover, .lead-form .wpcf7-submit:hover { animation: none; } } .hero-illu .lede { color: var(--color-ink-soft); font-size: 1.12rem; text-align: left; margin: 0 0 24px; line-height: 1.55; max-width: 700px; } .hero-illu .hero-meta { max-width: 700px; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; } .hero-meta { font-size: .86rem; color: var(--color-muted); margin: 0; max-width: 520px; line-height: 1.5; } .hero-meta a { color: var(--color-primary); font-weight: 500; } .hero-meta a:hover { text-decoration: underline; } /* Trust band — LOGHI CLIENTI */ .trust-loghi { padding: 40px 0; background: var(--color-surface); border-bottom: 1px solid var(--color-line); } .trust-loghi-label { text-align: center; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 24px; font-weight: 500; } .trust-loghi-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 36px 48px; } .trust-logo { font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: .01em; color: var(--color-ink-soft); opacity: .7; transition: opacity .15s ease; text-decoration: none; padding: 8px 0; border-bottom: 1px solid transparent; } .trust-logo:hover { opacity: 1; color: var(--color-primary); border-bottom-color: var(--color-primary); } /* Testimonial band */ .testimonial { padding: 90px 0; background: var(--color-bg-soft); } .testimonial-inner { max-width: 820px; margin: 0 auto; text-align: center; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 60px); box-shadow: 0 2px 4px rgba(20, 30, 40, .04), 0 26px 64px rgba(18, 114, 152, .12); } .testimonial-quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.35; letter-spacing: -.005em; color: var(--color-ink); margin: 0 0 32px; font-style: italic; } .testimonial-quote::before { content: "\201C"; display: block; font-size: 4rem; color: var(--color-accent); line-height: .5; margin-bottom: 16px; font-family: var(--font-display); font-style: normal; } .testimonial-author { display: flex; align-items: center; justify-content: center; gap: 14px; } .testimonial-avatar { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 500; font-size: 1rem; } .testimonial-avatar { overflow: hidden; } .testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .testimonial-name { font-weight: 600; color: var(--color-ink); font-size: 1rem; } .testimonial-role { font-size: .88rem; color: var(--color-muted); } /* Magazine — overrides di intensità colore */ .theme-magazine .manifesto { background: #faf6f0; } .theme-magazine .pillars li { background: #fff; border-color: var(--color-line); } .theme-magazine .pillars li:nth-child(2) { background: var(--color-primary-soft); } .theme-magazine .pillars li:nth-child(3) { background: #fff3e6; } .theme-magazine .casi { background: var(--color-surface); } .theme-magazine .servizi { background: #faf6f0; } .theme-magazine .blog-home { background: var(--color-surface); } /* ===================================================== VARIANTE 3 — STUDIO CONTEMPORANEO Hero tipografico + shapes + testimonial big ===================================================== */ .hero-typo { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 100px 0; background: var(--color-bg); } .hero-typo-shape { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; pointer-events: none; } .hero-typo-shape-1 { width: 480px; height: 480px; background: var(--color-accent); top: -100px; left: -120px; } .hero-typo-shape-2 { width: 560px; height: 560px; background: var(--color-primary-light); bottom: -180px; right: -150px; } .hero-typo-shape-3 { width: 280px; height: 280px; background: var(--color-primary); top: 30%; right: 25%; opacity: .2; } .hero-typo-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 320px; gap: 60px; align-items: end; } .hero-typo h1 { font-size: clamp(3.4rem, 9vw, 7.5rem); font-weight: 500; line-height: .95; letter-spacing: -.02em; margin: 0 0 30px; text-align: left; color: var(--color-ink); } .hero-typo h1 .accent-line { display: block; color: var(--color-accent); font-style: italic; font-weight: 400; } .hero-typo h1 .quiet-line { display: block; font-size: .55em; color: var(--color-ink-soft); font-weight: 400; letter-spacing: .005em; margin-top: .25em; line-height: 1.2; } .hero-typo-aside { padding: 24px; border-left: 1px solid var(--color-line); } .hero-typo-aside .lede { font-size: 1.02rem; color: var(--color-ink-soft); margin: 0 0 24px; line-height: 1.55; text-align: left; } .hero-typo-aside .hero-actions { flex-direction: column; align-items: stretch; margin: 0; } .hero-typo-aside .btn { width: 100%; } .hero-typo-aside .hero-meta { text-align: left; margin: 18px 0 0; } /* Trust band — TESTIMONIAL BIG (per v3) */ .trust-testimonial { padding: 70px 0; background: var(--color-surface); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); } .trust-testimonial-inner { max-width: 920px; margin: 0 auto; display: grid; grid-template-columns: 80px 1fr; gap: 30px; align-items: center; } .trust-testimonial-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; } .trust-testimonial-quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem, 2vw, 1.45rem); line-height: 1.45; color: var(--color-ink); margin: 0 0 12px; letter-spacing: 0; } .trust-testimonial-byline { font-size: .92rem; color: var(--color-muted); } .trust-testimonial-byline strong { color: var(--color-ink); font-weight: 600; } /* V3 — overrides minimal/contemporary */ .theme-contemporaneo .manifesto { background: var(--color-surface); } .theme-contemporaneo .pillars li { background: transparent; border: none; border-top: 1px solid var(--color-line-strong); border-radius: 0; padding: 32px 0 0; } .theme-contemporaneo .percorsi { background: var(--color-surface); } .theme-contemporaneo .servizi { background: var(--color-bg-soft); } .theme-contemporaneo .casi { background: var(--color-surface); } /* ===================================================== Responsive varianti ===================================================== */ @media (max-width: 960px) { .hero-split-inner { grid-template-columns: 1fr; gap: 40px; } .hero-mockup { min-height: 420px; max-width: 480px; margin: 0 auto; } .hero-split h1, .hero-split .lede { text-align: center; } .hero-split .hero-actions { justify-content: center; } .hero-split .hero-meta { text-align: center; } .trust-numeri-grid { gap: 28px; } /* Hero illustrato — mobile: illustrazione a tutta larghezza (non tagliata, bordi stondati); i titoli (eyebrow + H1) sovrapposti alla parte bassa dell'immagine con uno scrim; lede + CTA sotto, su fondo bianco. */ .hero-illu-inner { grid-template-columns: 1fr; grid-template-rows: auto auto; grid-template-areas: "figure" "body"; column-gap: 0; row-gap: 0; padding-top: 12px; padding-bottom: 28px; } /* Annulla il pannello/overlap del desktop: su mobile è immagine + titoli sopra. */ .hero-illu-inner::before { display: none; } .hero-illu-figure { grid-area: figure; width: auto; justify-self: stretch; } .hero-illu-titles { grid-area: figure; /* stessa cella dell'immagine -> overlay */ align-self: end; /* ancorata in basso */ z-index: 2; padding: 70px 18px 16px; background: linear-gradient(to top, rgba(8, 18, 26, .9) 0%, rgba(8, 18, 26, .66) 46%, rgba(8, 18, 26, 0) 100%); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .hero-illu-titles .eyebrow { color: var(--color-primary-light); margin-bottom: 8px; } .hero-illu-titles h1 { color: #fff; font-size: clamp(1.4rem, 5.4vw, 1.85rem); line-height: 1.12; } /* Su scrim scuro il testo evidenziato è bianco: l'evidenziatore pieno dietro abbasserebbe il contrasto. Lo riduciamo a una sottolineatura marker, così il testo bianco resta sopra e leggibile. */ .hero-illu-titles .hero-hl::before { height: .14em; bottom: -.04em; box-shadow: none; } .hero-illu-body { padding-top: 24px; } .hero-illu-body .lede { font-size: 1.04rem; max-width: none; } .hero-actions .btn { flex: 1 1 auto; text-align: center; } .hero-typo-inner { grid-template-columns: 1fr; gap: 40px; } .hero-typo-aside { border-left: none; border-top: 1px solid var(--color-line); padding: 24px 0 0; } .trust-testimonial-inner { grid-template-columns: 1fr; text-align: center; } .trust-testimonial-avatar { margin: 0 auto; } } @media (max-width: 560px) { .hero-mockup { min-height: 380px; } .mock-card-1 { width: 78%; } .mock-card-2 { width: 70%; top: 130px; } .mock-card-3 { width: 70%; left: 15%; } .trust-numeri-grid { gap: 24px; } .trust-loghi-strip { gap: 24px 32px; } } /* ===================================================== Infografiche standardizzate (dm-infographic) - Namespace condiviso .dm-infographic per tutte le infografiche custom. - Prima variante: .dm-timeline (sequenza di step animati). - Animazioni "gate-d" da html.dm-js (settata dal JS): se JS non gira o siamo nell'editor i contenuti sono visibili, non nascosti. - Reveal on-scroll via [data-dm-reveal] + IntersectionObserver (vedi js). - Stagger per-step via inline --dm-step-index sul singolo step. - Rispetta prefers-reduced-motion: tutto compare instant senza moto. ===================================================== */ .dm-infographic { --dm-anim-duration: .7s; --dm-anim-stagger: 130ms; --dm-anim-ease: cubic-bezier(.2, .8, .2, 1); --dm-track-color: var(--color-line-strong); --dm-track-fill: var(--color-primary); --dm-marker-bg: var(--color-primary); --dm-marker-fg: #fff; --dm-marker-ring: var(--color-accent); --dm-icon-color: var(--color-primary); --dm-title-color: var(--color-ink); --dm-desc-color: var(--color-ink-soft); position: relative; margin: 36px 0; } /* Tema scuro per sezioni con background blu petrolio o accento */ .dm-infographic--dark { --dm-track-color: rgba(255, 255, 255, .14); --dm-track-fill: var(--color-accent); --dm-marker-bg: var(--color-accent); --dm-marker-fg: #fff; --dm-marker-ring: rgba(255, 255, 255, .32); --dm-icon-color: var(--color-accent); --dm-title-color: #fff; --dm-desc-color: rgba(255, 255, 255, .78); } /* ---------- Timeline: struttura base ---------- */ .dm-timeline__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 28px; position: relative; z-index: 1; } .dm-timeline__step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; --dm-delay: calc(var(--dm-step-index, 0) * var(--dm-anim-stagger)); } .dm-timeline__marker { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--dm-marker-bg); color: var(--dm-marker-fg); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; z-index: 2; transition: transform .25s var(--dm-anim-ease), box-shadow .25s var(--dm-anim-ease); cursor: default; } /* Anello che pulsa attorno al marker al reveal */ .dm-timeline__marker::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--dm-marker-ring); opacity: 1; transform: scale(1); transition: opacity .45s var(--dm-anim-ease), transform .55s var(--dm-anim-ease); transition-delay: calc(var(--dm-delay) + .15s); } .dm-timeline__body { min-width: 0; } .dm-timeline__icon { display: inline-flex; width: 28px; height: 28px; color: var(--dm-icon-color); margin: 2px 0 12px; transition: transform .35s var(--dm-anim-ease); } .dm-timeline__icon svg { width: 100%; height: 100%; display: block; } .dm-timeline__title { color: var(--dm-title-color); font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin: 0 0 8px; letter-spacing: -.015em; } .dm-timeline__desc { color: var(--dm-desc-color); font-size: .98rem; line-height: 1.55; margin: 0; } /* ---------- Track (linea connettiva) ---------- */ .dm-timeline__track { position: absolute; background: var(--dm-track-color); z-index: 0; border-radius: 999px; top: 22px; bottom: 22px; left: 21px; width: 2px; overflow: hidden; } .dm-timeline__track::after { content: ""; position: absolute; inset: 0; background: var(--dm-track-fill); transform-origin: top center; transform: scaleY(1); transition: transform 1.4s var(--dm-anim-ease); } /* ---------- Variante horizontal (>= 900px) ---------- */ @media (min-width: 900px) { .dm-timeline--horizontal { --dm-timeline-col-w: calc((100% - 20px * (var(--dm-timeline-cols, 5) - 1)) / var(--dm-timeline-cols, 5)); } .dm-timeline--horizontal .dm-timeline__steps { grid-template-columns: repeat(var(--dm-timeline-cols, 5), 1fr); gap: 20px; } .dm-timeline--horizontal .dm-timeline__step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; } .dm-timeline--horizontal .dm-timeline__body { padding-top: 22px; max-width: 100%; } .dm-timeline--horizontal .dm-timeline__icon { margin: 4px auto 12px; } .dm-timeline--horizontal .dm-timeline__track { top: 21px; bottom: auto; height: 2px; width: auto; left: calc(var(--dm-timeline-col-w) / 2 - 1px); right: calc(var(--dm-timeline-col-w) / 2 - 1px); } .dm-timeline--horizontal .dm-timeline__track::after { transform-origin: left center; transform: scaleX(1); } } /* ---------- Stato iniziale (gate-d da .dm-js) + reveal ---------- */ .dm-js [data-dm-reveal]:not(.is-revealed) .dm-timeline__step { opacity: 0; transform: translateY(18px); } .dm-js [data-dm-reveal]:not(.is-revealed) .dm-timeline__marker::before { opacity: 0; transform: scale(.55); } .dm-js [data-dm-reveal]:not(.is-revealed) .dm-timeline__track::after { transform: scaleY(0); } @media (min-width: 900px) { .dm-js [data-dm-reveal]:not(.is-revealed) .dm-timeline--horizontal .dm-timeline__track::after { transform: scaleX(0); } } .dm-js [data-dm-reveal].is-revealed .dm-timeline__step { opacity: 1; transform: none; transition: opacity var(--dm-anim-duration) var(--dm-anim-ease), transform var(--dm-anim-duration) var(--dm-anim-ease); transition-delay: var(--dm-delay); } /* ---------- Hover / focus microinteractions ---------- */ .dm-timeline__step:hover .dm-timeline__marker { transform: scale(1.08); box-shadow: 0 6px 20px rgba(18, 114, 152, .25); } .dm-timeline__step:hover .dm-timeline__icon { transform: translateY(-2px) scale(1.06); } .dm-infographic--dark .dm-timeline__step:hover .dm-timeline__marker { box-shadow: 0 6px 20px rgba(255, 151, 59, .35); } .dm-timeline__step:focus-within .dm-timeline__marker { outline: 3px solid var(--dm-marker-ring); outline-offset: 3px; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .dm-timeline__step, .dm-timeline__marker, .dm-timeline__marker::before, .dm-timeline__icon, .dm-timeline__track::after { transition: none !important; animation: none !important; } .dm-js [data-dm-reveal] .dm-timeline__step { opacity: 1 !important; transform: none !important; } .dm-js [data-dm-reveal] .dm-timeline__marker::before { opacity: 1 !important; transform: scale(1) !important; } .dm-js [data-dm-reveal] .dm-timeline__track::after { transform: none !important; } } /* ---------- Helper: sezioni con bg scuro (per ospitare dm-infographic--dark) ---------- */ .dm-section { padding: clamp(56px, 9vw, 96px) 0; } .dm-section--dark { background: var(--color-primary); color: #fff; } .dm-section--dark .section-eyebrow { color: var(--color-accent); } .dm-section--dark h2 { color: #fff; } .dm-section--dark .section-sub { color: rgba(255, 255, 255, .78); } /* ===================================================== Aggiunte conversione + AI/AEO (mag 2026) Fascia clienti · Sezione AEO + diagramma · Casi device mockup · Testimonial eyebrow · Icone servizi SVG ===================================================== */ /* ---------- Fascia clienti (riprova sociale) ---------- */ .clienti-strip { padding: 38px 0; background: var(--color-surface); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); text-align: center; } .clienti-strip .section-eyebrow { margin-bottom: 16px; } .clienti-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; } .clienti-list li { font-family: var(--font-display); font-weight: 600; font-size: .96rem; color: var(--color-ink); opacity: .85; } .clienti-more { margin: 0; font-size: .9rem; color: var(--color-muted); } /* ---------- Sezione AEO / answer engine ---------- */ .aeo { padding: clamp(56px, 9vw, 96px) 0; background: var(--color-primary-soft); } .aeo .section-head { margin-bottom: 36px; } .aeo-flow { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 0 auto 46px; max-width: 940px; } .aeo-node { flex: 1 1 200px; max-width: 280px; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 22px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .aeo-node p { margin: 0; font-size: .95rem; line-height: 1.4; color: var(--color-ink); } .aeo-node small { color: var(--color-muted); font-size: .82rem; } .aeo-node-k { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; background: var(--color-primary-soft); color: var(--color-primary); } .aeo-node-engines .aeo-node-k { background: var(--color-primary); color: #fff; } .aeo-node-you { border-color: var(--color-accent); box-shadow: 0 6px 22px rgba(255,151,59,.18); } .aeo-node-you .aeo-node-k { background: var(--color-accent); color: #fff; } .aeo-arrow { display: flex; align-items: center; color: var(--color-primary); font-size: 1.6rem; font-weight: 700; } .aeo-pillars { margin-top: 0; } /* Intro AEO a due colonne: testo a sinistra, illustrazione a destra. */ .aeo-intro { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; margin-bottom: 48px; } .aeo-intro .section-head { margin-bottom: 0; } .aeo-illustration { margin: 0; } .aeo-illustration img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: 0 18px 50px rgba(18, 114, 152, .14); } @media (max-width: 860px) { .aeo-intro { grid-template-columns: 1fr; gap: 26px; margin-bottom: 36px; } } /* ---------- Casi: finestra browser + hover ---------- */ .caso { transition: transform .25s ease, box-shadow .25s ease; } .caso:hover { transform: translateY(-4px); box-shadow: 0 14px 38px rgba(18,114,152,.14); } .caso-thumb { aspect-ratio: 16 / 10; position: relative; padding-top: 24px; background: #f1f4f6; } .caso-thumb::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 24px; background: #eef2f4; border-bottom: 1px solid var(--color-line); background-image: radial-gradient(circle 3px at 14px 12px, #cdd6db 99%, transparent 100%), radial-gradient(circle 3px at 28px 12px, #cdd6db 99%, transparent 100%), radial-gradient(circle 3px at 42px 12px, #cdd6db 99%, transparent 100%); z-index: 1; } .caso-thumb figure, .caso-thumb .wp-block-image { width: 100%; height: 100%; margin: 0; display: block; } .caso-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: object-position 2.6s ease; } .caso:hover .caso-thumb img { object-position: bottom center; } /* ---------- Testimonial eyebrow ---------- */ .testimonial-eyebrow { margin-bottom: 18px; } /* ---------- Icone servizi (SVG via [dm_icon]) ---------- */ .servizio-icon svg { display: block; width: 30px; height: 30px; } /* ---------- Responsive AEO / clienti ---------- */ @media (max-width: 720px) { .aeo-flow { flex-direction: column; align-items: center; } .aeo-node { max-width: 340px; width: 100%; } .aeo-arrow { transform: rotate(90deg); } } /* ---------- Pagine semplici (privacy, cookie, ecc.) — colonna leggibile ---------- */ body.page:not(.home) .inside-article { max-width: 820px; margin: 40px auto 64px; padding: 0 24px; } body.page:not(.home) .entry-content { line-height: 1.7; } body.page:not(.home) .entry-content h2 { margin-top: 2em; margin-bottom: .5em; font-size: 1.5rem; } body.page:not(.home) .entry-content h3 { margin-top: 1.4em; } body.page:not(.home) .entry-content p, body.page:not(.home) .entry-content ul, body.page:not(.home) .entry-content ol, body.page:not(.home) .entry-content table { margin-bottom: 1.1em; } body.page:not(.home) .entry-content .lead { font-size: 1.15rem; color: var(--color-muted); } body.page:not(.home) .entry-content table { width: 100%; border-collapse: collapse; font-size: .92rem; } body.page:not(.home) .entry-content th, body.page:not(.home) .entry-content td { border: 1px solid var(--color-line); padding: 8px 10px; text-align: left; vertical-align: top; } /* ===================================================== CTA flottante ("Parliamone") — pulsante fisso Reso in wp_footer; visibilità gestita dal JS (.is-visible) tramite IntersectionObserver sul modulo di contatto. Nascosto di default così, se il JS non gira, non resta un bottone bloccato sopra al form. ===================================================== */ .dm-float-cta { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: inline-flex; align-items: center; gap: 9px; padding: 14px 22px; font-family: var(--font-sans); font-weight: 600; font-size: .98rem; line-height: 1; color: #fff; text-shadow: 0 1px 1px rgba(90, 45, 5, .35); background: var(--color-cta); border-radius: 999px; box-shadow: 0 10px 30px rgba(165, 86, 10, .35), 0 2px 6px rgba(0, 0, 0, .12); /* Stato nascosto di default: lo mostra il JS quando il form non è in vista. */ opacity: 0; visibility: hidden; transform: translateY(16px) scale(.96); transition: opacity .3s ease, transform .3s ease, visibility .3s, background .15s ease, box-shadow .2s ease; pointer-events: none; } .dm-float-cta.is-visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .dm-float-cta:hover { color: #fff; background: var(--color-cta-dark); transform: translateY(-2px); box-shadow: 0 16px 38px rgba(165, 86, 10, .42), 0 2px 6px rgba(0, 0, 0, .12); } .dm-float-cta.is-visible:hover { transform: translateY(-2px); } .dm-float-cta:focus-visible { /* Outline scuro ad alto contrasto sia sul bottone arancio sia sullo sfondo chiaro della pagina (WCAG 1.4.11: serve >= 3:1). */ outline: 3px solid var(--color-ink); outline-offset: 3px; } .dm-float-cta-icon { display: inline-flex; } .dm-float-cta-icon svg { width: 20px; height: 20px; display: block; } /* Difensivo: se si attiva il "torna su" di GP (fisso in basso a destra), spostalo sopra la CTA quando questa è visibile, per non sovrapporsi. */ body.dm-cta-visible .generate-back-to-top { bottom: 92px; } /* Menu mobile aperto: nascondi la CTA flottante per non sovrapporsi alle voci (l'ultima voce del menu è già un "Parliamone"). body.dm-menu-open è settata dal JS osservando #site-navigation.toggled. */ body.dm-menu-open .dm-float-cta { opacity: 0; visibility: hidden; transform: none; pointer-events: none; } /* Quando la CTA è visibile, riserva spazio in fondo al footer così il pill non copre i link legali/contatti (allineati in basso a destra su desktop). */ body.dm-cta-visible .site-footer { padding-bottom: 96px; } @media (max-width: 560px) { .dm-float-cta { right: 16px; bottom: 16px; padding: 13px 18px; font-size: .92rem; } .dm-float-cta-icon svg { width: 18px; height: 18px; } } @media (prefers-reduced-motion: reduce) { .dm-float-cta { transition: opacity .2s ease, visibility .2s, background .15s ease; transform: none; } .dm-float-cta.is-visible, .dm-float-cta:hover, .dm-float-cta.is-visible:hover { transform: none; } } /* ============================================================ Striscia "Cosa facciamo" (sotto l'hero, prima della trust band) Indice visivo scansionabile dei servizi concreti. Accent azzurro #56B2D7 (enfasi/brand), distinto dall'arancione dei CTA (azione). È un INDICE, non card-servizio: lega l'hero alla sezione #servizi. ============================================================ */ .servizi-strip { padding: 26px 0 32px; background: var(--color-bg-soft); border-top: 1px solid var(--color-line); } .servizi-strip-intro { margin: 0 0 16px; font-family: var(--font-display); font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary); } .servizi-strip-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; } .servizi-strip-list li { margin: 0; } .servizi-strip-list a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 13px 16px; background: var(--color-surface); border: 1px solid var(--color-line); border-left: 3px solid var(--color-primary-light); border-radius: var(--radius); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .servizi-strip-list a:hover, .servizi-strip-list a:focus-visible { border-color: var(--color-primary-light); border-left-color: var(--color-primary); box-shadow: var(--shadow-card); transform: translateY(-2px); } .servizi-strip-list .ss-label { font-weight: 600; font-size: .95rem; color: var(--color-ink); line-height: 1.22; } .servizi-strip-list .ss-sub { font-size: .77rem; color: var(--color-ink-soft); line-height: 1.3; } @media (max-width: 560px) { .servizi-strip { padding: 22px 0 26px; } .servizi-strip-list { grid-template-columns: 1fr 1fr; gap: 10px; } .servizi-strip-list a { padding: 11px 13px; } .servizi-strip-list .ss-label { font-size: .9rem; } .servizi-strip-list .ss-sub { font-size: .73rem; } } /* ============================================================ Sezione Contatti / Form — card unica: pannello blu + form bianco. Il pannello a sinistra (brand, info, fiducia, contatti) e il form a destra vivono in un unico contenitore elevato. Stepper di progresso iniettato via JS in cima al form (vedi digitalmedica.js). ============================================================ */ .contatti-card { display: grid; grid-template-columns: 360px 1fr; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: 0 2px 4px rgba(20, 30, 40, .04), 0 20px 54px rgba(18, 114, 152, .12); overflow: hidden; } /* ---- Pannello blu (colonna sinistra) ---- */ .contatti-aside { background: linear-gradient(165deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: #fff; padding: 42px 34px; border-radius: 0; } .contatti-aside h3 { color: #fff; margin: 0 0 12px; font-size: 1.4rem; line-height: 1.2; } .contatti-aside-lead { margin: 0 0 26px; font-size: .98rem; line-height: 1.55; color: rgba(255, 255, 255, .85); } .contatti-trust { list-style: none; margin: 0 0 26px; padding: 0 0 24px; border-bottom: 1px solid rgba(255, 255, 255, .18); display: grid; gap: 14px; } .contatti-trust li { display: flex; align-items: flex-start; gap: 11px; font-size: .92rem; line-height: 1.4; color: rgba(255, 255, 255, .95); } .contatti-trust .ci { color: var(--color-primary-light); margin-top: 1px; } .contatti-channels-label { margin: 0 0 14px; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .55); } .contatti-channel { display: flex; align-items: center; gap: 11px; margin: 0 0 12px; font-size: .97rem; color: #fff; text-decoration: none; transition: color .15s ease; } .contatti-channel:last-child { margin-bottom: 0; } a.contatti-channel:hover { color: var(--color-primary-light); } .contatti-channel .ci { color: var(--color-primary-light); } .contatti-channel-static { color: rgba(255, 255, 255, .82); } .contatti-aside .ci { width: 19px; height: 19px; flex-shrink: 0; } /* ---- Cella del form (colonna destra) ---- */ .contatti-card .wpcf7 { padding: 40px 40px 42px; background: #fff; } .contatti-card .wpcf7 .lead-form-wrap { max-width: none; } /* Lo stepper sostituisce il pallino numerato nelle legend (niente doppio numero) */ .contatti-card .form-section legend .form-step { display: none; } .contatti-card .form-section legend { gap: 0; } /* ---- Stepper di progresso (iniettato in cima al form) ---- */ .form-stepper { display: flex; list-style: none; margin: 0 0 30px; padding: 0; } .form-stepper li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .78rem; line-height: 1.2; text-align: center; color: var(--color-muted); } .form-stepper li::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--color-line-strong); z-index: 0; } .form-stepper li:first-child::before { display: none; } .form-stepper .fs-dot { position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid var(--color-line-strong); color: var(--color-muted); font-weight: 600; font-size: .9rem; transition: background .2s ease, border-color .2s ease, color .2s ease; } .form-stepper li.is-active { color: var(--color-ink); font-weight: 600; } .form-stepper li.is-active .fs-dot { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .form-stepper li.is-done { color: var(--color-ink-soft); } .form-stepper li.is-done .fs-dot { background: var(--color-primary-light); border-color: var(--color-primary-light); color: #fff; } .form-stepper li.is-done::before, .form-stepper li.is-active::before { background: var(--color-primary-light); } /* ---- Hint sotto il bottone Avanti disabilitato ---- */ .form-nav-hint { width: 100%; order: 5; margin: 6px 0 0; font-size: .8rem; color: var(--color-muted); } @media (max-width: 860px) { .contatti-card { grid-template-columns: 1fr; } .contatti-aside { padding: 34px 28px; } .contatti-card .wpcf7 { padding: 32px 26px 36px; } } @media (max-width: 560px) { .form-stepper .fs-label { display: none; } .contatti-card .wpcf7 { padding: 26px 20px 30px; } } /* ============================================================ Animazioni allo scroll (reveal + stagger) Stato iniziale gate-d da html.dm-js (impostata in prima del paint): niente flash, e senza JS i contenuti restano visibili. Il JS aggiunge .is-inview quando l'elemento entra in viewport (vedi initScrollReveal). ============================================================ */ .dm-js :is( .servizi-strip-list > li, .trust-numeri-grid > div, .manifesto .section-head, .manifesto-grid, .pillars > li, .testimonial-inner, .percorsi .section-head, .percorso, .servizi .section-head, .servizio, .aeo-intro, .aeo-node, .casi .section-head, .caso, .dm-method-section .section-head, .faq .section-head, .faq-item, .contatti .section-head, .contatti-card, .blog-home .section-head, .post-card ) { transition: opacity .7s cubic-bezier(.16, .84, .44, 1), transform .7s cubic-bezier(.16, .84, .44, 1); } .dm-js :is( .servizi-strip-list > li, .trust-numeri-grid > div, .manifesto .section-head, .manifesto-grid, .pillars > li, .testimonial-inner, .percorsi .section-head, .percorso, .servizi .section-head, .servizio, .aeo-intro, .aeo-node, .casi .section-head, .caso, .dm-method-section .section-head, .faq .section-head, .faq-item, .contatti .section-head, .contatti-card, .blog-home .section-head, .post-card ):not(.is-inview) { opacity: 0; transform: translateY(28px); } /* D'impatto: la card della citazione "entra" con un pop (scala + fade). */ .dm-js .testimonial .testimonial-inner:not(.is-inview) { transform: translateY(28px) scale(.94); } @media (prefers-reduced-motion: reduce) { .dm-js :is( .servizi-strip-list > li, .trust-numeri-grid > div, .manifesto .section-head, .manifesto-grid, .pillars > li, .testimonial-inner, .percorsi .section-head, .percorso, .servizi .section-head, .servizio, .aeo-intro, .aeo-node, .casi .section-head, .caso, .dm-method-section .section-head, .faq .section-head, .faq-item, .contatti .section-head, .contatti-card, .blog-home .section-head, .post-card ) { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- Fascia "lavori realizzati": marquee a scorrimento continuo ---------- Banda silenziosa sotto i 6 casi: i mockup-laptop (fondo bianco) "galleggiano" su banda bianca e scorrono all'infinito. Markup generato da [lavori_marquee]. */ .lavori-marquee { --lavori-tile-w: clamp(260px, 27vw, 360px); --lavori-gap: 34px; --lavori-speed: 60s; background: var(--color-bg); padding: 34px 0; border-top: 1px solid var(--color-line); overflow: hidden; } .lavori-marquee__viewport { overflow: hidden; /* spazio verticale: lascia respirare l'ingrandimento all'hover senza tagliarlo */ padding-block: 18px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); } .lavori-marquee__track { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; animation: lavori-scroll var(--lavori-speed) linear infinite; will-change: transform; } .lavori-marquee__viewport:hover .lavori-marquee__track { animation-play-state: paused; } .lavori-marquee__item { flex: 0 0 auto; margin-right: var(--lavori-gap); position: relative; } .lavori-marquee__img { display: block; width: var(--lavori-tile-w); height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 64%; /* spinge il baricentro sul laptop, taglia il margine bianco alto */ border-radius: 10px; transition: transform .35s cubic-bezier(.2, .7, .3, 1); } /* Micro-animazione: leggero ingrandimento della miniatura all'hover. L'hover lo riceve la tessera (l'immagine ha pointer-events:none), così funziona anche in modalità trascinabile. Lo zoom è sospeso durante il drag. */ .lavori-marquee__item:hover { z-index: 2; } .lavori-marquee__item:hover .lavori-marquee__img { transform: scale(1.06); } .lavori-marquee__viewport.is-dragging .lavori-marquee__img { transform: none !important; } @keyframes lavori-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 768px) { .lavori-marquee { padding: 28px 0; } .lavori-marquee__item { margin-right: 18px; } } @media (prefers-reduced-motion: reduce) { .lavori-marquee__track { animation: none; } .lavori-marquee__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; } .lavori-marquee__img { transition: none; } .lavori-marquee__item:hover .lavori-marquee__img { transform: none; } } /* Modalità interattiva (JS attivo): posizione guidata da transform → trascinabile. La specificità maggiore tiene overflow:hidden anche sotto prefers-reduced-motion. */ .lavori-marquee.is-draggable .lavori-marquee__track { animation: none; will-change: transform; } .lavori-marquee.is-draggable .lavori-marquee__viewport { overflow: hidden; cursor: grab; touch-action: pan-y; /* il gesto orizzontale lo gestiamo noi, lo scroll verticale resta al browser */ } .lavori-marquee.is-draggable .lavori-marquee__viewport.is-dragging { cursor: grabbing; } .lavori-marquee.is-draggable .lavori-marquee__img { -webkit-user-drag: none; user-select: none; pointer-events: none; /* il drag parte sempre dal viewport, mai "afferrando" l'immagine */ } /* Variante smartphone: tessere verticali (telefoni). Più larghe per non tagliare i lati (anche i mockup con telefoni inclinati) e più distanziate. */ .lavori-marquee--mobile { --lavori-gap: 44px; } .lavori-marquee--mobile .lavori-marquee__img { width: clamp(212px, 19vw, 258px); height: clamp(248px, 22vw, 300px); aspect-ratio: auto; object-position: 50% 30%; border-radius: 24px; } @media (max-width: 768px) { .lavori-marquee--mobile { --lavori-gap: 26px; } .lavori-marquee--mobile .lavori-marquee__img { border-radius: 20px; } }