/* I webfont stanno in assets/fonts.css, linkato nel di ogni pagina prima di questo file. Qui non c'e' piu' l'@import verso fonts.googleapis.com: da dentro un CSS il blocco preventivo di Cookiebot non lo vedeva, quindi l'IP di ogni visitatore arrivava a Google prima del consenso. fonts.css lo si rigenera con scripts/fetch_fonts.py. */ :root { /* Base neutrals — monochrome ramp */ --gc-ink: #0b0b0c; --gc-ink-800: #26262b; --gc-slate-600: #3f3f46; --gc-slate-500: #6b6b73; --gc-slate-400: #9a9aa2; --gc-line-300: #d4d4d8; --gc-line-200: #e6e6e9; --gc-paper: #fafafa; --gc-base: #ffffff; /* Semantic aliases */ --color-text: var(--gc-ink); --color-text-strong: var(--gc-ink-800); --color-text-muted: var(--gc-slate-500); --color-text-faint: var(--gc-slate-400); --color-bg: var(--gc-base); --color-surface: var(--gc-paper); --color-panel: #f4f4f5; --color-border: var(--gc-line-200); --color-border-strong: var(--gc-line-300); --color-action: var(--gc-ink); --color-action-hover: var(--gc-ink-800); --color-on-action: var(--gc-base); --color-focus-ring: color-mix(in srgb, var(--gc-ink) 22%, transparent); /* Accent — single signal color */ --gc-accent: #2f4bd8; --gc-accent-hover: #2439a8; --color-accent: var(--gc-accent); --color-accent-hover: var(--gc-accent-hover); --color-on-accent: #ffffff; --color-accent-soft: color-mix(in srgb, var(--gc-accent) 10%, #fff); /* Status — compliance signals (muted, not candy) */ --gc-success: #1f7a4d; /* Compliant / OK */ --gc-warning: #a86a12; /* At risk / Attention */ --gc-danger: #c0392b; /* Overdue / Failed */ --gc-info: #2f4bd8; /* Pending / In review */ --color-success: var(--gc-success); --color-success-soft: color-mix(in srgb, var(--gc-success) 12%, #fff); --color-warning: var(--gc-warning); --color-warning-soft: color-mix(in srgb, var(--gc-warning) 14%, #fff); --color-danger: var(--gc-danger); --color-danger-soft: color-mix(in srgb, var(--gc-danger) 11%, #fff); --color-info: var(--gc-info); --color-info-soft: color-mix(in srgb, var(--gc-info) 10%, #fff); /* Inverse (dark surfaces) */ --color-inverse-bg: var(--gc-ink); --color-inverse-text: var(--gc-paper); } :root { --font-display: "Newsreader", Georgia, serif; /* headings, editorial */ --font-ui: "Space Grotesk", system-ui, sans-serif; /* body, interface */ --font-mono: "Space Mono", ui-monospace, monospace; /* labels, data, spec */ /* Type scale (px) */ --text-display: 76px; --text-h1: 48px; --text-h2: 32px; --text-h3: 22px; --text-body: 16px; --text-small: 14px; --text-caption: 12px; --leading-tight: 1.1; --leading-snug: 1.25; --leading-body: 1.6; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-label: 0.1em; } :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 88px; --space-10: 120px; --container-max: 1180px; --gutter: 40px; } :root { --radius-sm: 2px; --radius: 3px; /* default — crisp, technical */ --radius-lg: 6px; --radius-pill: 999px; } :root { /* The system leans on hairline borders, not shadows. Use sparingly. */ --shadow-none: none; --shadow-focus: 0 0 0 3px var(--color-focus-ring); --shadow-pop: 0 8px 30px -12px rgba(11,11,12,0.18); --border-hairline: 1px solid var(--color-border); } :root { /* Motion — durations */ --dur-1: 120ms; /* @kind other */ --dur-2: 180ms; /* @kind other */ --dur-3: 260ms; /* @kind other */ --dur-4: 600ms; /* @kind other */ /* Motion — easing */ --ease-standard: cubic-bezier(.2, 0, 0, 1); /* @kind other */ --ease-out: cubic-bezier(0, 0, 0, 1); /* @kind other */ --ease-in: cubic-bezier(.4, 0, 1, 1); /* @kind other */ } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ---- base ---- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:#fff;color:var(--color-text);font-family:var(--font-ui);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased} [hidden]{display:none!important} img{max-width:100%} ::selection{background:#0b0b0c;color:#fff} a{color:var(--color-text);text-decoration:none;border-bottom:1px solid var(--color-border-strong)} a:hover{color:var(--color-accent);border-bottom-color:var(--color-accent)} a.nl,a.btn{border-bottom:0;color:inherit} a.nl:hover{border-bottom:0} .btn:hover{background:var(--color-action-hover);border-color:var(--color-action-hover)} .btn-secondary:hover{background:var(--color-panel);border-color:var(--color-border-strong);color:var(--color-text)} .skip{position:absolute;left:-9999px;top:0;background:#0b0b0c;color:#fff;padding:10px 16px;z-index:200} .skip:focus{left:8px;top:8px} :focus-visible{outline:2px solid var(--color-accent);outline-offset:2px} /* ---- nav responsive ---- */ .nav-wide{display:contents} .nav-burger{display:none} @media (max-width:939px){.nav-wide{display:none}.nav-burger{display:block}} .hv0:hover{color: var(--color-accent) !important} .hv1:hover{opacity: 0.6 !important} .hv2:hover{color: var(--color-text) !important} .hv3:hover{background: #e6e6e9 !important;border-color: #e6e6e9 !important} .hv4:hover{color: #ffffff !important} .hv5:hover{background: #22222a !important;border-color: #22222a !important}