/* ============================================================================= CENTRO STUDI — Override palette militare + classi del sito ----------------------------------------------------------------------------- Questo file si carica DOPO tokens.css e components.css di str4tum-ds (CDN). Strategia: NON tocchiamo il design system, ridefiniamo solo le CSS variables dei token. Tutti i componenti str4tum usano var(--...), quindi si ricolorano automaticamente. Due temi: light "manuale di campo" (default) e dark "console operativa". Il toggle è gestito da str4tum.js (data-theme su ). ============================================================================= */ /* ----------------------------------------------------------------------------- TEMA LIGHT — "manuale di campo" (sand/khaki). È il default (:root). -------------------------------------------------------------------------- */ :root { --bg-base: #ece6d6; /* sand chiaro — sfondo pagina */ --bg-panel: #e3ddc9; /* card / panel */ --bg-panel-elevated: #d8d0b6; /* hover / nested */ --bg-elevated: var(--bg-panel-elevated); --bg-input: #f1ecde; --bg-code: #e3ddc9; --hairline: #cabf9e; --hairline-strong: #2c2e22; --text-primary: #26271d; /* inchiostro verde-oliva scuro */ --text-secondary: #494b3a; --text-muted: #585a43; /* >= 4.5:1 su sand per testo piccolo (WCAG AA) */ --text-dim: #97987d; --accent-link: #6a5a1e; /* amber scuro — link/attivo */ --accent-positive: #466024; /* olive drab / OK */ --accent-negative: #8a3520; /* rust / errore */ --accent-warn: #876213; /* ocra / attenzione */ --link-dim: rgba(106, 90, 30, 0.1); --positive-dim: rgba(70, 96, 36, 0.12); --negative-dim: rgba(138, 53, 32, 0.1); --warn-dim: rgba(135, 98, 19, 0.12); } /* ----------------------------------------------------------------------------- TEMA DARK — "console operativa" (olive-black/gunmetal/amber). Applicato quando (toggle utente). NB: includiamo anche `body` perché str4tum imposta i token dark sia su :root che su `body` (':root[data-theme="dark"] body'). body è un antenato più vicino del contenuto rispetto a html: senza la variante `body` qui, i discendenti erediterebbero i token dark di str4tum (slate) invece di questi militari. -------------------------------------------------------------------------- */ :root[data-theme="dark"], :root[data-theme="dark"] body { --bg-base: #14160f; /* olive-black — sfondo pagina */ --bg-panel: #1c1f16; --bg-panel-elevated: #262a1d; --bg-elevated: var(--bg-panel-elevated); --bg-input: #1c1f16; --bg-code: #1c1f16; --hairline: #353a28; --hairline-strong: #dfe3d2; --text-primary: #dfe3d2; /* khaki chiaro */ --text-secondary: #aeb39a; --text-muted: #8a8f72; /* >= 4.5:1 su olive-black per testo piccolo (WCAG AA) */ --text-dim: #565a47; --accent-link: #d6a235; /* amber */ --accent-positive: #8aa85a; --accent-negative: #c2593b; --accent-warn: #cf9b3a; --link-dim: rgba(214, 162, 53, 0.12); --positive-dim: rgba(138, 168, 90, 0.14); --negative-dim: rgba(194, 89, 59, 0.14); --warn-dim: rgba(207, 155, 58, 0.14); } /* ----------------------------------------------------------------------------- COLORI DI REPARTO — uno per area, sobri e desaturati. Esposti come custom property --area, letta dalle classi del sito (badge, accent bar, icona). Variano per tema: più scuri su sand (light), più luminosi su olive-black (dark) per garantire contrasto. -------------------------------------------------------------------------- */ [data-area="normativa"] { --area: #46586a; } /* steel blue */ [data-area="operativo"] { --area: #5c6830; } /* olive */ [data-area="investigazione"] { --area: #454b43; } /* slate */ [data-area="cyber"] { --area: #305955; } /* teal-gunmetal */ [data-area="sicurezza"] { --area: #3f5a2c; } /* field green */ [data-area="geopolitica"] { --area: #79592c; } /* bronze */ [data-area="armi"] { --area: #42464c; } /* gunmetal */ [data-area="primo-soccorso"] { --area: #853a26; } /* rust */ [data-area="formazione"] { --area: #7a6326; } /* khaki */ [data-area="archivio"] { --area: #5a5343; } /* taupe */ :root[data-theme="dark"] [data-area="normativa"] { --area: #7b8ea0; } :root[data-theme="dark"] [data-area="operativo"] { --area: #93a25a; } :root[data-theme="dark"] [data-area="investigazione"] { --area: #8a917f; } :root[data-theme="dark"] [data-area="cyber"] { --area: #5aa39a; } :root[data-theme="dark"] [data-area="sicurezza"] { --area: #79a05c; } :root[data-theme="dark"] [data-area="geopolitica"] { --area: #b08e54; } :root[data-theme="dark"] [data-area="armi"] { --area: #8b93a0; } :root[data-theme="dark"] [data-area="primo-soccorso"] { --area: #c8654a; } :root[data-theme="dark"] [data-area="formazione"] { --area: #b89a5e; } :root[data-theme="dark"] [data-area="archivio"] { --area: #9a917e; } /* ============================================================================= CLASSI DEL SITO — costruite con i token str4tum (mai hex hardcoded fuori dalla palette sopra). Mobile-first. UNIFORMITÀ DI LARGHEZZA ----------------------- str4tum espone `--container-max` = 1400px (troppo largo per una KB testuale: le righe di prosa diventerebbero illeggibili). Definiamo qui due misure coerenti e le usiamo ovunque, così la colonna principale e il suo bordo sinistro NON "saltano" navigando tra home, area e post: --content-max → larghezza del contenitore di pagina (header/footer/main) --measure → larghezza massima di un blocco di SOLO testo (misura di lettura ~72ch), allineato a sinistra dentro al contenitore. Le griglie (aree) possono usare tutta la `--content-max`; i blocchi di testo (hero, prosa, lista post) sono limitati a `--measure` ma con lo STESSO bordo sinistro del resto, quindi l'allineamento resta uniforme su tutte le pagine. --------------------------------------------------------------------------- */ :root { --content-max: 1080px; --measure: 72ch; /* Padding orizzontale del contenitore, mobile-first (sale sui breakpoint). */ --page-pad-x: var(--space-4); } @media (min-width: 640px) { :root { --page-pad-x: var(--space-6); } } /* Override del contenitore di str4tum (.page) per usare la misura unificata. Stesso padding-x su header/footer/main → bordo sinistro coerente ovunque. */ .page { max-width: var(--content-max); padding: var(--space-6) var(--page-pad-x) var(--space-12); } /* Niente overflow orizzontale: nessun figlio può sforare la viewport. NB: solo su . Mettere overflow-x:hidden su renderebbe body un contenitore di scroll e romperebbe il `position: sticky` dell'header. */ html { overflow-x: hidden; } /* --- Accessibilità: testo solo per screen reader --- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Header del sito (logo + ricerca + tema) --- Mobile-first: due righe — (1) logo + toggle tema, (2) ricerca a tutta larghezza. Da 640px in su le due righe collassano in una sola, con la ricerca affiancata al gruppo logo+toggle. */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--bg-base); border-bottom: var(--hairline-w) solid var(--hairline-strong); } .site-header-inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-3) var(--page-pad-x); display: flex; flex-direction: column; gap: var(--space-3); } /* Riga superiore mobile: logo a sinistra, toggle tema a destra */ .site-header-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .brand { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-primary); } .brand:hover { opacity: 1; } /* Mostrina quadrata accanto al logo testuale */ .brand-mark { width: 14px; height: 14px; border: var(--hairline-w) solid var(--accent-link); background: var(--link-dim); flex-shrink: 0; } /* Toggle tema: target tap >= 44px (WCAG 2.5.5 / AAA target size) */ .btn-theme { min-width: 44px; min-height: 44px; justify-content: center; flex-shrink: 0; font-size: var(--fs-md); } /* Da tablet in su: header su una riga sola (logo+toggle a sx, ricerca a dx) */ @media (min-width: 640px) { .site-header-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); } /* La barra logo+toggle non deve crescere: occupa solo lo spazio necessario. L'ordine visivo resta logo · ricerca · toggle non è richiesto; teniamo logo+toggle insieme a sinistra e la ricerca a destra. */ .site-header-bar { flex: 0 0 auto; gap: var(--space-4); } /* Su desktop il toggle non ha bisogno del target 44px pieno (mouse): lo riportiamo a un'altezza più compatta ma comunque comoda. */ .btn-theme { min-height: 40px; } } /* Focus visibile coerente col DS su tutti i controlli/link custom del sito (str4tum lo definisce solo sui propri componenti). WCAG 2.4.7. */ .area-card:focus-visible, a.post-item-title:focus-visible, a.brand:focus-visible, .breadcrumb a:focus-visible, button.post-tag:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } /* --- Footer --- */ .site-footer { border-top: var(--hairline-w) solid var(--hairline); margin-top: var(--space-16); } .site-footer-inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--page-pad-x); font-size: var(--fs-sm); color: var(--text-muted); display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } /* --- Pagine di lettura (post) --- NB: il contenitore .page resta alla STESSA larghezza/padding delle altre pagine (stesso bordo sinistro → nessun "salto" navigando). A essere limitati alla misura di lettura `--measure` sono solo i blocchi di SOLO testo, allineati a sinistra. Così la colonna di testo è confortevole senza spostare l'allineamento generale della vista. */ .page.reading > .breadcrumb, .page.reading > article > header, .page.reading > article > .kb-prose, .page.reading > div { max-width: var(--measure); } /* --- Breadcrumb --- */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-5); } .breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--text-primary); } .breadcrumb-sep { color: var(--text-dim); } .breadcrumb [aria-current="page"] { color: var(--text-secondary); } /* --- Hero homepage --- Mobile-first: padding verticale più contenuto sui telefoni, più ariosa da tablet in su. Il titolo scala leggermente per non sforare a 360px. */ .hero { padding: var(--space-8) 0 var(--space-6); border-bottom: var(--hairline-w) solid var(--hairline); margin-bottom: var(--space-8); } @media (min-width: 768px) { .hero { padding: var(--space-10) 0 var(--space-8); } } .hero-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--text-primary); /* Spezza parole lunghe invece di sforare la viewport su mobile */ overflow-wrap: break-word; } @media (min-width: 768px) { .hero-title { font-size: var(--fs-2xl); } } .hero-subtitle { margin-top: var(--space-3); max-width: var(--measure); font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--text-muted); } /* --- Titolo di sezione (UPPERCASE, label) --- */ .section-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-4); } /* --- Griglia aree (mobile-first) --- 1 col (telefoni stretti, card leggibili) → 2 (≥480) → 3 (≥640) → 4 (≥768) → 5 (≥1024). */ .area-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-bottom: var(--space-12); } @media (min-width: 480px) { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 640px) { .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 768px) { .area-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } } @media (min-width: 1024px) { .area-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* Card area — riusa l'estetica nav-section + accent bar del colore di reparto. min-height per dare respiro coerente alle card (icona + label 2 righe + conteggio) e altezze uniformi nella griglia. */ .area-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-height: 110px; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); background: var(--bg-panel); border: 1px solid var(--border-default); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } .area-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--area, var(--accent-link)); } .area-card:hover { border-color: var(--area, var(--border-strong)); background: var(--bg-panel-elevated); } .area-card-icon { color: var(--area, var(--text-secondary)); } .area-card-label { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--text-primary); line-height: var(--lh-tight); } .area-card-count { margin-top: auto; font-size: var(--fs-sm); color: var(--text-muted); } /* --- Badge area (etichetta colorata col colore di reparto) --- */ .area-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--area, var(--accent-link)); } .area-badge::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--area, var(--accent-link)); } /* --- Lista post (homepage "ultimi aggiornamenti" + pagina area) --- */ .post-list { display: flex; flex-direction: column; } .post-item { display: block; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); } .post-item:first-child { padding-top: 0; } .post-item-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-primary); line-height: var(--lh-tight); } a.post-item-title:hover { color: var(--accent-link); } .post-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); } .post-item-excerpt { margin-top: var(--space-2); font-size: var(--fs-base); line-height: var(--lh-snug); color: var(--text-secondary); max-width: var(--measure); } /* --- Tag cliccabili (filtro client-side pagina area) --- */ .tag-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); } .tag-chip { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-secondary); background: var(--bg-panel); border: 1px solid var(--border-default); border-radius: var(--r-sm); padding: var(--space-1) var(--space-3); min-height: 32px; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } .tag-chip:hover { border-color: var(--border-strong); } .tag-chip:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .tag-chip[data-active="true"] { color: var(--accent-link); border-color: var(--accent-link); background: var(--link-dim); } /* Tag inline non interattivi nelle meta del post */ .post-tags { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); } .post-tag { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); } .post-tag::before { content: "#"; opacity: 0.6; } /* Variante interattiva: tag-button cliccabile (filtro nella pagina area) */ button.post-tag { background: none; border: none; padding: 0; font-family: var(--font-mono); cursor: pointer; } button.post-tag:hover { color: var(--accent-link); } /* Stato "nessun risultato" del filtro */ .empty-state { padding: var(--space-8) 0; color: var(--text-muted); font-size: var(--fs-base); } /* ============================================================================= KB-PROSE — stile del corpo markdown dei post. str4tum non ha un componente "prose" per testo lungo: lo definiamo qui usando i token, in coerenza col font mono e le hairline del DS. ============================================================================= */ .kb-prose { font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--text-secondary); /* Spezza URL/parole lunghe invece di sforare la viewport su mobile */ overflow-wrap: break-word; } .kb-prose > * + * { margin-top: var(--space-4); } .kb-prose h2 { margin-top: var(--space-8); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-primary); letter-spacing: var(--tracking-tight); } .kb-prose h3 { margin-top: var(--space-6); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-primary); text-transform: uppercase; letter-spacing: var(--tracking-wider); } .kb-prose p { color: var(--text-secondary); } .kb-prose a { color: var(--accent-link); text-decoration: underline; text-underline-offset: 3px; } .kb-prose ul, .kb-prose ol { padding-left: var(--space-5); } .kb-prose li { margin-top: var(--space-2); } .kb-prose li::marker { color: var(--accent-link); } .kb-prose blockquote { padding: var(--space-3) var(--space-5); border-left: 3px solid var(--accent-warn); background: var(--warn-dim); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--text-muted); font-size: var(--fs-base); } .kb-prose code { font-family: var(--font-mono); font-size: 0.9em; padding: 1px var(--space-1); background: var(--bg-code); border: var(--hairline-w) solid var(--hairline); border-radius: var(--r-sm); } .kb-prose pre { padding: var(--space-4); background: var(--bg-code); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow-x: auto; } .kb-prose pre code { padding: 0; background: none; border: none; } .kb-prose hr { border: none; border-top: 1px solid var(--hairline); } /* ============================================================================= RICERCA PAGEFIND — tema militare. PagefindUI legge le proprie CSS variables (--pagefind-ui-*): le mappiamo ai token str4tum così la barra eredita la palette del tema attivo (light/dark). I risultati compaiono come dropdown sotto l'input (position: absolute). ============================================================================= */ :root { --pagefind-ui-scale: 0.8; --pagefind-ui-primary: var(--accent-link); --pagefind-ui-text: var(--text-primary); --pagefind-ui-background: var(--bg-panel); --pagefind-ui-border: var(--hairline); --pagefind-ui-tag: var(--bg-panel-elevated); --pagefind-ui-border-width: 1px; --pagefind-ui-border-radius: var(--r-md); --pagefind-ui-font: var(--font-mono); } /* Contenitore relativo: ancora per il dropdown dei risultati. Mobile-first: a tutta larghezza (riga propria sotto il logo). Da 640px in su diventa una barra compatta allineata a destra nell'header. */ .site-search-wrap { position: relative; width: 100%; } @media (min-width: 640px) { .site-search-wrap { width: min(320px, 42vw); } } @media (min-width: 1024px) { .site-search-wrap { width: 360px; } } /* Input di ricerca compatto, coerente con .input */ .site-search-wrap .pagefind-ui__search-input { background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--r-sm); font-family: var(--font-mono); } .site-search-wrap .pagefind-ui__search-input:focus { outline: none; border-color: var(--border-focus); } .site-search-wrap .pagefind-ui__search-clear { background: transparent; } /* Risultati come dropdown sovrapposto, non in-flow */ .site-search-wrap .pagefind-ui__drawer:not(.pagefind-ui__hidden) { position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0; z-index: var(--z-overlay); max-height: min(70vh, 520px); overflow-y: auto; padding: var(--space-3) var(--space-4); background: var(--bg-panel); border: 1px solid var(--border-default); border-radius: var(--r-md); } .site-search-wrap .pagefind-ui__result { border-top: 1px solid var(--border-subtle); } .site-search-wrap .pagefind-ui__result-title a { color: var(--text-primary); } .site-search-wrap .pagefind-ui__result-title a:hover { color: var(--accent-link); } .site-search-wrap .pagefind-ui__result-excerpt { color: var(--text-muted); } .site-search-wrap mark { background: var(--link-dim); color: var(--accent-link); } /* Tap target dell'input ricerca su mobile: comodo da toccare (>= 44px). --pagefind-ui-scale è 0.8: compensiamo l'altezza minima dell'input. */ .site-search-wrap .pagefind-ui__search-input { min-height: 44px; } @media (min-width: 640px) { .site-search-wrap .pagefind-ui__search-input { min-height: 40px; } } /* ============================================================================= COMMENTI — sezione sotto ogni articolo (token str4tum). Larghezza di lettura. ============================================================================= */ .comments { max-width: var(--measure); margin-top: var(--space-12); padding-top: var(--space-6); border-top: var(--hairline-w) solid var(--hairline-strong); } .comments-title { margin-bottom: var(--space-4); } .comments-status { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-4); } .comment-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-direction: column; gap: var(--space-4); } .comment { padding: var(--space-3) var(--space-4); background: var(--bg-panel); border: 1px solid var(--border-default); border-radius: var(--r-md); } .comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); } .comment-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-primary); } .comment-date { font-size: var(--fs-xs); color: var(--text-muted); } .comment-body { font-size: var(--fs-base); color: var(--text-secondary); line-height: var(--lh-normal); white-space: pre-wrap; overflow-wrap: break-word; } /* Form di inserimento commento */ .comment-form { display: flex; flex-direction: column; gap: var(--space-3); } .comment-form .input { width: 100%; } .comment-textarea { resize: vertical; min-height: 88px; font-family: var(--font-mono); line-height: var(--lh-normal); }