Design system · privato

Wiki MetaCometa

Riferimento di tutti i componenti, token e regole del design system di webducks.it. Pagina privata, non indicizzata, accessibile solo da admin loggati.

Indice

Tokens (colori, font)
Layout & container
Sezioni & sfondi
Tipografia & eyebrow
Bottoni
Card
Form
Componenti specializzati
Utilità & helper
Regole & anti-pattern
Vetro & card uniformi
Marquee grabbable
Full-bleed & template
Filtri contenuto WP
Gradienti multi-radial

Come usare

Ogni componente ha: nome classe (copiabile), descrizione, anteprima live, snippet di codice. Quando aggiungi una nuova sezione/componente in /tmp/build_webducks.py, aggiungi anche una voce qui per i futuri me/te.

Tokens

CSS custom-properties definite in :root. Usa var(--c-...) ovunque invece di hex inline.

--c-action

Colore d’azione AA-compliant (4.7:1 vs bianco). Usalo per bottoni primari e card con testo bianco. NON usare –c-primary per fondi con testo bianco, fallisce WCAG.

<a class="mc-btn-action is-primary">Azione</a>

--c-primary

Brand orange acceso. Usalo solo per accenti decorativi (eyebrows, icone, link, dot) dove non c’è testo white-on-top.

Eyebrow esempio

<p class="mc-eyebrow">Eyebrow</p>

Font display + body

Young Serif (display, serif, italic per accenti). DM Sans (body, sans). Preloaded via <link> nel header template part.

Una famiglia per ogni bambino

Corpo testo in DM Sans, 17px, line-height 1.55.

font-family: var(--f-display);  /* Young Serif, headings */
font-family: var(--f-body);     /* DM Sans, body */

Palette completa

–c-primary

#E97E3A

–c-primary-deep

#C25E1F

–c-primary-soft

#FAD8BD

–c-action

#B25420

–c-action-deep

#8F4214

–c-eyebrow-on-orange

#FFF3E8

–c-secondary

#4F2D7F

–c-secondary-deep

#371E5C

–c-secondary-soft

#DCCDEF

–c-bg

#FBF5EE

–c-bg-alt

#FFFBF4

–c-bg-deep

#F1E7DA

–c-paper

#FFFFFF

–c-ink

#1F1633

–c-ink-soft

#4A3F5C

–c-ink-mute

#6F6385

–c-line

#E6DBD0

–c-accent

#F2B645

Layout & container

Tre container widths. Usa sempre uno di questi, mai max-width inline.

.mc-container

Container standard. Max 1240px. Usato per la maggior parte delle sezioni.

max-width: 1240px

<div class="wp-block-group mc-container">…</div>

.mc-container-narrow

Container per corpo testo / articoli. Max 720px. Tipografia leggibile (45-75 caratteri per riga).

max-width: 720px

<div class="wp-block-group mc-container-narrow">…</div>

.mc-container-wide

Container per hero image / media più larghi del testo. Max 1080px.

max-width: 1080px

<div class="wp-block-group mc-container-wide">…</div>

Sezioni & sfondi

Le sezioni full-width usano sempre il gradiente del body. Solo .mc-bg-deep spezza la continuità. .mc-bg-warm e .mc-bg-soft sono mappate a trasparente per coerenza globale.

.mc-section

Sezione standard. Padding verticale fluido clamp(64px, 9vw, 120px). Bg trasparente → mostra il gradiente del body.

mc-section · padding-block fluido

group_full(content, classname="mc-section")

.mc-bg-deep

Sezione viola scuro con gradiente multi-radial. Unica rottura visiva intenzionale del flusso del body. Testo bianco automatico.

mc-bg-deep · soft purple gradient

group_full(content, classname="mc-section mc-bg-deep")

.mc-trust

Strip orizzontale sottile con hairline alpha 0.06 sopra/sotto. Per banner di trust, regions, partner.

mc-trust · hairline only

group_full(content, classname="mc-trust")

Tipografia & eyebrow

.mc-h-display / .mc-h-1 / .mc-h-2 / .mc-h-3

Scala fluida con clamp. Display: 40-96px. h-1: 34-64px. h-2: 28-48px. h-3: 22-30px.

Display

Heading 2

<h1 class="wp-block-heading mc-h-display">Title</h1>

.mc-eyebrow

Etichetta sopra il titolo. 13px maiuscolo, color action, con dash decorativo a sinistra.

Sezione · Cosa facciamo

<p class="mc-eyebrow">Cosa facciamo</p>

.mc-h-em

Span italic in arancione per evidenziare una parola dentro un titolo. Usalo sparingly.

Una famiglia per ogni bambino.

<h1>Per ogni <em class="mc-h-em">bambino</em></h1>

.mc-prose

Stile editoriale per articoli lunghi. 19px, line-height 1.75, drop-cap sul primo paragrafo.

Body text editoriale. Il primo paragrafo riceve un drop-cap Young Serif di 3.2em.

<div class="mc-prose"><p>Lungo paragrafo…</p></div>

.mc-pullquote

Pull-quote centrato per articoli. Young Serif italic, color action, hairlines orizzontali.

“Casa è dove qualcuno ti sceglie.”

<blockquote class="mc-pullquote">"…"</blockquote>

Bottoni

Sistema unificato .mc-btn-action + modificatore. Funziona come <a>, <button>, dentro wp:html.

.mc-btn-action.is-primary

CTA primario. Bg –c-action (terracotta scuro AA-compliant), testo bianco. Hover: –c-action-deep + lift -1px.

Dona ora

<a href="…" class="mc-btn-action is-primary">Dona ora</a>

.mc-btn-action.is-secondary

CTA secondario. Outline ink, bg transparent. Hover: invertito (bg ink, testo bg).

Scopri l’affido

<a href="…" class="mc-btn-action is-secondary">Scopri</a>

.mc-btn-action.is-light

Bg bianco, testo ink. Per uso sopra fondi colorati scuri (es. dentro .mc-orange-card o .mc-cta-card).

Pagina 5×1000 →

<a href="…" class="mc-btn-action is-light">Continua</a>

.mc-btn-action.is-ghost-light

Outline bianco semi-trasparente. Per CTA secondaria sopra fondi scuri (.mc-cta-card).

Annulla

<a href="…" class="mc-btn-action is-ghost-light">Skip</a>

Card

.mc-card

Card neutra. Bg –c-paper, border –c-line, border-radius 18px, shadow morbida.

Card title

Contenuto della card

<div class="mc-card" style="padding:32px">…</div>

.mc-orange-card

Card primary (arancione –c-action) con testo bianco. AA-compliant. Eyebrow + h1/h2/h3 + p tutti gestiti automaticamente.

5×1000

Non costa nulla.

Vale moltissimo.

<div class="mc-orange-card" style="padding:48px">…</div>

.mc-cta-card

Card viola scuro per CTA finali. Bg –c-secondary, padding clamp(40-80px), testo bianco. Bottoni interni invertiti.

Tre passi.

Scegli il tuo.

<div class="wp-block-group mc-cta-card">…</div>

.mc-aziende-card-gradient

Card con gradient sottile come il body. Bg –c-bg-alt + 4 radial gradients molto leggeri. Per blocchi di contenuto editoriale grandi.

Card con gradient body-like dentro

<div class="mc-aziende-card-gradient" style="padding:56px;border-radius:18px">…</div>

.mc-story-card-link

Card articolo cliccabile. <a> wrapper con foto + body + CTA. Hover: translateY(-4px).

Categoria

“Quote citazione.”

Leggi →

<a href="/storia-xyz/" class="mc-story-card-link">
  <img src="…" class="mc-story-card-img"/>
  <div class="mc-story-card-body">…</div>
</a>

Form

.mc-form

Layout 2-col responsive (1-col su mobile). Input/textarea/select stilizzati uniformemente. Submit button color –c-primary.

<form class="mc-form" action="…">
  <div><label>Nome</label><input/></div>
  …
</form>

Componenti specializzati

.mc-fr-mixed (+ .is-featured / .is-medium)

Griglia 4-col con card featured (span 2) e medium (span 1). Sotto, .mc-fr-quiet-row per link inline.

featured

med

<div class="mc-fr-mixed">
  <a class="mc-fr-card is-featured">…</a>
  …
  <a class="mc-fr-card is-medium">…</a>
</div>

.mc-impact-editorial

Layout 2-col per stats narrativi. Sinistra: numero grande anchor. Destra: 3 frasi con numeri inline. Usa al posto di tile grids hero-metric.

1.500+ minori accolti

<div class="mc-impact-editorial">
  <div><div class="mc-impact-lead">25<span class="mc-impact-lead-suffix">anni</span></div></div>
  <div><div class="mc-impact-sentence"><p class="label"><span class="num">N</span> …</p></div></div>
</div>

.mc-allocation

Stacked bar chart per allocazioni percentuali. 3 segmenti colorati + legenda + totale.

82% / 12% / 6%

<div class="mc-allocation">
  <div class="mc-allocation-bar">
    <div class="mc-allocation-seg is-direct" style="flex:82"></div>
    …
  </div>
