/* =============================================================================
Tenet Tecnologia · tenet.ia.br · css/base.css
O que toda página usa: a ordem das camadas, as fontes, os tokens, a base,
a casca (topo, menu, seção e rodapé) e os componentes comuns
(botão, marcador, celular, tipografia e o vidro: .quadradinho,
.pilula-vidro e .cartao-vidro, com os tokens --gv-*).
Carregar sempre primeiro, e depois só a folha da página:
home /css/base.css + /css/home.css
privacidade, termos, 404
/css/base.css + /css/legal.css
/otto /css/base.css + /css/pecas.css + /css/golden.css + /css/otto.css
Direção "infraestrutura": grade técnica de 1 px, rótulos em mono, uma luz de
ametista no eixo. Título em Newsreader (serifa editorial) contra a Mona Sans
e a Martian Mono (técnicas). A /otto sobe um degrau no calor (Linho e
vidro) pelo tema .tom-otto, definido aqui mesmo nos tokens.
Sem script. A política de privacidade do site diz que ele "não usa scripts",
e a CSP (_headers) é script-src 'none'. Por isso:
- o tema segue o sistema (prefers-color-scheme), sem interruptor: um botão
só de CSS esqueceria a escolha a cada página, e guardá-la pediria script;
- o menu do celular abre por :target e fecha sozinho ao seguir um link.
Nada de style="" no HTML: a CSP é style-src 'self'.
Azul: nenhum. O único azul do site mora em css/golden.css, que só a /otto
carrega; scripts/site-tenet/conferir-azul.py barra qualquer outro.
Contraste conferido por script nos dois temas: texto >= 4,5:1, contorno de
alvo e foco >= 3:1.
========================================================================== */
/* A ordem vale para todas as folhas: quem vem depois ganha. pecas, otto e
golden são as camadas da /otto; numa página que não carrega essas folhas
elas ficam vazias e não mudam nada. */
@layer fontes, tokens, base, componentes, casca, secoes, pecas, otto, golden, legal, movimento;
/* ------------------------------------------------------------------ fontes */
/* Arquivos em /fontes/ (SIL OFL 1.1). O caminho é relativo a este arquivo. */
@layer fontes {
@font-face {
font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%;
font-display: swap; src: url("../fontes/mona-sans-normal-latin.woff2?v=18415837") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Mona Sans"; font-style: normal; font-weight: 200 900; font-stretch: 75% 125%;
font-display: swap; src: url("../fontes/mona-sans-normal-latin-ext.woff2?v=2070c35e") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Martian Mono"; font-style: normal; font-weight: 100 800; font-stretch: 75% 112.5%;
font-display: swap; src: url("../fontes/martian-mono-normal-latin.woff2?v=9fc94a3d") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Martian Mono"; font-style: normal; font-weight: 100 800; font-stretch: 75% 112.5%;
font-display: swap; src: url("../fontes/martian-mono-normal-latin-ext.woff2?v=be309b3e") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Newsreader"; font-style: normal; font-weight: 200 800;
font-display: swap; src: url("../fontes/newsreader-normal-latin.woff2?v=0a301b6d") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Newsreader"; font-style: normal; font-weight: 200 800;
font-display: swap; src: url("../fontes/newsreader-normal-latin-ext.woff2?v=40f89707") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Newsreader"; font-style: italic; font-weight: 200 800;
font-display: swap; src: url("../fontes/newsreader-italic-latin.woff2?v=6d201901") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Newsreader"; font-style: italic; font-weight: 200 800;
font-display: swap; src: url("../fontes/newsreader-italic-latin-ext.woff2?v=045b9f0e") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
}
/* ------------------------------------------------------------------ tokens */
/* Cada cor é light-dark(claro, escuro). O tema vem do sistema. Quem pinta com
var() resolve a cor pelo color-scheme do próprio elemento: o rodapé fica
escuro nos dois temas só com color-scheme. */
@layer tokens {
:root {
color-scheme: light dark;
/* superfícies: névoa no claro, grafite de matiz 286 no escuro */
--fundo: light-dark(#fafafb, #0a0a0d);
--sup-1: light-dark(#ffffff, #111114);
--sup-2: light-dark(#f4f4f7, #16161b);
--sup-3: light-dark(#ebebf0, #1e1e25);
--linho: light-dark(#f4ece0, #16161b); /* linho só no claro; no escuro, grafite */
--vidro: light-dark(rgb(250 250 251 / .82), rgb(10 10 13 / .78));
/* tinta: quatro degraus, todos >= 5,9:1 sobre --fundo */
--tinta: light-dark(#1b1b21, #f1f1f4); /* 16,6 / 17,6 */
--tinta-2: light-dark(#3a3a44, #cdcdd4); /* 11,0 / 12,6 */
--tinta-3: light-dark(#4e4e58, #adadb6); /* 8,0 / 9,0 */
--tinta-4: light-dark(#62626d, #8e8e99); /* 5,9 / 6,1 */
/* fios: só divisória, nunca contorno de alvo */
--linha: light-dark(rgb(27 27 33 / .09), rgb(241 241 244 / .085));
--linha-forte: light-dark(rgb(27 27 33 / .16), rgb(241 241 244 / .15));
--grade: light-dark(rgb(27 27 33 / .045), rgb(241 241 244 / .04));
--veu: light-dark(rgb(27 27 33 / .045), rgb(241 241 244 / .05));
--borda-campo: light-dark(#80808a, #797982); /* contorno de alvo, >= 3:1 */
/* ação */
--acao: light-dark(#1b1b21, #e6e6ec);
--acao-hover: light-dark(#3a3a44, #ffffff);
--acao-texto: light-dark(#f7f7f9, #16161b);
/* o roxo do Otto: foco, seleção, o ponto do eixo. Nunca estado. */
--otto: light-dark(#6d3bcd, #b298f9); /* 6,3 / 7,9 */
--otto-veu: light-dark(rgb(109 59 205 / .12), rgb(178 152 249 / .16));
--otto-fio: light-dark(rgb(109 59 205 / .55), rgb(178 152 249 / .6));
/* sinais da fila (os mesmos do painel do Otto) */
--atencao: light-dark(#b36d0c, #e89c2c);
--atencao-tinta: light-dark(#7c4305, #f0b055);
--atencao-fundo: light-dark(#ffebc8, #38270a);
--urgente: light-dark(#bf281e, #f0564b);
--urgente-tinta: light-dark(#9b1a11, #ff8a80);
--urgente-fundo: light-dark(#fdeceb, #3a1613);
--urgente-borda: light-dark(#f2bfbb, #63241f);
/* a janela do Otto (Fig. 03): a paleta do próprio painel */
--o-fundo: light-dark(#f1f1f4, #111114);
--o-papel: light-dark(#ffffff, #1b1b21);
--o-papel-2: light-dark(#f4ece0, #1f1d1b);
--o-elevado: light-dark(#ffffff, #2c2c33);
--o-borda: light-dark(#e2e2e7, #2b2b30);
--sombra-cor: light-dark(rgb(27 27 33 / .07), rgb(0 0 0 / .5));
--brilho: light-dark(rgb(255 255 255 / 0), rgb(255 255 255 / .045));
/* tipo */
--serif: "Newsreader", "Iowan Old Style", Charter, "Sitka Text", Cambria, Georgia, serif;
--sans: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: "Martian Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
--mono-l: 78%;
--t-display: clamp(2.75rem, 1.2rem + 4.8vw, 6rem);
--t-h2: clamp(2.125rem, 1.45rem + 2.35vw, 3.625rem);
--t-h3: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
--t-lede: clamp(1.0625rem, .98rem + .45vw, 1.3125rem);
--t-corpo: clamp(1rem, .97rem + .15vw, 1.0625rem);
--t-pequeno: .9375rem;
--t-rotulo: .75rem;
/* espaço: 16 px de margem a 375, 64 px a partir de 1440 */
--max: 1280px;
--margem: clamp(16px, calc(16px + (100vw - 375px) * .04507), 64px);
--celula-x: clamp(0px, -12px + 3.4vw, 48px);
--secao: clamp(4.5rem, 2.5rem + 5.4vw, 8.5rem);
--topo: 64px;
--raio-p: 6px;
--raio: 12px;
--raio-g: 16px;
--ease-saida: cubic-bezier(.16, 1, .3, 1);
--ease-ui: cubic-bezier(.165, .84, .44, 1);
}
/* Navegador sem light-dark() (Safari antes do 17.5): as mesmas cores, por
prefers-color-scheme. O rodapé repete o escuro porque aqui color-scheme não
troca cor. */
@supports not (color: light-dark(#000, #fff)) {
:root {
--fundo: #fafafb; --sup-1: #ffffff; --sup-2: #f4f4f7; --sup-3: #ebebf0; --linho: #f4ece0;
--vidro: rgb(250 250 251 / .82);
--tinta: #1b1b21; --tinta-2: #3a3a44; --tinta-3: #4e4e58; --tinta-4: #62626d;
--linha: rgb(27 27 33 / .09); --linha-forte: rgb(27 27 33 / .16); --grade: rgb(27 27 33 / .045);
--veu: rgb(27 27 33 / .045); --borda-campo: #80808a;
--acao: #1b1b21; --acao-hover: #3a3a44; --acao-texto: #f7f7f9;
--otto: #6d3bcd; --otto-veu: rgb(109 59 205 / .12); --otto-fio: rgb(109 59 205 / .55);
--atencao: #b36d0c; --atencao-tinta: #7c4305; --atencao-fundo: #ffebc8;
--urgente: #bf281e; --urgente-tinta: #9b1a11; --urgente-fundo: #fdeceb; --urgente-borda: #f2bfbb;
--o-fundo: #f1f1f4; --o-papel: #ffffff; --o-papel-2: #f4ece0; --o-elevado: #ffffff; --o-borda: #e2e2e7;
--sombra-cor: rgb(27 27 33 / .07); --brilho: rgb(255 255 255 / 0);
}
@media (prefers-color-scheme: dark) {
:root {
--fundo: #0a0a0d; --sup-1: #111114; --sup-2: #16161b; --sup-3: #1e1e25; --linho: #16161b;
--vidro: rgb(10 10 13 / .78);
--tinta: #f1f1f4; --tinta-2: #cdcdd4; --tinta-3: #adadb6; --tinta-4: #8e8e99;
--linha: rgb(241 241 244 / .085); --linha-forte: rgb(241 241 244 / .15); --grade: rgb(241 241 244 / .04);
--veu: rgb(241 241 244 / .05); --borda-campo: #797982;
--acao: #e6e6ec; --acao-hover: #ffffff; --acao-texto: #16161b;
--otto: #b298f9; --otto-veu: rgb(178 152 249 / .16); --otto-fio: rgb(178 152 249 / .6);
--atencao: #e89c2c; --atencao-tinta: #f0b055; --atencao-fundo: #38270a;
--urgente: #f0564b; --urgente-tinta: #ff8a80; --urgente-fundo: #3a1613; --urgente-borda: #63241f;
--o-fundo: #111114; --o-papel: #1b1b21; --o-papel-2: #1f1d1b; --o-elevado: #2c2c33; --o-borda: #2b2b30;
--sombra-cor: rgb(0 0 0 / .5); --brilho: rgb(255 255 255 / .045);
}
}
.rodape {
--fundo: #0a0a0d; --sup-1: #111114; --sup-2: #16161b;
--tinta: #f1f1f4; --tinta-2: #cdcdd4; --tinta-3: #adadb6; --tinta-4: #8e8e99;
--linha: rgb(241 241 244 / .085); --linha-forte: rgb(241 241 244 / .15);
--veu: rgb(241 241 244 / .05); --borda-campo: #797982; --otto: #b298f9; --otto-fio: rgb(178 152 249 / .6);
}
}
/* --- tom da /otto: um degrau mais quente que a Tenet --------------------
Vai no da otto.html e da en/otto.html. Troca a
névoa fria pelo Linho do painel (#f4ece0 e o linho à noite, #25211c) e
traz o papel de parede do app. A tinta continua grafite: os quatro
degraus seguem >= 5,5:1 sobre o --fundo quente nos dois temas (a
--tinta-4 cai para 4,4:1 sobre a --sup-3 do escuro: lá, só --tinta-3). */
.tom-otto {
--fundo: light-dark(#faf6f0, #13110f);
--sup-1: light-dark(#fffdfa, #1a1816);
--sup-2: light-dark(#f4ece0, #25211c);
--sup-3: light-dark(#ece4d8, #2f2a24);
--linho: light-dark(#f4ece0, #25211c);
--vidro: light-dark(rgb(250 246 240 / .78), rgb(19 17 15 / .74));
--linha: light-dark(rgb(43 36 28 / .10), rgb(244 236 224 / .09));
--linha-forte: light-dark(rgb(43 36 28 / .17), rgb(244 236 224 / .16));
--grade: light-dark(rgb(43 36 28 / .05), rgb(244 236 224 / .045));
--veu: light-dark(rgb(43 36 28 / .05), rgb(244 236 224 / .055));
--sombra-cor: light-dark(rgb(58 42 24 / .10), rgb(0 0 0 / .55));
--areia: #d3b997; /* só ambiente e ilustração, nunca texto */
/* o papel de parede do painel: ametista no alto, areia de um lado,
lilás embaixo. Só fundo de cena, nunca atrás de texto miúdo. */
--ambiente:
radial-gradient(46rem 40rem at 90% -8%, light-dark(rgb(145 103 234 / .20), rgb(119 60 214 / .30)), transparent 64%),
radial-gradient(40rem 46rem at -8% 42%, light-dark(rgb(211 185 151 / .40), rgb(158 128 94 / .14)), transparent 62%);
}
/* --- vidro líquido: a mesma receita do painel (painel/src/estilo/vidro.css)
Corpo translúcido, brilho de cima, fio de 1 px que nasce branco, cruza a
ametista e termina na areia, e o blur. Vale na /otto e em toda peça que
finge o app (.celular, .vidro), em qualquer página. */
:where(.tom-otto, .celular, .vidro) {
--vidro-corpo: light-dark(rgb(252 250 246 / .62), rgb(30 27 24 / .58));
--vidro-corpo-forte: light-dark(rgb(252 250 246 / .84), rgb(30 27 24 / .84));
--vidro-luz: light-dark(rgb(255 255 255 / .72), rgb(255 255 255 / .10));
--vidro-brilho: linear-gradient(180deg, light-dark(rgb(255 255 255 / .45), rgb(255 255 255 / .07)), rgb(255 255 255 / 0) 55%);
--vidro-fio-inicio: light-dark(rgb(255 255 255 / .85), rgb(255 255 255 / .38));
--vidro-fio-meio: light-dark(rgb(145 103 234 / .55), rgb(178 152 249 / .60));
--vidro-fio-fim: light-dark(rgb(211 185 151 / .70), rgb(211 185 151 / .40));
--vidro-blur: blur(20px) saturate(170%);
--vidro-blur-forte: blur(32px) saturate(160%);
--vidro-sombra: 0 1px 2px rgb(0 0 0 / .08), 0 18px 40px -18px light-dark(rgb(58 42 24 / .28), rgb(0 0 0 / .7));
}
/* --- a paleta dos ícones em vidro: sem azul ------------------------------
Nenhuma tem matiz entre 190 e 250: azul não entra na paleta (o azul é
do golden). O linho-ouro é o cristal neutro do bloco do dado e substitui
o creme #efe3cf, que no escuro virava mancha. */
:where(.quadradinho) {
--q-ametista: #6d3bcd;
--q-musgo: #4f6b2a;
--q-ambar: #a8520a;
--q-coral: #b8431f;
--q-grafite: #3a3a44;
--q-vinho: #962556;
--q-linho: #a08660;
}
/* --- gv: o vidro dos ícones, das pílulas, dos cartões, da barra e do menu
Valores por tema em custom properties trocadas por @media e por
[data-theme], nunca light-dark() dentro de alfa ou de porcentagem: isso
invalida a declaração inteira e o vidro some. Quem usa mistura a cor do
próprio ícone (--q-cor) com essas porcentagens.
--gv-brilho brilho de cima do corpo (L2)
--gv-corpo-a/-b quanto da cor no corpo, do topo à base (L2)
--gv-aro-a/-b o aro especular, em cima-esquerda e embaixo-direita (L4)
--gv-topo o reflexo de 1 px no topo
--gv-fio o fio de .5 px em volta
--gv-gota quanto da cor na gota atrás do vidro (L1)
--gv-sombra quanto da cor na sombra de fora
O rodapé é escuro nos dois temas e leva sempre os valores do escuro; um
trecho de fundo escuro no tema claro pode pedir o mesmo com
data-vidro-tom="escuro". */
:root {
--gv-brilho: rgb(255 255 255 / .55);
--gv-corpo-a: 26%;
--gv-corpo-b: 10%;
--gv-aro-a: rgb(255 255 255 / .95);
--gv-aro-b: rgb(255 255 255 / .60);
--gv-topo: rgb(255 255 255 / .90);
--gv-fio: rgb(255 255 255 / .50);
--gv-gota: 70%;
--gv-sombra: 55%;
--gv-base: 22%; /* o fio de baixo, na cor */
--gv-contato: 25%; /* a sombra de contato do glifo */
--gv-glifo: 72%; /* o glifo: a cor, puxada para o preto no claro */
--gv-glifo-alvo: #000000; /* ... e para o branco no escuro */
--gv-geada: 70%; /* o fundo da página sob o vidro sobre conteúdo */
--gv-placa: rgb(255 255 255 / .55); /* pílula */
--gv-cartao: rgb(255 255 255 / .55); /* cartão */
--gv-aro-liso: rgb(27 27 33 / .12); /* o fio de .5 px da pílula e do cartão */
--gv-barra: 62%; /* quanto do fundo na barra e no menu */
--gv-barra-fio: rgb(255 255 255 / .70); /* o fio claro sob a barra */
--foco-anel: #ffffff; /* o anel de dentro do foco duplo */
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--gv-brilho: rgb(255 255 255 / .18); --gv-corpo-a: 40%; --gv-corpo-b: 16%;
--gv-aro-a: rgb(255 255 255 / .55); --gv-aro-b: rgb(255 255 255 / .25);
--gv-topo: rgb(255 255 255 / .35); --gv-fio: rgb(255 255 255 / .12);
--gv-gota: 85%; --gv-sombra: 80%; --gv-base: 30%; --gv-contato: 60%; --gv-glifo: 30%; --gv-glifo-alvo: #ffffff;
--gv-placa: rgb(255 255 255 / .06); --gv-cartao: rgb(255 255 255 / .05);
--gv-aro-liso: rgb(255 255 255 / .13); --gv-barra: 58%; --gv-barra-fio: rgb(255 255 255 / .06);
}
}
:root[data-theme="dark"], .rodape, [data-vidro-tom="escuro"] {
--gv-brilho: rgb(255 255 255 / .18); --gv-corpo-a: 40%; --gv-corpo-b: 16%;
--gv-aro-a: rgb(255 255 255 / .55); --gv-aro-b: rgb(255 255 255 / .25);
--gv-topo: rgb(255 255 255 / .35); --gv-fio: rgb(255 255 255 / .12);
--gv-gota: 85%; --gv-sombra: 80%; --gv-base: 30%; --gv-contato: 60%; --gv-glifo: 30%; --gv-glifo-alvo: #ffffff;
--gv-placa: rgb(255 255 255 / .06); --gv-cartao: rgb(255 255 255 / .05);
--gv-aro-liso: rgb(255 255 255 / .13); --gv-barra: 58%; --gv-barra-fio: rgb(255 255 255 / .06);
}
@supports not (color: light-dark(#000, #fff)) {
.tom-otto {
--fundo: #faf6f0; --sup-1: #fffdfa; --sup-2: #f4ece0; --sup-3: #ece4d8; --linho: #f4ece0;
--vidro: rgb(250 246 240 / .78);
--linha: rgb(43 36 28 / .10); --linha-forte: rgb(43 36 28 / .17); --grade: rgb(43 36 28 / .05);
--veu: rgb(43 36 28 / .05); --sombra-cor: rgb(58 42 24 / .10);
--ambiente:
radial-gradient(46rem 40rem at 90% -8%, rgb(145 103 234 / .20), transparent 64%),
radial-gradient(40rem 46rem at -8% 42%, rgb(211 185 151 / .40), transparent 62%);
}
:where(.tom-otto, .celular, .vidro) {
--vidro-corpo: rgb(252 250 246 / .62); --vidro-corpo-forte: rgb(252 250 246 / .84);
--vidro-luz: rgb(255 255 255 / .72);
--vidro-brilho: linear-gradient(180deg, rgb(255 255 255 / .45), rgb(255 255 255 / 0) 55%);
--vidro-fio-inicio: rgb(255 255 255 / .85); --vidro-fio-meio: rgb(145 103 234 / .55); --vidro-fio-fim: rgb(211 185 151 / .70);
--vidro-sombra: 0 1px 2px rgb(0 0 0 / .08), 0 18px 40px -18px rgb(58 42 24 / .28);
}
@media (prefers-color-scheme: dark) {
.tom-otto {
--fundo: #13110f; --sup-1: #1a1816; --sup-2: #25211c; --sup-3: #2f2a24; --linho: #25211c;
--vidro: rgb(19 17 15 / .74);
--linha: rgb(244 236 224 / .09); --linha-forte: rgb(244 236 224 / .16); --grade: rgb(244 236 224 / .045);
--veu: rgb(244 236 224 / .055); --sombra-cor: rgb(0 0 0 / .55);
--ambiente:
radial-gradient(46rem 40rem at 90% -8%, rgb(119 60 214 / .30), transparent 64%),
radial-gradient(40rem 46rem at -8% 42%, rgb(158 128 94 / .14), transparent 62%);
}
:where(.tom-otto, .celular, .vidro) {
--vidro-corpo: rgb(30 27 24 / .58); --vidro-corpo-forte: rgb(30 27 24 / .84);
--vidro-luz: rgb(255 255 255 / .10);
--vidro-brilho: linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / 0) 55%);
--vidro-fio-inicio: rgb(255 255 255 / .38); --vidro-fio-meio: rgb(178 152 249 / .60); --vidro-fio-fim: rgb(211 185 151 / .40);
--vidro-sombra: 0 1px 2px rgb(0 0 0 / .08), 0 18px 40px -18px rgb(0 0 0 / .7);
}
}
}
}
/* -------------------------------------------------------------------- base */
@layer base {
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--topo) + 20px);
background: var(--fundo);
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
min-width: 320px;
background: var(--fundo);
color: var(--tinta-2);
font-family: var(--sans);
font-size: var(--t-corpo);
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-optical-sizing: auto;
overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { color: var(--tinta); font-weight: 520; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
svg { display: block; }
strong, b { font-weight: 600; color: var(--tinta); }
abbr[title] { text-decoration: none; }
code { font-family: var(--mono); font-size: .84em; font-stretch: var(--mono-l); overflow-wrap: anywhere; }
::selection { background: var(--otto-veu); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--otto); outline-offset: 3px; border-radius: 4px; }
time, .num { font-variant-numeric: tabular-nums; }
a, button, summary, label { touch-action: manipulation; }
.so-leitor {
position: absolute !important; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.pular {
position: absolute; left: 16px; top: -100px; z-index: 100;
padding: 10px 16px; border-radius: var(--raio-p);
background: var(--acao); color: var(--acao-texto); font-weight: 560; text-decoration: none;
}
.pular:focus-visible { top: 12px; }
/* A voz editorial: Newsreader, só em título de exibição. */
.abertura h1, .titulo-secao, .contato h2, .legal-cabeca h1, .rodape-missao, .quiasmo {
font-family: var(--serif);
font-optical-sizing: auto;
font-weight: 370;
}
.abertura h1 em, .titulo-secao em, .rodape-missao em {
font-style: italic; font-weight: 360; letter-spacing: -.01em;
}
/* tecnologIA: o "ia" fica em caixa alta e em ametista; o texto continua "tecnologia" */
.ia { text-transform: uppercase; color: var(--otto); letter-spacing: .01em; }
}
/* ------------------------------------------------------------------- casca */
@layer casca {
.largura { width: min(100% - 2 * var(--margem), var(--max)); margin-inline: auto; }
/* --- cabeçalho: vidro do iOS 26 em escala de barra ---------------------
O fundo da própria página a 62% (58% no escuro), blur de 20 px e
saturação de 180%: o que rola por baixo aparece, borrado e mais vivo.
Um reflexo de 1 px no topo e um fio claro sobre a linha de baixo fazem
a borda do vidro. O mesmo vidro vale para o menu do celular. */
.topo {
position: sticky; top: 0; z-index: 50;
height: var(--topo);
background: color-mix(in srgb, var(--fundo) var(--gv-barra), transparent);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--linha);
box-shadow: inset 0 1px 0 var(--gv-topo), inset 0 -1px 0 var(--gv-barra-fio);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.topo { background: var(--fundo); }
}
@media (prefers-reduced-transparency: reduce) {
.topo { background: var(--fundo); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* --- foco sobre o vidro: anel duplo -----------------------------------
Sobre o vidro o anel simples some onde o fundo que passa por baixo tem
a mesma cor. Aqui o anel é duplo: um fio branco colado no alvo e o
ametista por fora, >= 3:1 contra qualquer coisa que passe por trás. */
:is(.topo, .menu-painel, .cartao-vidro) :focus-visible,
:is(.pilula-vidro, .cartao-vidro):focus-visible,
:is(.pilula-vidro:has(input:focus-visible), input:focus-visible + .pilula-vidro) {
outline: 2px solid var(--otto); outline-offset: 2px;
box-shadow: 0 0 0 2px var(--foco-anel);
}
@media (forced-colors: active) {
:is(.topo, .menu-painel, .cartao-vidro) :focus-visible,
:is(.pilula-vidro, .cartao-vidro):focus-visible,
:is(.pilula-vidro:has(input:focus-visible), input:focus-visible + .pilula-vidro) {
outline-color: Highlight; box-shadow: none;
}
}
.topo-dentro {
height: 100%;
display: flex; align-items: center; gap: 24px;
padding-inline: var(--celula-x);
}
.marca {
display: inline-flex; align-items: center; min-height: 44px; margin-right: auto;
color: var(--tinta); text-decoration: none;
}
.marca-svg { height: 19px; width: auto; fill: currentColor; }
.nav-principal ul { display: flex; gap: 2px; }
.nav-principal a, .nav-idioma {
display: inline-flex; align-items: center; min-height: 40px; padding-inline: 12px;
border-radius: var(--raio-p);
color: var(--tinta-3); text-decoration: none; font-size: .875rem; font-weight: 500;
transition: color .18s var(--ease-ui), background-color .18s var(--ease-ui);
}
.nav-principal a:hover, .nav-idioma:hover { color: var(--tinta); background: var(--veu); }
.nav-principal a[aria-current="page"] { color: var(--tinta); }
.nav-idioma {
font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
letter-spacing: .06em; text-transform: uppercase;
}
.topo-acoes { display: flex; align-items: center; gap: 6px; }
/* menu do celular: abre por :target (#menu) e fecha ao seguir qualquer link */
.menu-abrir {
display: none; align-items: center; gap: 8px; min-height: 44px; padding-inline: 12px 10px;
border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); text-decoration: none;
}
.menu-abrir svg { width: 14px; height: 14px; }
.menu-painel { display: none; }
.menu-painel:focus { outline: none; }
@media (max-width: 900px) {
.nav-principal, .topo-acoes > .botao, .topo-acoes > .nav-idioma { display: none; }
.menu-abrir { display: inline-flex; }
.topo-dentro { gap: 8px; }
/* O menu é o mesmo vidro da barra, em tela cheia. A página atrás sai do
Tab e do leitor (visibility, logo abaixo), então o que o vidro borra
é a luz de ametista e de areia que o body ganha enquanto o menu está
aberto: o vidro tem o que mostrar sem expor alvo escondido. */
.menu-painel:target {
display: flex; flex-direction: column;
position: fixed; inset: 0; z-index: 60; overflow-y: auto;
padding: 0 var(--margem) 32px;
background: color-mix(in srgb, var(--fundo) var(--gv-barra), transparent);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
box-shadow: inset 0 1px 0 var(--gv-topo);
}
:root:has(.menu-painel:target) body {
background:
radial-gradient(28rem 26rem at 100% 0%, light-dark(rgb(145 103 234 / .42), rgb(119 60 214 / .46)), transparent 70%),
radial-gradient(26rem 30rem at 0% 78%, light-dark(rgb(211 185 151 / .55), rgb(158 128 94 / .24)), transparent 68%),
var(--fundo);
background-attachment: fixed, fixed, scroll;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.menu-painel:target { background: var(--fundo); }
}
@media (prefers-reduced-transparency: reduce) {
.menu-painel:target { background: var(--fundo); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.menu-cabeca {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
height: var(--topo); flex: none; border-bottom: 1px solid var(--linha);
}
.menu-cabeca .marca-svg { height: 19px; }
.menu-fechar {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 12px 10px;
border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); text-decoration: none;
}
.menu-fechar svg { width: 14px; height: 14px; }
.menu-lista { margin-top: 8px; counter-reset: menu; }
.menu-lista a {
counter-increment: menu;
display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
min-height: 60px; padding-block: 16px; border-bottom: 1px solid var(--linha);
font-family: var(--serif); font-weight: 370; font-size: 1.75rem; line-height: 1.1;
color: var(--tinta); text-decoration: none;
}
.menu-lista a::after {
content: counter(menu, decimal-leading-zero);
font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l); color: var(--tinta-4);
}
.menu-pe { margin-top: auto; padding-top: 32px; display: grid; gap: 12px; }
.menu-pe .botao { justify-content: center; }
.menu-pe .nav-idioma { justify-content: center; min-height: 48px; border: 1px solid var(--linha-forte); }
:root:has(.menu-painel:target) { overflow: hidden; }
/* o painel cobre a página; o que está atrás sai do Tab e do leitor de tela */
:root:has(.menu-painel:target) :is(.topo, main, .rodape) { visibility: hidden; }
}
/* --- seção: faixa de ponta a ponta, fio no topo, célula entre trilhos --- */
.secao { position: relative; border-top: 1px solid var(--linha); }
.celula {
position: relative;
padding: var(--secao) var(--celula-x);
border-inline: 1px solid var(--linha);
}
/* o eixo: um nó no centro de cada divisa */
.secao::before {
content: ""; position: absolute; z-index: 2; left: 50%; top: -5px;
width: 9px; height: 9px; translate: -50% 0; rotate: 45deg;
background: var(--fundo); border: 1px solid var(--tinta-4);
}
.secao::after {
content: ""; position: absolute; left: calc(50% - .5px); top: 4px; width: 1px; height: 40px;
background: linear-gradient(to bottom, var(--linha-forte), transparent);
}
@media (max-width: 640px) {
.celula { border-inline: 0; }
.secao::before { width: 7px; height: 7px; top: -4px; }
.secao::after { height: 24px; }
}
/* --- cabeça de seção --- */
.rotulo {
font-family: var(--mono); font-size: var(--t-rotulo); font-stretch: var(--mono-l);
font-weight: 400; line-height: 1.5;
letter-spacing: .045em; text-transform: uppercase; color: var(--tinta-3);
}
.rotulo-sobre { display: inline-flex; align-items: center; gap: 10px; }
.rotulo-sobre::before {
content: ""; flex: none; width: 7px; height: 7px; border: 1px solid currentColor; rotate: 45deg;
}
.titulo-secao {
font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.02em;
max-width: 20ch;
}
.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--tinta-3); max-width: 56ch; }
.cabeca-secao { display: grid; gap: 22px; margin-bottom: clamp(40px, 5vw, 72px); }
/* --- rodapé: escuro nos dois temas --- */
.rodape { color-scheme: dark; background: var(--fundo); color: var(--tinta-2); border-top: 1px solid var(--linha); overflow: hidden; }
.rodape .celula { padding-block: clamp(56px, 7vw, 104px) 0; }
.rodape-grade {
display: grid; gap: 48px 32px;
grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
}
.rodape-marca-bloco { display: grid; gap: 20px; align-content: start; color: var(--tinta); }
.rodape-marca-bloco .marca-svg { height: 20px; }
.rodape-missao { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem); line-height: 1.08; letter-spacing: -.018em; color: var(--tinta); max-width: 13em; text-wrap: balance; }
.rodape-marca-bloco .miuda { color: var(--tinta-3); font-size: var(--t-pequeno); max-width: 34ch; }
.rodape h2 { font-size: var(--t-rotulo); }
.rodape-col ul { display: grid; gap: 2px; margin-top: 14px; }
.rodape-col a {
display: inline-flex; min-height: 36px; align-items: center;
color: var(--tinta-2); text-decoration: none; font-size: var(--t-pequeno);
}
.rodape-col a:hover { color: var(--tinta); text-decoration: underline; }
.rodape-legal {
margin-top: clamp(48px, 6vw, 80px); padding-block: 24px;
border-top: 1px solid var(--linha);
display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; align-items: baseline;
font-size: .875rem; color: var(--tinta-3);
}
.rodape-legal p { max-width: 80ch; }
.sem-rastreador { display: inline-flex; gap: 10px; align-items: flex-start; }
.sem-rastreador::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: .6em; border-radius: 50%; border: 1px solid var(--tinta-3); }
.rodape-gigante { position: relative; margin-top: 8px; height: clamp(64px, 12.4vw, 178px); overflow: hidden; }
.rodape-letras { width: 100%; height: auto; }
.rm-letra { fill: none; stroke: var(--linha-forte); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rm-eixo { stroke: var(--otto-fio); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rm-ponto { fill: var(--otto); }
/* A marca sobe para uma linha própria e as três colunas seguem lado a lado
enquanto os e-mails cabem; mais estreito que isso, as três empilham, e
nenhuma fica sozinha numa linha. */
@media (max-width: 1100px) {
.rodape-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rodape-marca-bloco { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
.rodape-grade { grid-template-columns: 1fr; row-gap: 36px; }
}
}
/* ------------------------------------------------------------- componentes */
@layer componentes {
.botao {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 44px; padding: 0 20px;
border-radius: var(--raio-p); border: 1px solid transparent;
font: inherit; font-size: .9375rem; font-weight: 560; line-height: 1.2;
text-decoration: none; cursor: pointer; white-space: nowrap;
transition: background-color .18s var(--ease-ui), border-color .18s var(--ease-ui),
color .18s var(--ease-ui), transform .1s var(--ease-ui);
}
.botao:active { transform: translateY(1px); }
.botao .seta { transition: transform .18s var(--ease-ui); }
.botao:hover .seta { transform: translateX(3px); }
.botao-primario { background: var(--acao); color: var(--acao-texto); }
.botao-primario:hover { background: var(--acao-hover); }
.botao-fantasma { color: var(--tinta); border-color: var(--borda-campo); background: transparent; }
.botao-fantasma:hover { background: var(--veu); border-color: var(--tinta-3); }
.botao-pequeno { min-height: 36px; padding: 0 14px; font-size: .875rem; }
@media (pointer: coarse) { .botao-pequeno { min-height: 44px; } }
/* marcador de dado que falta: parece parte do desenho, não erro */
.marcador {
font-family: var(--mono); font-size: .8125em; font-stretch: var(--mono-l); letter-spacing: .02em;
color: var(--tinta-2);
padding: .1em .45em; border-radius: 4px;
border: 1px dashed var(--borda-campo);
box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* --- tipografia das cenas: uma frase curta por bloco ------------------
.frase é a única frase do bloco, em Newsreader; .frase-heroi é a do
herói; .apoio é a linha pequena que às vezes acompanha a peça (um
rótulo, nunca um parágrafo). */
.frase, .frase-heroi {
font-family: var(--serif); font-optical-sizing: auto; font-weight: 370;
color: var(--tinta); text-wrap: balance;
}
.frase { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -.02em; max-width: 18ch; }
.frase-heroi { font-size: var(--t-display); line-height: 1.02; letter-spacing: -.022em; max-width: 14ch; margin-left: -.04em; }
:is(.frase, .frase-heroi) em { font-style: italic; font-weight: 360; letter-spacing: -.01em; }
.apoio { font-size: var(--t-pequeno); line-height: 1.5; color: var(--tinta-3); max-width: 40ch; text-wrap: balance; }
/* --- vidro líquido avulso: notificação, barra, cartão sobre foto ------ */
.vidro {
position: relative; isolation: isolate;
border-radius: var(--raio-vidro, 22px);
background: var(--vidro-brilho), var(--vidro-corpo-forte);
-webkit-backdrop-filter: var(--vidro-blur-forte); backdrop-filter: var(--vidro-blur-forte);
box-shadow: var(--vidro-sombra), inset 0 1px 0 var(--vidro-luz);
color: var(--tinta);
}
/* o fio de 1 px em volta: máscara em vez de borda, para seguir o raio */
.vidro::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
background: linear-gradient(135deg, var(--vidro-fio-inicio), var(--vidro-fio-meio) 50%, var(--vidro-fio-fim));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
}
/* --- .celular: moldura de iPhone em vidro líquido, só CSS -------------
A largura vem de --celular (padrão 300px) e nunca passa da coluna. A
tela tem a proporção de 390 × 844 (o tamanho das capturas); a moldura,
a ilha e o raio são proporcionais à largura (unidades cqi da própria
moldura), então o mesmo desenho serve do bento ao herói. Dentro da
.tela vai uma captura (![]()
ou ) ou HTML vivo.
O corpo é grafite com o vidro por cima: brilho de cima, fio que cruza a
ametista, reflexo diagonal no vidro da tela. Com transparência reduzida
no sistema, fica só o grafite. */
.celular {
--celular-aro: #1b1b21;
position: relative; isolation: isolate;
inline-size: min(var(--celular, 300px), 100%);
container-type: inline-size;
/* raio externo: 15% da largura; na vertical, a mesma medida em % da
altura (a moldura mede 2,094 larguras de altura) */
border-radius: 15% / 7.2%;
background: linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / 0) 18%), linear-gradient(160deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0) 70%, rgb(255 255 255 / .10)), var(--celular-aro);
box-shadow:
inset 0 0 0 1px rgb(255 255 255 / .14),
inset 0 1.5px 1px rgb(255 255 255 / .28),
0 0 0 1px var(--linha-forte),
var(--vidro-sombra),
0 50px 90px -50px var(--sombra-cor);
}
/* o fio de vidro em volta do corpo, como no painel */
.celular::before {
content: ""; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
background: linear-gradient(135deg, var(--vidro-fio-inicio), var(--vidro-fio-meio) 50%, var(--vidro-fio-fim));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
}
/* o reflexo no vidro da tela: uma faixa diagonal que quase não se vê */
.celular::after {
content: ""; position: absolute; inset: 3cqi; z-index: 3; border-radius: 12cqi; pointer-events: none;
background: linear-gradient(118deg, rgb(255 255 255 / .16) 0 14%, rgb(255 255 255 / .04) 26%, rgb(255 255 255 / 0) 40%);
}
.celular > .tela {
position: relative; z-index: 1; overflow: hidden;
margin: 3cqi;
aspect-ratio: 390 / 844;
border-radius: 12cqi;
background: var(--celular-tela, var(--fundo));
color: var(--tinta);
font-size: 3.6cqi; /* 1em na tela ~ 14 pt de iPhone */
}
/* a ilha dinâmica: 125 × 37 pt numa tela de 393 pt */
.celular > .tela::before {
content: ""; position: absolute; z-index: 5; left: 50%; top: 2.6cqi; translate: -50% 0;
inline-size: 29.9cqi; block-size: 8.8cqi; border-radius: 99px;
background: #000;
}
.celular > .tela > :is(img, picture, picture > img, video) {
display: block; inline-size: 100%; block-size: 100%; object-fit: cover;
}
.celular-sem-ilha > .tela::before { display: none; }
@supports not (container-type: inline-size) {
.celular > .tela { margin: 10px; border-radius: 36px; font-size: 11px; }
.celular::after { inset: 10px; border-radius: 36px; }
.celular > .tela::before { top: 9px; inline-size: 30%; block-size: 26px; }
}
@media (prefers-reduced-transparency: reduce) {
.celular { background: var(--celular-aro); }
.celular::after { display: none; }
}
/* --- .quadradinho: o ícone em vidro do iOS 26 (gv) --------------------
Tamanho por --quadradinho (padrão 56px). Cor por data-cor: ametista,
musgo, ambar, coral, grafite, vinho ou linho. Nada de azul.
Quatro camadas, só CSS:
L1 gota (::before) a cor, borrada, atrás do vidro: é o que o vidro
"refrata" e o que faz a transparência aparecer;
L2 corpo vidro tingido, bem transparente, brilho de cima;
L3 glifo (svg) traço de 1,7 na cor (no escuro, a cor clareada),
placa interna a 18% e sombra de contato mínima;
L4 aro (::after) fio especular de 1 px, claro em cima-esquerda e
embaixo-direita.
Variantes:
data-vidro="claro" (padrão) 22 a 60 px: bento, dado, persona, ramos,
passos, faixa de fontes;
data-vidro="cheio" 72 px ou mais: corpo quase cheio da cor e glifo
branco ("Nosso jeito" da home).
data-sobre="conteudo" liga o backdrop-filter, só quando há o que borrar
atrás (tela do app, foto, fundo radial). Sobre cartão liso o vidro é só
pintado, com custo zero. */
.quadradinho {
--q-cor: var(--q-grafite);
position: relative; isolation: isolate; flex: none;
display: inline-grid; place-items: center;
inline-size: var(--quadradinho, 56px); aspect-ratio: 1;
border-radius: 28%;
color: color-mix(in oklab, var(--q-glifo, var(--q-cor)) var(--gv-glifo), var(--gv-glifo-alvo));
background:
radial-gradient(90% 70% at 30% 0%, var(--gv-brilho), rgb(255 255 255 / 0) 55%),
linear-gradient(160deg,
color-mix(in oklab, var(--q-cor) var(--gv-corpo-a), transparent),
color-mix(in oklab, var(--q-cor) var(--gv-corpo-b), transparent));
box-shadow:
inset 0 1px 0 var(--gv-topo),
inset 0 -1px 0 color-mix(in oklab, var(--q-cor) var(--gv-base), transparent),
inset 0 0 0 .5px var(--gv-fio),
0 1px 2px color-mix(in oklab, var(--q-cor) 18%, transparent),
0 10px 22px -12px color-mix(in oklab, var(--q-cor) var(--gv-sombra), transparent);
}
/* L1 gota */
.quadradinho::before {
content: ""; position: absolute; z-index: -1; inset: 18% 12% 4% 30%;
border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, color-mix(in oklab, var(--q-cor) var(--gv-gota), transparent), transparent);
filter: blur(calc(var(--quadradinho, 56px) * .08));
}
/* L4 aro especular: máscara em vez de borda, para seguir o raio */
.quadradinho::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
background: linear-gradient(135deg, var(--gv-aro-a), rgb(255 255 255 / 0) 38%, rgb(255 255 255 / 0) 62%, var(--gv-aro-b));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
}
/* L3 glifo */
.quadradinho svg {
inline-size: 54%; block-size: 54%;
fill: color-mix(in oklab, currentColor 18%, transparent);
stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
filter: drop-shadow(0 .5px .5px color-mix(in oklab, var(--q-cor) var(--gv-contato), transparent));
}
.quadradinho[data-cor="ametista"] { --q-cor: var(--q-ametista); }
.quadradinho[data-cor="musgo"] { --q-cor: var(--q-musgo); }
.quadradinho[data-cor="ambar"] { --q-cor: var(--q-ambar); }
.quadradinho[data-cor="coral"] { --q-cor: var(--q-coral); }
.quadradinho[data-cor="grafite"] { --q-cor: var(--q-grafite); }
.quadradinho[data-cor="vinho"] { --q-cor: var(--q-vinho); }
.quadradinho[data-cor="linho"] { --q-cor: var(--q-linho); }
/* cheio: >= 72 px, corpo quase cheio da cor, glifo branco */
.quadradinho[data-vidro="cheio"] {
color: #ffffff;
background:
radial-gradient(90% 70% at 30% 0%, rgb(255 255 255 / .24), rgb(255 255 255 / 0) 55%),
linear-gradient(160deg,
color-mix(in oklab, var(--q-cor) 100%, transparent),
color-mix(in oklab, var(--q-cor) 88%, transparent));
}
.quadradinho[data-vidro="cheio"] svg {
fill: rgb(255 255 255 / .16);
filter: drop-shadow(0 .5px .5px color-mix(in oklab, var(--q-cor) 70%, #000000));
}
/* sobre conteúdo o corpo ganha uma geada do fundo da página por baixo
da cor: o que passa atrás fica borrado e não briga com o glifo */
.quadradinho[data-sobre="conteudo"]:not([data-vidro="cheio"]) {
background:
radial-gradient(90% 70% at 30% 0%, var(--gv-brilho), rgb(255 255 255 / 0) 55%),
linear-gradient(160deg,
color-mix(in oklab, var(--q-cor) var(--gv-corpo-a), transparent),
color-mix(in oklab, var(--q-cor) var(--gv-corpo-b), transparent)),
color-mix(in srgb, var(--fundo) var(--gv-geada), transparent);
}
.quadradinho[data-sobre="conteudo"] {
-webkit-backdrop-filter: blur(10px) saturate(190%);
backdrop-filter: blur(10px) saturate(190%);
}
/* --- .pilula-vidro: abas de ramo, pílulas do herói, "e mais" ----------
…moda
Um quadradinho dentro vira o mini-ícone de 22 px, redondo. Como aba
(label com rádio, link com aria-current), a escolhida ganha a ametista. */
.pilula-vidro {
position: relative; isolation: isolate;
display: inline-flex; align-items: center; gap: 6px;
min-block-size: 32px; padding: 4px 14px;
border-radius: 999px;
font-size: .875rem; font-weight: 520; line-height: 1.2; white-space: nowrap;
color: var(--tinta-2); text-decoration: none;
background: var(--gv-placa);
box-shadow:
inset 0 1px 0 var(--gv-topo),
0 0 0 .5px var(--gv-aro-liso),
0 1px 2px var(--sombra-cor);
transition: background-color .18s var(--ease-ui), color .18s var(--ease-ui), box-shadow .18s var(--ease-ui);
}
.pilula-vidro > .quadradinho { --quadradinho: 22px; border-radius: 50%; }
.pilula-vidro > .quadradinho:first-child { margin-inline-start: -10px; }
:is(a, label, button).pilula-vidro { cursor: pointer; }
:is(a, label, button).pilula-vidro:hover { color: var(--tinta); }
/* sobre conteúdo, a mesma geada do ícone por baixo do vidro */
.pilula-vidro[data-sobre="conteudo"] {
background: linear-gradient(var(--gv-placa), var(--gv-placa)), color-mix(in srgb, var(--fundo) var(--gv-geada), transparent);
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
}
.pilula-vidro:is([aria-current]:not([aria-current="false"]), [aria-selected="true"], [aria-pressed="true"], :has(input:checked)),
input:checked + .pilula-vidro {
color: var(--tinta);
background: color-mix(in oklab, var(--otto) 14%, var(--sup-1));
box-shadow:
inset 0 1px 0 var(--gv-topo),
0 0 0 1px var(--otto-fio),
0 6px 14px -8px color-mix(in oklab, var(--otto) 60%, transparent);
}
/* --- .cartao-vidro: Tom da marca, passos, faixa de fontes, menu -------
O vidro em escala de cartão: corpo claro translúcido, brilho de cima,
reflexo no topo e o mesmo aro especular do ícone. Raio por
--raio-vidro (22px), respiro por --cartao-respiro. */
.cartao-vidro {
position: relative; isolation: isolate;
border-radius: var(--raio-vidro, 22px);
padding: var(--cartao-respiro, clamp(16px, 2vw, 24px));
color: var(--tinta-2);
background:
radial-gradient(120% 80% at 20% 0%, var(--gv-brilho), rgb(255 255 255 / 0) 60%),
var(--gv-cartao);
box-shadow:
inset 0 1px 0 var(--gv-topo),
0 0 0 .5px var(--gv-aro-liso),
0 1px 2px var(--sombra-cor),
0 18px 40px -22px var(--sombra-cor);
}
.cartao-vidro::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
background: linear-gradient(135deg, var(--gv-aro-a), rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0) 70%, var(--gv-aro-b));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
}
.cartao-vidro[data-sobre="conteudo"] {
background:
radial-gradient(120% 80% at 20% 0%, var(--gv-brilho), rgb(255 255 255 / 0) 60%),
linear-gradient(var(--gv-cartao), var(--gv-cartao)),
color-mix(in srgb, var(--fundo) var(--gv-geada), transparent);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
}
/* --- os três fallbacks do vidro ------------------------------------------
1. sem backdrop-filter: onde o vidro contava com o borrão, corpo sólido;
2. transparência reduzida: corpo sólido, sem gota e sem blur, com o aro
e o reflexo do topo;
3. cores forçadas: contorno em CanvasText, sem pseudo-elementos. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.quadradinho[data-sobre="conteudo"]:not([data-vidro="cheio"]) { background: color-mix(in oklab, var(--q-cor) 16%, var(--fundo)); }
:is(.pilula-vidro, .cartao-vidro)[data-sobre="conteudo"] { background: var(--sup-1); }
}
@media (prefers-reduced-transparency: reduce) {
.quadradinho, .quadradinho[data-sobre="conteudo"]:not([data-vidro="cheio"]) {
background: color-mix(in oklab, var(--q-cor) 16%, var(--fundo));
-webkit-backdrop-filter: none; backdrop-filter: none;
}
.quadradinho[data-vidro="cheio"] { background: var(--q-cor); }
.quadradinho::before { display: none; }
:is(.pilula-vidro, .cartao-vidro), :is(.pilula-vidro, .cartao-vidro)[data-sobre="conteudo"] { background: var(--sup-1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pilula-vidro:is([aria-current]:not([aria-current="false"]), [aria-selected="true"], [aria-pressed="true"], :has(input:checked)),
input:checked + .pilula-vidro { background: color-mix(in oklab, var(--otto) 14%, var(--sup-1)); }
}
@media (forced-colors: active) {
.quadradinho, .quadradinho[data-vidro="cheio"], .quadradinho[data-sobre="conteudo"]:not([data-vidro="cheio"]) {
border: 1px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none;
-webkit-backdrop-filter: none; backdrop-filter: none;
}
.quadradinho::before, .quadradinho::after, .cartao-vidro::after { display: none; }
.quadradinho svg, .quadradinho[data-vidro] svg { fill: none; stroke: CanvasText; filter: none; }
.pilula-vidro, .cartao-vidro { border: 1px solid CanvasText; box-shadow: none; }
.pilula-vidro:is([aria-current]:not([aria-current="false"]), [aria-selected="true"], [aria-pressed="true"], :has(input:checked)),
input:checked + .pilula-vidro { border: 2px solid Highlight; }
}
}
@media print {
.topo, .menu-painel, .rodape-gigante, .pular { display: none !important; }
:root { color-scheme: light; }
.rodape { color-scheme: light; }
.celula { border: 0; }
}