/* ACR SCHOOL · pages/guia-da-familia.css Exclusivo da página do Guia da Família, em :where(), especificidade zero. Documento de consulta, não de leitura corrida: a família abre o guia procurando uma regra, não para ler do começo ao fim. Por isso o índice fica fixo e sempre visível no desktop, a busca mora dentro dele, e a rolagem é só vertical. A versão horizontal anterior foi descartada porque duas rolagens na mesma tela brigam entre si. No celular o índice vira painel, aberto por uma barra que também diz em qual capítulo a pessoa está. É a mesma informação do desktop, na única forma que cabe em 380 px sem roubar a tela do texto. */ /* ------------------------------------------------------------------ * * Porta de entrada * ------------------------------------------------------------------ */ /* O wp_login_form() entrega cada campo dentro de um

e o "continuar conectado" como . Por isso a regra de rótulo empilhado é escrita campo por campo: aplicada a todo label, ela pegava também o label do checkbox e jogava a caixinha para cima do próprio texto. */ /* O espaço entre o painel e o texto de ajuda é gap do contêiner, não margin do parágrafo: a base zera margin de

por seletor de elemento e venceria qualquer margin escrita aqui dentro de :where(). */ :where(.guia-porta){display:grid;gap:var(--acr-s4); max-width:30rem;margin-inline:auto} :where(.guia-porta) form{display:grid;gap:var(--acr-s4); padding:var(--acr-s5);background:var(--acr-surface-alt); border:var(--acr-rule) solid var(--acr-line); border-radius:var(--acr-radius)} :where(.guia-porta) .login-username label, :where(.guia-porta) .login-password label{display:block;margin-bottom:8px; font-family:var(--acr-font-nav);font-weight:var(--acr-weight-nav); font-size:var(--acr-label);text-transform:uppercase; letter-spacing:var(--acr-tracking-label);color:var(--acr-ink-3)} :where(.guia-porta) input[type="text"], :where(.guia-porta) input[type="password"]{display:block;width:100%; padding:13px 15px;font-family:var(--acr-font-text);font-size:16px; color:var(--acr-ink);background:var(--acr-surface); border:var(--acr-rule) solid var(--acr-line-3); border-radius:var(--acr-radius-field)} /* flex-start e não center: em tela estreita o texto quebra em duas linhas e a caixinha centralizada fica flutuando entre elas. */ :where(.guia-porta) .login-remember label{display:flex;align-items:flex-start; gap:10px;font-family:var(--acr-font-text);font-size:15px;line-height:1.5; text-transform:none;letter-spacing:0;color:var(--acr-ink-2);cursor:pointer} :where(.guia-porta) .login-remember input{flex:none;width:auto;margin:4px 0 0} :where(.guia-porta) input[type="submit"]{width:100%;cursor:pointer; padding:15px 28px;font-family:var(--acr-font-nav);font-weight:600; font-size:13px;text-transform:uppercase;letter-spacing:var(--acr-tracking-btn); color:var(--acr-on-accent);background:var(--acr-accent);border:0; border-radius:var(--acr-radius-field)} /* O .acr-text da base limita a 54ch com especificidade de classe e venceria um :where(). Por isso este parágrafo não usa .acr-text: ele herda a largura da coluna da porta e dispensa a disputa. */ :where(.guia-porta__ajuda){text-align:center; font-family:var(--acr-font-text);font-size:15px;line-height:1.55; color:var(--acr-ink-2)} :where(.guia-porta__ajuda) a{text-decoration:underline} /* ------------------------------------------------------------------ * * Grade: índice à esquerda, documento à direita * ------------------------------------------------------------------ */ :where(.guia){--guia-col:272px; /* --guia-off e a altura real do cabecalho do site, escrita pelo JS. Token nao serve aqui: a topbar fica fora do elemento fixo e o cabecalho encolhe de 76 para 64 px quando gruda, entao qualquer valor fixo erra por dezenas de pixels e abre fresta para o texto passar. O fallback cobre o instante antes do script rodar. */ --guia-off:76px; position:relative;padding-block:var(--acr-s6) var(--acr-s7)} :where(.guia-grade){display:grid; grid-template-columns:var(--guia-col) minmax(0,1fr); gap:var(--acr-s6);align-items:start} /* O topo fixo do site já existe e tem altura própria: o índice gruda logo abaixo dele, nunca por cima. */ :where(.guia-indice){position:sticky; top:calc(var(--guia-off) + var(--acr-s3)); max-height:calc(100dvh - var(--guia-off) - var(--acr-s5)); display:flex;flex-direction:column;gap:var(--acr-s3)} :where(.guia-indice__topo){display:flex;align-items:center; justify-content:space-between;gap:var(--acr-s2)} :where(.guia-fechar){display:none} :where(.guia-busca){position:relative;display:block} :where(.guia-busca) svg{position:absolute;left:12px;top:50%; width:16px;height:16px;transform:translateY(-50%);pointer-events:none; fill:none;stroke:var(--acr-ink-3);stroke-width:1.6;stroke-linecap:round} :where(.guia-busca) input{width:100%;padding:11px 12px 11px 36px; font-family:var(--acr-font-text);font-size:15px;color:var(--acr-ink); background:var(--acr-surface);border:var(--acr-rule) solid var(--acr-line-3); border-radius:var(--acr-radius-field)} :where(.guia-busca) input::placeholder{color:var(--acr-ink-3)} :where(.guia-indice__vazio){font-family:var(--acr-font-nav); font-weight:var(--acr-weight-nav);font-size:13px;color:var(--acr-ink-3)} :where(.guia-indice__lista){overflow-y:auto;overscroll-behavior:contain; scrollbar-width:thin} :where(.guia-indice__lista) ol{display:grid;gap:2px; list-style:none;margin:0;padding:0} :where(.guia-indice__lista) li{margin:0} :where(.guia-indice__cap){display:grid;grid-template-columns:1.9rem minmax(0,1fr); gap:10px;align-items:baseline;padding:8px 0; font-family:var(--acr-font-nav);font-weight:600;font-size:16px; line-height:1.35;color:var(--acr-ink-2)} :where(.guia-indice__cap):hover{color:var(--acr-ink)} :where(.guia-indice__n){font-size:13px; letter-spacing:var(--acr-tracking-label);color:var(--acr-ink-3)} /* capítulo em que a pessoa está: filete dourado, o mesmo sinal de "você está aqui" do menu do site */ :where(.guia-indice) [data-guia-item].is-aqui>.guia-indice__cap{color:var(--acr-ink); box-shadow:inset 2px 0 0 var(--acr-accent);padding-left:10px} :where(.guia-indice) [data-guia-item].is-aqui .guia-indice__n{color:var(--acr-accent-text)} /* As seções do capítulo aberto, para pular direto ao item certo. Elas penduram num filete contínuo, recuado até debaixo do título do capítulo: sem isso a lista vira um bloco de itens soltos com o mesmo peso do capítulo, e some a relação de quem é filho de quem. O recuo vai no

  • , não no