/* ========================================================================= cms/pubblico/styles.css — frontend pubblico del CMS. Implementazione dei design token "Comunicare il Sorriso di Dio" — variante Caldo & Accogliente (palette terracotta su crema, Fraunces + Source Serif 4 + Inter + IBM Plex Mono). ORGANIZZAZIONE DEL FILE 1. Token (CSS variables) — la fonte di verità di palette/scale/spazi 2. Reset minimo + tipografia di base 3. (Topbar rimossa — la sezione è vuota, lascio il numero per non rinumerare) 4. Header del sito (brand + social + nav) 5. Main (contenitore + larghezze) 6. Articolo singolo (titolo, byline, copertina, corpo, tag) 7. Pagina 404 8. Footer 9. Responsive (mobile-first dei pochi punti che cambiano) Le classi seguono la convenzione BEM lasca già usata nel progetto: `blocco__elemento--variante`. Niente Tailwind, niente preprocessori: CSS puro + variabili, perché il pubblico è statico e ogni byte conta. ========================================================================= */ /* ========================================================================= 1. TOKEN ========================================================================= */ :root { /* --- Palette --------------------------------------------------------- Bruno scuro per testo (NO nero puro: #2c2620 è il nero caldo del design system). Sfondo del sito = `--c-bg-pagina`: bianco-caldo morbido, non saturo, su cui galleggiano contenuti e widget. Crema più caldo #f4ede0 come highlight (citazione, hero-coperta segnaposto). Terracotta #c8553d come accento (categorie, CTA, capolettera). */ --c-bg-sito: #fffdf9; --c-bg-pagina: #fbf8f1; --c-bg-card: #ffffff; --c-bg-dark: #2c2620; --c-bg-highlight: #f4ede0; --c-testo: #2c2620; --c-testo-corpo: #3a2e22; --c-testo-corpo-soft: #5a4e42; --c-testo-muted: #7a6a5a; --c-testo-faint: #a8957e; --c-bordo: #ebe2d4; --c-bordo-forte: #d4c4ad; --c-accento: #c8553d; --c-accento-hover: #a3402d; --c-accento-soft: #e8b86d; /* --- Tipografia ----------------------------------------------------- Fraunces (display+titoli) + Source Serif 4 (corpo articolo) + Inter (UI) + IBM Plex Mono (meta/kicker). Caricate via Google Fonts dal . */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-corpo: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace; /* --- Spaziature ----------------------------------------------------- Scala in rem (1rem = 16px). Preferenza per multipli pari per allineamenti baseline coerenti tra blocchi diversi. */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.5rem; /* 24px */ --sp-6: 2rem; /* 32px */ --sp-7: 2.5rem; /* 40px */ --sp-8: 3.5rem; /* 56px */ --sp-9: 5rem; /* 80px */ /* --- Larghezze max -------------------------------------------------- */ --maxw-corpo: 720px; /* lettura ottimale (corpo articolo) */ --maxw-titolo: 880px; /* title block + sommario articolo */ --maxw-pagina: 1200px; /* contenitore generale (header, footer) */ /* --- Border radius -------------------------------------------------- */ --br-piccolo: 3px; --br-medio: 4px; --br-cerchio: 999px; /* --- Ombra discreta sotto le card (solo home, non articolo) -------- */ --sh-card: 0 1px 2px rgba(44, 38, 32, 0.06); } /* ========================================================================= 2. RESET MINIMO + TIPOGRAFIA DI BASE ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img, picture, video { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0; padding: 0; list-style: none; } body { font-family: var(--font-ui); font-size: 15px; line-height: 1.6; color: var(--c-testo); /* Sfondo del body: bianco-caldo morbido che fa da fondo all'intero * sito. Layout aperto: header, navbar e main condividono lo stesso * sfondo, senza container ombreggiato. La centratura su * `--maxw-pagina` la fanno i singoli blocchi col loro padding * orizzontale. Il footer è full-bleed (sfondo bruno scuro). * * `overflow-x: clip` previene la scrollbar orizzontale spuria che * il trick "full-bleed" della navbar (margine -50vw) può * introdurre: `100vw` include la larghezza della scrollbar * verticale, che diventa overflow di pochi pixel a destra. * `clip` invece di `hidden` non crea un nuovo formatting context, * così future `position: sticky` continuano a funzionare. */ background: var(--c-bg-pagina); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; } /* ========================================================================= 3. (TOPBAR rimossa) ========================================================================= La topbar bruna in cima (claim + contatore iscritti) è stata rimossa per alleggerire l'header. Le chiavi `pubblico.topbar.*` sono fuori dal registro e il cromo non la include più. Lasciato il numero di sezione per non rinumerare il resto del file. */ /* ========================================================================= 4. HEADER DEL SITO — brand + social + navbar ========================================================================= Il logotipo è impaginato su due righe: "Comunicare il / *Sorriso* di Dio" con "Sorriso" in italic + accento rosso. La "c" cerchiata a sinistra è un placeholder testuale (sostituibile con un'immagine vera quando arriverà). Quattro social cerchiati a destra. */ .sito-header { background: var(--c-bg-pagina); } .sito-header__interno { /* Container centrato dell'header: max 1200px, padding laterale * generoso. Niente bordi né ombre — il layout è aperto, l'header * vive sullo stesso sfondo del resto della pagina. * Padding-top ridotto a --sp-3: senza la vecchia topbar bruna * sopra, il --sp-6 originale lasciava un vuoto ingiustificato. */ max-width: var(--maxw-pagina); margin: 0 auto; padding: var(--sp-4) var(--sp-6) var(--sp-3) var(--sp-6); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-6); } /* --- Brand ------------------------------------------------------------- */ .sito-header__brand { display: flex; align-items: flex-start; gap: var(--sp-4); text-decoration: none; color: var(--c-testo); } .sito-header__brand:hover .sito-header__titolo-accento { color: var(--c-accento-hover); } /* "c" cerchiata: cerchio terracotta + lettera Fraunces bianca dentro. Quando arriverà il logo vero, sostituiremo solo questo blocco. */ .sito-header__logo { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--br-cerchio); background: var(--c-accento); color: var(--c-bg-pagina); font-family: var(--font-display); font-size: 26px; font-weight: 600; font-style: italic; display: flex; align-items: center; justify-content: center; line-height: 1; margin-top: 2px; } .sito-header__brand-testo { display: flex; flex-direction: column; gap: 2px; } .sito-header__titolo { /* Titolo brand su una sola riga: "Comunicare il *Sorriso* di Dio". * Era a due righe (riga1 22px + riga2 26px); ora unica voce a 28px * per dargli presenza pur restando contenuta. La parola accento * (italic + terracotta) la fa l'``. */ font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.1; letter-spacing: -0.5px; color: var(--c-testo); } .sito-header__titolo-accento { color: var(--c-accento); font-style: italic; font-weight: 500; transition: color 0.15s ease; } .sito-header__sottotitolo { font-family: var(--font-corpo); font-style: italic; font-size: 13px; color: var(--c-testo-muted); margin-top: var(--sp-2); line-height: 1.4; } /* --- Social ------------------------------------------------------------- Quattro icone cerchiate a destra del brand. Cerchio bordo terracotta chiaro, icona terracotta. Hover: fill pieno terracotta + icona crema. */ .sito-header__social { display: flex; gap: var(--sp-3); align-items: center; flex-shrink: 0; } .sito-header__social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--br-cerchio); background: var(--c-bg-pagina); border: 1px solid var(--c-bordo); color: var(--c-accento); text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .sito-header__social-link:hover, .sito-header__social-link:focus-visible { background: var(--c-accento); color: var(--c-bg-pagina); border-color: var(--c-accento); } .sito-header__social-link:focus-visible { outline: 2px solid var(--c-accento); outline-offset: 2px; } /* --- Navbar ------------------------------------------------------------- Fascia terracotta a piena larghezza della **finestra del browser**, voci bianche in maiuscoletto grassetto, centrate dentro `--maxw-pagina`. La voce attiva resta bianca con una sottolineatura bianca sotto il testo. Trick "full-bleed": il template HTML mette `
` (e quindi `