/* ========================================================================== Product Finder — componente frontend (Step 4a) Prefisso .pf-. I token del design export (--fd-green-*, --fd-ink-*) non esistono in questo sito: qui sono rimappati sui token reali --ft-*, emessi inline da ThemeColors. Ogni var() ha un fallback perché lo shortcode può stare su una pagina non-Fintable, dove né fintable.css né i token vengono caricati: il finder deve reggersi da solo. Nessun font dichiarato: la tipografia si eredita dal tema. ========================================================================== */ /* .pf-dr e .pf-sb vivono in fondo al , fuori dal guscio .pf: i token vanno dichiarati anche su di loro o perdono colori e raggi. */ .pf, .pf-dr, .pf-sb { /* Mappa dei token del design system (docs/finder/design/styles/tokens.css) sui token del sito emessi a runtime da ThemeColors. I fallback sono i valori esatti di tokens.css, che per il verde e per gli ink coincidono con i default della palette: --fd-green-600 = --ft-primary = #0e7a4f, --fd-ink-900 = --ft-text-primary, --fd-ink-150 = --ft-border, --fd-gold-500 = --ft-accent, --fd-green-800 = --ft-hero-bg. Dove il token del sito non esiste (dividers, ink tenui, tinte) il valore si deriva con color-mix, così resta agganciato alla palette se la redazione la cambia da Fintable -> Aspetto. */ --pf-ink: var(--ft-text-primary, #0f1e2e); /* --fd-ink-900 */ --pf-ink-soft: var(--ft-text-secondary, #647689); /* --fd-ink-500 */ --pf-ink-muted: color-mix(in srgb, var(--ft-text-secondary, #647689) 78%, #fff); /* ~ --fd-ink-400 */ --pf-ink-faint: color-mix(in srgb, var(--ft-text-secondary, #647689) 52%, #fff); /* ~ --fd-ink-300 */ --pf-line: var(--ft-border, #e3e7ec); /* --fd-ink-150 */ --pf-line-strong: color-mix(in srgb, var(--ft-border, #e3e7ec) 80%, var(--ft-text-secondary, #647689)); /* ~ --fd-ink-200 */ --pf-line-soft: color-mix(in srgb, var(--ft-border, #e3e7ec) 60%, #fff); /* ~ --fd-ink-100 */ --pf-paper: var(--ft-bg-card, #fff); /* --fd-paper */ --pf-canvas: var(--ft-bg-secondary, #f3f5f7); /* --fd-ink-75 */ --pf-accent: var(--ft-primary, #0e7a4f); /* --fd-green-600 */ --pf-accent-soft: color-mix(in srgb, var(--ft-primary, #0e7a4f) 8%, #fff); /* ~ --fd-green-50 */ --pf-accent-tint: color-mix(in srgb, var(--ft-primary, #0e7a4f) 10%, #fff); /* stato selezionato */ --pf-accent-line: color-mix(in srgb, var(--ft-primary, #0e7a4f) 28%, #fff); /* ~ --fd-green-200 */ --pf-dark: var(--ft-hero-bg, #0d4a35); /* --fd-green-800 */ /* Raggi, ombre e motion dalla scala di tokens.css. Il raggio dei bottoni resta 8px, che è quello reale delle CTA del sito (.ft-card-v2__cta-btn e sorelle), non i 6/10 della scala astratta. */ --pf-radius: 12px; --pf-radius-sm: 6px; --pf-radius-md: 10px; --pf-radius-lg: 14px; --pf-radius-full: 9999px; --pf-ring: 0 0 0 3px color-mix(in srgb, var(--ft-primary, #0e7a4f) 22%, transparent); /* --fd-shadow-focus */ --pf-overlay: rgba(15, 30, 46, 0.28); /* --fd-overlay, alpha del drawer */ --pf-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* --fd-ease-out */ --pf-dur-fast: 120ms; --pf-dur: 200ms; } .pf { color: var(--pf-ink); } .pf *, .pf-dr *, .pf-sb * { box-sizing: border-box; } /* Il tema sottolinea gli (spesso con `a:hover`, che pesa (0,1,1)): dentro il finder nessun link e' sottolineato, in nessuno stato. `.pf a:hover` pesa (0,2,1) e vince. .pf-dr e .pf-sb vanno elencate: vivono fuori da .pf. */ .pf a, .pf a:hover, .pf a:focus, .pf a:focus-visible, .pf a:active, .pf-dr a, .pf-dr a:hover, .pf-dr a:focus, .pf-dr a:focus-visible, .pf-dr a:active, .pf-sb a, .pf-sb a:hover, .pf-sb a:focus, .pf-sb a:active { text-decoration: none; } .pf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* -------------------------------------------------------------------------- Bottoni -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- Reset dei