/** * PM-TALK — CSS per contenuti in formato "Talk" * * Estratto da style.css durante la riorganizzazione del 13/09/2026. * Prima viveva dentro il tema (caricato su OGNI pagina della rete, anche * dove non serviva). Ora è un file a parte, pensato per essere caricato * SOLO dove serve davvero: * - sul sito principale (root/it), sugli articoli con categoria * "parola-mia-talk" (comportamento storico, invariato); * - su Academy, sui Corsi/Lezioni con categoria "pm-talk" (nuovo, * per i contenuti che vengono migrati/creati in questo formato). * * Il caricamento condizionale è in functions.php (vedi enqueue pm-talk-css). * * Struttura: * 1) Card "inquadramento storico" (.pm-histo-*) — riutilizzata nelle * sezioni di contesto/premessa degli articoli/lezioni Talk. * 2) Blocco .pm-talk — tutto il resto (hero, sezioni, grid materiali, * step, video, card editoriali), sempre scoped sotto body.pm-talk. */ /* ============================================================ 1) INQUADRAMENTO STORICO — card riutilizzata nelle sezioni Talk ============================================================ */ .pm-histo-viewport{ min-height: 100vh; display: flex; align-items: center; padding: 28px 0; } @supports (height: 100svh){ .pm-histo-viewport{ min-height: 100svh; } } .pm-histo-card{ border-radius: var(--pm-radius, 22px); border: 1px solid rgba(10,34,74,.10); background: #fff; box-shadow: var(--pm-shadow, 0 14px 38px rgba(15, 23, 42, 0.14)); padding: 22px; position: relative; overflow: hidden; } .pm-histo-card::before{ content:""; position:absolute; left:-40px; top:-60px; width: 520px; height: 220px; background: radial-gradient(circle at 30% 40%, rgba(249,178,51,.22) 0%, rgba(22,47,101,.12) 40%, rgba(255,255,255,0) 70%); transform: rotate(-6deg); pointer-events:none; } .pm-kicker{ margin:0 0 8px 0; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color: rgba(10,34,74,.65); } .pm-histo-title{ margin:0 0 10px 0; color: var(--pm-blue, #162f65); line-height:1.15; } .pm-histo-text{ margin:0; color: rgba(15,23,42,.92); font-size:1.02rem; line-height:1.65; max-width: 78ch; } /* CTA in card */ .pm-histo-cta{ gap: 12px; margin-top: 14px; } @media (max-width: 781px){ .pm-histo-card{ padding: 18px; } .pm-histo-text{ font-size: 1rem; } } /* Astra: nasconde titolo/meta nativi sopra il contenuto — l'hero fa da testata. Copre sia la categoria storica del sito principale sia quella nuova di Academy. */ .category-parola-mia-talk .entry-header, .category-pm-talk .entry-header{ display: none !important; } /* ============================================================ PAROLA MIA TALK — CSS DEFINITIVO (Astra + Gutenberg) Attivo SOLO quando ha classe .pm-talk Include: - Reset Astra (spazi #primary) - HERO 16:9 + overlay + tipografia + badge a destra - Pulsanti + hover fix Astra - Sezioni articolo (ancore) + card editoriali - Kit materiali (grid, card, preview immagini, download) - Struttura conversazione 60' (steps) - Video embed responsivo - H5P container ============================================================ */ /* ------------------------------------------------------------ 0) VARIABILI (se già definite globalmente, restano in fallback) ------------------------------------------------------------ */ .pm-talk{ --pm-blue: var(--pm-blue, #162f65); --pm-yellow: var(--pm-yellow, #f9b233); --pm-radius: var(--pm-radius, 22px); --pm-shadow: var(--pm-shadow, 0 14px 38px rgba(15, 23, 42, 0.14)); --pm-border: var(--pm-border, rgba(10,34,74,.10)); --pm-text: rgba(15,23,42,.92); --pm-muted: rgba(15,23,42,.72); } /* ------------------------------------------------------------ 1) ASTRA RESET (solo Talk) ------------------------------------------------------------ */ .pm-talk #primary{ margin-top: 0 !important; margin-bottom: 0 !important; } /* spesso Astra aggiunge padding alla zona contenuto */ .pm-talk .site-content{ padding-top: 0 !important; } /* prevenzione micro-scroll orizzontale */ .pm-talk html, .pm-talk body{ overflow-x: clip; } /* ------------------------------------------------------------ 2) CONTENITORE ARTICOLO (sezioni sotto hero) ------------------------------------------------------------ */ .pm-talk .pm-talk-section{ width: min(1120px, calc(100% - 48px)); margin: 26px auto 0; } @media (max-width: 781px){ .pm-talk .pm-talk-section{ width: calc(100% - 24px); margin-top: 20px; } } /* Titoli sezioni */ .pm-talk .pm-talk-section > h2{ color: var(--pm-blue); line-height: 1.15; margin: 0 0 12px 0; } /* Testo secondario */ .pm-talk .pm-talk-muted{ color: var(--pm-muted); } /* ------------------------------------------------------------ 3) NAV ANCORE (facoltativa: se usi i link interni) ------------------------------------------------------------ */ .pm-talk .pm-talk-nav{ width: min(1120px, calc(100% - 48px)); margin: 18px auto 0; display:flex; gap:10px; flex-wrap:wrap; } .pm-talk .pm-talk-chip{ display:inline-block; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--pm-border); background: #fff; text-decoration:none; color: rgba(15,23,42,.88); transition: transform .15s ease, opacity .15s ease; } .pm-talk .pm-talk-chip:hover{ transform: translateY(-1px); opacity: .95; } @media (max-width: 781px){ .pm-talk .pm-talk-nav{ width: calc(100% - 24px); margin-top: 14px; } } /* ------------------------------------------------------------ 4) HERO COVER (Gutenberg Cover) — 16:9 + overlay Classi attese: - Cover: .pm-talk-hero (sul blocco Cover) - Wrapper badge: .pm-talk-badge - Badge: .pm-brand-talk (paragrafo o span) - Titolo: .pm-hero-title (h1) - Lead: .pm-hero-lead (p) - Meta: .pm-hero-meta (group) - Pill: .pm-pill (p o span) - CTA: .pm-hero-cta (buttons group) ------------------------------------------------------------ */ /* Base del blocco Copertina (.pm-hero-100vh / .pm-hero-cover): altezza, posizionamento e overlay a gradiente sopra la foto. Queste regole vivono ANCHE in style.css (sito principale, dove .pm-hero-cover è un componente generico riusato pure fuori dal formato Talk), ma style.css non viene caricato su Academy (sostituito da pm-academy.css) — quindi qui va ripetuta la parte di base, altrimenti la Copertina non ha altezza né sfondo/overlay sulle Lezioni/Corsi Academy. Scope ".pm-talk" per sicurezza, anche se il file si carica già solo dove serve. */ .pm-talk .pm-hero-100vh{ min-height: 100vh; } @supports (height: 100svh){ .pm-talk .pm-hero-100vh{ min-height: 100svh; } } .pm-talk .pm-hero-cover{ position: relative; overflow: hidden; border-radius: 22px; } .pm-talk .pm-hero-cover::before{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.58) 42%, rgba(0,0,0,.20) 78%, rgba(0,0,0,.08) 100%); pointer-events:none; } .pm-talk .pm-hero-cover .wp-block-cover__inner-container{ position: relative; z-index:2; padding: 44px 18px; } .pm-talk .pm-hero-cover, .pm-talk .pm-hero-cover .wp-block-heading, .pm-talk .pm-hero-cover p, .pm-talk .pm-hero-cover li{ color:#fff !important; } @media (max-width: 781px){ .pm-talk .pm-hero-cover{ border-radius: 16px; } .pm-talk .pm-hero-cover::before{ background: linear-gradient(180deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.58) 60%, rgba(0,0,0,.25) 100%); } .pm-talk .pm-hero-cover .wp-block-cover__inner-container{ padding: 34px 16px; } } /* Inner container */ .pm-talk .entry-content .pm-talk-hero .wp-block-cover__inner-container{ position: relative; z-index: 2; max-width: 1120px !important; margin: 0 auto !important; padding: clamp(18px, 2.2vw, 30px) 18px !important; height: 100%; box-sizing: border-box; text-align: left; } /* Testi bianchi */ .pm-talk .entry-content .pm-talk-hero, .pm-talk .entry-content .pm-talk-hero .wp-block-heading, .pm-talk .entry-content .pm-talk-hero p, .pm-talk .entry-content .pm-talk-hero li{ color:#fff !important; } /* Badge wrapper a destra */ .pm-talk .entry-content .pm-talk-hero .pm-talk-badge{ width: 100% !important; display: block !important; text-align: right !important; padding-right: 10px !important; margin: 0 0 12px 0 !important; } /* ============================================================ HERO — BRAND A DESTRA (in alto) ============================================================ */ /* il wrapper del badge deve occupare tutta la riga */ .pm-talk .pm-talk-hero .pm-talk-badge{ width: 100% !important; display: flex !important; justify-content: flex-end !important; /* a destra */ align-items: center !important; margin: 0 0 14px 0 !important; padding: 0 !important; } /* badge: giallo pieno (non barra), leggibile anche su zone chiare */ .pm-talk .pm-talk-hero .pm-brand-talk{ display: inline-flex !important; align-items: center; gap: 8px; padding: 8px 14px !important; border-radius: 999px !important; background: rgba(249,178,51,.92) !important; /* giallo, semi pieno */ color: #0a224a !important; border: 1px solid rgba(0,0,0,.10) !important; box-shadow: 0 10px 26px rgba(0,0,0,.22); backdrop-filter: blur(6px); font-weight: 700 !important; letter-spacing: .10em !important; text-transform: uppercase !important; } /* se Gutenberg aggiunge classi di allineamento, non devono “rompere” il layout */ .pm-talk .entry-content .pm-talk-hero .pm-brand-talk.has-text-align-right{ text-align: right !important; } /* Titolo */ .pm-talk .entry-content .pm-talk-hero .pm-hero-title{ margin: 0 0 12px 0 !important; line-height: 1.06; letter-spacing: -0.02em; text-shadow: 0 10px 30px rgba(0,0,0,.35); max-width: 20ch; } /* Lead */ .pm-talk .entry-content .pm-talk-hero .pm-hero-lead{ margin: 0 0 16px 0 !important; max-width: 60ch; opacity: .92; font-size: 1.05rem; } /* Meta pills */ .pm-talk .entry-content .pm-talk-hero .pm-hero-meta{ display:flex; flex-wrap:wrap; gap:10px; /* margin: 30px 0 !important; */ } .pm-talk .entry-content .pm-talk-hero .pm-pill{ margin:0 !important; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .95rem; } /* CTA container */ .pm-talk .entry-content .pm-talk-hero .pm-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin: 36px 0 0 0 !important; } /* Hero mobile */ @media (max-width: 781px){ .pm-talk .entry-content .pm-talk-hero.wp-block-cover{ width: calc(100% - 24px) !important; margin-top: 6px !important; border-radius: 16px; } .pm-talk .entry-content .pm-talk-hero .wp-block-cover__inner-container{ padding: 18px 14px !important; } .pm-talk .entry-content .pm-talk-hero .pm-hero-title{ max-width: 22ch; } .pm-talk .entry-content .pm-talk-hero .pm-talk-badge{ padding-right: 6px !important; margin-bottom: 10px !important; } } /* ------------------------------------------------------------ 5) BOTTONI (fix hover Astra + coerenza) Classi attese sui wrapper Gutenberg Button: - .pm-btn.pm-btn-primary - .pm-btn.pm-btn-secondary ------------------------------------------------------------ */ /* ============================================================ CTA PRIMARIA ============================================================ */ .pm-talk .pm-btn.pm-btn-primary .wp-element-button{ background: #162f65 !important; color: #ffffff !important; border-radius: 999px; padding: 12px 20px; font-weight: 600; box-shadow: none !important; } .pm-talk .pm-btn.pm-btn-primary .wp-element-button:hover{ background: #0f224d !important; } /* ============================================================ CTA SECONDARIE — stile editoriale ============================================================ .pm-talk .pm-btn.pm-btn-secondary .wp-element-button{ background: #f9b23380 !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.45) !important; border-radius: 999px; padding: 10px 18px; font-weight: 500; } .pm-talk .pm-btn.pm-btn-secondary .wp-element-button:hover{ background: rgba(255,255,255,.12) !important; } /* ------------------------------------------------------------ 6) CARD “EDITORIALI” (inquadramento / kit / ecc.) Usa: .pm-card ------------------------------------------------------------ */ .pm-talk .pm-card{ border-radius: var(--pm-radius); border: 1px solid var(--pm-border); background: #fff; box-shadow: 0 14px 38px rgba(15, 23, 42, 0.10); padding: 18px; position: relative; overflow: hidden; } .pm-talk .pm-card h3{ margin: 0 0 10px 0; color: var(--pm-blue); line-height: 1.18; } .pm-talk .pm-card p{ margin: 0 0 12px 0; color: var(--pm-text); line-height: 1.7; } .pm-talk .pm-card p:last-child{ margin-bottom: 0; } /* Banda soft decorativa (leggera) */ .pm-talk .pm-card::before{ content:""; position:absolute; left:-50px; top:-70px; width: 520px; height: 240px; background: radial-gradient(circle at 30% 40%, rgba(249,178,51,.18) 0%, rgba(22,47,101,.10) 42%, rgba(255,255,255,0) 72%); transform: rotate(-6deg); pointer-events:none; } /* ------------------------------------------------------------ 7) INTRO / INQUADRAMENTO (se vuoi stile “card”) Usa wrapper: .pm-intro-card (opzionale) ------------------------------------------------------------ */ .pm-talk .pm-intro-card{ margin-top: 10px; } .pm-talk .pm-talk-lead{ color: var(--pm-text); font-size: 1.02rem; line-height: 1.75; max-width: 80ch; } /* ------------------------------------------------------------ 8) KIT MATERIALI — GRID Usa wrapper: .pm-kit-grid (o .pm-talk-grid) ------------------------------------------------------------ */ .pm-talk .pm-talk-grid, .pm-talk .pm-kit-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; } @media (max-width: 781px){ .pm-talk .pm-talk-grid, .pm-talk .pm-kit-grid{ grid-template-columns: 1fr; } } /* Media dentro card (immagini/pagine) */ .pm-talk .pm-card-media{ margin: 12px 0 14px; } .pm-talk .pm-card-media img{ display:block; width:100%; height:auto; border-radius: 16px; border: 1px solid rgba(15,23,42,.08); } /* ------------------------------------------------------------ 9) STRUTTURA 60' — STEPS Usa wrapper: .pm-steps e item: .pm-step ------------------------------------------------------------ */ .pm-talk .pm-steps{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; } .pm-talk .pm-step{ border-radius: var(--pm-radius); border: 1px solid var(--pm-border); background: #fff; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08); padding: 18px; } .pm-talk .pm-step h3{ margin: 0 0 8px 0; color: var(--pm-blue); } .pm-talk .pm-step p{ margin: 0 0 10px 0; color: var(--pm-text); line-height: 1.7; } .pm-talk .pm-step-links{ margin: 0; color: var(--pm-muted); } .pm-talk .pm-step-links a{ text-decoration:none; border-bottom: 1px solid rgba(22,47,101,.25); color: rgba(22,47,101,.92); } @media (max-width: 781px){ .pm-talk .pm-steps{ grid-template-columns: 1fr; } } /* ------------------------------------------------------------ 10) VIDEO — embed responsivo “pulito” (Se usi il blocco YouTube Gutenberg, di solito è già responsive) Wrapper opzionale: .pm-video ------------------------------------------------------------ */ .pm-talk .pm-video{ border-radius: var(--pm-radius); overflow: hidden; border: 1px solid var(--pm-border); box-shadow: 0 14px 38px rgba(15, 23, 42, 0.10); background: #000; } /* Se incolli iframe manuale dentro .pm-video */ .pm-talk .pm-video iframe{ display:block; width:100%; aspect-ratio: 16 / 9; height:auto; border:0; } /* ------------------------------------------------------------ 12) PICCOLI DETTAGLI (ancore + smooth scroll) ------------------------------------------------------------ */ .pm-talk{ scroll-behavior: smooth; } /* offset ancore se header sticky (aggiusta se serve) */ .pm-talk [id]{ scroll-margin-top: 90px; } /* ============================================================ TALK — restyling “editoriale” (no template vibes) Target: - .pm-histo-card (inquadramento) - .pm-card (materiali e sezioni) ============================================================ */ /* A) Elimina qualsiasi decorazione grafica tipo bande/radiali */ .pm-talk .pm-histo-card::before, .pm-talk .pm-card::before{ content: none !important; display: none !important; } /* B) Superfici pulite: bianco neutro, bordi sottili, ombra quasi impercettibile */ .pm-talk .pm-histo-card, .pm-talk .pm-card{ background: #fff !important; border: 1px solid rgba(15, 23, 42, 0.10) !important; border-radius: 18px !important; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important; } /* C) Firma editoriale: una “rule” sottile (alto) invece di grafiche decorative */ .pm-talk .pm-histo-card, .pm-talk .pm-card{ position: relative; } .pm-talk .pm-histo-card{ border-top: 3px solid rgba(22,47,101,.20) !important; /* blu leggero */ } .pm-talk .pm-card{ border-top: 2px solid rgba(22,47,101,.14) !important; } /* D) Tipografia più seria: kicker meno “urlato”, testo più compatto e leggibile */ .pm-talk .pm-kicker { color: #f9b233; letter-spacing: .06em !important; font-weight: 800 !important; font-size: 1.0rem !important; margin: 0 0 8px 0 !important; } .pm-talk .pm-histo-title{ margin: 0 0 10px 0 !important; } .pm-talk .pm-histo-text, .pm-talk .pm-intro-text, .pm-talk .pm-card p{ color: rgba(15,23,42,.90) !important; line-height: 1.72 !important; } /* E) Materiali: immagini e preview con cornice pulita, no “effetti” */ .pm-talk .pm-card-media img{ border-radius: 14px !important; border: 1px solid rgba(15,23,42,.10) !important; box-shadow: none !important; } /* F) Spaziature: meno “aria finta”, più ritmo */ .pm-talk .pm-histo-card, .pm-talk .pm-card{ padding: 18px 18px 16px !important; } @media (max-width: 781px){ .pm-talk .pm-histo-card, .pm-talk .pm-card{ border-radius: 16px !important; padding: 16px !important; box-shadow: 0 5px 14px rgba(15, 23, 42, 0.06) !important; } } .pm-talk .pm-histo-card, .pm-talk .pm-card{ box-shadow: none !important; border: 1px solid rgba(15, 23, 42, 0.14) !important; } /* ============================================================ ASTRA OVERRIDE — solo Talk Sblocca il contenitore che limita la larghezza ============================================================ */ /* Astra: container principale spesso “boxed” */ .pm-talk .site-content > .ast-container{ max-width: none !important; /* rimuove il limite Astra */ width: 100% !important; padding-left: 0 !important; /* elimina le “cornici” */ padding-right: 0 !important; } /* Evita che #primary rimetta padding/margini */ .pm-talk #primary{ margin: 0 !important; padding: 0 !important; } /* Anche l’entry-content a volte ha limiti/padding */ .pm-talk .entry-content{ margin: 0 !important; } /* ============================================================ ASTRA BLOCKS LAYOUT — sblocca il max-width che limita i blocchi SOLO per la cover hero nei Talk ============================================================ */ .pm-talk .entry-content[data-ast-blocks-layout] > .pm-talk-hero{ max-width: none !important; /* annulla la regola Astra */ width: min(940px, calc(100% - 32px)) !important; margin: 14px auto 56px !important; aspect-ratio: 16 / 9 !important; /* min-height: 0 !important;*/ height: auto !important; border-radius: 22px; overflow: hidden; position: relative; } /* inner container tipografico */ .pm-talk .pm-talk-hero .wp-block-cover__inner-container{ max-width: 1120px !important; margin: 0 auto !important; padding: 26px 22px !important; position: relative; z-index: 2; } /* ============================================================ HERO — CTA: gerarchia visiva ============================================================ */ .pm-talk .pm-talk-hero .pm-hero-cta{ gap: 12px !important; } /* primario (Inquadramento): già ok, lo rendiamo leggermente più “deciso” */ .pm-talk .pm-talk-hero .pm-btn-primary .wp-element-button{ box-shadow: 0 10px 26px rgba(0,0,0,.22); } /* secondari: più leggeri e puliti */ .pm-talk .pm-talk-hero .pm-btn-secondary .wp-element-button{ background: #f9b23380 !important; color: #fff !important; border: 1px solid rgba(255,255,255,.28) !important; } .pm-talk .pm-talk-hero .pm-btn-secondary .wp-element-button:hover{ background: rgba(255,255,255,.18) !important; } @media (max-width: 781px){ .pm-talk .pm-talk-hero .pm-talk-badge{ justify-content: flex-start !important; margin-bottom: 10px !important; } .pm-talk .pm-talk-hero .pm-hero-title{ max-width: 18ch; } } /* ------------------------------------------------------------ FIX LARGHEZZA TOTALE IFRAME (WordPress Side) ------------------------------------------------------------ */ /* Risolve il problema del width: auto che restringe il quiz */ .h5p-iframe-wrapper { width: 100% !important; min-width: 100% !important; max-width: 100% !important; display: block !important; overflow: visible !important; padding-bottom: 50px !important; } .h5p-iframe-wrapper iframe { width: 100% !important; min-width: 100% !important; height: auto; } /* Rimuove restrizioni dai contenitori pm-talk */ .pm-talk .pm-h5p, .pm-h5p-grid { width: 100% !important; max-width: 100% !important; padding: 0 !important; } .h5p-container { max-width: 760px; margin: 0 auto; } .h5p-fill-in-the-blanks .h5p-input-wrapper { background-color: #e6f0fb; border-radius: 6px; padding: 2px 6px; min-width: 90px; } .h5p-draggable { background: #f3f4f6; border-radius: 999px; padding: 6px 12px; font-weight: 500; } .h5p-draggable:hover { background: #162f65; color: #ffffff; } .h5p-container p { line-height: 1.6; font-size: 1.05rem; } /* Layout a due colonne per Drag the Words */ .h5p-drag-task { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; } .h5p-drag-draggables { background: #f7f9fc; border-radius: 12px; padding: 16px; } .h5p-drag-draggables .h5p-draggable { display: block; margin-bottom: 8px; } @media (max-width: 768px) { .h5p-drag-task { grid-template-columns: 1fr; } } .h5p-drag-droppable-words { line-height: 1.7; } .h5p-drag-task { display: grid; grid-template-columns: 1fr 280px; gap: 32px; } .h5p-drag-draggables { background: #f7f9fc; border-radius: 12px; padding: 16px; } @media (max-width: 768px) { .h5p-drag-task { grid-template-columns: 1fr; } } /* ========================================================== PM — FIX card materiali (disattiva equal-height globale) ========================================================== */ .pm-materials-overview .pm-card{ min-height: auto !important; height: auto !important; } .pm-materials-overview .pm-card{ display: flex; flex-direction: column; gap: 10px; } .pm-materials-overview .pm-card{ padding: 18px 20px; } .pm-materials-overview .pm-card-title{ margin: 0 0 6px 0; line-height: 1.2; } .pm-materials-overview .pm-card p{ margin: 0; line-height: 1.55; } /* Banda di sezione (sfondo) */ .pm-band{ padding: 56px 0; } /* Contenitore interno */ .pm-band-inner{ max-width: 940px; margin: 0 auto; padding: 0 18px; } /* Mobile */ @media (max-width: 780px){ .pm-band{ padding: 40px 0; } } /* Card: piccolo bordo per stacco sul background */ .pm-band .pm-card{ border: 1px solid rgba(15, 23, 42, 0.06); } .pm-materiali-card{ max-width: 940px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } @media (max-width: 768px){ .pm-materiali-card{ max-width: 100%; padding-left: 20px; padding-right: 20px; } } /* ============================================================ FIX 19/09/2026 — collasso larghezza H5P (Question Set) nelle card .pm-materials-overview .pm-card è flex-direction:column; i div .h5p-content (Question Set, es. Test Grammatica/Test Comprensione, NON gli H5P renderizzati in iframe) non hanno una width esplicita e collassano al contenuto piu' stretto invece di riempire la card. ============================================================ */ .pm-materials-overview .pm-card > .h5p-content { width: 100% !important; } /* ============================================================ SEZIONI DISTINTE + CTA FINALE IN EVIDENZA — 19/09/2026 ============================================================ */ /* Video: banda con sfondo tenue, per staccarsi dal bianco della pagina */ #video.pm-section { background: linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%); } /* Materiali + Esercizi: stacco leggero dal resto della pagina */ #materiali.pm-materials-overview { padding-top: 56px; padding-bottom: 56px; border-top: 1px solid var(--pm-border, #edf0f5); } /* Titoli dei due gruppi ("Materiali per l'apprendimento", "Esercizi interattivi") */ #materiali .wp-block-columns > .wp-block-column > h2.wp-block-heading { font-size: 1.5rem; color: var(--pm-blue, #162f65); border-bottom: 3px solid var(--pm-yellow, #f9b233); display: inline-block; padding-bottom: 6px; margin-bottom: 8px; } /* CTA finale "Prenota": riquadro distinto, ben visibile */ #prenota.pm-cta { background: linear-gradient(135deg, var(--pm-blue, #162f65) 0%, #1f3d7a 100%); border-radius: var(--pm-radius, 22px); padding: 48px 40px; box-shadow: var(--pm-shadow, 0 14px 38px rgba(15,23,42,.14)); text-align: center; color: #fff; margin-top: 24px; margin-bottom: 24px; } #prenota.pm-cta .pm-section-title { color: #fff; } #prenota.pm-cta .pm-section-sub { color: rgba(255,255,255,.88); max-width: 640px; margin-left: auto; margin-right: auto; } #prenota.pm-cta .wp-block-buttons { justify-content: center; margin-top: 24px; } #prenota.pm-cta .pm-btn-primary { background: #f9b233 !important; color: #162f65 !important; font-weight: 700; font-size: 1.05rem; padding: 14px 32px !important; border-radius: 8px; box-shadow: none !important; } #prenota.pm-cta .pm-btn-primary:hover { background: #ffc862 !important; } a.send-message-button { display: none !important; }