/* ============================================================================ iRendity — Design System / Tokens Single source of truth per palette, tipografia, spacing, ombre, motion. Caricato per primo da templates/base.html: tutto il resto eredita da qui. Brand: "iRendity Brand Guidelines v1.0 · 2026" — verde come colore dominante, Ink per aree istituzionali/premium, Gold solo per dettagli di valore (<5%). Naming: - Token primitivi: --neutral-500, --accent-600, --gold-500 (palette grezza) - Token semantici: --color-text, --color-surface, --color-accent (uso) - Alias legacy: --primary-color, --space-md, ... (back-compat) - Alias brand: --color-ink, --color-beacon, --color-rendita, ... Regola: i componenti dovrebbero usare prima i token semantici, poi i primitivi, mai valori hardcoded. ============================================================================ */ :root { /* ====================== PALETTE UFFICIALE (Brand Guidelines v1.0) ====== */ --color-ink: #0A1512; /* fondi scuri, sidebar/navbar premium, footer */ --color-beacon: #5CE6A6; /* accento luminoso, dot della "i", highlight — usare con parsimonia */ --color-rendita: #3ECF8E; /* verde primario — CTA, grafici, rendimento */ --color-rendita-mid: #34A574; /* hover, barre intermedie, bordi attivi */ --color-rendita-deep:#1E7A57; /* verde profondo — gradienti, testi/icone secondarie su fondi chiari */ --color-paper: #F2F1EA; /* fondo chiaro principale, day mode */ --color-muted: #6B6659; /* testo secondario, label, metadati */ --color-gold: #C9A24B; /* accento premium — solo dettagli di valore, mai > 5% UI */ --color-gold-print: #B8912F; /* export/stampa, riferimenti premium */ /* ====================== PALETTE — PRIMITIVI ============================ */ /* Ink — fondi scuri istituzionali (ex "Brand navy") */ --primary-900: #0A1512; --primary-800: #102019; --primary-700: #16281F; --primary-600: #1D3327; /* Accent — Rendita Green (azione, dato, CTA) Il verde è il colore dominante del brand: sostituisce il blu "fintech generico". */ --accent-700: #1E7A57; /* hover, pressed — Rendita Deep */ --accent-600: #3ECF8E; /* default — accent ufficiale, Rendita Primary */ --accent-500: #5CE6A6; /* lighter, decorativo — Beacon */ --accent-100: #DCF5E9; /* background soft */ --accent-50: #EFFAF4; /* background sottilissimo */ /* Trust mark — Gold (riservato a dettagli premium, MAI colore primario) */ --gold-700: #8A6D28; --gold-600: #B8912F; --gold-500: #C9A24B; --gold-100: #F0E4C8; --gold-50: #FAF5E8; /* Verified — Verde (badge canone verificato, conferme) — unificato con Rendita */ --verified-700: #1E7A57; --verified-600: #34A574; --verified-500: #3ECF8E; --verified-100: #DCF5E9; /* Warning */ --warning-700: #B45309; --warning-500: #F59E0B; --warning-100: #FEF3C7; /* Danger */ --danger-700: #B91C1C; --danger-500: #DC2626; --danger-100: #FEE2E2; /* Info (per blocchi informativi neutri) */ --info-700: #1E7A57; --info-500: #3ECF8E; --info-100: #DCF5E9; /* Neutri (slate) — scala 0…900 */ --neutral-0: #FFFFFF; --neutral-50: #F2F1EA; --neutral-100: #F2F1EA; --neutral-200: #E8E8E1; --neutral-300: #D4D4CE; --neutral-400: #9FA39D; --neutral-500: #6E746F; --neutral-600: #4E5652; --neutral-700: #3A423E; --neutral-800: #102019; --neutral-900: #0A1512; /* ====================== TOKEN SEMANTICI ================================ */ /* Testo */ --color-text: var(--neutral-800); /* body */ --color-text-strong: var(--primary-900); /* titoli, dato */ --color-text-muted: var(--color-muted); /* meta, secondario — Muted #6B6659 */ --color-text-subtle: var(--neutral-400); /* hint, placeholder */ --color-text-inverse: var(--neutral-0); /* su sfondi scuri */ --color-text-link: var(--accent-600); --color-text-link-hover:var(--accent-700); /* Superfici / sfondi */ --color-bg: var(--color-paper); /* page — Paper #F2F1EA */ --color-bg-subtle: var(--neutral-50); /* section soft */ --color-bg-muted: var(--neutral-100); /* section più contrastata */ --color-bg-inverse: var(--primary-900); /* footer, hero scuri */ --color-surface: var(--neutral-0); /* card */ --color-surface-raised: var(--neutral-0); /* card elevata (con shadow-lg) */ --color-surface-sunken: var(--neutral-50); /* sezioni interne incassate */ /* Bordi e linee */ --color-hairline: #F2F1EA; /* linea sottile, sub-200 */ --color-border: var(--neutral-200); /* bordo standard */ --color-border-strong: var(--neutral-300); /* bordo enfatizzato */ --color-border-focus: var(--accent-600); /* Brand & azione */ --color-brand: var(--primary-900); --color-accent: var(--accent-600); --color-accent-hover: var(--accent-700); --color-accent-soft: var(--accent-50); --color-accent-muted: var(--accent-100); /* Stati */ --color-success: var(--verified-500); --color-success-soft: var(--verified-100); --color-warning: var(--warning-500); --color-warning-soft: var(--warning-100); --color-danger: var(--danger-500); --color-danger-soft: var(--danger-100); --color-info: var(--info-500); --color-info-soft: var(--info-100); /* Trust marks (specifici iRendity) */ --color-trust: var(--gold-500); --color-trust-strong: var(--gold-600); --color-trust-soft: var(--gold-100); --color-verified: var(--verified-500); --color-verified-strong:var(--verified-600); --color-verified-soft: var(--verified-100); /* Focus ring (accessibilità) */ --color-focus-ring: rgba(62, 207, 142, 0.35); /* ====================== TIPOGRAFIA ===================================== */ /* Font stack (iRendity Brand Guidelines v1.0) */ --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: 'Space Grotesk', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', SFMono-Regular, Menlo, Consolas, monospace; --font-logotype:'Hanken Grotesk', 'Space Grotesk', sans-serif; /* SOLO per il marchio testuale */ /* Numerico/KPI: usa --font-mono con tabular-nums attivati a livello di componente */ /* Scala tipografica (px / line-height — modular ratio ~1.2, sobria) */ --text-2xs: 11px; --lh-2xs: 16px; --text-xs: 12px; --lh-xs: 18px; --text-sm: 14px; --lh-sm: 20px; --text-md: 16px; --lh-md: 24px; --text-lg: 18px; --lh-lg: 28px; --text-xl: 20px; --lh-xl: 28px; --text-2xl: 24px; --lh-2xl: 32px; --text-3xl: 30px; --lh-3xl: 38px; --text-4xl: 36px; --lh-4xl: 44px; --text-5xl: 48px; --lh-5xl: 56px; --text-6xl: 60px; --lh-6xl: 68px; /* Pesi */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Letter-spacing (per titoli di display) */ --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-allcaps: 0.06em; /* ====================== SPACING (8pt base) ============================= */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 96px; --space-12: 128px; /* ====================== RADII ========================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* ====================== ELEVATION (ombre sobrie, slate-based) ========== */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.04); --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06); --shadow-2xl: 0 32px 64px rgba(15, 23, 42, 0.16), 0 12px 24px rgba(15, 23, 42, 0.08); /* Ombre semantiche per contesti specifici */ --shadow-card: var(--shadow-sm); --shadow-card-hover: var(--shadow-lg); --shadow-popover: var(--shadow-lg); --shadow-modal: var(--shadow-2xl); --shadow-cta: 0 2px 8px rgba(62, 207, 142, 0.22), 0 1px 2px rgba(62, 207, 142, 0.18); --shadow-cta-hover: 0 6px 18px rgba(62, 207, 142, 0.32), 0 2px 6px rgba(62, 207, 142, 0.20); --shadow-focus-ring: 0 0 0 4px var(--color-focus-ring); --shadow-glow: 0 0 40px rgba(62, 207, 142, 0.18); /* ====================== MOTION ========================================= */ --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --easing-decelerate: cubic-bezier(0, 0, 0.2, 1); --easing-accelerate: cubic-bezier(0.4, 0, 1, 1); --duration-instant: 0.1s; --duration-fast: 0.15s; --duration-base: 0.25s; --duration-slow: 0.4s; --duration-slower: 0.6s; /* ====================== Z-INDEX ======================================== */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-overlay: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; /* ====================== LAYOUT ========================================= */ --container-narrow: 960px; --container-base: 1240px; --container-wide: 1440px; --container-padding: var(--space-6); /* Header height (riferimento per offset dei contenuti sotto la navbar fixed) */ --header-height: 72px; /* ============================================================================ ALIAS LEGACY — Back-compat con i CSS esistenti. Non usare questi nomi nei nuovi componenti: preferire i token semantici sopra. ============================================================================ */ /* Palette legacy (base.html inline + main.css + componenti) */ --primary-color: var(--primary-900); --secondary-color: var(--primary-800); --accent-color: var(--accent-600); --accent-hover: var(--accent-700); --accent-glow: rgba(62, 207, 142, 0.22); --accent-light: var(--accent-100); --gold: var(--gold-500); --gold-light: var(--gold-100); --text-color: var(--color-text); --text-muted: var(--color-text-muted); --text-light: var(--color-text-subtle); --white: var(--neutral-0); --light-gray: var(--neutral-50); --medium-gray: var(--neutral-200); --dark-gray: var(--neutral-700); --border-color: var(--color-border); --success: var(--verified-500); --warning: var(--warning-500); /* Tipografia legacy (base.html inline) */ --font-family: var(--font-sans); --font-family-primary: var(--font-display); --font-family-secondary: var(--font-sans); --font-size-small: var(--text-sm); --font-size-base: var(--text-md); --font-size-large: var(--text-lg); --font-size-xl: var(--text-xl); --font-size-xxl: var(--text-2xl); --font-size-3xl: var(--text-3xl); --font-size-4xl: var(--text-4xl); --font-size-5xl: var(--text-5xl); /* Spacing legacy (base.html inline) */ --spacing-xs: var(--space-1); --spacing-sm: var(--space-2); --spacing-md: var(--space-4); --spacing-lg: var(--space-6); --spacing-xl: var(--space-7); --spacing-xxl: var(--space-10); --spacing-3xl: var(--space-11); /* Spacing legacy (base-variables.css → eventuali consumer) */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-6); --space-xl: var(--space-7); --space-2xl: var(--space-9); /* Border radius legacy */ --border-radius: var(--radius-md); --border-radius-lg: var(--radius-lg); --border-radius-xl: var(--radius-xl); --border-radius-full: var(--radius-full); --radius-round: var(--radius-full); /* Transitions legacy */ --transition-fast: var(--duration-fast) var(--easing-standard); --transition-base: var(--duration-base) var(--easing-standard); --transition-slow: var(--duration-slow) var(--easing-standard); --transition-short: var(--duration-fast) var(--easing-standard); --transition-medium: var(--duration-base) var(--easing-standard); --transition-long: var(--duration-slow) var(--easing-standard); /* Z-index legacy */ --z-index-dropdown: var(--z-dropdown); --z-index-sticky: var(--z-sticky); --z-index-fixed: var(--z-fixed); --z-index-modal-backdrop: var(--z-overlay); --z-index-modal: var(--z-modal); --z-index-popover: var(--z-popover); --z-index-tooltip: var(--z-tooltip); /* Container legacy */ --container-sm: 540px; --container-md: 720px; --container-lg: 960px; --container-xl: var(--container-base); --container-xxl: var(--container-wide); color-scheme: light; } /* ============================================================================ DARK MODE — attivato da html[data-theme="dark"] (mai da media query da solo: la scelta è dell'utente; "sistema" viene risolto dal theme-boot script). Regola: si ridefiniscono SOLO token semantici, i soft -50/-100 e le ombre. I primitivi (neutral-0, accent-600, ...) NON cambiano: --white resta bianco, --color-text-inverse resta chiaro, i CTA verdi mantengono il loro testo. ============================================================================ */ html[data-theme="dark"] { color-scheme: dark; /* Soft backgrounds ricalibrati per fondo scuro (chip, badge, alert) */ --accent-100: #17382A; --accent-50: #11291F; --gold-100: #33290F; --gold-50: #241D0C; --verified-100: #17382A; --warning-100: #38290E; --danger-100: #391616; --info-100: #17382A; /* Testo */ --color-text: #DCE4DE; --color-text-strong: #F2F6F3; --color-text-muted: #9AA89F; --color-text-subtle: #74827A; --color-text-link: #4ADB9A; --color-text-link-hover: #5CE6A6; /* Superfici / sfondi — Ink (#0A1512) come fondo pagina: è il fondo scuro istituzionale del brand, il dark mode è "iRendity premium", non un grigio. */ --color-bg: #0A1512; --color-bg-subtle: #0D1A15; --color-bg-muted: #102019; --color-surface: #12211A; --color-surface-raised: #16281F; --color-surface-sunken: #0D1A15; /* --color-bg-inverse resta Ink: i blocchi "scuri" (footer, hero) restano scuri */ /* Bordi e linee */ --color-hairline: #14241D; --color-border: #23372C; --color-border-strong: #2F4A3B; /* Azione: hover più luminoso (su scuro l'hover deve salire, non scendere) */ --color-accent-hover: var(--accent-500); --color-accent-soft: #11291F; --color-accent-muted: #17382A; /* Focus ring più visibile su scuro */ --color-focus-ring: rgba(92, 230, 166, 0.4); /* Ombre: su fondo scuro servono più dense per staccare le superfici */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.4); --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.6), 0 12px 24px rgba(0, 0, 0, 0.45); } /* ============================================================================ Helpers globali tipografici / a11y — minimi e non invasivi. Tutto il resto resta gestito dai CSS dei componenti. ============================================================================ */ /* Numeric tabular per dati finanziari (KPI, prezzi, ROI). I componenti che mostrano numeri possono optare in con questa classe. */ .tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* All-caps eyebrow (etichette categoria, sezione, livello) */ .eyebrow { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-allcaps); text-transform: uppercase; color: var(--color-text-muted); } /* Focus ring uniforme — applicato a tutti gli elementi interattivi via :focus-visible */ :where(a, button, [role="button"], input, select, textarea, summary):focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-radius: var(--radius-sm); } /* Rispetto preferenze motion ridotte (a11y) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }