/* ====================================================================== Portal · a estela Uma laje de mármore com nomes gravados. Nada de cartão, nada de app. Tema por [data-tema] no (automático via prefers-color-scheme). Sem framework, sem build, zero requisição externa. REGRA DE MEDIÇÃO DESTE ARQUIVO (revisão de 12/08/2026, §B2): contraste se mede contra o PIXEL COMPOSTO (a pedra depois do grão), nunca contra o token da paleta. Todo número escrito em comentário aqui foi medido assim, em captura de tela do Chrome, com a fórmula da WCAG 2.x. ====================================================================== */ /* --------------------------------------------------------- 0. famílias */ /* PAINEL DE TROCA DE FONTE. A escolha de família vive só aqui: nenhum outro ponto do arquivo cita nome de fonte, e nenhum elemento declara font-family fora deste bloco e das duas regras logo abaixo. Trocar a face do portal inteiro é trocar --f-portal. Decisão de 12/08/2026 (DESIGN.md §4): uma família só, EB Garamond, que tem latim e grego no mesmo desenho. A hierarquia sai de tamanho, caixa e espacejamento, nunca de troca de família. A Cardo entra só na palavra hebraica do colofão, porque a EB Garamond não tem hebraico. Se um dia trocar --f-portal, confira antes se a face nova cobre o grego (a marca é ΛΟΓΟΣ e o colofão tem ἀλήθεια, que é politônico: precisa dos subsets greek e greek-ext). Sem isso a marca cai num serif de sistema e a página desmonta. Depois reafine o painel da marca abaixo: face nova, cor de traço nova. O que existe hoje em site/assets/fontes/ (ver tools/baixar_fontes.py): EB Garamond 400 e 500, com latin, latin-ext, greek e greek-ext Cardo 400, só o subset hebrew (o peso 600 e o itálico saíram em 12/08/2026: nada usava. Para trazer de volta, ver o cabeçalho de tools/baixar_fontes.py.) */ :root { --f-portal: "EB Garamond", Georgia, "Times New Roman", serif; --f-hebraico: "Cardo", Georgia, serif; /* só a palavra אמת */ /* ---------------------------------------------- painel da marca ---- Os cinco parafusos da inscrição, todos num lugar só, para o dono trocar caixa, corpo, tinta e profundidade sem procurar nada. O corpo mora na escala (--t1, §1), porque ele é quem manda no layout. Decisão de 12/08/2026 (DESIGN.md §4), tomada com comparador renderizado à vista: ΛΟΓΟΣ em MAIÚSCULO grego, sem acento (maiúscula grega antiga não acentua). A decisão anterior por minúsculo foi revertida pelo próprio Bruno: minúscula grega é registro de manuscrito, e a página quer cara de inscrição. A cor NÃO é a cor do texto, e isso é proposital: numa inscrição real a letra vale quase o mesmo que a pedra e quem lê é a sombra do sulco. Por isso a tinta é fraca e o entalhe é fundo. O piso é 3:1 contra o fundo composto (texto grande, WCAG 1.4.3). Medido em captura de tela, no pixel composto e na altura em que a marca está: 3,45:1. Passa, com 15% de margem. */ --marca-peso: 400; --marca-esp: .24em; /* capital sem espaço é capital malfeita */ --marca-cor: #857c68; /* "quase pedra": 3,45:1 no composto */ --marca-luz: rgba(255, 255, 255, .78); /* a luz que cai dentro do sulco */ --marca-sulco: rgba(28, 24, 16, .16); /* a parede de cima do sulco */ --esp-dominio: .26em; /* a subscrição latina, essa sim, é caixa-alta miúda */ } /* ------------------------------------------------------------ 1. tokens */ /* Mármore pentélico, tinta, ouro fosco e um único azul egeu. O QUE MUDOU EM 12/08/2026 (revisão §B1/B2/B4). O grão é uma camada com mix-blend-mode por cima da pedra: ele desloca o fundo de verdade. Antes, --pedra valia #edeae1 e o pixel na tela era #e3e0d8 (multiply .30), e toda a paleta tinha sido calibrada contra o token, não contra o pixel. Resultado medido: a faixa de hover ficava a 1,004:1 (invisível). A correção é de uma vez só: o token entra CLARO o bastante para que o COMPOSTO caia no valor da carta (DESIGN.md §3). Medido em captura: #f6f3ea sob multiply .25 compõe #edeae2 na parte da laje que a vinheta não alcança, um nível de azul do #edeae1 pedido; onde a vinheta bate, sobe até #efede5. Assim todo o resto da paleta volta a valer contra o que se vê. Os números abaixo são medidos no pixel, na altura da lista (#eeebe2), que é onde os nomes moram. Divergência declarada da carta (§3): --pedra é o valor de ENTRADA, não o da carta. O valor da carta é o que a pedra vale na tela. Quem mexer no grão (mistura ou opacidade) tem de refazer esta conta. */ :root { /* pedra */ --pedra: #f6f3ea; /* entra aqui; compõe #edeae2 a #efede5 */ --pedra-2: #e3dfd3; /* faixa do hover: 1,11:1 sobre o composto */ --pedra-3: #d6d0c0; /* sulco: fundo dos campos escavados (1,29:1) */ --linha: #cdc6b4; /* filete gravado (1,42:1) */ --linha-forte: #bcb49e; /* filete de baixo dos campos */ /* tinta */ --tinta: #22201b; /* letra gravada: 13,60:1 sobre o composto */ --tinta-fraca: #635d51; /* rodapé, rótulos, botão de tema: 5,46:1 */ /* ouro fosco e o azul egeu */ /* o ouro precisa de 3:1 também contra a faixa --pedra-2, porque o anel de foco da linha é desenhado por dentro dela (outline-offset negativo). Medido: #927639 dá 3,24:1 ali e 3,60:1 sobre o composto. O #9a7d3f da carta dava 2,96:1 contra a faixa, e o #96793b anterior, 3,09:1: margem fina demais para um requisito de 3,0 (WCAG 1.4.11). */ --ouro: #927639; --ouro-claro: #c0a163; /* a luz que bate na borda do sulco de ouro */ --egeu: #2f4a63; /* 7,66:1; hoje só a seleção de texto */ /* a fechadura. Decisão do dono em 12/08/2026 (revisão §C5): sai do azul, que era frio sobre pedra quente e era o segundo ponto para onde o olho ia. O cinza novo é derivado da PEDRA, não do egeu: mesmo matiz (40°), saturação baixa. Medido contra o composto, na altura da lista: 3,40:1, acima do piso de 3:1 que sinal gráfico exige (WCAG 1.4.11). Mais discreto que o azul antigo, que dava 4,15:1. */ --sinal: #867d6b; /* luz e sombra do entalhe do texto miúdo e dos filetes. No claro a luz vem de cima, então o sulco é escuro em cima e claro embaixo. Valores propositalmente baixos: se der para ver conscientemente, está forte demais. O entalhe da marca tem painel próprio (§0), porque a letra dela é quase da cor da pedra e precisa de sulco mais fundo. */ --luz: rgba(255, 255, 255, .60); --sulco: rgba(28, 24, 16, .10); --luz-letra: rgba(255, 255, 255, .45); --sulco-letra: rgba(28, 24, 16, .055); --luz-filete: rgba(255, 255, 255, .55); /* a única vinheta permitida: a luz que cai na pedra, vinda de cima. Ela clareia o alto da laje, então no tema claro o pior caso de contraste é embaixo, longe dela; medido, da altura da lista para baixo o composto é o mesmo (#eeebe2), e é esse o número usado acima. No tema escuro é ao contrário: quem apanha é o alto, onde a marca mora (ver §2). */ --vinheta: rgba(255, 255, 255, .55); /* grão da pedra. .25 é o piso da faixa que a carta §5 autoriza (.25 a .5). Medido: desvio de 1,04 unidade de L* (CIELAB), ou seja cerca de uma diferença apenas perceptível. Ver §2 para o par do tema escuro. */ --grao-mistura: multiply; --grao-op: .25; /* escala tipográfica: quatro tamanhos na página inteira, nem um a mais. --t1 tem DOIS termos e um mínimo, de propósito (revisão §B3): o termo de largura sozinho fazia a marca ir a 61px numa tela de 390px de altura e a página rolava em cinco viewports comuns. O min() faz a altura mandar quando a tela é baixa. Teto 3,5rem: valor aprovado pelo dono no comparador de 12/08/2026. */ --t1: clamp(2.2rem, min(1.1rem + 7vw, .55rem + 6.4vh), 3.5rem); /* a marca */ --t2: clamp(1.02rem, .94rem + .45vw, 1.22rem); /* nomes, valor dos campos */ --t3: .8rem; /* rótulos, botão, erro */ --t4: .66rem; /* domínio e colofão */ /* espacejamento das capitais: capital romana sem espaço é capital malfeita. O da marca é o --marca-esp da §0; este aqui é o dos nomes gravados. */ --esp-nome: .2em; color-scheme: light; } /* --------------------------------------------------- 2. a pedra à noite */ /* Não é um "dark theme": é a mesma laje sob luz baixa. O fundo continua quente (marrom de pedra, não azul), o ouro brilha mais, o egeu dessatura em vez de estourar, e a luz do entalhe muda de intensidade. Os valores do tema escuro vivem em UM lugar só, na regra @media logo abaixo, e a regra de [data-tema="escuro"] apenas repete a mesma lista. Se mexer em um, mexa no outro: são duas cópias porque o CSS não deixa uma media query e um seletor de atributo compartilharem corpo sem duplicar, e a alternativa (@media + :is()) perde o modo manual. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { /* mesma correção da §1: o token entra ESCURO para o composto cair no #191814 da carta. Medido: #141310 sob soft-light .50 compõe exatamente #191814. Antes, #191814 compunha #1f1e19, e era essa subida de 6 níveis que apagava a faixa de hover (1,02:1). */ --pedra: #141310; /* entra aqui; compõe #191814 */ --pedra-2: #24211b; /* faixa: 1,11:1 sobre o composto, igual ao claro */ --pedra-3: #2c2820; /* 1,21:1 */ --linha: #39342a; --linha-forte: #4a4335; --tinta: #e6e0d0; /* 13,50:1 na altura da lista */ --tinta-fraca: #a29a87; /* 6,36:1 na lista, 6,09:1 no alto da laje */ --ouro: #c9a961; /* 7,90:1 no composto, 7,13:1 na faixa */ --ouro-claro: #e0c68d; --egeu: #8ba3b8; --sinal: #726b60; /* mesma relação do claro: 3,38:1 na lista */ /* a marca no escuro NÃO repete o hexadecimal do claro: letra clara sobre pedra escura é outra relação perceptual. O que se copia é o EFEITO ("a letra quase some, quem lê é o sulco"), e o jeito honesto de copiar efeito é copiar a razão de contraste: #746c5b dá 3,27:1 medido na altura da marca, contra 3,45:1 do #857c68 no claro. (A vinheta trabalha ao contrário nos dois temas: no claro ela clareia o fundo e ajuda a letra escura; no escuro ela clareia o fundo e come contraste da letra clara, e por isso o pior caso do escuro é justamente onde a marca está. Na altura da lista, 3,42:1.) Matiz preservado (mesma proporção R:G:B da tinta clara da marca). O sulco inverte de sinal: sobre pedra quase preta uma sombra preta não tem o que escurecer, então quem cava é a luz. */ --marca-cor: #746c5b; --marca-luz: rgba(255, 250, 235, .16); --marca-sulco: rgba(0, 0, 0, .55); --luz: rgba(255, 250, 235, .055); --sulco: rgba(0, 0, 0, .50); --luz-letra: rgba(255, 250, 235, .045); --sulco-letra: rgba(0, 0, 0, .45); --luz-filete: rgba(255, 250, 235, .035); --vinheta: rgba(255, 244, 222, .05); /* multiply sobre pedra quase preta só empasta (desvio de 0,5 nível de sRGB: some na quantização); soft-light devolve as duas faces do grão. Desvio da carta §5, declarado, e agora com os efeitos de segunda ordem também declarados: (a) a opacidade sobe para .50, que ainda é o teto autorizado pela carta; (b) o soft-light CLAREIA a pedra, e é por isso que o token entra em #141310. Sobre "o grão é 5x mais proeminente no escuro" (revisão §B4): isso vale na métrica de luminância relativa, que estoura perto do preto. Na métrica perceptual (L* do CIELAB, 1 unidade ≈ 1 JND) o desvio medido é 0,87 no escuro contra 1,04 no claro: o escuro é um pouco MENOS texturado, não cinco vezes mais. Foi por essa medida que a opacidade do claro caiu de .30 (1,25 de L*) para .25. */ --grao-mistura: soft-light; --grao-op: .50; color-scheme: dark; } } html[data-tema="escuro"] { --pedra: #141310; --pedra-2: #24211b; --pedra-3: #2c2820; --linha: #39342a; --linha-forte: #4a4335; --tinta: #e6e0d0; --tinta-fraca: #a29a87; --ouro: #c9a961; --ouro-claro: #e0c68d; --egeu: #8ba3b8; --sinal: #726b60; --marca-cor: #746c5b; --marca-luz: rgba(255, 250, 235, .16); --marca-sulco: rgba(0, 0, 0, .55); --luz: rgba(255, 250, 235, .055); --sulco: rgba(0, 0, 0, .50); --luz-letra: rgba(255, 250, 235, .045); --sulco-letra: rgba(0, 0, 0, .45); --luz-filete: rgba(255, 250, 235, .035); --vinheta: rgba(255, 244, 222, .05); --grao-mistura: soft-light; --grao-op: .50; color-scheme: dark; } /* -------------------------------------------------------------- 3. base */ *, *::before, *::after { box-sizing: border-box; } html { /* o fundo fica no de propósito: se ficasse só no , ele seria propagado para o canvas e a camada de grão não teria o que misturar */ background: var(--pedra); -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background-color: transparent; /* a única vinheta: a luz entrando por cima da laje */ background-image: radial-gradient(120% 75% at 50% -8%, var(--vinheta), transparent 68%); color: var(--tinta); font-family: var(--f-portal); font-size: 16px; line-height: 1.5; text-rendering: optimizeLegibility; font-kerning: normal; -webkit-font-smoothing: antialiased; } /* grão da pedra: feTurbulence em data-URI, cinza, fino, fixo na tela. Fica atrás do conteúdo (z-index 0) para não sujar a leitura das letras. Consequência que precisa estar escrita, porque foi ela que derrubou a §B1: tudo que a estela pinta (faixa de hover, campos, botões) fica ACIMA do grão e sai liso, enquanto a pedra em volta sai texturada. Por isso a faixa se compara com o composto, e não com o token da pedra. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--grao-op); mix-blend-mode: var(--grao-mistura); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E"); background-size: 180px 180px; } a { color: inherit; text-decoration: none; } ::selection { background: var(--egeu); color: var(--pedra); } html[data-tema="escuro"] ::selection { color: #12110e; } /* ----------------------------------------------------------- 4. entalhe */ /* A letra não é escura sobre clara: é cavada. Duas sombras de 1px, uma clara embaixo (a luz que entra no sulco) e uma escura em cima. Só nas letras grandes da inscrição; em corpo miúdo o entalhe vira sujeira. Um único lugar define o entalhe, para calibrar tudo de uma vez. DIREÇÃO (divergência da carta §5, agora argumentada, revisão §B5). A carta pede a luz na diagonal (clara abaixo/direita, escura acima/ esquerda). Aqui ela é vertical, e o motivo é medida, não gosto: o deslocamento horizontal de 1px cai em cima da haste vertical da letra, que nesta face tem 1px no percentil 5 (medida da revisão §B5), e o que sai é uma duplicata de haste (fio duplo), não uma parede de sulco. Na horizontal, a sombra cai na serifa e nas barras, que são justamente as partes chatas da letra, e some. Quem quiser a diagonal da carta troca --entalhe-x por 1px: o eixo está isolado exatamente para isso. No escuro a carta pede inverter a direção da luz. Não invertemos, e o motivo também é medida: sobre pedra quase preta a sombra preta não tem o que escurecer (sobram 20 níveis até o zero), então quem cava é a luz, e ela tem de continuar embaixo, onde o olho espera o fundo do sulco com a luz vindo de cima. O que muda no escuro são as intensidades. */ :root { --entalhe-x: 0px; } .gravado, .destino .nome, .botao { text-shadow: var(--entalhe-x) 1px 0 var(--luz-letra), calc(-1 * var(--entalhe-x)) -1px 0 var(--sulco-letra); } /* O filete: uma linha gravada, com 1px de luz logo abaixo dela. Não é sombra de elevação, é a segunda parede do sulco. Ele é a linha INTEIRA, sem miolo. O losango de ouro que ficava no meio saiu em 12/08/2026, por decisão do dono (revisão §C1: ornamento geométrico centralizado entre dois filetes é o clichê da elegância automática). A carta (DESIGN.md §6) passou a proibir qualquer ornamento no meio da linha, então não é para repor nada ali: nem símbolo, nem ponto, nem espaço reservado. */ .filete { height: 1px; background: var(--linha); box-shadow: 0 1px 0 var(--luz-filete); } /* ------------------------------------------------------------ 5. estela */ .estela { position: relative; z-index: 1; width: 100%; max-width: 46rem; margin: 0 auto; /* o topo nunca desce abaixo de 2.9rem: é o espaço do alternador de tema, que fica fixo no canto e não pode encostar na inscrição. O pé é maior que a cabeça de propósito: assim o bloco assenta um fio acima do centro geométrico, que é onde o olho espera uma inscrição. */ padding: clamp(2.9rem, 8vh, 5rem) clamp(1.1rem, 5vw, 2.5rem) clamp(2rem, 9.5vh, 6rem); flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(1.8rem, 5.5vh, 3.2rem); } /* ------------------------------------------- 6. cabeçalho da inscrição */ .frontao { text-align: center; } .marca { display: block; margin: 0 0 clamp(1.1rem, 3vh, 1.8rem); color: var(--tinta); } /* A marca é ΛΟΓΟΣ em maiúscula grega, sem acento. Três consequências tipográficas, todas medidas: (1) capital espacejada tem de compensar o vão da última letra, senão o bloco centralizado assenta meio espaço à esquerda do eixo. Com --marca-esp em .24em isso deixou de ser hipótese: medido no pixel (não na caixa de layout, que mente, porque o vão da última letra faz parte dela), numa tela de 1440px a tinta fica 7,5px à esquerda do eixo sem o padding-left, e 1,0px com ele. (2) a hierarquia contra os nomes dos destinos vem de escala e de cor. As duas caixas são altas agora, então a conta é direta. Medido na captura a 1440px: a haste do Λ tem 36px de altura contra 13px da capital do nome (2,8x), com a marca a 56px de corpo contra 19,5px do nome. Não precisa de peso. (3) a marca é a única cor própria da página (--marca-cor, §0): ela é mais fraca que a tinta de propósito, e quem lê é o sulco. */ .logos { display: block; font-weight: var(--marca-peso); font-size: var(--t1); line-height: 1.06; letter-spacing: var(--marca-esp); /* o espacejamento também é aplicado depois da última letra; sem isto o bloco centralizado fica meio espaço à esquerda do eixo (torto ao olho) */ padding-left: var(--marca-esp); color: var(--marca-cor); text-shadow: var(--entalhe-x) 1px 0 var(--marca-luz), calc(-1 * var(--entalhe-x)) -1px 0 var(--marca-sulco); } /* o domínio é a subscrição latina sob a palavra grega, como nas inscrições bilíngues. Mesma face, o contraste vem de caixa, corpo e espacejamento: caixa-alta miúda e espacejada contra a capital grande da marca. Sem entalhe: em corpo miúdo a sombra de 1px vira sujeira. */ .dominio { display: block; margin-top: clamp(.55rem, 1.6vh, .95rem); font-weight: 400; font-size: var(--t4); line-height: 1; text-transform: uppercase; letter-spacing: var(--esp-dominio); padding-left: var(--esp-dominio); color: var(--tinta-fraca); } a.marca { transition: color 120ms ease; } a.marca:hover .logos { color: var(--ouro); } a.marca:hover .dominio { color: var(--ouro); } /* -------------------------------------------------- 7. lista de nomes */ .destinos ul { list-style: none; margin: 0; padding: 0; } .destinos li { border-bottom: 1px solid var(--linha); box-shadow: 0 1px 0 var(--luz-filete); /* a luz do sulco, 1px, sem borrão */ transition: border-color 120ms ease, box-shadow 120ms ease; } .destino { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(.62rem, 2vh, 1rem) clamp(.7rem, 3vw, 1.4rem); transition: background-color 120ms ease, color 120ms ease; } .destino .nome { font-weight: 400; font-size: var(--t2); line-height: 1.25; /* a linha da lista não precisa do 1.5 do corpo */ text-transform: uppercase; letter-spacing: var(--esp-nome); padding-right: var(--esp-nome); /* compensa o vão depois da última letra */ } /* Os sinais da direita, em três estados: fechadura (o destino exige uma senha que esta pessoa não tem), seta (o destino sai do portal) e nada. Os dois são SVG desenhado à mão, traço de 1px, no cinza-pedra da §1. O alinhamento óptico da coluna não é por sorte: os dois desenhos moram na MESMA caixa de 13x15 e a tinta dos dois termina em x 11.5, que é a borda que uma coluna alinhada à direita mostra. Reconferido no pixel depois de a seta voltar (12/08/2026), nos dois temas: caixa idêntica (x 1013..1026 a 1440px), e a tinta das duas acaba na MESMA coluna (x 1024). O que não é idêntico, e é pequeno demais para se ver: a fechadura é meio pixel mais larga à esquerda (ela tem 10 unidades de tinta contra 9,35 da seta) e o centro da seta fica 0,5px acima do da fechadura. Igualar isso exigiria empurrar a seta para dentro e perder a borda direita, que é o alinhamento que o olho realmente lê. As linhas sem sinal não deixam buraco porque nada mais disputa aquele canto. Candidatos a sair (revisão §C4): os dois motivos são ícone de biblioteca redesenhado. Cada um mora num lugar só, dentro do CADA:DESTINOS do index.html, e sai apagando o irmão e continua valendo sozinho. */ .sinais { flex: none; display: flex; align-items: center; gap: .55rem; } .sinal { display: block; flex: none; color: var(--sinal); transition: color 120ms ease; } /* o sulco aprofunda: faixa de largura total, entalhe interno e ouro no filete. Nada se desloca. A faixa é --pedra-2 e ela é pintada ACIMA do grão: medido na página, com o mouse em cima, 1,114:1 no claro e 1,108:1 no escuro contra o pixel ao lado. Antes da correção da §1 dava 1,004:1, ou seja, faixa invisível. */ .destino:hover, .destino:focus-visible { background-color: var(--pedra-2); box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz); } .destino:hover .sinal, .destino:focus-visible .sinal { color: var(--tinta-fraca); } .destinos li:hover, .destinos li:focus-within { border-bottom-color: var(--ouro); box-shadow: 0 1px 0 var(--ouro-claro); } /* ------------------------------------------------------------- 8. porta */ /* A tela de entrar é a porta da mesma estela: mesma pedra, mesmo filete. */ .porta { width: 100%; max-width: 22rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.4rem; } .campo { display: flex; flex-direction: column; gap: .45rem; } .campo label { font-weight: 400; font-size: var(--t3); text-transform: uppercase; letter-spacing: var(--esp-nome); padding-right: var(--esp-nome); color: var(--tinta-fraca); } .campo input { width: 100%; padding: .62rem .7rem; /* controle de formulário não herda fonte sozinho: sem isto o campo sai no sans do sistema e quebra a família única */ font-family: inherit; /* 16px é piso do contrato (AUTH.md §1): abaixo disso o Safari do iPhone dá zoom ao focar. --t2 vale 16,32px no mínimo da escala. */ font-size: var(--t2); line-height: 1.4; color: var(--tinta); background: var(--pedra-3); border: 0; border-bottom: 1px solid var(--linha-forte); border-radius: 0; /* campo = sulco cavado: escuro na parede de cima, luz na de baixo */ box-shadow: inset 0 1px 0 var(--sulco), inset 0 -1px 0 var(--luz); transition: border-color 120ms ease; appearance: none; } .campo input:hover { border-bottom-color: var(--ouro); } /* o preenchimento automático do navegador não pode quebrar a pedra */ .campo input:-webkit-autofill, .campo input:-webkit-autofill:hover, .campo input:-webkit-autofill:focus { -webkit-text-fill-color: var(--tinta); -webkit-box-shadow: inset 0 0 0 100px var(--pedra-3), inset 0 1px 0 var(--sulco); caret-color: var(--tinta); } .botao { width: 100%; margin-top: .4rem; padding: .72rem 1rem; font-family: inherit; /* idem: