/* ══════════════════════════════════════════════════════════════════ SERIE Ai — assets/articolo.css Foglio di stile condiviso da tutti gli articoli e dalle pagine Fondamenti e Metodo. La home ha uno stile proprio, incorporato. È il "contratto": chi scrive un articolo usa soltanto le classi definite qui e non aggiunge stile proprio. Così articoli redatti in momenti diversi restano identici, e un cambio di palette si fa modificando questo solo file. VOCABOLARIO Struttura .barra .colonna .torna Testata .eyebrow .occhiello .firma Schizzo .schizzo .telaio .spiega Testo .riquadro .tabella .estratto .chiusa Piede .piede ACCENTO DI SQUADRA — impostato sul di ogni articolo: style="--squadra:#1D8FCE; --squadra-tenue:#1D8FCE18" ══════════════════════════════════════════════════════════════════ */ :root{ --bianco:#FDFDFB; --carta:#F5F4EF; --carta2:#EFEDE6; --verde:#0F5132; --rosso:#C9252D; --grafite:#2A2A28; --testo:#33332F; --grigio:#6B6B63; --linea:#DEDCD4; /* valori di ripiego: l'articolo li sovrascrive sul */ --squadra:#0F5132; --squadra-tenue:#0F513218; --inchiostro:#3A3A36; --inchiostro-tenue:#3A3A3655; --col:660px; --largo:1080px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bianco);color:var(--testo); font-family:'Source Serif 4',Georgia,'Times New Roman',serif; font-size:18px;line-height:1.75; -webkit-text-size-adjust:100%; text-size-adjust:100%; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none} [hidden]{display:none !important} /* ─────────────── barra tricolore ─────────────── */ .tricolore{height:4px;display:flex;position:sticky;top:0;z-index:60} .tricolore i{flex:1} .tricolore i:nth-child(1){background:#0F5132} .tricolore i:nth-child(2){background:#FDFDFB} .tricolore i:nth-child(3){background:#C9252D} /* ─────────────── testata di navigazione ─────────────── */ .barra{ position:sticky;top:4px;z-index:55; background:rgba(253,253,251,.94); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--linea); } .barra-in{ max-width:var(--largo);margin:0 auto;padding:11px 28px; display:flex;align-items:center;justify-content:space-between;gap:16px; } .marchio{ font-family:'Caveat',cursive;font-size:27px;font-weight:700; color:var(--verde);line-height:1;flex:none; } .marchio b{color:var(--rosso)} .barra nav{display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end} .barra nav a{ font-family:'Inter',system-ui,sans-serif; font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase; color:var(--grigio);padding:7px 11px; border-bottom:2px solid transparent;transition:color .12s ease; } .barra nav a:hover{color:var(--grafite)} .barra nav a[aria-current="page"]{color:var(--grafite)} .barra nav a.v-riflessioni[aria-current="page"]{border-bottom-color:var(--verde)} .barra nav a.v-fondamenti[aria-current="page"]{border-bottom-color:var(--rosso)} .barra nav a.v-metodo[aria-current="page"]{border-bottom-color:var(--grigio)} /* ─────────────── impaginazione ─────────────── */ main{max-width:var(--largo);margin:0 auto;padding:0 28px 100px} .colonna{max-width:var(--col)} /* ─────────────── etichetta di sezione ─────────────── */ .eyebrow{ display:flex;align-items:center;gap:10px; font-family:'Inter',system-ui,sans-serif; font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--sezione,var(--grigio)); } .eyebrow::before{content:'';width:22px;height:2px;background:currentColor;flex:none} /* ─────────────── testata dell'articolo ─────────────── */ .torna{ font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--grigio); padding:14px 0;display:inline-block; } .torna:hover{color:var(--grafite)} article h1{ font-family:'Inter',system-ui,sans-serif; font-size:clamp(30px,4.6vw,46px);font-weight:700; letter-spacing:-.03em;line-height:1.1;color:var(--verde);max-width:17ch; } .occhiello{margin-top:18px;font-size:20px;color:#4A4A46;max-width:56ch} .firma{ margin-top:20px;padding-top:15px;border-top:1px solid var(--linea); font-family:'Inter',system-ui,sans-serif;font-size:12.5px;color:var(--grigio); max-width:var(--col); } article .colonna p{margin-top:22px} article .colonna p:first-of-type{margin-top:28px} article h2{ font-family:'Inter',system-ui,sans-serif; font-size:22px;font-weight:600;letter-spacing:-.015em; color:var(--grafite);margin-top:42px;max-width:26ch; } /* ─────────────── schizzo tattico ───────────────

…svg…

…

*/ .schizzo{margin:44px 0 0;max-width:820px} .telaio{ background:var(--carta);border:1px solid var(--linea); border-left:3px solid var(--squadra);border-radius:2px;padding:14px; } .telaio svg{display:block;width:100%;height:auto} .schizzo figcaption{ margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--grigio); font-style:italic;max-width:68ch; } .schizzo figcaption b{font-style:normal;font-weight:600;color:#4A4A46} /* pannello divulgativo a scomparsa */ details.spiega{ margin-top:12px;max-width:820px; border:1px solid var(--linea);border-radius:2px;background:var(--bianco); } details.spiega summary{ cursor:pointer;list-style:none;padding:11px 16px; font-family:'Inter',system-ui,sans-serif; font-size:12.5px;font-weight:600;letter-spacing:.05em; color:var(--squadra);display:flex;align-items:center;gap:9px; } details.spiega summary::-webkit-details-marker{display:none} details.spiega summary::before{ content:'+';font-size:16px;line-height:1;width:15px;text-align:center;flex:none; } details.spiega[open] summary::before{content:'–'} details.spiega summary:hover{background:var(--carta)} details.spiega .dentro{ padding:2px 16px 16px 40px;font-size:16px;line-height:1.68;color:#4A4A46; } details.spiega .dentro p+p{margin-top:10px} details.spiega .dentro strong{color:var(--grafite)} /* ─────────────── riquadri ─────────────── */ .riquadro{ margin:56px 0 0;max-width:var(--col);padding:22px 26px; background:var(--carta);border:1px solid var(--linea);border-radius:2px; } .riquadro.largo{max-width:820px} .riquadro h3{ font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);margin-bottom:12px; } .riquadro p{font-size:16px;line-height:1.68;color:#4A4A46} .riquadro p+p{margin-top:11px} .riquadro strong{color:var(--grafite)} /* chiusa metodologica in coda a ogni articolo */ .chiusa{ margin:56px 0 0;max-width:var(--col);padding:20px 24px; border:1px solid var(--linea);border-left:3px solid var(--grigio); border-radius:2px; } .chiusa h3{ font-family:'Inter',system-ui,sans-serif;font-size:11px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);margin-bottom:10px; } .chiusa p{font-size:15px;line-height:1.65;color:var(--grigio)} .chiusa strong{color:#4A4A46} /* ─────────────── tabella ─────────────── */ .tabella{width:100%;border-collapse:collapse;margin-top:16px;font-size:15.5px} .tabella th{ font-family:'Inter',system-ui,sans-serif;font-size:10.5px;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:var(--grigio); text-align:left;padding:0 12px 9px 0;border-bottom:1px solid var(--linea); } .tabella td{ padding:11px 12px 11px 0;border-bottom:1px solid var(--linea); vertical-align:top;color:#4A4A46; } .tabella td:first-child{font-weight:600;color:var(--grafite);white-space:nowrap} .tabella .mai{color:var(--rosso)} /* ─────────────── estratto in evidenza ─────────────── */ .estratto{ margin:40px 0 0;max-width:var(--col); padding-left:22px;border-left:3px solid var(--squadra); font-size:21px;line-height:1.55;color:var(--grafite);font-style:italic; } /* ─────────────── piede ─────────────── */ .piede{border-top:1px solid var(--linea);background:var(--carta);padding:34px 28px 40px} .piede-in{max-width:var(--largo);margin:0 auto} .piede-marchio{ font-family:'Caveat',cursive;font-size:26px;font-weight:700; color:var(--verde);line-height:1;margin-bottom:14px; } .piede-marchio b{color:var(--rosso)} .piede p{font-size:13.5px;line-height:1.68;color:var(--grigio);max-width:82ch} .piede p+p{margin-top:10px} .piede strong{color:#4A4A46} /* ─────────────── adattamento mobile ─────────────── */ @media (max-width:640px){ body{font-size:17px} .barra-in,main,.piede{padding-left:18px;padding-right:18px} .barra-in{flex-direction:column;align-items:flex-start;gap:6px} .barra nav{justify-content:flex-start;margin-left:-11px} .barra nav a{padding:6px 8px;font-size:11px;letter-spacing:.04em} .telaio{padding:8px} .riquadro,.chiusa{padding:18px} details.spiega .dentro{padding-left:16px} .estratto{font-size:19px;padding-left:16px} }