/* ============================================================================ * PULSE — TEMA CLARO (html.pulse-claro) + interruptor ☀️/🌙 * * O site é escuro por natureza (--pulse-bg #12127c, texto --pulse-white). * O modo claro REDEFINE as variáveis da marca — tudo o que as usa muda de * borla — e corrige à mão os sítios do tema com cores fixas (secção AUDIT). * Por defeito segue o sistema do visitante; o interruptor guarda a escolha. * ========================================================================== */ /* ---- Paleta clara (redefinição das variáveis da marca) ------------------ */ html.pulse-claro { --pulse-bg: #f4f5fb; /* fundo: neutro com viés da marca */ --pulse-white: #16165c; /* o "branco" (texto) vira tinta escura */ --pulse-accent: #3939b5; /* o acento funciona nos dois fundos */ --pulse-soft: #4c4c96; /* suave: escurece para manter contraste */ --pulse-footer-bar: #5b5b66; } /* Suaviza a troca de tema (e respeita quem prefere sem movimento). */ html.pulse-claro body, html:not(.pulse-claro) body { transition: background-color 0.25s ease, color 0.25s ease; } @media (prefers-reduced-motion: reduce) { html.pulse-claro body, html:not(.pulse-claro) body { transition: none; } } /* ---- Logótipo (SVG branco → tom da marca no fundo claro) ---------------- */ html.pulse-claro .site-header-brand-img, html.pulse-claro .site-header-brand svg { /* branco → azul-marca aproximado (#12127c) */ filter: brightness(0) saturate(100%) invert(11%) sepia(64%) saturate(4653%) hue-rotate(240deg) brightness(80%); } /* ---- Interruptor ☀️/🌙 (injetado no fim do menu pelo plugin) ------------ */ .pulse-tema-item { display: flex; align-items: center; } .pulse-tema-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; background: none; border: 1px solid currentColor; border-radius: 50%; color: var(--pulse-white, #fff); cursor: pointer; transition: transform 0.2s var(--pulse-ease, ease), background-color 0.2s ease; } .pulse-tema-toggle:hover { transform: scale(1.08); } .pulse-tema-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; } /* Ícones SVG: lua no escuro, sol com raios no claro (mostram o modo atual). */ .pulse-tema-toggle svg { width: 0.95rem; height: 0.95rem; display: block; transition: transform 0.25s var(--pulse-ease, ease); } .pulse-tema-toggle__sol { display: none; } html.pulse-claro .pulse-tema-toggle__sol { display: block; } html.pulse-claro .pulse-tema-toggle__lua { display: none; } .pulse-tema-toggle:hover svg { transform: rotate(15deg); } @media (prefers-reduced-motion: reduce) { .pulse-tema-toggle, .pulse-tema-toggle svg { transition: none; } .pulse-tema-toggle:hover, .pulse-tema-toggle:hover svg { transform: none; } } /* No overlay mobile o botão herda o tamanho dos itens grandes. */ .mobile-nav .pulse-tema-item { margin-top: 0.75rem; } .mobile-nav .pulse-tema-toggle { width: 2.6rem; height: 2.6rem; } .mobile-nav .pulse-tema-toggle svg { width: 1.25rem; height: 1.25rem; } /* ============================================================================ * AUDIT — correções dos sítios do tema com cores FIXAS (fora das variáveis). * Tudo scoped a html.pulse-claro; nada abaixo afeta o tema escuro. * ========================================================================== */ /* Convenção desta secção: * · scoped a html.pulse-claro — exceção única e assinalada: a barra opcional * da navbar no tema ESCURO (subsecção _header.scss), scoped a * html:not(.pulse-claro) body.pulse-nav-barra-escuro; * · "tinta" = var(--pulse-white) (#16165c no claro) — texto e superfícies navy; * · #fff literal = texto sobre superfícies de MARCA que continuam escuras no * modo claro (faixas/cartões accent, cartões navy, CTAs) — decisão de * identidade: o azul da marca passa a superfície-chave, não desaparece; * · heróis e cartões com FOTOGRAFIA mantêm o tratamento escuro (scrim + * texto branco): a imagem não muda com o tema, a legibilidade também não. * Pares de contraste verificados (WCAG AA, texto normal ≥ 4.5:1) no relatório. */ /* ---- _header.scss — header fixo ------------------------------------------ */ /* Por defeito o header fica TRANSPARENTE nos dois temas (opção do utilizador). NOVO: cada página pode ligar uma barra translúcida POR TEMA, na caixa "Navbar" do editor (campos "Fundo — tema escuro/claro"), que põe body.pulse-nav-barra-escuro / body.pulse-nav-barra-claro no . Sem essas classes nada abaixo se aplica — o transparente de hoje mantém-se. Nota técnica: o sections.css força `background: transparent !important` no header das páginas com hero Pulse (body:has(.pulse-sec--hero) → especificidade 0,2,1); os seletores abaixo vencem-no com !important e especificidade 0,3,2 (reforçada a 0,4,2 pela variante :has explícita). */ /* Barra no tema ESCURO: navy profundo translúcido (mais fundo que o navy da marca, para a barra se ler sobre heróis #04040d E sobre o fundo #12127c) + blur com saturação (efeito "vidro" coerente com as secções Pulse) + hairline branca subtil em baixo + sombra suave para descolar de fotos. rgba(10,10,72,0.72) garante texto branco ≥ 7,6:1 mesmo com a zona mais clara de uma foto atrás da barra (pior caso composto: rgb(79,79,123)). */ html:not(.pulse-claro) body.pulse-nav-barra-escuro .site-header, html:not(.pulse-claro) body.pulse-nav-barra-escuro:has(.pulse-sec--hero) .site-header { /* Opacidade ajustável por página (slider na caixa "Navbar"); 72% = valor calculado para AA em qualquer fundo. */ background: rgba(10, 10, 72, var(--pulse-nav-alfa-escuro, 0.72)) !important; -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 14px 34px -22px rgba(0, 0, 0, 0.55) !important; } /* Barra no tema CLARO: neblina clara translúcida + hairline de tinta — valores da auditoria anterior, mantidos por decisão do utilizador. Tinta (#16165c) ≥ 11,3:1 mesmo sobre heróis escuros atrás da barra. */ html.pulse-claro body.pulse-nav-barra-claro .site-header, html.pulse-claro body.pulse-nav-barra-claro:has(.pulse-sec--hero) .site-header { /* Opacidade ajustável por página (slider na caixa "Navbar"). */ background: rgba(244, 245, 251, var(--pulse-nav-alfa-claro, 0.88)) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(22, 22, 92, 0.08) !important; } /* ---- _sections.scss — faixa de serviços (D-shapes #000 / #a0a0aa fixos) -- */ /* Rampa monocromática da marca: tinta → índigo suave → azul accent. Branco sobre #a0a0aa falhava AA (2.6:1); os três novos fundos passam. */ html.pulse-claro .homepage-service-item-1::before { background: var(--pulse-white); } html.pulse-claro .homepage-service-item-2::before { background: var(--pulse-soft); } /* item-3 já usa var(--pulse-accent) — muda sozinho. */ html.pulse-claro .homepage-service-label { color: #fff; } /* ---- _sections.scss — notícia em destaque (cartão mantém-se accent) ------ */ /* O texto usava var(--pulse-white), que no claro vira tinta → ilegível sobre o azul do cartão. Força branco; hover do botão inverte como no escuro. */ html.pulse-claro .homepage-news-text { color: #fff; } html.pulse-claro .homepage-news-btn { border-color: #fff; color: #fff; } html.pulse-claro .homepage-news-btn:hover { background: #fff; color: var(--pulse-accent); } /* ---- _sections.scss — faixa de projetos + pills (#d7d7ff fixo) ----------- */ html.pulse-claro .homepage-projects-label { color: #fff; } /* Pill lavanda mantém-se; o texto era var(--pulse-bg) (claro sobre claro). */ html.pulse-claro .homepage-project-pill, html.pulse-claro .homepage-project-pill:hover { color: var(--pulse-white); } /* ---- _sections.scss — CTA "Contacte-nos" (fundo accent) ------------------ */ html.pulse-claro .homepage-cta-btn, html.pulse-claro .homepage-cta-btn:hover { color: #fff; } /* ---- _buttons.scss — variantes com pares quebrados no claro --------------- */ /* primary: fundo accent → texto branco (var(--pulse-white) virava tinta). */ html.pulse-claro .pulse-btn.pulse-primary { color: #fff; } /* ver-mais: accent sobre soft dava ~1.1:1 — branco sobre soft dá 7.5:1. */ html.pulse-claro .pulse-btn.pulse-ver-mais { color: #fff; } /* .pulse-soft e .pulse-ghost mudam sozinhos com as variáveis (verificado). */ /* ---- _forms.scss — modal de contacto (diálogo mantém-se accent) ---------- */ /* Véu do modal: navy fixo rgba(18,18,124,.72) → tinta mais leve no claro. */ html.pulse-claro .contact-modal-overlay { background: rgba(22, 22, 92, 0.55); } /* Título/fechar/mensagens usavam var(--pulse-white) → tinta sobre accent. */ html.pulse-claro .contact-modal-title, html.pulse-claro .contact-modal-close { color: #fff; } html.pulse-claro .contact-modal-form .wpcf7-response-output { color: #fff; } /* Submit: accent sobre soft falhava — branco sobre soft passa (7.5:1). */ html.pulse-claro .contact-modal-form input.wpcf7-form-control.wpcf7-submit { color: #fff; } /* Inputs #d9d9d9 com texto accent funcionam nos dois modos (5.9:1) — mantidos. */ /* ---- _footer.scss — barra de apoios + meta ------------------------------- */ /* Sublinhado hover era accent (#3939b5) sobre a barra #5b5b66 (~1.1:1) — passa a acompanhar a cor do texto. */ html.pulse-claro .site-footer-link::after { background: currentColor; } /* Marca mono do rodapé (navy no escuro) → silhueta branca sobre a barra. */ html.pulse-claro .site-footer-logo-img, html.pulse-claro .site-footer-mark-mobile-svg { filter: brightness(0) invert(1); } /* Logos de apoios (SVGs servidos via — a cor só muda com filter): no claro, silhueta branca sobre a barra #5b5b66, como o wordmark. Cobre o rodapé clássico e o novo footer por secções (mesmas classes). */ html.pulse-claro .site-footer-apoios-img, html.pulse-claro .site-footer-apoios-mobile-img { filter: brightness(0) invert(1); } html.pulse-claro .site-footer-apoios-link:hover .site-footer-apoios-img { opacity: 0.82; /* mantém o feedback de hover do tema */ } /* ---- _sobre.scss — página inteira era fundo accent ------------------------ */ html.pulse-claro body.pulse-sobre { background-color: var(--pulse-bg); } html.pulse-claro .sobre-mission, html.pulse-claro .sobre-recruitment { background: var(--pulse-bg); } /* CTA: era navy sobre accent; no claro var(--pulse-bg) ficava claro-sobre-claro. */ html.pulse-claro .sobre-recruitment-cta { background: var(--pulse-accent); color: #fff; } /* ---- _engenharia.scss — página inteira era fundo #000 fixo ---------------- */ html.pulse-claro body.pulse-engenharia { background-color: var(--pulse-bg); } html.pulse-claro .ep-page { background: var(--pulse-bg); } /* CTA: fundo var(--pulse-bg) ficava claro-sobre-claro → accent + branco. */ html.pulse-claro .ep-cta { background: var(--pulse-accent); color: #fff; } /* ---- _laboratorio.scss — tudo em variáveis; só o CTA precisava ------------ */ /* Fundo accent mantém-se; o texto virava tinta. */ html.pulse-claro .lt-cta { color: #fff; } /* ---- _representacao.scss — página cinza + cartões navy -------------------- */ html.pulse-claro body.pulse-representacao { background-color: var(--pulse-bg); } html.pulse-claro .re-page { background: var(--pulse-bg); } /* Título sobre a foto do hero: mantém branco (a foto não muda com o tema); sombra suave garante leitura em fotos mais claras. */ html.pulse-claro .re-hero-title { color: #fff; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45); } /* Fallback sem imagem: era var(--pulse-bg) → claro-sobre-claro. */ html.pulse-claro .re-hero-title-standalone { color: var(--pulse-white); text-shadow: none; } /* Célula ativa da grelha: var(--pulse-bg) ficava clara e o logo, forçado a branco pelo filter do tema, desaparecia → superfície navy de tinta. */ html.pulse-claro .re-brand-trigger.is-active { background: var(--pulse-white); } html.pulse-claro .re-brand-trigger.is-active .re-brand-name { color: #fff; } /* Cartão de marca: mantém-se navy (identidade) → tinta como superfície, texto branco forçado (o var(--pulse-white) do tema viraria tinta-sobre-tinta). */ html.pulse-claro .re-brand-card { background: var(--pulse-white); color: #fff; } html.pulse-claro .re-brand-tagline, html.pulse-claro .re-brand-subtitle, html.pulse-claro .re-brand-desc { color: #fff; } /* Botão "saiba mais": fundo accent mantém-se, texto forçado a branco. */ html.pulse-claro .re-brand-btn { color: #fff; } /* .re-cta inverte sozinho (fundo vira tinta, texto vira claro) — verificado. */ /* ---- _mobile-nav.scss / _single-post.scss / _splash.scss / _reset.scss --- * Auditados, SEM correção necessária: * · overlay mobile (#nav-mobile): o comentário do fonte diz "#12127C" mas o * código usa var(--pulse-bg) e var(--pulse-white) → inverte sozinho; * · hambúrguer/X e toggle: currentColor sobre var(--pulse-white) → ok; * · cartões de notícias (arquivo): --news-card-fg é #fff FIXO sobre fundo * accent — continua legível no claro (8.6:1), hover já invertia; * · splash: 100% variáveis; * · reset: outline de foco #12127c e ::selection #12127c/#f9f5ef continuam * visíveis/legíveis sobre fundos claros — mantidos. */ /* ============================================================================ * AUDIT · sections.css (plugin) — secções "cinematográficas" * Estratégia: as secções são 100% guiadas por tokens locais (--bg/--ink/…); * redefinem-se os tokens para o claro e corrigem-se só as cores fixas. * Heróis e cartões de navegação (media + scrim) mantêm o tratamento escuro. * ========================================================================== */ /* ---- Página + tokens ------------------------------------------------------ */ html.pulse-claro body:has(.pulse-sec), html.pulse-claro .pulse-blocks-page { background: var(--pulse-bg); } html.pulse-claro section.pulse-sec, html.pulse-claro .pulse-sec { --bg: #f4f5fb; /* preset base */ --bg2: #dfe2f3; /* preset "dark" → o mais marcado */ --bg3: #eaecf7; /* preset "soft" → intermédio */ --ink: #16165c; --muted: rgba(22, 22, 92, 0.72); /* ≥ 4.5:1 sobre os três presets */ --head: #10104a; --eyebrow: #3939b5; /* accent da marca (7.9:1 no base)*/ --accent: #3939b5; --line: rgba(22, 22, 92, 0.16); --line-2: rgba(22, 22, 92, 0.34); --glass: rgba(22, 22, 92, 0.05); --glass-2: rgba(22, 22, 92, 0.09); } /* ---- Tipografia / prosa --------------------------------------------------- */ html.pulse-claro .pulse-sec ::selection { background: var(--pulse-accent); color: #fff; } html.pulse-claro .pulse-sec .pulse-sec__prose a { color: var(--pulse-accent); } html.pulse-claro .pulse-sec .pulse-sec__prose a:hover { color: var(--head); } /* ---- Títulos com #fff fixo → tinta de título ------------------------------ */ html.pulse-claro .pulse-sec .pulse-card__title, html.pulse-claro .pulse-sec .pulse-value__title, html.pulse-claro .pulse-sec .pulse-news__title, html.pulse-claro .pulse-sec .pulse-brand__tagline { color: var(--head); } /* ---- Acordeão -------------------------------------------------------------- */ html.pulse-claro .pulse-sec .pulse-acc__trigger { color: var(--head); } /* Reafirma o hover (o par base/hover do original empatava em especificidade). */ html.pulse-claro .pulse-sec .pulse-acc__trigger:hover { color: var(--eyebrow); } html.pulse-claro .pulse-sec .pulse-acc__item.is-open .pulse-acc__icon { background: var(--ink); color: #fff; border-color: var(--ink); } /* ---- Downloads (pills) ----------------------------------------------------- */ html.pulse-claro .pulse-sec a.pulse-pill { color: var(--ink) !important; } /* O ícone ::before herda var(--accent) → azul da marca com seta branca (8.6:1). */ /* ---- CTAs fortes (fundo branco/#060613 fixos → invertem para tinta) -------- */ html.pulse-claro section.pulse-sec a.pulse-cta__btn, html.pulse-claro section.pulse-sec span.pulse-cta__btn, html.pulse-claro section.pulse-sec a.pulse-news__more, html.pulse-claro section.pulse-sec a.pulse-brand__cta { background: var(--ink); color: #fff !important; box-shadow: 0 18px 44px -18px rgba(22, 22, 92, 0.45); } html.pulse-claro section.pulse-sec a.pulse-cta__btn:hover, html.pulse-claro section.pulse-sec a.pulse-news__more:hover, html.pulse-claro section.pulse-sec a.pulse-brand__cta:hover { box-shadow: 0 24px 54px -18px rgba(22, 22, 92, 0.55); } /* ---- Logótipos (filter invert → silhueta escura no claro) ------------------ */ /* brightness(0) é determinístico para qualquer asset opaco (branco incluído); !important iguala o do preset --bg-light (que faria logos brancos sumirem). */ html.pulse-claro .pulse-sec .pulse-logo .pulse-logo__img, html.pulse-claro .pulse-sec img.pulse-logo__img { filter: brightness(0) !important; opacity: 0.55; } html.pulse-claro .pulse-sec .pulse-logo:hover .pulse-logo__img { opacity: 0.85; } html.pulse-claro .pulse-sec .pulse-brand img.pulse-brand__logo { filter: brightness(0) !important; opacity: 0.8; } /* ---- Hero (mantém-se escuro: media + scrim, título branco) ----------------- */ /* Só o placeholder sem media usava --muted (que agora é tinta) sobre #04040d. */ html.pulse-claro .pulse-sec .pulse-hero .pulse-hero__placeholder { color: rgba(255, 255, 255, 0.62); } /* ---- Sombras pesadas de preto → tom de tinta, mais leves ------------------- */ html.pulse-claro .pulse-sec .pulse-media__img img { box-shadow: 0 40px 90px -40px rgba(22, 22, 92, 0.28); } html.pulse-claro .pulse-sec .pulse-kpis-media { box-shadow: 0 40px 90px -40px rgba(22, 22, 92, 0.28); } html.pulse-claro .pulse-sec a.pulse-navcard:hover { box-shadow: 0 48px 100px -40px rgba(22, 22, 92, 0.4); } /* ---- Composição navcomp (texto nos cantos da escada) ------------------------ */ /* Cartões em si mantêm o tratamento escuro (foto + shade + etiqueta branca). */ html.pulse-claro .pulse-sec a.pulse-navcomp__btn { color: var(--ink) !important; } html.pulse-claro .pulse-sec .pulse-navcomp__prose a { color: var(--pulse-accent); } html.pulse-claro .pulse-sec .pulse-navcomp__prose a:hover { color: var(--head); } html.pulse-claro .pulse-sec .pulse-navcomp__dots { background: var(--ink); box-shadow: 0 10px 0 0 rgba(22, 22, 92, 0.5), 0 20px 0 0 rgba(22, 22, 92, 0.22); } /* ---- Presets de fundo ------------------------------------------------------- * --bg-dark/--bg-soft leem --bg2/--bg3 (redefinidos acima) → mudam sozinhos. * --bg-light (#f5f5fb fixo + cartões brancos + texto #10102e) já É claro e * cumpre AA — mantido; os CTAs/logos dentro dele são apanhados pelas regras * acima (mesmo resultado visual, sem conflito). */