/* ============================================================================= Site pessoal · Guilherme Moraes · marca v8 "Gesso e REC" Só o que é do site: início, /marca/ e 404. Tokens e componentes vêm de marca.css (que não se edita daqui). Regras deste arquivo: - cor só por var(--...), nunca hex solto; - movimento só em transform e opacity (cor e borda com ease), teto de 300ms; - transição sempre com a propriedade nomeada, nunca com a palavra-chave que pega tudo; - o conteúdo nasce visível: revelação só existe com html.anima (ligado no ); - o que não é clicável não reage ao mouse. ============================================================================= */ :root { /* Título de seção do início: 2rem no celular de 390px e 4.5rem (o teto do --t-1) no desktop. Abaixo de 390px ele encolhe junto com a tela, para MORAES continuar bem maior que ele. */ --t-secao: min(8.21vw, clamp(2rem, 1.07rem + 3.81vw, 4.5rem)); } figure { margin: 0; } main:focus { outline: none; } /* alvo do "Pular para o conteúdo": sem anel na página inteira */ .secao { padding-block: clamp(56px, 2rem + 4vw, 104px); } .topo-sentinela { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; } /* ------------------------------------------------------------------ topo */ .nav { display: flex; align-items: center; margin-left: auto; } .nav .menu { margin-left: 0; } .topo-cta { margin-left: var(--e-2); } .menu-botao { display: none; } .menu > .menu-central { margin-left: var(--e-2); } .menu-central .ic { width: 18px; height: 18px; } /* Menu recolhido: pílula clara com ícone e a palavra "Menu" (só o ícone abaixo de 390px). O "Falar comigo" sai do topo: no celular ele já está na capa e o Contato está na folha. */ @media (max-width: 49.9375em) { .topo-dentro { gap: var(--e-2); } .topo-cta { display: none; } html.js .menu-botao { display: inline-flex; gap: 8px; padding: 0 18px 0 14px; } .menu-botao .ic-fechar, .menu-botao[aria-expanded="true"] .ic-abrir { display: none; } .menu-botao[aria-expanded="true"] .ic-fechar { display: block; } .botao.menu-botao[aria-expanded="true"], .botao.menu-botao[aria-expanded="true"]:hover { background: var(--tinta); color: var(--gesso); border-color: var(--tinta); } .menu-botao[aria-expanded="true"]:focus-visible { outline-color: var(--tinta); } /* a folha: aparece embaixo do topo, sem animação pesada */ .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: var(--e-3) var(--margem) var(--e-5); background: var(--gesso); border-bottom: 1px solid var(--linha); box-shadow: var(--s-2); } .menu-botao[aria-expanded="true"] + .menu { display: flex; } .menu > a:not(.botao) { min-height: 52px; padding: 0 var(--e-4); font-size: var(--t-corpo); color: var(--tinta); } .menu > .menu-central { position: relative; margin: var(--e-3) 0 0; } .menu > .menu-central::before { content: ""; position: absolute; left: var(--e-4); right: var(--e-4); top: calc(-1 * var(--e-2) - 1px); height: 1px; background: var(--linha); } @media (prefers-reduced-motion: no-preference) { .menu { transition: opacity var(--base) var(--saida), transform var(--base) var(--saida); } @starting-style { .menu-botao[aria-expanded="true"] + .menu { opacity: 0; transform: translateY(-6px); } } } } @media (max-width: 24.3125em) { html.js .menu-botao { width: var(--alvo); padding: 0; } .menu-botao .menu-botao-texto { display: none; } /* o nome continua no aria-label */ } /* ------------------------------------------------------------------ capa */ .capa { padding-block: clamp(24px, .5rem + 3vw, 56px) clamp(56px, 2rem + 4vw, 112px); } .capa-dentro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "titulo titulo" "texto telas"; column-gap: clamp(24px, 4vw, 64px); row-gap: clamp(28px, 1rem + 2vw, 48px); align-items: start; } .capa-titulo { grid-area: titulo; font-size: inherit; line-height: 1; letter-spacing: 0; font-stretch: 100%; } .capa-pia { display: block; margin-bottom: .35em; font-size: var(--t-3); font-weight: 700; line-height: 1.2; letter-spacing: -0.005em; } /* MORAES domina. O tamanho é o token de display, mas nunca maior que a largura disponível (nome + barras medem 6,3 vezes o corpo da letra). */ .capa-linha { display: block; white-space: nowrap; font-size: min(var(--t-display), calc((min(100vw, var(--largura)) - 2 * var(--margem)) / 6.5)); line-height: .86; } .capa-nome { font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em; text-transform: uppercase; } .sigla-capa { height: .7em; gap: .05em; margin-left: .12em; vertical-align: baseline; } .sigla-capa i { width: .075em; border-radius: .02em; transform-origin: 50% 100%; } .capa-texto { grid-area: texto; } .capa-lead { font-size: var(--t-3); line-height: 1.45; color: var(--tinta-2); max-width: 31ch; } .capa-acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); } /* Duas telas reais (1200x800), em molduras de 24px, lado a lado e levemente sobrepostas. A caixa tem proporção fixa: o espaço existe antes de a imagem chegar. */ .capa-telas { grid-area: telas; position: relative; aspect-ratio: 100 / 52; } .tela { position: absolute; border-radius: var(--r-cartao); overflow: hidden; background: var(--poco); border: 1px solid var(--linha); } .tela img { width: 100%; height: auto; aspect-ratio: 3 / 2; position: relative; color: transparent; } .tela img::after { content: ""; position: absolute; inset: 0; background: var(--poco); } /* sem JS: só pinta se a imagem faltar */ .tela-licita { top: 0; left: 0; width: 64%; box-shadow: var(--s-2); } .tela-central { right: 0; bottom: 0; width: 52%; box-shadow: var(--s-3); } /* Se uma tela não carregar, a capa fica só com o texto: nada de moldura vazia (o JS marca .sem-telas). */ .capa.sem-telas .capa-telas { display: none; } .capa.sem-telas .capa-dentro { grid-template-areas: "titulo titulo" "texto texto"; } .capa.sem-telas .capa-lead { max-width: 40ch; } @media (max-width: 74.9375em) { .capa-dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 61.9375em) { .capa-dentro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "texto" "telas"; } .capa.sem-telas .capa-dentro { grid-template-areas: "titulo" "texto"; } .capa-lead { max-width: 36ch; } } @media (max-width: 37.4375em) { /* no celular as telas se empilham na diagonal para não ficarem miúdas */ .capa-telas { aspect-ratio: 100 / 86; } .tela-licita { width: 88%; } .tela-central { width: 70%; } .capa-acoes .botao { flex: 1 1 auto; } } /* -------------------------------------------------------------- trabalho */ .trabalho-titulo { font-size: var(--t-secao); max-width: 24ch; } .trabalho-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-5); margin-top: clamp(32px, 1rem + 3vw, 64px); } /* Os cartões não são links (os links ficam dentro deles), então não reagem ao mouse. */ .obra { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); padding: clamp(24px, 1rem + 1.6vw, 44px); background: var(--folha); border: 1px solid var(--linha); border-radius: var(--r-cartao); box-shadow: var(--s-1); } /* o carro-chefe ocupa a largura toda; as duas ferramentas próprias dividem a linha de baixo, em pesos diferentes */ .obra-dina { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "texto foco" "rodape foco"; gap: var(--e-4) var(--e-7); } .obra-dina-texto { grid-area: texto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); } .obra-dina-foco { grid-area: foco; align-self: end; display: grid; gap: var(--e-2); } .obra-dina .obra-rodape { grid-area: rodape; } .obra-licita { grid-column: 1 / span 7; } .obra-central { grid-column: 8 / span 5; background: var(--gesso); border-color: var(--contorno); box-shadow: none; } /* privada: só o contorno */ .obra-nome { font-size: var(--t-3); font-weight: 800; font-stretch: 112%; letter-spacing: -0.01em; } /* --t-2; abaixo de 390px encolhe na mesma proporção do título de seção, para nunca passar dele */ .obra-nome-grande { font-size: min(var(--t-2), 7.18vw); letter-spacing: -0.015em; line-height: 1.05; margin-top: var(--e-1); } .obra-texto { color: var(--tinta-2); max-width: 44ch; } .obra-dina .obra-texto { font-size: var(--t-3); line-height: 1.45; max-width: 34ch; } .obra-rodape { margin-top: auto; padding-top: var(--e-2); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-4); } .obra-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--alvo); font-weight: 700; } .obra-link .ic { width: 18px; height: 18px; } .obra-nota { font-size: var(--t-pequeno); color: var(--tinta-3); } .obra-foco-rotulo { font-size: var(--t-pequeno); font-weight: 700; color: var(--tinta-3); } /* os módulos são texto, não controle: nada de pílula que parece chip */ .modulos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-5); } .modulos li { font-family: var(--f-titulo); font-size: var(--t-3); font-weight: 700; font-stretch: 112%; line-height: 1.35; letter-spacing: -0.005em; color: var(--tinta); } .passos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); } .passos li { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: var(--e-3); color: var(--tinta); } .passos .ic { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--poco); color: var(--tinta); } @media (max-width: 61.9375em) { .obra-dina, .obra-licita, .obra-central { grid-column: 1 / -1; } .obra-dina { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "foco" "rodape"; row-gap: var(--e-5); } .obra-dina-foco { align-self: start; } } /* ----------------------------------------------------------------- sobre */ .sobre-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--e-5); row-gap: clamp(32px, 1rem + 3vw, 64px); } .sobre-titulo { grid-column: 1 / -1; font-size: var(--t-secao); max-width: 15ch; } .sobre-texto { grid-column: 1 / span 6; display: grid; gap: var(--e-5); font-size: var(--t-3); line-height: 1.5; color: var(--tinta-2); } .fatos { grid-column: 8 / span 5; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-5); align-content: start; } .fatos li { display: grid; grid-template-columns: 44px 1fr; gap: var(--e-4); align-items: start; } .fato-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--poco); } .fato-ic .ic { width: 22px; height: 22px; } .fato-texto { padding-top: 8px; } /* a primeira linha centra no círculo de 44px */ @media (max-width: 61.9375em) { .sobre-texto, .fatos { grid-column: 1 / -1; } } /* --------------------------------------------------------------- contato */ /* a faixa rebaixada de ponta a ponta: o painel de controle do aparelho, onde ficam os botões */ .contato { background: var(--poco); } .contato-painel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-6) var(--e-7); align-items: end; } .contato-titulo { font-size: var(--t-secao); } .contato-texto { margin-top: var(--e-4); font-size: var(--t-3); line-height: 1.45; color: var(--tinta-2); max-width: 28ch; } .contato-rotulo { font-size: var(--t-rotulo); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); } .contato-email { display: inline-block; padding-block: 11px; line-height: 1.3; font-size: var(--t-3); font-weight: 700; } .contato-acoes { margin-top: var(--e-4); } .botao-copiar .ic-copiado { display: none; } .botao-copiar.copiado .ic-copiar { display: none; } .botao-copiar.copiado .ic-copiado { display: block; } .redes { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-3); } @media (max-width: 61.9375em) { .contato-painel { grid-template-columns: minmax(0, 1fr); align-items: start; } } @media (max-width: 30em) { .contato-email { font-size: var(--t-corpo); } } /* ---------------------------------------------------------------- rodapé */ .rodape { padding-block: var(--e-6) var(--e-7); } .rodape-dentro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); } .rodape-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; } .rodape-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--alvo); padding: 0 14px; border-radius: var(--r-pilula); color: var(--tinta-2); font-weight: 700; font-size: 1rem; text-decoration: none; transition: background-color var(--rapido) ease, color var(--rapido) ease; } .rodape-nav .ic { width: 18px; height: 18px; } .rodape-nav .rodape-central { color: var(--tinta-3); } .rodape-nav a[aria-current="page"] { background: var(--folha); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); } @media (hover: hover) { .rodape-nav a:not([aria-current]):hover { background: var(--poco); color: var(--tinta); } } .rodape-ano { flex-basis: 100%; font-size: var(--t-pequeno); color: var(--tinta-3); } @media (max-width: 49.9375em) { .rodape-nav { margin-left: -14px; flex-basis: 100%; } /* o texto do primeiro link alinha com a marca */ } /* ============================================ livro da marca (/marca/) */ .livro-capa { padding-block: clamp(32px, 1rem + 4vw, 88px) clamp(24px, 1rem + 2vw, 48px); } .livro-capa-dentro { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--e-7); align-items: end; } .livro-capa-texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); } .livro-titulo { margin-top: var(--e-2); font-size: var(--t-1); font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em; line-height: .95; } .livro-lead { font-size: var(--t-3); line-height: 1.45; color: var(--tinta-2); max-width: 40ch; } .livro-porque { color: var(--tinta-2); max-width: 58ch; } .livro-porque strong { color: var(--tinta); } .livro-capa-sigla { justify-self: end; line-height: 0; } .sigla-livro { font-size: clamp(170px, 18vw, 280px); height: .7em; gap: .05em; } .sigla-livro i { width: .075em; border-radius: .02em; transform-origin: 50% 100%; } .livro-corpo { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--e-7); align-items: start; padding-bottom: clamp(56px, 2rem + 4vw, 104px); } /* o índice encosta: o texto do link alinha com a coluna da página, a pílula sai para a margem */ .livro-indice { position: sticky; top: calc(var(--topo-h) + var(--e-6)); display: flex; flex-direction: column; gap: 2px; padding-top: var(--e-8); margin-left: -16px; } .livro-indice a { display: flex; align-items: center; min-height: var(--alvo); padding: 0 16px; border-radius: var(--r-pilula); color: var(--tinta-2); font-weight: 700; font-size: 1rem; text-decoration: none; transition: background-color var(--rapido) ease, color var(--rapido) ease; } .livro-indice a[aria-current="true"] { background: var(--folha); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--tinta); } @media (hover: hover) { .livro-indice a:hover:not([aria-current="true"]) { background: var(--poco); color: var(--tinta); } } .livro-secoes { container-type: inline-size; min-width: 0; } .livro-secao { padding-top: var(--e-8); } .livro-secao h2 { font-size: var(--t-2); } .livro-secao code { font-family: var(--f-mono); font-size: max(.9em, var(--t-pequeno)); white-space: nowrap; } /* nunca abaixo de 15px */ .livro-intro { margin-top: var(--e-3); color: var(--tinta-2); max-width: 62ch; } .livro-sub { margin: var(--e-7) 0 var(--e-4); font-size: var(--t-3); } .livro-texto { margin-bottom: var(--e-4); color: var(--tinta-2); max-width: 62ch; } .livro-nota { font-size: var(--t-pequeno); color: var(--tinta-3); max-width: 62ch; } /* cor: grade de 6 colunas que sempre fecha a linha (3 por linha, 2 por linha, ou a rampa de 5) */ .cores, .estados { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e-4); } .cores > li, .estados > li { grid-column: span 2; } .cores-2 > li, .estados > li:nth-child(n+4) { grid-column: span 3; } .cores-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* a rampa da tinta numa linha só */ .cores-5 > li { grid-column: auto; } .cor { display: flex; flex-direction: column; overflow: hidden; background: var(--folha); border: 1px solid var(--linha); border-radius: var(--r-cartao); } .cor-amostra { display: grid; place-items: center; height: 96px; background: var(--c); border-bottom: 1px solid var(--linha); } .cor-amostra-rec span { font-family: var(--f-titulo); font-size: var(--t-2); font-weight: 800; color: var(--sobre-rec); } .cor-info { display: flex; flex-direction: column; gap: 2px; padding: var(--e-4) var(--e-4) var(--e-5); } .cor-info b { font-family: var(--f-titulo); font-size: var(--t-corpo); font-weight: 700; } .cor-info code, .cor-info .mono { font-size: var(--t-pequeno); color: var(--tinta-2); } .cor-papel { margin-top: var(--e-2); font-size: var(--t-pequeno); line-height: 1.45; color: var(--tinta-2); } .cor-medida { margin-top: var(--e-2); font-size: var(--t-pequeno); font-weight: 700; color: var(--tinta); } .estado { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-3); padding: var(--e-5) var(--e-4); background: var(--folha); border: 1px solid var(--linha); border-radius: var(--r-cartao); } .estado .cor-info { padding: 0; } .livro-regras { margin: var(--e-6) 0 0; padding: var(--e-5) var(--e-5) var(--e-5) calc(var(--e-5) + 1.1em); display: grid; gap: var(--e-2); background: var(--poco); border-radius: var(--r-cartao); color: var(--tinta-2); } .livro-regras strong { color: var(--tinta); } /* prazos: um bloco só, com as situações separadas por linha */ .prazos { list-style: none; margin: var(--e-5) 0 0; padding: 0; background: var(--folha); border: 1px solid var(--linha); border-radius: var(--r-cartao); } .prazo { display: grid; grid-template-columns: 11rem 11rem minmax(0, 1fr); align-items: center; gap: var(--e-2) var(--e-5); padding: var(--e-4) var(--e-5); } .prazo + .prazo { border-top: 1px solid var(--linha); } .prazo-quando { font-weight: 700; color: var(--tinta); } .prazo-verbos { color: var(--tinta-2); } .prazo-verbos .num { white-space: nowrap; } .prazo-sem { font-size: var(--t-pequeno); color: var(--tinta-3); } .prazos-notas { margin: var(--e-5) 0 var(--e-4); padding-left: 1.1em; display: grid; gap: var(--e-2); color: var(--tinta-2); max-width: 62ch; } @container (max-width: 50rem) { .cores-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cores-5 > li { grid-column: span 2; } .cores-5 > li:nth-child(n+4) { grid-column: span 3; } /* a situação e a etiqueta empilham à esquerda; os verbos ganham a largura que sobra */ .prazo { grid-template-columns: 11rem minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; } .prazo > :nth-child(1) { grid-column: 1; grid-row: 1; } .prazo > :nth-child(2) { grid-column: 1; grid-row: 2; } .prazo > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; align-self: center; } } @container (max-width: 40rem) { .prazo { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; justify-items: start; gap: var(--e-2); } .prazo > :nth-child(n) { grid-column: auto; grid-row: auto; align-self: auto; } } /* estreito: a amostra fica ao lado do texto e a paleta cabe em menos telas */ @container (max-width: 34rem) { .cores, .cores-5, .estados { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); } :is(.cores, .estados) > li:nth-child(n) { grid-column: auto; } .cor { flex-direction: row; } .cor-amostra { flex: none; width: 88px; height: auto; border-bottom: 0; border-right: 1px solid var(--linha); } .cor-amostra-rec span { font-size: var(--t-3); } .cor-info { padding: var(--e-3) var(--e-4) var(--e-4); } .prazo { padding: var(--e-4); } } /* tipografia */ .fontes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); margin-top: var(--e-5); } .fonte { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-5); } .fonte-titulo { grid-column: 1 / -1; } .fonte-nome { font-size: var(--t-3); } .fonte-uso { font-size: var(--t-pequeno); color: var(--tinta-2); } .fonte-mostra { margin-top: var(--e-4); color: var(--tinta); } .fonte-ficha { font-size: var(--t-pequeno); color: var(--tinta-3); } .fm-display { font-family: var(--f-titulo); font-size: var(--t-1); font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em; line-height: .9; } .fm-h1 { font-family: var(--f-titulo); font-size: var(--t-2); font-weight: 800; font-stretch: 112%; letter-spacing: -0.015em; line-height: 1.05; } .fm-h3 { font-family: var(--f-titulo); font-size: var(--t-3); font-weight: 700; line-height: 1.25; } .fm-glifos { font-size: var(--t-2); line-height: 1.1; letter-spacing: .04em; } .fm-corpo { color: var(--tinta-2); } .fm-mono { font-size: var(--t-2); line-height: 1.25; } .escala { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-5); } .escala li { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "token medida" "mostra mostra"; align-items: baseline; gap: 2px var(--e-4); } .escala code { grid-area: token; font-family: var(--f-mono); font-size: var(--t-pequeno); color: var(--tinta-2); } .escala-medida { grid-area: medida; font-size: var(--t-pequeno); color: var(--tinta-3); } .escala-mostra { grid-area: mostra; min-width: 0; color: var(--tinta); } .es-display { font-family: var(--f-titulo); font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em; line-height: .95; font-size: var(--t-1); font-size: min(var(--t-display), 16cqi); white-space: nowrap; } .es-1 { font-family: var(--f-titulo); font-size: var(--t-1); font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1.02; } .es-2 { font-family: var(--f-titulo); font-size: var(--t-2); font-weight: 800; font-stretch: 112%; letter-spacing: -0.015em; line-height: 1.08; } .es-3 { font-family: var(--f-titulo); font-size: var(--t-3); font-weight: 700; line-height: 1.25; } .es-f1 { font-family: var(--f-titulo); font-size: var(--t-ferramenta-1); font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1.05; } .es-f2 { font-family: var(--f-titulo); font-size: var(--t-ferramenta-2); font-weight: 800; font-stretch: 112%; letter-spacing: -0.015em; line-height: 1.1; } .es-corpo { font-size: var(--t-corpo); } .es-ferramenta { font-size: var(--t-ferramenta); } .es-pequeno { font-size: var(--t-pequeno); color: var(--tinta-3); } .es-rotulo { font-size: var(--t-rotulo); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2); } /* sigla e sinal */ .siglas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); margin-top: var(--e-5); } .sigla-vitrine { display: grid; place-items: center; align-content: center; gap: var(--e-4); min-height: 176px; padding: var(--e-5); background: var(--folha); border: 1px solid var(--linha); border-radius: var(--r-cartao); } .sigla-vitrine figcaption { font-size: var(--t-pequeno); color: var(--tinta-3); } .sigla-vitrine.sobre-escuro { background: var(--tinta); border-color: var(--tinta); } .sigla-vitrine.sobre-escuro .marca-nome, .sigla-vitrine.sobre-escuro figcaption { color: var(--gesso); } .sigla-demo i { transform-origin: 50% 100%; } .sigla-tocar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin-top: var(--e-4); } .sigla-tocar .livro-nota { flex: 1 1 22rem; } .sinais { list-style: none; margin: 0 0 var(--e-3); padding: 0; display: grid; gap: var(--e-3); } .sinais li { display: flex; align-items: center; gap: var(--e-3); font-weight: 700; } .sinais .sinal-alerta { color: var(--alerta); } .sinais .sinal-perigo { color: var(--perigo); } /* componentes: botões no topo, a coluna alta do campo ao lado de dois cartões, avisos no fim */ .componentes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "botoes botoes" "campo chips" "campo carregando" "etiquetas etiquetas" "avisos avisos"; gap: var(--e-4); margin-top: var(--e-5); } .comp { display: flex; flex-direction: column; gap: var(--e-4); } .comp-botoes { grid-area: botoes; } .comp-campo { grid-area: campo; } .comp-chips { grid-area: chips; } .comp-carregando { grid-area: carregando; } .comp-etiquetas { grid-area: etiquetas; } .comp-avisos { grid-area: avisos; } .comp-nome { font-size: var(--t-3); } .comp-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); } .comp-campos { display: grid; gap: var(--e-4); } .avisos-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); } /* a vitrine de botões: cada variante numa célula de mesma altura, com o nome da classe embaixo. Dez variantes em 5, 2 ou 1 coluna: a grade fecha sempre, sem célula sobrando. */ .vitrine-botoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5) var(--e-4); } .vitrine-botoes li { display: grid; grid-template-rows: 52px auto; align-items: center; justify-items: start; gap: var(--e-2); min-width: 0; } .livro-secao .vitrine-botoes code { font-size: var(--t-pequeno); color: var(--tinta-3); white-space: normal; overflow-wrap: break-word; } @container (min-width: 20.5rem) { .vitrine-botoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (min-width: 50rem) { .vitrine-botoes { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .carregando-mostra { display: grid; gap: var(--e-3); } .carregando-mostra .carregando { min-height: 96px; } .carregando-mostra figcaption { font-size: var(--t-pequeno); color: var(--tinta-2); } .dialogo-corpo { display: grid; gap: var(--e-3); padding: var(--e-6); } .dialogo-acoes { justify-content: flex-end; margin-top: var(--e-3); } /* sem JS, botão que não faria nada não aparece */ html:not(.js) :is([data-demo-aviso], [data-demo-dialogo], [data-tocar-sigla]) { display: none; } @container (max-width: 40rem) { .componentes { grid-template-columns: minmax(0, 1fr); grid-template-areas: "botoes" "campo" "chips" "carregando" "etiquetas" "avisos"; } .avisos-grade { grid-template-columns: minmax(0, 1fr); } } @container (max-width: 34rem) { .comp { padding: var(--e-4); } } /* regras: quatro cartões em duas colunas */ .regras-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6) var(--e-7); margin-top: var(--e-5); } .regra h3 { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-3); } .regra ul { margin: var(--e-3) 0 0; padding-left: 1.1em; display: grid; gap: var(--e-2); color: var(--tinta-2); } @container (max-width: 40rem) { .regras-grade { grid-template-columns: minmax(0, 1fr); } } /* versões */ .versoes { list-style: none; margin: var(--e-5) 0 0; padding: 0; display: grid; gap: var(--e-1); } .versao { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--e-2) var(--e-4); padding: var(--e-4) var(--e-5); border: 1px solid transparent; border-radius: var(--r-cartao); } .versao-num { font-family: var(--f-titulo); font-size: var(--t-2); font-weight: 800; font-stretch: 112%; line-height: 1; color: var(--tinta-3); } .versao-texto h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); font-size: var(--t-3); } .versao-texto p { margin-top: 2px; color: var(--tinta-2); } .versao-data { font-size: var(--t-pequeno); color: var(--tinta-3); white-space: nowrap; } .versao-atual { background: var(--folha); border-color: var(--linha); box-shadow: var(--s-1); } .versao-atual .versao-num { color: var(--tinta); } @media (max-width: 61.9375em) { .livro-capa-dentro { grid-template-columns: minmax(0, 1fr); } .livro-capa-sigla { display: none; } .livro-corpo { grid-template-columns: minmax(0, 1fr); gap: 0; } .livro-indice { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--e-2); padding-top: var(--e-2); margin-left: 0; } .livro-indice a { background: var(--folha); box-shadow: inset 0 0 0 2px var(--contorno); color: var(--tinta); } .livro-indice a[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--tinta); } .fontes { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 37.4375em) { .siglas { grid-template-columns: minmax(0, 1fr); } .sigla-vitrine { min-height: 120px; } .versao { grid-template-columns: 3rem minmax(0, 1fr); padding-inline: var(--e-4); } .versao-data { grid-column: 2; } .dialogo-corpo { padding: var(--e-5); } } /* ================================================================== 404 */ .erro-main { display: grid; align-items: center; min-height: calc(100svh - var(--topo-h) - 160px); padding-block: var(--e-8); } /* o medidor vazio é a imagem da página: sem sinal nenhum */ .erro-dentro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "codigo sinal" "titulo sinal" "texto sinal" "acoes sinal"; align-content: center; align-items: start; column-gap: var(--e-7); } .sinal-erro { grid-area: sinal; align-self: center; justify-self: end; height: clamp(160px, 4rem + 14vw, 280px); gap: clamp(12px, .4rem + 1vw, 24px); } .sinal-erro i { width: clamp(28px, 1rem + 2.2vw, 52px); border-radius: var(--r-fio); box-shadow: inset 0 0 0 3px var(--contorno); } .erro-codigo { grid-area: codigo; font-size: var(--t-pequeno); color: var(--tinta-3); } .erro-titulo { grid-area: titulo; margin-top: var(--e-3); font-size: var(--t-1); font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em; line-height: .98; max-width: 14ch; } .erro-texto { grid-area: texto; margin-top: var(--e-4); font-size: var(--t-3); line-height: 1.45; color: var(--tinta-2); max-width: 38ch; } .erro-acoes { grid-area: acoes; display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); } @media (max-width: 49.9375em) { .erro-dentro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sinal" "codigo" "titulo" "texto" "acoes"; } .sinal-erro { justify-self: start; height: clamp(64px, 3rem + 4vw, 112px); gap: clamp(8px, .3rem + .6vw, 14px); margin-bottom: var(--e-5); } .sinal-erro i { width: clamp(16px, .6rem + 1.2vw, 28px); } } @media (max-width: 37.4375em) { .erro-acoes .botao { flex: 1 1 auto; } } /* ----------------------------------------------- movimento: pouco e uma vez */ /* Hover do primário do site: sobe e a sombra vermelha abre (é botão: pode subir). */ @media (hover: hover) { .botao-rec:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--s-rec); } .botao-rec:active:not(:disabled) { transform: scale(.97); box-shadow: none; } } /* Momento de marca: as barras da sigla grande assentam, uma vez por página (no livro da marca, o botão "Tocar de novo" repete na sigla de demonstração). */ @media (prefers-reduced-motion: no-preference) { html:not(.foto) :is(.sigla-capa, .sigla-livro, .sigla-demo.tocando) i { animation: sigla-assenta 280ms var(--quique) both; } html:not(.foto) :is(.sigla-capa, .sigla-livro, .sigla-demo.tocando) i:nth-child(2) { animation-delay: 60ms; } html:not(.foto) :is(.sigla-capa, .sigla-livro, .sigla-demo.tocando) i:nth-child(3) { animation-delay: 120ms; } html:not(.foto) :is(.sigla-capa, .sigla-livro, .sigla-demo.tocando) i:nth-child(4) { animation-delay: 180ms; } } @keyframes sigla-assenta { from { transform: scaleY(.2); } to { transform: scaleY(1); } } /* Revelação ao rolar (no máximo 3 lugares por página). Só existe com html.anima. Quem chega pelo teclado não espera: o JS tira a transição do bloco que recebe o foco. */ html.anima .rv { transition: opacity var(--dialogo) var(--saida), transform var(--dialogo) var(--saida); transition-delay: var(--atraso, 0ms); } html.anima .rv:not(.dentro) { opacity: 0; transform: translateY(16px); } html.anima .rv.ja { transition: none; } /* ?foto=1 congela tudo na pose final (prints de QA) */ html.foto *, html.foto *::before, html.foto *::after { animation: none !important; transition: none !important; } /* ------------------------------------------------ cores forçadas (Windows) */ @media (forced-colors: active) { .livro-indice a[aria-current], .rodape-nav a[aria-current] { outline: 3px solid Highlight; } .sinal-erro i { box-shadow: inset 0 0 0 3px CanvasText; } .cor-amostra { forced-color-adjust: none; } /* a amostra de cor é o conteúdo: não pode sumir */ .tela { border-color: CanvasText; } }