/* Landing oficial da Horus School, modelo 2a (#4947). * * O modelo veio do Claude Design com TODO o estilo inline. Aqui ele vira classe, * que e a regra da casa (#4426): "funcao nova, botao novo, item novo nasce * separado". Uma landing de 123 KB com 53 blocos de estilo colados no HTML nao e * mantivel por ninguem depois do primeiro ajuste. * * POR QUE ESTA FOLHA NAO USA tokens.css: aquela e a paleta do PRODUTO (Carbono), * que responde ao tema claro/escuro que a escola escolhe. Esta pagina e a vitrine * PUBLICA, com paleta e tipografia proprias (creme + petroleo + Newsreader), e ela * se compromete com UM visual de proposito: quem chega no site nao configurou tema * nenhum. Misturar as duas faria a landing mudar de cara conforme o navegador do * visitante, que e o oposto do que uma vitrine precisa. */ /* ─────────────────────────────── a paleta ─────────────────────────────── */ :root { --l-creme: #FBF9F5; /* o fundo da pagina */ --l-creme-2: #EFEBE3; /* faixa alternada, para a pagina respirar */ --l-creme-3: #DFDACF; /* cabecalho de tabela na faixa alternada */ --l-petroleo: #12242E; /* as secoes escuras e o rodape */ --l-petroleo-2: #16303C; /* cartao dentro da secao escura */ --l-tinta: #171A18; /* o texto que manda */ --l-tinta-2: #404844; --l-tinta-3: #5A625E; /* ESTAS DUAS FORAM ESCURECIDAS depois de medir o contraste na pagina viva (27/08). Nos valores antigos (#6C7A73 e #A9B2AE) o texto miudo reprovava: 4,28 e 2,07 contra o minimo de 4,5 da norma. O pior era o rotulo da tabela dos nove sistemas, em 2,07: um texto que a pessoa de 50 anos simplesmente nao le, numa pagina que vende para diretoras de escola. Os valores novos passam nos TRES fundos da pagina (creme 5,73 e 5,08; creme alternado 5,07 e 4,50; frio 5,58 e 4,95), e o fundo alternado e o que manda, porque e o mais claro contra o texto. */ --l-tinta-4: #586660; --l-tinta-5: #646D68; --l-teal: #0E7C97; /* o acento em FUNDO e BORDA: botao, fio, moldura */ /* O MESMO ACENTO, ESCURECIDO PARA VIRAR LETRA. A casa ja aprendeu isso uma vez, em 13/08, e batizou de `--accent-ink`: cor da marca usada como TEXTO nao pode ser a mesma usada como fundo, porque ela foi escolhida para ter forca, nao para ser lida. Medido aqui: o teal de fundo da 4,06 sobre a faixa alternada, abaixo do minimo de 4,5, no chapeu de cada secao e no botao Expandir. Este tom passa nos tres fundos (5,56 / 4,92 / 5,41) e continua sendo teal. */ --l-teal-ink: #0C6E86; --l-teal-claro: #8FD9EA; /* o acento DENTRO do escuro */ --l-claro: #EAF4F6; /* texto sobre o petroleo */ --l-claro-2: #B6C9CF; --l-claro-3: #A9C3CC; --l-frio: #F2F7F8; /* a coluna "na Horus" da tabela dos nove */ --l-linha: rgba(23, 26, 24, .12); --l-linha-fraca: rgba(23, 26, 24, .08); --l-linha-clara: rgba(255, 255, 255, .14); --l-sombra: 0 24px 50px -24px rgba(18, 36, 46, .45); --l-sombra-2: 0 20px 44px -28px rgba(18, 36, 46, .35); --l-serif: Newsreader, Georgia, "Times New Roman", serif; --l-sans: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; --l-larg: 1280px; /* a caixa de leitura */ } /* ─────────────────────────────── a base ─────────────────────────────── */ .lp { margin: 0; background: var(--l-creme); font-family: var(--l-sans); color: var(--l-tinta); } .lp * { box-sizing: border-box; } .lp a { color: inherit; text-decoration: none; } .lp a:hover { color: var(--l-teal-ink); } .lp img { max-width: 100%; } .lp-caixa { max-width: var(--l-larg); margin: 0 auto; padding-left: 48px; padding-right: 48px; } /* Faixas: a pagina alterna creme, creme-2 e petroleo para dar ritmo de leitura */ .lp-faixa-2 { background: var(--l-creme-2); border-top: 1px solid rgba(23, 26, 24, .1); } .lp-escura { background: var(--l-petroleo); color: var(--l-claro); } .lp-escura .lp-chapeu { color: var(--l-teal-claro); } /* ───────────────────────────── tipografia ───────────────────────────── */ .lp-chapeu { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--l-teal-ink); font-weight: 700; margin: 0 0 24px; } .lp-h1 { font-family: var(--l-serif); font-weight: 400; font-size: 76px; line-height: 1.03; letter-spacing: -.02em; margin: 0 0 28px; text-wrap: pretty; } .lp-h1 em { font-style: italic; color: var(--l-teal-ink); } .lp-h2 { font-family: var(--l-serif); font-weight: 400; font-size: 46px; line-height: 1.1; margin: 0 0 20px; text-wrap: pretty; } .lp-h2-g { font-size: 52px; line-height: 1.06; } .lp-lead { font-size: 20px; line-height: 1.55; color: var(--l-tinta-2); margin: 0 0 18px; max-width: 540px; text-wrap: pretty; } .lp-lead-2 { font-size: 18px; line-height: 1.55; color: var(--l-tinta-4); margin: 0 0 36px; max-width: 540px; } .lp-p { font-size: 19px; line-height: 1.6; color: var(--l-tinta-2); margin: 0 0 16px; } .lp-p-esc { font-size: 20px; line-height: 1.6; color: var(--l-claro-2); margin: 0 0 14px; } .lp-nota { font-size: 14px; color: var(--l-tinta-4); margin-top: 22px; } .lp-aparte { font-size: 17px; color: var(--l-tinta-3); max-width: 460px; } /* ─────────────────────────────── botoes ─────────────────────────────── O SELETOR PRECISA DE `.lp` NA FRENTE, e isso nao e enfeite: `.lp a { color: inherit }` tem especificidade 0-1-1 e ganhava de `.lp-btn` (0-1-0), entao a cor do texto do botao NUNCA chegava. Resultado medido: letra cor de tinta (rgb 23,26,24) sobre fundo petroleo e sobre fundo teal, nos tres botoes que sao . O