/** * Estilos da Área do Membro — OHAD Gestão * * Abordagem mobile-first. Ambiente por grau: data-degree injetado * server-side no (anti-FOUC) — ver docs/adr-injecao-data-degree.md. * Nove ambientes calibrados por cálculo em docs/design/tokens-ambientes-por-grau.md. * Fontes auto-hospedadas em public/fonts/ — sem chamadas a CDN externo (LGPD). * Sem dependência de Elementor, Bootstrap ou qualquer framework externo. * * @package OhadGestao * @since 0.5.0 */ /* ────────────────────────────────────────────────────── Fontes auto-hospedadas — Cormorant Garamond + EB Garamond Subconjunto latin. Fonte servida localmente para conformidade com LGPD (sem transferência de IP do visitante ao Google). ────────────────────────────────────────────────────── */ @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/CormorantGaramond-Medium.woff2') format('woff2'); } @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/CormorantGaramond-MediumItalic.woff2') format('woff2'); } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/CormorantGaramond-SemiBold.woff2') format('woff2'); } @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url('../fonts/CormorantGaramond-SemiBoldItalic.woff2') format('woff2'); } @font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/EBGaramond-Regular.woff2') format('woff2'); } @font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/EBGaramond-Italic.woff2') format('woff2'); } /* ────────────────────────────────────────────────────── Tokens globais (imutáveis por grau) ────────────────────────────────────────────────────── */ :root { /* Tipografia */ --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "EB Garamond", Georgia, serif; --font-size-base: 1.0625rem; --line-height: 1.7; /* Forma — D1: cantos secos, sem cartão flutuante */ --radius: 2px; --radius-sm: 2px; --radius-pill: 999px; /* badges/pills, não cards — D1 fala de card */ --space: 1rem; /* Layout */ --max-width: 960px; /* Cor semântica global — D7: nunca muda por grau. Erro/sucesso de formulário/ação. */ --color-error: #E53935; --color-error-text: #FF8A80; --color-success: #43A047; --color-success-text: #81C784; /* * Estados do domínio Membro (D7, globais) — status de membro e avisos genéricos. * Domínio que o design-system não cobre (ele só tem pending/evaluating/approved, * de solicitação/trabalho). Valor padrão = par escuro (vale nos 8 ambientes * escuros); sobrescrito em [data-degree="portal"] com o par claro. * Ver docs/design/tokens-ambientes-por-grau.md — seção "Tokens de estado". */ --state-ok: #5FA97C; --state-ok-bg: #0F2A1E; --state-info: #6FA3D6; --state-info-bg: #122236; --state-warn: #D6A54A; --state-warn-bg: #2B2109; --state-danger: #D27766; --state-danger-bg: #2E120C; } /* color-scheme por ambiente — Portal é o único claro (D10); UI nativa do browser (scrollbar, select, date picker) deve seguir a mesma polaridade do ambiente. */ [data-degree] { color-scheme: dark; } [data-degree="portal"] { color-scheme: light; } /* ────────────────────────────────────────────────────── Ambientes por grau (data-degree injetado no pelo servidor, anti-FOUC) Gerado por cálculo em docs/design/tokens-ambientes-por-grau.md (27-28/07/2026). NÃO EDITAR À MÃO: qualquer mudança de valor exige revalidar contraste e ΔE no documento-fonte. Nove ambientes: Portal é o único claro (D10). ────────────────────────────────────────────────────── */ [data-degree="0-0-neofito"] { --bg-main:#0A0A0D; --surface-card:#252528; --border-color:#363639; --field-border:#737373; --text-main:#E8E6DF; --text-muted:#969592; --accent-primary:#9AA0AB; --accent-text:#9AA0AB; --accent-on-primary:#0A0A0D; --focus-ring: var(--accent-text); } [data-degree="1-10-zelator"] { --bg-main:#121608; --surface-card:#272A1E; --border-color:#383B30; --field-border:#737373; --text-main:#E8E6DF; --text-muted:#999990; --accent-primary:#A8BC55; --accent-text:#A8BC55; --accent-on-primary:#121608; --focus-ring: var(--accent-text); } [data-degree="2-9-theoricus"] { --bg-main:#0D0A1C; --surface-card:#252233; --border-color:#363443; --field-border:#737373; --text-main:#E8E6DF; --text-muted:#969497; --accent-primary:#9B6DEB; --accent-text:#9F73EC; --accent-on-primary:#0D0A1C; --focus-ring: var(--accent-text); } [data-degree="3-8-practicus"] { --bg-main:#170C05; --surface-card:#2E241E; --border-color:#3F3630; --field-border:#737373; --text-main:#E8E6DF; --text-muted:#9C9690; --accent-primary:#E88232; --accent-text:#E88232; --accent-on-primary:#170C05; --focus-ring: var(--accent-text); } [data-degree="4-7-philosophus"] { --bg-main:#04160E; --surface-card:#1B2B24; --border-color:#2D3C36; --field-border:#737373; --text-main:#E8E6DF; --text-muted:#949992; --accent-primary:#22C285; --accent-text:#22C285; --accent-on-primary:#04160E; --focus-ring: var(--accent-text); } [data-degree="portal"] { --bg-main:#DEDDE1; --surface-card:#F7F6FA; --border-color:#DEDDE1; --field-border:#7A7A7A; --text-main:#1A1922; --text-muted:#626168; /* corrigido: #6A6970 original dava 4.02:1 contra bg-main, abaixo de AA */ --accent-primary:#7264B6; --accent-text:#7264B6; --accent-on-primary:#FFFFFF; /* accent-text==accent-primary aqui; anel precisa de cor própria fora da família de acento, senão some sobre elemento preenchido no acento (ex. .ohad-btn-primario) */ --focus-ring: #24203A; --state-ok: #296E37; --state-ok-bg: #CCE3CD; --state-info: #0061A0; --state-info-bg: #CCDFF7; --state-warn: #81591A; --state-warn-bg: #EEDAC3; --state-danger: #9F4446; --state-danger-bg: #FAD4D2; } [data-degree="5-6-adeptus-minor"] { --bg-main:#0D0D0D; --surface-card:#252525; --border-color:#363636; --field-border:#737373; --text-main:#E8E6DF; --text-muted:#969591; --accent-primary:#FFD700; --accent-text:#FFD700; --accent-on-primary:#0D0D0D; --focus-ring: var(--accent-text); } [data-degree="6-5-adeptus-major"] { --bg-main:#0D0B0B; --surface-card:#252323; --border-color:#363535; --field-border:#737373; --text-main:#E8E6DF; --text-muted:#969490; --accent-primary:#B54D64; --accent-text:#C57285; --accent-on-primary:#FFFFFF; --focus-ring: var(--accent-text); } [data-degree="7-4-adeptus-exemptus"] { --bg-main:#080A12; --surface-card:#23252C; --border-color:#35363D; --field-border:#737373; --text-main:#E8E6DF; --text-muted:#959594; --accent-primary:#3E8FE0; --accent-text:#3E8FE0; --accent-on-primary:#080A12; --focus-ring: var(--accent-text); } /* ────────────────────────────────────────────────────── Ambientes do Vestíbulo e do Átrio (R4.2 — gate G3, 31/07/2026) Tokens copiados de docs/design/mockup-vestibulo-atrio-r4.html (rev. 3), com o seletor adaptado ao padrão real do projeto: o mockup usa [data-env="vestibulo"|"neutro"], aqui usam data-degree="vestibulo"|"atrio" para caber no mesmo atributo que os 9 ambientes de grau (injetado por Ohad_Router::registrar_filtro_data_degree()). Escolhido "atrio" em vez de "neutro" para não introduzir um segundo vocabulário de nome de ambiente quando já existe uma tela chamada exatamente Átrio. D11: Vestíbulo é o piso de luz — nenhum ambiente de grau pode ser mais escuro (verify-g3.py confirma: L=0,001561, o menor dos 11 ambientes). D12: a luz cresce por SUPERFÍCIE iluminada, não por luminância do fundo — o Vestíbulo não tem --surface-card distinta (D6 não se aplica ali). ────────────────────────────────────────────────────── */ [data-degree="vestibulo"] { --bg-main:#050507; --surface-card:#050507; --border-color:#2A2A2E; --field-border:#6E6E76; --text-main:#E8E6DF; --text-muted:#989792; --accent-primary:#BFA06A; --accent-text:#BFA06A; --accent-on-primary:#050507; --focus-ring: var(--accent-text); color-scheme: dark; } [data-degree="atrio"] { --bg-main:#0C0C0E; --surface-card:#242428; --border-color:#3A3A3E; --field-border:#6E6E76; --text-main:#E8E6DF; --text-muted:#989792; --accent-primary:#BFA06A; --accent-text:#BFA06A; --accent-on-primary:#0C0C0E; --focus-ring: var(--accent-text); color-scheme: dark; } /* Motion — ganho barato adotado do design-system. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ────────────────────────────────────────────────────── Container principal ────────────────────────────────────────────────────── */ .ohad-area-membro { position: relative; max-width: var(--max-width); margin: 2rem auto; padding: 0 1rem; color: var(--text-main); font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height); background: var(--bg-main); } /* ────────────────────────────────────────────────────── Links — R5.3 Achado do Alexandre olhando as telas: os links do Vestíbulo ("Prefiro entrar com senha", "Esqueci a senha") e do Átrio saíam no azul padrão do navegador, e depois de clicados no roxo de :visited — as duas únicas cores da tela que não pertencem à paleta da Ordem. A cor é `--accent-text`, o bronze, e não `--accent-primary`: o token de texto é o que carrega contraste garantido sobre `--bg-main` nos 11 ambientes (verify-g3.py mede AA sobre ele). Nos ambientes de grau em que os dois divergem — Rubi (`#B54D64` vs `#C57285`) e Amatista — usar `--accent-primary` num link rebaixaria o contraste do TEXTO abaixo do limite, que é justamente o defeito que `--accent-text` existe para evitar. `:visited` é declarado explicitamente porque, sem ele, o UA sobrescreve a cor do link já visitado com o roxo padrão mesmo quando `a` está estilizado — o navegador trata `:visited` como mais específico por origem. `:focus-visible` não substitui `:focus` aqui: o anel de foco global (`--focus-ring`, mais abaixo) só desenha o contorno; a cor do texto do link precisa mudar junto, e há navegação por teclado em `:focus` sem `:focus-visible` (formulário submetido, foco restaurado por script). Escopo: `.ohad-area-membro`, `.ohad-vestibulo` e `.ohad-atrio` — as três raízes servidas pelo plugin. Fora delas o tema/Elementor manda, e este arquivo não deve pintar link de página institucional. O `:not()` não é decoração. Um seletor como `.ohad-atrio a` tem especificidade (0,2,1), maior que a de `.ohad-btn-secundario` (0,1,0) e a de `.ohad-nav-link` (0,1,0) — que vêm DEPOIS neste arquivo. Sem a exclusão, o bronze venceria a cascata e repintaria o texto dos botões `` ("Sair" do Átrio usa `.ohad-btn-secundario`) e dos itens de navegação, que têm cor própria por decisão de design. Excluir na origem é preferível a subir a especificidade das outras regras ou a espalhar `!important`. ────────────────────────────────────────────────────── */ .ohad-area-membro a:not(.ohad-btn):not(.ohad-nav-link), .ohad-vestibulo a:not(.ohad-btn):not(.ohad-nav-link), .ohad-atrio a:not(.ohad-btn):not(.ohad-nav-link) { color: var(--accent-text); text-decoration: underline; text-underline-offset: 0.18em; transition: color 0.2s; } .ohad-area-membro a:not(.ohad-btn):not(.ohad-nav-link):visited, .ohad-vestibulo a:not(.ohad-btn):not(.ohad-nav-link):visited, .ohad-atrio a:not(.ohad-btn):not(.ohad-nav-link):visited { color: var(--accent-text); } .ohad-area-membro a:not(.ohad-btn):not(.ohad-nav-link):hover, .ohad-area-membro a:not(.ohad-btn):not(.ohad-nav-link):focus, .ohad-vestibulo a:not(.ohad-btn):not(.ohad-nav-link):hover, .ohad-vestibulo a:not(.ohad-btn):not(.ohad-nav-link):focus, .ohad-atrio a:not(.ohad-btn):not(.ohad-nav-link):hover, .ohad-atrio a:not(.ohad-btn):not(.ohad-nav-link):focus { color: var(--accent-text); text-decoration: none; } /* ────────────────────────────────────────────────────── Cabeçalho ────────────────────────────────────────────────────── */ .ohad-cabecalho { display: flex; align-items: center; gap: 1.25rem; margin-bottom: var(--space); padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); } .ohad-logo { width: 80px; height: auto; border-radius: 50%; border: 2px solid var(--accent-primary); } .ohad-cabecalho-titulo { font-size: 1.75rem; color: var(--text-main); font-family: var(--font-display); margin: 0; letter-spacing: 0.02em; } /* ────────────────────────────────────────────────────── Navegação ────────────────────────────────────────────────────── */ .ohad-nav { margin-bottom: var(--space); } .ohad-nav-lista { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; border-bottom: 2px solid var(--border-color); } .ohad-nav-link { display: block; padding: 0.5rem 1rem; color: var(--text-muted); text-decoration: none; font-size: 0.9rem; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.2s, border-color 0.2s; } .ohad-nav-link:hover, .ohad-nav-link:focus { color: var(--accent-text); outline: none; } .ohad-nav-link-ativo { color: var(--text-main); border-bottom-color: var(--accent-primary); font-weight: 600; } /* ────────────────────────────────────────────────────── Cards (blocos de seção) — D1: sem box-shadow, cantos secos ────────────────────────────────────────────────────── */ .ohad-card { background: var(--surface-card); border: 1px solid var(--border-color); border-top: 2px solid var(--accent-primary); border-radius: var(--radius); padding: var(--space); margin-bottom: var(--space); box-shadow: none; } .ohad-card h2 { margin-top: 0; font-size: 1.2rem; color: var(--text-main); font-family: var(--font-display); } .ohad-card h3 { font-size: 1rem; color: var(--text-main); font-family: var(--font-display); margin-top: var(--space); } /* ────────────────────────────────────────────────────── Telas de bloqueio / status ────────────────────────────────────────────────────── */ .ohad-bloqueio { max-width: 600px; margin: 3rem auto; padding: 2rem; text-align: center; background: var(--surface-card); border: 1px solid var(--border-color); border-top: 3px solid var(--accent-primary); border-radius: var(--radius); box-shadow: none; } .ohad-bloqueio-icone { font-size: 2rem; color: var(--accent-primary); margin-bottom: 1rem; display: block; } .ohad-bloqueio-titulo { font-size: 1.3rem; color: var(--text-main); font-family: var(--font-display); margin-top: 0; } .ohad-bloqueio-texto { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.5rem; } .ohad-bloqueio-acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.25rem; } /* ────────────────────────────────────────────────────── Botões ────────────────────────────────────────────────────── */ .ohad-btn { display: inline-block; padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); text-decoration: none; font-size: 0.9rem; cursor: pointer; border: none; transition: background 0.2s, color 0.2s, filter 0.2s; line-height: 1.4; } .ohad-btn-primario { background: var(--accent-primary); color: var(--accent-on-primary); } .ohad-btn-primario:hover, .ohad-btn-primario:focus { filter: brightness(1.15); color: var(--accent-on-primary); outline: 2px solid var(--focus-ring); } .ohad-btn-secundario { background: transparent; color: var(--text-main); border: 1px solid var(--accent-primary); } .ohad-btn-secundario:hover, .ohad-btn-secundario:focus { background: var(--surface-card); outline: 2px solid var(--focus-ring); } .ohad-btn-pequeno { padding: 0.4rem 0.9rem; font-size: 0.82rem; } /* ────────────────────────────────────────────────────── Avisos ────────────────────────────────────────────────────── */ .ohad-aviso { padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 0.9rem; } .ohad-aviso-sucesso { background: var(--state-ok-bg); border-left: 3px solid var(--state-ok); color: var(--state-ok); } .ohad-aviso-erro { background: var(--state-danger-bg); border-left: 3px solid var(--state-danger); color: var(--state-danger); } .ohad-aviso-info { background: var(--state-info-bg); border-left: 3px solid var(--state-info); color: var(--state-info); } .ohad-aviso-afastado { background: var(--state-warn-bg); border-left: 3px solid var(--accent-primary); color: var(--state-warn); padding: 1rem; margin-bottom: var(--space); } .ohad-aviso-afastado p { margin: 0 0 0.75rem; } .ohad-aviso-acoes { margin-top: 0.5rem; } /* ────────────────────────────────────────────────────── Badges de status (status de MEMBRO — domínio próprio, sem equivalente no design-system, que só cobre status de solicitação). Critério: contraste texto/fundo ≥4,5; delimitados por borda de 1px na cor do estado (D6 de separação por luminância não se aplica — badge não é card, ver docs/design/tokens-ambientes-por-grau.md). ────────────────────────────────────────────────────── */ .ohad-badge { display: inline-block; padding: .2rem .65rem; border-radius: var(--radius-pill); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; border: 1px solid transparent; } .ohad-badge-ativo { background: var(--state-ok-bg); color: var(--state-ok); border-color: var(--state-ok); } .ohad-badge-inativo { background: var(--surface-card); color: var(--text-muted); border-color: var(--border-color); } .ohad-badge-suspenso { background: var(--state-warn-bg); color: var(--state-warn); border-color: var(--state-warn); } .ohad-badge-afastado { background: var(--state-info-bg); color: var(--state-info); border-color: var(--state-info); } .ohad-badge-adormecido { background: var(--state-info-bg); color: var(--state-info); border-color: var(--state-info); } .ohad-badge-desligado { background: var(--state-danger-bg); color: var(--state-danger); border-color: var(--state-danger); } /* ────────────────────────────────────────────────────── In Memoriam — tokenizado in-place (domínio próprio, sem equivalente no design-system). ────────────────────────────────────────────────────── */ .ohad-inmemoriam { background: var(--surface-card); color: var(--text-muted); border: 1px solid var(--accent-primary); border-radius: var(--radius); padding: var(--space); margin-bottom: var(--space); } .ohad-inmemoriam-titulo { color: var(--accent-text); font-size: 1.1rem; font-family: var(--font-display); margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.08em; } .ohad-inmemoriam-lista { list-style: none; margin: 0; padding: 0; } .ohad-inmemoriam-item { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); font-style: italic; } .ohad-inmemoriam-item:last-child { border-bottom: none; } .ohad-inmemoriam-nome { font-weight: 700; color: var(--text-main); } .ohad-inmemoriam-motto { color: var(--text-muted); font-size: 0.88rem; } .ohad-inmemoriam-grau { font-size: 0.85rem; color: var(--text-muted); grid-column: 1; } .ohad-inmemoriam-data { font-size: 0.82rem; color: var(--text-muted); grid-row: 1; grid-column: 2; align-self: start; } .ohad-inmemoriam-legenda { display: none; /* Rótulo "Em memória de X" visível apenas em tela cheia */ } /* ────────────────────────────────────────────────────── Timeline da Trilha — tokenizado in-place (domínio próprio; diferente de .path-step do design-system, que é currículo por grau, feature futura não trazida nesta migração). ────────────────────────────────────────────────────── */ .ohad-trail-lista { list-style: none; margin: 0; padding: 0; } .ohad-trail-item { display: flex; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); } .ohad-trail-item:last-child { border-bottom: none; } .ohad-trail-data { flex-shrink: 0; min-width: 80px; font-size: 0.82rem; color: var(--text-muted); padding-top: 0.15rem; } .ohad-trail-tipo { display: block; font-weight: 600; font-size: 0.88rem; color: var(--text-main); margin-bottom: 0.25rem; } .ohad-trail-descricao { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* ────────────────────────────────────────────────────── Listas de dados (dl/dt/dd) ────────────────────────────────────────────────────── */ .ohad-resumo-lista, .ohad-dados-lista { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0; } .ohad-resumo-lista dt, .ohad-dados-lista dt { font-weight: 600; font-size: 0.88rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .ohad-resumo-lista dd, .ohad-dados-lista dd { margin: 0; color: var(--text-main); } /* ────────────────────────────────────────────────────── Oficiais do templo ────────────────────────────────────────────────────── */ .ohad-oficiais-lista { list-style: none; margin: 0; padding: 0; } .ohad-oficial-item { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; } .ohad-oficial-item:last-child { border-bottom: none; } .ohad-oficial-nome { font-weight: 600; } .ohad-oficial-motto { color: var(--text-muted); font-style: italic; } .ohad-oficial-cargo { color: var(--text-main); } .ohad-oficial-grau { color: var(--text-muted); font-size: 0.82rem; } /* ────────────────────────────────────────────────────── Formulários ────────────────────────────────────────────────────── */ .ohad-form-palavra, .ohad-politica-aceite { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; } .ohad-campo { display: flex; flex-direction: column; gap: 0.35rem; } .ohad-campo label { color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-size: .875rem; font-weight: 600; } .ohad-input-palavra { box-sizing: border-box; padding: 0.65rem 0.9rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 1.1rem; width: 100%; max-width: 320px; background: var(--surface-card); color: var(--text-main); text-align: center; letter-spacing: .1em; } .ohad-input-palavra:focus { border-color: var(--accent-primary); outline: 2px solid var(--focus-ring); } .ohad-texto-pequeno { font-size: 0.82rem; color: var(--text-muted); } /* ────────────────────────────────────────────────────── Campo de senha com botão de revelar (T3, itens 2 e 3, 06/08/2026) — máscara nativa (type=password) + ícone de olho para alternar para texto visível. ────────────────────────────────────────────────────── */ .ohad-campo-senha-grupo { position: relative; display: flex; } .ohad-campo-senha-grupo input { flex: 1 1 auto; padding-right: 2.75rem !important; /* espaço para o botão de revelar não sobrepor o texto digitado */ } .ohad-btn-revelar-senha { position: absolute; top: 0; right: 0; height: 100%; width: 2.5rem; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--text-muted); font-size: 1.1rem; line-height: 1; } .ohad-btn-revelar-senha:hover, .ohad-btn-revelar-senha:focus-visible { color: var(--accent-text); } /* Mensagem de erro de campo (ex.: "senhas não coincidem") — altura mínima SEMPRE reservada, vazia ou cheia, para o texto não empurrar o restante do formulário quando aparece (T3, item 2: a mensagem "pulava como balão" a cada tecla; agora só valida no blur/submit e o espaço já existe antes). */ .ohad-campo-erro { min-height: 1.2em; margin: 0; color: var(--state-danger, var(--color-error)); } .ohad-desafio-palavra { max-width: 460px; margin: 0 auto; text-align: center; } /* ────────────────────────────────────────────────────── Vestíbulo — página própria de login (/entrar/), tela focada, sem aside de navegação e sem NENHUM data-degree de grau (D13/sigilo: ninguém está autenticado nesta tela). Classes copiadas de .vestibulo/.form-login/.btn/.btn-sec do mockup rev. 3, prefixadas .ohad- para caber no vocabulário de classes já existente no plugin. ────────────────────────────────────────────────────── */ .ohad-vestibulo { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 3.5rem 1.5rem; text-align: center; background: var(--bg-main); color: var(--text-main); } .ohad-vestibulo-emblema { height: 112px; width: auto; margin: 0 auto 1.5rem; display: block; color: var(--accent-primary); } .ohad-vestibulo-titulo { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; letter-spacing: .04em; margin: 0 0 0.25rem; color: var(--text-main); } .ohad-vestibulo-sub { color: var(--text-muted); font-size: 0.9rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 2.25rem; } /* No Vestíbulo não há superfície (D12): os campos são recortes no vazio, identificados só pela borda (--field-border, ≥3:1 por WCAG 1.4.11). */ .ohad-form-login { width: 100%; max-width: 320px; margin: 0 auto; text-align: left; } .ohad-form-login label { display: block; font-size: 0.78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0.9rem 0 0.35rem; } .ohad-form-login input { box-sizing: border-box; width: 100%; font: inherit; padding: 0.65rem 0.75rem; background: transparent; color: var(--text-main); border: 1px solid var(--field-border, var(--border-color)); border-radius: var(--radius-sm); } .ohad-form-login .ohad-nota { margin: 0.75rem 0 0; font-size: 0.82rem; color: var(--text-muted); text-align: center; } .ohad-vestibulo-links { margin-top: 1.4rem; font-size: 0.88rem; display: flex; flex-direction: column; gap: 0.4rem; } .ohad-vestibulo-rodape { margin-top: 3rem; color: var(--text-muted); font-size: 0.78rem; } /* ────────────────────────────────────────────────────── Átrio — tela focada pós-login, sem aside de navegação. Variante A (D9/sigilo de grau): o Átrio inteiro é ambiente NEUTRO (data-degree="atrio") — a única marca do grau do membro é a linha de identificação (.ohad-atrio-id), que usa a cor do grau via --grau-cor. ────────────────────────────────────────────────────── */ .ohad-atrio { max-width: 640px; margin: 2rem auto; padding: 0 1rem; } .ohad-atrio-porta .ohad-form-palavra { margin: 1rem 0; } .ohad-atrio-mural-lista { margin: 0; padding-left: 1.2rem; color: var(--text-muted); font-size: 0.92rem; } .ohad-atrio-mural-lista li { margin-bottom: 0.5rem; } .ohad-atrio .atrio-topo { justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; } /* Linha de identificação (D9) — único ponto do Átrio que herda a cor do grau do membro. --grau-cor é definida inline pelo PHP a partir do accent-text do ambiente de grau do membro; nunca vaza para o resto da tela (fundo, cartões continuam no ambiente neutro do Átrio). */ .ohad-atrio-id { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--grau-cor, var(--accent-text)); } .ohad-atrio-id-sigilo { width: 20px; height: 20px; flex: none; } .ohad-atrio-id-sigilo * { fill: var(--grau-cor, var(--accent-text)); } .ohad-badge-regular { color: #7FD9A6; border-color: #2E5C43; } .ohad-badge-irregular { color: #E8A87C; border-color: #6B4A2E; } /* ────────────────────────────────────────────────────── Política de privacidade — tokenizado in-place (domínio próprio). ────────────────────────────────────────────────────── */ .ohad-politica-titulo { font-size: 1.4rem; color: var(--text-main); font-family: var(--font-display); margin-top: 0; } .ohad-politica-subtitulo { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem; } .ohad-politica-corpo h2 { font-size: 1rem; color: var(--text-main); margin-top: 1.5rem; margin-bottom: 0.35rem; } .ohad-politica-corpo p { margin-top: 0; font-size: 0.92rem; color: var(--text-muted); } .ohad-politica-rodape { font-size: 0.82rem; color: var(--text-muted); margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border-color); } .ohad-politica-checkbox { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; } .ohad-politica-checkbox input { margin-top: 0.25rem; flex-shrink: 0; } /* ────────────────────────────────────────────────────── Inputs — regras universais por token de ambiente. O escopo sob .ohad-area-membro + !important vence os estilos de input do tema Astra (background:white/color:black com alta especificidade). ────────────────────────────────────────────────────── */ .ohad-area-membro input[type="text"], .ohad-area-membro input[type="password"], .ohad-area-membro input[type="email"], .ohad-area-membro input[type="search"], .ohad-area-membro textarea, .ohad-area-membro select, .ohad-area-membro .ohad-campo input, .ohad-area-membro .ohad-campo textarea, .ohad-area-membro .ohad-campo select, .ohad-area-membro .ohad-input-palavra { background: var(--surface-card) !important; color: var(--text-main) !important; border: 1px solid var(--field-border, var(--border-color)) !important; border-radius: var(--radius-sm) !important; } .ohad-area-membro input[type="text"]:focus, .ohad-area-membro input[type="password"]:focus, .ohad-area-membro input[type="email"]:focus, .ohad-area-membro textarea:focus, .ohad-area-membro .ohad-input-palavra:focus { border-color: var(--accent-primary) !important; outline: 2px solid var(--focus-ring) !important; outline-offset: 0 !important; background: var(--surface-card) !important; color: var(--text-main) !important; } /* Anel de foco unificado — ganho barato adotado do design-system: halo duplo (outline + box-shadow na cor da superfície) separa o anel do elemento em todos os nove ambientes, inclusive quando o elemento já é preenchido na cor do próprio acento (ex. .ohad-btn-primario). */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--surface-card); } /* ────────────────────────────────────────────────────── Paginação ────────────────────────────────────────────────────── */ .ohad-pagination { margin-top: 1.25rem; display: flex; gap: 0.25rem; flex-wrap: wrap; } .ohad-pagination .page-numbers { display: inline-block; padding: 0.35rem 0.65rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); text-decoration: none; font-size: 0.85rem; color: var(--text-main); transition: background 0.15s; } .ohad-pagination .page-numbers.current { background: var(--accent-primary); color: var(--accent-on-primary); border-color: var(--accent-primary); } .ohad-pagination .page-numbers:hover { background: var(--surface-card); } /* ────────────────────────────────────────────────────── Responsivo — abaixo de 600px ────────────────────────────────────────────────────── */ @media (max-width: 600px) { .ohad-area-membro { padding: 0 0.5rem; margin: 1rem auto; } .ohad-card { padding: 1rem; } .ohad-nav-lista { flex-direction: column; border-bottom: none; gap: 0; } .ohad-nav-link { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border-color); border-left: 3px solid transparent; margin-bottom: 0; } .ohad-nav-link-ativo { border-left-color: var(--accent-primary); border-bottom-color: var(--border-color); } .ohad-bloqueio { margin: 1.5rem auto; padding: 1.25rem; } .ohad-bloqueio-acoes { flex-direction: column; align-items: stretch; } .ohad-btn { text-align: center; } .ohad-resumo-lista, .ohad-dados-lista { grid-template-columns: 1fr; gap: 0.1rem; } .ohad-resumo-lista dd, .ohad-dados-lista dd { margin-bottom: 0.6rem; } .ohad-cabecalho { flex-direction: column; text-align: center; } .ohad-inmemoriam-item { grid-template-columns: 1fr; } .ohad-inmemoriam-data { grid-row: auto; grid-column: auto; } .ohad-vestibulo { padding: 2rem 1.25rem; } .ohad-vestibulo-emblema { height: 88px; } }