</div>

.mc-faq + .mc-faq-item

Accordion con animazione smooth (grid-template-rows 0fr→1fr). Tasto + toggle, icona +/− che ruota.

Risposta.

<div class="mc-faq-item" data-open="false">
  <button class="mc-faq-q" aria-expanded="false">
    <span>Q?</span><span class="mc-faq-toggle">+</span>
  </button>
  <div class="mc-faq-a-wrap">
    <div class="mc-faq-a"><div class="mc-faq-a-inner">A.</div></div>
  </div>
</div>

.mc-hero-slideshow

Slideshow auto-play 5s con dots cliccabili, pause via IntersectionObserver quando offscreen. Aspect 4/5.

<div class="mc-hero-slideshow" id="mc-hero-slideshow">
  <img class="mc-hero-slide is-active" src="…"/>
  …
  <div class="mc-hero-dots"></div>
</div>

.mc-stories-fw + .mc-stories-bg-photo

Sezione con parallax photos floating in background. JS gestisce translate basato su scroll. Center photo va giù, edges su.

<section class="mc-section mc-stories-fw">
  <img class="mc-stories-bg-photo mc-stories-photo-1"/>
  …
</section>

.mc-trust-strip

Strip orizzontale flex centrata di label + region pills. Wraps su mobile.

Regioni:CataniaUdineFirenze

<div class="mc-trust-strip">
  <span class="mc-trust-label">…</span>
  <span class="mc-trust-region">Citta</span>
</div>

Utilità & helper

.mc-badge / .mc-pill

Etichette piccole. Badge: bg –c-bg-deep + border. Pill: bg –c-primary-soft, color action.

Categoria Pill

<span class="mc-badge">Tag</span>
<span class="mc-pill">Pill</span>

.mc-volo-bullets / .mc-cinque-bullets

Liste con star bullet. Volo: star arancio –c-primary. Cinque: star giallo –c-accent (per fondo arancione).

Punto uno
Punto due

<ul class="mc-volo-bullets">
  <li>Item</li>
</ul>

.mc-back-link

Link “← Torna a…” sopra articolo. Color ink-soft, hover action.

← Torna alle storie

<a href="/storie/" class="mc-back-link">← Torna alle storie</a>

Regole & anti-pattern

SI sezioni full-width via group_full(). Container interno via container(). Mai max-width inline.

Vetro & card uniformi

Card “di vetro”: sfondo translucido + blur(14px), bordo chiaro, ombra md. Tre tinte. Padding uniforme via --card-pad. (agg. 2026-06, §15b–c)

.mc-glass-clear / -orange / -violet

Tre tinte di vetro. Contrasto AA: tinte ≤0.22 opacità su crema → testo ink ok. Su viola pieno usa paper.

clear

orange

violet

.mc-glass{border:1px solid;border-radius:18px;box-shadow:var(--shadow-md);color:var(--c-ink)}
.mc-glass-clear { background:rgba(255,251,244,.55); border-color:rgba(255,255,255,.55) }
.mc-glass-orange{ background:rgba(233,126,58,.20); border-color:rgba(233,126,58,.40) }
.mc-glass-violet{ background:rgba(79,45,127,.22);  border-color:rgba(79,45,127,.40) }

--card-pad

Padding uniforme di tutte le card-sezione di vetro. (la .mc-card piccola con immagine top resta 14px per il radius concentrico §6).

:root{ --card-pad: clamp(24px,3.2vw,40px); }
.tcard{ padding:var(--card-pad) }  /* tutte le card-sezione di vetro */

SI Vetro su bg/gradienti (serve qualcosa dietro per vedere il blur).

SI CTA a destra della card (align-self:flex-end;margin-top:auto). Radius bottone armonizzato: max(8px, radius_card − card-pad/2).

NO Testo ink su vetro viola pieno → usa paper.

Marquee orizzontale grabbable

Riga di card che scorre in orizzontale, trascinabile (grab) + auto-scroll + loop infinito. Usato in home → “I nostri progetti”. (§15c)

.mc-prog-rail / .mc-prog-track

Rail scrollabile (scrollbar nascosta) + cursor grab; track flex con card duplicate ×2 per il loop seamless; bordi sfumati con mask.

aMALI

Lotuiani

Diurna

Dopo di noi

+altri

Anteprima statica (cursor:grab + mask). Drag, auto-scroll e loop sono aggiunti dal JS qui sotto.

.mc-prog-rail{ overflow-x:auto; overflow-y:hidden; cursor:grab; scrollbar-width:none;
  width:100vw; margin-left:calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent) }
.mc-prog-rail::-webkit-scrollbar{ display:none }
.mc-prog-rail.is-grab  { cursor:grabbing }
.mc-prog-rail.is-grab a{ pointer-events:none }   /* no click accidentale dopo drag */
.mc-prog-track{ display:flex; gap:18px; width:max-content }   /* card duplicate x2 nel DOM */

JS (pointer events)

Auto-scroll rAF (pausa su hover/drag), loop a metà scrollWidth, drag con setPointerCapture. scrollLeft frazionario OK; rAF in pausa su tab background (atteso).

var down=false, sx=0, sl=0, auto=true;
function wrap(){ var h=track.scrollWidth/2;
  if(rail.scrollLeft>=h) rail.scrollLeft-=h; else if(rail.scrollLeft<=0) rail.scrollLeft+=h; }
// auto-scroll idle  (NB: niente && -> WP lo converte in &#038; -> SyntaxError; annida gli if)
requestAnimationFrame(function tick(){ if(auto){ if(!down){ rail.scrollLeft+=0.6; wrap(); } }
  requestAnimationFrame(tick); });
// drag
rail.addEventListener('pointerdown',function(e){ down=true; sx=e.clientX; sl=rail.scrollLeft;
  rail.classList.add('is-grab'); rail.setPointerCapture(e.pointerId); });
rail.addEventListener('pointermove',function(e){ if(down) rail.scrollLeft = sl-(e.clientX-sx); });
rail.addEventListener('pointerup',  function(){ down=false; rail.classList.remove('is-grab'); });

SI Niente &&/|| nel JS inline (WP li rompe) → annida gli if.

NO overflow:hidden sul rail → usa overflow-x:auto + scrollbar nascosta + mask.

Full-bleed & template

Band a tutta larghezza e pagine senza margini laterali. (§15d)

.full-bleed + overflow-x:clip

100vw include la scrollbar (→ overflow/gap). overflow-x:clip sitewide non rompe position:sticky (a differenza di hidden).

/* band a tutta larghezza dentro un container (100vw include la scrollbar!) */
.full-bleed{ width:100vw; margin-left:calc(50% - 50vw) }
/* niente margine laterale sitewide (clip non rompe position:sticky, hidden si) */
html,body{ overflow-x:clip !important }

template twentytwentyfive//fullbleed

Layout default (no global padding) = vero edge-to-edge. Assegnato a /il-viaggio-di-ibra/.

<!-- template custom: twentytwentyfive//fullbleed -->
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:post-content {"align":"full","layout":{"type":"default"}} /-->
<!-- wp:template-part {"slug":"footer"} /-->

NO alignfull + has-global-padding → doppio padding (45px×2) = margine. alignfull da solo non basta.

SI Template fullbleed per pagine che devono toccare i bordi.

Filtri contenuto WordPress

I filtri WP corrompono JS/CSS inline dentro wp:html. Verificati sul campo. (§15e)

&& → & ⚠ killer silenzioso

Il più infido: & diventa &. Script morto senza errore visibile lato editor.

if(auto && !down){ ... }          // sorgente
if(auto &#038;&#038; !down){ ... }  // come arriva al browser -> SyntaxError

NO &&/& nel JS (→ &). Annida gli if.

NO --, ..., " ', 1/2 nel testo (wptexturize → en-dash / … / curly / ½).

NO [...] non-shortcode (do_shortcode). Upload .js/.css in Media bloccato (.html permesso).

SI Workaround: 1) evita i char a rischio · 2) hex-encode + bootstrap backtick · 3) iframe a un .html in Media (isolamento totale).

Gradienti multi-radial

Sfondi sezione morbidi e continui (§3): 4 ellissi radiali sparse + base solida (tecnica mc-aziende-card-gradient). (§15f)

.mc-grad-1 / -3 / -4 / -5 / -aziende

Opacità basse (0.05–0.18) per restare delicato e leggibile. Base warm (#FFFBF4/#FBF5EE); shift verso viola vicino al footer.

.mc-grad-1{ background:
  radial-gradient(ellipse 60% 55% at 15% 20%, rgba(233,126,58,.07), transparent 65%),
  radial-gradient(ellipse 55% 50% at 90% 25%, rgba(79,45,127,.06), transparent 65%),
  radial-gradient(ellipse 65% 50% at 30% 95%, rgba(242,182,69,.06), transparent 65%),
  radial-gradient(ellipse 50% 50% at 85% 90%, rgba(220,205,239,.18), transparent 65%),
  #FFFBF4; }

Design System (wiki interna)