@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap'); /* === Base === */ body { font-family: var(--font-family, 'Inter', sans-serif); scroll-behavior: smooth; } img { display: initial !important; } /* === Theme utility classes (usate da colori dinamici) === */ .section-number { background: var(--color-primary-light); color: var(--color-primary); border-radius: 9999px; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; flex-shrink: 0; } .subsection-title { font-size: 1.25rem; font-weight: 600; color: var(--color-primary-hover); margin-bottom: 0.75rem; } .subsubsection-title { font-size: 1.125rem; font-weight: 600; color: var(--color-primary); margin-bottom: 0.5rem; } .nav-active, .nav-item.nav-active { color: var(--color-primary) !important; background: white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .hover-primary:hover { color: var(--color-primary) !important; } .hover-primary-bg:hover { background: white; color: var(--color-primary) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .focus-ring-primary:focus { box-shadow: 0 0 0 2px var(--color-primary); border-color: transparent; } .faq-answer-border { border-left: 2px solid var(--color-primary); } .highlight { background-color: var(--color-secondary); padding: 0 2px; border-radius: 2px; } .screenshot-placeholder { background-color: var(--color-secondary); border: 2px dashed var(--color-primary); border-radius: 0.5rem; padding: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-primary-hover); margin: 1.5rem 0; text-align: center; } /* === Copy link button === */ .copy-link-btn { opacity: 0; transition: opacity 0.2s; cursor: pointer; color: var(--color-primary); margin-left: 0.5rem; } .copy-link-btn:hover { opacity: 1 !important; } h2:hover .copy-link-btn, .subsection-title:hover .copy-link-btn, .subsubsection-title:hover .copy-link-btn { opacity: 0.6; } .copy-link-btn.copied { color: #16a34a; } /* === Scrollbar sidebar === */ .sidebar-scroll::-webkit-scrollbar { width: 6px; } .sidebar-scroll::-webkit-scrollbar-track { background: var(--color-secondary); } .sidebar-scroll::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; } .sidebar-scroll::-webkit-scrollbar-thumb:hover { background: var(--color-primary-hover); } @media screen and (max-width: 767px) { .mb-none { display: none; } } /* === Ripristino formattazione contenuti (override Tailwind Preflight) === */ #mainContent section ul, #mainContent section ol { margin: 0.5em 0 0.5em 1.5em; padding: 0 0 0 10px; } #mainContent section ul { list-style-type: disc; } #mainContent section ol { list-style-type: decimal; } #mainContent section ul ul { list-style-type: circle; margin-top: 0.25em; margin-bottom: 0.25em; } #mainContent section ul ul ul { list-style-type: square; } #mainContent section ol ol { list-style-type: lower-alpha; } #mainContent section li { margin-bottom: 0.25em; } #mainContent section p { margin-bottom: 0.5em; } #mainContent section h3 { margin-top: 1.25em; margin-bottom: 0.5em; } /* ========================================================================= DARK MODE — frontend Attivato dalla classe .dark su ========================================================================= */ html.dark body { background: #0f172a; color: #e2e8f0; } html.dark #mainContent { background: #0f172a; } html.dark #mainContent section { color: #e2e8f0; } html.dark #sidebar, html.dark .bg-slate-50, html.dark aside { background: #1e293b !important; border-color: #334155 !important; } html.dark .bg-white { background: #1e293b !important; } html.dark .text-slate-800, html.dark .text-slate-900, html.dark .text-slate-700, html.dark .text-slate-600 { color: #e2e8f0 !important; } html.dark .text-slate-500 { color: #94a3b8 !important; } html.dark .text-slate-400 { color: #64748b !important; } html.dark .border-slate-200, html.dark .border-slate-300 { border-color: #334155 !important; } html.dark .border-b { border-color: #334155 !important; } html.dark input, html.dark select, html.dark textarea { background: #1e293b; color: #e2e8f0; border-color: #475569; } html.dark details { background: #1e293b !important; } html.dark .nav-active, html.dark .nav-item.nav-active { background: #334155 !important; } html.dark .hover-primary-bg:hover { background: #334155 !important; } html.dark .section-number { background: rgba(var(--color-primary-rgb), 0.2); } html.dark .sidebar-scroll::-webkit-scrollbar-track { background: #1e293b; } /* Callout e card con sfondo chiaro dentro i contenuti */ html.dark .bg-blue-50, html.dark .bg-red-50, html.dark .bg-green-50, html.dark .bg-amber-50, html.dark .bg-yellow-50, html.dark .bg-orange-50, html.dark .bg-purple-50, html.dark .bg-gray-50, html.dark .bg-slate-100 { background: #1e293b !important; } html.dark .border-blue-500 { border-color: #3b82f6 !important; } html.dark .border-red-400 { border-color: #f87171 !important; } html.dark .border-green-500 { border-color: #22c55e !important; } html.dark .border-amber-400 { border-color: #fbbf24 !important; } html.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; } /* Card e box con bordi */ html.dark #mainContent .border, html.dark #mainContent .border-slate-200 { border-color: #334155 !important; } html.dark #mainContent .bg-gray-50, html.dark #mainContent .bg-slate-50 { background: #1e293b !important; } html.dark #mainContent .rounded-lg[class*="bg-"] { color: #e2e8f0; } /* Griglia colonne */ html.dark .p-4.border.border-slate-200 { background: #1e293b !important; border-color: #334155 !important; } /* Testo dentro callout */ html.dark .text-amber-800 { color: #fbbf24 !important; } html.dark .text-red-700 { color: #f87171 !important; } html.dark .text-blue-700 { color: #60a5fa !important; } html.dark .text-green-700 { color: #4ade80 !important; } /* ========================================================================= DARK MODE — admin backend ========================================================================= */ html.dark-admin body { background: #0f172a; color: #e2e8f0; } html.dark-admin .bg-white { background: #1e293b !important; } html.dark-admin .bg-slate-50 { background: #0f172a !important; } html.dark-admin .text-slate-800, html.dark-admin .text-slate-700, html.dark-admin .text-slate-600 { color: #e2e8f0 !important; } html.dark-admin .text-slate-500 { color: #94a3b8 !important; } html.dark-admin .border-slate-200, html.dark-admin .border { border-color: #334155 !important; } html.dark-admin .border-b { border-color: #334155 !important; } html.dark-admin input, html.dark-admin select, html.dark-admin textarea { background: #1e293b !important; color: #e2e8f0 !important; border-color: #475569 !important; } html.dark-admin header { background: #1e293b !important; border-color: #334155 !important; } /* Fix per sfondi e hover dei pulsanti utility in dark mode admin */ html.dark-admin .bg-slate-100, html.dark-admin .bg-slate-200, html.dark-admin .bg-green-50, html.dark-admin .bg-red-50, html.dark-admin .bg-amber-100 { background-color: #334155 !important; /* Sfondo scuro (slate-700) */ border-color: #475569 !important; } /* Fix per gli stati hover dei pulsanti */ html.dark-admin .hover\:bg-slate-200:hover, html.dark-admin .hover\:bg-slate-300:hover, html.dark-admin .hover\:bg-green-50:hover, html.dark-admin .hover\:bg-green-100:hover, html.dark-admin .hover\:bg-red-100:hover, html.dark-admin .hover\:bg-amber-200:hover { background-color: #475569 !important; /* Sfondo leggermente più chiaro al passaggio del mouse (slate-600) */ color: #ffffff !important; } /* Assicura che i testi colorati specifici (rosso, verde, ambra) diventino chiari e leggibili */ html.dark-admin .text-green-700, html.dark-admin .text-red-600, html.dark-admin .text-amber-800 { color: #e2e8f0 !important; }