/* kryzonte.com - piano cartografico Riferimento di sistema: Chronicle (proof sheet del tipografo), riletto in registro smorzato: la griglia non e' decorazione, colloca i blocchi. Nessuna ombra. Un solo accento (blu geodetico), una sola scala di raggio (2px). */ /* I tipi di carattere sono richiamati con nel di ogni pagina: dentro il CSS l'@import li metterebbe in coda al foglio di stile. */ :root { /* piano */ --piano: #b4aea3; --piano-scuro: #a49d91; --reticolo: #9a9287; --reticolo-forte: #877e71; --reticolo-pagina: rgba(63, 57, 47, 0.085); --asse: #5f584c; /* superfici posate sul piano */ --scheda: #ded9d0; --scheda-alta: #eceae4; /* inchiostro */ --inchiostro: #20211d; --tenue: #4a4b44; /* accento unico: le linee di collegamento, i link, il focus, la CTA */ --traccia: #0057b8; /* scala di densita' del peso: una sola tinta, chiara -> fitta */ --peso-1: #cfc9bd; --peso-2: #b1a999; --peso-3: #8b8272; --peso-4: #645c4e; --peso-5: #3c362c; --mono: 'Chivo Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --testo: 'Libre Franklin', system-ui, -apple-system, sans-serif; --altezza-testata: 62px; /* la sticky in cima; da qui deriva lo scroll-margin */ --modulo: 44px; /* passo della griglia, ovunque */ --raggio: 2px; --bordo: 1px solid var(--asse); --filo: 1px solid var(--reticolo-forte); --margine: clamp(16px, 5vw, 84px); --stacco: clamp(52px, 8vw, 116px); } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background-color: var(--piano); /* la griglia corre sotto tutta la pagina, footer e FAQ compresi */ background-image: repeating-linear-gradient(to right, var(--reticolo-pagina) 0 1px, transparent 1px var(--modulo)), repeating-linear-gradient(to bottom, var(--reticolo-pagina) 0 1px, transparent 1px var(--modulo)); background-position: 0 0; color: var(--inchiostro); font-family: var(--testo); font-size: clamp(16px, 0.55vw + 14.4px, 18px); line-height: 1.62; font-weight: 400; } img { max-width: 100%; height: auto; display: block; } a { color: var(--traccia); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { color: var(--inchiostro); } :focus-visible { outline: 2px solid var(--traccia); outline-offset: 2px; } h1, h2, h3, h4 { font-family: var(--mono); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin: 0; text-wrap: balance; } h1 { font-size: clamp(26px, 4.4vw, 48px); letter-spacing: -0.045em; } h2 { font-size: clamp(23px, 2.8vw, 36px); } h3 { font-size: clamp(19px, 1.7vw, 25px); letter-spacing: -0.02em; } h4 { font-size: clamp(16px, 1vw, 18px); letter-spacing: 0; } p { margin: 0 0 1em; max-width: 68ch; } p:last-child { margin-bottom: 0; } /* ---------- coordinate, etichette, metadati: sempre in mono ---------- */ .coord { font-family: var(--mono); overflow-wrap: anywhere; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; color: var(--tenue); font-variant-numeric: tabular-nums; } .coord-forte { color: var(--inchiostro); font-weight: 600; } /* ---------- impianto di pagina ---------- */ .striscia { padding-inline: var(--margine); } .sezione { padding-block: var(--stacco); } .sezione--fitta { padding-block: clamp(36px, 5vw, 66px); } /* le fasce piu' scure segnano i cambi di scala, non la gerarchia */ .fascia-piano-scuro { background: var(--piano-scuro); } /* ---------- testata ---------- */ .testata { position: sticky; top: 0; z-index: 40; background: var(--piano-scuro); border-bottom: var(--bordo); } .testata__interno { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--altezza-testata); padding-inline: var(--margine); } .marchio { font-family: var(--mono); font-weight: 700; font-size: 18px; letter-spacing: -0.05em; color: var(--inchiostro); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; } .marchio svg { display: block; } .marchio:hover { color: var(--traccia); } .navigazione { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px); } .navigazione a { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--inchiostro); text-decoration: none; } .navigazione a:hover, .navigazione a[aria-current="page"] { color: var(--traccia); text-decoration: underline; } .bottone-menu { display: none; background: none; border: var(--bordo); border-radius: var(--raggio); font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--inchiostro); padding: 9px 13px; cursor: pointer; min-height: 44px; } @media (max-width: 900px) { .bottone-menu { display: block; } .navigazione { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--piano-scuro); border-bottom: var(--bordo); padding: 6px var(--margine) 14px; } .navigazione.aperta { display: flex; } .navigazione a { padding: 12px 0; width: 100%; border-bottom: var(--filo); font-size: 15px; } } /* ---------- ingresso: la mappa e' il primo schermo ---------- */ .ingresso { padding-top: clamp(30px, 4vw, 62px); } .ingresso__testo { max-width: 60ch; } .ingresso h1 { margin-bottom: 18px; } .ingresso__sommario { font-size: clamp(17px, 1.1vw, 20px); color: var(--inchiostro); } .riga-fiducia { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.03em; color: var(--tenue); margin-top: 20px; padding-top: 12px; border-top: var(--filo); max-width: 58ch; } .azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .bottone { display: inline-flex; align-items: center; min-height: 46px; padding: 11px 20px; border-radius: var(--raggio); font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; border: 1px solid var(--traccia); background: var(--traccia); color: var(--scheda-alta); transition: transform 140ms ease, background-color 140ms ease; } .bottone:hover { background: #01438e; color: var(--scheda-alta); } .bottone:active { transform: translateY(1px); } .bottone--vuoto { background: transparent; color: var(--traccia); } .bottone--vuoto:hover { background: var(--scheda-alta); color: var(--traccia); } /* ---------- il piano coordinato ---------- */ .piano-guscio { margin-top: clamp(30px, 4vw, 54px); } .piano-cornice { position: relative; border: var(--bordo); border-radius: var(--raggio); background: var(--scheda); overflow: hidden; } .piano-svg { display: block; width: 100%; height: auto; } /* lo strato che si muove: solo grafica, mai testo di lettura */ #stratoMappa { transform-origin: 50% 50%; } .piano-etichetta-asse { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; fill: var(--asse); text-transform: uppercase; } .piano-estremo { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.04em; fill: var(--tenue); } .piano-nome { font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; fill: var(--inchiostro); } .piano-coord-testo { font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0.04em; fill: var(--tenue); font-variant-numeric: tabular-nums; } .linea-collegamento { stroke: var(--traccia); stroke-width: 1.6; fill: none; opacity: 0.85; } .piano-reticolo-fine { stroke: var(--reticolo); stroke-width: 1; } .piano-reticolo-forte { stroke: var(--reticolo-forte); stroke-width: 1; } .piano-asse { stroke: var(--asse); stroke-width: 1.5; } .posizione { cursor: pointer; } .posizione__pastiglia { stroke: var(--asse); stroke-width: 1.2; transition: transform 160ms ease; transform-box: fill-box; transform-origin: center; } .posizione:hover .posizione__pastiglia, .posizione:focus-visible .posizione__pastiglia { transform: scale(1.12); } .posizione__barra { stroke: var(--asse); stroke-width: 1.2; } /* ---------- indice delle coordinate (fallback mobile + lettura assistita) ---------- */ .indice-coordinate { list-style: none; margin: 0; padding: 0; } .indice-coordinate > li { border-top: var(--filo); } .indice-coordinate > li:last-child { border-bottom: var(--filo); } .voce-indice { display: grid; gap: 3px 12px; padding: 15px 0; grid-template-columns: 15px 26px minmax(0, 1fr); align-items: baseline; text-decoration: none; color: var(--inchiostro); } .voce-indice:hover { color: var(--traccia); } .voce-indice__peso { grid-column: 1; grid-row: 1 / span 2; width: 15px; height: 15px; border: 1px solid var(--asse); border-radius: 1px; align-self: start; margin-top: 4px; } .voce-indice__ordine { grid-column: 2; grid-row: 1; font-family: var(--mono); font-size: 12px; color: var(--tenue); font-variant-numeric: tabular-nums; } .voce-indice__nome { grid-column: 3; grid-row: 1; font-family: var(--mono); font-weight: 600; font-size: 15px; letter-spacing: -0.03em; overflow-wrap: anywhere; } .voce-indice__coord { grid-column: 2 / -1; grid-row: 2; font-family: var(--mono); font-size: 12px; color: var(--tenue); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .titolo-indice { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tenue); margin: 0 0 6px; } /* su schermo largo l'indice affianca il piano; su mobile diventa la mappa stessa */ .piano-guscio__griglia { display: grid; gap: clamp(22px, 3vw, 44px); } @media (min-width: 1080px) { .piano-guscio__griglia { grid-template-columns: minmax(0, 1fr) 310px; align-items: start; } } @media (max-width: 780px) { .piano-cornice { display: none; } } /* ---------- blocchi di testo agganciati alla griglia ---------- */ .blocco-doppio { display: grid; gap: clamp(20px, 3vw, 46px); } @media (min-width: 900px) { .blocco-doppio { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } } .nota-metodo { background: var(--scheda); border: var(--filo); border-left: 3px solid var(--traccia); border-radius: var(--raggio); padding: clamp(18px, 2.2vw, 28px); } .nota-metodo h3 { margin-bottom: 10px; } .legenda-assi { display: grid; gap: 20px; margin-top: 26px; } @media (min-width: 760px) { .legenda-assi { grid-template-columns: 1fr 1fr; } } .legenda-assi > div { border-top: 2px solid var(--asse); padding-top: 14px; } .legenda-assi h4 { font-family: var(--mono); margin-bottom: 7px; } .legenda-assi p { font-size: 15.5px; } .scala-peso { display: flex; align-items: stretch; margin-top: 14px; border: 1px solid var(--asse); border-radius: var(--raggio); overflow: hidden; } .scala-peso span { flex: 1; height: 22px; } /* ---------- territori (schede di gioco) ---------- */ .territorio { border-top: 2px solid var(--asse); padding-top: clamp(20px, 2.4vw, 34px); margin-top: clamp(34px, 4.4vw, 62px); scroll-margin-top: calc(var(--altezza-testata) + 22px); } .territorio:first-of-type { margin-top: clamp(24px, 3vw, 40px); } .territorio__intestazione { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; } .territorio__coord { font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.07em; color: var(--traccia); font-variant-numeric: tabular-nums; } .territorio__studio { font-family: var(--mono); font-size: 13px; color: var(--tenue); } .territorio__gancio { font-size: clamp(17px, 1.15vw, 20px); margin-top: 12px; max-width: 64ch; } .territorio__corpo { display: grid; gap: clamp(20px, 2.6vw, 40px); margin-top: clamp(20px, 2.4vw, 32px); } @media (min-width: 880px) { .territorio__corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: start; } /* le schede non hanno tutte lo stesso impianto */ .territorio--ribaltato .territorio__corpo > figure { order: 2; } .territorio--stretto .territorio__corpo { grid-template-columns: 320px minmax(0, 1fr); } } .territorio figure { margin: 0; } .territorio figure img { border: 1px solid var(--asse); border-radius: var(--raggio); width: 100%; } .territorio figcaption { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--tenue); margin-top: 8px; max-width: 52ch; } .dati-territorio { margin: 0 0 22px; display: grid; gap: 0; } .dati-territorio > div { display: grid; grid-template-columns: minmax(0, 128px) minmax(0, 1fr); gap: 6px 16px; padding: 8px 0; border-bottom: 1px solid var(--reticolo-forte); } .dati-territorio > div:first-child { border-top: 1px solid var(--reticolo-forte); } .dati-territorio dt { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tenue); } .dati-territorio dd { margin: 0; font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .riserva { border-left: 3px solid var(--asse); padding: 4px 0 4px 16px; margin-top: 18px; font-size: 16px; } .riserva strong { font-family: var(--mono); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; display: block; margin-bottom: 4px; color: var(--tenue); } .negozi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } /* ---------- griglia comparativa (due misure, due grafici) ---------- */ .comparativa { display: grid; gap: clamp(26px, 3.4vw, 50px); margin-top: clamp(26px, 3vw, 40px); } @media (min-width: 940px) { .comparativa { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } } .gruppo-grafico h3 { margin-bottom: 4px; } .gruppo-grafico__unita { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--tenue); text-transform: uppercase; display: block; margin-bottom: 16px; } .barra-riga { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px 14px; align-items: center; margin-bottom: 11px; } .barra-riga__nome { font-family: var(--mono); font-size: 12.5px; font-weight: 500; } .barra-riga__pista { /* la barra ha una colonna sua e l'etichetta un'altra: cosi' la percentuale della barra non puo' mai spingere il valore fuori dalla riga */ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; } .barra-riga__barra { height: 17px; border: 1px solid var(--asse); border-radius: 0 var(--raggio) var(--raggio) 0; min-width: 2px; } .barra-riga__valore { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--inchiostro); } @media (max-width: 560px) { .barra-riga { grid-template-columns: 1fr; gap: 4px; } } .nota-scala { font-size: 15px; color: var(--tenue); margin-top: 18px; max-width: 58ch; } /* ---------- redazione, scelta, rifornimenti ---------- */ .pannello { background: var(--scheda); border: var(--filo); border-radius: var(--raggio); padding: clamp(20px, 2.6vw, 36px); } .pannello--alto { background: var(--scheda-alta); } .elenco-semplice { margin: 0; padding-left: 1.1em; } .elenco-semplice li { margin-bottom: 9px; max-width: 62ch; } /* ---------- FAQ ---------- */ .domande { margin-top: clamp(22px, 3vw, 34px); } .domanda { border-top: var(--bordo); padding: clamp(16px, 2vw, 24px) 0; } .domanda:last-of-type { border-bottom: var(--bordo); } .domanda h3 { margin-bottom: 9px; max-width: 56ch; } /* ---------- modulo ---------- */ .modulo { display: grid; gap: 16px; max-width: 460px; margin-top: 22px; } .campo { display: grid; gap: 6px; } .campo label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tenue); } .campo input[type="text"], .campo input[type="email"] { font-family: var(--testo); font-size: 16px; padding: 12px 13px; min-height: 46px; background: var(--scheda-alta); color: var(--inchiostro); border: 1px solid var(--asse); border-radius: var(--raggio); } .campo input:focus-visible { outline: 2px solid var(--traccia); outline-offset: 1px; } .campo__aiuto { font-size: 13.5px; color: var(--tenue); } .consenso { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; } .consenso input { margin-top: 3px; width: 19px; height: 19px; flex-shrink: 0; accent-color: var(--traccia); } .esito { font-family: var(--mono); font-size: 14px; border: 1px solid var(--traccia); background: var(--scheda-alta); padding: 12px 14px; border-radius: var(--raggio); } .esito[hidden] { display: none; } .errore-campo { font-family: var(--mono); font-size: 12.5px; color: #8a1420; } .errore-campo[hidden] { display: none; } /* ---------- footer ---------- */ .pie { background: var(--piano-scuro); border-top: 2px solid var(--asse); padding-block: clamp(38px, 4.6vw, 62px); } .pie__griglia { display: grid; gap: clamp(24px, 3vw, 44px); } @media (min-width: 820px) { .pie__griglia { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); } } .pie h4 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tenue); margin-bottom: 12px; } .pie ul { list-style: none; margin: 0; padding: 0; } .pie li { margin-bottom: 8px; } .pie a { font-size: 15px; } .disclaimer { margin-top: clamp(28px, 3.4vw, 44px); padding-top: 18px; border-top: var(--filo); font-size: 12.5px; line-height: 1.62; color: var(--tenue); max-width: 92ch; } .copyright { font-family: var(--mono); font-size: 12px; color: var(--tenue); margin-top: 14px; } .nota-posizione { margin-top: 22px; } .sommario-pagina { margin-top: 16px; max-width: 62ch; } .data-documento { margin-top: 14px; } /* ---------- pagine interne ---------- */ .pagina-testa { padding-top: clamp(34px, 4.4vw, 70px); padding-bottom: clamp(20px, 2.6vw, 36px); } .corpo-lungo { max-width: 72ch; } .corpo-lungo h2 { margin-top: clamp(30px, 3.4vw, 50px); margin-bottom: 12px; } .corpo-lungo h3 { margin-top: 26px; margin-bottom: 8px; } .corpo-lungo ul { padding-left: 1.15em; } .corpo-lungo li { margin-bottom: 9px; } .pagina-404 { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; } /* ---------- movimento ---------- */ /* Senza JS nulla e' nascosto: le classi di partenza si attivano solo con .js */ /* Lo stato iniziale della comparsa lo mette lo script, non questo foglio: se GSAP non arriva dal CDN i blocchi devono restare visibili. */ @media (prefers-reduced-motion: reduce) { .posizione:hover .posizione__pastiglia { transform: none; } * { transition-duration: 0.01ms !important; } }