/* ========================================================================= SurfApp - Portal do aluno ------------------------------------------------------------------------- CSS escrito a mao, sem framework e sem build: o projeto nao depende de Node. Mobile first. Toda regra de layout maior comeca em min-width, de modo que a base ja e a versao de celular e o desktop apenas acrescenta colunas. ========================================================================= */ :root { /* --brand-primary e --brand-secondary chegam do , injetadas por App\Support\Brand::cssVariables(). Os valores abaixo sao apenas a reserva da plataforma para quando a escola nao personalizou a marca. OS NOMES SAO HISTORICOS, e ler `--navy` como "azul-marinho" ja custou defeito neste arquivo. A traducao e esta, e vale para o arquivo inteiro: --navy, --navy-700, --navy-500 ....... a cor PRINCIPAL da escola --turquoise, --turquoise-600/050 ..... a cor SECUNDARIA da escola QUAL PAPEL CABE A CADA UMA (a regra que este arquivo passou a seguir): principal ... identidade. O cabecalho e os titulos. Uma faixa fina no topo e a cor do texto dos titulos — nada de area grande no meio da pagina. secundaria .. acao e apoio. Botao, link, selo, chip de horario, item de menu sob o cursor. O que mudou e por que: o painel do portal abria com o cabecalho E o cartao de boas-vindas pintados da MESMA cor principal, colados um no outro — ~260px de cor chapada antes de qualquer conteudo. E o que parecia ser a secundaria no corpo da pagina (link, chip, selo) era um turquesa fixo que escola nenhuma escolheu. Ver `.hero` e os dois tokens da secundaria adiante. */ --navy: var(--brand-primary, #0A2638); /* Os dois tons abaixo eram valores FIXOS, e isso quebrava o unico lugar que usa cada um. O `.hero` era um degrade de `--navy` ate `--navy-500`: com a cor principal vinda da escola e a segunda ponta fixa, nenhuma cor de texto servia para o cartao inteiro — marca clara dava 12,7 de contraste no comeco e 1,5 no fim. (Aquele degrade nao existe mais; ver `.hero`.) O segundo tom e calculado no servidor (`ReadableColor::shade()`) porque a DIRECAO depende da cor: sobre marca escura o degrade escurece, sobre marca clara ele clareia. Um `color-mix` fixo aqui no CSS nao da conta — foi a primeira tentativa, e ela derrubava `#1a828e` de 10,5 para 3,4. Os valores literais ficam como reserva para quando nao ha escola no contexto, e sao exatamente os tons que o portal sempre desenhou. */ --navy-700: var(--brand-primary-shade, #0F3549); --navy-500: var(--brand-primary-shade, #17435C); /* A SECUNDARIA NOS TRES PAPEIS QUE ELA PRECISA TER. `--turquoise-600` e `--turquoise-050` eram literais — `#1a828e` e `#e4f1f0` —, e por isso o link do portal, o chip de horario e o selo "Confirmada" saiam turquesa em TODA escola, inclusive nas que escolheram vermelho ou ambar. Era o motivo real de "a secundaria a gente quase nao usa": ela estava na tela, mas era a da plataforma. Alem de errado como marca, era ilegivel: `#1a828e` mede 3,95:1 sobre `--bg` e 3,92:1 dentro do chip — abaixo dos 4,5 da WCAG, em todas as escolas ao mesmo tempo. `--brand-secondary-ink` e calculado (`ReadableColor::ink()` contra o mais escuro dos dois fundos) e o pior caso das 216 cores varridas passou a ser 4,51:1. `--brand-secondary-surface` e a secundaria com 12% de tinta sobre branco. Texto escuro por cima mede no minimo 11,81:1 na mesma varredura. */ --turquoise: var(--brand-secondary, #4AA5A6); --turquoise-600: var(--brand-secondary-ink, #1a828e); --turquoise-050: var(--brand-secondary-surface, #e4f1f0); --accent: #c08a3e; --accent-050: #f7eedf; --bg: #f2efe8; --surface: #ffffff; --line: #e6e1d7; --line-strong: #d5cfc3; --ink: #0a2638; --ink-soft: #4f6472; --ink-faint: #8a9aa4; --danger: #c0503f; --danger-050: #f7e3df; --success: #1f7a5c; --success-050: #dcefe7; --warning: #c08a3e; --warning-050: #f7eedf; /* Ambar escuro de TEXTO sobre `--warning-050` (4,90:1, passa em AA). O valor ja existia escrito a mao em `.alert--warning` e em `.card--warning .card__title`; virou token quando a faixa de "sistema em validacao" precisou dele pela terceira vez. */ --warning-700: #8a5f14; --info: #1a828e; --info-050: #e4f1f0; --radius: 14px; --radius-sm: 9px; --radius-pill: 999px; --shadow: 0 1px 2px rgba(10, 38, 56, .06), 0 6px 20px rgba(10, 38, 56, .07); --shadow-sm: 0 1px 2px rgba(10, 38, 56, .07); --shadow-lg: 0 10px 40px rgba(10, 38, 56, .14); --header-h: 60px; --maxw: 1120px; } /* ------------------------------------------------------------------------- Base ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.55; /* Nenhum filho pode empurrar a pagina para os lados no celular. */ overflow-x: hidden; } img, svg, canvas { max-width: 100%; height: auto; } a { color: var(--turquoise-600); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0 0 .4rem; color: var(--brand-ink, var(--navy)); line-height: 1.25; font-weight: 650; } h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.03rem; } h4 { font-size: .95rem; } p { margin: 0 0 .75rem; } hr { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; } .muted { color: var(--ink-soft); } .faint { color: var(--ink-faint); } .small { font-size: .84rem; } .tiny { font-size: .76rem; } .strong { font-weight: 650; } .nowrap { white-space: nowrap; } .center { text-align: center; } .right { text-align: right; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } /* Visivel para leitor de tela, invisivel na tela. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- Estrutura ------------------------------------------------------------------------- */ .portal-shell { display: flex; flex-direction: column; min-height: 100vh; } .portal-main { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; /* A folga que antes liberava a barra inferior agora fica no rodape, que e o ultimo elemento da pagina. Sem isso o portal ganharia espaco vazio duas vezes no celular. */ padding: 1rem 1rem 1.5rem; } @media (min-width: 900px) { .portal-main { padding: 1.75rem 1.5rem 2rem; } } /* ------------------------------------------------------------------------- Cabecalho ------------------------------------------------------------------------- */ /* `--navy` e a cor PRINCIPAL da escola (ver o topo do arquivo), entao toda regra que a usa como fundo tem de tirar a cor do texto de `--brand-on-primary` — calculada por luminancia — em vez de fixar branco. Escola com primaria clara ficava com o cabecalho inteiro ilegivel. */ /* O CABECALHO E AGORA A UNICA SUPERFICIE GRANDE COM A COR DA ESCOLA — o cartao de boas-vindas deixou de ser a segunda (ver `.hero`). Isso torna a borda de baixo obrigatoria, e nao decorativa: com primaria clara (a escola real tem `#e0e0d2`) a faixa e o fundo bege da pagina ficam a uma distancia de contraste de 1,1 e o cabecalho perde a forma — vira um borrao no topo. O fio de baixo sai de `currentColor`, que aqui e `--brand-on-primary`: a cor que o `ReadableColor` ja escolheu como a que se ve sobre esta faixa. Por isso ele funciona nas duas pontas da paleta, escurecendo sob marca clara e clareando sob marca escura, sem uma segunda variavel para injetar. A linha `rgba` antes do `color-mix` e a reserva para navegador sem suporte, e reproduz exatamente o que o portal desenhava antes. */ .portal-header { position: sticky; top: 0; z-index: 30; background: var(--navy); color: var(--brand-on-primary, #fff); box-shadow: 0 1px 0 rgba(255, 255, 255, .06), var(--shadow-sm); box-shadow: 0 1px 0 color-mix(in srgb, currentColor 16%, transparent), var(--shadow-sm); } .portal-header__inner { max-width: var(--maxw); margin: 0 auto; min-height: var(--header-h); padding: .5rem 1rem; display: flex; align-items: center; gap: 1rem; } .brand { display: flex; align-items: center; gap: .6rem; /* Herda do cabecalho: quem decide claro ou escuro e a marca da escola. */ color: inherit; font-weight: 700; letter-spacing: .01em; min-width: 0; } .brand:hover { text-decoration: none; } /* O monograma de texto que ficava aqui saiu de cena: o cabecalho agora exibe a logomarca da escola ou o simbolo do SurfApp (ver o bloco "Marca" no fim). */ .brand__text { display: flex; flex-direction: column; min-width: 0; } .brand__name { font-size: .98rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand__sub { font-size: .7rem; font-weight: 500; /* Mesma cor do cabecalho, so que apagada — funciona nas duas paletas. */ color: currentColor; opacity: .62; line-height: 1.2; } /* A barra `.portal-nav` fica entre a marca e este bloco, na mesma linha — ver o bloco "Do menu sanduiche para a barra" adiante. O `margin-left: auto` e o que joga a conta para a direita nas duas larguras: no celular ela sobra depois da marca, no desktop depois da barra. Havia aqui um `margin-left: .75rem` para 900px que ANULAVA o auto; fazia sentido enquanto a barra morava numa segunda linha, e com ela de volta a linha deixava a conta grudada no menu. */ .portal-account { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; } .avatar { width: 34px; height: 34px; border-radius: 50%; /* O veu translucido segue a cor do texto do cabecalho, e nao branco fixo: sobre cabecalho claro um veu branco sumia junto com as iniciais. */ background: rgba(255, 255, 255, .14); background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; display: grid; place-items: center; font-size: .8rem; font-weight: 700; flex: 0 0 auto; } .avatar:hover { text-decoration: none; } .logout-btn { background: transparent; border: 1px solid rgba(255, 255, 255, .22); border-color: color-mix(in srgb, currentColor 22%, transparent); color: currentColor; opacity: .85; border-radius: var(--radius-pill); padding: .34rem .7rem; font-size: .8rem; font-family: inherit; cursor: pointer; } .logout-btn:hover { background: rgba(255, 255, 255, .1); background: color-mix(in srgb, currentColor 10%, transparent); opacity: 1; } /* ------------------------------------------------------------------------- Menu sanduiche ------------------------------------------------------------------------- O QUE ELE SUBSTITUIU: uma `tabbar` fixa no rodape, com cinco colunas de largura igual, imitando a barra de um aplicativo instalado. O portal e um site no navegador: aquela barra disputava espaco com a barra do Chrome no celular, colidia com o gesto de voltar do sistema e prometia uma navegacao que o resto da tela nao cumpria. E, com as secoes dependendo do vinculo da pessoa, uma grade de cinco colunas fixas deixou de comportar a lista. SEM JAVASCRIPT: e um

. Abre, fecha, recebe foco e responde a Enter e Espaco sem uma linha de script — o portal nao tem build, nao carrega CDN e a CSP nao deixaria passar script externo. O `name` compartilhado com `.school-switch` faz os dois menus do cabecalho serem um acordeao exclusivo, resolvido pelo navegador. Ver o partial. ------------------------------------------------------------------------- */ .portal-menu { flex: 0 0 auto; } .portal-menu__toggle { display: flex; align-items: center; gap: .45rem; /* Alvo de toque de 40px de altura: a recomendacao e 44, e o cabecalho tem 60 — os 10px de folga em volta completam a area clicavel sem esticar a barra. */ min-height: 40px; padding: .34rem .7rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius-pill); color: rgba(255, 255, 255, .9); font-size: .82rem; font-weight: 600; line-height: 1.2; cursor: pointer; list-style: none; user-select: none; } /* O triangulo padrao do

sai de cena nos dois motores. */ .portal-menu__toggle::-webkit-details-marker { display: none; } .portal-menu__toggle::marker { content: ''; } .portal-menu__toggle:hover { background: rgba(255, 255, 255, .1); color: #fff; } /* Foco VISIVEL, e nao o contorno padrao que some sobre o cabecalho escuro. Quem navega por teclado precisa enxergar onde esta antes de apertar Enter. */ .portal-menu__toggle:focus-visible, .school-switch__toggle:focus-visible, .portal-menu__item:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; } /* As tres barras, desenhadas em CSS: sem arquivo, sem icone de fonte externa (a CSP nao carregaria) e sem emoji, que muda de desenho a cada sistema. A do meio e o proprio elemento; as outras duas sao ::before e ::after. */ .portal-menu__bars, .portal-menu__bars::before, .portal-menu__bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; } .portal-menu__bars { position: relative; } .portal-menu__bars::before, .portal-menu__bars::after { content: ''; position: absolute; left: 0; } .portal-menu__bars::before { top: -6px; } .portal-menu__bars::after { top: 6px; } /* Aberto, as tres barras viram um X. E a unica pista de estado que o botao consegue dar sem script, e ela importa: o painel pode ficar fora do campo de visao em tela pequena. */ .portal-menu[open] .portal-menu__bars { background: transparent; } .portal-menu[open] .portal-menu__bars::before { top: 0; transform: rotate(45deg); } .portal-menu[open] .portal-menu__bars::after { top: 0; transform: rotate(-45deg); } /* A regra que mostrava a palavra "Menu" a partir de 560px saiu junto com o proprio rotulo: o botao e so o icone. As tres barras ja dizem o que ele faz, e a palavra disputava espaco com o nome da escola justamente na largura em que o botao existe. O `aria-label` do

cobre o leitor de tela. */ /* O PAINEL. No celular ele e uma folha que ocupa a largura inteira, ancorada no CABECALHO (que e `position: sticky`, e portanto o bloco de contencao do `absolute`). A partir de 900px vira um menu suspenso preso ao botao — por isso `.portal-menu` so ganha `position: relative` naquela largura. */ .portal-menu__panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h) - 1rem); overflow-y: auto; padding: .5rem; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); } .portal-menu__group { margin: .6rem .55rem .25rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); } .portal-menu__group:first-child { margin-top: .1rem; } .portal-menu__item { display: block; width: 100%; /* .7rem de altura de cada lado + a linha do texto passa dos 44px de alvo de toque, que e o que a barra inferior dava de graca e um menu de links precisa reconquistar. */ padding: .7rem .55rem; border-radius: var(--radius-sm); color: var(--ink); font-size: .95rem; font-weight: 550; text-align: left; } .portal-menu__item:hover { background: var(--turquoise-050); text-decoration: none; } /* O item ativo usava `--turquoise-600` sobre `--turquoise-050`: 3,92 de contraste, abaixo dos 4,5 da WCAG. A correcao foi escurecer o texto — a tinta do fundo ja identifica qual secao esta aberta, e a cor do texto nao precisa repetir o recado ao custo da leitura. ATUALIZACAO: as duas cores DEIXARAM de ser fixas da plataforma (o comentario antigo dizia que eram) e hoje saem da secundaria da escola. `--ink` sobre a superficie de apoio mede 11,81:1 no pior caso das 216 cores varridas, entao a escolha de escurecer o texto continua valendo — agora para qualquer paleta, e nao so para o turquesa que estava escrito aqui. */ .portal-menu__item.is-active { background: var(--turquoise-050); color: var(--ink); font-weight: 700; } /* "Sair" e um