/* ========================================================================== RB Service - Design tokens Palette derivata dal logo ufficiale: blu #3070bc, antracite #3e3e3e. Unico punto in cui si definiscono colori, tipografia, spaziature, ombre. ========================================================================== */ :root { /* --- Colori del logo --- */ --brand: #3070bc; /* blu logo, uso decorativo e sfondi */ --brand-ink: #2a63a8; /* blu accessibile per testo/link su bianco (AA) */ --brand-deep: #1f4b80; --brand-soft: #eaf2fa; --charcoal: #3e3e3e; /* antracite logo */ --charcoal-deep:#2b2d30; /* --- Neutri --- */ --ink: #24272b; --ink-soft: #52585f; --ink-faint: #7d848c; --line: #e3e6ea; --line-soft: #eef0f3; --bg: #ffffff; --bg-alt: #f5f7f9; --bg-dark: var(--charcoal-deep); --on-dark: #f2f4f6; --on-dark-soft: #b3b9c0; /* --- Accento: default neutro (home e pagine trasversali) = blu del logo --- */ --accent: var(--brand-ink); --accent-strong: var(--brand-deep); --accent-soft: var(--brand-soft); --accent-on: #ffffff; /* --- Colori identificativi delle due aree --- */ --negozio: #c05621; /* arancione bruciato, caldo, complementare al blu */ --negozio-strong: #97400f; --negozio-soft: #fdf1e9; --industria: #2a63a8; --industria-strong: #1f4b80; --industria-soft: #eaf2fa; --loxone: #4c8a1e; /* verde Loxone, versione accessibile su bianco */ --loxone-strong: #386817; --loxone-soft: #eef6e6; --progetto: #6b46a8; /* viola: progettazione hardware e software */ --progetto-strong: #533383; --progetto-soft: #f1ecf9; /* --- Stati --- */ --ok: #1a7f4b; --warn: #b26a00; --err: #b3261e; /* --- Tipografia (system stack, nessun font da scaricare) --- */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1.0625rem; --fs-md: 1.1875rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.125rem; --fs-3xl: 2.75rem; --fs-4xl: 3.25rem; --lh-tight: 1.2; --lh-snug: 1.35; --lh-base: 1.65; /* --- Spaziature --- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 5.5rem; --sp-10: 7rem; /* --- Layout --- */ --wrap: 1160px; --wrap-narrow: 780px; --header-h: 76px; /* --- Forme --- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(36,39,43,.06), 0 2px 6px rgba(36,39,43,.05); --shadow-md: 0 4px 12px rgba(36,39,43,.08), 0 12px 28px rgba(36,39,43,.07); --shadow-lg: 0 12px 32px rgba(36,39,43,.12), 0 28px 60px rgba(36,39,43,.10); --ease: cubic-bezier(.2,.7,.3,1); } /* --- Tema d'area: -------------------- Le pagine trasversali non impostano data-area e restano sul blu del logo. */ [data-area="negozio"] { --accent: var(--negozio); --accent-strong: var(--negozio-strong); --accent-soft: var(--negozio-soft); } [data-area="industria"] { --accent: var(--industria); --accent-strong: var(--industria-strong); --accent-soft: var(--industria-soft); } [data-area="loxone"] { --accent: var(--loxone); --accent-strong: var(--loxone-strong); --accent-soft: var(--loxone-soft); } [data-area="progettazione"] { --accent: var(--progetto); --accent-strong: var(--progetto-strong); --accent-soft: var(--progetto-soft); }