/** * sf-design-tokens.css — la fonte unica dello stile di Simracing.Fan * * Prima di questo file ogni componente si dichiarava la propria palette, due * volte (chiaro + scuro), con nomi diversi per le stesse idee: --sf-color-bg, * --sf-bg-page e --sfc-bg-page erano la stessa cosa in tre posti. Cambiarne * uno cambiava un pezzo di sito. Nessuno li cambiava tutti e tre. * * REGOLA: un colore, una spaziatura o un raggio si definisce QUI e in nessun * altro posto. Nei componenti si usa var(--sf-…), mai un valore letterale. * * I nomi --sfc-* sono ALIAS dei canonici, tenuti per non riscrivere le ~5.200 * righe di CSS che li usano già. Le custom properties si risolvono al momento * dell'uso: ridefinire il canonico nel dark aggiorna anche l'alias, da solo. * * Colori del brand: dashboard NovaSTUDIO → Visual · Immagini → Asset grafici. * Font: League Spartan + Roboto + Alata (decisione Fabio, 2026-08-07). * * @since 2026-08-07 — Design System F1 */ :root { /* --------------------------------------------------------------- BRAND — non si toccano senza cambiare il brand kit in dashboard --------------------------------------------------------------- */ --sf-brand-red: #E10600; --sf-brand-red-hover: #B40500; --sf-brand-blue: #003DA5; --sf-brand-blue-hover: #002d7a; /* Scala grigi ufficiale */ --sf-brand-gray-900: #1C1C1C; --sf-brand-gray-600: #5B5B5B; --sf-brand-gray-500: #7A7A7A; --sf-brand-gray-300: #D4D4D4; --sf-brand-gray-100: #F2F2F2; /* --------------------------------------------------------------- TIPOGRAFIA — i font sono caricati da functions.php --------------------------------------------------------------- */ --sf-font-heading: 'League Spartan', system-ui, sans-serif; --sf-font-body: 'League Spartan', system-ui, sans-serif; --sf-font-secondary: 'Roboto', system-ui, sans-serif; --sf-font-accent: 'Alata', system-ui, sans-serif; /* --------------------------------------------------------------- SUPERFICI — tema chiaro --------------------------------------------------------------- */ --sf-bg-page: #f7f8fa; --sf-bg-surface: #ffffff; --sf-bg-elevated: #ffffff; /* card che "si solleva" dal fondo */ --sf-bg-sidebar: #f0f2f5; --sf-bg-hover: rgba(0, 0, 0, 0.04); --sf-bg-active: rgba(91, 159, 230, 0.12); --sf-bg-placeholder: #f0f0f0; /* immagine assente */ /* --------------------------------------------------------------- TESTO E BORDI — tema chiaro --------------------------------------------------------------- */ --sf-text-primary: #1c1e21; --sf-text-secondary: #65676b; --sf-text-muted: #8a8d91; --sf-border-color: #e4e6eb; --sf-border-strong: #d0d2d6; /* separatore che deve farsi vedere */ /* --------------------------------------------------------------- AZIONE --------------------------------------------------------------- */ --sf-accent: var(--sf-brand-blue); --sf-accent-hover: var(--sf-brand-blue-hover); /* I link usavano #1877f2 — il blu di Facebook, arrivato copiando un template. Allineato al blu del brand il 2026-08-07 (decisione Fabio: solo i colori ufficiali). */ --sf-link: var(--sf-brand-blue); /* --------------------------------------------------------------- STATI --------------------------------------------------------------- */ --sf-color-success: #28a745; --sf-color-error: #dc3545; --sf-color-warning: #ffc107; /* Stelle di valutazione. Concetto suo, non un "warning": risorse, marketplace e recensioni lo condividono e deve poter cambiare da solo. */ --sf-rating: #F5A623; --sf-rating-empty: var(--sf-border-strong); /* --------------------------------------------------------------- FORMA — raggi, ombre, spaziature, misure --------------------------------------------------------------- */ --sf-radius: 8px; --sf-radius-sm: 6px; --sf-radius-lg: 10px; /* card di eventi e collezioni */ --sf-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); --sf-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.10); --sf-gap: 12px; --sf-sidebar-width: 240px; /* --------------------------------------------------------------- SCALA GRIGI D'INTERFACCIA (distinta dal brand: cambia col tema) --------------------------------------------------------------- */ --sf-gray-200: #E4E6EB; --sf-gray-400: #8A8D91; --sf-gray-500: #65676B; --sf-gray-700: #1C1E21; /* =============================================================== ALIAS — nomi storici, non usarli nel codice nuovo =============================================================== */ /* namespace --sfc-* (group-channels, sf-chat) */ --sfc-bg-page: var(--sf-bg-page); --sfc-bg-content: var(--sf-bg-surface); --sfc-bg-card: var(--sf-bg-surface); --sfc-bg-sidebar: var(--sf-bg-sidebar); --sfc-bg-hover: var(--sf-bg-hover); --sfc-bg-active: var(--sf-bg-active); --sfc-text-primary: var(--sf-text-primary); --sfc-text-secondary: var(--sf-text-secondary); --sfc-text-muted: var(--sf-text-muted); --sfc-border: var(--sf-border-color); --sfc-link: var(--sf-link); --sfc-accent: var(--sf-accent); --sfc-accent-hover: var(--sf-accent-hover); --sfc-radius: var(--sf-radius); --sfc-radius-sm: var(--sf-radius-sm); --sfc-shadow: var(--sf-shadow); --sfc-gap: var(--sf-gap); --sfc-sidebar-width: var(--sf-sidebar-width); /* namespace --sfe-* (events) */ --sfe-bg-page: var(--sf-bg-page); --sfe-bg-card: var(--sf-bg-surface); --sfe-bg-elevated: var(--sf-bg-elevated); --sfe-bg-hover: var(--sf-bg-hover); --sfe-bg-active: var(--sf-bg-active); --sfe-text-primary: var(--sf-text-primary); --sfe-text-secondary: var(--sf-text-secondary); --sfe-text-muted: var(--sf-text-muted); --sfe-border: var(--sf-border-color); --sfe-border-strong: var(--sf-border-strong); --sfe-link: var(--sf-link); --sfe-accent: var(--sf-accent); --sfe-accent-hover: var(--sf-accent-hover); --sfe-warning: var(--sf-color-warning); --sfe-radius: var(--sf-radius-lg); --sfe-radius-sm: var(--sf-radius-sm); --sfe-shadow: var(--sf-shadow); /* namespace --sfco-* (collection) */ --sfco-bg-page: var(--sf-bg-page); --sfco-bg-card: var(--sf-bg-surface); --sfco-bg-elevated: var(--sf-bg-elevated); --sfco-bg-placeholder: var(--sf-bg-placeholder); --sfco-text-primary: var(--sf-text-primary); --sfco-text-secondary: var(--sf-text-secondary); --sfco-text-muted: var(--sf-text-muted); --sfco-border: var(--sf-border-color); --sfco-link: var(--sf-link); --sfco-accent: var(--sf-accent); --sfco-radius: var(--sf-radius-lg); --sfco-radius-sm: var(--sf-radius-sm); --sfco-shadow-hover: var(--sf-shadow-hover); /* namespace --sf-color-* (form-resource) */ --sf-color-primary: var(--sf-accent); --sf-color-primary-hover: var(--sf-accent-hover); --sf-color-bg: var(--sf-bg-surface); --sf-color-bg-secondary: var(--sf-bg-page); --sf-color-border: var(--sf-border-color); --sf-color-text: var(--sf-text-primary); --sf-color-text-muted: var(--sf-text-muted); } /** * Tema scuro — attivato dal tema padre BuddyX su . * * Si ridefiniscono SOLO i canonici che cambiano. Gli alias seguono da soli: * è il motivo per cui questo blocco è corto quanto deve essere. */ body.buddyx-dark-theme { --sf-bg-page: #1a1a1a; --sf-bg-surface: #232323; --sf-bg-elevated: #2a2a2a; --sf-bg-sidebar: #1e1e1e; --sf-bg-hover: rgba(255, 255, 255, 0.06); --sf-bg-active: rgba(91, 159, 230, 0.18); --sf-bg-placeholder: #2e2e2e; --sf-text-primary: #e8e8e8; --sf-text-secondary: #b3b3b3; --sf-text-muted: #8a8a8a; --sf-border-color: #2e2e2e; --sf-border-strong: #3a3a3a; /* Sul fondo scuro il blu del brand non ha contrasto sufficiente: si schiarisce. Stesso ruolo, luminosità diversa. */ --sf-accent: #5b9fe6; --sf-accent-hover: #80b6ec; --sf-link: #5b9fe6; --sf-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --sf-shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.5); --sf-gray-200: #2E2E2E; --sf-gray-400: #8A8A8A; --sf-gray-500: #B3B3B3; --sf-gray-700: #E8E8E8; }