/* Fase 2.5.2 fix: se l'utente arriva da dashboard con ?run= o ?site=, nascondo landing immediatamente (prima che JS giri) per evitare il flash. La classe è settata da script inline nel . Il JS rimuovera' poi la classe quando l'audit/loading è attivo. */ html.from-dashboard-action #landing { display: none !important; } /* ═══════════════════════ TOKENS ═══════════════════════ */ :root { --cream: #fafaf7; --cream-soft: #f4f1ea; --cream-deep: #ece6d8; --ink: #0f0f0f; --ink-soft: #3a3a38; /* Fase 5.33: era #737065 (contrasto 4.39 su cream-soft, sotto AA 4.5:1). #6b675c da 5.40 su cream e 5.00 su cream-soft, sopra AA, restando più chiaro di --ink-soft (gerarchia testi preservata). Usato ~240 volte. */ --ink-muted: #6b675c; --border: #d9d4ca; --primary: #1a3a5c; /* Il blu quando fa da FONDO (bottoni, pill piene). In chiaro è lo stesso valore del testo: è scuro, e sta lontano sia dalla crema sia dal bianco. */ --primary-fondo: #1a3a5c; --primary-deep: #0f253d; --terracotta: #a14d3a; /* hover dei CTA terracotta (prima era un hex hardcoded sparso, REGOLA CSS-1) */ --terracotta-hover: #b85a47; /* Fase 5.66: superficie "card bianca" adattiva (bianco in light, scuro in dark). Mancava in index.html: alcuni chip usavano `white` hardcoded che restava bianco in dark. */ --surface: #ffffff; --success: #557152; --warning: #b8732e; /* Tinta scura del warning per il TESTO piccolo su fondo chiaro (AA >=4.5:1); --warning resta per fill/bordi/icone (>=3:1 basta). In dark coincide con --warning. */ --warning-ink: #87521c; --danger: #a14d3a; --r: 14px; --r-lg: 18px; --r-sm: 8px; --shadow-sm: 0 2px 8px rgba(15,23,42,.06); --shadow: 0 8px 24px -8px rgba(15,23,42,.12); --shadow-lg: 0 20px 40px -12px rgba(15,23,42,.18); --ease: cubic-bezier(.4, 0, .2, 1); --font-head: 'Fraunces', 'Times New Roman', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; color-scheme: light; } /* ═══════════════════════ Fase 5.10: DARK MODE ═══════════════════════ 3 modi: auto (default = segue OS), light (forzato), dark (forzato). Toggle in /account. Implementato via [data-theme] sul . I valori semantici (cream/ink/border) cambiano; --primary e --terracotta restano IDENTICI (brand) ma con ombre/border calibrate al fondo scuro. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cream: #14181c; --cream-soft: #1b2026; --cream-deep: #232931; --ink: #f1ece1; --ink-soft: #c9c3b6; --ink-muted: #8b8678; --border: #2f353d; --surface: #1b2026; /* Fase 5.66: superficie card adattiva in dark */ /* In scuro un tono di mezzo non può servire i due ruoli: #6b7f96 stava a circa 4.1 sia dal fondo scuro sia dal bianco, cioe' sotto la soglia in entrambi i versi. Quindi due valori, stessa tinta (212 gradi): --primary schiarito per leggersi COME TESTO sul fondo scuro, --primary-fondo scurito perché l'etichetta chiara sopra si legga. */ --primary: #8696a9; --primary-fondo: #617489; --primary-deep: #82a0c4; --terracotta: #d68a72; /* terracotta schiarita */ --terracotta-hover: #e3a98f; /* hover più chiaro coerente in dark */ --success: #88b282; --warning: #d99c5e; --warning-ink: var(--warning); --danger: #d68a72; --shadow-sm: 0 2px 8px rgba(0,0,0,.4); --shadow: 0 8px 24px -8px rgba(0,0,0,.5); --shadow-lg: 0 20px 40px -12px rgba(0,0,0,.6); color-scheme: dark; } } :root[data-theme="dark"] { --cream: #14181c; --cream-soft: #1b2026; --cream-deep: #232931; --ink: #f1ece1; --ink-soft: #c9c3b6; --ink-muted: #8b8678; --border: #2f353d; --surface: #1b2026; /* Fase 5.66: superficie card adattiva in dark */ --primary: #8696a9; --primary-fondo: #617489; --primary-deep: #82a0c4; --terracotta: #d68a72; --terracotta-hover: #e3a98f; /* hover più chiaro coerente in dark */ --success: #88b282; --warning: #d99c5e; --warning-ink: var(--warning); --danger: #d68a72; --shadow-sm: 0 2px 8px rgba(0,0,0,.4); --shadow: 0 8px 24px -8px rgba(0,0,0,.5); --shadow-lg: 0 20px 40px -12px rgba(0,0,0,.6); color-scheme: dark; } /* light esplicito: vince sempre sui media query auto */ :root[data-theme="light"] { color-scheme: light; } /* Fase 5.10: in dark, fondi "bianchi" hardcoded vanno gestiti. Cards/modals che usavano #fff diventano cream (var). Niente cambio per #ffffff hardcoded in PDF (jsPDF lavora a parte). */ :root[data-theme="dark"] body, @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { background: var(--cream); color: var(--ink); } } /* Soft surface override per dark: ogni `background: #fff` o `white` lasciato hardcoded resta: pulire tutto sarebbe enorme. Aggiungiamo override mirati per i container principali. */ [data-theme="dark"] .dashboard-widget, [data-theme="dark"] .account-section, [data-theme="dark"] .modal-card, [data-theme="dark"] .auth-modal-card, [data-theme="dark"] .agency-table tr, [data-theme="dark"] .user-sites-item, [data-theme="dark"] .user-sites-row, [data-theme="dark"] .sites-skeleton-row, [data-theme="dark"] .agency-cell-scantype, [data-theme="dark"] .reset-card, [data-theme="dark"] .ai-output-gate-card, [data-theme="dark"] .rescan-scope-menu, [data-theme="dark"] .nav-account-dropdown, [data-theme="dark"] .compare-plan, [data-theme="dark"] .credits-topup-card, [data-theme="dark"] .account-invoice-row, /* Fase 5.26 / 5.27: card report/dashboard con background: white -> cream-soft in dark. Fase 5.27: aggiunta la variante @media (prefers-color-scheme: dark) che MANCAVA: gli utenti in dark mode via OS (non via toggle data-theme) non vedevano l'override e le card restavano bianche. Aggiunti anche .pages-list e i pannelli .ai-section/.chat-header (primary-deep -> celeste in dark) che vanno su surface-deep. */ [data-theme="dark"] .sub, [data-theme="dark"] .page-row, [data-theme="dark"] .pages-list, [data-theme="dark"] .chat-bubble, [data-theme="dark"] .chat-empty, [data-theme="dark"] .chat-wrap, [data-theme="dark"] .agency-table-wrap { background: var(--cream-soft); color: var(--ink); } [data-theme="dark"] .ai-section, [data-theme="dark"] .chat-header { background: var(--surface-deep); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sub, :root:not([data-theme="light"]) .page-row, :root:not([data-theme="light"]) .pages-list, :root:not([data-theme="light"]) .chat-bubble, :root:not([data-theme="light"]) .chat-empty, :root:not([data-theme="light"]) .chat-wrap, :root:not([data-theme="light"]) .agency-table-wrap { background: var(--cream-soft); color: var(--ink); } :root:not([data-theme="light"]) .ai-section, :root:not([data-theme="light"]) .chat-header { background: var(--surface-deep); } } /* La chat-bubble dell'utente resta scura (ink) anche in dark: non sovrascrivere */ [data-theme="dark"] .chat-msg.user .chat-bubble { background: var(--surface-deep); color: var(--on-dark); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chat-msg.user .chat-bubble { background: var(--surface-deep); color: var(--on-dark); } } /* Fase 5.95: dark mode fix per i background bianchi NON coperti dalle liste centralizzate (audit testCssDarkModeHardcoded). Doppia forma obbligatoria (toggle manuale + preferenza OS). Non imposto color: i testi usano già var(). */ [data-theme="dark"] .right-slot-select, [data-theme="dark"] .right-slot-btn-action, [data-theme="dark"] .dashboard-sub-reactivate, [data-theme="dark"] .account-plan-action-cancel, [data-theme="dark"] .account-export-btn, [data-theme="dark"] .user-sites-new, [data-theme="dark"] .pd-toggle, [data-theme="dark"] .pd-row, [data-theme="dark"] .issue-pages-more, [data-theme="dark"] .po-extract-btn, [data-theme="dark"] .account-field input:focus, [data-theme="dark"] .account-field select:focus { background: var(--cream-soft); border-color: var(--border); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .right-slot-select, :root:not([data-theme="light"]) .right-slot-btn-action, :root:not([data-theme="light"]) .dashboard-sub-reactivate, :root:not([data-theme="light"]) .account-plan-action-cancel, :root:not([data-theme="light"]) .account-export-btn, :root:not([data-theme="light"]) .user-sites-new, :root:not([data-theme="light"]) .pd-toggle, :root:not([data-theme="light"]) .pd-row, :root:not([data-theme="light"]) .issue-pages-more, :root:not([data-theme="light"]) .po-extract-btn, :root:not([data-theme="light"]) .account-field input:focus, :root:not([data-theme="light"]) .account-field select:focus { background: var(--cream-soft); border-color: var(--border); } } /* Fase 5.10.2: surface override estesi (white residui non coperti dalla lista P0). Coprono i bottoni "ghost" e i form elements (input/select/ textarea) che usavano background:#fff hardcoded ovunque. */ [data-theme="dark"] .credits-topup-btn, [data-theme="dark"] .account-theme-btn, [data-theme="dark"] .admin-test-plan-btn, [data-theme="dark"] .dashboard-scan-form input, [data-theme="dark"] .dashboard-scan-form input[type="text"], [data-theme="dark"] .sites-manage-add-form input, [data-theme="dark"] .account-input, [data-theme="dark"] .auth-field input, [data-theme="dark"] .form-input, [data-theme="dark"] .agency-row-btn, [data-theme="dark"] .agency-action-btn, [data-theme="dark"] .user-sites-trash-btn, [data-theme="dark"] .user-sites-confirm-btn, [data-theme="dark"] .sites-manage-add-btn, [data-theme="dark"] .sites-manage-add-cancel, [data-theme="dark"] .dashboard-scan-picker-chip, [data-theme="dark"] .account-invoice-btn, [data-theme="dark"] .pdf-preview-btn-ghost, [data-theme="dark"] .agency-overview, [data-theme="dark"] .agency-metric, [data-theme="dark"] .ai-panel-drawer, [data-theme="dark"] .toast, [data-theme="dark"] .palette-card, [data-theme="dark"] .dashboard-scan-scope, [data-theme="dark"] .dashboard-scan-scope-btn, [data-theme="dark"] .audit-type-toggle, [data-theme="dark"] .audit-type-toggle button, [data-theme="dark"] select, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="url"], [data-theme="dark"] textarea { background: var(--cream-soft) !important; color: var(--ink); border-color: var(--border); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .credits-topup-btn, :root:not([data-theme="light"]) .account-theme-btn, :root:not([data-theme="light"]) .admin-test-plan-btn, :root:not([data-theme="light"]) .dashboard-scan-form input, :root:not([data-theme="light"]) .sites-manage-add-form input, :root:not([data-theme="light"]) .agency-row-btn, :root:not([data-theme="light"]) .agency-action-btn, :root:not([data-theme="light"]) .user-sites-trash-btn, :root:not([data-theme="light"]) .user-sites-confirm-btn, :root:not([data-theme="light"]) .sites-manage-add-btn, :root:not([data-theme="light"]) .sites-manage-add-cancel, :root:not([data-theme="light"]) .dashboard-scan-picker-chip, :root:not([data-theme="light"]) .account-invoice-btn, :root:not([data-theme="light"]) .pdf-preview-btn-ghost, :root:not([data-theme="light"]) .agency-overview, :root:not([data-theme="light"]) .agency-metric, :root:not([data-theme="light"]) .toast, :root:not([data-theme="light"]) .palette-card, :root:not([data-theme="light"]) .dashboard-scan-scope, :root:not([data-theme="light"]) .dashboard-scan-scope-btn, :root:not([data-theme="light"]) .audit-type-toggle, :root:not([data-theme="light"]) .audit-type-toggle button, :root:not([data-theme="light"]) select, :root:not([data-theme="light"]) input[type="text"], :root:not([data-theme="light"]) input[type="email"], :root:not([data-theme="light"]) input[type="password"], :root:not([data-theme="light"]) input[type="url"], :root:not([data-theme="light"]) textarea { background: var(--cream-soft) !important; color: var(--ink); border-color: var(--border); } } /* Fase 5.31: dark-mode sweep. Card, pannelli e tooltip con background bianco hardcoded che restavano chiari in dark mode (testo var(--ink) chiaro su bianco = invisibile). Aggiunti anche .account-input/.auth-field input/ .form-input/.ai-panel-drawer che erano nel blocco [data-theme] ma mancavano dal twin @media (utenti con dark mode da preferenza OS li vedevano bianchi). Regola d'oro: ogni override dark in entrambe le forme (toggle + OS). */ [data-theme="dark"] .tour-tooltip, [data-theme="dark"] .dashboard-subscription-card, [data-theme="dark"] .dashboard-improve-item, [data-theme="dark"] .dashboard-guide-card, [data-theme="dark"] .ai-panel-head, [data-theme="dark"] .ai-panel-action, [data-theme="dark"] .vertical-selector, [data-theme="dark"] .chat-input input, [data-theme="dark"] .account-input, [data-theme="dark"] .auth-field input, [data-theme="dark"] .form-input { background: var(--cream-soft) !important; color: var(--ink); border-color: var(--border); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tour-tooltip, :root:not([data-theme="light"]) .dashboard-subscription-card, :root:not([data-theme="light"]) .dashboard-improve-item, :root:not([data-theme="light"]) .dashboard-guide-card, :root:not([data-theme="light"]) .ai-panel-head, :root:not([data-theme="light"]) .ai-panel-action, :root:not([data-theme="light"]) .vertical-selector, :root:not([data-theme="light"]) .chat-input input, :root:not([data-theme="light"]) .account-input, :root:not([data-theme="light"]) .auth-field input, :root:not([data-theme="light"]) .form-input, :root:not([data-theme="light"]) .ai-panel-drawer { background: var(--cream-soft) !important; color: var(--ink); border-color: var(--border); } } /* Stati attivi: in dark, il selected/active rimane primary fill */ [data-theme="dark"] .account-theme-btn.is-active, [data-theme="dark"] .admin-test-plan-btn.is-active, [data-theme="dark"] .dashboard-scan-picker-chip.is-active { background: var(--primary-fondo) !important; color: #fff; border-color: var(--primary); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .account-theme-btn.is-active, :root:not([data-theme="light"]) .admin-test-plan-btn.is-active, :root:not([data-theme="light"]) .dashboard-scan-picker-chip.is-active { background: var(--primary-fondo) !important; color: #fff; border-color: var(--primary); } } /* Fase 5.28: i toggle con indicatore scorrevole (.dashboard-scan-scope, .audit-type-toggle, .hero-explain-tabs) NON devono avere background solido sul bottone attivo (creava un doppio strato che lasciava intravedere l'indicatore ::before sotto). Inoltre l'indicatore ::before usava var(--ink) che in dark diventa cream chiaro = "pezzo bianco sotto". Forziamo: bottone attivo trasparente + indicatore su --primary. */ [data-theme="dark"] .dashboard-scan-scope::before, [data-theme="dark"] .audit-type-toggle::before, [data-theme="dark"] .hero-explain-tabs::before, [data-theme="dark"] .demo-scope-toggle::before { background: var(--primary-fondo); } [data-theme="dark"] .dashboard-scan-scope-btn.active, [data-theme="dark"] .audit-type-toggle.has-indicator button.active, [data-theme="dark"] .hero-explain-tabs.has-indicator button.active { background: transparent !important; color: var(--on-dark); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dashboard-scan-scope::before, :root:not([data-theme="light"]) .audit-type-toggle::before, :root:not([data-theme="light"]) .hero-explain-tabs::before, :root:not([data-theme="light"]) .demo-scope-toggle::before { background: var(--primary-fondo); } :root:not([data-theme="light"]) .dashboard-scan-scope-btn.active, :root:not([data-theme="light"]) .audit-type-toggle.has-indicator button.active, :root:not([data-theme="light"]) .hero-explain-tabs.has-indicator button.active { background: transparent !important; color: var(--on-dark); } } /* Fase 5.29: superfici bianche residue del REPORT logged-in viste dagli screenshot in dark mode (OS): - .pdf-btn (bottone "Scarica PDF" header report) -> bianco illeggibile - .issues (pannello "Cosa migliorare") -> bianco con titoli cream invisibili - .palette-option (card "Personalizza il PDF") -> bianche - .loading (overlay scansione) -> rgba bianco, sfondo chiaro dietro il card - [data-tooltip]::after -> bg var(--ink) cream in dark = cream-on-cream Tutte con entrambe le varianti (toggle + OS-media). */ [data-theme="dark"] .pdf-btn, [data-theme="dark"] .issues, [data-theme="dark"] .palette-option { background: var(--cream-soft); color: var(--ink); } [data-theme="dark"] .loading { background: rgba(20, 24, 28, 0.96); } [data-theme="dark"] [data-tooltip]:hover::after, [data-theme="dark"] [data-tooltip]:focus-visible::after { background: var(--surface-deep); color: var(--on-dark); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pdf-btn, :root:not([data-theme="light"]) .issues, :root:not([data-theme="light"]) .palette-option { background: var(--cream-soft); color: var(--ink); } :root:not([data-theme="light"]) .loading { background: rgba(20, 24, 28, 0.96); } :root:not([data-theme="light"]) [data-tooltip]:hover::after, :root:not([data-theme="light"]) [data-tooltip]:focus-visible::after { background: var(--surface-deep); color: var(--on-dark); } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dashboard-widget, :root:not([data-theme="light"]) .account-section, :root:not([data-theme="light"]) .modal-card, :root:not([data-theme="light"]) .auth-modal-card, :root:not([data-theme="light"]) .agency-table tr, :root:not([data-theme="light"]) .user-sites-item, :root:not([data-theme="light"]) .user-sites-row, :root:not([data-theme="light"]) .sites-skeleton-row, :root:not([data-theme="light"]) .agency-cell-scantype, :root:not([data-theme="light"]) .reset-card, :root:not([data-theme="light"]) .ai-output-gate-card, :root:not([data-theme="light"]) .rescan-scope-menu, :root:not([data-theme="light"]) .nav-account-dropdown, :root:not([data-theme="light"]) .compare-plan, :root:not([data-theme="light"]) .credits-topup-card, :root:not([data-theme="light"]) .account-invoice-row, :root:not([data-theme="light"]) .sub, :root:not([data-theme="light"]) .page-row, :root:not([data-theme="light"]) .chat-bubble, :root:not([data-theme="light"]) .chat-empty, :root:not([data-theme="light"]) .chat-wrap, :root:not([data-theme="light"]) .agency-table-wrap { background: var(--cream-soft); color: var(--ink); } } /* Fase 5.26: .ai-section / .ai-output / .chat-header usano background: var(--primary-deep) con testo cream (sono "feature panel scuri"). In dark --primary-deep diventa azzurro pallido -> pannello celeste washed (vedi screenshot AI Lab/Chat). Forziamo --surface-deep che resta navy scuro in entrambi i temi. */ [data-theme="dark"] .ai-section, [data-theme="dark"] .ai-output, [data-theme="dark"] .chat-header { background: var(--surface-deep); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ai-section, :root:not([data-theme="light"]) .ai-output, :root:not([data-theme="light"]) .chat-header { background: var(--surface-deep); } } /* ═══════════════════════ Fase 5.12.4: DARK MODE FIXES LANDING ═══════════════════════ La landing aveva ancora molti card con `background: white` hardcoded che in dark mode restavano bianchi: il testo color(--ink) diventato cream era invisibile. Inoltre `--primary-deep` in dark valeva #7aa3d4 (azzurro pallido): tutti i container che lo usavano come BG diventavano celesti washed-out. Qui i fix mirati per le sezioni della home (problem, social-proof, seogeo, hero-visual, demo dashboard/scan, score-row). */ /* "Dark navy" che resta scuro anche in dark mode: lo usiamo per i container "feature dark" (hero-visual AUDIT DEMO, score-row, GEO card, score row demo). --on-dark: testo SEMPRE chiaro (non cambia con tema) per uso su surface-deep. Fix critico: prima molti elementi usavano color: var(--on-dark), che in dark diventava #14181c (nero) -> testo nero su navy = invisibile. */ :root { --surface-deep: #0f253d; --on-dark: #fafaf7; --on-dark-soft: rgba(250, 250, 247, 0.78); --on-dark-muted: rgba(250, 250, 247, 0.55); } /* --surface-deep-hover: hover dei CTA primari in dark. Prima l'hover virava a var(--terracotta) (#d68a72) con testo chiaro = contrasto ~2.7:1 (sotto AA). Un navy leggermente più chiaro mantiene il feedback hover ma testo chiaro leggibile (#fafaf7 su #223449 ~11:1). */ [data-theme="dark"] { --surface-deep: #182532; --surface-deep-hover: #223449; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-deep: #182532; --surface-deep-hover: #223449; } } /* Card bianche → cream-soft in dark */ [data-theme="dark"] .problem-card, [data-theme="dark"] .social-proof-quote, [data-theme="dark"] .seogeo-card, [data-theme="dark"] .demo-sites-card, [data-theme="dark"] .demo-pro-site, [data-theme="dark"] .demo-agency-metric, [data-theme="dark"] .demo-agency-table-wrap, [data-theme="dark"] .demo-agency-action, [data-theme="dark"] .demo-scan-sub, [data-theme="dark"] .demo-pro-arrow, [data-theme="dark"] .demo-pro-trash, [data-theme="dark"] .demo-saved-chip, [data-theme="dark"] .demo-input, [data-theme="dark"] .demo-add-site-btn { background: var(--cream-soft); color: var(--ink); border-color: var(--border); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .problem-card, :root:not([data-theme="light"]) .social-proof-quote, :root:not([data-theme="light"]) .seogeo-card, :root:not([data-theme="light"]) .demo-sites-card, :root:not([data-theme="light"]) .demo-pro-site, :root:not([data-theme="light"]) .demo-agency-metric, :root:not([data-theme="light"]) .demo-agency-table-wrap, :root:not([data-theme="light"]) .demo-agency-action, :root:not([data-theme="light"]) .demo-scan-sub, :root:not([data-theme="light"]) .demo-pro-arrow, :root:not([data-theme="light"]) .demo-pro-trash, :root:not([data-theme="light"]) .demo-saved-chip, :root:not([data-theme="light"]) .demo-input, :root:not([data-theme="light"]) .demo-add-site-btn { background: var(--cream-soft); color: var(--ink); border-color: var(--border); } } /* Bordo terracotta a sinistra delle quote: in dark resta visibile */ [data-theme="dark"] .social-proof-quote { border-left-color: var(--terracotta); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .social-proof-quote { border-left-color: var(--terracotta); } } /* Container "dark navy" che usavano --primary-deep (in dark sarebbe celeste). Forziamo --surface-deep così restano coerentemente scuri in entrambi i temi. */ [data-theme="dark"] .hero-visual, [data-theme="dark"] .score-row, [data-theme="dark"] .demo-score-row, [data-theme="dark"] .demo-scan-score-row, [data-theme="dark"] .seogeo-card.geo-card { background: var(--surface-deep); color: var(--on-dark); border-color: rgba(255,255,255,0.08); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-visual, :root:not([data-theme="light"]) .score-row, :root:not([data-theme="light"]) .demo-score-row, :root:not([data-theme="light"]) .demo-scan-score-row, :root:not([data-theme="light"]) .seogeo-card.geo-card { background: var(--surface-deep); color: var(--on-dark); border-color: rgba(255,255,255,0.08); } } /* Il light mode usa primary-deep originale (navy #0f253d): lascio invariato */ /* Statement card "Pensato per chi ha un mestiere..." in dark resta cream-deep */ [data-theme="dark"] .hero-statement, [data-theme="dark"] .hero-statement-card { background: var(--cream-soft); color: var(--ink); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-statement, :root:not([data-theme="light"]) .hero-statement-card { background: var(--cream-soft); color: var(--ink); } } /* SEO badge: in dark il --primary diventa celeste, su white card invisibile. La pill SEO mantiene navy scuro per restare leggibile. */ [data-theme="dark"] .seogeo-badge.seo { background: var(--surface-deep); color: var(--on-dark); border: 1px solid rgba(250,250,247,0.18); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seogeo-badge.seo { background: var(--surface-deep); color: var(--on-dark); border: 1px solid rgba(250,250,247,0.18); } } /* Toggle Analizza nelle card demo: in dark il pill ink diventa cream chiaro. Forziamo surface-deep così il bottone resta visibile. */ [data-theme="dark"] .demo-analizza-btn, [data-theme="dark"] .demo-scope-toggle::before { background: var(--surface-deep); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .demo-analizza-btn, :root:not([data-theme="light"]) .demo-scope-toggle::before { background: var(--surface-deep); } } /* Subscores demo: i numeri "good/warn/bad" usano success/warning/danger che in dark sono colori brand chiari, leggibili su cream-soft. Niente fix. */ /* ═══════════════ Fase 5.12.8: dark mode fix critici (testi su navy) ═══════════════ In dark `var(--cream)` diventa #14181c (quasi nero). Tutti i testi su container "dark surface" (score-row, hero-visual, GEO card, demo-score-row, demo-scan-score-row) che usavano color:var(--cream) diventavano invisibili. Forziamo --on-dark (#fafaf7 fissato) sui figli di questi container in dark. */ [data-theme="dark"] .hero-visual, [data-theme="dark"] .hero-visual *, [data-theme="dark"] .score-row, [data-theme="dark"] .score-row *, [data-theme="dark"] .demo-score-row, [data-theme="dark"] .demo-score-row *, [data-theme="dark"] .demo-scan-score-row, [data-theme="dark"] .demo-scan-score-row *, [data-theme="dark"] .seogeo-card.geo-card, [data-theme="dark"] .seogeo-card.geo-card * { color: var(--on-dark); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-visual, :root:not([data-theme="light"]) .hero-visual *, :root:not([data-theme="light"]) .score-row, :root:not([data-theme="light"]) .score-row *, :root:not([data-theme="light"]) .demo-score-row, :root:not([data-theme="light"]) .demo-score-row *, :root:not([data-theme="light"]) .demo-scan-score-row, :root:not([data-theme="light"]) .demo-scan-score-row *, :root:not([data-theme="light"]) .seogeo-card.geo-card, :root:not([data-theme="light"]) .seogeo-card.geo-card * { color: var(--on-dark); } } /* Eccezione: numeri val.bad/warn/ok in hero-visual conservano colori brand */ [data-theme="dark"] .hv-row .val.bad { color: #f6a890; } [data-theme="dark"] .hv-row .val.warn { color: #f3c98e; } [data-theme="dark"] .hv-row .val.ok { color: #a3c79f; } [data-theme="dark"] .hv-row .label { color: var(--on-dark-soft); } [data-theme="dark"] .hv-score-label { color: var(--on-dark-muted); } [data-theme="dark"] .score-row .score-context, [data-theme="dark"] .score-row .score-summary p, [data-theme="dark"] .score-label, [data-theme="dark"] .demo-score-label, [data-theme="dark"] .demo-scan-score-label { color: var(--on-dark-soft); } [data-theme="dark"] .score-row .score-context-bench, [data-theme="dark"] .score-row .demo-scan-summary p { color: var(--on-dark-muted); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hv-row .val.bad { color: #f6a890; } :root:not([data-theme="light"]) .hv-row .val.warn { color: #f3c98e; } :root:not([data-theme="light"]) .hv-row .val.ok { color: #a3c79f; } :root:not([data-theme="light"]) .hv-row .label { color: var(--on-dark-soft); } :root:not([data-theme="light"]) .hv-score-label { color: var(--on-dark-muted); } :root:not([data-theme="light"]) .score-row .score-context, :root:not([data-theme="light"]) .score-row .score-summary p, :root:not([data-theme="light"]) .score-label, :root:not([data-theme="light"]) .demo-score-label, :root:not([data-theme="light"]) .demo-scan-score-label { color: var(--on-dark-soft); } :root:not([data-theme="light"]) .score-row .score-context-bench { color: var(--on-dark-muted); } } /* Trust strip ora light (cream-soft) anche in dark via var: niente override necessari, --cream-soft diventa #1b2026 in dark e i numeri --primary restano leggibili come blu schiarito. */ /* Navbar sticky con bg cream HARDCODATO (rgba 250,250,247): override dark */ [data-theme="dark"] .nav { background: rgba(20, 24, 28, 0.92); } [data-theme="dark"] .nav.scrolled { border-bottom-color: var(--border); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav { background: rgba(20, 24, 28, 0.92); } :root:not([data-theme="light"]) .nav.scrolled { border-bottom-color: var(--border); } } /* CTA finale (.cta-final): in light usa var(--ink) bg (scuro) + var(--cream) text (chiaro). In dark var(--ink) diventa chiaro e var(--cream) scuro -> il p hardcoded rgba(250,250,247,0.7) diventa cream chiaro su bg cream chiaro = INVISIBILE. Forziamo dark surface in dark. */ [data-theme="dark"] .cta-final { background: var(--surface-deep); color: var(--on-dark); } [data-theme="dark"] .cta-final h2 { color: var(--on-dark); } [data-theme="dark"] .cta-final p { color: var(--on-dark-soft); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cta-final { background: var(--surface-deep); color: var(--on-dark); } :root:not([data-theme="light"]) .cta-final h2 { color: var(--on-dark); } :root:not([data-theme="light"]) .cta-final p { color: var(--on-dark-soft); } } /* Seogeo SEO card (lato bianco): titolo h3 e p devono avere contrasto su cream-soft. Usavano var(--ink) gia, ma alcuni h3 hanno color hardcoded. */ [data-theme="dark"] .seogeo-card h3, [data-theme="dark"] .seogeo-card .seogeo-tagline, [data-theme="dark"] .seogeo-card p, [data-theme="dark"] .seogeo-card .seogeo-list li, [data-theme="dark"] .seogeo-card .seogeo-list li strong { color: var(--ink); } [data-theme="dark"] .seogeo-card.geo-card h3, [data-theme="dark"] .seogeo-card.geo-card .seogeo-tagline, [data-theme="dark"] .seogeo-card.geo-card p, [data-theme="dark"] .seogeo-card.geo-card .seogeo-list li { color: var(--on-dark); } [data-theme="dark"] .seogeo-card.geo-card .seogeo-tagline { color: #f6a890; } [data-theme="dark"] .seogeo-card.geo-card .seogeo-list li strong { color: var(--on-dark); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seogeo-card h3, :root:not([data-theme="light"]) .seogeo-card .seogeo-tagline, :root:not([data-theme="light"]) .seogeo-card p, :root:not([data-theme="light"]) .seogeo-card .seogeo-list li, :root:not([data-theme="light"]) .seogeo-card .seogeo-list li strong { color: var(--ink); } :root:not([data-theme="light"]) .seogeo-card.geo-card h3, :root:not([data-theme="light"]) .seogeo-card.geo-card .seogeo-tagline, :root:not([data-theme="light"]) .seogeo-card.geo-card p, :root:not([data-theme="light"]) .seogeo-card.geo-card .seogeo-list li { color: var(--on-dark); } :root:not([data-theme="light"]) .seogeo-card.geo-card .seogeo-tagline { color: #f6a890; } } /* Mockup demo-scan: testi che ereditano color var(--cream) ora vivono su demo-scan-panel che ha bg --cream (scuro in dark). Forza var(--ink) sui testi descendenti che NON sono dentro lo score-row blu. */ [data-theme="dark"] .demo-scan-app-header h3, [data-theme="dark"] .demo-scan-issues-head h5, [data-theme="dark"] .demo-scan-issue-body h6, [data-theme="dark"] .demo-scan-tab.active, [data-theme="dark"] .demo-scan-sub-val, [data-theme="dark"] .demo-issues-block-title, [data-theme="dark"] .demo-issue-content h4, [data-theme="dark"] .demo-issue-content h5, [data-theme="dark"] .demo-pro-site-name, [data-theme="dark"] .demo-sites-title, [data-theme="dark"] .demo-dash-greeting, [data-theme="dark"] .demo-agency-metric-value { color: var(--ink); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .demo-scan-app-header h3, :root:not([data-theme="light"]) .demo-scan-issues-head h5, :root:not([data-theme="light"]) .demo-scan-issue-body h6, :root:not([data-theme="light"]) .demo-scan-tab.active, :root:not([data-theme="light"]) .demo-scan-sub-val, :root:not([data-theme="light"]) .demo-issues-block-title, :root:not([data-theme="light"]) .demo-issue-content h4, :root:not([data-theme="light"]) .demo-issue-content h5, :root:not([data-theme="light"]) .demo-pro-site-name, :root:not([data-theme="light"]) .demo-sites-title, :root:not([data-theme="light"]) .demo-dash-greeting, :root:not([data-theme="light"]) .demo-agency-metric-value { color: var(--ink); } } /* Eccezione: i numeri good/warn/bad nei subscores demo restano colorati */ [data-theme="dark"] .demo-scan-sub-val.good, [data-theme="dark"] .demo-sub-val.good { color: var(--success); } [data-theme="dark"] .demo-scan-sub-val.warn, [data-theme="dark"] .demo-sub-val.warn { color: var(--warning); } [data-theme="dark"] .demo-scan-sub-val.bad, [data-theme="dark"] .demo-sub-val.bad { color: var(--danger); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .demo-scan-sub-val.good, :root:not([data-theme="light"]) .demo-sub-val.good { color: var(--success); } :root:not([data-theme="light"]) .demo-scan-sub-val.warn, :root:not([data-theme="light"]) .demo-sub-val.warn { color: var(--warning); } :root:not([data-theme="light"]) .demo-scan-sub-val.bad, :root:not([data-theme="light"]) .demo-sub-val.bad { color: var(--danger); } } /* ═══════════════ Fase 5.12.6: dark mode round 2 (audit landing) ═══════════════ Altre classi della landing con background:white/#fff hardcoded che restavano bianche in dark. */ [data-theme="dark"] .hero-form, [data-theme="dark"] .hero-explain-tabs, [data-theme="dark"] .sector-prepicker-options button, [data-theme="dark"] .sector-prepicker-chosen, [data-theme="dark"] .solution-visual, [data-theme="dark"] .plan, [data-theme="dark"] .faq-item, [data-theme="dark"] .about-contacts, [data-theme="dark"] .onboarding-progress-step, [data-theme="dark"] .onboarding-step, [data-theme="dark"] .onboarding-form input, [data-theme="dark"] .onboarding-sector, [data-theme="dark"] .onboarding-report-issues li { background: var(--cream-soft); color: var(--ink); border-color: var(--border); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-form, :root:not([data-theme="light"]) .hero-explain-tabs, :root:not([data-theme="light"]) .sector-prepicker-options button, :root:not([data-theme="light"]) .sector-prepicker-chosen, :root:not([data-theme="light"]) .solution-visual, :root:not([data-theme="light"]) .plan, :root:not([data-theme="light"]) .faq-item, :root:not([data-theme="light"]) .about-contacts, :root:not([data-theme="light"]) .onboarding-progress-step, :root:not([data-theme="light"]) .onboarding-step, :root:not([data-theme="light"]) .onboarding-form input, :root:not([data-theme="light"]) .onboarding-sector, :root:not([data-theme="light"]) .onboarding-report-issues li { background: var(--cream-soft); color: var(--ink); border-color: var(--border); } } /* (Rimosso: vecchio dark override .dev-code-block/.dev-params-table/.dev-tab/.dev-copy-btn del mockup Fase 5.20. Forzava .dev-code-block a var(--cream-soft) !important in dark, rendendo chiaro il terminale del nuovo /developers redesign. .dev-tab/.dev-params-table non esistono più; .dev-code-block ora è #14181c fisso, .dev-copy-btn ha le sue regole.) */ /* Plan-card: bordo featured terracotta + text discendenti restano leggibili */ [data-theme="dark"] .plan h3, [data-theme="dark"] .plan-name, [data-theme="dark"] .plan-price, [data-theme="dark"] .plan-feature, [data-theme="dark"] .faq-item summary, [data-theme="dark"] .faq-item .answer-wrap, [data-theme="dark"] .solution-visual h4, [data-theme="dark"] .solution-visual p { color: var(--ink); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plan h3, :root:not([data-theme="light"]) .plan-name, :root:not([data-theme="light"]) .plan-price, :root:not([data-theme="light"]) .plan-feature, :root:not([data-theme="light"]) .faq-item summary, :root:not([data-theme="light"]) .faq-item .answer-wrap, :root:not([data-theme="light"]) .solution-visual h4, :root:not([data-theme="light"]) .solution-visual p { color: var(--ink); } } /* Fase 5.10: focus ring globale consistente (a11y). Override del default browser, terracotta brand, offset 2px, no shadow blur. */ *:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; } /* Fase 5.10: skip-to-content link per screen reader + keyboard nav. Invisibile finché non riceve focus (Tab), poi appare in alto a sinistra. */ .skip-to-content { position: absolute; top: -100px; left: 16px; background: var(--primary-fondo); color: #fff; padding: 10px 16px; border-radius: 8px; font-family: var(--font-body); font-weight: 600; font-size: 14px; text-decoration: none; z-index: 99999; transition: top 0.2s var(--ease); } .skip-to-content:focus { top: 16px; } /* Fase 5.10: theme picker in /account (3 chip Auto/Chiaro/Scuro). */ .account-theme-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--border); background: var(--cream-soft); color: var(--ink); border-radius: 10px; cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 600; transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease); } [data-theme="dark"] .account-theme-btn { background: var(--cream-soft); } .account-theme-btn:hover { border-color: var(--ink-muted); } .account-theme-btn.is-active { background: var(--primary-fondo); color: #fff; border-color: var(--primary); } .account-theme-btn.is-active svg { stroke: #fff; } /* Fase 5.10.1: PDF preview modal. Iframe + 2 azioni. */ .pdf-preview-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); z-index: 20000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease); } .pdf-preview-overlay.is-open { opacity: 1; pointer-events: auto; } .pdf-preview-overlay[hidden] { display: none !important; } .pdf-preview-panel { width: 100%; max-width: 900px; height: 90vh; background: var(--cream); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; } .pdf-preview-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border); } .pdf-preview-head h3 { margin: 0; font-family: var(--font-head); font-size: 18px; color: var(--ink); font-weight: 700; } .pdf-preview-close { background: transparent; border: none; cursor: pointer; padding: 4px; border-radius: 4px; color: var(--ink-muted); display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; } /* Hover con token, non con un rgba navy fisso: su fondo scuro un velo navy al 6% era praticamente invisibile e la X non dava feedback in dark mode. */ .pdf-preview-close:hover { color: var(--ink); background: var(--cream-soft); } .pdf-preview-body { flex: 1; min-height: 0; background: #525659; display: flex; } .pdf-preview-body iframe { flex: 1; border: none; width: 100%; height: 100%; } .pdf-preview-actions { display: flex; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); justify-content: flex-end; } .pdf-preview-btn { padding: 10px 18px; border-radius: 10px; font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; transition: background 0.18s var(--ease); } .pdf-preview-btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--ink); } .pdf-preview-btn-ghost:hover { background: rgba(15, 37, 61, 0.06); } .pdf-preview-btn-primary { background: var(--primary-fondo); color: #fff; border: 1px solid var(--primary); } .pdf-preview-btn-primary:hover { background: var(--primary-deep); } @media (max-width: 640px) { .pdf-preview-overlay { padding: 0; } .pdf-preview-panel { max-width: 100%; height: 100vh; border-radius: 0; } .pdf-preview-actions { flex-direction: column-reverse; } .pdf-preview-btn { width: 100%; } } /* Fase 5.10: Cmd+K command palette (search rapido siti+azioni). */ .cmdk-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 20000; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; opacity: 0; pointer-events: none; transition: opacity 0.18s var(--ease); } .cmdk-overlay.is-open { opacity: 1; pointer-events: auto; } /* Gotcha CLAUDE.md: l'attributo hidden perde contro display:flex. Senza questa regola il dialog aria-modal resta nell'accessibility tree da chiuso (come il fratello .pdf-preview-overlay[hidden] a riga 1180). */ .cmdk-overlay[hidden] { display: none !important; } .cmdk-panel { width: 100%; max-width: 560px; background: var(--cream); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; transform: translateY(-8px); transition: transform 0.18s var(--ease); } .cmdk-overlay.is-open .cmdk-panel { transform: translateY(0); } .cmdk-input { width: 100%; padding: 18px 22px; border: none; border-bottom: 1px solid var(--border); background: transparent; font-family: var(--font-body); font-size: 16px; color: var(--ink); outline: none; } .cmdk-input::placeholder { color: var(--ink-muted); } .cmdk-results { overflow-y: auto; padding: 6px; } .cmdk-group-label { padding: 8px 14px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); font-weight: 600; } .cmdk-item { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 8px; cursor: pointer; font-family: var(--font-body); font-size: 14px; color: var(--ink); background: transparent; border: none; width: 100%; text-align: left; transition: background 0.15s var(--ease); } .cmdk-item.is-selected, .cmdk-item:hover { background: rgba(26, 58, 92, 0.08); } .cmdk-item-meta { margin-left: auto; color: var(--ink-muted); font-size: 12px; } .cmdk-empty { padding: 24px; text-align: center; color: var(--ink-muted); font-size: 13.5px; } .cmdk-footer { padding: 10px 16px; border-top: 1px solid var(--border); font-size: 11px; color: var(--ink-muted); display: flex; gap: 14px; justify-content: space-between; } .cmdk-kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 10.5px; font-family: ui-monospace, Menlo, monospace; } @media (max-width: 540px) { .cmdk-overlay { padding-top: 8vh; } .cmdk-panel { max-width: calc(100% - 24px); } .cmdk-input { font-size: 16px; } } /* Fase 5.10 / 5.12.7: contesto score con benchmark settore. Stile base (per card dashboard): muted + italic. La regola sotto .score-row sovrascrive per il contesto report (sfondo navy). */ .score-context { font-family: var(--font-body); font-size: 13.5px; color: var(--ink-soft); text-align: center; margin: 10px auto 0; max-width: 360px; line-height: 1.5; } .score-context strong { color: var(--ink); font-weight: 600; } .score-context-delta { color: var(--terracotta); font-weight: 700; } .score-context-delta.up { color: var(--success); } .score-context-bench { display: inline-block; margin-top: 4px; font-size: 12.5px; color: var(--ink-muted); font-weight: 400; } /* Quando il .score-context sta dentro .score-row (sfondo primary-deep navy nel report), il colore --ink-soft scompare. Usiamo cream con alpha ridotta + niente max-width + text-align coerente con il resto del summary (left), senza italic eccessivo. */ .score-row .score-context { color: rgba(250, 250, 247, 0.78); text-align: left; max-width: none; margin: 12px 0 0; font-style: normal; font-size: 14px; } .score-row .score-context strong { color: var(--on-dark); font-weight: 600; } .score-row .score-context-delta { color: #f3c98e; font-weight: 600; } .score-row .score-context-delta.up { color: #a3c79f; } .score-row .score-context-bench { color: rgba(250, 250, 247, 0.55); } /* Fase 5.10: loading steps fake-progress durante audit. */ .audit-loading-steps { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; font-family: var(--font-body); font-size: 13px; color: var(--ink-muted); max-width: 320px; margin-left: auto; margin-right: auto; text-align: left; } .audit-loading-step { display: flex; align-items: center; gap: 8px; padding: 3px 0; opacity: 0.4; transition: opacity 0.3s var(--ease); } .audit-loading-step.is-active { opacity: 1; color: var(--ink); font-weight: 600; } .audit-loading-step.is-done { opacity: 0.85; } .audit-loading-step-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--border); flex-shrink: 0; } .audit-loading-step.is-active .audit-loading-step-dot { background: var(--terracotta); animation: stepPulse 1s ease-in-out infinite; } .audit-loading-step.is-done .audit-loading-step-dot { background: var(--success); } @keyframes stepPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } } /* Fase 5.10: onboarding checklist persistente in dashboard. */ .onboarding-checklist { background: var(--cream-soft); border: 1px solid var(--border); border-radius: 14px; padding: 18px 22px; margin: 0 0 22px; } .onboarding-checklist[hidden] { display: none !important; } .onboarding-checklist-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .onboarding-checklist-title { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--ink); margin: 0; } .onboarding-checklist-progress { font-size: 12px; color: var(--ink-muted); font-weight: 600; } .onboarding-checklist-bar { height: 4px; background: var(--border); border-radius: 99px; overflow: hidden; margin-bottom: 14px; } .onboarding-checklist-bar-fill { height: 100%; background: var(--terracotta); transition: width 0.5s var(--ease); } .onboarding-checklist-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .onboarding-checklist-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-soft); font-family: var(--font-body); } .onboarding-checklist-item.is-done { color: var(--ink-muted); text-decoration: line-through; } .onboarding-checklist-check { width: 18px; height: 18px; border-radius: 99px; border: 1.5px solid var(--border); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .onboarding-checklist-item.is-done .onboarding-checklist-check { background: var(--success); border-color: var(--success); color: #fff; } .onboarding-checklist-close { background: transparent; border: none; color: var(--ink-muted); cursor: pointer; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 8px; font-size: 18px; line-height: 1; } .onboarding-checklist-close:hover { background: rgba(15, 37, 61, 0.06); color: var(--ink); } /* Fase 5.10: AI Lab demo card (mostra prima/dopo per attrarre uso). */ .ai-lab-demo { background: var(--cream-soft); border: 1px dashed var(--border); border-radius: 12px; padding: 16px 18px; margin: 0 0 14px; font-family: var(--font-body); font-size: 13.5px; color: var(--ink-soft); } .ai-lab-demo[hidden] { display: none !important; } .ai-lab-demo-title { font-weight: 700; color: var(--ink); margin: 0 0 10px; font-size: 14px; } .ai-lab-demo-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .ai-lab-demo-row:last-child { margin-bottom: 0; } .ai-lab-demo-label { font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .ai-lab-demo-before { color: var(--ink-soft); font-style: italic; } .ai-lab-demo-after { color: var(--ink); font-weight: 600; } /* ═══════════════════════ RESET ═══════════════════════ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink); background: var(--cream); font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Fase 2.5.37: previeni scrollbar orizzontale globale (safety net se qualche widget sfora la viewport su mobile stretto). overflow-x: clip è preferibile a hidden perché non crea uno scroll container per i figli (es. position:sticky della navbar continua a funzionare). */ overflow-x: clip; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } ::selection { background: rgba(26,58,92,.18); } /* ═══════════════════════ ANIMATIONS ═══════════════════════ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } /* Staggered reveal: applicato a sezioni della landing */ .reveal { opacity: 0; animation: fadeInUp 0.7s var(--ease) forwards; } .reveal-d1 { animation-delay: 0.05s; } .reveal-d2 { animation-delay: 0.15s; } .reveal-d3 { animation-delay: 0.25s; } .reveal-d4 { animation-delay: 0.35s; } .reveal-d5 { animation-delay: 0.45s; } .reveal-d6 { animation-delay: 0.55s; } /* PERFORMANCE LCP/FCP (mobile): il contenuto hero above-the-fold NON deve partire da opacity:0. fadeInUp tiene l'h1 (elemento LCP) invisibile durante l'animation-delay, e Lighthouse non conta come "dipinto" ciò che è invisibile: questo gonfiava FCP e LCP. Dentro la hero l'entrata resta una leggera salita solo-transform (composita su GPU, nessun layout shift), col contenuto visibile fin dal primo frame anche durante il delay (fill both). */ @keyframes heroRise { from { transform: translateY(10px); } to { transform: translateY(0); } } .hero .reveal { opacity: 1; animation: heroRise 0.6s var(--ease) both; } /* Scroll-triggered (per sezioni più in basso) */ /* Fase 2.5.57: utility class generica per transizioni di sezione gestite via CSS. Il JS si limita ad aggiungere/rimuovere .section-visible. */ .section-fade { opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; } .section-fade.section-visible { opacity: 1; transform: translateY(0); } .scroll-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .scroll-reveal.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal, .scroll-reveal, .reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4, .reveal-d5, .reveal-d6 { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } /* Fase 5.9: rispetta il setting OS anche per dashboard/account/sites e skeleton. Tieni i transition leggeri (hover, focus, color) ma elimina le animazioni macro-pagina e gli shimmer continui. */ .dashboard-panel:not([hidden]), .dashboard-panel:not([hidden]) .dashboard-head, .dashboard-panel:not([hidden]) .dashboard-grid > .dashboard-widget, .dashboard-panel:not([hidden]) .dashboard-section, .dashboard-panel:not([hidden]) .onboarding-banner:not([hidden]), .account-panel:not([hidden]), .account-panel:not([hidden]) .account-head, .account-panel:not([hidden]) .account-card, .user-sites-row, .user-sites-item, .sites-skeleton-row, .ai-output-spinner { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ═══════════════════════ Fase 2.5.15: animazioni avanzate ═══════════════════════ Hero visual demo: entrata con bounce, poi galleggia in loop. Righe della card: stagger da destra. Numero punteggio: pop con rimbalzo. Badge bad/warn: pulse continuo per "sembrare vive". Solution rows: scroll-triggered (visual da una parte, testo dall'altra). Quote beta tester: cascata dall'alto dopo l'hero. Tutto rispetta prefers-reduced-motion in coda. */ /* ── Card demo hero: entrata bounce + galleggiamento loop ───────────── */ @keyframes hv-enter { 0% { opacity: 0; transform: translateY(40px) scale(0.96); } 70% { opacity: 1; transform: translateY(-8px) scale(1.02); } 85% { transform: translateY(3px) scale(0.995); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes hv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .hero-visual { opacity: 0; animation: hv-enter 0.9s cubic-bezier(.34, 1.56, .64, 1) 0.25s forwards, hv-float 6s ease-in-out 1.2s infinite; } /* ── Righe interne (.hv-row): da destra con stagger 80ms ───────────── */ @keyframes hv-row-enter { 0% { opacity: 0; transform: translateX(32px); } 100% { opacity: 1; transform: translateX(0); } } .hero-visual .hv-row { opacity: 0; animation: hv-row-enter 0.45s cubic-bezier(.22, 1, .36, 1) forwards; } /* Fase 2.5.17: shift +1 perché .hv-score è il 1° div figlio; le hv-row sono 2°-7°. (Il