/* Foglio di stile del sito. Sta in un file e non dentro le pagine
   perché le pagine sono due: scritto due volte, fra un mese diverge.
   Resta sullo stesso dominio, quindi la pagina continua a non chiedere
   niente a nessuno.

   I colori sono quelli del programma, presi da app/web/static/stile.css:
   chi arriva qui e poi apre Fattivo deve riconoscere la stessa cosa. I
   caratteri no — il programma importa IBM Plex da Google, questa pagina
   usa quelli del sistema. Un sito che dice «i tuoi dati restano sotto
   controllo» e intanto fa fare al visitatore una richiesta ai server di
   Google si contraddice da solo. */
:root {
  --fondo: #eaedf0;
  --carta: #ffffff;
  --petrolio: #14212b;
  --petrolio-2: #1e2f3c;
  --fumo: #5d6c77;
  --filo: #cfd7dd;
  --segnale: #d4212b;
  /* Il blu del simbolo del marchio, campionato dal file e non scelto a
     occhio. Nel marchio ce n'e' un secondo, quello dello slogan
     (#3c99fb): e' piu' chiaro e su bianco non arriva al contrasto
     minimo nemmeno per un titolo grande - bello sullo schermo di chi lo
     disegna, faticoso su un telefono al sole. Questo sta a 5.2:1. */
  --marchio: #0364ec;
  --testo: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --dato: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--carta); color: var(--petrolio);
  font: 17px/1.6 var(--testo); -webkit-font-smoothing: antialiased;
}
a { color: var(--marchio); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dentro { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.stretto { max-width: 720px; }

/* -------------------------------------------------------- testata */
header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
header.staccata { border-bottom-color: var(--filo); box-shadow: 0 1px 14px rgba(20,33,43,.07); }
header .dentro {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 13px; padding-bottom: 13px;
}
header img { height: 32px; display: block; }
header nav { display: flex; align-items: center; gap: 22px; }
header nav a.voce { color: var(--fumo); font-size: 15px; }
header nav a.voce:hover { color: var(--petrolio); text-decoration: none; }
header nav .voce.qui { color: var(--petrolio); font-weight: 600; }
.scrivi {
  background: var(--petrolio); color: #fff; padding: 9px 18px;
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: background .2s ease;
}
.scrivi:hover { background: var(--petrolio-2); text-decoration: none; }

/* --------------------------------------------------------- apertura */
.apertura { padding: 76px 0 0; text-align: center; }
.apertura h1 {
  font-size: 52px; line-height: 1.08; margin: 0 0 20px; letter-spacing: -1.2px;
}
/* La seconda riga nel blu del marchio, come nel marchio stesso: lì
   "MENO AMMINISTRAZIONE." è scura e "PIÙ LAVORO." è blu. Il titolo che
   ripete la stessa divisione lega le due cose invece di limitarsi a
   stargli sotto. */
.apertura h1 .promessa { color: var(--marchio); }
.apertura p {
  font-size: 21px; color: var(--fumo); margin: 0 auto 30px; max-width: 640px;
}
.bottone {
  display: inline-block; background: var(--petrolio); color: #fff;
  padding: 15px 30px; font-weight: 600; font-size: 17px;
  transition: background .2s ease, transform .2s ease;
}
.bottone:hover { background: var(--petrolio-2); text-decoration: none; transform: translateY(-1px); }
.sotto-bottone { font-size: 14.5px; color: var(--fumo); margin-top: 16px; }

/* La catena dei documenti: è la promessa principale del prodotto, e una
   frase non la mostra. È un disegno e non tre riquadri con del testo
   dentro: la prima versione erano tre rettangoli con il bordo, e
   somigliavano al bottone «Scrivimi» al punto che sembravano premibili.
   Un elemento che invita a un gesto che non esiste è un piccolo
   tradimento, e su una pagina che vende semplicità si nota. */
.schema { margin: 32px auto 0; max-width: 430px; }
.schema svg { width: 100%; height: auto; display: block; }
.schema text {
  font-family: var(--testo); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase;
}

/* La schermata grande sotto il titolo, appoggiata sul fondo grigio che
   comincia a meta' altezza: e' il modo di farla sembrare uno schermo
   invece di un'immagine incollata. */
.vetrina { position: relative; margin-top: 46px; }
.vetrina::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 42%;
  background: var(--fondo); z-index: -1;
}
.vetrina img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--filo);
  box-shadow: 0 18px 50px rgba(20,33,43,.16);
}

/* ----------------------------------------------------------- punti */
.punti {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  padding: 56px 0;
}
.punto h3 { font-size: 19px; margin: 0 0 8px; letter-spacing: -0.2px; }
.punto p { margin: 0; font-size: 16px; color: var(--fumo); }
.punto .cifra {
  font-family: var(--dato); font-size: 13px; color: var(--segnale);
  letter-spacing: 1px; display: block; margin-bottom: 10px;
}

/* --------------------------------------------------------- blocchi */
section { padding: 60px 0; border-top: 1px solid var(--filo); }
section h2 { font-size: 30px; margin: 0 0 14px; letter-spacing: -0.6px; }
section p { margin: 0 0 14px; font-size: 17px; }
.muto { color: var(--fumo); }

