/* * SoulFuel — il foglio di stile del sito. * * Il disegno viene da Temp/Soulfuel.dc.html. Quel file e' una tela: una pagina * sola, tutto a stili in linea, con dentro un'altra famiglia e attributi che * nessun browser conosce (`style-hover`, ``, ``, `{{ }}`), * che funzionano solo grazie a support.js e image-slot.js. Qui il linguaggio * visivo e' riscritto come foglio vero e agganciato al markup che i modelli * PHP producono, cosi' vale su tutte le rotte e in tutte e quattro le lingue. * * Quello che il modello detta e che qui e' legge: * - due caratteri: Newsreader per i titoli, in pesi molto leggeri; Karla per * il testo. I titoli non sono mai in grassetto. * - una cornice sola: 1240px, margine laterale 26px. * - un ritmo solo: 92px fra due sezioni. * - misure ottiche, non un sistema numerico: 13.5px, 44px, 26px esistono * perche' a occhio funzionano. * - ogni titolo di sezione ha sopra un occhiello: riga corta, maiuscolo * spaziato, colore argilla. * - il ritmo della pagina alterna carta e fasce: due sezioni su --bg, poi * una fascia piena su --surface2 con un filo sopra e sotto. * - un solo bottone pieno per schermata. * - angoli tondi ovunque, mai bordi marcati; le pillole sono 999px. * * Giorno e notte stanno in questo stesso file: la notte si accende con * , che PHP scrive dal server — nessun lampo al caricamento. */ /* ==================================================== caratteri ============= */ /* * I due caratteri sono ospitati qui, non presi da Google. Sono file variabili: * un file solo copre tutti i pesi da 200 a 800, e sono quattro in tutto invece * delle otto-dieci che servirebbero con i tagli statici. * Il modello li chiamava da fonts.googleapis.com; per un sito con impressum * tedesco quella riga trasmette l'indirizzo IP di chi legge a un terzo, ed e' * esattamente cio' che il Landgericht München I ha condannato nel 2022. * Se un file manca, valgono i ripieghi di sistema dichiarati in --titolo e * --testo: il sito resta leggibile, cambia solo l'aspetto. */ @font-face { font-family: "Newsreader"; src: url("/Style/Font/SoulFuel-Style-Font-Newsreader1.woff2") format("woff2-variations"); font-weight: 200 800; font-stretch: 100%; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("/Style/Font/SoulFuel-Style-Font-Newsreader1Corsivo.woff2") format("woff2-variations"); font-weight: 200 800; font-style: italic; font-display: swap; } @font-face { font-family: "Karla"; src: url("/Style/Font/SoulFuel-Style-Font-Karla1.woff2") format("woff2-variations"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "Karla"; src: url("/Style/Font/SoulFuel-Style-Font-Karla1Corsivo.woff2") format("woff2-variations"); font-weight: 200 800; font-style: italic; font-display: swap; } /* * Newsreader ha un secondo asse, `opsz` (optical size): il disegno della * lettera cambia a seconda del corpo in cui verra' stampata. Lasciato libero, * il browser lo imposta da solo in base al font-size — ed e' quello che * vogliamo, perche' i titoli qui vanno da 25px a 74px. Si dichiara solo perche' * senza `font-optical-sizing` esplicito qualche browser lo ignora. */ h1, h2, h3, body > header p#marchio b, body > footer b#firma { font-optical-sizing: auto; } /* ==================================================== il giorno ============= */ :root { color-scheme: light; --bg: #FBF8F1; --surface: #FFFFFF; --surface2: #F3EFE4; --glass: rgba(251, 248, 241, 0.82); --ink: #1D2A22; --ink2: #4E5D52; --muted: #8B9A8C; --line: #E4DECE; --moss: #3E6B4F; --moss-soft: #E1EBDD; --sun: #E3A33C; --clay: #C1674A; --sky: #5E90B8; /* L'OMBRA SENZA SPREAD NEGATIVO. Era «0 18px 40px -22px»: un alone largo quaranta e rientrato di ventidue. In Firefox si vedeva morbido; in Chrome no — le sezioni hanno `animation-timeline: view()`, che le mette su un piano di composizione separato, e li' Chrome rasterizzava quell'ombra come un RETTANGOLO PIENO sfalsato in basso a destra. Non un'ombra sfumata: una seconda scheda grigia che spuntava da sotto la prima. Due strati corti e senza rientro danno lo stesso stacco e non si prestano a quell'errore. La profondita' vera la fa il bordo, che c'e' gia'. */ --shadow: 0 1px 2px rgba(29, 42, 34, 0.06), 0 6px 16px rgba(29, 42, 34, 0.07); --titolo: Newsreader, Georgia, "Times New Roman", serif; --testo: Karla, system-ui, -apple-system, "Segoe UI", sans-serif; --cornice: 1240px; --lato: 26px; --ritmo: 92px; --lettura: 62ch; } /* ==================================================== la notte ============== */ :root.night { color-scheme: dark; --bg: #0F1518; --surface: #18211F; --surface2: #1E2825; --glass: rgba(15, 21, 24, 0.82); --ink: #EFEBE0; --ink2: #B7C2B7; --muted: #7C8A80; --line: #2A3630; --moss: #82BC92; --moss-soft: #22312A; --sun: #E9B45E; --clay: #DD8767; --sky: #93B9D8; --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.28); } /* Senza scelta esplicita decide il sistema operativo. `day` sul tag blocca il chiaro anche se il sistema e' scuro: una scelta vale piu' di una preferenza generale. */ @media (prefers-color-scheme: dark) { :root:not(.day) { color-scheme: dark; --bg: #0F1518; --surface: #18211F; --surface2: #1E2825; --glass: rgba(15, 21, 24, 0.82); --ink: #EFEBE0; --ink2: #B7C2B7; --muted: #7C8A80; --line: #2A3630; --moss: #82BC92; --moss-soft: #22312A; --sun: #E9B45E; --clay: #DD8767; --sky: #93B9D8; --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.28); } } /* ==================================================== fondamenta ============ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--ink); font-family: var(--testo); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background 0.5s ease, color 0.5s ease; } a { color: var(--moss); text-decoration: none; } a:hover { color: var(--clay); text-decoration: underline; } img { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } ::selection { background: var(--sun); color: #1D2A22; } :focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; } @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes ping { 0% { opacity: 0.9; transform: scale(0.6); } 70%, 100% { opacity: 0; transform: scale(2.4); } } @keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes traccia { to { stroke-dashoffset: 0; } } a#salta { position: absolute; left: -100vw; padding: 12px 20px; border-radius: 999px; background: var(--moss); color: #fff; } a#salta:focus { position: static; display: inline-block; margin: 12px; } /* ==================================================== la testata ============ */ /* Fascia: fondo da bordo a bordo, contenuto nella cornice. Come il piede. */ body > header { position: sticky; top: 0; z-index: 60; background: var(--glass); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } body > header > div { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 10px 20px; max-width: var(--cornice); margin: 0 auto; padding: 14px var(--lato); } body > header p { margin: 0; } body > header p#marchio > a { display: flex; flex-direction: column; gap: 1px; color: var(--ink); text-decoration: none; } body > header p#marchio b { font-family: var(--titolo); font-size: 23px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } body > header p#marchio span { font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); } body > header nav > ul { display: flex; flex-wrap: wrap; gap: 22px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; } body > header nav > ul > li > a { color: var(--ink2); } body > header nav > ul > li > a:hover, body > header nav > ul > li > a[aria-current] { color: var(--moss); text-decoration: none; } /* L'unico bottone pieno della testata. Una sola azione principale, sempre. */ body > header nav > ul > li#invito > a { padding: 10px 18px; border-radius: 999px; background: var(--moss); color: #fff; font-size: 13px; font-weight: 500; } body > header nav > ul > li#invito > a:hover { background: var(--clay); color: #fff; } body > header p#servizio { display: flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; } body > header p#servizio a { color: var(--muted); } body > header p#servizio a:hover { color: var(--moss); text-decoration: none; } body > header p#servizio b { color: var(--ink); font-weight: 700; } /* * L'interruttore giorno/notte: un cerchio di 38px con dentro un glifo, come nel * modello. E' un , non un