/* Giacenze Crypto — foglio di stile del sito pubblico. Palette derivata dal logo dell'applicazione (nero, oro-oliva, bianco sporco), stesso font (Noto Sans) gia' incluso nell'app desktop. */ @font-face { font-family: "Noto Sans"; src: url("../fonts/NotoSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Sans"; src: url("../fonts/NotoSans-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Noto Sans"; src: url("../fonts/NotoSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Sans"; src: url("../fonts/NotoSans-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } :root { --bg: #0b0b0c; --bg-rgb: 11, 11, 12; --bg-elevata: #17181a; --bg-elevata-2: #1f2023; --bordo: #2b2d31; --testo: #e7e7e7; --testo-attenuato: #9a9da3; --accento: #a8a834; --accento-forte: #c3c33f; --accento-testo: #16160a; --raggio: 10px; --larghezza-max: 1120px; --font: "Noto Sans", -apple-system, "Segoe UI", Roboto, sans-serif; } /* Tema chiaro: di sistema (prefers-color-scheme) salvo scelta esplicita salvata in localStorage e applicata come data-tema su . */ @media (prefers-color-scheme: light) { :root:not([data-tema="scuro"]) { --bg: #f6f6f3; --bg-rgb: 246, 246, 243; --bg-elevata: #ffffff; --bg-elevata-2: #eeeee7; --bordo: #ddddd2; --testo: #1c1c1a; --testo-attenuato: #5c5d55; --accento: #8a8a1f; --accento-forte: #6f6f18; --accento-testo: #ffffff; } } :root[data-tema="chiaro"] { --bg: #f6f6f3; --bg-rgb: 246, 246, 243; --bg-elevata: #ffffff; --bg-elevata-2: #eeeee7; --bordo: #ddddd2; --testo: #1c1c1a; --testo-attenuato: #5c5d55; --accento: #8a8a1f; --accento-forte: #6f6f18; --accento-testo: #ffffff; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--testo); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accento-forte); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } .contenitore { max-width: var(--larghezza-max); margin: 0 auto; padding: 0 24px; } /* Header */ header.intestazione { border-bottom: 1px solid var(--bordo); background: rgba(var(--bg-rgb), 0.9); position: sticky; top: 0; z-index: 20; backdrop-filter: saturate(140%) blur(6px); } header.intestazione .contenitore { display: flex; align-items: center; justify-content: space-between; height: 64px; flex-wrap: wrap; gap: 8px; } .marchio { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; color: var(--testo); } .marchio:hover { text-decoration: none; color: var(--testo); } .marchio img { width: 32px; height: 32px; border-radius: 8px; } nav.principale { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; row-gap: 6px; } nav.principale a { color: var(--testo-attenuato); font-size: 0.95rem; font-weight: 600; } nav.principale a:hover, nav.principale a.attivo { color: var(--accento-forte); text-decoration: none; } .selettore-tema { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--bordo); background: transparent; color: var(--testo-attenuato); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0; } .selettore-tema:hover { border-color: var(--accento); color: var(--accento-forte); } .selettore-tema .icona-scuro { display: none; } :root[data-tema="chiaro"] .selettore-tema .icona-scuro { display: inline; } :root[data-tema="chiaro"] .selettore-tema .icona-chiaro { display: none; } @media (prefers-color-scheme: light) { :root:not([data-tema="scuro"]) .selettore-tema .icona-scuro { display: inline; } :root:not([data-tema="scuro"]) .selettore-tema .icona-chiaro { display: none; } } /* Bottoni */ .bottone { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--raggio); font-weight: 700; font-size: 0.95rem; border: 1px solid transparent; cursor: pointer; } .bottone:hover { text-decoration: none; } .bottone.primario { background: var(--accento); color: var(--accento-testo); } .bottone.primario:hover { background: var(--accento-forte); } .bottone.secondario { background: transparent; border-color: var(--bordo); color: var(--testo); } .bottone.secondario:hover { border-color: var(--accento); color: var(--accento-forte); } /* Hero */ .eroe { padding: 84px 0 64px; text-align: center; background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(168, 168, 52, 0.14), transparent 70%); } .eroe img.logo { width: 96px; height: 96px; border-radius: 22px; margin: 0 auto 28px; } .eroe h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin: 0 0 16px; letter-spacing: -0.01em; } .eroe h1 .evidenzia { color: var(--accento-forte); } .eroe p.sottotitolo { max-width: 640px; margin: 0 auto 34px; color: var(--testo-attenuato); font-size: 1.1rem; } .eroe .azioni { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* Sezioni generiche */ section { padding: 64px 0; } section.alterna { background: var(--bg-elevata); border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); } .titolo-sezione { text-align: center; max-width: 640px; margin: 0 auto 44px; } .titolo-sezione h2 { font-size: 1.9rem; margin: 0 0 12px; } .titolo-sezione p { color: var(--testo-attenuato); margin: 0; } /* Griglia funzionalita' */ .griglia-funzioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .scheda { background: var(--bg-elevata); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 24px; } section.alterna .scheda { background: var(--bg-elevata-2); } .scheda .icona { width: 40px; height: 40px; border-radius: 9px; background: rgba(168, 168, 52, 0.16); color: var(--accento-forte); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 1.2rem; } .scheda h3 { margin: 0 0 8px; font-size: 1.05rem; } .scheda p { margin: 0; color: var(--testo-attenuato); font-size: 0.95rem; } /* Riferimenti / download */ .griglia-riferimenti { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .riferimento { display: flex; align-items: center; gap: 14px; background: var(--bg-elevata); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 18px; color: var(--testo); } .riferimento:hover { border-color: var(--accento); text-decoration: none; } .riferimento .emoji { font-size: 1.6rem; } .riferimento strong { display: block; font-size: 0.98rem; } .riferimento span { color: var(--testo-attenuato); font-size: 0.85rem; } /* Disclaimer */ .riquadro-avviso { border: 1px solid var(--bordo); border-left: 4px solid var(--accento); background: var(--bg-elevata); border-radius: var(--raggio); padding: 22px 24px; } .riquadro-avviso h3 { margin-top: 0; } .riquadro-avviso p { color: var(--testo-attenuato); margin: 0 0 10px; } .riquadro-avviso p:last-child { margin-bottom: 0; } /* Footer */ footer.piede { border-top: 1px solid var(--bordo); padding: 40px 0; color: var(--testo-attenuato); font-size: 0.9rem; } footer.piede .contenitore { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; } footer.piede a { color: var(--testo-attenuato); } footer.piede a:hover { color: var(--accento-forte); } footer.piede .link-piede { display: flex; gap: 20px; flex-wrap: wrap; } /* ---- Pagina Normative ---- */ .intestazione-pagina { padding: 48px 0 28px; text-align: center; } .intestazione-pagina h1 { margin: 0 0 10px; font-size: 2.1rem; } .intestazione-pagina p { color: var(--testo-attenuato); max-width: 620px; margin: 0 auto; } .pannello-ricerca { background: var(--bg-elevata); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 20px; margin-bottom: 28px; } .riga-ricerca { display: flex; gap: 12px; flex-wrap: wrap; } #campo-ricerca { flex: 1 1 280px; background: var(--bg); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 12px 16px; color: var(--testo); font-family: var(--font); font-size: 1rem; } #campo-ricerca:focus { outline: none; border-color: var(--accento); } .suggerimento-ricerca { margin: 10px 2px 0; font-size: 0.82rem; color: var(--testo-attenuato); } #filtro-categoria, #filtro-anno { background: var(--bg); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 12px 14px; color: var(--testo); font-family: var(--font); font-size: 0.95rem; } .stato-ricerca { color: var(--testo-attenuato); font-size: 0.9rem; margin: 0 0 16px; } .elenco-risultati { display: flex; flex-direction: column; gap: 14px; } .risultato { background: var(--bg-elevata); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 20px 22px; } .risultato .intestazione-risultato { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; } .risultato h3 { margin: 0; font-size: 1.05rem; line-height: 1.4; } .risultato .meta { color: var(--testo-attenuato); font-size: 0.85rem; margin: 4px 0 10px; } .risultato .estratto { color: var(--testo-attenuato); font-size: 0.92rem; margin: 0 0 12px; } .etichetta { display: inline-block; background: rgba(168, 168, 52, 0.16); color: var(--accento-forte); border-radius: 6px; padding: 3px 9px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; } .tag-argomenti { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .tag-argomenti span { background: var(--bg-elevata-2); border: 1px solid var(--bordo); color: var(--testo-attenuato); border-radius: 6px; padding: 2px 8px; font-size: 0.78rem; } .azioni-risultato { display: flex; gap: 18px; font-size: 0.88rem; } .estratti-testo:not(:empty) { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--bordo); } .etichetta-estratti { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--testo-attenuato); margin-bottom: 8px; } .estratto-testo { margin: 0 0 8px; font-size: 0.88rem; color: var(--testo-attenuato); line-height: 1.55; } .estratto-testo:last-child { margin-bottom: 0; } .estratto-testo mark { background: var(--accento); color: var(--accento-testo); padding: 1px 3px; border-radius: 3px; font-weight: 700; } .avviso-fonte { margin-top: 28px; color: var(--testo-attenuato); font-size: 0.85rem; text-align: center; } @media (max-width: 640px) { .eroe { padding: 56px 0 40px; } section { padding: 44px 0; } header.intestazione .contenitore { height: auto; padding-top: 12px; padding-bottom: 12px; } nav.principale { justify-content: center; width: 100%; gap: 14px; } }