/* W01 - Dark mode Ficheiro aditivo: o site principal (main.css) não usa variáveis CSS e tem cores fixas espalhadas por milhares de linhas, pelo que o dark mode é feito como uma camada de overrides ligada pela classe "dark-mode" no , em vez de reescrever main.css. Usa-se !important porque muitas regras do template têm especificidade mais alta do que seria prático replicar aqui. */ html.dark-mode { color-scheme: dark; } html.dark-mode body { background-color: #121212 !important; color: #cfd2d6 !important; } /* Estrutura principal (header, hero, secções, footer) */ html.dark-mode .navbar-area, html.dark-mode .navbar-area.sticky, html.dark-mode .header, html.dark-mode .header.sticky, html.dark-mode .sticky, html.dark-mode .hero-area, html.dark-mode .features, html.dark-mode .our-achievement, html.dark-mode .faq, html.dark-mode .footer, html.dark-mode .team, html.dark-mode .navbar-nav .nav-item .sub-menu { background-color: #121212 !important; border-color: #2a2a2a !important; } html.dark-mode .single-feature, html.dark-mode .accordion-item, html.dark-mode .accordion-item .accordion-button, html.dark-mode .accordion-body { background-color: #1c1c1c !important; border-color: #2a2a2a !important; color: #cfd2d6 !important; } html.dark-mode .single-feature i, html.dark-mode .accordion-button:not(.collapsed), html.dark-mode .accordion-button:not(.collapsed) .serial { background-color: #26323b !important; color: #cfd2d6 !important; } /* Hamburger do menu mobile: as barras são pretas por omissão e ficavam invisíveis sobre o fundo escuro do header */ html.dark-mode .mobile-menu-btn .toggler-icon { background-color: #e4e6eb !important; } /* Texto: títulos, parágrafos, listas e links herdam a cor clara por omissão */ html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode h5, html.dark-mode h6, html.dark-mode p, html.dark-mode span, html.dark-mode li, html.dark-mode label { color: #e4e6eb !important; } html.dark-mode a { color: #7fb2ff !important; } html.dark-mode .accordion-body p, html.dark-mode .accordion-item .accordion-button .title .serial { color: #b7bcc4 !important; } /* A marca (logo) de cada app é um PNG, mantém-se igual em ambos os temas */ /* Botão flutuante de alternância de tema */ #theme-toggle-btn { position: fixed; right: 20px; bottom: 20px; z-index: 1000; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #ddd; background-color: #ffffff; color: #222; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } html.dark-mode #theme-toggle-btn { background-color: #1c1c1c; border-color: #3a3a3a; color: #e4e6eb; }