/* * A BARRA DE PLATAFORMA (LOG-21/D-083/EMP-013/D-143/D-144) — CSS PRÓPRIO, * SÓ PARA DENTRO DO SHADOW ROOT de ``. * * Este ficheiro é carregado por um `` que o PRÓPRIO `header.js` cria * dentro do `shadowRoot` (uma folha de estilo fora do Shadow DOM não atravessa * a fronteira). O `` que a app hospedeira põe no `` é só para o * navegador aquecer o pedido mais cedo — não estiliza nada por si. * * Cores e tipos são LITERAIS, e não `var(--...)` do host: a ideia do Shadow * DOM aqui é o oposto de herdar do CSS do Palas ou do Playbook — cada um tem * o seu próprio `--navy-dark`/`--red`, e esta barra tem de parecer igual nos * dois independentemente do que essas variáveis disserem. Os valores são os * mesmos tokens de `apps/web/src/app/globals.css` (`--navy-dark: #1e2d45`, * `--red: #e8473a`), copiados e não referenciados. */ :host { all: initial; display: block; color-scheme: light; } * { box-sizing: border-box; } .lh-bar { display: flex; align-items: stretch; height: 48px; background: #1e2d45; padding: 0 16px; gap: 20px; font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; } .lh-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 44px; color: #ffffff; text-decoration: none; border-radius: 4px; } .lh-brand:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } .lh-chevrons { display: inline-flex; line-height: 0; } .lh-wordmark { font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 800; font-size: 18px; letter-spacing: 0.02em; text-transform: uppercase; color: #ffffff; } .lh-tabs { display: flex; align-items: stretch; gap: 4px; } .lh-tab { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; } .lh-tab:hover { color: rgba(255, 255, 255, 0.85); } .lh-tab:focus-visible { outline: 2px solid #ffffff; outline-offset: -3px; } .lh-tab[aria-current='page'] { color: #ffffff; border-bottom-color: #e8473a; } .lh-account { position: relative; margin-left: auto; display: flex; align-items: center; } .lh-trigger { display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 4px 10px 4px 6px; background: transparent; border: none; border-radius: 8px; color: #ffffff; font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; } .lh-trigger:hover { background: rgba(255, 255, 255, 0.1); } .lh-trigger:focus-visible, .lh-login:focus-visible, .lh-panel a:focus-visible, .lh-panel button:focus-visible { outline: 2px solid #ffffff; outline-offset: -2px; } .lh-avatar { width: 28px; height: 28px; border-radius: 999px; background: #e8473a; color: #ffffff; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.02em; flex-shrink: 0; } .lh-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lh-caret { display: inline-flex; flex-shrink: 0; transition: transform 0.15s ease; } .lh-trigger[aria-expanded='true'] .lh-caret { transform: rotate(180deg); } .lh-login { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; min-width: 44px; padding: 0 16px; background: #e8473a; color: #ffffff; border-radius: 6px; font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; } .lh-login:hover { background: #c93a2e; } .lh-panel { position: absolute; top: calc(100% + 6px); right: 0; min-width: 232px; background: #ffffff; color: #1d2939; border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(15, 23, 42, 0.06); padding: 6px; display: flex; flex-direction: column; font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; z-index: 30; } .lh-panel[hidden] { display: none; } .lh-panel a, .lh-panel button { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 8px 12px; border: none; background: transparent; border-radius: 6px; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; } .lh-panel a:hover, .lh-panel button:hover { background: #f4f5f7; } .lh-panel .lh-strong { font-weight: 700; } .lh-panel .lh-row { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 8px 12px; color: #475467; } .lh-panel .lh-divider { height: 1px; background: #eaecf0; margin: 6px 4px; border: none; } @media (max-width: 640px) { .lh-wordmark { display: none; } .lh-name { display: none; } .lh-bar { padding: 0 10px; gap: 10px; } .lh-tab { padding: 0 10px; } }