/* ============================================================= SETA LABS — DESIGN SYSTEM LANDING 01. TOKENS + RESET + TIPOGRAFIA Palette campionata dai PNG del brand (vedi brand-spec.md). ============================================================= */ :root { /* --- brand (immutabili, dal logo) ------------------------- */ --seta-notte: #0A0E14; --seta-seta: #F2F3F5; --seta-blu: #7D9BE0; --seta-blu-fondo: #6D8BD6; --seta-blu-chiaro: #5B7CC9; /* brand: campiture e testo grande su chiaro */ --seta-blu-testo: #4A69B8; /* derivato in oklch: testo piccolo su chiaro, 4,9:1 */ --seta-bronzo: #B0906A; --seta-grigio: #8B93A3; /* --- semantici, tema notte (default) ---------------------- */ --bg: var(--seta-notte); --surface: #12151B; --surface-2: #1C2330; --fg: var(--seta-seta); --muted: var(--seta-grigio); --border: rgba(242, 243, 245, 0.10); --border-forte:rgba(242, 243, 245, 0.22); --accent: var(--seta-blu); --accent-fg: #0A0E14; --accent-soft: rgba(125, 155, 224, 0.14); --ornato: var(--seta-bronzo); --ornato-soft: rgba(176, 144, 106, 0.16); /* stati: derivati in oklch dalla base blu, mai colori random */ --ok: oklch(72% 0.10 165); --attesa: oklch(78% 0.09 85); --errore: oklch(66% 0.14 25); --ok-soft: color-mix(in oklab, var(--ok) 14%, transparent); --attesa-soft: color-mix(in oklab, var(--attesa) 14%, transparent); --errore-soft: color-mix(in oklab, var(--errore) 16%, transparent); /* --- tipografia ------------------------------------------- */ --font-display: 'Archivo', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-ui: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --wdth-display: 118; /* asse di larghezza: i titoli sono espansi */ --t-display: clamp(3rem, 7vw, 6rem); --t-h1: clamp(2.1rem, 4vw, 3.25rem); --t-h2: clamp(1.75rem, 2.8vw, 2.4rem); --t-h3: 1.375rem; --t-lead: clamp(1.0625rem, 1.35vw, 1.1875rem); --t-body: 1.0625rem; --t-small: 0.875rem; --t-caption: 0.78125rem; --w-read: 400; /* corpo testo */ --w-mid: 500; /* label, UI, nav */ --w-say: 600; /* titoli, bottoni */ /* --- spazio: scala a 4px ---------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px; /* --- forma ------------------------------------------------ */ --r-sm: 2px; --r-md: 6px; --r-lg: 10px; --r-xl: 18px; --r-pill: 999px; /* --- movimento -------------------------------------------- */ --e-standard: cubic-bezier(0.2, 0, 0, 1); --e-entrata: cubic-bezier(0.16, 1, 0.3, 1); --e-uscita: cubic-bezier(0.4, 0, 1, 1); --d-rapido: 120ms; --d-medio: 220ms; --d-ampio: 420ms; /* --- layout ----------------------------------------------- */ --max: 1200px; --gutter: clamp(20px, 5vw, 56px); } /* --- tema giorno -------------------------------------------- Stesso brand, superfici invertite. Il blu passa alla variante #5B7CC9 perché #7D9BE0 su bianco è sotto 4.5:1. */ [data-theme='giorno'] { --bg: #F5F4F1; /* campionato dal fondo di logo-light.png */ --surface: #FFFFFF; --surface-2: #EAE9E4; --fg: #0A0E14; --muted: #5C5F63; --border: rgba(10, 14, 20, 0.13); --border-forte:rgba(10, 14, 20, 0.28); --accent: var(--seta-blu-testo); --accent-fg: #FFFFFF; --accent-soft: rgba(74, 105, 184, 0.12); --ornato: #8A6D48; --ornato-soft: rgba(138, 109, 72, 0.14); --ok: oklch(52% 0.12 165); --attesa: oklch(56% 0.12 75); --errore: oklch(52% 0.18 25); } /* ============================================================= RESET ============================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--fg); font-family: var(--font-ui); font-size: var(--t-body); font-weight: var(--w-read); line-height: 1.6; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--d-medio) var(--e-standard), color var(--d-medio) var(--e-standard); } /* height:auto è obbligatorio: gli del marchio portano gli attributi width/height nativi e senza questo si deformano appena il CSS fissa la sola larghezza. È il bug che aveva schiacciato tutti i loghi. */ img { display: block; max-width: 100%; height: auto; } svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } ul { list-style: none; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ============================================================= TIPOGRAFIA ============================================================= */ .display { font-family: var(--font-display); font-variation-settings: 'wdth' var(--wdth-display); font-size: var(--t-display); font-weight: 600; line-height: 0.92; letter-spacing: -0.035em; text-wrap: balance; } h1, .h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 400; line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; } h2, .h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 400; line-height: 1.1; letter-spacing: -0.022em; } h3, .h3 { font-family: var(--font-ui); font-size: var(--t-h3); font-weight: var(--w-say); line-height: 1.25; letter-spacing: -0.01em; } .lead { font-size: var(--t-lead); line-height: 1.55; color: var(--muted); max-width: 62ch; text-wrap: pretty; } p { max-width: 68ch; text-wrap: pretty; } .small { font-size: var(--t-small); line-height: 1.5; letter-spacing: 0.01em; } .occhiello { font-size: var(--t-caption); font-weight: var(--w-mid); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ornato); } .muted { color: var(--muted); }