/* ============================================================ DS-TOKENS.CSS — De Sisti Design System v2 Fonte di verità per colori, tipografia, spazio, motion. ISTRUZIONI: - Questo file sostituisce il ds-tokens.css esistente - Va caricato PRIMO, prima di qualsiasi altro CSS - Non aggiungere regole qui — solo custom properties - Per aggiungere token: apri una PR / sessione dedicata ============================================================ */ /* ============================================================ 1. BRAND COLORS — immutabili, mai usare direttamente nel CSS componente. Usare sempre i semantic tokens (sezione 3). ============================================================ */ :root { /* Gialli brand */ --ds-brand-yellow-dark: #F4B532; /* Pantone — dominante, doppia linea spessa */ --ds-brand-yellow-light: #F3E955; /* Pantone — accento, doppia linea fine */ /* Sess.34: legacy brand aliases — puntano a #FFD100 (--kf-accent canonical UI). Fix bug "CONFIGURA giallo diverso dagli altri yellow CTA" — i fallback legacy nei file componenti (var(--brand, #FFDD00), var(--b-brand, #FFDD00), var(--brand, #FFD21E)) scattavano perché questi alias non erano mai definiti, producendo 3 tonalità divergenti (#FFD100 ph-cta vs #FFDD00 CONFIGURA/DMX vs #FFD21E header outline). Ora tutti convergono su #FFD100. */ /* ⭐ 10/09/2026 — David: «uniforma il giallo sul pantone del logo». Questi alias puntavano a #FFD100. Ora puntano al Pantone dominante, come tutto il resto. La nota qui sopra resta perche' spiega PERCHE' esistono: erano nati per far convergere tre gialli divergenti, e la convergenza adesso e' sul colore del logo invece che su #FFD100. */ --brand: var(--ds-brand-yellow-dark); --b-brand: var(--ds-brand-yellow-dark); /* ⚠️ --ds-brand-yellow era USATA 13 volte (hero-3d-stage, hero-gallery, sales-network, ds-base, pagina-comune) e DICHIARATA MAI: ogni uso cadeva sul valore di ripiego scritto a mano nel var(). Un token che non esiste non da' errore — da' silenziosamente il colore del fallback, e nessuno se ne accorge finche' non mette i due gialli uno accanto all'altro. */ --ds-brand-yellow: var(--ds-brand-yellow-dark); /* Neutri puri */ --ds-neutral-0: #FFFFFF; --ds-neutral-50: #FAFAF8; /* sfondo light — leggermente caldo */ --ds-neutral-100: #F2F0EC; --ds-neutral-200: #E4E1DA; --ds-neutral-300: #C8C4BA; --ds-neutral-400: #9A9590; --ds-neutral-500: #6B6660; --ds-neutral-600: #4A4540; --ds-neutral-700: #2E2A26; --ds-neutral-800: #1A1714; --ds-neutral-900: #0C0C0C; /* sfondo dark */ --ds-neutral-1000: #000000; /* ⭐ R-01 (05/09/2026) — L'INCHIOSTRO DEL TELAIO STA FRA I PRIMITIVI, PERCHE' SERVE ANCHE DOVE IL TEMA E' CHIARO. I token semantici del telaio (`--ds-c-modal-frame*`, `--ds-c-modal-sheen`) vivono solo nel blocco dark: in tema light non esistono. Va bene finche' dietro il modale c'e' il backdrop scuro all'82% — su desktop e' lui a fare da fondo, ed e' il motivo per cui a 1440 in light il tool esteso si legge lo stesso. In fascia app il backdrop e' `display:none` (scelta di V-97: li' il modale E' lo schermo), quindi il telaio e' l'unico fondo — e con i token assenti cadeva su `--ds-c-bg-elevated`, cioe' BIANCO, sotto un contenuto disegnato per il dark. Testo bianco su telaio bianco. 🔑 La risposta alla domanda che V-97 aveva rinviato («che colore ha un modale in tema light») ce l'aveva gia' il desktop: SCURO. Il modale delle fotometrie e' un componente scuro per progetto, in tutti e due i temi. 📌 Qui sotto ci sono solo i due LETTERALI, una volta sola: chi li usa sta nel blocco dark (`--ds-c-modal-*`) e nel blocco fascia app in fondo al file. Due letterali uguali sono due letterali che prima o poi divergono. ⛔ Il desktop light resta com'e' (V-100, decisione di David): questi primitivi da soli non vestono niente, li accende chi li referenzia. */ --ds-modal-frame-ink: 28, 25, 20; --ds-modal-sheen-grad: radial-gradient(160% 100% at 50% -10%, rgba(255,255,255,.18), transparent 60%); } /* ══ LA GRIGLIA DELLA PAGINA — dichiarata, 10/09/2026 ═══════════════════════ David: «sezioni con larghezze diverse senza regola: serve una griglia dichiarata». La misura ha trovato una cosa piu' netta della diagnosi: ⚠️ `--page-max` era referenziata in CINQUE file e NON dichiarata da nessuna parte — tutti usavano il valore di ripiego dentro la `var()`. Una griglia che vive solo nei fallback non e' una griglia: non si puo' cambiare in un posto solo, che e' l'unica cosa per cui esiste. Due gradini di LETTURA e due di PAGINA. Piu' il fuori-griglia `100vw`, che non e' una larghezza ma una scelta di regia (la modalita' film). 🔑 Il disordine che si SENTE non e' quello delle sezioni: nessuno nota che un'isola e' larga 1040 e un'altra 1440. Si nota che i PARAGRAFI cambiano lunghezza di riga di sezione in sezione — la home ne aveva cinque. */ :root { --misura: 68ch; /* la misura di lettura. UNA. */ --misura-corta: 48ch; /* lead e didascalie sotto un comando: deliberata */ --page-max: 1200px; /* il contenitore */ --page-max-largo: 1440px; /* l'isola larga: media a piena forza */ } /* ============================================================ 2. LIGHT-MODE OVERRIDES + MANUAL TOGGLES Sess.25: DARK-MODE-FIRST. Il default vive in sezione 3. Attivato da: a) @media (prefers-color-scheme: light) — sistema light b) body.ds-light — toggle manuale La classe body.ds-light/body.ds-dark vince sul media. ============================================================ */ /* Sistema: light automatico (se l'utente non ha forzato dark) */ @media (prefers-color-scheme: light) { :root:not(.ds-dark) { --ds-c-bg: var(--ds-neutral-50); --ds-c-bg-elevated: var(--ds-neutral-0); --ds-c-bg-overlay: rgba(250,250,248,0.94); --ds-c-surface: rgba(0,0,0,0.03); --ds-c-surface-hover: rgba(0,0,0,0.05); --ds-c-surface-border: rgba(0,0,0,0.08); --ds-c-text: #1A1A1A; /* WCAG AAA su #FAFAF8 */ --ds-c-text-secondary: #4A4540; --ds-c-text-tertiary: #9A9590; --ds-c-text-inverse: #E8E6E0; --ds-c-accent: var(--ds-brand-yellow-dark); --ds-c-accent-hover: #E8A820; --ds-c-accent-light: var(--ds-brand-yellow-light); --ds-c-accent-subtle: rgba(244,181,50,0.10); --ds-c-accent-border: rgba(244,181,50,0.40); --ds-c-line-thick: var(--ds-brand-yellow-dark); --ds-c-line-thin: var(--ds-brand-yellow-light); --ds-c-focus: var(--ds-brand-yellow-dark); /* Glass light */ --ds-glass-bg: rgba(255,255,255,0.72); --ds-glass-border: rgba(0,0,0,0.07); --ds-glass-blur: 12px; --ds-glass-shadow: 0 6px 28px rgba(0,0,0,0.10); /* Surface tier system — light (sess.25 v22: solid base + overlay alpha) */ --ds-surface-1-bg: linear-gradient(rgba(0,0,0,0.03), rgba(0,0,0,0.03)) var(--ds-neutral-50); --ds-surface-1-border: rgba(0,0,0,0.13); --ds-surface-1-shadow: 0 3px 12px rgba(0,0,0,0.09); --ds-surface-1-accent: inset 3px 0 0 rgba(244,181,50,0.55); --ds-surface-2-bg: rgba(255,255,255,0.92); --ds-surface-2-border: rgba(0,0,0,0.12); --ds-surface-2-shadow: 0 2px 8px rgba(0,0,0,0.08); --ds-surface-3-bg-hover: rgba(244,181,50,0.07); --ds-surface-3-border-hover: rgba(244,181,50,0.42); --ds-surface-3-glow-hover: 0 0 0 1px rgba(244,181,50,0.32), 0 4px 14px rgba(244,181,50,0.18); --ds-surface-glow-focus: 0 0 0 2px rgba(244,181,50,0.50), 0 0 22px rgba(244,181,50,0.22); /* Button tokens — varianti light (overrides di sezione 12) */ --ds-btn-toggle-off-bg: rgba(255,255,255,0.80); --ds-btn-toggle-off-bd: rgba(0,0,0,0.09); --ds-btn-secondary-bd: rgba(0,0,0,0.14); --ds-btn-secondary-bg-hov: rgba(244,181,50,0.08); --ds-btn-ghost-bg-hov: rgba(0,0,0,0.05); --ds-btn-ghost-bd: rgba(0,0,0,0.14); } } /* Override manuale: light forzato (vince sul media) */ body.ds-light, :root.ds-light { --ds-c-bg: var(--ds-neutral-50); --ds-c-bg-elevated: var(--ds-neutral-0); --ds-c-bg-overlay: rgba(250,250,248,0.94); --ds-c-surface: rgba(0,0,0,0.03); --ds-c-surface-hover: rgba(0,0,0,0.05); --ds-c-surface-border: rgba(0,0,0,0.08); --ds-c-text: #1A1A1A; /* WCAG AAA su #FAFAF8 */ --ds-c-text-secondary: #4A4540; --ds-c-text-tertiary: #9A9590; --ds-c-text-inverse: #E8E6E0; --ds-c-accent: var(--ds-brand-yellow-dark); --ds-c-accent-hover: #E8A820; --ds-c-accent-light: var(--ds-brand-yellow-light); --ds-c-accent-subtle: rgba(244,181,50,0.10); --ds-c-accent-border: rgba(244,181,50,0.40); --ds-c-line-thick: var(--ds-brand-yellow-dark); --ds-c-line-thin: var(--ds-brand-yellow-light); --ds-c-focus: var(--ds-brand-yellow-dark); --ds-glass-bg: rgba(255,255,255,0.72); --ds-glass-border: rgba(0,0,0,0.07); --ds-glass-blur: 12px; --ds-glass-shadow: 0 6px 28px rgba(0,0,0,0.10); /* Surface tier — light (sess.25 v22: solid base + overlay alpha) */ --ds-surface-1-bg: linear-gradient(rgba(0,0,0,0.03), rgba(0,0,0,0.03)) var(--ds-neutral-50); --ds-surface-1-border: rgba(0,0,0,0.13); --ds-surface-1-shadow: 0 3px 12px rgba(0,0,0,0.09); --ds-surface-1-accent: inset 3px 0 0 rgba(244,181,50,0.55); --ds-surface-2-bg: rgba(255,255,255,0.92); --ds-surface-2-border: rgba(0,0,0,0.12); --ds-surface-2-shadow: 0 2px 8px rgba(0,0,0,0.08); --ds-surface-3-bg-hover: rgba(244,181,50,0.07); --ds-surface-3-border-hover: rgba(244,181,50,0.42); --ds-surface-3-glow-hover: 0 0 0 1px rgba(244,181,50,0.32), 0 4px 14px rgba(244,181,50,0.18); --ds-surface-glow-focus: 0 0 0 2px rgba(244,181,50,0.50), 0 0 22px rgba(244,181,50,0.22); /* Button tokens — light */ --ds-btn-toggle-off-bg: rgba(255,255,255,0.80); --ds-btn-toggle-off-bd: rgba(0,0,0,0.09); --ds-btn-secondary-bd: rgba(0,0,0,0.14); --ds-btn-secondary-bg-hov: rgba(244,181,50,0.08); --ds-btn-ghost-bg-hov: rgba(0,0,0,0.05); --ds-btn-ghost-bd: rgba(0,0,0,0.14); } /* Override manuale: dark forzato — utile quando sistema è light ma utente seleziona dark esplicitamente. Ridondante col default ma serve a vincere su @media (prefers-color-scheme: light). */ body.ds-dark, :root.ds-dark { --ds-c-bg: var(--ds-neutral-900); --ds-c-bg-elevated: #161410; --ds-c-bg-overlay: rgba(12,12,12,0.92); /* Telaio dei modali a tutto schermo. Estratto da `.dspmx-frame` (photometrics-maximize.css), dove era scritto a mano: da quando esiste anche il tool esteso dei soft servono DUE telai identici, e due letterali uguali sono due letterali che prima o poi divergono. ⚠️ NON usare `--ds-c-surface` per un modale: e' una VELATURA (rgba(255,255,255,0.05) in dark, rgba(0,0,0,0.03) in light), non una superficie opaca — ci sono cascato scrivendo il tool esteso soft, e il modale lasciava vedere la pagina sotto. Il nome dice «surface», il valore dice «velo». */ --ds-c-modal-frame: rgba(var(--ds-modal-frame-ink), 0.94); /* Stesso telaio, opacita' piena. Serve dove il modale e' a tutto schermo e il backdrop non c'e' (fascia app: `_mobile-touch.css`, `.dspmx-frame`): li' quel 6% di trasparenza non mostra il velo sfocato — mostra la pagina. ⚠️ Stesso colore del gemello, scritto una volta sola: la coppia deve restare la STESSA tinta, e due letterali uguali prima o poi divergono. */ --ds-c-modal-frame-solid: rgb(var(--ds-modal-frame-ink)); --ds-c-modal-sheen: var(--ds-modal-sheen-grad); --ds-c-surface: rgba(255,255,255,0.05); --ds-c-surface-hover: rgba(255,255,255,0.08); --ds-c-surface-border: rgba(255,255,255,0.10); --ds-c-text: #E8E6E0; --ds-c-text-secondary: #9A9590; --ds-c-text-tertiary: #6B6660; --ds-c-text-inverse: #1A1714; --ds-c-accent: var(--ds-brand-yellow-dark); --ds-c-accent-hover: #F9C44A; --ds-c-accent-light: var(--ds-brand-yellow-light); --ds-c-accent-subtle: rgba(244,181,50,0.15); --ds-c-accent-border: rgba(244,181,50,0.35); --ds-c-line-thick: var(--ds-brand-yellow-dark); --ds-c-line-thin: var(--ds-brand-yellow-light); --ds-c-focus: var(--ds-brand-yellow-dark); --ds-glass-bg: rgba(255,255,255,0.04); --ds-glass-border: rgba(255,255,255,0.09); --ds-glass-blur: 14px; --ds-glass-shadow: 0 8px 32px rgba(0,0,0,0.40); /* Surface tier — dark (sess.25 v22: solid base + overlay alpha) */ --ds-surface-1-bg: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)) var(--ds-neutral-900); --ds-surface-1-border: rgba(255,255,255,0.18); --ds-surface-1-shadow: 0 4px 14px rgba(0,0,0,0.45); --ds-surface-1-accent: inset 3px 0 0 rgba(244,181,50,0.45); --ds-surface-2-bg: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)) var(--ds-neutral-900); --ds-surface-2-border: rgba(255,255,255,0.16); --ds-surface-2-shadow: 0 2px 8px rgba(0,0,0,0.40); --ds-surface-3-bg-hover: rgba(244,181,50,0.06); --ds-surface-3-border-hover: rgba(244,181,50,0.32); --ds-surface-3-glow-hover: 0 0 0 1px rgba(244,181,50,0.28), 0 4px 18px rgba(244,181,50,0.18); --ds-surface-glow-focus: 0 0 0 2px rgba(244,181,50,0.55), 0 0 28px rgba(244,181,50,0.30); /* Button tokens — dark (matchano default) */ --ds-btn-toggle-off-bg: rgba(255,255,255,0.06); --ds-btn-toggle-off-bd: rgba(255,255,255,0.12); --ds-btn-secondary-bd: rgba(255,255,255,0.14); --ds-btn-secondary-bg-hov: rgba(244,181,50,0.12); --ds-btn-ghost-bg-hov: rgba(255,255,255,0.06); --ds-btn-ghost-bd: rgba(255,255,255,0.14); } /* ── FASCIA APP — il telaio dei modali vale in TUTTI E DUE i temi ───────── ⭐ R-01 (05/09/2026). Sotto i 1400 px il tool esteso e' a tutto schermo e il backdrop e' spento (`_mobile-touch.css`, `body.ds-vp-app .dspmx-backdrop { display:none }`): il telaio e' l'unico fondo che il contenuto ha. Il contenuto, pero', e' disegnato per il dark — a 390 in tema light si leggeva bianco su bianco, su F7 e su S2 (difetto dello STAMPO, non del soft). ⇒ Qui i token del telaio, che altrove esistono solo in dark, si dichiarano per ENTRAMBI i temi. Non e' una scelta nuova: e' quella che il desktop light ha gia' preso, dove il backdrop scuro all'82% fa da fondo e il modale si legge scuro. 📌 Sta in fondo alle sezioni tema apposta: `body.ds-vp-app` e `body.ds-light` hanno la stessa specificita' (0,1,1), quindi vince chi viene dopo. In dark i valori sono gli stessi — nessun conflitto, solo la stessa tinta detta una volta di piu'. ⛔ La classe `ds-vp-app` la porta il body da 0 a 1399 px (a 1100-1399 e' duale con `ds-vp-compact-narrow`): e' esattamente il perimetro dove vive la regola del telaio. Da 1400 in su la classe non c'e' e questi token non esistono: il DESKTOP LIGHT RESTA COM'E' (V-100, decide David). */ body.ds-vp-app{ --ds-c-modal-frame: rgba(var(--ds-modal-frame-ink), 0.94); --ds-c-modal-frame-solid: rgb(var(--ds-modal-frame-ink)); --ds-c-modal-sheen: var(--ds-modal-sheen-grad); } /* ============================================================ 3. SEMANTIC TOKENS — DEFAULT (dark-first, sess.25) Questi sono i valori attivi in assenza di override light. Ogni componente usa SOLO questi token, mai i brand raw. Razionale: DoP/gaffer/broadcast lavorano in set/control room scuri. Photometrics, hero 3D, curve fotometriche rendono meglio su sfondo scuro. Heritage Lariano/Cinecittà = notte. ============================================================ */ :root { /* --- Superfici (dark) --- */ --ds-c-bg: var(--ds-neutral-900); /* #0C0C0C */ --ds-c-bg-elevated: #161410; --ds-c-bg-overlay: rgba(12,12,12,0.92); --ds-c-surface: rgba(255,255,255,0.05); --ds-c-surface-hover: rgba(255,255,255,0.08); --ds-c-surface-border: rgba(255,255,255,0.10); /* --- Testo (dark) --- */ --ds-c-text: #E8E6E0; /* WCAG AAA su #0C0C0C, bianco caldo */ --ds-c-text-secondary: #9A9590; --ds-c-text-tertiary: #6B6660; --ds-c-text-inverse: #1A1714; /* --- Accento / Brand interattivo (dark) --- */ --ds-c-accent: var(--ds-brand-yellow-dark); --ds-c-accent-hover: #F9C44A; /* leggermente più chiaro su dark */ --ds-c-accent-light: var(--ds-brand-yellow-light); --ds-c-accent-subtle: rgba(244,181,50,0.15); /* hover bg elementi piccoli */ --ds-c-accent-border: rgba(244,181,50,0.35); /* bordo pill attiva */ /* --- Doppia linea brand --- */ --ds-c-line-thick: var(--ds-brand-yellow-dark); /* 3-4px, spessa */ --ds-c-line-thin: var(--ds-brand-yellow-light); /* 1-2px, fine */ /* --- Focus ring accessibilità --- */ --ds-c-focus: var(--ds-brand-yellow-dark); /* --- Glass card (dark) — legacy, mantenuta per chrome/dock/lightbox --- */ --ds-glass-bg: rgba(255,255,255,0.04); --ds-glass-border: rgba(255,255,255,0.09); --ds-glass-blur: 14px; --ds-glass-shadow: 0 8px 32px rgba(0,0,0,0.40); /* --- Surface tier system (sess.25 task #3 — Linear pattern) --- 3 tier semantici di superficie, sostituiscono glass card uniforme. Pattern: bordi rgba sottili + microelevation + glow accent focus. Tier 1 = container widget primario (es. specs, accessories, dmx) Tier 2 = nested element (es. card dentro widget, row, sub-section) Tier 3 = stato hover/focus interattivo Vedi audit_competitor_tech_reference_s24 — pattern Linear. */ /* sess.25 v22: surface-1-bg OPACO (copre pattern body bg). Layer 1 = overlay alpha (elevation), Layer 2 = solid bg base. */ --ds-surface-1-bg: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04)) var(--ds-neutral-900); --ds-surface-1-border: rgba(255,255,255,0.18); --ds-surface-1-shadow: 0 4px 14px rgba(0,0,0,0.45); --ds-surface-1-accent: inset 3px 0 0 rgba(244,181,50,0.45); /* brand identifier left */ --ds-surface-2-bg: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)) var(--ds-neutral-900); --ds-surface-2-border: rgba(255,255,255,0.16); --ds-surface-2-shadow: 0 2px 8px rgba(0,0,0,0.40); --ds-surface-3-bg-hover: rgba(244,181,50,0.06); --ds-surface-3-border-hover: rgba(244,181,50,0.32); --ds-surface-3-glow-hover: 0 0 0 1px rgba(244,181,50,0.28), 0 4px 18px rgba(244,181,50,0.18); --ds-surface-glow-focus: 0 0 0 2px rgba(244,181,50,0.55), 0 0 28px rgba(244,181,50,0.30); /* ============================================================ 4. TIPOGRAFIA ============================================================ */ /* Font families */ --ds-font-heading: "Oswald", system-ui, sans-serif; /* tutto il corpo testo */ --ds-font-display: "ConthraxSB", "Oswald", sans-serif; /* etichette, codici, DMX */ --ds-font-sans: "Oswald", system-ui, sans-serif; /* Scale modulare — base 16px, ratio 1.25 */ --ds-fs-xs: 0.70rem; /* 11.2px — micro etichette Conthrax */ --ds-fs-sm: 0.80rem; /* 12.8px — label secondarie */ --ds-fs-base: 0.92rem; /* 14.7px — corpo tabelle, specs */ --ds-fs-body: 1.00rem; /* 16px — corpo testo generale */ --ds-fs-md: 1.10rem; /* 17.6px — lead text */ --ds-fs-lg: 1.25rem; /* 20px — titoli widget */ --ds-fs-xl: 1.56rem; /* 25px — titoli sezione */ --ds-fs-2xl: 2.00rem; /* 32px — titoli famiglia/range */ --ds-fs-3xl: 2.50rem; /* 40px — hero prodotto */ --ds-fs-hero: clamp(2.5rem, 5vw, 4.5rem); /* hero responsive */ /* Letter spacing per contesto */ --ds-ls-tight: 0.01em; --ds-ls-normal: 0.02em; --ds-ls-wide: 0.06em; --ds-ls-wider: 0.10em; --ds-ls-widest: 0.14em; /* Conthrax codici prodotto */ /* ============================================================ 5. SPAZIO — scala 4px ============================================================ */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px; --ds-space-12: 48px; --ds-space-16: 64px; --ds-space-20: 80px; /* Gap responsive per griglia widget */ --ds-gap-mobile: clamp(14px, 3vw, 18px); --ds-gap-desktop: clamp(18px, 2.5vw, 28px); --ds-gap-wide: clamp(22px, 2vw, 32px); /* ============================================================ 6. RAGGI — card e componenti ============================================================ */ --ds-r-sm: 6px; --ds-r-md: 12px; --ds-r-lg: 18px; --ds-r-xl: 24px; --ds-r-pill: 999px; /* ============================================================ 7. LAYOUT — breakpoint e larghezze pagina ============================================================ */ /* Breakpoint (reference — usare nei @media, non come var) */ /* mobile: max 1439px */ /* desktop-sm: 1440–1799px */ /* desktop-wide: 1800–1919px */ /* ultrawide: 1920px+ */ /* Larghezze massime pagina */ --ds-page-max: 1180px; --ds-page-max-wide: 1600px; /* Rail laterale (sidebar navigazione su ultrawide) */ --ds-rail-lane-wide: 312px; /* Altezze header/bar */ --ds-header-h: 66px; --ds-pbar-h: 48px; /* product bar */ /* Widget max-width predefiniti */ --ds-widget-max: 980px; --ds-widget-max-narrow: 760px; --ds-widget-max-wide: 1204px; /* ============================================================ 8. MOTION — durate e easing ============================================================ */ --ds-ease-std: cubic-bezier(0.4, 0, 0.2, 1); --ds-ease-out: cubic-bezier(0.0, 0, 0.2, 1); --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* micro-bounce */ --ds-dur-fast: 120ms; --ds-dur-std: 200ms; --ds-dur-slow: 350ms; --ds-dur-reveal: 500ms; /* ============================================================ 9. DOPPIA LINEA BRAND — mixin via custom properties Uso: applicare la classe .ds-brand-line all'elemento oppure usare le property direttamente in pseudo-elementi ============================================================ */ --ds-line-thick-w: 3px; /* spessore linea spessa (giallo scuro) */ --ds-line-thin-w: 1px; /* spessore linea fine (giallo chiaro) */ --ds-line-gap: 2px; /* distanza tra le due linee */ /* Variante per sezioni: orizzontali (es. header sezione) */ --ds-line-h-thick-h: 4px; --ds-line-h-thin-h: 2px; /* ============================================================ 10. ELEVATION / OMBRE ============================================================ */ --ds-shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --ds-shadow-md: 0 6px 28px rgba(0,0,0,0.10); --ds-shadow-lg: 0 12px 40px rgba(0,0,0,0.14); --ds-shadow-xl: 0 24px 64px rgba(0,0,0,0.18); --ds-shadow-dark: 0 8px 32px rgba(0,0,0,0.40); /* per dark mode */ /* ============================================================ 11. HOVER REVEAL — widget panel system I widget mostrano toolbar al mouseover. Queste variabili controllano il comportamento. ============================================================ */ --ds-reveal-delay: 80ms; /* ritardo prima di mostrare toolbar */ --ds-reveal-dur: 180ms; /* durata fade-in toolbar */ --ds-reveal-offset: 6px; /* translateY al montaggio */ /* ============================================================ 12. BUTTON SYSTEM — tassonomia De Sisti 5 tipi semantici. Mai usare colori raw sui pulsanti. La psicologia: amber F4B532 = luce di tungsteno = calore professionale. C8860A = strumento di misura = precisione. ============================================================ */ /* Primary — RFQ, invio, azione principale */ /* #FFD100 = segnale interattivo (kf-accent) — distingue CTA da accenti strutturali #F4B532 */ --ds-btn-primary-bg: #F4B532; --ds-btn-primary-bg-hov: #E8C000; --ds-btn-primary-text: #1A1714; /* dark su giallo segnale */ /* Secondary — apri modal, link sezione, download (dark default) */ --ds-btn-secondary-bg: transparent; --ds-btn-secondary-bg-hov: rgba(244,181,50,0.12); --ds-btn-secondary-bd: rgba(255,255,255,0.14); --ds-btn-secondary-bd-hov: rgba(244,181,50,0.55); --ds-btn-secondary-text: var(--ds-c-text); /* Toggle / Pill — Metric/Imperial, range, tab attivo (dark default) */ --ds-btn-toggle-off-bg: rgba(255,255,255,0.06); --ds-btn-toggle-off-bd: rgba(255,255,255,0.12); --ds-btn-toggle-off-text: var(--ds-c-text); --ds-btn-toggle-on-bg: var(--ds-brand-yellow-dark); /* #F4B532 */ --ds-btn-toggle-on-bd: #C8860A; --ds-btn-toggle-on-text: #1A1714; /* Instrument — controlli tecnici (fotometrie, beam, marker) */ --ds-btn-instr-bg: #C8860A; /* amber scuro — "cruscotto ottico" */ --ds-btn-instr-bg-hov: #B07308; --ds-btn-instr-text: #FFFFFF; /* Ghost — utility: Close, Cancel, Clear (dark default) */ --ds-btn-ghost-bg: transparent; --ds-btn-ghost-bg-hov: rgba(255,255,255,0.06); --ds-btn-ghost-bd: rgba(255,255,255,0.14); --ds-btn-ghost-text: var(--ds-c-text-secondary); /* Dimensioni */ --ds-btn-h-lg: 40px; /* large CTA (primary rail, invio) */ --ds-btn-h-md: 32px; /* default — stesso delle fotometrie, riferimento */ --ds-btn-h-sm: 24px; /* compatto: range pills, header, contesti stretti */ --ds-btn-r: var(--ds-r-pill); /* sempre pill */ --ds-btn-font: var(--ds-font-sans); /* Oswald — ConthraxSB solo per .ds-btn--instrument */ --ds-btn-fs-lg: var(--ds-fs-base); /* 14.7px */ --ds-btn-fs-md: var(--ds-fs-sm); /* 12.8px */ --ds-btn-fs-sm: var(--ds-fs-xs); /* 11.2px */ --ds-btn-ls: var(--ds-ls-wide); /* 0.06em */ --ds-btn-dur: var(--ds-dur-std); /* 200ms */ } /* ============================================================ 12. UTILITY CLASSES — doppie linee brand Usare queste classi sui contenitori di sezione. ============================================================ */ /* Linea verticale sinistra (widget, badge) */ .ds-vline { position: relative; padding-left: calc(var(--ds-line-thick-w) + var(--ds-line-gap) + var(--ds-line-thin-w) + 10px); } .ds-vline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--ds-line-thick-w); background: var(--ds-c-line-thick); border-radius: 2px; } .ds-vline::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--ds-line-thick-w) + var(--ds-line-gap)); width: var(--ds-line-thin-w); background: var(--ds-c-line-thin); border-radius: 2px; } /* Linea orizzontale sopra (titoli sezione, family/range) */ .ds-hline { position: relative; padding-top: calc(var(--ds-line-h-thick-h) + var(--ds-line-gap) + var(--ds-line-h-thin-h) + 10px); } .ds-hline::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--ds-line-h-thick-h); background: var(--ds-c-line-thick); border-radius: 2px; } .ds-hline::after { content: ""; position: absolute; top: calc(var(--ds-line-h-thick-h) + var(--ds-line-gap)); left: 0; right: 0; height: var(--ds-line-h-thin-h); background: var(--ds-c-line-thin); border-radius: 2px; } /* Glass card — utility legacy (chrome/dock/lightbox). Per i nuovi widget preferire `.ds-surface-1` / `.ds-surface-2`. */ .ds-glass { background: var(--ds-glass-bg); border: 1px solid var(--ds-glass-border); backdrop-filter: blur(var(--ds-glass-blur)); -webkit-backdrop-filter: blur(var(--ds-glass-blur)); box-shadow: var(--ds-glass-shadow); } /* ============================================================ 13. SURFACE TIER UTILITIES (sess.25 task #3 — Linear pattern) Sostituiscono progressivamente glass uniforme. Pattern: bordo rgba sottile + microelevation + glow on focus. ============================================================ */ /* Tier 1: widget container primario. Es. il box esterno di specs / accessories / dmx / downloads. Include accent brand left subtle (identifier visivo De Sisti). */ .ds-surface-1 { background: var(--ds-surface-1-bg); border: 1px solid var(--ds-surface-1-border); border-radius: var(--ds-r-lg, 18px); box-shadow: var(--ds-surface-1-accent), var(--ds-surface-1-shadow); transition: border-color 200ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)), box-shadow 220ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)), background 180ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)); } /* Tier 2: nested card / sub-section dentro tier-1. Es. accessory row, dmx mode card, download item. */ .ds-surface-2 { background: var(--ds-surface-2-bg); border: 1px solid var(--ds-surface-2-border); border-radius: var(--ds-r-md, 12px); box-shadow: var(--ds-surface-2-shadow); transition: border-color 200ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)), box-shadow 220ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)), background 180ms var(--ds-ease-std, cubic-bezier(.4,0,.2,1)); } /* Tier 3 (state): hover/active interattivo per surface-1 e surface-2. Si applica con :hover su elementi cliccabili o `.is-active` per selezioni. */ .ds-surface-1:hover, .ds-surface-2:hover, .ds-surface-1.is-active, .ds-surface-2.is-active { background: var(--ds-surface-3-bg-hover); border-color: var(--ds-surface-3-border-hover); box-shadow: var(--ds-surface-3-glow-hover); } /* Focus visibile su elementi interattivi surface. */ .ds-surface-1:focus-visible, .ds-surface-2:focus-visible { outline: none; box-shadow: var(--ds-surface-glow-focus); border-color: var(--ds-c-focus); } /* Spotlight: stato "widget evidenziato" durante interazione toolbar/hover. */ .ds-surface-1.is-spotlight { border-color: var(--ds-surface-3-border-hover); box-shadow: var(--ds-surface-3-glow-hover); } /* Accento hover micro — per carousel card, pills piccole */ .ds-accent-hover { transition: background var(--ds-dur-std) var(--ds-ease-std), border-color var(--ds-dur-std) var(--ds-ease-std); } .ds-accent-hover:hover { background: var(--ds-c-accent-subtle); border-color: var(--ds-c-accent-border); } /* Focus ring accessibile — da aggiungere a tutti gli interattivi */ .ds-focusable:focus-visible { outline: 2px solid var(--ds-c-focus); outline-offset: 3px; border-radius: var(--ds-r-sm); } /* ============================================================ 14. MOBILE TOKENS (sess.26 — regola scene-vs-device) Token uniformi per regime app/mobile <1100px (body.ds-vp-app). Risolve sintomi disparità sess.25/26: width incoerenti (Downloads "stretto"), gap inconsistenti (DMX incolla a Specs). Regola dichiarata: dispositivi-di-lavoro (Specs/DMX/Accessories/ Downloads/Portfolio/RFQ) in surface-1 container; scene/navigazione (Hero/KF/Title bar) stampate su body bg. ============================================================ */ :root { --ds-mobile-body-px: 14px; /* margin-inline body e widget container */ --ds-mobile-gap-section: 38px; /* gap verticale tra widget consecutivi (sess.26 Tier 0.2: 32→38 per spezzare allineamento accent bars sx+dx tra widget contigui) */ --ds-mobile-gap-section-tight: 26px; /* gap coppie semantiche legate (Specs+DMX, sess.26 Tier 0.2: 22→26 proporzionato) */ --ds-mobile-card-radius: 18px; /* container surface-1 (sess.26 Tier 0.2: 16→18 per card più distinte visivamente) */ --ds-mobile-card-pad-block: 20px; /* padding verticale interno container */ --ds-mobile-card-pad-inline: 16px; /* padding orizzontale interno container */ --ds-mobile-grid-dot-size: 32px; /* dot atmosfera ridotto vs 26 desktop */ --ds-mobile-tap-scale: 0.96; /* :active scale tap feel iOS-native */ } /* Reduce motion — rispetta preferenze utente */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }