/* ========================================================================= Clanksy Design System — Foundations v2 (Service-as-software) Colori · Tipografia · Spaziatura · Radii · Ombre · Motion -------------------------------------------------------------------------- Direzione: minimale, elegante, professionale. Quasi monocromatica, inchiostro freddo su carta fredda, un solo accento ardesia. Mai bianco puro, mai nero puro. Niente gradienti, niente glow, niente em-dash nei testi (regola brand: virgola/punto/due punti). -------------------------------------------------------------------------- Webfont caricati via nell' di ogni pagina (piu' veloce di @import e compatibile con la CSP: style-src fonts.googleapis.com, font-src fonts.gstatic.com). Famiglie: Schibsted Grotesk (display), Geist (body/UI), Geist Mono (tecnico, eyebrow, numeri). -------------------------------------------------------------------------- Tema CANONICO del brand CLANKSY (azienda): base tecnica condivisa col design-system Krinia (design-system/tokens/*.json), palette propria (ardesia freddo). I due brand condividono la struttura (semantic, scala 4/8, radii), palette distinte. Convergenza design-system 2026-06-15: niente bianco puro. ========================================================================= */ :root { /* --------------------------------------------------------------------- COLOR — Neutrals (carta fredda, inchiostro quasi nero) --------------------------------------------------------------------- */ --paper: #F7F7F5; /* sfondo dominante */ --paper-2: #EFEFEC; /* banda alternata / superficie incassata */ --paper-3: #E6E6E2; /* beige freddo piu' profondo */ --surface: #FDFDFC; /* card, fogli (off-white freddo, mai bianco puro) */ --surface-2: #FCFCFB; /* superfici annidate, input */ --ink: #0C0D0F; /* testo primario, quasi nero */ --ink-2: #41454C; /* testo secondario */ --ink-3: #62676E; /* testo terziario, didascalie (AA >=4.5:1 su paper e paper-2) */ --ink-4: #A7ABB2; /* placeholder, disabilitato */ --line: #E5E5E1; /* bordo di default */ --line-2: #D2D2CC; /* bordo piu' marcato */ /* --------------------------------------------------------------------- COLOR — Accento (ardesia muta, unico colore di brand) --------------------------------------------------------------------- */ --accent: #5A6B96; /* ardesia/cobalto muto, core */ --accent-hover: #4C5C84; --accent-press: #404E72; --accent-soft: #ECEFF6; /* tinta di sfondo */ --accent-line: #D3D9E8; --accent-fg: #FFFFFF; /* testo sopra l'accento */ /* --------------------------------------------------------------------- COLOR — Superfici scure (bande inverse) — carbone morbido, non nero --------------------------------------------------------------------- */ --night: #15171B; --night-2: #1D2025; --night-3: #262A31; --night-line: #343842; --on-night: #F1F2F0; --on-night-2: #ADB2BA; --on-night-3: #8E939B; /* AA su night e night-3 */ --accent-on-night: #9FB0D6; /* accento schiarito per fondi scuri (contrasto AA) */ /* --------------------------------------------------------------------- COLOR — Semantici --------------------------------------------------------------------- */ --success: #236A4C; /* AA su success-bg */ --success-bg: #E4F1EA; --danger: #9A3024; --danger-bg: #F6DDD8; /* --------------------------------------------------------------------- COLOR — Ruoli (usare questi nei componenti) --------------------------------------------------------------------- */ --bg: var(--paper); --bg-elevated: var(--surface); --bg-sunken: var(--paper-2); --fg: var(--ink); --fg-muted: var(--ink-2); --fg-subtle: var(--ink-3); --fg-disabled: var(--ink-4); --border: var(--line); --focus-ring: var(--accent); /* Link — alias compat per le pagine legali (usano --link) e i contenuti */ --link: var(--accent); --link-hover: var(--accent-hover); /* --------------------------------------------------------------------- TYPOGRAPHY — Famiglie --------------------------------------------------------------------- */ --font-display: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* --------------------------------------------------------------------- TYPOGRAPHY — Scala (rem, root 16px) --------------------------------------------------------------------- */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.8125rem; /* 13 */ --fs-base: 1rem; /* 16 */ --fs-md: 1.125rem; /* 18 */ --fs-lg: 1.3125rem; /* 21 */ --fs-xl: 1.625rem; /* 26 */ --fs-2xl: 2.125rem; /* 34 */ --fs-3xl: 2.875rem; /* 46 */ --fs-4xl: 3.75rem; /* 60 */ --fs-5xl: 5rem; /* 80 */ --lh-tight: 1.04; --lh-snug: 1.16; --lh-normal: 1.5; --lh-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-tighter: -0.035em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-eyebrow: 0.16em; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* --------------------------------------------------------------------- SPACING — base 4px --------------------------------------------------------------------- */ --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: 96px; --space-10: 128px; --space-11: 160px; /* --------------------------------------------------------------------- RADII --------------------------------------------------------------------- */ --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-full: 999px; /* --------------------------------------------------------------------- SHADOW — contenute, mai drammatiche --------------------------------------------------------------------- */ --shadow-1: 0 1px 2px rgb(12 13 15 / 0.05); --shadow-2: 0 6px 20px -6px rgb(12 13 15 / 0.10), 0 1px 2px rgb(12 13 15 / 0.04); --shadow-3: 0 20px 48px -16px rgb(12 13 15 / 0.16), 0 2px 6px rgb(12 13 15 / 0.05); /* --------------------------------------------------------------------- MOTION --------------------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.68, 0, 1); --ease-out: cubic-bezier(0, 0.55, 0.45, 1); --dur-micro: 130ms; --dur-base: 220ms; --dur-wide: 360ms; /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ --container: 1180px; --container-narrow: 760px; --nav-h: 68px; } /* ========================================================================= BASE ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-sans); font-size: 16px; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; } body { margin: 0; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg); background: var(--bg); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--fg); margin: 0 0 0.4em; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); text-wrap: balance; } h1 { font-size: var(--fs-4xl); line-height: 1.02; } h2 { font-size: var(--fs-3xl); line-height: 1.06; } h3 { font-size: var(--fs-2xl); line-height: 1.12; } h4 { font-size: var(--fs-xl); line-height: 1.22; } h5 { font-size: var(--fs-lg); font-family: var(--font-sans); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-normal); line-height: 1.3; } h6 { font-size: var(--fs-sm); font-family: var(--font-mono); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-subtle); } p { margin: 0 0 1em; line-height: var(--lh-normal); text-wrap: pretty; max-width: 66ch; } a { color: var(--link); text-decoration: none; transition: color var(--dur-micro) var(--ease); } a:hover { color: var(--link-hover); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } img { display: block; max-width: 100%; } code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; } code { background: var(--paper-2); padding: 0.12em 0.36em; border-radius: var(--r-xs); color: var(--fg-muted); } hr { border: none; border-top: 1px solid var(--border); margin: var(--space-6) 0; } small { font-size: var(--fs-sm); color: var(--fg-subtle); } /* Eyebrow / micro-label (mono, con trattino guida a sinistra) */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-subtle); } .eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--ink-4); } /* Focus ring — sempre visibile, mai rimosso */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--r-sm); } ::selection { background: var(--accent); color: #fff; }