.affiancato { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.affiancato img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--filo); box-shadow: 0 8px 26px rgba(20,33,43,.10);
}
/* La fattura e' un A4 in verticale: a tutta larghezza verrebbe
   ingrandita oltre i pixel che ha e sfocherebbe. Sta dentro una colonna
   stretta, dove si vede intera e resta nitida. */
.foglio { max-width: 340px; margin: 0 auto; }
.dettaglio { margin-top: 20px; }
.dettaglio img { box-shadow: none; }
.didascalia { font-size: 14px; color: var(--fumo); margin: 8px 0 0; }

.scuro { background: var(--petrolio); color: #fff; border-top: none; }
.scuro h2 { color: #fff; }
.scuro p { color: #c8d2da; }
.scuro a { color: #8fc0ff; }
.scuro .affiancato img { border-color: #2c3f4e; }
.numero {
  font-family: var(--dato); font-size: 15px; color: var(--petrolio);
  background: var(--fondo); padding: 15px 18px; display: inline-block;
  border-left: 3px solid var(--segnale); margin: 4px 0 0;
}
.scuro .numero { color: #fff; background: var(--petrolio-2); }

/* -------------------------------------------------------- contatto */
.contatto { background: var(--fondo); border-top: 1px solid var(--filo); text-align: center; }
.recapiti {
  display: flex; gap: 40px; justify-content: center; flex-wrap: wrap;
  margin-top: 26px; font-size: 21px;
}
.recapiti span { display: block; font-size: 14px; color: var(--fumo); margin-bottom: 2px; }
footer { background: var(--petrolio); color: #9fb0bd; padding: 24px 0; font-size: 14px; }
footer a { color: #c8d2da; }

/* ------------------------------------------------------ chi c'è dietro */
/* Il ritratto sta a sinistra del testo quando c'è spazio, sopra quando
   non ce n'è. Oggi non c'è una fotografia: il riquadro non si disegna
   affatto invece di mostrare una sagoma grigia, che dice «qui manca
   qualcosa» a chiunque passi. */
.persona { display: grid; grid-template-columns: 1fr; gap: 8px; }
.firma { font-size: 15px; color: var(--fumo); margin-top: 22px; }
.firma b { color: var(--petrolio); font-weight: 600; display: block; font-size: 16px; }
.firma a { display: inline-block; margin-top: 6px; }

/* ------------------------------------------------- pagina di testo */
/* La pagina sulla sicurezza è fatta di prose, non di riquadri: chi la
   apre vuole leggere, non essere convinto. */
.testo { max-width: 720px; margin: 0 auto; padding: 56px 24px 20px; }
.testo h1 { font-size: 38px; letter-spacing: -0.8px; margin: 0 0 10px; }
.testo .occhiello {
  font-family: var(--dato); font-size: 13px; color: var(--marchio);
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px;
}
.testo h2 { font-size: 23px; letter-spacing: -0.3px; margin: 40px 0 10px; }
.testo p { margin: 0 0 14px; }
.testo .guida { font-size: 20px; color: var(--fumo); margin-bottom: 8px; }
.testo .indietro { display: inline-block; margin-top: 34px; }

/* ------------------------------------------- pagine di spiegazione */
/* Il cappello di una pagina interna: dice dove sei e cosa ci trovi,
   senza il peso di un'apertura da pagina iniziale. */
.cappello { padding: 60px 0 10px; }
.cappello h1 { font-size: 40px; letter-spacing: -1px; margin: 0 0 14px; line-height: 1.1; }
.cappello p { font-size: 20px; color: var(--fumo); margin: 0; max-width: 640px; }
.cappello .occhiello {
  font-family: var(--dato); font-size: 13px; color: var(--marchio);
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px;
}

/* I passi del giro di lavoro, uno sotto l'altro con il filo che li
   unisce: e' un percorso, e un elenco puntato non lo racconta. */
.passi { border-left: 2px solid var(--filo); margin: 0; padding: 0 0 0 30px; list-style: none; }
.passo { position: relative; padding-bottom: 34px; }
.passo::before {
  content: ""; position: absolute; left: -39px; top: 4px;
  width: 16px; height: 16px; background: var(--carta);
  border: 2px solid var(--marchio);
}
.passo:last-child { padding-bottom: 0; }
.passo h3 { font-size: 20px; margin: 0 0 6px; letter-spacing: -0.2px; }
.passo p { margin: 0 0 8px; }
.passo .quando {
  font-family: var(--dato); font-size: 12px; color: var(--fumo);
  letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: 4px;
}

/* Il confronto fra due modi di lavorare. Due colonne e non una tabella
   con le spunte verdi: le spunte fanno pubblicita', due colonne
   affiancate lasciano giudicare. */
.confronto { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 8px 0 0; }
.colonna { border: 1px solid var(--filo); padding: 20px 22px; }
.colonna.nostra { border-color: var(--petrolio); border-width: 2px; }
.colonna h3 { margin: 0 0 12px; font-size: 17px; }
.colonna ul { margin: 0; padding-left: 18px; }
.colonna li { margin-bottom: 9px; font-size: 15.5px; color: var(--fumo); }
.colonna.nostra li { color: var(--petrolio); }

/* Un riquadro per il caso in cui Fattivo NON e' la risposta giusta. Ha
   un aspetto suo perche' non deve sembrare un altro argomento di
   vendita: e' l'unica parte della pagina che dice di no. */
.franco { background: var(--fondo); border-left: 3px solid var(--fumo); padding: 20px 24px; }
.franco h3 { margin: 0 0 10px; font-size: 18px; }
.franco p { margin: 0 0 10px; color: var(--fumo); }
.franco p:last-child { margin-bottom: 0; }

/* Il disegno che si compone quando entra nello schermo. Le linee si
   tracciano usando il tratteggio come se fosse una matita, il resto
   compare in dissolvenza. Tutto in CSS: una libreria di animazioni
   peserebbe piu' dell'intera pagina. */
.disegno { margin: 26px 0; }
.disegno svg { width: 100%; height: auto; display: block; }
.disegno text {
  font-family: var(--testo); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase;
}
.js .disegno [data-traccia] {
  stroke-dasharray: var(--lung, 400); stroke-dashoffset: var(--lung, 400);
}
.js .disegno.vista [data-traccia] {
  animation: traccia .9s ease forwards;
}
.js .disegno [data-appare] { opacity: 0; transform: translateY(6px); }
.js .disegno.vista [data-appare] {
  animation: appare .5s ease forwards;
}
/* Il ritardo scritto sul singolo elemento: cosi' l'ordine in cui le
   cose compaiono e' quello in cui vanno lette, e sta nel disegno
   invece che in una regola generale che non sa cosa disegna. */
@keyframes traccia { to { stroke-dashoffset: 0; } }
@keyframes appare { to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .confronto { grid-template-columns: 1fr; }
  .cappello h1 { font-size: 30px; }
  .cappello p { font-size: 17px; }
}

/* ------------------------------------------------------- movimento */
/* Lo stato di partenza vale solo se il JS e' vivo e potra' toglierlo:
   senza la classe sul <html>, un browser con JS spento mostrerebbe una
   pagina bianca - il difetto peggiore, perche' a noi non capiterebbe
   mai di vederlo. */
.js [data-anima] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.js [data-anima].vista { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-anima] { opacity: 1; transform: none; transition: none; }
  .bottone:hover { transform: none; }
}

@media (max-width: 860px) {
  .punti { grid-template-columns: 1fr; gap: 30px; padding: 44px 0; }
  .affiancato { grid-template-columns: 1fr; gap: 26px; }
  .apertura h1 { font-size: 36px; letter-spacing: -0.6px; }
  .apertura p { font-size: 18px; }
  .apertura { padding-top: 48px; }
  section { padding: 44px 0; }
  section h2 { font-size: 24px; }
  /* La navigazione, da telefono, spariva del tutto: restavano il
     marchio e il tasto Scrivimi, e le altre cinque pagine non erano
     raggiungibili se non arrivando in fondo, dove il piè di pagina le
     elenca. Era una semplificazione sensata quando il sito era una
     pagina sola; con sei pagine è il caso NORMALE a non funzionare,
     perché il collegamento al sito arriva per messaggio e chi lo apre
     lo apre dal telefono.

     Le voci restano visibili e vanno a capo su una riga propria. Non
     un menu a panino: un menu che si apre con un tocco funziona solo
     per chi sa che quel quadratino è un menu, e chi arriva qui è un
     piccolo imprenditore che sta guardando il sito fra un cantiere e
     l'altro. Un elenco che si vede non ha bisogno di essere scoperto. */
  header img { height: 28px; }
  header .dentro { flex-wrap: wrap; row-gap: 9px; }
  header nav {
    order: 3; width: 100%;
    flex-wrap: wrap; gap: 8px 15px;
  }
  header nav a.voce { font-size: 14px; }
  header nav .voce.qui { font-size: 14px; }
  .scrivi { padding: 7px 15px; font-size: 14px; }

  /* E la testata smette di stare appiccicata in alto. Su uno schermo
     alto 600 punti, tre righe di barra fissa sono un decimo dello
     schermo rubato per sempre: qui l'elenco serve all'inizio, non
     mentre si legge. */
  header { position: static; }

  .testo h1 { font-size: 30px; }
}

/* -------------------------------------------------- telefoni stretti */
/* Sotto i 480 punti il titolo di apertura sforava: "amministrazione."
   a 36 punti misura piu' della finestra, e la pagina si poteva
   trascinare di lato. Una parola lunga non si spezza da sola, quindi
   non basta ridurre i margini: va ridotto il corpo. Misurato, non
   stimato: a 360 punti il documento era largo 366. */
@media (max-width: 480px) {
  .apertura h1 { font-size: 30px; letter-spacing: -0.4px; }
  .apertura p { font-size: 17px; }
  section h2 { font-size: 22px; }
  .testo h1 { font-size: 26px; }
  header nav { gap: 8px 13px; }
  header nav a.voce, header nav .voce.qui { font-size: 13.5px; }
}