/* ==========================================================================
Colégio Irene Borges - base.css
Tokens, reset, tipografia e utilitários
========================================================================== */
:root {
/* Paleta da identidade, extraída do logo vetorial da escola.
Estes cinco hex são os oficiais: qualquer ajuste de cor começa aqui. */
--verde: #09A655;
--azul: #2480C3;
--vermelho: #EE2B49;
--amarelo: #F9AF18;
--roxo: #66459C;
/* Variações de apoio (usadas onde a cor pura reprova em contraste).
Todas passam de 5.5:1 contra branco, então servem tanto para texto
em fundo claro quanto para fundo com texto branco. */
--verde-esc: #06783D;
--verde-prof: #063D20;
--verde-claro: #EAF5F0;
--azul-esc: #1A5C8C;
--vermelho-esc: #BB0F2A;
--amarelo-esc: #8D6004;
--roxo-esc: #493270;
/* Mesmas cores em canais separados, para uso dentro de rgba().
Existem para que nenhum arquivo precise repetir um hex da paleta:
trocar a cor lá em cima passa a valer no site inteiro. */
--verde-rgb: 9, 166, 85;
--azul-rgb: 36, 128, 195;
--vermelho-rgb: 238, 43, 73;
--amarelo-rgb: 249, 175, 24;
--roxo-rgb: 102, 69, 156;
--verde-esc-rgb: 6, 120, 61;
--azul-esc-rgb: 26, 92, 140;
--vermelho-esc-rgb: 187, 15, 42;
--amarelo-esc-rgb: 141, 96, 4;
--roxo-esc-rgb: 73, 50, 112;
--verde-prof-rgb: 6, 61, 32;
--verde-claro-rgb: 234, 245, 240;
/* Neutros */
--tinta: #12231D;
--tinta-2: #4C6058;
--papel: #FFFFFF;
--papel-2: #F3F7F4;
--linha: #E1E9E4;
/* Layout */
--site-max-width: 1500px;
--gutter: clamp(20px, 5vw, 48px);
--header-h: 76px;
/* Raios e sombras */
--r-sm: 8px;
--r-md: 16px;
--r-lg: 26px;
--r-full: 999px;
--sombra: 0 20px 44px -26px rgba(18, 35, 29, .38);
/* Usada só no estado levantado dos cards */
--sombra-alta: 0 26px 54px -24px rgba(18, 35, 29, .46);
--sombra-sm: 0 6px 18px -12px rgba(18, 35, 29, .35);
/* Tipografia */
--f-display: "Montserrat", system-ui, sans-serif;
--f-texto: "Instrument Sans", system-ui, sans-serif;
--t-h1: clamp(2.35rem, 5.2vw, 4rem);
--t-h2: clamp(1.85rem, 3.4vw, 2.7rem);
--t-h3: clamp(1.1rem, 1.7vw, 1.35rem);
--t-corpo: 1.05rem;
--t-peq: .93rem;
--t-eyebrow: .78rem;
/* Transições */
--tr: 220ms cubic-bezier(.22, .61, .36, 1);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--papel);
color: var(--tinta);
font-family: var(--f-texto);
font-size: var(--t-corpo);
line-height: 1.62;
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4 {
font-family: var(--f-display);
line-height: 1.06;
letter-spacing: -.02em;
margin: 0 0 .5em;
font-weight: 700;
}
h1 {
font-size: var(--t-h1);
font-weight: 800;
}
h2 {
font-size: var(--t-h2);
}
h3 {
font-size: var(--t-h3);
letter-spacing: -.01em;
}
p {
margin: 0 0 1em;
}
p:last-child {
margin-bottom: 0;
}
a {
color: inherit;
text-decoration: none;
}
img,
svg {
max-width: 100%;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
button {
font: inherit;
color: inherit;
}
:focus-visible {
outline: 3px solid var(--azul);
outline-offset: 3px;
border-radius: 4px;
}
/* --------------------------------------------------------------------------
Esconder de verdade
O navegador aplica display:none ao atributo hidden pela folha padrão, que
perde para qualquer display declarado no projeto. Sem esta regra, esconder
um .post (flex) ou uma seção (grid) com hidden simplesmente não funciona.
-------------------------------------------------------------------------- */
[hidden] {
display: none !important;
}
/* --------------------------------------------------------------------------
Estrutura
-------------------------------------------------------------------------- */
.wrap {
width: 100%;
max-width: var(--site-max-width);
margin-inline: auto;
padding-inline: var(--gutter);
}
.secao {
padding-block: clamp(64px, 8vw, 112px);
scroll-margin-top: calc(var(--header-h) + 16px);
}
.secao--papel2 {
background: var(--papel-2);
}
/* Faixa escura em verde, a cor principal do colégio */
.secao--verde {
background: var(--verde-prof);
color: #fff;
}
.secao--verde h2 {
color: #fff;
}
.secao--verde .eyebrow {
color: var(--amarelo);
}
.secao--verde .texto-2 {
color: #fff;
}
.pular-para {
position: absolute;
left: -9999px;
top: 0;
background: var(--tinta);
color: #fff;
padding: 12px 18px;
border-radius: 0 0 var(--r-sm) 0;
z-index: 200;
}
.pular-para:focus {
left: 0;
}
/* --------------------------------------------------------------------------
Tipografia de apoio
-------------------------------------------------------------------------- */
.eyebrow {
display: inline-block;
font-size: var(--t-eyebrow);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--verde-esc);
margin: 0 0 18px;
}
.eyebrow--azul {
color: var(--azul-esc);
}
.eyebrow--roxo {
color: var(--roxo-esc);
}
.eyebrow--vermelho {
color: var(--vermelho-esc);
}
.lead {
font-size: clamp(1.08rem, 1.6vw, 1.28rem);
color: var(--tinta-2);
max-width: 58ch;
}
.texto-2 {
color: var(--tinta-2);
}
/* --------------------------------------------------------------------------
Fotos e placeholders
Para trocar: descomente a tag ![]()
, apague o