/* * Colégio Palas Atena — linguagem visual * ====================================== * * A identidade já existia: está na logo e no site da escola. Navy #1f3080, * amarelo #efc312 e azul #00a8e0 saem do próprio brasão. Este tema não inventa * paleta; adota a que a escola usa. Laranja e vermelho de campanha foram * removidos porque não pertencem à marca — vinham de uma ilustração gerada. * * Regra de harmonia: TRÊS cores, todas da logo, sobre cinza frio #f1f1f1. * O que diferencia uma seção da outra é a fotografia e o ritmo, nunca o matiz. * Um quarto matiz é o que faz um site parecer montado por template. * * Hanken Grotesk em tudo, display e texto. É o grotesco geométrico que o site * da escola já roda e o parente livre do Gotham do logotipo. Uma família só, * com contraste por peso e caixa: par de fontes "display + texto" é assinatura * de layout gerado. * * Peso claro. A base é clara e o navy entra como pontuação — hero, uma faixa * e o rodapé. O erro anterior era o inverso: massa escura por toda a página, * com as fotos reais da escola soterradas por véus a 93%. * * theme.json carrega tokens (cor, tipografia, escala, espaço). * Este arquivo carrega composição e componentes. */ /* ------------------------------------------------------------------ * * 1. Base * ------------------------------------------------------------------ */ :root { /* Acento único do site. O azul da logo, o mesmo em toda página. */ --palas-accent: var(--wp--preset--color--cyan); --palas-accent-ink: var(--wp--preset--color--cyan-ink); --palas-rule: color-mix(in srgb, var(--wp--preset--color--navy) 14%, transparent); --palas-rule-soft: color-mix(in srgb, var(--wp--preset--color--navy) 8%, transparent); } /* As classes de acento por seção continuam no por compatibilidade, mas já não trocam o matiz: a seção se distingue por foto e ritmo, não por cor. Quatro acentos era paleta inventada por cima de uma marca que só tem três. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; } body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-synthesis-weight: none; } h1, h2, h3, h4 { text-wrap: balance; } p { text-wrap: pretty; } ::selection { background: var(--wp--preset--color--navy); color: #fff; } :focus-visible { outline: 3px solid var(--wp--preset--color--navy); outline-offset: 3px; border-radius: 3px; } /* Sobre navy o anel navy sumiria. */ .palas-hero :focus-visible, .palas-section--navy :focus-visible, .palas-footer :focus-visible { outline-color: var(--wp--preset--color--sun); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } .skip-link:focus { position: fixed; left: 1rem; top: 1rem; z-index: 100; padding: 0.6rem 1.1rem; border-radius: 6px; background: var(--wp--preset--color--navy); color: #fff; text-decoration: none; } /* ------------------------------------------------------------------ * * 2. Containers e ritmo * * O problema antigo: 96px de padding em TODAS as seções, 8 lajes iguais. * Agora o ritmo tem três densidades, e a página alterna entre elas. * ------------------------------------------------------------------ */ .palas-container { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: 1.5rem; } @media (min-width: 768px) { .palas-container { padding-inline: 2.5rem; } } .palas-container--text { max-width: 44rem; } /* coluna de leitura, à esquerda */ .palas-container--read { max-width: 46rem; } /* coluna centralizada */ .palas-container--wide { max-width: 84rem; } .palas-section { padding-block: var(--wp--preset--spacing--breath); } .palas-section--tight { padding-block: var(--wp--preset--spacing--wide); } .palas-section--act { padding-block: var(--wp--preset--spacing--act); } .palas-section--flush { padding-block: 0; } .palas-section--paper { background: var(--wp--preset--color--paper); } .palas-section--white { background: #fff; } .palas-section--soft { background: var(--wp--preset--color--paper-dark); } .palas-section--navy { background: var(--wp--preset--color--navy-deep); color: #fff; } .palas-section--navy :is(h1,h2,h3,h4) { color: #fff; } .palas-section--navy p { color: rgb(255 255 255 / 0.82); } /* Fio separador entre seções do mesmo tom, para não virar sopa */ .palas-section--paper + .palas-section--paper { border-top: 1px solid var(--palas-rule-soft); } /* ------------------------------------------------------------------ * * 3. Tipografia aplicada * ------------------------------------------------------------------ */ /* Números tabulares onde há números comparáveis */ .palas-stat__value, .palas-list__num { font-variant-numeric: tabular-nums; } /* Eyebrow: agora é raro. Sem barrinha decorativa, só a letra. */ .is-style-eyebrow { display: block; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--palas-accent-ink); margin-bottom: 1rem; } .palas-section--navy .is-style-eyebrow, .palas-hero .is-style-eyebrow { color: var(--wp--preset--color--sun); } .is-style-lede { font-size: var(--wp--preset--font-size--lede); line-height: 1.55; color: var(--wp--preset--color--ink-soft); max-width: 42ch; } .palas-section--navy .is-style-lede, .palas-hero .is-style-lede { color: rgb(255 255 255 / 0.85); } /* Marcador da campanha. Traço sob a linha de base, não caixa amarela chapada: lê como grifo de quem estudou, não como realce de PowerPoint. */ /* `.palas-mark` continua marca-texto: um traço fino cruzando o pé da linha. */ .palas-mark { background-image: linear-gradient(transparent 61%, var(--wp--preset--color--sun) 61%, var(--wp--preset--color--sun) 80%, transparent 80%); background-color: transparent; color: inherit; padding-inline: 0.02em; border-radius: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* `--block` vira tarja de verdade: bloco chapado, do jeito que a arte * "Ensino Forte" trata as palavras. * * Engrossar o marca-texto não era opção: quanto mais alto o traço, mais * letra branca fica em cima do ouro, e branco sobre #efc312 dá 1,35:1. * Chapando o bloco e virando o texto para navy-dark, a conta é 8,61:1. * A mesma regra de sempre — a cor do texto segue a superfície. */ mark.palas-mark--block { background-color: var(--wp--preset--color--sun); background-image: none; color: var(--wp--preset--color--navy-dark); padding: 0.06em 0.22em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Ênfase da campanha. O itálico do Hanken é discreto: serve para inflexão, não para decoração. */ .palas-em { font-style: italic; font-weight: 500; } /* ------------------------------------------------------------------ * * 4. Botões — sólidos, raio contido, sem gradiente * ------------------------------------------------------------------ */ .wp-block-button__link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; /* alvo de toque */ line-height: 1.1; box-shadow: none; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } /* CTA amarelo com texto navy, o mesmo par que a escola já usa no site dela. Ciano com texto branco dava 2,6:1 e reprovava; amarelo com navy dá 9,4:1 e é a única entrada de calor da página — por isso funciona como chamada. */ .is-style-accent .wp-block-button__link { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--navy-dark); } .is-style-accent .wp-block-button__link:hover { background: color-mix(in srgb, var(--wp--preset--color--sun) 88%, black); } .is-style-ghost .wp-block-button__link { background: transparent; color: var(--wp--preset--color--navy); border: 1.5px solid var(--palas-rule); } .is-style-ghost .wp-block-button__link:hover { border-color: var(--wp--preset--color--navy); background: transparent; } .palas-hero .is-style-ghost .wp-block-button__link, .palas-section--navy .is-style-ghost .wp-block-button__link { color: #fff; border-color: rgb(255 255 255 / 0.35); } .palas-hero .is-style-ghost .wp-block-button__link:hover, .palas-section--navy .is-style-ghost .wp-block-button__link:hover { border-color: #fff; background: rgb(255 255 255 / 0.08); } /* Link de texto com seta, o CTA discreto que substitui "Explorar →" em card */ .palas-arrow { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: var(--wp--preset--font-size--small); color: var(--palas-accent-ink); text-decoration: none; min-height: 44px; } .palas-arrow::after { content: '→'; transition: transform 0.18s ease; } .palas-arrow:hover { text-decoration: underline; } .palas-arrow:hover::after { transform: translateX(3px); } /* ------------------------------------------------------------------ * * 5. Hero * ------------------------------------------------------------------ */ .palas-hero { position: relative; overflow: hidden; color: #fff; background: var(--wp--preset--color--navy-deep); display: grid; align-items: center; min-height: min(84vh, 40rem); } /* A foto agora ocupa o hero inteiro. * * A versão anterior era partida — copy num campo navy, foto em painel * próprio — e o comentário dizia que véu sobre foto clara "vira lama". Isso * é verdade para véu CHAPADO: um preto a 86% uniforme apaga a fotografia e * ainda deixa a copy sobre ruído. Degradê direcional não tem esse problema, * porque escurece só o lado onde o texto está e solta o outro. * * A conta, no pior caso possível (foto branca por baixo do ponto mais claro * que o texto alcança): o degradê segura 0,86 de navy até 46% da largura, o * que dá 8,1:1 para texto branco. A copy é limitada a 34rem justamente para * nunca chegar na ponta clara, onde cairia para 2,1:1. */ .palas-hero__foto { position: absolute; inset: 0; margin: 0; } .palas-hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; } .palas-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgb(2 15 71 / 0.78) 0%, rgb(2 15 71 / 0.92) 100% ); } /* Filete dourado no pé: a única linha de cor do topo. */ .palas-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3; background: var(--wp--preset--color--sun); } .palas-hero__inner { position: relative; z-index: 2; box-sizing: border-box; width: 100%; max-width: 76rem; margin-inline: auto; padding: var(--wp--preset--spacing--breath) 1.5rem; } @media (min-width: 768px) { .palas-hero__inner { padding-inline: 2.5rem; } } @media (min-width: 1024px) { .palas-hero { min-height: min(88vh, 44rem); } /* No desktop a copy ocupa só a faixa esquerda, então o degradê vira horizontal e a fotografia respira do meio para a direita. */ .palas-hero::before { background: linear-gradient( 96deg, rgb(2 15 71 / 0.94) 0%, rgb(2 15 71 / 0.86) 46%, rgb(2 15 71 / 0.34) 96% ); } } .palas-hero__copy { max-width: 34rem; } .palas-hero h1 { font-size: var(--wp--preset--font-size--hero); font-weight: 700; /* 1.06 era apertado demais para três linhas com uma tarja chapada no meio: o bloco dourado ultrapassa a própria linha em 7px de cada lado e encostava em "é Palas." no celular. */ line-height: 1.14; letter-spacing: -0.028em; color: #fff; } /* Selo de autoridade no pé do hero */ .palas-hero__seal { display: flex; align-items: center; gap: 0.9rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 0.22); max-width: 30rem; } .palas-hero__seal img { height: 2.4rem; width: auto; } .palas-hero__seal span { font-size: var(--wp--preset--font-size--micro); line-height: 1.45; color: rgb(255 255 255 / 0.78); } /* Em tela estreita o selo e a frase disputam a mesma linha e a frase cai numa coluna de ~90px, com duas palavras por linha. Empilha. */ @media (max-width: 560px) { .palas-hero__seal { flex-direction: column; align-items: flex-start; gap: 0.85rem; } } /* ------------------------------------------------------------------ * * 6. Hero de página interna — editorial, não laje chapada * ------------------------------------------------------------------ */ .palas-page-hero { position: relative; background: var(--wp--preset--color--paper); border-bottom: 1px solid var(--palas-rule-soft); overflow: hidden; } .palas-page-hero__inner { max-width: 76rem; margin-inline: auto; padding: 2rem 1.5rem var(--wp--preset--spacing--section); } @media (min-width: 768px) { .palas-page-hero__inner { padding-inline: 2.5rem; } } /* Sem foto o H1 ocupa a coluna de leitura inteira; com foto ele divide a linha com ela. 20ch fixo dava 570px num campo de 1216px, e a página abria com metade da tela em branco. */ .palas-page-hero h1 { font-size: var(--wp--preset--font-size--title-xl); font-weight: 700; letter-spacing: -0.028em; max-width: 30ch; margin: 1.5rem 0 0; } /* Cheguei a pôr foto aqui e desfiz: a única foto disponível para o topo era a mesma que já ilustrava a seção seguinte, e a página abria com a mesma imagem duas vezes em 800px de rolagem. Onze fotos não sustentam duas posições distintas em quinze páginas. Foto no topo volta quando houver acervo. */ .palas-page-hero .is-style-lede { margin-top: 1.5rem; max-width: 44ch; } /* Trilha */ .palas-crumbs { font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--ink-soft); } .palas-crumbs a { color: inherit; text-decoration: none; } .palas-crumbs a:hover { color: var(--palas-accent-ink); text-decoration: underline; } .palas-crumbs [aria-current] { color: var(--wp--preset--color--ink); } .palas-crumbs span[aria-hidden] { padding-inline: 0.45rem; opacity: 0.45; } /* Marca de acento da seção: um traço, não uma barra colorida em cada card */ .palas-page-hero::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--palas-accent); } /* ------------------------------------------------------------------ * * 7. Cabeçalho de seção * ------------------------------------------------------------------ */ .palas-section__header { max-width: 34rem; margin-bottom: var(--wp--preset--spacing--wide); } /* Cabeçalho de seção em duas colunas quando existe linha de apoio. * * Empilhado em 34rem, ele usava 544px de um campo de 1136px e deixava 592px * vazios à direita — em toda seção de toda página. Com título à esquerda e * apoio à direita, a linha fecha e o olho anda na horizontal em vez de só * descer. O apoio alinha pela base do título, não pelo topo: é o que costura * os dois blocos numa linha só. */ @media (min-width: 900px) { .palas-section__header:not(.is-centered):has(.is-style-lede) { max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: var(--wp--preset--spacing--section); row-gap: 1rem; } /* O eyebrow atravessa as duas colunas e fica sozinho na primeira linha. Título e apoio dividem a segunda, começando na mesma altura. Tentei antes alinhar o apoio pela base do título, com ele atravessando as duas linhas: a linha do eyebrow esticava para a altura do apoio e abria um vão de 140px entre o rótulo e o título. */ .palas-section__header:not(.is-centered):has(.is-style-lede) > * { margin-top: 0; } .palas-section__header:not(.is-centered):has(.is-style-lede) > .is-style-eyebrow { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; } .palas-section__header:not(.is-centered):has(.is-style-lede) > h2 { grid-column: 1; grid-row: 2; } .palas-section__header:not(.is-centered):has(.is-style-lede) > .is-style-lede { grid-column: 2; grid-row: 2; align-self: start; max-width: 42ch; /* Meia-linha para o texto pequeno casar opticamente com a caixa alta do título, que tem altura de maiúscula muito maior. */ margin-top: 0.45rem; } } .palas-section__header.is-centered { max-width: 40rem; margin-inline: auto; text-align: center; } .palas-section__header.is-centered .is-style-lede { margin-inline: auto; } .palas-section__header > * + * { margin-top: 1.25rem; } /* ------------------------------------------------------------------ * * 8. Bloco de resposta (AEO) * * Era uma barra colorida à esquerda. Virou hierarquia tipográfica: a * resposta é maior e mais escura que o desenvolvimento. Sem enfeite. * ------------------------------------------------------------------ */ .palas-answer { max-width: 44rem; } .palas-answer > * + * { margin-top: 1.35rem; } .palas-answer__lead { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--title-sm); font-weight: 600; letter-spacing: -0.015em; line-height: 1.4; color: var(--wp--preset--color--ink); } .palas-answer p:not(.palas-answer__lead) { color: var(--wp--preset--color--ink-soft); max-width: 40rem; } /* ------------------------------------------------------------------ * * 9. Lista editorial — substitui a grade de cards * * Era: 4 caixas brancas com sombra, raio e barra colorida no topo. * Agora: itens separados por fio, numerados, sem caixa. Lê como * publicação, não como template de SaaS. * ------------------------------------------------------------------ */ .palas-list { display: grid; gap: 0; border-top: 1px solid var(--palas-rule); counter-reset: palas-item; } .palas-list__item { counter-increment: palas-item; display: grid; grid-template-columns: 3rem 1fr; gap: 0 1.5rem; align-items: start; padding-block: 1.75rem; border-bottom: 1px solid var(--palas-rule); } /* Abaixo de 900px só há duas colunas (número + conteúdo). O item pode ter dois filhos (título e descrição separados), e sem esta regra o segundo caía numa coluna implícita de largura mínima, saindo uma letra por linha. */ .palas-list__item > * { grid-column: 2; min-width: 0; } .palas-list__item > * + * { margin-top: 0.5rem; } @media (min-width: 900px) { /* As três colunas somam ~768px (3rem + 17rem + 46ch + dois vãos), mas as linhas divisórias iam até os 1136px do container. Sobrava um rabo vazio de 349px — 31% — no fim de cada regra, em todos os itens das onze páginas que usam esta lista. Alargar a coluna de texto até a borda seria pior: daria 88ch de medida, o dobro do confortável. Então quem encolhe é a caixa, não a tipografia. */ .palas-list--split { max-width: 52rem; } .palas-list--split .palas-list__item { grid-template-columns: 3rem 17rem minmax(0, 46ch); } .palas-list--split .palas-list__item > *:nth-child(1) { grid-column: 2; } .palas-list--split .palas-list__item > *:nth-child(2) { grid-column: 3; margin-top: 0; } .palas-list--split .palas-list__item p { margin-top: 0; } /* O extrator do Astro emitiu duas formas de item. * * A home tem título e descrição como dois filhos diretos, e cai certinho nas * colunas 2 e 3. As onze páginas internas têm os dois DENTRO de um
, e * esse div, sendo filho único, ia inteiro para a coluna 2 — 17rem, 272px. * Título e descrição empilhavam nessa faixa estreita e a coluna de 46ch * ficava vazia ao lado, em todos os itens de todas essas páginas. * * Era isso que fazia as internas parecerem uma coluna de texto com metade da * tela em branco à direita. Em vez de reescrever o conteúdo das onze, o grid * entra no wrapper quando ele existe. */ .palas-list--split .palas-list__item > div:only-child { grid-column: 2 / -1; display: grid; grid-template-columns: 17rem minmax(0, 46ch); gap: 0 1.5rem; align-items: start; } .palas-list--split .palas-list__item > div:only-child > * { margin-top: 0; } } .palas-list__item::before { content: counter(palas-item, decimal-leading-zero); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--micro); font-weight: 700; letter-spacing: 0.06em; color: var(--palas-accent-ink); padding-top: 0.35rem; } .palas-list__item h3 { margin: 0; font-size: var(--wp--preset--font-size--title-sm); font-weight: 700; letter-spacing: -0.018em; } .palas-list__item h3 a { text-decoration: none; color: inherit; } .palas-list__item h3 a:hover { color: var(--palas-accent-ink); text-decoration: underline; text-underline-offset: 4px; } .palas-list__item p { margin: 0.5rem 0 0; color: var(--wp--preset--color--ink-soft); max-width: 44ch; } .palas-section--navy .palas-list, .palas-section--navy .palas-list__item { border-color: rgb(255 255 255 / 0.16); } .palas-section--navy .palas-list__item::before { color: var(--wp--preset--color--sun); } /* ------------------------------------------------------------------ * * 10. Cards de navegação — só onde o card É o clique * * Fotografia primeiro, ocupando o card inteiro. Sem caixa branca, sem * sombra, sem barra colorida. O título vive sobre a imagem. * ------------------------------------------------------------------ */ .palas-navcards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-items: stretch; } /* Foto em cima, texto embaixo em campo navy. * * Antes era texto sobre a foto, com um véu escuro por cima para dar contraste. * Isso obriga a escolher entre ler o texto e ver a criança, e o véu tinha que * subir a 93% para o título passar — a foto virava um retângulo preto. Com a * foto inteira e o texto no navy, a legibilidade não depende de quão clara é * a imagem, que é justamente o que ninguém controla num acervo de escola. */ .palas-navcard { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 6px; background: var(--wp--preset--color--navy); text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease; } .palas-navcard img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1); } .palas-navcard:hover { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--lift); } .palas-navcard:hover img { transform: scale(1.04); } .palas-navcard__body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.15rem 1.35rem; color: #fff; } .palas-navcard__range { font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--sun); margin: 0; } .palas-navcard__title { font-size: var(--wp--preset--font-size--title-sm); color: #fff; margin: 0.35rem 0 0; } .palas-navcard__hint { font-size: var(--wp--preset--font-size--small); line-height: 1.5; color: rgb(255 255 255 / 0.78); margin: 0.6rem 0 0; } /* Sem foto: o card fica tipográfico sobre branco, com filete no topo. */ .palas-navcard--flat { background: #fff; border: 1px solid var(--palas-rule-soft); border-top: 3px solid var(--wp--preset--color--cyan); border-radius: 0; } .palas-navcard--flat .palas-navcard__body { color: var(--wp--preset--color--ink); padding: 1.5rem; } .palas-navcard--flat .palas-navcard__title { color: var(--wp--preset--color--navy); } .palas-navcard--flat .palas-navcard__hint { color: var(--wp--preset--color--ink-soft); } .palas-navcard--flat .palas-navcard__range { color: var(--palas-accent-ink); } /* ------------------------------------------------------------------ * * 11. Figura e composição imagem + texto * ------------------------------------------------------------------ */ .palas-figure { margin: 0; } .palas-figure img { width: 100%; height: auto; display: block; border-radius: 4px; } .palas-figure figcaption { margin-top: 0.85rem; font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--ink-soft); } .palas-split { display: grid; gap: var(--wp--preset--spacing--wide); align-items: center; } @media (min-width: 900px) { .palas-split { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--section); } .palas-split--wide-media { grid-template-columns: 1fr 1.25fr; } .palas-split--reverse > *:first-child { order: 2; } } .palas-split img { width: 100%; height: 100%; max-height: 34rem; object-fit: cover; border-radius: 4px; } /* Faixa fotográfica ----------------------------------------------------- * * O respiro no meio de uma página longa. A medição mostrava 350 a 660 * palavras seguidas sem nenhuma imagem nas páginas de conteúdo: uma foto no * topo e nada até o rodapé. Isso lê como documento, não como site de escola. * * A faixa sangra a largura toda de propósito: é o único elemento da página * que não respeita a coluna, e é isso que marca a pausa. */ .palas-band { margin: 0; width: 100%; } .palas-band img { display: block; width: 100%; aspect-ratio: 12 / 5; object-fit: cover; } /* As duas fotos 1920x600 do acervo são panorâmicas de origem: cortá-las em 12:5 jogaria fora as laterais. */ .palas-band--wide img { aspect-ratio: 16 / 5; } .palas-band figcaption { max-width: 76rem; margin-inline: auto; padding: 0.9rem 1.5rem 0; font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--ink-soft); } @media (min-width: 768px) { .palas-band figcaption { padding-inline: 2.5rem; } } @media (max-width: 700px) { .palas-band img, .palas-band--wide img { aspect-ratio: 5 / 3; } } /* Contato e ficha institucional ----------------------------------------- * * A assessoria de imprensa não é página de marketing: quem chega ali quer um * endereço de e-mail e um dado para conferir. Dois blocos, sem enfeite. */ .palas-contato { display: grid; gap: var(--wp--preset--spacing--wide); } @media (min-width: 720px) { .palas-contato { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--section); } } .palas-contato__rotulo { margin: 0 0 0.6rem; font-size: var(--wp--preset--font-size--micro); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft); } .palas-contato__valor { display: block; width: fit-content; padding-block: 0.2rem; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--title-sm); font-weight: 600; letter-spacing: -0.015em; color: var(--wp--preset--color--navy); text-decoration: none; } a.palas-contato__valor:hover { text-decoration: underline; text-underline-offset: 4px; } .palas-contato__valor--quebra { font-size: var(--wp--preset--font-size--medium); font-weight: 500; line-height: 1.55; max-width: 22rem; } /* Ficha: rótulo à esquerda, valor à direita, um fio entre as linhas. Não é tabela de dados comparáveis, é uma lista de definição — e é
no HTML. */ .palas-ficha { margin: 0; border-top: 1px solid var(--palas-rule); max-width: 52rem; } .palas-ficha__item { display: grid; gap: 0.3rem 2rem; padding-block: 1.05rem; border-bottom: 1px solid var(--palas-rule); } @media (min-width: 640px) { .palas-ficha__item { grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; } } .palas-ficha dt { margin: 0; font-size: var(--wp--preset--font-size--micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft); } .palas-ficha dd { margin: 0; font-size: var(--wp--preset--font-size--medium); line-height: 1.55; color: var(--wp--preset--color--ink); } /* ------------------------------------------------------------------ * * 12. Citação de prova * ------------------------------------------------------------------ */ .palas-quote { font-family: var(--wp--preset--font-family--display); font-size: clamp(1.5rem, 3.2vw, 2.25rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.022em; max-width: 24ch; } /* Aspas de abertura como marca gráfica, já que não há mais itálico */ .palas-quote::before { content: '“'; display: block; font-size: 2.4em; line-height: 0.6; color: var(--wp--preset--color--sun); margin-bottom: 0.15em; } .palas-section--navy .palas-quote { color: #fff; } .palas-quote__by { display: flex; align-items: center; gap: 0.85rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--palas-rule); } .palas-section--navy .palas-quote__by { border-color: rgb(255 255 255 / 0.2); } .palas-quote__name { margin: 0; font-weight: 600; font-size: var(--wp--preset--font-size--small); } .palas-quote__role { margin: 0.1rem 0 0; font-size: var(--wp--preset--font-size--micro); color: var(--wp--preset--color--ink-soft); } .palas-section--navy .palas-quote__role { color: rgb(255 255 255 / 0.65); } /* ------------------------------------------------------------------ * * 13. Números * ------------------------------------------------------------------ */ .palas-stats { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } .palas-stat__value { font-family: var(--wp--preset--font-family--display); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(2.2rem, 3.6vw, 3rem); overflow-wrap: normal; hyphens: none; font-weight: 500; line-height: 1; color: #fff; } .palas-stat__unit { display: block; margin-top: 0.35rem; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--sun); } .palas-stat__label { margin: 0.75rem 0 0; font-size: var(--wp--preset--font-size--micro); line-height: 1.5; color: rgb(255 255 255 / 0.7); max-width: 24ch; } /* ------------------------------------------------------------------ * * 14. FAQ * ------------------------------------------------------------------ */ .palas-faq { border-top: 1px solid var(--palas-rule); } .wp-block-details { background: transparent; border: 0; border-bottom: 1px solid var(--palas-rule); border-radius: 0; box-shadow: none; padding: 0; margin: 0; } .wp-block-details summary { font-family: var(--wp--preset--font-family--display); font-weight: 600; letter-spacing: -0.015em; font-size: var(--wp--preset--font-size--title-sm); line-height: 1.35; color: var(--wp--preset--color--ink); cursor: pointer; list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding-block: 1.5rem; min-height: 44px; } .wp-block-details summary::-webkit-details-marker { display: none; } .wp-block-details summary::after { content: ''; flex: none; align-self: center; width: 0.65rem; height: 0.65rem; border-right: 2px solid var(--palas-accent-ink); border-bottom: 2px solid var(--palas-accent-ink); transform: rotate(45deg) translateY(-20%); transition: transform 0.2s ease; } .wp-block-details[open] summary::after { transform: rotate(-135deg) translateY(-20%); } .wp-block-details > *:not(summary) { margin: 0 0 1.5rem; max-width: 46rem; color: var(--wp--preset--color--ink-soft); line-height: 1.7; } /* ------------------------------------------------------------------ * * 15. Cabeçalho * * Correção de hierarquia de marca: a logo da escola manda, o selo da * UNESCO é um selo. Antes eram 50px de Palas contra 329px de UNESCO. * ------------------------------------------------------------------ */ .palas-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--wp--preset--color--paper) 90%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--palas-rule-soft); } .palas-header__inner { max-width: 76rem; margin-inline: auto; padding: 0.9rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } @media (min-width: 768px) { .palas-header__inner { padding-inline: 2.5rem; } } .palas-brand { display: inline-flex; align-items: center; text-decoration: none; } .palas-brand img { height: 3.25rem; width: auto; display: block; } /* No celular, a marca encolhe. */ @media (max-width: 480px) { .palas-header .palas-brand img { height: 1.9rem; } } /* ------------------------------------------------------------------ * * 16. Navegação * ------------------------------------------------------------------ */ .palas-nav__list { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; } .palas-nav__item { position: relative; } .palas-nav__link { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; font-weight: 500; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink); text-decoration: none; transition: color 0.18s ease; } .palas-nav__link:hover, .palas-nav__link.is-current { color: var(--palas-accent-ink); } .palas-nav__item:hover .palas-nav__link svg { transform: rotate(180deg); } .palas-nav__link svg { transition: transform 0.18s ease; opacity: 0.5; } /* O painel era centralizado no item; nos últimos itens do menu ele vazava para fora da viewport e criava rolagem horizontal. Ancorado à esquerda por padrão, e à direita nos dois últimos. */ .palas-nav__panel { position: absolute; left: 0; top: 100%; min-width: 22rem; max-width: min(24rem, calc(100vw - 3rem)); padding: 0.6rem; background: #fff; border: 1px solid var(--palas-rule-soft); border-radius: 6px; box-shadow: 0 18px 48px -24px rgb(31 48 128 / 0.34); opacity: 0; visibility: hidden; transform: translateY(0.4rem); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 50; } .palas-nav__item:hover > .palas-nav__panel, .palas-nav__item:focus-within > .palas-nav__panel { opacity: 1; visibility: visible; transform: none; } .palas-nav__item:nth-last-child(-n+3) > .palas-nav__panel { left: auto; right: 0; } @media (max-width: 1023px) { .palas-nav__item:nth-last-child(-n+3) > .palas-nav__panel { right: auto; left: 0; } } .palas-nav__panel::before { content: ''; position: absolute; inset-inline: 0; bottom: 100%; height: 0.75rem; } .palas-nav__panel ul { list-style: none; margin: 0; padding: 0; display: grid; } .palas-nav__panel a { display: block; padding: 0.7rem 0.85rem; border-radius: 4px; text-decoration: none; transition: background-color 0.15s ease; } .palas-nav__panel a:hover { background: var(--wp--preset--color--paper); } .palas-nav__panel-title { display: flex; align-items: baseline; gap: 0.55rem; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.012em; color: var(--wp--preset--color--ink); } .palas-nav__range { font-family: var(--wp--preset--font-family--body); font-style: normal; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--palas-accent-ink); } .palas-nav__panel-hint { display: block; margin-top: 0.2rem; font-size: var(--wp--preset--font-size--micro); line-height: 1.45; color: var(--wp--preset--color--ink-soft); } .palas-nav__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 0.6rem; border: 0; background: transparent; cursor: pointer; } .palas-nav__burger span { display: block; height: 1.5px; background: var(--wp--preset--color--navy); transition: transform 0.2s ease, opacity 0.2s ease; } @media (max-width: 1023px) { .palas-nav__burger { display: flex; } .palas-nav__list { position: fixed; inset: 4.9rem 0 auto; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100dvh - 4.9rem); overflow-y: auto; padding: 1rem 1.5rem 2.5rem; background: var(--wp--preset--color--paper); border-bottom: 1px solid var(--palas-rule); display: none; } .palas-nav[data-open='true'] .palas-nav__list { display: flex; } .palas-nav__burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .palas-nav__burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .palas-nav__burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .palas-nav__link { font-size: 1.15rem; padding-block: 0.6rem; } .palas-nav__panel { position: static; translate: none; opacity: 1; visibility: visible; transform: none; min-width: 0; box-shadow: none; border: 0; background: transparent; padding: 0 0 0.75rem 0.25rem; } } /* ------------------------------------------------------------------ * * 17. Rodapé * * Era uma coluna só de 1581px de altura: `repeat(auto-fit, minmax(0, 1fr))` * não consegue calcular quantas faixas cabem quando o mínimo é zero, então * o grid colapsava e marca, quatro menus e contato empilhavam um sob o outro, * deixando 800px de navy vazio à direita. Colunas agora são explícitas. * ------------------------------------------------------------------ */ .palas-footer { background: var(--wp--preset--color--navy-deep); color: rgb(255 255 255 / 0.88); } .palas-footer a { color: rgb(255 255 255 / 0.88); text-decoration: none; } .palas-footer a:hover { color: var(--wp--preset--color--sun); text-decoration: underline; text-underline-offset: 3px; } .palas-footer :is(h2, h3) { color: #fff; } .palas-footer__inner { max-width: 76rem; margin-inline: auto; padding: var(--wp--preset--spacing--section) 1.5rem 2rem; } @media (min-width: 768px) { .palas-footer__inner { padding-inline: 2.5rem; } } .palas-footer__top { display: grid; gap: 2.5rem; } /* Empilhado numa coluna só, o rodapé passava de 1500px no celular. Dois menus lado a lado cortam isso pela metade. */ @media (min-width: 360px) { .palas-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; } .palas-footer__brand { grid-column: 1 / -1; } } @media (min-width: 900px) { .palas-footer__top { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1140px) { /* Marca à esquerda e os quatro menus em faixas iguais. */ .palas-footer__top { grid-template-columns: 1.45fr repeat(4, minmax(0, 1fr)); gap: 3rem 2.25rem; } .palas-footer__brand { grid-column: auto; } } /* Marca ---------------------------------------------------------------- */ .palas-footer__brand img { height: 2.9rem; width: auto; display: block; } .palas-footer__about { margin: 1.25rem 0 0; max-width: 32ch; font-size: var(--wp--preset--font-size--small); line-height: 1.6; color: rgb(255 255 255 / 0.7); } .palas-footer__seal span { font-size: var(--wp--preset--font-size--micro); line-height: 1.4; color: rgb(255 255 255 / 0.62); } /* Menus ---------------------------------------------------------------- */ .palas-footer nav h3 { font-family: var(--wp--preset--font-family--body); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; color: rgb(255 255 255 / 0.5); margin: 0; } .palas-footer nav ul { list-style: none; margin: 0.85rem 0 0; padding: 0; display: grid; gap: 0; } .palas-footer nav a { display: block; padding-block: 0.42rem; /* área de toque sem esticar o ritmo */ font-size: var(--wp--preset--font-size--small); line-height: 1.35; } /* Contato --------------------------------------------------------------- */ .palas-footer__contact { margin-top: var(--wp--preset--spacing--wide); padding-top: 1.75rem; border-top: 1px solid rgb(255 255 255 / 0.16); display: grid; gap: 1.75rem; } @media (min-width: 860px) { .palas-footer__contact { grid-template-columns: 1fr auto; align-items: center; } } .palas-footer__contact-grid { display: grid; gap: 1.25rem; } /* Selo, endereço e contato na mesma linha. O selo é mais largo que um rótulo de texto, então ele tem coluna própria em vez de dividir a terça parte. */ @media (min-width: 720px) { .palas-footer__contact-grid { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; } } .palas-footer__label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.13em; color: rgb(255 255 255 / 0.5); } .palas-footer__value { display: block; margin-top: 0.35rem; font-size: var(--wp--preset--font-size--small); line-height: 1.5; color: rgb(255 255 255 / 0.9); } a.palas-footer__value { padding-block: 0.15rem; } .palas-footer__social { display: flex; align-items: center; gap: 0.6rem; } .palas-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 4px; background: rgb(255 255 255 / 0.07); transition: background-color 0.18s ease; } .palas-footer__social a:hover { background: rgb(255 255 255 / 0.16); } /* Rodapé legal ---------------------------------------------------------- */ .palas-footer__legal { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.16); display: flex; flex-direction: column; gap: 0.4rem; font-size: var(--wp--preset--font-size--micro); color: rgb(255 255 255 / 0.72); } @media (min-width: 640px) { .palas-footer__legal { flex-direction: row; align-items: center; justify-content: space-between; } } /* ------------------------------------------------------------------ * * 18. Chat * ------------------------------------------------------------------ */ .palas-chat { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; } .palas-chat__panel { width: min(90vw, 21rem); background: #fff; border-radius: 8px; box-shadow: 0 24px 60px -24px rgb(2 15 71 / 0.42); overflow: hidden; transform-origin: bottom right; transform: scale(0.96) translateY(0.5rem); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .palas-chat[data-open='true'] .palas-chat__panel { transform: none; opacity: 1; pointer-events: auto; } .palas-chat__toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border: 0; border-radius: 8px; background: var(--wp--preset--color--navy); color: #fff; box-shadow: 0 12px 32px -12px rgb(2 15 71 / 0.5); cursor: pointer; transition: transform 0.18s ease; } .palas-chat__toggle:hover { transform: translateY(-2px); } .palas-chat__dot { position: absolute; top: -0.2rem; right: -0.2rem; width: 0.85rem; height: 0.85rem; border-radius: 999px; background: var(--wp--preset--color--sun); } .palas-chat[data-open='true'] .palas-chat__dot { display: none; } /* ------------------------------------------------------------------ * * 19. Movimento * * A revelação ao rolar cobria 8 blocos por página e não comunicava nada. * Ficou só onde há entrada real de composição, com deslocamento curto. * ------------------------------------------------------------------ */ html.js .palas-reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; } html.js .palas-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .palas-reveal { opacity: 1; transform: none; transition: none; } } .editor-styles-wrapper .palas-reveal { opacity: 1; transform: none; } /* ------------------------------------------------------------------ * * 20. Utilidades de grade herdadas (compatibilidade com conteúdo antigo) * ------------------------------------------------------------------ */ .palas-cols { display: grid; gap: 1.5rem; } @media (min-width: 640px) { .palas-cols--2, .palas-cols--3, .palas-cols--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .palas-cols--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .palas-cols--4 { grid-template-columns: repeat(4, 1fr); } } /* Composição em colunas (imagem + texto) --------------------------------- */ .palas-split-cols { align-items: center; } .palas-split-cols .palas-figure img { max-height: 34rem; object-fit: cover; } @media (max-width: 781px) { .palas-split-cols { gap: 2rem; } /* No mobile a imagem vem antes do texto: ela é o gancho. */ .palas-split-cols > .wp-block-column:last-child { order: -1; } } /* Rodapé: marca ------------------------------------------------------- */ .palas-footer__brand img { height: 3.25rem; width: auto; display: block; } .palas-footer__about { margin: 1.5rem 0 0; max-width: 34ch; font-size: var(--wp--preset--font-size--small); line-height: 1.65; color: rgb(255 255 255 / 0.72); } .palas-footer__seal { display: flex; align-items: center; gap: 0.85rem; max-width: 20rem; } /* Placa branca: o tratamento indicado quando não se tem reversa aprovada. Sobre navy o azul da UNESCO afunda, e derivar uma reversa branca por conta própria é alterar a marca de um terceiro. A placa fecha em 72px — 60 de arte mais 6 de respiro em cima e embaixo — e o logo do rodapé sobe para a mesma altura, porque a marca da escola não pode sair menor que a do parceiro. */ .palas-unesco-placa { display: inline-block; flex: 0 0 auto; padding: 0.375rem; border-radius: 3px; background: #fff; } .palas-unesco-placa img { height: 3.75rem; width: auto; display: block; } .palas-footer__seal span { font-size: var(--wp--preset--font-size--micro); line-height: 1.45; color: rgb(255 255 255 / 0.68); } /* Marca: brasão + nome ------------------------------------------------- */ .palas-brand { gap: 0.75rem; align-items: center; } .palas-brand img { height: 3.4rem; width: auto; } .palas-brand__word { display: flex; flex-direction: column; line-height: 1.15; } .palas-brand__word strong { font-family: var(--wp--preset--font-family--display); font-size: 1.18rem; font-weight: 700; letter-spacing: -0.025em; color: var(--wp--preset--color--navy); white-space: nowrap; } .palas-brand__word em { font-family: var(--wp--preset--font-family--body); font-style: normal; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--wp--preset--color--ink-soft); margin-top: 0.2rem; } @media (max-width: 420px) { .palas-header .palas-brand__word em { display: none; } } .palas-brand--footer { display: flex; } .palas-brand--footer img { height: 4.5rem; } .palas-brand--footer .palas-brand__word strong { color: #fff; } .palas-brand--footer .palas-brand__word em { color: rgb(255 255 255 / 0.6); } /* Correções finais ------------------------------------------------------ */ /*