/* ============================================================================ MODOS DE COR — Padrão / Escuro / Sépia ============================================================================ Como funciona: O JS (assets/js/colors.js) aplica um atributo `data-color-mode="escuro"` ou `data-color-mode="sepia"` no . Sem esse atributo, o site permanece exatamente como está hoje (modo Padrão). Este arquivo é carregado por ÚLTIMO no layout (depois de todos os CSS de área), de propósito: assim as regras daqui sempre vencem no empate de especificidade, sem precisar editar os 10 arquivos de área um por um. Paleta: - Escuro: derivado do próprio gradiente azul do header (#04517f → #003c66 → #002d4d), não de um azul-marinho genérico — o fundo e as superfícies ficam na mesma família de matiz da marca, só bem mais escuros; o azul e o teal de destaque são versões clareadas dos MESMOS tons já usados no site (--amb-*-blue-light, --amb-*-teal), não uma cor nova. - Sépia: dois níveis de tom quente (fundo da página um pouco mais escuro, cartões/conteúdo mais claros) para dar sensação de papel/ leitura, em vez de um branco só ligeiramente amarelado. Azul e teal da marca permanecem os mesmos — já contrastam bem contra fundo claro. A cobertura tem duas camadas: 1) Variáveis — grande parte das cores dos arquivos de área já usa `var(--amb-*-blue)`, `var(--amb-*-text)` etc. Redeclarando essas mesmas variáveis aqui dentro de [data-color-mode="..."], essas partes do site já mudam de cor sozinhas, sem tocar nos arquivos originais. 2) Cores fixas — a outra parte do site usa hex direto. Para essas, listamos aqui os seletores mais visíveis com override direto. ========================================================================== */ /* ============================================================================ 1) VARIÁVEIS — MODO ESCURO ============================================================================ */ :root[data-color-mode="escuro"] { /* | IMPORTANTE sobre o "-blue" de cada área: | | Em todos os arquivos de área, a MESMA variável "-blue" serve dois | papéis ao mesmo tempo: cor de TEXTO (títulos, links) E cor de FUNDO | de elementos com texto branco em cima (hero, abas selecionadas, | badges, botão ativo). No modo claro, o azul institucional (#013963) | é escuro o bastante pra funcionar bem nos dois papéis. No escuro, | não existe um único tom que sirva perfeitamente pros dois ao mesmo | tempo — por isso usamos aqui o PRÓPRIO "-blue-light" que cada área | já tinha definido (não é um azul novo, inventado) como meio-termo: | continua legível como texto sobre o fundo escuro E mantém bom | contraste como fundo por trás de texto branco. */ /* A AMB */ --amb-about-blue: #1977b8; --amb-about-blue-deep: #6bb6e8; --amb-about-white: #0e2740; --amb-about-text: #cddbe6; --amb-about-heading: #6bb6e8; --amb-about-button: #12324f; --amb-about-button-hover: #1a3f5e; --amb-about-border: #1c3f5c; --amb-about-soft: #12324f; /* Notícias */ --amb-news-blue: #0f74ad; --amb-news-blue-dark: #4dabe3; --amb-news-blue-light: #7cc4ef; --amb-news-surface: #0e2740; --amb-news-surface-soft: #12324f; --amb-news-border: #1c3f5c; --amb-news-text: #cddbe6; --amb-news-danger: #e28a8a; /* Campanhas */ --amb-campaign-blue: #1977b8; --amb-campaign-blue-dark: #4dabe3; --amb-campaign-blue-light: #7cc4ef; --amb-campaign-surface: #0e2740; --amb-campaign-text: #cddbe6; /* Congresso */ --amb-congress-blue: #0f74ad; --amb-congress-blue-dark: #4dabe3; --amb-congress-blue-light: #7cc4ef; --amb-congress-surface: #0e2740; --amb-congress-surface-light: #12324f; --amb-congress-border: #1c3f5c; --amb-congress-text: #cddbe6; /* Filiadas */ --amb-blue: #1977b8; --amb-blue-dark: #4dabe3; --amb-blue-light: #7cc4ef; --amb-surface: #0e2740; --amb-map-fill: #12324f; --amb-map-hover: #4a8fc0; --amb-map-active: #59b3e6; /* Publicações */ --amb-pub-blue: #0f74ad; --amb-pub-blue-dark: #4dabe3; --amb-pub-blue-light: #7cc4ef; --amb-pub-surface: #0e2740; --amb-pub-surface-light: #12324f; --amb-pub-border: #1c3f5c; --amb-pub-text: #cddbe6; /* Serviços (não tinha "-blue-light" próprio; reaproveita o mesmo tom usado nas outras áreas para manter consistência entre elas) */ --amb-services-blue: #1977b8; --amb-services-blue-dark: #4dabe3; --amb-services-text: #cddbe6; --amb-services-button-bg: #12324f; --amb-services-button-hover: #1a3f5e; --amb-services-white: #0e2740; --amb-services-line: #1c3f5c; /* Associados — "access-blue" (#0076d0) já é vivo o bastante pra funcionar bem como fundo de botão com texto branco no escuro também, por isso não muda */ --amb-associados-blue: #1977b8; --amb-associados-blue-dark: #4dabe3; --amb-associados-blue-hover: #3d8fc4; --amb-associados-text: #cddbe6; --amb-associados-muted: #90a7ba; --amb-associados-border: #1c3f5c; --amb-associados-light: #12324f; --amb-associados-white: #0e2740; /* Plataformas */ --amb-platforms-blue: #0f74ad; --amb-platforms-blue-dark: #4dabe3; --amb-platforms-blue-light: #7cc4ef; --amb-platforms-text: #cddbe6; --amb-platforms-border: #1c3f5c; --amb-platforms-surface: #0e2740; } /* ============================================================================ 2) VARIÁVEIS — MODO SÉPIA ---------------------------------------------------------------------------- Dois níveis de tom quente: "surface" (cartões/conteúdo) fica mais claro — o "papel" —, o fundo da página (seção 3, abaixo) fica um pouco mais escuro — a "mesa" por trás do papel. Azul/teal da marca não mudam. ============================================================================ */ :root[data-color-mode="sepia"] { --amb-about-white: #faf3e0; --amb-about-text: #4a3626; --amb-about-button: #ecdfc0; --amb-about-button-hover: #ddc99e; --amb-about-border: #d8c69c; --amb-about-soft: #f2e6c9; --amb-news-surface: #faf3e0; --amb-news-surface-soft: #f2e6c9; --amb-news-border: #d8c69c; --amb-news-text: #4a3626; --amb-campaign-surface: #faf3e0; --amb-campaign-text: #4a3626; --amb-congress-surface: #faf3e0; --amb-congress-surface-light: #f2e6c9; --amb-congress-border: #d8c69c; --amb-congress-text: #4a3626; --amb-surface: #faf3e0; --amb-map-fill: #d8c69c; --amb-pub-surface: #faf3e0; --amb-pub-surface-light: #f2e6c9; --amb-pub-border: #d8c69c; --amb-pub-text: #4a3626; --amb-services-text: #4a3626; --amb-services-button-bg: #ecdfc0; --amb-services-button-hover: #ddc99e; --amb-services-white: #faf3e0; --amb-services-line: #d8c69c; --amb-associados-text: #4a3626; --amb-associados-muted: #8a7355; --amb-associados-border: #d8c69c; --amb-associados-light: #f2e6c9; --amb-associados-white: #faf3e0; --amb-platforms-text: #4a3626; --amb-platforms-border: #d8c69c; --amb-platforms-surface: #faf3e0; } /* ============================================================================ 3) FUNDO GERAL DA PÁGINA E DE CADA ÁREA ============================================================================ */ html[data-color-mode="escuro"] body { background: #061826 !important; color: #cddbe6 !important; } html[data-color-mode="sepia"] body { background: #e6d9b8 !important; color: #4a3626 !important; } /* Fundo de cada página de conteúdo (áreas que definem o próprio fundo, em vez de herdar o gradiente do body) */ html[data-color-mode="escuro"] .amb-about-main, html[data-color-mode="escuro"] .amb-associados-main, html[data-color-mode="escuro"] .amb-agenda-support-page, html[data-color-mode="escuro"] .amb-agenda-events-page, html[data-color-mode="escuro"] .amb-agenda-event-detail, html[data-color-mode="escuro"] .amb-noticias-list-page, html[data-color-mode="escuro"] .amb-noticias-section-page, html[data-color-mode="escuro"] .amb-noticias-detail, html[data-color-mode="escuro"] .amb-platforms-page, html[data-color-mode="escuro"] .amb-publicacoes-section-page, html[data-color-mode="escuro"] .amb-publicacoes-content-page, html[data-color-mode="escuro"] .amb-publicacoes-guidelines, html[data-color-mode="escuro"] .amb-campaigns-page, html[data-color-mode="escuro"] .amb-congress-page { background: #061826 !important; } html[data-color-mode="sepia"] .amb-about-main, html[data-color-mode="sepia"] .amb-associados-main, html[data-color-mode="sepia"] .amb-agenda-support-page, html[data-color-mode="sepia"] .amb-agenda-events-page, html[data-color-mode="sepia"] .amb-agenda-event-detail, html[data-color-mode="sepia"] .amb-noticias-list-page, html[data-color-mode="sepia"] .amb-noticias-section-page, html[data-color-mode="sepia"] .amb-noticias-detail, html[data-color-mode="sepia"] .amb-platforms-page, html[data-color-mode="sepia"] .amb-publicacoes-section-page, html[data-color-mode="sepia"] .amb-publicacoes-content-page, html[data-color-mode="sepia"] .amb-publicacoes-guidelines, html[data-color-mode="sepia"] .amb-campaigns-page, html[data-color-mode="sepia"] .amb-congress-page { background: #e6d9b8 !important; } /* ============================================================================ 4) CARDS E CAIXAS COM COR FIXA (não usam variável) ============================================================================ */ html[data-color-mode="escuro"] .amb-agenda-event-card, html[data-color-mode="escuro"] .amb-noticias-report-card, html[data-color-mode="escuro"] .amb-conecta-card, html[data-color-mode="escuro"] .amb-beneficios-card, html[data-color-mode="escuro"] .amb-congress-stat-card, html[data-color-mode="escuro"] .amb-congress-action-card, html[data-color-mode="escuro"] .amb-congress-news-card, html[data-color-mode="escuro"] .amb-campaign-news-card, html[data-color-mode="escuro"] .amb-campaign-material-card, html[data-color-mode="escuro"] .amb-services-exam-card, html[data-color-mode="escuro"] .amb-noticias-search__field, html[data-color-mode="escuro"] .amb-publicacoes-accordion__empty, html[data-color-mode="escuro"] .amb-publicacoes-document, html[data-color-mode="escuro"] .amb-publicacoes-search, html[data-color-mode="escuro"] .amb-publicacoes-profile__avatar, html[data-color-mode="escuro"] .amb-publicacoes-book-highlight, html[data-color-mode="escuro"] .amb-publicacoes-demography-hero__visual { background: #0e2740 !important; border-color: #1c3f5c !important; color: #cddbe6 !important; } html[data-color-mode="sepia"] .amb-agenda-event-card, html[data-color-mode="sepia"] .amb-noticias-report-card, html[data-color-mode="sepia"] .amb-conecta-card, html[data-color-mode="sepia"] .amb-beneficios-card, html[data-color-mode="sepia"] .amb-congress-stat-card, html[data-color-mode="sepia"] .amb-congress-action-card, html[data-color-mode="sepia"] .amb-congress-news-card, html[data-color-mode="sepia"] .amb-campaign-news-card, html[data-color-mode="sepia"] .amb-campaign-material-card, html[data-color-mode="sepia"] .amb-services-exam-card, html[data-color-mode="sepia"] .amb-noticias-search__field, html[data-color-mode="sepia"] .amb-publicacoes-accordion__empty, html[data-color-mode="sepia"] .amb-publicacoes-document, html[data-color-mode="sepia"] .amb-publicacoes-search, html[data-color-mode="sepia"] .amb-publicacoes-profile__avatar, html[data-color-mode="sepia"] .amb-publicacoes-book-highlight, html[data-color-mode="sepia"] .amb-publicacoes-demography-hero__visual { background: #faf3e0 !important; border-color: #d8c69c !important; color: #4a3626 !important; } /* Tons de hover em azul-clarinho (#e4eef5 e semelhantes), repetidos em vários arquivos de área */ html[data-color-mode="escuro"] .amb-about-menu-button:hover, html[data-color-mode="escuro"] .amb-service-link:hover, html[data-color-mode="escuro"] .amb-publicacoes-sidebar__link:hover, html[data-color-mode="escuro"] .amb-agenda-side-navigation__link:hover, html[data-color-mode="escuro"] .amb-noticias-category-navigation__link:hover { background: #12324f !important; color: #cddbe6 !important; } html[data-color-mode="sepia"] .amb-about-menu-button:hover, html[data-color-mode="sepia"] .amb-service-link:hover, html[data-color-mode="sepia"] .amb-publicacoes-sidebar__link:hover, html[data-color-mode="sepia"] .amb-agenda-side-navigation__link:hover, html[data-color-mode="sepia"] .amb-noticias-category-navigation__link:hover { background: #ecdfc0 !important; } /* ============================================================================ 5) CABEÇALHO / MENU / RODAPÉ ---------------------------------------------------------------------------- O header (barra azul-escura no topo) já é escuro por natureza — não precisa mudar em nenhum modo. O menu branco (navbar) e o bloco cinza do rodapé, sim. ============================================================================ */ html[data-color-mode="escuro"] nav[aria-label="Navegação principal"] { background: #0a1f33 !important; border-color: #1c3f5c !important; } html[data-color-mode="escuro"] .amb-navbar-link, html[data-color-mode="escuro"] .amb-navbar-dropdown { color: #cddbe6 !important; } html[data-color-mode="escuro"] .amb-navbar-dropdown { background: #0e2740 !important; border-color: #1c3f5c !important; } html[data-color-mode="escuro"] .amb-navbar-dropdown a { color: #cddbe6 !important; } html[data-color-mode="escuro"] .amb-navbar-dropdown a:hover { background: #12324f !important; color: #59b3e6 !important; } html[data-color-mode="sepia"] nav[aria-label="Navegação principal"] { background: #faf3e0 !important; border-color: #d8c69c !important; } html[data-color-mode="sepia"] .amb-navbar-dropdown { background: #faf3e0 !important; border-color: #d8c69c !important; } html[data-color-mode="sepia"] .amb-navbar-dropdown a:hover { background: #f2e6c9 !important; } /* Bloco de links do rodapé (fundo cinza-claro no modo padrão) */ html[data-color-mode="escuro"] .amb-footer > div:nth-of-type(2) { background: #0a1f33 !important; color: #cddbe6 !important; } html[data-color-mode="escuro"] .amb-footer > div:nth-of-type(2) a { color: #59b3e6 !important; } html[data-color-mode="escuro"] .amb-footer > div:nth-of-type(2) p { color: #cddbe6 !important; } html[data-color-mode="sepia"] .amb-footer > div:nth-of-type(2) { background: #ecdfc0 !important; color: #4a3626 !important; } html[data-color-mode="sepia"] .amb-footer > div:nth-of-type(2) a { color: #013963 !important; } /* Campo de e-mail da newsletter (input branco na faixa teal) */ html[data-color-mode="escuro"] .amb-footer input[type="email"] { background: #0e2740 !important; color: #cddbe6 !important; } html[data-color-mode="sepia"] .amb-footer input[type="email"] { background: #faf3e0 !important; color: #4a3626 !important; } /* ============================================================================ 6) AVISO DE COOKIES (LGPD) ============================================================================ */ html[data-color-mode="escuro"] .amb-cookie-panel { background: #0e2740 !important; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5) !important; } html[data-color-mode="escuro"] .amb-cookie-title, html[data-color-mode="escuro"] .amb-cookie-category-title, html[data-color-mode="escuro"] .amb-cookie-link { color: #59b3e6 !important; } html[data-color-mode="escuro"] .amb-cookie-message, html[data-color-mode="escuro"] .amb-cookie-description { color: #cddbe6 !important; } html[data-color-mode="escuro"] .amb-cookie-category { background: #12324f !important; } html[data-color-mode="escuro"] .amb-cookie-btn { background: #12324f !important; border-color: #1c3f5c !important; color: #cddbe6 !important; } html[data-color-mode="escuro"] .amb-cookie-reopen { background: #0e2740 !important; color: #59b3e6 !important; } html[data-color-mode="sepia"] .amb-cookie-panel { background: #faf3e0 !important; } html[data-color-mode="sepia"] .amb-cookie-category { background: #f2e6c9 !important; } html[data-color-mode="sepia"] .amb-cookie-message, html[data-color-mode="sepia"] .amb-cookie-description { color: #4a3626 !important; } html[data-color-mode="sepia"] .amb-cookie-btn { background: #ecdfc0 !important; color: #4a3626 !important; } html[data-color-mode="sepia"] .amb-cookie-reopen { background: #faf3e0 !important; }