/* ========================================================================== FONDOPRO — STYLE.CSS Foglio di stile globale del prototipo statico. Basato su Bootstrap 5.3 (che supporta il theming via CSS variables --bs-*) più un layer di variabili e utility proprietarie del fondo. Sommario: 1. Font (import) 2. Reset leggero cross-browser 3. Design tokens (:root) — colori, tipografia, spaziature, radius, ombre 4. Integrazione variabili Bootstrap (--bs-*) 5. Tipografia istituzionale 6. Elementi base (link, focus, selezione) 7. Classi di utilità colore (testo / sfondo / hover) 8. Utility accessibilità (skip-link, sr-only, reduced motion) ========================================================================== */ /* -------------------------------------------------------------------------- 1. FONT Font istituzionale: Figtree — sans-serif geometrico, contemporaneo e molto leggibile, coerente con il font già usato nel logotipo FondoPro (vedi manuale di marchio). Pesi caricati: 500 (Medium, testi/corpo), 600 (Semibold, usato diffusamente da bottoni/etichette/nav) e 700 (Bold, titoli). Caricato via Google Fonts nell' dell'HTML (vedi index.html): Il fallback stack qui sotto garantisce comunque un rendering coerente nel caso il font non venga caricato (connessione lenta, blocco tracker, ecc.). -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 2. RESET LEGGERO Non sostituisce il reset di Bootstrap (che rimane attivo), ma normalizza alcuni comportamenti che Bootstrap non copre o che vogliamo rendere espliciti e prevedibili su tutti i browser. -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { /* Evita che iOS ingrandisca automaticamente il testo in landscape */ -webkit-text-size-adjust: 100%; /* Scroll fluido per gli anchor link (rispetta comunque prefers-reduced-motion, vedi punto 8) */ scroll-behavior: smooth; /* Compensa l'altezza della testata fissa quando si naviga verso un'ancora (legata al token reale --navbar-height + un piccolo respiro). */ scroll-padding-top: calc(var(--navbar-height) + var(--space-3)); /* Spazio riservato in basso alla barra fissa "Aderisci ora" (68px + 16px di respiro): quando il focus da tastiera porta in vista un elemento, il browser lo tiene sopra la barra invece di lasciarlo coperto (WCAG 2.4.11). Il bottone tondo occupa solo l'angolo in basso a destra e non può mai coprire per intero un elemento, quindi non serve riservargli altro spazio: un valore più alto faceva scorrere la Home quando il focus arrivava ai controlli in fondo all'Hero. */ scroll-padding-bottom: 84px; } body { margin: 0; min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, svg { display: block; max-width: 100%; height: auto; } /* Rimuove lo stile utente di default su pulsanti/campi, la coerenza visiva la definiamo noi tramite Bootstrap + le nostre classi */ button, input, select, textarea { font: inherit; color: inherit; } /* Le tabelle (es. rendimenti dei comparti) ereditano lo spacing del tema */ table { border-collapse: collapse; width: 100%; } /* Rispetta l'utente che ha ridotto le trasparenze / preferisce meno contrasto dinamico: evitiamo qui overlay troppo aggressivi (gestito anche al punto 8) */ /* -------------------------------------------------------------------------- 3. DESIGN TOKENS Unica fonte di verità per i colori istituzionali del fondo. Non usare MAI valori esadecimali "hardcoded" fuori da questo blocco: ogni colore del sito deve richiamare una di queste variabili. -------------------------------------------------------------------------- */ :root { /* --- Colori istituzionali (Palette FondoPro) ------------------------- */ --color-blue-primary: #005191; /* Blu Istituzionale — heading, navbar, CTA primarie */ --color-blue-primary-dark: #003a68; /* variante scura per hover/active su elementi blu */ --color-blue-primary-darker: #00263f; /* variante ancora più scura, per sfondi ampi come la fascia titolo pagina */ --color-blue-primary-darkest: #001a2c; /* variante estrema, per il gradiente della fascia titolo quando serve ancora più scuro */ --color-blue-primary-light: #e6eef5; /* variante chiarissima per sfondi tenui/box informativi */ --color-scudo-ceruleo: #3c7890; /* Comparto SCUDO */ --color-progressione-azzurro:#23acb8; /* Comparto PROGRESSIONE */ --color-espansione-oro: #f0aa00; /* Comparto ESPANSIONE */ --color-gray-light: #c6c6c6; /* Bordi, hover, box di contorno */ /* Bordo dei campi da compilare (input di ricerca): stessa tonalità neutra del grigio sopra, più scura per arrivare a 3,4:1 su bianco — minimo 3:1 richiesto per il contorno dei controlli (WCAG 1.4.11). Il #c6c6c6 si fermava a 1,7:1. */ --color-gray-border: #8a8a8a; --color-gray-lighter: #f2f2f2; /* Sfondi di sezione alternati, molto tenue */ --color-gray-band: #e9ebee; /* Fascia di stacco visivo (es. area grafici) — più percettibile del bianco, ma ancora sobria */ --color-gray-dark: #4a4a4a; /* Testo secondario su sfondo chiaro */ /* Il verde del logo esiste SOLO per riferimento visivo del marchio. Non collegarlo a componenti UI (bottoni, badge, stati, sfondi): su un fondo pensione un verde acceso comunica "allarme/notifica", l'esatto opposto del messaggio istituzionale desiderato. */ --color-logo-green: #95c11f; /* USO ESCLUSIVO: file/marchio del logo */ /* --- Colori testo ------------------------------------------------------ Regola: testo scuro su sfondi chiari, testo bianco solo su sfondi scuri con contrasto verificato (vedi tabella nei commenti del punto 7). */ --color-text-primary: #1a1a1a; /* testo principale (quasi nero, non nero puro: meno affaticante) */ --color-text-secondary: var(--color-gray-dark); --color-text-link: var(--color-blue-primary); --color-text-on-dark: #ffffff; /* testo in negativo su sfondi scuri/blu */ /* --- Tipografia ---------------------------------------------------- */ --font-family-base: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Scala tipografica (rapporto ~1.25, "Major Third" attenuato per la stampa istituzionale) — valori in rem, base 16px. Aumentata del 25% su richiesta esplicita (stesso fattore ovunque, per mantenere invariato il rapporto tra i vari livelli): il corpo testo passa così a 1.375rem, uguale al testo del banner "Riferimenti bancari" in Home, preso come riferimento minimo dal cliente. */ --fs-h1: 3.75rem; /* 60px — titolo hero (scala 1,25x, era 48px) */ --fs-h2: 2.9375rem; /* ~47px — titoli di sezione (scala 1,25x, era 38px) */ --fs-h3: 2.0625rem; /* ~33px — sottotitoli/card (scala 1,25x, era 26px) */ --fs-h4: 1.71875rem;/* ~27.5px (scala 1,25x, era 22px) */ --fs-body: 1.375rem; /* 22px — corpo testo (scala 1,25x, era 17.6px) */ --fs-small:1.203125rem;/* ~19.25px — note, didascalie (scala 1,25x, era 15.4px) */ --fs-caption: 1.03125rem; /* ~16.5px — riferimenti normativi, disclaimer (scala 1,25x, era 13.2px) */ --lh-heading: 1.2; --lh-body: 1.6; /* interlinea generosa: leggibilità per testi normativi lunghi */ /* 400 non è caricato da Google Fonts (solo 500/600/700): il browser lo disegnava già come 500. Il token ora lo dichiara esplicitamente, senza alcun cambiamento visivo. */ --fw-regular: 500; --fw-medium: 500; /* Specifiche: solo Medium 500 e Bold 700. Il "semibold" resta come nome di token (usato in ~30 punti) ma ora vale 700: tutto ciò che era 600 diventa Bold, più marcato. Il 600 non viene più caricato. */ --fw-semibold: 700; --fw-bold: 700; /* --- Spaziature (scala 4px) ------------------------------------------ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 1rem; /* 16px */ --space-4: 1.5rem; /* 24px */ --space-5: 2.5rem; /* 40px */ --space-6: 4rem; /* 64px */ --space-7: 6rem; /* 96px — spaziatura tra sezioni principali */ --space-8: 5rem; /* 80px — spaziatura verticale uniforme delle "aree" della Home (News, Performance, Andamento quote, e future sezioni) */ /* --- Raggi, ombre, transizioni ---------------------------------------- Approccio sobrio e istituzionale: angoli leggermente smussati (non "pillole" da app consumer), ombre discrete, transizioni brevi. */ --radius-sm: 4px; --radius-md: 8px; --radius-pill: 999px; /* riservato a badge/tag puntuali, non ai bottoni principali */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14); /* Ombra "a fondo perduto" (nessun offset x/y, solo blur): si espande identica su tutti e 4 i lati, non un'ombra proiettata verso il basso a destra. Dedicata all'hover di card/elementi interattivi, dove un alone uniforme legge meglio di un'ombra direzionale. */ --shadow-hover: 0 0 24px rgba(0, 0, 0, 0.16); --transition-fast: 150ms ease-in-out; --transition-base: 250ms ease-in-out; /* Altezza di riferimento della navbar, usata anche da scroll-padding-top */ /* Altezza REALE della testata fissa su desktop: topbar (34px) + mainnav (min-height 100px). Era 84px, valore rimasto da prima dell'ingrandimento del logo: faceva partire megamenu e overlay 50px troppo in alto. Il valore mobile (112px) è in navbar.css. NB: l'hero NON usa più questo token per il proprio padding (vedi hero.css), così la posizione approvata di logo e testi non cambia. */ --navbar-height: 134px; /* --- Indicatore di focus da tastiera -------------------------------- Doppio anello: esterno blu istituzionale (8,1:1 su bianco, 6,8:1 sulla fascia grigia) + interno bianco (oltre 11:1 su blu scuri, footer e video). Almeno uno dei due supera sempre 3:1 (WCAG 1.4.11 / 2.4.7), su qualunque sfondo del sito. Sostituisce il Giallo Oro, che su bianco arrivava solo a 2,0:1. */ --focus-ring-outer: var(--color-blue-primary); --focus-ring-inner: #ffffff; --focus-ring: 0 0 0 2px var(--focus-ring-inner); } /* -------------------------------------------------------------------------- 4. INTEGRAZIONE CON BOOTSTRAP 5 Bootstrap 5.3 espone variabili CSS globali (--bs-*) che i suoi componenti consumano internamente. Sovrascrivendole qui, i componenti Bootstrap (bottoni, navbar, badge, alert, ecc.) erediteranno automaticamente la palette del fondo senza bisogno di ricompilare i Sass sorgenti. -------------------------------------------------------------------------- */ :root { --bs-primary: var(--color-blue-primary); --bs-primary-rgb: 0, 81, 145; --bs-secondary: var(--color-scudo-ceruleo); --bs-secondary-rgb: 60, 120, 144; --bs-info: var(--color-progressione-azzurro); --bs-info-rgb: 35, 172, 184; --bs-warning: var(--color-espansione-oro); --bs-warning-rgb: 240, 170, 0; --bs-light: var(--color-gray-lighter); --bs-light-rgb: 242, 242, 242; --bs-dark: var(--color-text-primary); --bs-dark-rgb: 26, 26, 26; --bs-body-font-family: var(--font-family-base); --bs-body-font-size: var(--fs-body); --bs-body-line-height: var(--lh-body); --bs-body-color: var(--color-text-primary); --bs-link-color: var(--color-text-link); --bs-link-hover-color: var(--color-blue-primary-dark); --bs-border-radius: var(--radius-sm); --bs-border-radius-lg: var(--radius-md); } /* -------------------------------------------------------------------------- 5. TIPOGRAFIA ISTITUZIONALE -------------------------------------------------------------------------- */ body { font-family: var(--font-family-base); font-size: var(--fs-body); font-weight: var(--fw-medium); /* Figtree Medium (500): peso di default per tutti i testi/corpo */ line-height: var(--lh-body); color: var(--color-text-primary); background-color: #ffffff; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-family-base); font-weight: var(--fw-bold); /* Figtree Bold (700) */ line-height: var(--lh-heading); color: var(--color-blue-primary); margin-top: 0; margin-bottom: var(--space-3); } h1, .h1 { font-size: var(--fs-h1); } /* H2: NON più in Blu Istituzionale su richiesta — stesso neutro nero-grigio scuro del corpo testo (var(--color-text-primary)), per un contrasto comunque eccellente ma meno "da titolo di sezione a sé". */ h2, .h2 { font-size: var(--fs-h2); color: var(--color-text-primary); } h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); } h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); } /* I titoli in negativo (su hero/sfondi blu) non devono ereditare il colore blu di default: vedi utility .text-on-dark al punto 7 */ p { margin-top: 0; margin-bottom: var(--space-3); max-width: 70ch; /* riga di lunghezza confortevole per la lettura */ } small, .text-small { font-size: var(--fs-small); } .text-caption { font-size: var(--fs-caption); color: var(--color-text-secondary); line-height: 1.5; } /* Numeri tabulari per percentuali/rendimenti: evita che le cifre "ballino" nelle tabelle comparative dei comparti */ .fp-numeric { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); } /* -------------------------------------------------------------------------- 6. ELEMENTI BASE — link, focus, selezione testo -------------------------------------------------------------------------- */ a { color: var(--color-text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--transition-fast); } a:hover { color: var(--color-blue-primary-dark); } /* I link dentro componenti "chip" o card di navigazione spesso non vanno sottolineati: gestito puntualmente dai componenti nei blocchi successivi, non qui a livello globale, per non nascondere sottolineature dove servono davvero a distinguere il testo cliccabile (requisito WCAG 1.4.1). */ /* Stato di focus visibile e coerente su TUTTI gli elementi interattivi: requisito WCAG 2.4.7. Non usiamo mai outline: none senza sostituto. Doppio anello (vedi token --focus-ring-* al punto 3): outline blu esterno + box-shadow bianco che riempie lo spazio dell'outline-offset. .btn / .nav-link / .dropdown-item sono elencati a parte perché Bootstrap li dota di un proprio focus (outline:0 + alone azzurro) con specificità più alta del semplice selettore di elemento. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible { outline: 3px solid var(--focus-ring-outer); outline-offset: 2px; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } /* Elementi circolari: la regola qui sopra imponeva il raggio da 4px anche a loro, trasformandoli in quadrati smussati al focus. Qui restano tondi, e l'anello li segue. */ .fp-hero__video-toggle:focus-visible, .fp-back-to-top:focus-visible, .fp-cta-fab:focus-visible, .fp-video-cover__play:focus-visible { border-radius: 50%; } /* Indirizzi email nei testi: link con icona busta davanti; l'indirizzo non va mai a capo a metà. Nome di classe nato in prose.css, qui perché condiviso anche da FAQ e altre pagine. */ .fp-prose__mail { white-space: nowrap; font-weight: var(--fw-medium); } .fp-prose__mail .bi { margin-right: 0.35em; text-decoration: none; display: inline-block; /* evita che l'icona erediti la sottolineatura */ } ::selection { background-color: var(--color-blue-primary); color: var(--color-text-on-dark); } /* -------------------------------------------------------------------------- 7. UTILITY COLORE — testo / sfondo / hover Ogni combinazione è stata verificata rispetto ai requisiti WCAG 2.1 AA (contrasto minimo 4.5:1 per testo normale, 3:1 per testo grande ≥24px o ≥19px bold, e per componenti grafici/UI). Esito verifiche (testo normale su sfondo pieno): - Bianco su Blu Istituzionale ........ ≈ 8.1:1 → OK (AAA) - Bianco su Ceruleo Scudo ............ ≈ 4.9:1 → OK (AA) - Bianco su Azzurro Progressione ..... ≈ 2.7:1 → NON conforme - Bianco su Giallo Espansione ........ ≈ 2.0:1 → NON conforme - Testo scuro su Grigio Chiaro ....... ≈ 12.3:1 → OK (AAA) - Testo scuro su Azzurro/Giallo ...... > 7:1 → OK (AAA) Di conseguenza: gli sfondi Azzurro Progressione e Giallo Espansione usano SEMPRE testo scuro (classe .fp-bg-* applica già il colore testo corretto in automatico, per evitare errori a valle nei singoli blocchi). -------------------------------------------------------------------------- */ /* -- Testo -- */ .fp-text-blue { color: var(--color-blue-primary) !important; } .fp-text-scudo { color: var(--color-scudo-ceruleo) !important; } .fp-text-progressione { color: var(--color-progressione-azzurro) !important; } .fp-text-espansione { color: var(--color-espansione-oro) !important; } .fp-text-gray { color: var(--color-text-secondary) !important; } .fp-text-on-dark { color: var(--color-text-on-dark) !important; } /* -- Sfondi pieni (accoppiati al colore testo corretto per il contrasto) -- */ .fp-bg-blue { background-color: var(--color-blue-primary) !important; color: var(--color-text-on-dark); } .fp-bg-blue h1, .fp-bg-blue h2, .fp-bg-blue h3, .fp-bg-blue h4 { color: var(--color-text-on-dark); } .fp-bg-scudo { background-color: var(--color-scudo-ceruleo) !important; color: var(--color-text-on-dark); } /* Azzurro e Oro: testo SEMPRE scuro per garantire il contrasto AA */ .fp-bg-progressione { background-color: var(--color-progressione-azzurro) !important; color: var(--color-text-primary); } .fp-bg-espansione { background-color: var(--color-espansione-oro) !important; color: var(--color-text-primary); } .fp-bg-gray-light { background-color: var(--color-gray-light) !important; color: var(--color-text-primary); } .fp-bg-gray-lighter { background-color: var(--color-gray-lighter) !important; color: var(--color-text-primary); } .fp-bg-blue-tint { background-color: var(--color-blue-primary-light) !important; color: var(--color-text-primary); } /* -- Bordi -- */ .fp-border-gray { border: 1px solid var(--color-gray-light) !important; } .fp-border-blue { border: 1px solid var(--color-blue-primary) !important; } /* -- Hover generico per card/box interattivi: vedi lo standard unico più avanti ("STANDARD DI HOVER PER CARD"). Qui c'era una prima versione della stessa regola, sovrascritta da quella: unificate in un solo punto, comportamento invariato. */ /* -------------------------------------------------------------------------- 7bis. LAYOUT CONDIVISO DELLE "AREE" DELLA HOME Classi di utilità pensate per essere riusate identiche su ogni area principale della Home (News, Performance, Andamento quote, e quelle che aggiungeremo in futuro): garantiscono spaziatura verticale e stile dei titoli coerenti senza duplicare le regole in ogni CSS di componente. -------------------------------------------------------------------------- */ /* Spaziatura verticale uniforme di un'intera area/sezione della Home. Applicare insieme alla classe di componente (es.
): il componente gestisce il proprio contenuto interno, questa classe gestisce solo il "respiro" tra un'area e la successiva. */ .home-section { padding-block: var(--space-8); } /* Titolo di area (H2): eredita il colore neutro già impostato di default sugli H2 (vedi punto 5) — nessun override qui, solo il margine. */ .section-heading { margin-bottom: var(--space-2); } /* Sottotitolo di area: sempre più piccolo del titolo, colore neutro (mai blu, per non competere visivamente con l'H2) — sobrio e istituzionale. */ .section-subtitle { font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--color-text-secondary); margin-top: 0; margin-bottom: var(--space-5); } /* -------------------------------------------------------------------------- STANDARD DI HOVER PER CARD/ELEMENTI INTERATTIVI (site-wide) Unico stile di hover riutilizzato ovunque nel sito da una card/elemento cliccabile o interattivo (News, grafici doughnut, e qualunque card futura): ombra morbida più ampia + sollevamento verticale leggero. Deliberatamente più marcato del vecchio hover delle News (quasi impercettibile): -4px anziché -2px, --shadow-lg anziché --shadow-md. -------------------------------------------------------------------------- */ .fp-hover-lift { transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base); } .fp-hover-lift:hover, .fp-hover-lift:focus-within { box-shadow: var(--shadow-hover); border-color: var(--color-blue-primary); /* ereditato dalla prima versione: bordo blu sulle card che ne hanno uno */ transform: translateY(-4px); } @media (prefers-reduced-motion: reduce) { .fp-hover-lift:hover, .fp-hover-lift:focus-within { transform: none; } } /* -- Bottoni primari (integrano/rifiniscono .btn-primary di Bootstrap) -- */ .btn-primary { background-color: var(--color-blue-primary); border-color: var(--color-blue-primary); color: var(--color-text-on-dark); font-weight: var(--fw-semibold); border-radius: var(--radius-sm); padding-block: var(--space-2); padding-inline: var(--space-4); } .btn-primary:hover, .btn-primary:focus-visible { background-color: var(--color-blue-primary-dark); border-color: var(--color-blue-primary-dark); color: var(--color-text-on-dark); } /* Bottone "outline" per CTA su sfondi fotografici scuri (es. hero), coerente con lo screenshot home.png */ .btn-outline-light-fp { background-color: #ffffff; border: 1px solid #ffffff; color: var(--color-blue-primary); font-weight: var(--fw-semibold); border-radius: var(--radius-sm); padding-block: var(--space-2); padding-inline: var(--space-4); transition: background-color var(--transition-fast), color var(--transition-fast); text-shadow: none; } .btn-outline-light-fp:hover, .btn-outline-light-fp:focus-visible { background-color: #ffffff; color: var(--color-blue-primary-dark); } /* -------------------------------------------------------------------------- 8. UTILITY ACCESSIBILITÀ -------------------------------------------------------------------------- */ /* Skip-link: permette a chi naviga da tastiera/screen reader di saltare direttamente al contenuto principale, bypassando la navbar (requisito WCAG 2.4.1). Va abbinato a