/* * IDD — componenti di contenuto (blocchi ACF) * ---------------------------------------------------------------- * Stili per il carosello Swiper docenti (acf/slider-docenti) e la * griglia di pulsanti documento (acf/elenco-documenti). Stessa * palette/font di forms.css — vedi quel file per il perché di CSS * "normali" invece di @apply Tailwind. */ /* Contenuto editoriale (.prose) ---------------------------------------- */ /* Pallini delle liste puntate (incluso il blocco nativo Gutenberg "Elenco", che aggiunge la classe wp-block-list ma resta comunque un

): il modificatore Tailwind "prose-bullets:" non è affidabile con Tailwind via CDN (l'ordine/specificità delle utility generate a runtime non è garantito) — regola CSS diretta sul colore del marker, sempre vincente. */ .prose ul > li::marker { color: #E20000; } /* Pagina "Organigramma" (id 13): titoli H2 senza margine sotto, richiesta specifica di questa sola pagina — .page-id-13 è la classe che WordPress aggiunge automaticamente al tramite body_class(). */ .page-id-13 .prose h2 { margin-bottom: 0; } /* Separatore (blocco nativo Gutenberg "wp-block-separator"): colore rosso del brand invece del "currentColor" di default, e margini sopra/sotto uguali — !important perché il pannello "Spaziatura" del blocco può impostare margini diversi via stile inline per singola istanza, che altrimenti vincerebbe sulla nostra regola. */ .wp-block-separator { border-color: #E20000 !important; margin-top: 3em !important; margin-bottom: 3em !important; } /* Slider Docenti ------------------------------------------------------ */ /* Il wrapper esterno taglia le slide che sporgono ai lati (peek); lo swiper stesso resta overflow:visible così le slide adiacenti restano parzialmente visibili — stesso pattern di ssml.ideama.it/chi-siamo/. Rottura a piena larghezza di viewport: solo questa sezione esce dal container centrato dell'articolo (max-w-5xl in page.php), il resto della pagina (titolo, testo) resta dentro la colonna. */ .idd-docenti-fullbleed { position: relative; overflow: hidden; width: 100vw; margin-left: 50%; transform: translateX(-50%); padding: 0.5rem 0; } .idd-docenti-slider { width: 100%; overflow: visible; } .idd-docenti-slider .swiper-wrapper { align-items: stretch; } .idd-docenti-slider .swiper-slide { height: auto; opacity: 0.55; transform: scale(0.88); transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.6s; } .idd-docenti-slider .swiper-slide-active { opacity: 1; transform: scale(1); } .idd-docente-card { position: relative; isolation: isolate; width: 100%; min-height: 320px; overflow: hidden; border-radius: 1.25rem; background-color: #15120F; box-shadow: 0 18px 36px rgba(21, 18, 15, 0.22); } @media (min-width: 640px) { .idd-docente-card { min-height: 380px; } } @media (min-width: 1024px) { .idd-docente-card { min-height: 420px; } } .idd-docente-card .idd-docente-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.8s; } .idd-docente-card:hover .idd-docente-img { transform: scale(1.05); } .idd-docente-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(21, 18, 15, 0.92) 0%, rgba(21, 18, 15, 0.15) 55%, transparent 80%); } .idd-docente-meta { position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; bottom: 1.05rem; color: #FFFFFF; } .idd-docente-role { display: inline-block; margin-bottom: 0.35rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); } .idd-docente-name { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.08rem; font-weight: 600; line-height: 1.25; color: #FFFFFF; } /* Griglia Docenti (acf/griglia-docenti) -------------------------------- Stessa card di .idd-docente-card sopra, qui disposta in griglia invece che nello slider Swiper — 2 colonne mobile, 3 tablet, 4 desktop. Con display:grid le card della stessa riga si stirano di default alla stessa altezza, nessuna regola extra necessaria per quello. */ .idd-docenti-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } @media (min-width: 640px) { .idd-docenti-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } } @media (min-width: 1024px) { .idd-docenti-grid { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } } /* Card leggermente più basse qui rispetto allo Slider Docenti (che usa gli stessi .idd-docente-card): scoped alla griglia per non toccare lo slider, che mantiene le sue altezze originali. */ .idd-docenti-grid .idd-docente-card { min-height: 280px; } @media (min-width: 640px) { .idd-docenti-grid .idd-docente-card { min-height: 340px; } } @media (min-width: 1024px) { .idd-docenti-grid .idd-docente-card { min-height: 380px; } } /* Paginazione (paginate_links, type=plain): usata sia nell'archivio News (page-news.php) sia dallo shortcode [idd_news_categoria] — prima non aveva nessuno stile dedicato, solo il wrapper Tailwind del contenitore. */ .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem; border-radius: 9999px; color: rgba(21, 18, 15, 0.6); transition: background-color 0.15s ease, color 0.15s ease; } a.page-numbers:hover { background-color: #F4F2EF; color: #15120F; } .page-numbers.current { background-color: #15120F; color: #FFFFFF; } .page-numbers.dots { color: rgba(21, 18, 15, 0.35); } /* Checklist (acf/checklist) --------------------------------------------- */ .idd-checklist-title { margin-bottom: 1rem; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.15rem; font-weight: 600; color: #15120F; } .idd-checklist { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.75rem 0; } .idd-checklist-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; padding: 0.9rem 1.1rem; border-radius: 0.9rem; background-color: #F4F2EF; } .idd-checklist-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 9999px; background-color: #E20000; color: #FFFFFF; } .idd-checklist-icon svg { width: 0.85rem; height: 0.85rem; } .idd-checklist-text { flex: 1 1 16rem; font-size: 0.95rem; line-height: 1.5; color: #15120F; } .idd-checklist-link { display: inline-flex; align-items: center; gap: 0.35rem; flex-shrink: 0; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #E20000; white-space: nowrap; } .idd-checklist-link svg { width: 0.85rem; height: 0.85rem; } .idd-checklist-link:hover { text-decoration: underline; } /* Frecce di navigazione in overlay sui bordi dello slider. */ .idd-docenti-nav-overlay { position: absolute; inset: 0; z-index: 6; pointer-events: none; } .idd-docenti-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 9999px; border: 1px solid rgba(21, 18, 15, 0.15); background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #15120F; cursor: pointer; pointer-events: auto; box-shadow: 0 12px 28px rgba(21, 18, 15, 0.15); transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.15s ease; } .idd-docenti-arrow svg { width: 1.15rem; height: 1.15rem; } .idd-docenti-prev { left: -0.25rem; } .idd-docenti-next { right: -0.25rem; } @media (min-width: 640px) { .idd-docenti-prev { left: 0.5rem; } .idd-docenti-next { right: 0.5rem; } } .idd-docenti-arrow:hover { background-color: #15120F; border-color: #15120F; color: #FFFFFF; transform: translateY(-50%) scale(1.05); } .idd-docenti-arrow.swiper-button-disabled { opacity: 0.35; cursor: not-allowed; } .idd-docenti-arrow.swiper-button-disabled:hover { background-color: rgba(255, 255, 255, 0.85); color: #15120F; transform: translateY(-50%); } /* Elenco Documenti ------------------------------------------------------ */ .idd-doc-grid { display: grid; grid-template-columns: 1fr; gap: 0.875rem; } @media (min-width: 640px) { .idd-doc-grid { grid-template-columns: repeat(2, 1fr); } } .idd-doc-btn { display: flex; align-items: center; gap: 0.875rem; border-radius: 0.875rem; border: 1px solid rgba(21, 18, 15, 0.12); background-color: #FFFFFF; padding: 0.9rem 1.1rem; text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .idd-doc-btn:hover { border-color: #E20000; background-color: #F4F2EF; box-shadow: 0 10px 24px rgba(21, 18, 15, 0.07); } .idd-doc-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 9999px; background-color: rgba(226, 0, 0, 0.08); color: #E20000; } .idd-doc-icon svg { width: 1.15rem; height: 1.15rem; } .idd-doc-label { flex: 1; font-size: 0.9375rem; font-weight: 600; color: #15120F; line-height: 1.3; } .idd-doc-arrow { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: rgba(21, 18, 15, 0.35); } .idd-doc-arrow svg { width: 1.1rem; height: 1.1rem; } .idd-doc-btn:hover .idd-doc-arrow { color: #E20000; } /* Scheda Corso (facts grid) --------------------------------------------- */ .idd-facts-grid { display: grid; grid-template-columns: 1fr; gap: 1px; margin: 2rem 0; border-radius: 1rem; overflow: hidden; background-color: rgba(21, 18, 15, 0.08); } @media (min-width: 640px) { .idd-facts-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .idd-facts-grid { grid-template-columns: repeat(3, 1fr); } } /* Modificatore per schede con esattamente 4 voci (es. Redazione nella pagina Rivista): 4 colonne su una riga sola da lg in su, invece delle 3 di default. Non tocca .idd-facts-grid di base, usata altrove con 6 voci (Contatti, Erasmus+, landing Studenti Internazionali). */ @media (min-width: 1024px) { .idd-facts-grid.idd-facts-grid--cols-4 { grid-template-columns: repeat(4, 1fr); } } .idd-fact { display: flex; align-items: flex-start; gap: 0.875rem; background-color: #FFFFFF; padding: 1.25rem 1.4rem; } .idd-fact-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 9999px; background-color: rgba(226, 0, 0, 0.08); color: #E20000; } .idd-fact-icon svg { width: 1.15rem; height: 1.15rem; } .idd-fact-label { display: block; margin-bottom: 0.2rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(21, 18, 15, 0.5); } .idd-fact-value { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: #15120F; } /* Piano di Studi (accordion nativo, senza JS) --------------------------- */ .idd-year-block { margin: 2.5rem 0; } .idd-year-title { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1rem; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.35rem; font-weight: 600; color: #15120F; } .idd-year-title .idd-year-cfa { font-family: 'Hanken Grotesk', sans-serif; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(21, 18, 15, 0.45); } .idd-subjects { display: flex; flex-direction: column; gap: 0.6rem; } .idd-subject-row, .idd-subject-details { border: 1px solid rgba(21, 18, 15, 0.1); border-radius: 0.875rem; background-color: #FFFFFF; } .idd-subject-summary { display: flex; align-items: center; gap: 0.9rem; list-style: none; padding: 0.9rem 1.1rem; cursor: pointer; } .idd-subject-summary::-webkit-details-marker { display: none; } .idd-subject-row .idd-subject-summary { cursor: default; } .idd-subject-name { flex: 1; font-size: 0.9375rem; font-weight: 600; color: #15120F; } .idd-subject-code { flex-shrink: 0; font-size: 0.75rem; color: rgba(21, 18, 15, 0.4); } .idd-subject-cfa { flex-shrink: 0; border-radius: 9999px; background-color: #F4F2EF; padding: 0.25rem 0.65rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; color: #15120F; white-space: nowrap; } .idd-subject-chevron { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; color: rgba(21, 18, 15, 0.35); transition: transform 0.2s ease; } .idd-subject-chevron svg { width: 1rem; height: 1rem; } .idd-subject-details[open] .idd-subject-chevron { transform: rotate(180deg); } .idd-subject-body { border-top: 1px solid rgba(21, 18, 15, 0.08); padding: 1rem 1.1rem 1.15rem; font-size: 0.875rem; line-height: 1.6; color: rgba(21, 18, 15, 0.7); } .idd-subject-body p + p { margin-top: 0.75rem; } /* Immagine Parallasse ---------------------------------------------------- */ /* Stesso breakout a piena larghezza di viewport dello slider docenti. */ .idd-parallax { position: relative; width: 100vw; margin-left: 50%; transform: translateX(-50%); margin-top: 3rem; margin-bottom: 3rem; } /* Quando il blocco Immagine Parallasse/CTA Parallasse è l'ultimo elemento del contenuto della pagina (vedi page.php, $idd_flush_last), deve risultare attaccato senza stacco alla CTA rossa di fondo pagina: azzera il suo margine inferiore (l'article che lo contiene azzera a sua volta il proprio padding-bottom). Non tocca il caso generale, in cui il blocco resta seguito da altro contenuto. */ .idd-content--flush-end .idd-parallax:last-child { margin-bottom: 0; } .idd-parallax-clip { position: relative; overflow: hidden; height: 60vh; min-height: 320px; max-height: 640px; } /* L'immagine è più alta del contenitore visibile: il margine extra è lo spazio in cui GSAP ScrollTrigger la trasla verticalmente (main.js). Chi ha richiesto animazioni ridotte la vede semplicemente ferma. */ .idd-parallax-media { position: absolute; top: -8%; left: 0; width: 100%; height: 116%; object-fit: cover; object-position: center; } .idd-parallax-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; background: linear-gradient(to top, rgba(21, 18, 15, 0.75) 0%, rgba(21, 18, 15, 0) 55%); padding: 2rem 1.5rem; } @media (min-width: 1024px) { .idd-parallax-overlay { padding: 2.5rem 2.5rem; } } .idd-parallax-text { max-width: 42rem; font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: #FFFFFF; } @media (min-width: 1024px) { .idd-parallax-text { font-size: 1.9rem; } } /* CTA Parallasse (acf/cta-parallasse) ------------------------------------- Stessa struttura fisica di .idd-parallax (immagine+clip, animata via GSAP in main.js) ma con un overlay più ricco: eyebrow + titolo + paragrafo + pulsante facoltativo, ripreso dalla sezione "Il tuo futuro" di ssmlnelsonmandela.it/chi-siamo/. La regola sotto alza solo l'altezza del .idd-parallax-clip condiviso quando è annidato qui dentro, senza toccare l'uso "semplice" del blocco Immagine Parallasse. */ .idd-cta-parallax .idd-parallax-clip { height: 70vh; min-height: 420px; max-height: 760px; } .idd-cta-parallax-overlay { position: absolute; inset: 0; display: flex; align-items: center; /* Sfumatura più scura al centro rispetto alla prima versione: da quando il testo è centrato verticalmente (non più ancorato in basso), deve restare leggibile proprio nella fascia centrale dell'immagine. */ background: linear-gradient(to top, rgba(21, 18, 15, 0.92) 0%, rgba(21, 18, 15, 0.72) 50%, rgba(21, 18, 15, 0.3) 100%); padding-block: 2.5rem; } @media (min-width: 1024px) { .idd-cta-parallax-overlay { padding-block: 3.5rem; } } /* * Combacia esattamente con il contenitore del contenuto editoriale * (mx-auto + max-width + px-6/lg:px-0 di page.php/single.php): la * larghezza arriva dalla custom property --idd-cta-parallax-max, impostata * inline dal template in base al tipo di contenuto che ospita il blocco. */ .idd-cta-parallax-container { width: 100%; max-width: var( --idd-cta-parallax-max, 48rem ); margin-inline: auto; padding-inline: 1.5rem; } @media (min-width: 1024px) { .idd-cta-parallax-container { padding-inline: 0; } } .idd-cta-parallax-inner { max-width: 32rem; } .idd-cta-parallax-eyebrow { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #F59E0B; } .idd-cta-parallax-title { margin-top: 0.75rem; font-family: 'Bricolage Grotesque', sans-serif; font-size: 2.35rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; color: #FFFFFF; } @media (min-width: 1024px) { .idd-cta-parallax-title { font-size: 3.5rem; } } .idd-cta-parallax-text { margin-top: 0.85rem; max-width: 32rem; font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.75); } .idd-cta-parallax-btn { display: inline-flex; margin-top: 1.5rem; border-radius: 9999px; /* Sempre rosso primary: a differenza dell'eyebrow (testo sottile), il pulsante ha un riempimento pieno — il contrasto contro overlay/foto scure non è un problema, e il rosso è più coerente col resto del sito per una call-to-action. */ background-color: #E20000; padding: 0.9rem 1.75rem; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #FFFFFF; transition: background-color 0.2s ease, color 0.2s ease; } .idd-cta-parallax-btn:hover { background-color: #FFFFFF; color: #15120F; } /* Galleria immagini nelle news -------------------------------------------- Le foto a corredo delle news migrate sono raggruppate automaticamente in questa griglia da una funzione in functions.php (idd_group_content_image_ galleries) quando il paragrafo originale conteneva 2+ coppie link-immagine di seguito. Il lightbox è Fancybox, già agganciato a questi link da main.js — qui serve solo il layout. */ .idd-news-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin: 2rem 0; } @media (min-width: 640px) { .idd-news-gallery { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .idd-news-gallery { grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } } .idd-news-gallery a { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 0.75rem; background-color: #F4F2EF; cursor: zoom-in; } .idd-news-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .idd-news-gallery a::after { content: ''; position: absolute; inset: 0; background-color: rgba(21, 18, 15, 0); transition: background-color 0.2s ease; } .idd-news-gallery a:hover img { transform: scale(1.06); } .idd-news-gallery a:hover::after { background-color: rgba(21, 18, 15, 0.12); } /* Fiere e Saloni --------------------------------------------------------- Archivio (template-fiere-saloni.php, assegnato alla pagina "Fiere e Saloni") + card compatta (template-parts/card-fiera.php) + single (single-fiera_salone.php). Vedi anche inc/cpt-fiere-saloni.php e risorse/nuovo-cpt.md per la specifica completa. */ .idd-fiere-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin: 2rem 0 3rem; } @media (min-width: 1024px) { .idd-fiere-layout { grid-template-columns: 220px 1fr; gap: 4rem; align-items: start; } } /* Offset "top" = altezza reale dell'header fisso del tema, misurata in JS (vedi lo script in template-fiere-saloni.php) e scritta in questa custom property: niente più valori indovinati, che andavano sotto l'header perché la barra utility + riga logo su desktop sono più alte di quanto stimato. Il fallback 130px vale solo per il primissimo istante prima che il JS giri (o se JS è disabilitato). */ .idd-fiere-nav { position: sticky; top: var(--idd-fiere-nav-top, 130px); z-index: 10; } @media (max-width: 1023px) { .idd-fiere-nav { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.75rem 0; margin: 0 -1.5rem; padding-inline: 1.5rem; background-color: #FFFFFF; border-bottom: 1px solid rgba(21, 18, 15, 0.08); -ms-overflow-style: none; scrollbar-width: none; } .idd-fiere-nav::-webkit-scrollbar { display: none; } } .idd-fiere-nav-list { display: flex; flex-direction: column; gap: 0.15rem; } @media (max-width: 1023px) { .idd-fiere-nav-list { flex-direction: row; gap: 0.5rem; } } .idd-fiere-nav-link { display: inline-flex; align-items: center; white-space: nowrap; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.2rem; color: rgba(21, 18, 15, 0.45); padding: 0.6rem 0 0.6rem 1rem; border-left: 3px solid rgba(21, 18, 15, 0.1); transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .idd-fiere-nav-link:hover { color: #15120F; } .idd-fiere-nav-link.is-active { color: #E20000; border-color: #E20000; } @media (max-width: 1023px) { .idd-fiere-nav-link { border-left: none; padding: 0.45rem 1rem; border-radius: 9999px; background-color: #F4F2EF; } .idd-fiere-nav-link.is-active { color: #FFFFFF; background-color: #E20000; } } .idd-fiere-year-section { scroll-margin-top: var(--idd-fiere-nav-top, 130px); } .idd-fiere-year-section + .idd-fiere-year-section { margin-top: 3.5rem; } .idd-fiere-year-heading { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 2.1rem; color: #15120F; margin-bottom: 1.5rem; } .idd-fiere-card-list { display: flex; flex-direction: column; gap: 1rem; } .idd-fiera-card { display: flex; gap: 1.25rem; border-radius: 1rem; border: 1px solid rgba(21, 18, 15, 0.08); background-color: #FFFFFF; padding: 0.75rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .idd-fiera-card:hover { border-color: rgba(226, 0, 0, 0.35); box-shadow: 0 8px 24px rgba(21, 18, 15, 0.06); } .idd-fiera-card-thumb { flex-shrink: 0; width: 120px; aspect-ratio: 4 / 3; border-radius: 0.75rem; overflow: hidden; background-color: #F4F2EF; } .idd-fiera-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .idd-fiera-card:hover .idd-fiera-card-thumb img { transform: scale(1.05); } .idd-fiera-card-body { min-width: 0; display: flex; flex-direction: column; justify-content: center; } .idd-fiera-card-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 1.05rem; line-height: 1.25; color: #15120F; transition: color 0.2s ease; } .idd-fiera-card:hover .idd-fiera-card-title { color: #E20000; } .idd-fiera-card-meta { margin-top: 0.35rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: rgba(21, 18, 15, 0.45); } .idd-fiera-card-excerpt { margin-top: 0.5rem; font-size: 0.85rem; line-height: 1.5; color: rgba(21, 18, 15, 0.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (min-width: 640px) { .idd-fiera-card-thumb { width: 160px; } } @media (max-width: 380px) { .idd-fiera-card { flex-direction: column; } .idd-fiera-card-thumb { width: 100%; } } /* Single Fiera/Salone (single-fiera_salone.php) -------------------------- */ .idd-fiera-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; font-size: 0.95rem; color: rgba(21, 18, 15, 0.6); } .idd-fiera-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @media (min-width: 768px) { .idd-fiera-gallery { grid-template-columns: repeat(3, 1fr); } } .idd-fiera-gallery a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0.75rem; } .idd-fiera-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .idd-fiera-gallery a:hover img { transform: scale(1.05); } /* Slideshow Hero (template-parts/blocks/hero.php) ------------------------ */ /* Sostituisce il video in homepage: 6 foto in dissolvenza incrociata lenta, loop continuo. opacity massima 0.7 (non 1) per riprodurre esattamente lo stesso scurimento che aveva il video/poster originale (classe Tailwind opacity-70) — non si può più usare quella utility class qui perché l'animazione, agendo sulla stessa proprietà "opacity", la sovrascriverebbe. Il gradiente scuro sopra resta invariato (vedi div .bg-gradient-to-t nel markup). Ciclo di 48s per 6 immagini, 8s a testa: 3s di fade-in, 2s piena, 3s di fade-out — stessa curva per tutte, sfalsata via animation-delay (nth-child) così che si alternino in ordine e resti sempre una sola immagine visibile alla volta. */ .hero-slideshow__img { opacity: 0; animation: idd-hero-fade 48s infinite; } /* Fade-in 4s, piena 2s, fade-out 4s: finestra visibile di 10s contro uno sfasamento di 8s tra un'immagine e la successiva (vedi animation-delay sotto). I 2s di margine fanno sì che la discesa di un'immagine si sovrapponga alla salita della successiva: transizione incrociata (crossfade) invece di un buio pieno tra le due. Opacità massima alzata da 0.7 a 0.95 (richiesta cliente: sito più luminoso, non più foto scurite/desaturate) — il testo resta leggibile grazie al gradiente più corto in hero.php, concentrato solo in basso. */ @keyframes idd-hero-fade { 0% { opacity: 0; } 8.33% { opacity: 0.95; } 12.5% { opacity: 0.95; } 20.83% { opacity: 0; } 100% { opacity: 0; } } /* Delay negativo sulla prima immagine: la fa partire già "a metà" del proprio fade-in (piena da subito), invece di lasciare l'hero nero per i primi 4s al caricamento della pagina. Le altre 5 seguono a cascata ogni 8s. */ .hero-slideshow__img:nth-child(1) { animation-delay: -4s; } .hero-slideshow__img:nth-child(2) { animation-delay: 4s; } .hero-slideshow__img:nth-child(3) { animation-delay: 12s; } .hero-slideshow__img:nth-child(4) { animation-delay: 20s; } .hero-slideshow__img:nth-child(5) { animation-delay: 28s; } .hero-slideshow__img:nth-child(6) { animation-delay: 36s; } /* Identità grafica "scuola di design" ------------------------------------- Set di componenti aggiunti per caratterizzare il sito in modo più deciso (rif. cliente: laba.edu, accademiadellearti.it) — sigillo ruotato, numeri "ghost" in overlay, taglio d'angolo sulle card, ticker doppio. Usati da hero.php, why.php, courses.php, stats.php, marquee.php. */ /* Sigillo (badge tipo "timbro"): eyebrow in hero. Non più ruotato su richiesta cliente (2026-09-22): l'inclinazione non piaceva. */ .idd-stamp { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 9999px; padding: 0.5rem 1.1rem; /* Rosso brand invece di vetro scuro: più luminoso e più "brandizzato", niente più tinta ink/nera sul badge. */ background-color: rgba(226, 0, 0, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* Numero "ghost": cifra enorme solo di contorno, usata come texture grafica dietro/accanto ai titoli invece che come dato informativo (quello resta nel testo normale). -webkit-text-stroke non ha ricaduta accessibile: l'elemento è sempre aria-hidden nel markup. Fallback (niente stroke supportato): resta un numero pieno a bassa opacità, comunque un effetto voluto. */ .idd-ghost-number { color: transparent; -webkit-text-stroke: 1.5px currentColor; text-stroke: 1.5px currentColor; opacity: 0.16; pointer-events: none; user-select: none; } /* Taglio d'angolo: notch triangolare in alto a destra, come un "biglietto" — spezza il rettangolo uniforme delle card corso. clip-path invece di un bordo/pseudo-elemento perché deve tagliare anche l'immagine sotto, non solo sovrapporsi. */ .idd-corner-cut { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); } @media (min-width: 1024px) { .idd-corner-cut { clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); } } /* Ticker doppio (marquee.php): seconda riga controrotante rispetto alla prima, stesso keyframe "marquee" di idd_tailwind_config() ma percorso invertito — evita di dover duplicare il keyframe in Tailwind config solo per il verso. */ .idd-marquee-reverse { animation-direction: reverse; } /* Macchie di colore decorative (hero, richiesta cliente: più luminosità e dinamicità senza scurire le foto) — cerchi sfocati in overlay, stesso principio delle "drift-circle" già usate in page.php per l'header senza immagine in evidenza, qui in versione colorata invece che monocromatica. */ .idd-color-blob { position: absolute; border-radius: 9999px; filter: blur(60px); pointer-events: none; mix-blend-mode: screen; } /* Pagina di corso — landing (template-corso.php) ------------------------ * Set di componenti per l'impostazione "più distintiva e dinamica" chiesta * dal cliente per la pagina del corso di Design (indicazioni.md §2): galleria * di progetto a rottura di griglia, sbocchi professionali come chip invece * di un elenco puntato, Scheda Corso più grande, Piano di Studi a tab per * anno. Tutto scoped a ".idd-course-landing" (wrapper dell'articolo nel * template) tranne dove serve un id per l'ancora dall'hero. */ /* Ancora "Vedi il Piano di Studi" dall'hero: senza scroll-margin l'heading finirebbe nascosto dietro l'header fisso (~130px) dopo lo scroll. */ #idd-piano-di-studi { scroll-margin-top: 140px; } /* Galleria specializzazioni: stessa griglia asimmetrica a 6 colonne di template-parts/blocks/courses.php (homepage), qui dentro il flusso editoriale invece che in una sezione a sé — i col-span/aspect-ratio delle singole card restano inline nel markup (vedi post_content), qui serve solo il contenitore. */ .idd-course-showcase { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin: 2.5rem 0; } @media (min-width: 640px) { .idd-course-showcase { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .idd-course-showcase { grid-template-columns: repeat(6, 1fr); gap: 1rem; } } /* Sbocchi professionali: chip invece di elenco puntato piatto. */ .idd-outcomes-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 2.5rem; } .idd-outcome-chip { display: inline-flex; align-items: center; gap: 0.55rem; border-radius: 9999px; border: 1px solid rgba(21, 18, 15, 0.12); background-color: #F4F2EF; padding: 0.7rem 1.25rem; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 0.9rem; color: #15120F; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } .idd-outcome-chip:hover { background-color: #E20000; border-color: #E20000; color: #FFFFFF; transform: translateY(-2px); } .idd-outcome-chip .idd-outcome-icon { color: #E20000; font-size: 0.8em; transition: color 0.2s ease; } .idd-outcome-chip:hover .idd-outcome-icon { color: #FFFFFF; } /* Scheda Corso: variante più grande/d'impatto solo sulla landing di corso (altrove — Contatti, Erasmus+ — .idd-facts-grid resta come prima). */ .idd-course-landing .idd-facts-grid { margin: 2.5rem 0; border-radius: 1.25rem; } .idd-course-landing .idd-fact { gap: 1.1rem; padding: 1.6rem 1.75rem; } .idd-course-landing .idd-fact-icon { width: 3rem; height: 3rem; } .idd-course-landing .idd-fact-icon svg { width: 1.35rem; height: 1.35rem; } .idd-course-landing .idd-fact-value { font-size: 1.05rem; } /* Piano di Studi: tab per anno, costruite via JS sopra i tre ".idd-year-block" già presenti nel contenuto (vedi js/main.js, idd_init_piano_tabs) — tutte le materie dell'anno selezionato restano subito visibili in un'unica vista, senza dover scorrere gli altri due anni (richiesta cliente, indicazioni.md §2). Se JS è disabilitato le tab non compaiono e i tre blocchi restano tutti visibili in sequenza come prima: nessun contenuto viene mai nascosto in modo permanente. */ .idd-piano-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 2.5rem 0 0.5rem; } .idd-piano-tab { border-radius: 9999px; border: 1px solid rgba(21, 18, 15, 0.15); background-color: #FFFFFF; padding: 0.65rem 1.4rem; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 0.9375rem; color: rgba(21, 18, 15, 0.55); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .idd-piano-tab:hover { border-color: #E20000; color: #15120F; } .idd-piano-tab.is-active { background-color: #E20000; border-color: #E20000; color: #FFFFFF; } .idd-year-block.is-hidden { display: none; } /* Piano di Studi: 2 colonne su desktop dentro la landing di corso (altrove .idd-subjects resta a colonna singola) — più materie a colpo d'occhio per ogni anno, coerente con "immediatamente consultabile nella sua completezza" (indicazioni.md §2). */ @media (min-width: 768px) { .idd-course-landing .idd-subjects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } }