/* =====================================================================
Olivetum — Knowledge base su olio d'oliva e foglie
Stile: "erboristeria moderna"
Solo HTML/CSS, niente JavaScript.
I font Google sono caricati con + preconnect nell' dei
template di build.py (NON via @import qui: bloccherebbe la prima paint).
===================================================================== */
/* ---------- Palette & tokens ---------- */
:root {
--verde-oliva: #556B2F;
--verde-scuro: #3D4F22;
--verde-tenue: #EEF1E2;
--crema: #F5F1E8;
--crema-card: #FBF8F1;
--oro: #B8860B;
--oro-tenue: #F3E7C4;
--testo: #2E2E2E;
--testo-soft: #5A5A55;
--bordo: #D9D2BF;
--ombra: 0 1px 3px rgba(61, 79, 34, .08), 0 4px 16px rgba(61, 79, 34, .06);
--ombra-sollevata: 0 2px 6px rgba(61, 79, 34, .10), 0 12px 32px rgba(61, 79, 34, .13);
--raggio: 12px; /* card e box */
--raggio-piccolo: 8px; /* chip, tabelle, elementi piccoli */
--font-titoli: 'Cormorant Garamond', 'Georgia', serif;
--font-corpo: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
--max-lg: 1180px;
--max-contenuto: 760px;
}
/* ---------- Reset leggero ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-corpo);
font-size: 18px;
line-height: 1.7;
color: var(--testo);
background-color: var(--crema);
background-image:
radial-gradient(circle at 12% 18%, rgba(184, 134, 11, .04) 0, transparent 32%),
radial-gradient(circle at 88% 8%, rgba(85, 107, 47, .05) 0, transparent 30%);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font-titoli);
color: var(--verde-scuro);
line-height: 1.2;
text-wrap: balance;
}
a { color: var(--verde-oliva); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--bordo); margin: 2.4rem 0; }
/* ---------- Icone SVG inline (lineari, monocrome via currentColor) ---------- */
.icona {
display: inline-block;
width: 1em;
height: 1em;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: -.125em;
flex-shrink: 0;
}
.notizia-card__data .icona { margin-right: .3rem; }
.tag .icona { width: .95em; height: .95em; margin-right: .3rem; }
.categoria__icona .icona { width: 1.7em; height: 1.7em; }
.categoria__icona--olio-evo .icona { color: var(--verde-oliva); }
.categoria__icona--composti-bioattivi .icona { color: var(--oro); }
.categoria__icona--foglie-di-olivo .icona { color: #6B8E23; }
.risorsa-card__icona .icona { width: 2.6rem; height: 2.6rem; color: var(--oro); }
.grazie-box__icona .icona { width: 2.8rem; height: 2.8rem; color: var(--verde-oliva); }
.sito-footer__link .icona { color: var(--oro); width: 1.05em; height: 1.05em; margin-right: .4rem; }
.lm-trust .icona { color: var(--verde-oliva); margin-right: .3rem; }
.btn--ghost .icona {
width: .9em; height: .9em;
margin-left: .35rem;
transition: transform .15s ease;
}
.btn--ghost:hover .icona { transform: translateX(3px); }
/* Selezione testo e focus da tastiera (accessibilita' visibile) */
::selection { background: var(--oro-tenue); }
:focus-visible {
outline: 2px solid var(--oro);
outline-offset: 2px;
}
/* =====================================================================
Header / navigazione
===================================================================== */
.sito-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(61, 79, 34, .97);
backdrop-filter: blur(6px);
color: var(--crema);
box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}
.sito-header__int {
max-width: var(--max-lg);
margin: 0 auto;
padding: .55rem 1.25rem;
display: flex;
align-items: center;
gap: 1.25rem;
}
.sito-header__logo {
font-family: var(--font-titoli);
font-weight: 700;
font-size: 1.6rem;
letter-spacing: .04em;
color: var(--crema);
display: flex;
align-items: center;
gap: .5rem;
}
.sito-header__logo::before {
content: "❧";
color: var(--oro);
font-size: 1.3rem;
}
.sito-header__logo:hover { text-decoration: none; }
.sito-header__claim {
font-style: italic;
font-size: .82rem;
color: rgba(245, 241, 232, .65);
letter-spacing: .02em;
}
.sito-header__nav {
margin-left: auto;
display: flex;
align-items: center;
flex-wrap: wrap; /* a 360px i 6 link vanno su due righe */
justify-content: center;
gap: 1.1rem;
}
.sito-header__nav a {
color: var(--crema);
font-size: .95rem;
padding: .35rem .2rem;
border-bottom: 2px solid transparent;
letter-spacing: .02em;
}
.sito-header__nav a:hover { text-decoration: none; border-bottom-color: var(--oro); }
/* Voce di nav della pagina corrente (marcata con aria-current in build.py) */
.sito-header__nav a[aria-current="page"] {
border-bottom-color: var(--oro);
}
/* =====================================================================
Hero
===================================================================== */
.hero {
/* Foto d'oliveto con velo verde leggero: l'immagine deve restare ben
visibile; la leggibilita' del testo e' garantita dall'ombra morbida
su h1 e p (vedi sotto) piu' che dal velo.
L'immagine e' "cover": su mobile si vede la fascia centrale. */
background:
linear-gradient(180deg, rgba(46, 64, 24, .66), rgba(61, 79, 34, .48)),
radial-gradient(circle at 30% 40%, rgba(184, 134, 11, .16), transparent 60%),
url("img/hero-oliveto.jpg") center / cover no-repeat,
var(--verde-scuro);
color: var(--crema);
min-height: clamp(320px, 48vh, 560px);
display: flex;
flex-direction: column;
justify-content: center;
padding: 4.2rem 1.25rem 3.4rem;
text-align: center;
border-bottom: 3px solid var(--oro);
}
.hero h1 {
color: var(--crema);
font-size: clamp(2.2rem, 4vw, 3.2rem);
margin: 0 0 .5rem;
font-weight: 700;
text-shadow: 0 2px 16px rgba(28, 40, 14, .55);
}
.hero p {
margin: 0 auto;
max-width: 640px;
font-size: 1.05rem;
color: rgba(245, 241, 232, .85);
font-style: italic;
text-shadow: 0 1px 10px rgba(28, 40, 14, .55);
}
.hero__sotto {
margin-top: 1rem;
font-size: .8rem;
letter-spacing: .25em;
text-transform: uppercase;
color: var(--oro);
}
/* Azioni (CTA) dell'hero: bottone pieno + bottone outline */
.hero__azioni {
margin-top: 1.7rem;
display: flex;
justify-content: center;
align-items: center;
gap: .8rem;
flex-wrap: wrap;
}
/* =====================================================================
Bottoni (sistema riusabile: hero, ghost, cta)
===================================================================== */
.btn {
display: inline-block;
font-family: var(--font-corpo);
font-weight: 600;
font-size: .95rem;
letter-spacing: .02em;
padding: .68rem 1.5rem;
border-radius: 10px;
border: 1.5px solid transparent;
transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn--oro {
background: var(--oro);
color: #fff;
}
.btn--oro:hover {
background: #8a6508;
text-decoration: none;
}
/* outline chiaro: per fondi scuri (hero) */
.btn--outline {
border-color: rgba(245, 241, 232, .65);
color: var(--crema);
}
.btn--outline:hover {
border-color: var(--crema);
background: rgba(245, 241, 232, .12);
text-decoration: none;
}
/* ghost: per link "vedi tutte" su fondo crema */
.btn--ghost {
display: inline-block;
font-weight: 600;
font-size: .92rem;
color: var(--verde-oliva);
background: var(--crema-card);
border: 1px solid var(--bordo);
border-radius: 10px;
padding: .5rem 1.2rem;
transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn--ghost:hover {
border-color: var(--verde-oliva);
color: var(--verde-scuro);
text-decoration: none;
box-shadow: var(--ombra);
}
/* =====================================================================
Layout homepage
===================================================================== */
.contenitore {
max-width: var(--max-lg);
margin: 0 auto;
padding: 2.5rem 1.25rem 3rem;
}
.sezione { margin-bottom: 3rem; }
.sezione__titolo {
font-size: 1.8rem;
margin: 0 0 1.2rem;
padding-bottom: .5rem;
border-bottom: 2px solid var(--oro);
display: inline-block;
}
.sezione__intro {
color: var(--testo-soft);
margin: 0 0 1.5rem;
max-width: 700px;
}
/* ---------- Griglia voci ---------- */
.griglia {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.4rem;
}
.scheda {
background: var(--crema-card);
border: 1px solid transparent;
border-radius: var(--raggio);
box-shadow: var(--ombra);
padding: 1.4rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
transition: transform .15s ease, box-shadow .15s ease;
position: relative;
overflow: hidden;
}
.scheda::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 3px; height: 100%;
background: var(--verde-oliva);
border-radius: var(--raggio) 0 0 var(--raggio); /* raccordo col bordo card */
}
.scheda[data-cat="olio-evo"]::before { background: var(--verde-oliva); }
.scheda[data-cat="composti-bioattivi"]::before { background: var(--oro); }
.scheda[data-cat="foglie-di-olivo"]::before { background: #6B8E23; }
.scheda:hover {
transform: translateY(-3px);
box-shadow: var(--ombra-sollevata);
}
.scheda__cat {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--verde-oliva);
font-weight: 600;
margin-bottom: .5rem;
}
.scheda__titolo {
font-size: 1.45rem;
margin: 0 0 .55rem;
color: var(--verde-scuro);
}
.scheda__estratto {
color: var(--testo-soft);
font-size: .95rem;
margin: 0 0 1rem;
flex-grow: 1;
}
.scheda__link {
font-weight: 600;
font-size: .92rem;
color: var(--verde-oliva);
}
.scheda__link::after { content: " →"; }
/* variante "in preparazione" (card segnaposto) */
.scheda__link--muto { color: var(--testo-soft); }
/* Card interamente cliccabili senza JavaScript (pattern "stretched
link"): il ::after del link nel titolo si estende a tutta la card,
che e' il positioned ancestor piu' vicino. */
.scheda__titolo a::after,
.notizia-card__titolo a::after,
.cultivar-card__titolo a::after {
content: "";
position: absolute;
inset: 0;
}
/* Titoli card: massimo 3 righe cosi' le card della stessa riga restano
allineate anche con titoli lunghissimi (i SEO title). */
.scheda__titolo,
.notizia-card__titolo,
.cultivar-card__titolo {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
/* badge "in arrivo" */
.badge {
display: inline-block;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .15em;
background: var(--oro-tenue);
color: #6b5300;
border: 1px solid var(--oro);
padding: .15rem .55rem;
border-radius: 20px;
font-weight: 600;
margin-left: .5rem;
vertical-align: middle;
}
/* =====================================================================
Categorie (card grandi homepage)
===================================================================== */
.categorie {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.4rem;
}
.categoria {
background: var(--verde-tenue);
border: 1px solid transparent;
border-radius: var(--raggio);
box-shadow: var(--ombra);
padding: 1.6rem 1.4rem;
text-align: center;
transition: transform .15s ease, box-shadow .15s ease;
/* e' un : neutralizza lo stile globale dei link */
text-decoration: none;
color: inherit;
}
.categoria:hover { transform: translateY(-2px); box-shadow: var(--ombra-sollevata); text-decoration: none; }
.categoria__icona {
font-size: 1.8rem;
display: block;
margin-bottom: .5rem;
}
.categoria__nome {
font-size: 1.35rem;
margin: 0 0 .35rem;
color: var(--verde-scuro);
}
.categoria__desc {
font-size: .9rem;
color: var(--testo-soft);
margin: 0 0 .8rem;
}
.categoria__conta {
font-size: .8rem;
color: var(--verde-oliva);
font-weight: 600;
}
/* =====================================================================
Glossario sostanze
===================================================================== */
.glossario {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: .8rem;
}
.sostanza {
background: var(--crema-card);
border-left: 3px solid var(--oro);
border-radius: var(--raggio-piccolo);
box-shadow: var(--ombra);
padding: .9rem 1rem;
}
.sostanza__nome {
font-family: var(--font-titoli);
font-size: 1.15rem;
font-weight: 600;
color: var(--verde-scuro);
margin: 0;
}
.sostanza__tipo {
font-size: .8rem;
color: var(--testo-soft);
margin: .15rem 0 .4rem;
font-style: italic;
}
.sostanza__desc {
font-size: .88rem;
margin: 0;
color: var(--testo);
}
/* =====================================================================
Singola voce (pagina articolo)
===================================================================== */
.voce {
max-width: var(--max-contenuto);
margin: 0 auto;
padding: 2.5rem 1.25rem 3.5rem;
}
.voce__breadcrumb {
font-size: .82rem;
color: var(--testo-soft);
margin-bottom: 1rem;
}
.voce__breadcrumb a { color: var(--testo-soft); }
.voce__breadcrumb a:hover { color: var(--verde-oliva); }
.voce__breadcrumb span { margin: 0 .35rem; color: var(--bordo); }
.voce__titolo {
font-size: clamp(2rem, 4vw, 2.8rem);
margin: 0 0 .6rem;
font-weight: 700;
}
.voce__meta {
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin: 0 0 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--bordo);
}
.tag {
font-size: .75rem;
background: var(--verde-tenue);
color: var(--verde-scuro);
border: 1px solid var(--bordo);
padding: .2rem .7rem;
border-radius: 20px;
font-weight: 600;
letter-spacing: .03em;
}
.tag--claim {
background: var(--oro-tenue);
border-color: var(--oro);
color: #6b5300;
}
/* ---------- Immagine di apertura della voce (facoltativa) ---------- */
.voce__apertura {
margin: 0 0 2.2rem;
}
.voce__apertura img {
display: block;
width: 100%;
height: auto;
border-radius: var(--raggio);
box-shadow: var(--ombra);
}
.voce__apertura figcaption {
margin-top: .5rem;
font-size: .85rem;
font-style: italic;
color: var(--testo-soft);
text-align: center;
}
/* ---------- Sommario cliccabile ---------- */
.sommario {
background: var(--verde-tenue);
border-left: 4px solid var(--verde-oliva);
border-radius: var(--raggio);
box-shadow: var(--ombra);
padding: 1rem 1.4rem 1.1rem;
margin: 0 0 2.5rem;
}
.sommario__titolo {
font-family: var(--font-corpo);
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--verde-oliva);
margin: 0 0 .6rem;
font-weight: 700;
}
.sommario ol {
margin: 0;
padding-left: 1.4rem;
columns: 2;
column-gap: 2rem;
}
.sommario li { margin: .15rem 0; line-height: 1.5; }
.sommario a { color: var(--testo); font-size: .95rem; }
.sommario a:hover { color: var(--verde-oliva); }
@media (max-width: 560px) {
.sommario ol { columns: 1; }
}
/* ---------- Corpo articolo ---------- */
.voce__corpo {
hyphens: auto; /* richiede lang="it" sull', gia' presente */
}
.voce__corpo h2 {
font-size: 1.9rem;
margin: 2.4rem 0 .8rem;
padding-top: .4rem;
scroll-margin-top: 80px;
}
.voce__corpo h3 {
font-size: 1.4rem;
margin: 1.6rem 0 .6rem;
color: var(--verde-oliva);
}
.voce__corpo h2.voce__parte {
/* separatore "Parte 2 / continuo" tra file fusi */
font-family: var(--font-corpo);
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .25em;
color: var(--oro);
text-align: center;
margin: 2.8rem 0 2rem;
font-weight: 600;
border: 0;
scroll-margin-top: 80px;
}
.voce__corpo h2.voce__parte::before,
.voce__corpo h2.voce__parte::after {
content: "❦";
color: var(--oro);
margin: 0 1rem;
font-size: 1rem;
letter-spacing: 0;
}
.voce__corpo p { margin: 0 0 1.1rem; }
.voce__corpo ul, .voce__corpo ol { margin: 0 0 1.2rem; padding-left: 1.5rem; }
.voce__corpo li { margin: .25rem 0; }
.voce__corpo strong { color: var(--verde-scuro); font-weight: 600; }
.voce__corpo em { color: var(--testo); }
.voce__corpo code {
background: var(--verde-tenue);
padding: .1rem .4rem;
border-radius: 3px;
font-size: .9em;
font-family: 'Consolas', 'Courier New', monospace;
}
/* blockquote → claim/quote */
.voce__corpo blockquote {
margin: 1.4rem 0;
padding: .8rem 1.4rem;
background: var(--oro-tenue);
border-left: 4px solid var(--oro);
border-radius: 0 var(--raggio-piccolo) var(--raggio-piccolo) 0;
font-style: italic;
color: #4a3d00;
}
.voce__corpo blockquote p { margin: 0; }
.voce__corpo blockquote strong { color: #3a3000; }
/* tabelle (il wrapper .tabella-wrap e' generato da build.py: scroll
orizzontale su schermi stretti senza allargare la pagina) */
.tabella-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.voce__corpo table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
font-size: .95rem;
background: var(--crema-card);
box-shadow: var(--ombra);
border-radius: var(--raggio-piccolo);
overflow: hidden;
}
.voce__corpo th {
background: var(--verde-oliva);
color: var(--crema);
text-align: left;
padding: .7rem 1rem;
font-family: var(--font-corpo);
font-weight: 600;
font-size: .85rem;
letter-spacing: .04em;
}
.voce__corpo td {
padding: .65rem 1rem;
border-top: 1px solid var(--bordo);
}
.voce__corpo tr:nth-child(even) td { background: rgba(238, 241, 226, .4); }
/* separatore -------> visibile come decoro */
.voce__corpo hr {
border: 0;
text-align: center;
margin: 2.5rem 0;
}
.voce__corpo hr::after {
content: "❦";
color: var(--oro);
font-size: 1.2rem;
letter-spacing: .5em;
}
/* ---------- Box correlati / bibliografia ---------- */
.correlati, .bibliografia {
margin-top: 3rem;
padding: 1.5rem 1.6rem;
background: var(--crema-card);
border-radius: var(--raggio);
box-shadow: var(--ombra);
}
.correlati__titolo, .bibliografia__titolo {
font-size: 1.2rem;
margin: 0 0 .8rem;
padding-bottom: .4rem;
border-bottom: 1px solid var(--bordo);
color: var(--verde-scuro);
}
.correlati ul { margin: 0; padding-left: 1.2rem; list-style: '› '; }
.correlati li { margin: .3rem 0; }
.bibliografia ol { margin: 0; padding-left: 1.4rem; font-size: .9rem; color: var(--testo-soft); }
.bibliografia li { margin: .45rem 0; line-height: 1.5; }
.bibliografia em { color: var(--testo); }
/* =====================================================================
Footer
===================================================================== */
.sito-footer {
/* Stessa tecnica dell'hero (velo verde + tinta oro sopra la foto
d'oliveto), ma con velo piu' opaco: qui il testo e' piccolo e
fitto, serve piu' contrasto. La tinta oro e' specchiata rispetto
all'hero (70% 30% vs 30% 40%) per variare senza stonare.
Il file footer-oliveto.jpg e' hero-oliveto2.jpg ottimizzata. */
background:
linear-gradient(180deg, rgba(46, 64, 24, .92), rgba(61, 79, 34, .86)),
radial-gradient(circle at 70% 30%, rgba(184, 134, 11, .14), transparent 60%),
url("img/footer-oliveto.jpg") center / cover no-repeat,
var(--verde-scuro);
color: rgba(245, 241, 232, .8);
padding: 3rem 1.25rem 1.6rem;
margin-top: 2rem;
border-top: 3px solid var(--oro); /* chiude la pagina come l'hero la apre */
}
.sito-footer__int {
max-width: var(--max-lg);
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 2.2rem;
align-items: start;
}
.sito-footer__titolo {
font-family: var(--font-corpo);
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--oro);
font-weight: 700;
margin: 0 0 .7rem;
}
.sito-footer__logo {
font-family: var(--font-titoli);
font-size: 1.4rem;
color: var(--oro);
margin-bottom: .5rem;
}
.sito-footer__claim {
margin: 0;
font-size: .9rem;
}
.sito-footer__nota {
margin: .4rem 0 0;
font-size: .82rem;
color: rgba(245, 241, 232, .55);
}
.sito-footer__nav {
display: flex;
flex-direction: column;
gap: .35rem;
}
.sito-footer__nav a {
color: rgba(245, 241, 232, .8);
font-size: .95rem;
}
.sito-footer__nav a:hover { color: var(--crema); }
.sito-footer__disclaimer {
grid-column: 1 / -1;
border-top: 1px solid rgba(245, 241, 232, .15);
padding-top: 1.2rem;
font-size: .82rem;
max-width: 680px;
margin: .4rem 0 0;
color: rgba(245, 241, 232, .55);
font-style: italic;
line-height: 1.5;
}
@media (max-width: 760px) {
.sito-footer__int { grid-template-columns: 1fr; gap: 1.6rem; }
}
/* =====================================================================
Responsive
===================================================================== */
@media (max-width: 760px) {
.sito-header__claim { display: none; }
.sito-header__nav { gap: .7rem; }
.sito-header__nav a { font-size: .88rem; }
body { font-size: 17px; }
}
@media (max-width: 480px) {
.sito-header__int { flex-wrap: wrap; gap: .4rem; }
.sito-header__nav { width: 100%; justify-content: space-around; margin-left: 0; }
.hero { padding: 2.2rem 1rem 1.8rem; }
}
/* =====================================================================
Notizie
===================================================================== */
/* Hero compatto per la pagina notizie.html */
.hero--compatto {
padding: 2.2rem 1.25rem 1.8rem;
}
.hero--compatto h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin-bottom: .3rem; }
.hero--compatto p { font-size: .98rem; }
/* Hero per la pagina cultivar.html (variante compatta, tonalita' olivo) */
.hero--cultivar {
padding: 2.4rem 1.25rem 2rem;
background:
linear-gradient(180deg, rgba(46, 64, 24, .93), rgba(61, 79, 34, .88)),
radial-gradient(circle at 70% 35%, rgba(107, 142, 35, .28), transparent 60%);
}
.hero--cultivar h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: .35rem; }
.hero--cultivar p { font-size: 1rem; }
/* Sezione "Ultime notizie" in home e sezione elenco completo:
link "vedi tutte" reso come pulsante ghost, allineato a destra */
.sezione__tutte {
text-align: right;
margin: 1.4rem 0 0;
}
/* Griglia delle card-notizia (più fitta di quella delle voci) */
.griglia-notizie {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.2rem;
}
/* Card notizia: derivata dalla .scheda, ma con data in evidenza */
.notizia-card {
background: var(--crema-card);
border: 1px solid transparent;
border-radius: var(--raggio);
box-shadow: var(--ombra);
padding: 1.2rem 1.4rem 1.3rem;
display: flex;
flex-direction: column;
transition: transform .15s ease, box-shadow .15s ease;
position: relative;
overflow: hidden;
cursor: pointer;
}
.notizia-card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 3px; height: 100%;
background: var(--oro);
border-radius: var(--raggio) 0 0 var(--raggio);
}
.notizia-card:hover {
transform: translateY(-3px);
box-shadow: var(--ombra-sollevata);
}
.notizia-card__testa {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem;
margin-bottom: .55rem;
}
.notizia-card__data {
font-size: .78rem;
font-weight: 600;
color: var(--oro);
letter-spacing: .02em;
}
.notizia-card__cat {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .15em;
color: var(--testo-soft);
background: var(--verde-tenue);
border: 1px solid var(--bordo);
padding: .15rem .55rem;
border-radius: 20px;
}
.notizia-card__titolo {
font-size: 1.3rem;
margin: 0 0 .5rem;
color: var(--verde-scuro);
line-height: 1.25;
}
.notizia-card__titolo a { color: inherit; }
.notizia-card__titolo a:hover { color: var(--verde-oliva); text-decoration: none; }
.notizia-card__estratto {
color: var(--testo-soft);
font-size: .93rem;
margin: 0;
flex-grow: 1;
}
/* ---------- Pagina singola notizia ---------- */
.notizia {
max-width: var(--max-contenuto);
margin: 0 auto;
padding: 2.5rem 1.25rem 3.5rem;
}
/* tag categoria/data specifici della notizia */
.notizia .tag--categoria {
background: var(--verde-tenue);
color: var(--verde-scuro);
}
.notizia .tag--data {
background: var(--oro-tenue);
border-color: var(--oro);
color: #6b5300;
}
.notizia__torna {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--bordo);
font-size: .92rem;
}
.notizia__torna a { color: var(--verde-oliva); font-weight: 600; }
/* il corpo della notizia riusa .voce__corpo, quindi eredita tutti gli stili */
/* Griglia notizie un po' più larga su schermi piccoli */
@media (max-width: 560px) {
.griglia-notizie { grid-template-columns: 1fr; }
}
/* =====================================================================
Cultivar (pagina cultivar.html: indici regione / A-Z)
===================================================================== */
/* Barra toggle tra le due viste (CSS-only con :target) */
.cultivar-tabs {
display: flex;
justify-content: center;
gap: .4rem;
margin: 1.4rem 0 .8rem;
}
.cultivar-tabs__tab {
padding: .5rem 1.3rem;
border: 1px solid var(--bordo);
border-radius: 20px;
font-size: .9rem;
font-weight: 600;
color: var(--testo-soft);
background: var(--crema-card);
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cultivar-tabs__tab:hover {
color: var(--verde-oliva);
border-color: var(--verde-oliva);
}
/* Tab attivo: la regione e' attiva di default (nessun target o #vista-regione),
la A-Z e' attiva quando e' il target corrente.
Il target puo' essere #vista-az (click sul tab "A-Z") oppure un #az-X
interno ad esso (click sulla barra A-Z o sul breadcrumb della lettera).
Servono DUE condizioni in OR perche' :has(.x :target) matcha solo i
discendenti di .x, non .x stesso; :has(#vista-az:target) copre invece
solo il caso diretto. La virgola CSS fa da OR. */
.cultivar-tabs__tab--regione {
background: var(--verde-oliva);
color: var(--crema);
border-color: var(--verde-oliva);
}
body:has(#vista-az:target) .cultivar-tabs__tab--regione,
body:has(.cultivar-vista--az :target) .cultivar-tabs__tab--regione {
background: var(--crema-card); color: var(--testo-soft); border-color: var(--bordo);
}
.cultivar-tabs__tab--az {
background: var(--crema-card); color: var(--testo-soft); border-color: var(--bordo);
}
body:has(#vista-az:target) .cultivar-tabs__tab--az,
body:has(.cultivar-vista--az :target) .cultivar-tabs__tab--az {
background: var(--verde-oliva); color: var(--crema); border-color: var(--verde-oliva);
}
/* Visibilita' delle due viste tramite :target.
Di default: vista regione visibile, A-Z nascosta.
Quando e' target #vista-az (tab) o un #az-X interno (barra/breadcrumb):
si inverte. Stesso OR a due condizioni di sopra. */
.cultivar-vista--az { display: none; }
body:has(#vista-az:target) .cultivar-vista--az,
body:has(.cultivar-vista--az :target) .cultivar-vista--az { display: block; }
body:has(#vista-az:target) #vista-regione,
body:has(.cultivar-vista--az :target) #vista-regione { display: none; }
.cultivar-vista__titolo {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
white-space: nowrap;
}
/* quando la vista e' attiva il suo titolo diventa visibile (per screen reader
e' sempre presente; visivamente lo nascondiamo perche' c'e' gia il tab) */
/* --- Vista regione --- */
.cultivar-regione {
background: var(--crema-card);
border: 1px solid transparent;
border-radius: var(--raggio);
box-shadow: var(--ombra);
padding: 1.1rem 1.3rem 1.2rem;
margin-bottom: 1rem;
}
.cultivar-regione__testa {
display: flex;
align-items: baseline;
gap: .7rem;
margin-bottom: .6rem;
border-bottom: 1px solid var(--bordo);
padding-bottom: .4rem;
}
.cultivar-regione__nome {
margin: 0;
font-size: 1.2rem;
color: var(--verde-scuro);
}
.cultivar-regione__conta {
font-size: .78rem;
color: var(--testo-soft);
background: var(--verde-tenue);
border: 1px solid var(--bordo);
padding: .1rem .55rem;
border-radius: 20px;
white-space: nowrap;
}
.cultivar-regione--vuota {
background: transparent;
border-style: dashed;
}
.cultivar-regione--vuota .cultivar-regione__nome { color: var(--testo-soft); font-style: italic; font-size: 1.02rem; }
.cultivar-regione__conta--zero { background: transparent; border: none; color: var(--testo-soft); font-style: italic; }
/* --- Lista cultivar (elenco inline di nomi) --- */
.cultivar-lista {
display: flex;
flex-wrap: wrap;
gap: .35rem .55rem;
}
.cultivar-nome {
display: inline-block;
font-size: .9rem;
color: var(--testo-soft);
font-style: italic;
padding: .12rem .5rem;
border-radius: var(--raggio-piccolo);
}
.cultivar-nome--link {
color: var(--verde-oliva);
font-style: normal;
font-weight: 600;
text-decoration: none;
background: var(--verde-tenue);
border: 1px solid transparent;
transition: background .15s ease, border-color .15s ease;
}
.cultivar-nome--link:hover {
background: #e3ead0;
border-color: var(--verde-oliva);
}
/* --- Vista A-Z --- */
.cultivar-az {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .25rem;
margin: .6rem 0 1.4rem;
padding: .7rem .5rem;
background: var(--crema-card);
border: 1px solid transparent;
border-radius: var(--raggio);
box-shadow: var(--ombra);
}
.cultivar-lettera {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
font-family: var(--font-titoli);
font-size: 1.1rem;
font-weight: 600;
color: var(--verde-scuro);
background: var(--verde-tenue);
border: 1px solid var(--bordo);
border-radius: var(--raggio-piccolo);
transition: background .15s ease, color .15s ease;
}
.cultivar-lettera:hover { background: var(--verde-oliva); color: var(--crema); }
.cultivar-lettera--vuota {
color: var(--bordo);
background: transparent;
cursor: default;
}
.cultivar-lettera--vuota:hover { background: transparent; color: var(--bordo); }
.cultivar-gruppo-az {
margin-bottom: 1.4rem;
scroll-margin-top: 6rem; /* tiene la lettera sotto l'header fisso al salto */
}
.cultivar-gruppo-az__lettera {
display: inline-block;
font-size: 1.6rem;
color: var(--oro);
margin: 0 .6rem 0 0;
border-bottom: 2px solid var(--oro-tenue);
padding-bottom: .15rem;
}
.cultivar-gruppo-az__conta {
display: inline-block;
font-size: .8rem;
color: var(--testo-soft);
margin: 0 0 .5rem;
}
@media (max-width: 560px) {
.cultivar-tabs { flex-wrap: wrap; }
.cultivar-regione__testa { flex-wrap: wrap; }
}
/* ---------- Pagina singola cultivar (riusa .voce__corpo/.sommario/.tag) ---------- */
.cultivar {
max-width: var(--max-contenuto);
margin: 0 auto;
padding: 2.5rem 1.25rem 3.5rem;
}
/* tag regione: accento oro per distinguersi dal tag categoria generico */
.cultivar .tag--regione {
background: var(--verde-tenue);
border-color: var(--verde-oliva);
color: var(--verde-scuro);
}
.cultivar .tag--regione-alt {
background: transparent;
color: var(--testo-soft);
font-weight: 500;
font-style: italic;
border-style: dashed;
}
.cultivar__meta { margin-bottom: 1.6rem; }
.cultivar__torna {
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--bordo);
font-size: .92rem;
}
.cultivar__torna a { color: var(--verde-oliva); font-weight: 600; }
/* ---------- Sezione Cultivar in homepage ---------- */
.griglia-cultivar {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.2rem;
}
/* Card cultivar: derivata dalla notizia-card, con accento foglia (verde oliva)
invece di oro, per distinguerla tematicamente. */
.cultivar-card {
background: var(--crema-card);
border: 1px solid transparent;
border-radius: var(--raggio);
box-shadow: var(--ombra);
padding: 1.2rem 1.4rem 1.3rem;
display: flex;
flex-direction: column;
transition: transform .15s ease, box-shadow .15s ease;
position: relative;
overflow: hidden;
cursor: pointer;
}
.cultivar-card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 3px; height: 100%;
background: var(--verde-oliva);
border-radius: var(--raggio) 0 0 var(--raggio);
}
.cultivar-card:hover {
transform: translateY(-3px);
box-shadow: var(--ombra-sollevata);
}
.cultivar-card__regione {
font-size: .7rem;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--verde-scuro);
background: var(--verde-tenue);
border: 1px solid var(--bordo);
padding: .15rem .55rem;
border-radius: 20px;
align-self: flex-start;
margin-bottom: .55rem;
}
.cultivar-card__titolo {
font-size: 1.3rem;
margin: 0 0 .5rem;
color: var(--verde-scuro);
line-height: 1.25;
}
.cultivar-card__titolo a { color: inherit; }
.cultivar-card__titolo a:hover { color: var(--verde-oliva); text-decoration: none; }
.cultivar-card__estratto {
color: var(--testo-soft);
font-size: .93rem;
margin: 0;
flex-grow: 1;
}
/* Banner "Sezione in costruzione" (quando nessuna cultivar e' ancora descritta) */
.cultivar-banner {
text-align: center;
margin: 1.4rem 0 .4rem;
padding: 1.4rem 1rem;
background: var(--verde-tenue);
border: 1px dashed var(--verde-oliva);
border-radius: var(--raggio);
}
.cultivar-banner a {
font-weight: 600;
color: var(--verde-scuro);
}
@media (max-width: 560px) {
.griglia-cultivar { grid-template-columns: 1fr; }
}
/* =====================================================================
Lead magnet — pagina di download (guida gratuita)
===================================================================== */
.lm-hero {
background:
linear-gradient(180deg, rgba(61, 79, 34, .92), rgba(61, 79, 34, .86)),
radial-gradient(circle at 30% 40%, rgba(184, 134, 11, .25), transparent 60%);
color: var(--crema);
padding: 3rem 1.25rem 2.4rem;
text-align: center;
border-bottom: 3px solid var(--oro);
}
.lm-hero__kicker {
display: inline-block;
font-size: .72rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--oro);
border: 1px solid var(--oro);
border-radius: 20px;
padding: .2rem .7rem;
margin-bottom: .9rem;
}
.lm-hero__titolo {
color: var(--crema);
font-size: clamp(1.9rem, 3.6vw, 2.8rem);
margin: 0 0 .6rem;
font-weight: 700;
}
.lm-hero__sotto {
margin: 0 auto;
max-width: 640px;
font-size: 1.05rem;
color: rgba(245, 241, 232, .88);
font-style: italic;
}
/* Layout 2 colonne: argomenti | form */
.lm-grid {
max-width: var(--max-lg);
margin: 0 auto;
padding: 2.6rem 1.25rem 3rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.4rem;
align-items: start;
}
@media (max-width: 820px) {
.lm-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}
/* Colonna sinistra: cosa impari */
.lm-intro {
color: var(--testo-soft);
}
.lm-bullet {
list-style: none;
margin: 1.4rem 0 0;
padding: 0;
}
.lm-bullet li {
position: relative;
padding-left: 1.9rem;
margin-bottom: .8rem;
color: var(--testo);
}
.lm-bullet li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--verde-oliva);
font-weight: 700;
background: var(--verde-tenue);
width: 1.3rem;
height: 1.3rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: .8rem;
}
.lm-grid h2 {
font-size: 1.6rem;
margin: 0 0 .5rem;
}
/* Copertina della guida (in cima alla colonna sinistra).
Immagine in formato libro (verticale): la limito con max-width e la
lascio scalare in altezza — cosi' non viene MAI ritagliata, nemmeno
su telefonini 9:16 dove sta intera occupando poco piu' di meta'
schermo. Su desktop un lieve effetto 3D da "libro appoggiato"
(si appiattisce al passaggio del mouse); su mobile resta piatta. */
.lm-copertina {
margin: 0 0 1.9rem;
text-align: center;
}
.lm-copertina img {
display: inline-block;
width: min(300px, 82vw);
height: auto; /* rapporto naturale: nessun ritaglio */
border-radius: 6px 14px 14px 6px; /* bordo destro piu' ampio: richiama il dorso */
box-shadow:
0 14px 34px rgba(28, 40, 14, .32),
0 3px 8px rgba(28, 40, 14, .22);
transform: perspective(900px) rotateY(-8deg);
transform-origin: left center;
transition: transform .35s ease;
}
.lm-copertina img:hover { transform: perspective(900px) rotateY(0deg); }
@media (max-width: 820px) {
.lm-copertina img { transform: none; }
}
/* Colonna destra: wrapper del form MailerLite */
.lm-form-wrap {
background: var(--crema-card);
border: 1px solid transparent;
border-top: 4px solid var(--oro);
border-radius: var(--raggio);
padding: 1.8rem 1.7rem;
box-shadow: var(--ombra);
}
.lm-form-wrap__titolo {
font-size: 1.4rem;
margin: 0 0 .3rem;
color: var(--verde-scuro);
}
.lm-form-wrap__intro {
font-size: .92rem;
color: var(--testo-soft);
margin: 0 0 1.2rem;
}
/* Placeholder mostrato finché non si incolla lo snippet reale */
.lm-form-placeholder {
border: 2px dashed var(--bordo);
border-radius: var(--raggio);
padding: 1.4rem 1rem;
text-align: center;
color: var(--testo-soft);
font-size: .9rem;
background: repeating-linear-gradient(
45deg, transparent, transparent 10px, rgba(184,134,11,.04) 10px, rgba(184,134,11,.04) 20px);
}
.lm-trust {
margin-top: 1.1rem;
font-size: .82rem;
color: var(--testo-soft);
text-align: center;
line-height: 1.5;
}
.lm-trust span { display: inline-block; margin: 0 .4rem; }
/* Sezione "Cosa contiene" in fondo */
.lm-indice {
max-width: var(--max-lg);
margin: 0 auto;
padding: 0 1.25rem 3rem;
}
.lm-indice__lista {
columns: 2;
column-gap: 2.4rem;
margin-top: 1.2rem;
padding-left: 1.2rem;
}
.lm-indice__lista li {
margin-bottom: .45rem;
break-inside: avoid;
}
@media (max-width: 640px) {
.lm-indice__lista { columns: 1; }
}
/* Box CTA riutilizzabile (lead magnet + futuro: promozione Olivea) */
.cta-box {
background:
linear-gradient(180deg, rgba(85, 107, 47, .06), rgba(184, 134, 11, .05));
border: 1px solid var(--oro);
border-radius: var(--raggio);
padding: 1.6rem 1.7rem;
margin: 2rem auto;
max-width: var(--max-contenuto);
text-align: center;
}
.cta-box__titolo {
font-size: 1.35rem;
margin: 0 0 .4rem;
color: var(--verde-scuro);
}
.cta-box__testo {
color: var(--testo-soft);
margin: 0 auto 1rem;
max-width: 560px;
}
.cta-box__btn {
display: inline-block;
background: var(--verde-oliva);
color: var(--crema) !important;
font-weight: 600;
padding: .7rem 1.6rem;
border-radius: 10px;
letter-spacing: .02em;
transition: background .15s ease;
}
.cta-box__btn:hover {
background: var(--verde-scuro);
text-decoration: none;
}
/* Riquadro "Risorsa gratuita" in homepage */
.risorsa-card {
background:
linear-gradient(180deg, rgba(184, 134, 11, .10), rgba(85, 107, 47, .06));
border: 1px solid var(--oro);
border-radius: var(--raggio);
box-shadow: var(--ombra);
padding: 1.8rem 2rem;
display: flex;
align-items: center;
gap: 1.6rem;
flex-wrap: wrap;
}
.risorsa-card__icona {
font-size: 2.6rem;
line-height: 1;
}
.risorsa-card__testo { flex: 1 1 320px; }
.risorsa-card__titolo {
font-size: 1.4rem;
margin: 0 0 .3rem;
color: var(--verde-scuro);
}
.risorsa-card__desc {
margin: 0;
color: var(--testo-soft);
font-size: .95rem;
}
.risorsa-card__btn {
display: inline-block;
background: var(--oro);
color: #fff !important;
font-weight: 600;
padding: .65rem 1.4rem;
border-radius: 10px;
white-space: nowrap;
transition: background .15s ease;
}
.risorsa-card__btn:hover { background: #8a6508; text-decoration: none; }
@media (max-width: 560px) {
.risorsa-card { flex-direction: column; text-align: center; }
}
/* Link nel footer (guida gratuita) */
.sito-footer__link {
margin: 0;
font-size: .9rem;
line-height: 1.45;
}
.sito-footer__link a {
color: var(--oro);
font-weight: 600;
}
/* Thank-you page */
.grazie-box {
max-width: var(--max-contenuto);
margin: 2rem auto;
background: var(--crema-card);
border: 1px solid transparent;
border-top: 4px solid var(--verde-oliva);
border-radius: var(--raggio);
padding: 2.2rem 1.8rem;
text-align: center;
box-shadow: var(--ombra);
}
.grazie-box__icona { font-size: 2.8rem; line-height: 1; }
.grazie-box h1 {
font-size: 1.9rem;
margin: .6rem 0 .5rem;
}
.grazie-box__testo {
color: var(--testo-soft);
max-width: 520px;
margin: 0 auto;
}
.grazie-box__nota {
color: var(--testo-soft);
font-size: .9rem;
margin-top: 1rem;
}
.grazie-box__torna {
display: inline-block;
margin-top: 1.2rem;
color: var(--verde-oliva);
font-weight: 600;
}
/* =====================================================================
Accessibilita' del movimento: chi chiede meno animazioni al sistema
(prefers-reduced-motion) non le riceve.
===================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
transition: none !important;
animation: none !important;
}
.scheda:hover, .notizia-card:hover, .cultivar-card:hover,
.categoria:hover {
transform: none;
}
}