/* ============================================================
CLEAN — repaginação visual do editor e do mural.
Carregada por último: substitui as bordas pretas grossas e as
sombras "duras" por cartões brancos, traços finos e sombras
suaves. Só aparência; nenhum comportamento muda aqui.
============================================================ */
/* ==========================================================
MOVIMENTO — os tempos e as curvas, num lugar so
==========================================================
Antes disto havia 49 transicoes com `ease` cru (a curva padrao do
navegador, que ninguem escolheu), catorze animacoes iguais e meia
duzia de curvas improvisadas com valores parecidos mas nunca
iguais. Nada estava errado sozinho; o conjunto e que nao
concordava, e e do conjunto que vem a sensacao de fluidez.
---- as curvas ----
A regra que mais muda o resultado e direcional:
entrada ease-out — comeca rapido e pousa devagar. O olho pega
o objeto no ar e o acompanha ate parar.
saida ease-in — comeca devagar e some rapido. Quem esta
indo embora nao merece a atencao de quem
fica.
na tela suave nas duas pontas.
girando linear, e so ai. Nunca para deslocamento.
---- os tempos ----
Escalam com o tamanho do que se mexe, nao com o gosto:
toque 80-120ms precisa parecer instantaneo
botao 120-180ms resposta ao dedo
cartao 200-350ms entra e sai da tela
janela 300-400ms muda o foco de quem olha
pagina 400-600ms troca de contexto
E entradas duram mais que saidas — a pessoa se importa com o que
aparece, nao com o que vai embora.
========================================================== */
:root {
/* curvas */
--mov-padrao: cubic-bezier(.2, 0, 0, 1); /* na tela, o caso comum */
--mov-entrada: cubic-bezier(.05, .7, .1, 1); /* aparecer, chamar atencao */
--mov-saida: cubic-bezier(.3, 0, 1, 1); /* sumir, dispensar */
--mov-suave: cubic-bezier(.4, 0, .2, 1); /* ambiente, fundo */
--mov-estouro: cubic-bezier(.175, .885, .32, 1.275); /* passa e volta */
/* tempos */
--t-toque: 110ms;
--t-botao: 160ms;
--t-cartao: 260ms;
--t-janela: 340ms;
--t-pagina: 480ms;
/* saidas sao ~35% mais curtas que a entrada equivalente */
--t-saida-cartao: 170ms;
--t-saida-janela: 220ms;
}
/* ---- a rede de seguranca de quem pediu menos movimento ----
As excecoes espalhadas pelo site cobriam cada uma a sua animacao, e
qualquer animacao nova nascia fora da conta. Esta regra pega tudo o
que nao foi lembrado: nao apaga o movimento (o que quebraria o que
depende do fim da animacao para acontecer), encurta ate o
imperceptivel. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
:root {
--fundo: #f4f6f9;
--linha: #eef1f6;
--linha-forte: #e3e8f0;
--suave: #6a7585;
--borda: #e3e8f0;
--sombra-1: 0 .12vh .3vh rgba(20,30,50,.06);
--sombra-2: 0 .12vh .3vh rgba(20,30,50,.05), 0 .9vh 2.6vh rgba(20,30,50,.07);
--sombra-3: 0 .25vh .7vh rgba(20,30,50,.07), 0 2vh 4.8vh rgba(20,30,50,.12);
--raio: 1.4vh;
/* ==========================================================
O QUE SEPARA UMA SUPERFICIE DA OUTRA, POR TEMA
==========================================================
"Gosto do fundo branco."
No CLARO o painel e branco e cada categoria se separa pela borda
e por uma sombra curta — sombra le sobre branco. Um trilho cinza
atras dos cartoes resolveria o mesmo contraste sujando o painel
inteiro, e foi o que o desenho recusou.
No ESCURO nao ha sombra que leia: ali quem separa e o DEGRAU de
superficie, com o trilho mais fundo que o cartao. Por isso os
tres valores abaixo mudam de tema para tema — nao e descuido, e a
mesma intencao com o recurso que cada tema permite. */
--trilho: #ffffff;
--card-borda: #dde4ee;
--card-sombra: 0 .12vh .3vh rgba(20,30,50,.07);
/* ==========================================================
O AZUL E O TOQUE. O VERMELHO E O FIM.
==========================================================
"Vermelho so quando e algo final e decisivo, como o comecar a
gravar. O restante fica em azul."
Vale NOS DOIS TEMAS. Antes estes dois tokens trocavam de cor
conforme a luz — azul/vermelho de dia, vermelho/azul de noite —,
e o mesmo botao escolhido saia vermelho no claro e azul no
escuro. Isso nao e uma regra: e a mesma peca dizendo duas coisas.
O vermelho tem um dono so, e ele ja existia: `--red`, que pinta
gravar, apagar e soltar, e que nunca trocou de tema. Por isso
`--secundaria` SUMIU — o unico trabalho dela era a troca.
E o azul virou DOIS tons, porque sao dois trabalhos. MEDIDO: para
o branco ler em cima do azul, o azul precisa ser escuro; para o
azul ler sobre o fundo escuro, precisa ser claro. No escuro nao
existe tom que faca as duas coisas — este #2563eb da 5,17 com o
branco em cima e so 3,27 escrito sobre o cartao escuro.
--primaria o azul CHEIO: fundo de botao, branco em cima.
--primaria-tinta o azul ESCRITO: texto, icone, contorno, foco.
--primaria-toque o azul cheio enquanto o dedo esta em cima.
--primaria-leve a lavagem atras do que esta escolhido.
O TOQUE MUDA DE LADO CONFORME O TEMA, e isso e de proposito: no
claro ele escurece (o papel e claro, entao afundar e o gesto); no
escuro ele clareia, porque num fundo preto um botao que escurece
ao ser tocado parece DESLIGADO, e nao apertado.
Aqui no claro os dois sao o mesmo tom, porque sobre papel branco
um so da conta (5,17 nos dois sentidos). No escuro eles se
separam; ver o bloco de la. */
--primaria: #2563eb;
--primaria-tinta: #2563eb;
--primaria-toque: #1d4ed8;
--primaria-leve: #eef3ff;
/* O VERMELHO DECISIVO, com a mesma estrutura do azul.
O cheio e o toque ja existiam com outro nome, no mural.css:
`--red` e `--red-deep`, iguais nos dois temas porque um botao de
gravar nao e uma coisa de dia e outra de noite. O que faltava era
o par de baixo — escrever vermelho sobre papel branco e sobre
cartao preto nao e a mesma cor, exatamente como no azul. */
--red-tinta: #d61f2b; /* sobre o papel branco: 5,13 */
--red-leve: #fde8ea;
}
/* ---------- 1. Fundo e grade ---------- */
body { background: var(--fundo); }
#board {
background-color: var(--fundo);
background-image:
linear-gradient(var(--linha-forte) .1vh, transparent .1vh),
linear-gradient(90deg, var(--linha-forte) .1vh, transparent .1vh),
linear-gradient(var(--linha) .08vh, transparent .08vh),
linear-gradient(90deg, var(--linha) .08vh, transparent .08vh);
}
.panel::after { display: none; }
/* ---------- 2. Tipografia mais leve ---------- */
.panel__title {
font-family: 'Outfit', system-ui, sans-serif;
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.06;
}
.panel__title small { color: var(--suave); font-weight: 400; }
.panel__num {
color: transparent;
-webkit-text-stroke: .16vh #e3e9f1;
font-family: 'Outfit', sans-serif;
font-weight: 300;
letter-spacing: 0;
}
.card h3, .pop-menu__t, .tl__date, .bar__cap b, .mapa-no--raiz .mapa-txt {
font-family: 'Outfit', sans-serif; font-weight: 800; letter-spacing: -.02em;
}
/* ---------- 3. Cartões do conteúdo ---------- */
.card {
border: .1vh solid var(--borda);
border-radius: var(--raio);
box-shadow: var(--sombra-1);
}
body.modo-nav .card:hover { box-shadow: var(--sombra-2); }
.postit { box-shadow: var(--sombra-2); }
.postit::after { border-color: transparent transparent rgba(0,0,0,.06) transparent; }
.polaroid { box-shadow: var(--sombra-2); }
.sticker { box-shadow: var(--sombra-2); border-width: .35vh; }
.tbl thead th { border-bottom: .1vh solid var(--borda); font-weight: 800; }
.tbl tbody td { border-bottom: .08vh solid var(--borda); }
.tbl tbody tr:nth-child(odd) { background: #fafbfd; }
.check__box { border-width: .18vh; border-color: #d7dee8; border-radius: .6vh; }
/* ---------- 4. Barra de ferramentas ---------- */
/* ---------- O VAO ENTRE DOIS ICONES DE BARRA MORA AQUI ----------
"Confira o espacamento de todos os icones nas barras de
ferramentas; tudo deve ter o mesmo espaco de distancia, para ficar
justo e ganhar mais espaco."
Estava medido assim: a barra de baixo com .5vh, a de cima com .4,
a fila de paginas por dentro com .5 outra vez, e por cima disso
seis margens avulsas espalhadas — a casa empurrando .4 para a
direita, o "+" .4 para a esquerda, a lixeira e o formato .2 cada,
e cada tracinho separador .2 de cada lado. Nenhuma estava errada
sozinha; juntas, o vao ia de 3,6px a 10,9px na mesma barra, e o
buraco em volta do numero da pagina era tres vezes maior que o
resto.
E assim que acontece: cada ajuste foi feito olhando so para o
vizinho dele. Com o numero repetido em cinco lugares, acertar um
vao e desacertar outro e a mesma tecla.
Agora o numero e UM. Quem precisar de mais ar entre dois grupos
usa o separador, que existe exatamente para isso. */
:root { --vao-barra: .4vh; }
/* O amarelo com que todo papel nasce. O mesmo numero vive no
`AMARELO_DO_PAPEL` do objetos.js, que e quem pinta a peca de
verdade; aqui ele serve as duas caixas que o CSS desenha sozinho —
a pastilha do menu e o Lembrete sem cor escolhida. */
:root { --amarelo-papel: #f2e08a; }
/* ---- AS DUAS BARRAS, NO MESMO DESENHO ----
Elas tinham cada uma a sua cor cravada: branco de fundo nas duas,
cinza-azulado nos icones de uma, chips cinzas na outra. Nada disso
acompanhava o tema — no escuro era preciso uma regra nova para cada
cor, e e por isso que elas existiam as dezenas.
Agora as duas leem os mesmos tokens: papel de fundo, tinta no icone,
`--linha` ao passar o mouse, e a TINTA CHEIA no botao ligado. Trocar
o tema deixou de pedir regra nova. */
#toolbar {
background: var(--paper);
border: .1vh solid var(--borda);
border-radius: 10vh;
box-shadow: var(--sombra-2);
padding: 1vh 1.4vh;
gap: var(--vao-barra);
}
.tool {
background: transparent; color: var(--ink);
border-radius: 50%;
}
.tool:hover { background: var(--linha); }
.tool.on { background: var(--ink); color: var(--paper); box-shadow: none; }
.tool.on.tool--pen { background: var(--pen-color, var(--ink)); }
/* O TRIÂNGULO DE QUEM TEM GAVETA (#372). Desenho e Formas guardam mais
ferramentas, que só apareciam ao passar o mouse ou ao segurar — e no
toque, só ao segurar. O triângulo no canto diz "tem mais aqui", e é
onde o toque abre a gaveta (`naSeta`, em ferramentas.js). Na tinta do
botão, para seguir o ligado e o desligado sem regra própria. */
.tool--gaveta::before {
content: ''; position: absolute; right: .5vh; bottom: .5vh;
width: 0; height: 0;
border-left: .65vh solid transparent; border-bottom: .65vh solid currentColor;
opacity: .6; pointer-events: none;
}
/* O NOME AO PASSAR O MOUSE (#372), e no foco do teclado. Só o nome: a
tecla saiu daqui em 25/09 ("pode retirar todos os avisos de
atalhos"), e mora na lista do "?". E o balão daquele tempo aparecia
por trás da gaveta de pincéis, que sobe para o mesmo lugar — por isso
ele espera um instante para nascer, e some quando a gaveta abre
(`.segurando`): nos dois botões de gaveta quem aparece é ela, com os
nomes dentro. */
#toolbar .tool::after {
content: attr(aria-label);
position: absolute; left: 50%; bottom: calc(100% + 1.2vh);
transform: translateX(-50%);
padding: .5vh 1vh; border-radius: .7vh;
background: #1f2733; color: #fff;
font-size: max(1.3vh, 10.4px); font-weight: 600; line-height: 1.3; white-space: nowrap;
opacity: 0; pointer-events: none; z-index: 3;
transition: opacity var(--t-botao) var(--mov-padrao);
}
#toolbar .tool:hover::after,
#toolbar .tool:focus-visible::after { opacity: 1; transition-delay: .35s; }
#toolbar .tool.segurando::after { opacity: 0; transition-delay: 0s; }
.swatch { border-width: .3vh; box-shadow: 0 0 0 .12vh var(--borda); }
.swatch.on { box-shadow: 0 0 0 .32vh var(--ink); }
/* As duas setas so aparecem na cor que ja esta escolhida: elas nao
dizem "esta cor", dizem "clique de novo para trocar esta cor", e
isso so vale depois de escolher. A cor delas e decidida no JS pela
luminancia da propria bolinha. */
.swatch:not(.swatch--roda).armada::after {
content: ''; position: absolute; inset: 27%;
background: var(--marca, #fff);
-webkit-mask: var(--setas) center / contain no-repeat;
mask: var(--setas) center / contain no-repeat;
pointer-events: none;
}
/* AS DUAS SETAS CIRCULARES MORAM NO `:root`, e nao na bolinha de cor.
Elas nasceram la, dizendo "clique de novo para TROCAR esta cor". O
botao de atualizar um ponto de camera para a visao de agora e o
mesmo gesto — trocar o que ja esta guardado pelo que esta na tela
— e pedia o mesmo desenho. Copiar o caminho do SVG daria dois
desenhos iguais hoje e dois desenhos diferentes no dia em que
alguem mexesse num. */
:root {
--setas: url("data:image/svg+xml;utf8,`. Com duas classes ela pesa mais que
`.peca-aba`, entao o cartao de "Adicionar midia" ficava com
`var(--fundo)` enquanto os outros oito ficavam com `var(--linha)`.
MEDIDO nos cinco blocos de uma polaroid: `rgb(246,248,251)` nesse e
`rgb(230,236,244)` em todos os outros. Era so nele porque so ele tem
a classe `peca-acoes`.
Dizer `.peca-corpo` no meio e dizer o que a regra sempre quis dizer:
os botoes do corpo, e nao o que abre o bloco. */
/* `:not(.on)` PORQUE ESTA REGRA NAO FALA DE ESTADO.
Ela descreve o botao do corpo — tamanho, respiro, canto — e tem
duas classes mais um elemento. A regra do marcado, `.cima-op.on`,
tem duas classes. MEDIDO: o marcado saia rgb(244,246,249), igual ao
solto, porque esta aqui passava na frente dele sem querer. */
.peca-acoes .peca-corpo button:not(.on) {
flex: 1 1 auto; font: inherit; font-size: max(1.25vh, 10px); font-weight: 700;
cursor: pointer; padding: .8vh .6vh; border-radius: .8vh;
background: var(--fundo); color: var(--ink); border: .12vh solid var(--borda);
}
/* o que e so forma vale para os dois, marcado ou nao */
.peca-acoes .peca-corpo button.on {
flex: 1 1 auto; font: inherit; font-size: max(1.25vh, 10px); font-weight: 700;
cursor: pointer; padding: .8vh .6vh; border-radius: .8vh;
}
.peca-acoes .peca-corpo button:not(.on):hover { background: var(--linha); }
.peca-acoes .peca-corpo button[hidden] { display: none; }
/* O titulo da barra diz o que esta na mao. */
/* O TITULO DIZ DE QUEM SAO AS PROPRIEDADES. So o nome da peca —
"Forma" — podia ser lido como um botao de criar forma; com a
palavra na frente ele vira o cabecalho que e. */
#peca-titulo, .painel-lado__titulo {
display: block; margin: .4vh 0 1.8vh;
font-size: max(1.8vh, 14.4px); font-weight: 800;
letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
}
/* Os tres que a barra cobriria. A conta e a mesma dos tres, somada ao
afastamento que cada um ja tinha. */
/* A BARRA DE BAIXO NAO SE MEXE, a pedido: "esta deslocando ao abrir a
caixa de ferramentas lateral, nao deve acontecer".
Ela chegou a se recentrar no espaco que sobrava, e foi um erro de
leitura meu: o que se move sem ser pedido tira o lugar aprendido de
onde clicar. Pincel, borracha, cor e zoom moram num ponto fixo da
tela, e abrir um painel nao e motivo para procura-los de novo.
O que continua andando e o que a barra ESCONDERIA por inteiro: o
botao do menu, colado na borda direita. Sair de baixo e diferente
de se recentrar. */
/* Quem anda e o involucro do canto, e nao o botao: ver `#topo-dir`. */
/* ==========================================================
28. Palco centrado quando o zoom abre demais
Com "safe", o navegador centraliza so enquanto o palco cabe na
janela; quando ele passa do tamanho, volta a encostar no inicio,
senao o comeco do mural ficaria fora do alcance da rolagem.
========================================================== */
#board { display: flex; justify-content: safe center; align-items: safe center; }
@media print { #board { display: block; } }
/* ==========================================================
29. Post-it: quatro formatos, dois tamanhos fixos
A largura e a altura vem prontas do JS, entao aqui so mora o
recorte de cada formato. Coracao e marca-paginas usam mascara,
que come a sombra da caixa — por isso a sombra deles e filtro.
========================================================== */
.obj--postit.postit-f {
display: flex; align-items: center; justify-content: center;
text-align: center; overflow: hidden;
}
.obj--postit.postit-f .txt { width: 100%; }
.postit-f--retangular { border-radius: .4vh; }
/* O CANTO É CORTADO DE VERDADE, E NÃO DESENHADO (#172).
Três tentativas até chegar aqui, e vale o registro porque as duas
primeiras pareciam certas:
1. O canto era um degradê que ia a `transparent`. Parecia um
recorte, mas o que aparecia no buraco era BRANCO, e não o que
estava atrás — sobrava alguma coisa pintando ali.
2. Então o papel ficou inteiro e a dobra virou só a aba escura.
"Ponta do post-it com erro, é para ser transparente/sem a
ponta."
3. Agora o `clip-path` RECORTA a peça. Não é tinta, é a silhueta:
fundo, sombra e filhos param no corte, e por ali se vê o mural,
a peça de baixo, o que estiver atrás. Não existe mais "o que
pinta o buraco", porque não há mais buraco — há papel com um
canto a menos.
A SOMBRA PRECISOU TROCAR DE FAMÍLIA junto. `box-shadow` desenha o
retângulo da caixa, e com o canto cortado ela apareceria no vazio,
denunciando a quina que não existe mais. `drop-shadow` segue a
silhueta recortada — é a mesma troca que o coração e o
marca-páginas já faziam, pelo mesmo motivo.
E A ABA FICA, DENTRO DO CORTE. Por um momento ela saiu, no
raciocinio de que com o canto aberto seria uma ponta sobrando no
vazio. Errado: a hipotenusa dela E a linha do corte, e ela cai do
lado de DENTRO do papel. As duas juntas sao a orelha de verdade —
o pedaco dobrado, mais escuro porque mostra o verso da folha, e o
buraco de onde ele saiu, por onde se ve o mural.
A cor deste post-it é escrita no `background` da peça (o coração e
o marca-páginas precisam dela ali, por causa da máscara); aqui o
papel é repintado a partir da variável, e o `!important` passa por
cima do que está escrito na peça. */
/* O PAPEL E O CORTE MORAM NO `::before`, E NÃO NA PEÇA (#279).
`clip-path` e `mask` cortam tudo o que a peça desenha — inclusive o
`filter` dela, que vem antes. A luz de recorte é um `drop-shadow`
que acende do lado de FORA da silhueta: cortada na peça, ela sumia
("luz de recorte não funciona no post-it"), e a sombra de fábrica
destes papéis também nunca apareceu. Com o papel numa camada de
fundo, a peça fica inteira e o filtro dela — luz, recorte, sombra —
segue a silhueta do papel sem ser cortado. O mesmo vale para o
coração, o selo e o papel rasgado, logo abaixo, e para a janela
post-it (estudio.css). `isolation` garante que a camada de fundo
fique atrás do texto, e não atrás da página. */
.postit-f--retangular {
--papel: var(--cor-postit, var(--amarelo-papel));
--dobra: 34px;
background: transparent !important;
isolation: isolate;
box-shadow: none;
filter: drop-shadow(0 .5vh .9vh rgba(20,30,50,.2));
}
.postit-f--retangular::before,
.postit-f--coracao::before,
.mold--selo::before,
.mold--papel::before {
content: ''; position: absolute; inset: 0; z-index: -1;
border-radius: inherit; pointer-events: none;
}
.postit-f--retangular::before {
background: var(--papel);
clip-path: polygon(0 0, 100% 0,
100% calc(100% - var(--dobra)),
calc(100% - var(--dobra)) 100%, 0 100%);
}
/* Canto arredondado nao se corta: a peca ja tem a silhueta dela. */
.obj[data-raio].postit-f--retangular::before { clip-path: none; }
.postit-f--coracao,
.postit-f--marcapaginas { box-shadow: none; filter: drop-shadow(0 .5vh .9vh rgba(20,30,50,.2)); }
.postit-f--coracao .obj-dobra,
.postit-f--marcapaginas .obj-dobra { display: none; }
/* O coração é desenhado pela máscara, no papel e não na peça (#279, ver
o `.postit-f--retangular`). A cor escolhida está no `background` da
peça e em `--cor-postit`; a peça fica transparente e o papel a lê. */
.postit-f--coracao { background: transparent !important; isolation: isolate; }
.postit-f--coracao::before {
background: var(--cor-postit, var(--amarelo-papel));
-webkit-mask-image: var(--mask-coracao); mask-image: var(--mask-coracao);
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.postit-f--coracao {
/* O TEXTO MORA NA PARTE CHEIA DO CORAÇÃO, e não na caixa dele. A
folga era fixa (14px dos lados), e o coração estreita para baixo:
"Quinta / Teste de usabilidade" saía cortado na borda. É o mesmo
retângulo calculado para a forma coração (ver "a folga que cada
forma pede"): 19,4% de cada lado, 22% em cima e 38,5% embaixo.
Em pixels, e um valor por tamanho: porcentagem de padding é medida
pela largura da PÁGINA, e não da peça — medido, virava 391px e a
caixa estourava. Esticar o post-it é escala, e a folga vai junto. */
}
.postit-f--coracao.postit-t--p { padding: 39px 37px 68px; } /* 190 × 176 */
.postit-f--coracao.postit-t--g { padding: 59px 57px 104px; } /* 292 × 270 */
:root {
--mask-coracao: url("data:image/svg+xml;utf8, da caixa, e o unico daqui e justamente
este, no meio do bloco — a excecao existia para um rotulo no topo
que nao existe em nenhuma das duas telas. */
.pop-alinhar .pop-menu__sub {
display: block; margin: 1.2vh 0 .5vh;
font-size: max(1.1vh, 8.8px);
}
/* O SELETOR DE ALVO RESPIRA ANTES DAS ACOES.
MEDIDO no bloco: o vao entre "Selecao | Pagina" e a primeira
fileira de icones era 0,00px, enquanto todas as outras emendas do
mesmo bloco tinham de 3,65 a 6,40px. A fileira ficava grudada em
cima, e as tres linhas de botoes liam como um bloco so.
O vao aqui e maior do que o de dentro da grade DE PROPOSITO:
escolher em relacao a que alinhar e outra pergunta, e nao mais uma
fileira de botoes. O numero e o mesmo do "Distribuir" logo abaixo,
que ja estava certo. */
.alinhar-alvo { display: grid; grid-template-columns: 1fr 1fr; gap: .4vh; margin-bottom: .6vh; }
.alinhar-alvo button {
font: inherit; font-size: max(1.2vh, 9.6px); font-weight: 700; cursor: pointer;
padding: .7vh 0; border-radius: .8vh;
background: var(--fundo); color: var(--ink);
border: .12vh solid var(--borda);
}
.alinhar-alvo button:hover { background: var(--linha); }
.alinhar-alvo button.on { border-color: var(--primaria-tinta); background: var(--primaria-leve); color: var(--primaria-tinta); }
.alinhar-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4vh; }
.alinhar-grade--par { grid-template-columns: repeat(2, 1fr); }
.alinhar-grade button {
display: grid; place-items: center; cursor: pointer;
padding: .6vh 0; border-radius: .8vh;
background: var(--fundo); color: var(--ink);
border: .12vh solid var(--borda);
}
.alinhar-grade button:hover { background: var(--linha); }
/* Desligado e desligado, inclusive para o ponteiro: um botao que
parece apagado mas responde ao clique e pior do que um aceso. */
.alinhar-grade button:disabled { opacity: .4; cursor: default; pointer-events: none; }
.alinhar-grade button svg { width: 2.1vh; height: 2.1vh; display: block; }
.alinhar-nota {
margin: .7vh 0 0; font-size: max(1.05vh, 8.4px);
color: var(--suave); line-height: 1.35;
}
.pop-canto { width: 26vh; }
.pop-canto .campo { margin: 0; font-size: max(1.35vh, 10.8px); }
.canto-atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4vh; margin-bottom: 1.2vh; }
.canto-atalhos button {
font: inherit; font-size: max(1.2vh, 9.6px); font-weight: 700; cursor: pointer;
padding: .7vh 0; border-radius: .8vh;
background: #f5f8fc; border: .1vh solid var(--borda); color: #2b3442;
}
.canto-atalhos button:hover { background: var(--primaria); color: #fff; border-color: var(--primaria); }
/* ==========================================================
48. Formas geometricas
O recorte mora numa classe so, usada tanto pelo corpo colorido
quanto pela midia dentro dele — e pela miniatura do menu, que
por isso nunca fica diferente do que sai no mural.
========================================================== */
.shape--retangulo .shape-corpo, .shape--retangulo .midia, .shape--retangulo .shape-texto { border-radius: 0; }
.shape--elipse .shape-corpo, .shape--elipse .midia, .shape--elipse .shape-texto { border-radius: 50%; }
.shape--triangulo-baixo .shape-corpo, .shape--triangulo-baixo .midia, .shape--triangulo-baixo .shape-texto {
clip-path: polygon(0% 0%, 100% 0%, 50% 100%); border-radius: 0;
}
.shape--pentagono .shape-corpo, .shape--pentagono .midia, .shape--pentagono .shape-texto {
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); border-radius: 0;
}
.shape--hexagono .shape-corpo, .shape--hexagono .midia, .shape--hexagono .shape-texto {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); border-radius: 0;
}
.shape--octogono .shape-corpo, .shape--octogono .midia, .shape--octogono .shape-texto {
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
border-radius: 0;
}
.shape--estrela .shape-corpo, .shape--estrela .midia, .shape--estrela .shape-texto {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
border-radius: 0;
}
.shape--seta .shape-corpo, .shape--seta .midia, .shape--seta .shape-texto {
clip-path: polygon(0% 28%, 58% 28%, 58% 2%, 100% 50%, 58% 98%, 58% 72%, 0% 72%);
border-radius: 0;
}
.shape--trapezio .shape-corpo, .shape--trapezio .midia, .shape--trapezio .shape-texto {
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); border-radius: 0;
}
.shape--paralelogramo .shape-corpo, .shape--paralelogramo .midia, .shape--paralelogramo .shape-texto {
clip-path: polygon(22% 0%, 100% 0%, 78% 100%, 0% 100%); border-radius: 0;
}
.shape--cruz .shape-corpo, .shape--cruz .midia, .shape--cruz .shape-texto {
clip-path: polygon(34% 0%, 66% 0%, 66% 34%, 100% 34%, 100% 66%, 66% 66%,
66% 100%, 34% 100%, 34% 66%, 0% 66%, 0% 34%, 34% 34%);
border-radius: 0;
}
/* o coracao ja tinha mascara feita para o post-it: reaproveitada */
.shape--coracao .shape-corpo, .shape--coracao .midia, .shape--coracao .shape-texto {
-webkit-mask-image: var(--mask-coracao); mask-image: var(--mask-coracao);
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
border-radius: 0;
}
/* ---------- texto em arco ----------
Cada letra e um span posicionado no MESMO ponto — meio da largura,
topo — e girado em torno de um pivo comum. E o angulo que as
espalha pela circunferencia; sem o mesmo ponto de partida, cada uma
giraria em volta de si mesma e a palavra ficaria embaralhada. */
.txt--curvo { position: relative; display: block; }
.txt--curvo .txt-letra {
position: absolute; left: 50%; top: 0;
white-space: pre; will-change: transform;
}
/* ---------- painel de iluminacao ---------- */
.pop-menu--luz { width: 32vh; }
.pop-menu--luz input[type=range] { width: 100%; margin: 0 0 .4vh; accent-color: var(--primaria); }
.pop-menu--luz .cor-forma__t { margin-top: 1vh; }
.luz-acoes { display: flex; gap: .6vh; margin-bottom: 1vh; }
.luz-acoes button {
flex: 1; font: inherit; font-size: max(1.4vh, 11.2px); font-weight: 700; cursor: pointer;
padding: .9vh 0; border-radius: .9vh; line-height: 1;
background: #f3f6fa; border: .12vh solid transparent; color: #2b3442;
}
.luz-acoes button:hover { background: var(--linha); }
.luz-acoes button.on { background: #1f2733; border-color: #1f2733; color: #fff; }
body.noite .luz-acoes button:not(.on):not(:hover) { background: var(--linha); color: var(--ink); }
/* ---------- roteiro de camera, no menu de gravar ---------- */
/* Sem o traço em cima: ele separava o roteiro do resto quando o menu
de gravar era uma coluna corrida. Virou categoria, e a aba já faz
esse papel — o traço ficava solto logo abaixo dela ("em baixo dessa
categoria tem um traço estranho"). Mesma margem das vizinhas. */
.cam-roteiro { margin: 0 0 1vh; }
.cam-lista { display: flex; flex-direction: column; gap: .4vh; margin: .8vh 0; }
/* A LINHA DO PONTO NO DESENHO DA DA LÂMPADA (#363): uma linha só, com a
bolinha, o nome, o zoom e os três botões. */
.cam-item {
display: flex; align-items: center; gap: .5vh;
padding: .4vh .5vh; border-radius: .8vh; background: #f5f8fc;
}
.cam-item.on { background: var(--primaria-leve); box-shadow: inset 0 0 0 .12vh var(--primaria-tinta); }
/* ONDE A CÂMERA ESTÁ (`on`) e QUAL PINO ESTÁ NA MÃO (`escolhido`) são
duas coisas, e podem estar no mesmo item ou em itens diferentes —
por isso marcas diferentes, e não a mesma (#323). O `on` pinta o
fundo; o escolhido ganha uma barra na borda, que soma às duas sem
disputar com ela. */
.cam-item.escolhido { box-shadow: inset .35vh 0 0 0 var(--primaria); }
.cam-item.on.escolhido {
box-shadow: inset .35vh 0 0 0 var(--primaria), inset 0 0 0 .12vh var(--primaria-tinta);
}
.cam-bolinha {
flex: none; width: max(2.6vh, 21px); height: max(2.6vh, 21px); border-radius: 50%;
display: grid; place-items: center; color: #fff;
font-weight: 800; font-size: max(1.3vh, 10.4px);
/* é botão (#363): ela põe o ponto na mão */
border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.cam-bolinha:hover { box-shadow: 0 0 0 .2vh var(--primaria-leve); }
.cam-bolinha:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 2px; }
/* O % ENTRA NA CAIXA, como no zoom da barra de baixo.
Ele morava fora, solto ao lado do campo, e ai o numero e a sua
unidade pareciam duas coisas: a caixa dizia "161" e o "%" era um
rotulo vizinho. Agora a MOLDURA e do rotulo inteiro e o campo por
dentro nao tem borda — o que se ve e uma caixa escrito "161 %", que
e o que o zoom da barra ja fazia. */
.cam-zoom {
flex: 0 0 7.4vh; display: flex; align-items: center; gap: .3vh; min-width: 0;
padding: .4vh .6vh; border-radius: .6vh; border: .12vh solid var(--borda);
background: #fff;
}
.cam-zoom input {
width: 100%; min-width: 0; font: inherit; font-size: max(1.4vh, 11.2px);
padding: 0; border: 0; background: none; color: #14161a;
}
.cam-zoom input:focus { outline: none; }
.cam-zoom span { font-size: max(1.3vh, 10.4px); color: var(--suave); flex: none; }
/* OS BOTOES DA LINHA TEM TODOS A MESMA MEDIDA, e ela cresceu.
Eram 2,4vh uns e 2,6vh outros, com glifos de 1,3 a 1,6: quatro
botoes de tamanhos parecidos mas nao iguais, todos pequenos
demais para o dedo e para o olho. "Aumentar o tamanho dos icones,
esta muito pequeno."
O numero esta num lugar so, para os quatro nao voltarem a
divergir. */
:root { --cam-botao: 3.2vh; }
.cam-ir, .cam-tirar {
flex: none; width: var(--cam-botao); height: var(--cam-botao);
border: 0; border-radius: .7vh; cursor: pointer;
background: var(--linha); color: var(--ink); line-height: 1;
font-size: max(1.8vh, 14.4px); display: grid; place-items: center; padding: 0;
}
.cam-ir:hover { background: var(--primaria); color: #fff; }
.cam-tirar:hover { background: var(--red); color: #fff; }
.cam-nome {
flex: 1 1 6vh; min-width: 0;
border: .12vh solid transparent; border-radius: .6vh;
padding: .2vh .4vh; font: inherit; font-size: max(1.35vh, 10.8px); font-weight: 600;
background: none; color: var(--ink); text-overflow: ellipsis;
}
/* o renomear é no lugar (#363): a caixa só aparece ao passar o mouse e ao escrever */
.cam-nome:hover { border-color: var(--borda); }
.cam-nome:focus { border-color: var(--primaria); background: var(--paper); outline: none; }
.cam-nome::placeholder { color: var(--suave); font-style: italic; }
.cam-aqui {
flex: none; width: var(--cam-botao); height: var(--cam-botao);
border-radius: .7vh; position: relative;
display: grid; place-items: center; cursor: pointer;
background: var(--primaria-leve); color: var(--primaria-tinta); border: 0;
}
/* O desenho e a mascara, e nao um `` dentro: assim ele sai da
mesma fonte que a bolinha de cor usa. */
.cam-aqui::after {
/* 19%: as setas do tamanho do olho, do ir e do tirar ao lado */
content: ''; position: absolute; inset: 19%;
background: currentColor;
-webkit-mask: var(--setas) center / contain no-repeat;
mask: var(--setas) center / contain no-repeat;
}
.cam-aqui:hover { background: var(--primaria); color: #fff; }
/* Os atalhos do roteiro ficam JUNTO DOS BOTOES, e nao so na lista do
"?": quem esta montando um percurso esta olhando para ca, e a
pergunta "como eu ando entre os pontos" nasce aqui. */
/* "Melhorar o tamanho dessas dicas de movimentação": eram 9px, menores
que qualquer outro texto do painel, e as teclas mal se distinguiam
da frase. Agora com a letra das legendas do painel, e cada tecla com
cara de tecla — largura mínima, a borda de baixo mais funda. */
.cam-atalhos {
display: flex; flex-direction: column; gap: .7vh;
margin: 1vh 0 1.2vh; font-size: max(1.45vh, 12px); color: var(--suave);
}
.cam-atalhos span { display: flex; align-items: center; gap: .5vh; }
/* A fileira das oito cores do ponto ocupa a largura toda (ver CORES_DO_MARCO). */
#cores-marco { grid-template-columns: repeat(8, 1fr); }
.cam-atalhos kbd {
display: inline-grid; place-items: center; min-width: max(2.6vh, 21px); height: max(2.6vh, 21px);
font-family: inherit; font-size: max(1.3vh, 11px); font-weight: 800; background: #eef1f6;
border-radius: .5vh; padding: 0 .6vh; color: var(--ink);
box-shadow: inset 0 -.25vh 0 rgba(20, 30, 50, .14);
}
.cam-lados { display: flex; gap: .4vh; margin: .4vh 0 .8vh; }
/* A curva da câmera em quatro quadros iguais, dois por linha: cada um
leva o desenho do ritmo em cima e o nome embaixo (ver
`vestirPreviasDaCurva`). Na fileira corrida os nomes quebravam em
larguras diferentes, e o desenho não teria onde caber. */
.cam-lados--curva { display: grid; grid-template-columns: 1fr 1fr; }
.cam-lados--curva button {
display: flex; flex-direction: column; align-items: center; gap: .5vh;
padding: .8vh .6vh .6vh; white-space: normal;
}
.curva-previa { display: block; width: 100%; height: 2.6vh; overflow: visible; }
.curva-previa__trilho { fill: none; stroke: currentColor; stroke-width: 1.3; opacity: .3; }
.curva-previa__marca { fill: currentColor; opacity: .6; }
/* A câmera só aparece andando; parada, ela cobriria a primeira marca. */
.curva-previa__camera { fill: var(--primaria-tinta); opacity: 0; }
.cam-lados--curva button.on .curva-previa__camera { fill: #fff; }
.cam-lados--curva button.andando .curva-previa__camera { opacity: 1; }
.cam-lados--curva button.andando .curva-previa__marca { opacity: .35; }
.cam-lados button {
flex: 1 1 auto; padding: .5vh .6vh; border-radius: .6vh;
border: .12vh solid var(--borda); background: var(--paper); color: var(--ink);
font-size: max(1.2vh, 9.6px); font-weight: 700; cursor: pointer;
white-space: nowrap;
}
.cam-lados button:hover { background: var(--linha); }
.cam-lados button.on { background: var(--primaria); border-color: var(--primaria); color: #fff; }
/* Apagado: a escolha existe, mas nao vale agora. Some-la seria pior —
o controle piscaria para dentro e para fora do painel. */
.cam-lados.desligado { opacity: .4; pointer-events: none; }
/* A quinta curva, a rampa de tempo (#197), ocupa a linha inteira em vez
de ficar sozinha numa coluna. */
.cam-lados--curva button:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cam-lados--passagem { display: grid; grid-template-columns: repeat(4, 1fr); }
.cam-lados--passagem button, .cam-lados--direcao button { padding-left: .3vh; padding-right: .3vh; }
.cam-lados--direcao button:not([data-direcao="auto"]) { flex: 0 0 3.4vh; font-size: max(1.6vh, 12px); }
/* A FAIXA DA PASSAGEM (#197). Três diagonais de tela de comprido e uma
de alto, com o centro na janela: girada para qualquer lado, ela ainda
cobre a tela inteira, e o `translateX` a leva de fora a fora. O miolo
do degradê é uma diagonal inteira, e por isso cobre a tela no meio da
viagem; a luz é uma faixa mais estreita, que só clareia por onde
passa. Quem escreve tamanho, giro e posição é `prepararFaixa`. Acima
do pincel (80) e abaixo das miras (82). */
.cam-passagem {
position: fixed; left: 50%; top: 50%; z-index: 81;
pointer-events: none; will-change: transform;
}
.cam-passagem--gradiente {
background: linear-gradient(90deg, transparent 0%, var(--fundo) 33.4%, var(--fundo) 66.6%, transparent 100%);
}
.cam-passagem--luz {
background: linear-gradient(90deg, transparent 22%, rgba(255, 238, 205, .22) 40%,
rgba(255, 252, 240, .92) 50%, rgba(255, 238, 205, .22) 60%, transparent 78%);
mix-blend-mode: screen;
}
/* O NOME A ESQUERDA, O NUMERO A DIREITA, A BARRA EMBAIXO — o mesmo
desenho do `.campo` dos paineis, para a barra que ganhou numero
nao inventar um arranjo so dela. */
.cam-faixa {
display: grid; grid-template-columns: 1fr auto; gap: .3vh; margin-bottom: .8vh;
align-items: center;
font-size: max(1.2vh, 9.6px); font-weight: 700; color: var(--suave);
}
.cam-faixa input { width: 100%; grid-column: 1 / -1; }
.cam-faixa > b { color: var(--ink); font-size: max(1.3vh, 10.4px); font-weight: 800;
font-variant-numeric: tabular-nums; }
/* Pôr um ponto numa linha inteira, cheio; os dois que dependem de
haver pontos embaixo, lado a lado (ver o comentário no HTML). */
.cam-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: .6vh; }
.cam-acoes button {
display: flex; align-items: center; justify-content: center; gap: .6vh;
font: inherit; font-size: max(1.4vh, 11.2px); font-weight: 700; cursor: pointer;
padding: .9vh 0; border-radius: .9vh; line-height: 1;
background: #f3f6fa; border: .12vh solid transparent; color: #2b3442;
}
.cam-acoes button:hover:not(:disabled) { background: var(--linha); }
.cam-acoes button:disabled { opacity: .45; cursor: default; }
.cam-acoes__ic { width: 1.5vh; height: 1.5vh; min-width: 12px; min-height: 12px; flex: none; }
.cam-acoes .cam-acoes__por { grid-column: 1 / -1; padding: 1.1vh 0; background: var(--primaria); color: #fff; }
.cam-acoes .cam-acoes__por:hover { background: var(--primaria-toque); }
body.noite .cam-item:not(.on) { background: var(--linha); }
body.noite .cam-acoes button:not(.cor-propria) { background: var(--linha); color: var(--ink); }
/* A LUZ DA CENA USA OS BOTÕES DO ROTEIRO (#301): o cheio para pôr luz,
os claros para os gestos que escolhem uma peça e para o "Apagar
tudo". Numa coluna só: "Deixar uma peça acesa" não cabe em meia
largura. Ligado — a mira esperando a peça, ou as luzes apagadas —, o
botão fica azul, como o escolhido da fileira; o vermelho é só do que
grava. */
.luz-cena-acoes { grid-template-columns: 1fr; margin-bottom: .4vh; }
.luz-cena-acoes button.on,
body.noite .luz-cena-acoes button.on { background: var(--primaria); color: #fff; }
.luz-cena-acoes button.on:hover { background: var(--primaria-toque); }
.luz-cena-acoes button:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 2px; }
/* no cartão das lâmpadas são dois, "Selecionar todas" e "Apagar tudo",
e cabem lado a lado (#344) */
.luz-lista + .luz-cena-acoes { margin-top: .8vh; grid-template-columns: 1fr 1fr; }
/* A contagem no cabeçalho do cartão das lâmpadas (#301): o número que
morava numa frase solta no fim do ambiente. Fica visível com o
cartão dobrado, que é quando ele mais serve. */
.peca-aba__conta {
flex: 0 0 auto; min-width: 2.4vh; padding: .2vh .7vh; border-radius: 99px;
background: var(--linha); color: var(--ink); text-align: center;
font-size: max(1.2vh, 10px); font-weight: 800; font-variant-numeric: tabular-nums;
}
/* ---------- contorno e preenchimento do desenho ---------- */
.vetor-chaves { display: flex; gap: .6vh; }
.vetor-chaves button {
flex: 1; font: inherit; font-size: max(1.4vh, 11.2px); font-weight: 700; cursor: pointer;
padding: .9vh 0; border-radius: .9vh; line-height: 1;
background: #f3f6fa; border: .12vh solid transparent; color: #2b3442;
}
.vetor-chaves button:hover:not(:disabled) { background: var(--linha); }
.vetor-chaves button.on { background: var(--primaria-leve); border-color: var(--primaria-tinta); color: var(--primaria-tinta); }
.vetor-chaves button:disabled { opacity: .45; cursor: default; }
body.noite .vetor-chaves button:not(.cor-propria):not(.on) { background: var(--linha); color: var(--ink); }
/* A opcao escolhida na gaveta fica marcada: sem isso nao da para
saber qual pincel ou qual forma esta na mao sem experimentar. */
.forma-voando.escolhido { background: var(--primaria); color: #fff; }
/* A BANDEJA DOS FUNDOS, que abria embaixo da lua (#289, #294, #299,
#303), saiu no #329: virou a janela de Aparência (ver mais abaixo). */
/* A peca tem a largura do mural e, se contasse para o layout,
esticaria a grade ate estourar o menu. Ancorada no meio e puxada
meio corpo para tras, ela fica centrada em qualquer escala. */
/* Dentro da miniatura e da previa a peca e retrato: nao e objeto do
mural, entao nada do que a faz arrastavel vale ali. */
/* ---------- grade do menu ---------- */
.formas-grade {
display: grid; grid-template-columns: repeat(4, 1fr); gap: .6vh;
margin-bottom: 1.2vh;
}
.forma-op {
padding: .9vh .3vh .6vh; border-radius: 1vh; cursor: pointer;
background: var(--fundo); border: .1vh solid var(--card-borda);
display: flex; flex-direction: column; align-items: center; gap: .5vh;
}
.forma-op i {
font-style: normal; font-size: max(1.05vh, 8.4px); font-weight: 700; color: var(--suave);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.forma-op:hover { background: #fff; border-color: var(--primaria-tinta); transform: translateY(-.2vh); }
.forma-op:hover i { color: var(--primaria-tinta); }
.pop-menu:has(> .formas-grade) { width: 40vh; }
/* O item largo do menu de exportar saiu junto com o HTML interativo,
que era o único a usá-lo: o menu voltou a ser quatro botões em duas
colunas, sem sobra. */
/* QUEM SOBRAR SOZINHO NA ÚLTIMA LINHA OCUPA A LINHA INTEIRA.
São dez itens numa grade de três, então um fica sem par. A regra é
posicional e não nomeia ninguém: `:last-child` que caia na primeira
coluna (`3n+1`) é, por definição, o único da sua linha. Assim ela
continua valendo quando a ordem da lista mudar — e ela já mudou uma
vez, o que era um `class` num botão específico teria ficado no
lugar errado.
Esticado, o desenho muda: a coluna do emoji em cima do rótulo
abriria um vão no meio do botão, então ícone e nome ficam lado a
lado.
Presa ao menu de inserir de propósito: as outras grades têm outras
contagens de coluna, e `3n+1` não quer dizer nada nelas.
`nth-of-type`, e não `nth-child`: desde que a faixa "Papelaria"
entrou na grade, ela também é filha, e contar filhos punha os
botões um passo fora do lugar. Contando por TIPO, a faixa é um `p`
e não entra na conta — que é justamente o que a regra quer saber:
a posição do botão entre os botões. */
#pop-inserir .pop-grid > button:last-of-type:nth-of-type(3n + 1) {
grid-column: 1 / -1;
flex-direction: row; justify-content: center; gap: 1.1vh;
}
#pop-inserir .pop-grid > button:last-of-type:nth-of-type(3n + 1) span {
font-size: max(2.1vh, 16.8px);
}
/* A FAIXA QUE DIZ O NOME DO GRUPO.
Ocupa a linha inteira e não é botão: ela arruma a lista sem cobrar
um clique a mais, que era o preço de esconder os mesmos itens
atrás de uma gaveta. */
/* Um item impar numa grade de dois: sozinho na ultima linha ele fica
metade cheio e metade vazio, e a coluna vazia parece um botao que
faltou carregar. Ocupando a linha, a falta vira largura. */
.pop-grid__largo { grid-column: 1 / -1; }
.pop-grid__faixa {
grid-column: 1 / -1;
margin: .2vh 0 -.2vh; padding: 0 .2vh;
font-size: max(1.2vh, 9.6px); font-weight: 800;
letter-spacing: .14em; text-transform: uppercase;
color: var(--suave);
}
/* ==========================================================
49. Roda de cores em toda paleta
========================================================== */
/* Duas armadilhas moravam aqui. No atalho background, uma cor so
pode vir na ultima camada — cor antes de gradiente invalida a
regra inteira e o navegador descarta tudo, e a roda saia branca.
E .pop-cores .cor vence .cor--roda na especificidade, entao o
seletor precisa ser igualmente especifico. */
.pop-cores .cor--roda {
position: relative; overflow: hidden; cursor: pointer;
background-image:
conic-gradient(#ff0a2b, #ff8a00, #ffd84d, #1fbf6b, #00e5ff,
#2563eb, #a855f7, #ff2bb0, #ff0a2b);
background-color: transparent;
display: inline-block; padding: 0;
}
.pop-cores .cor--roda input {
position: absolute; inset: -20%;
width: 140%; height: 140%;
opacity: 0; cursor: pointer; padding: 0; border: 0;
}
/* O miolo é o fundo: branco no tema claro, preto no escuro (ver
"MIOLO DA RODA", no fim do arquivo). */
.pop-cores .cor--roda::after {
content: ''; position: absolute; inset: 26%;
border-radius: 50%;
background: var(--miolo-roda);
}
/* O "AUTOMATICO" E UMA LINHA, E NAO UMA BOLINHA. Ele nao e uma cor —
e a ausencia de escolha —, e como bolinha ocupava o primeiro lugar
da grade e empurrava as vinte cores para fora das duas fileiras de
dez, deixando a roda sozinha numa terceira. */
/* A SECAO DA COR DO TEXTO RESPIRA ANTES DO ROTULO. MEDIDO: 0,00px
entre a ultima fileira da paleta de cima e o "Cor do texto" — sem
vao nenhum ele encostava nas bolinhas e lia como se estivesse
cortado dentro delas.
O vao fica no rotulo, e nao na paleta debaixo: quem separa duas
secoes e o titulo da segunda, e e ele que tem de ter ar em cima.
O numero e o mesmo do "Distribuir" do Alinhar, que faz o mesmo
trabalho no mesmo painel. */
#cor-texto-peca .cor-forma__t { margin-top: 1.2vh; }
.cor-auto {
display: block; width: 100%; margin-top: .9vh; cursor: pointer;
font: inherit; font-size: max(1.3vh, 10.4px); font-weight: 700;
padding: .7vh 0; border-radius: .8vh;
background: var(--fundo); color: var(--suave); border: .12vh solid var(--borda);
}
.cor-auto:hover { background: var(--linha); color: var(--ink); }
.cor-auto.on { border-color: var(--primaria-tinta); color: var(--primaria-tinta); }
.pop-cores .cor--roda:hover { transform: scale(1.15); }
.pop-cores .cor--roda.on { box-shadow: 0 0 0 .38vh var(--ink); transform: scale(1.1); }
/* ==========================================================
50. Icones das formas com contorno
========================================================== */
.forma-mini {
position: relative; display: block;
/* O lado maior manda: a forma mais larga que alta deita, a mais alta
que larga fica em pe, e as duas cabem no mesmo espaco. `margin:
auto` guarda o centro quando uma delas e menor que a outra, para a
fileira de botoes nao ficar dancando. Sem a proporcao, quadrado e
retangulo eram o mesmo desenho, e circulo e elipse tambem. */
width: calc(3.4vh * var(--prop-l, 1));
height: calc(3.4vh * var(--prop-a, 1));
margin: auto; background: none; border-radius: 0;
}
.forma-mini .shape-corpo { position: absolute; inset: 0; }
.forma-mini__borda { background: #1f2733; }
.forma-mini__cor {
background: var(--cor-forma, #3bb9ff);
inset: .28vh;
}
.forma-op:hover .forma-mini__borda { background: var(--primaria); }
/* a data por extenso nao cabe numa caixinha desse tamanho */
/* ==========================================================
57. Tamanho do texto dentro do objeto
========================================================== */
.pop-fonte { width: 28vh; }
/* OS TRES ANDAM JUNTOS: menos, numero, mais.
Estavam com `space-between`, cada um encostado numa ponta da
largura do painel: para trocar 100% por 110% a mao ia da esquerda
ao centro e do centro a direita, tres viagens para um ajuste so.
Juntos a esquerda, o grupo se opera com o polegar parado — e e um
controle so, que e o que ele sempre foi.
O numero nao traz medida propria: ele e um dos vinte e cinco
campos que se escrevem, e usa a caixa padrao deles (ver
`.num-escrevivel`, no mural.css). A margem da caixa sai aqui
porque quem separa, nesta linha, e o `gap`. */
.fonte-linha {
display: flex; align-items: center; justify-content: flex-start; gap: .8vh;
margin-bottom: 1vh;
}
.fonte-linha .num-escrevivel { margin: 0; }
.fonte-linha button {
width: 3.2vh; height: 3.2vh; border-radius: 50%; cursor: pointer;
background: #f3f6fa; border: .1vh solid var(--borda); color: #2b3442;
font-size: max(2vh, 16.0px); font-weight: 800; line-height: 1; display: grid; place-items: center;
}
.fonte-linha button:hover { background: var(--primaria); color: #fff; border-color: var(--primaria); }
.pop-fonte input[type="range"] { width: 100%; accent-color: var(--primaria); cursor: pointer; }
.fonte-atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4vh; margin-top: 1.2vh; }
.fonte-atalhos button {
font: inherit; font-size: max(1.2vh, 9.6px); font-weight: 700; cursor: pointer;
padding: .7vh 0; border-radius: .8vh;
background: #f5f8fc; border: .1vh solid var(--borda); color: #2b3442;
}
.fonte-atalhos button:hover { background: var(--primaria); color: #fff; border-color: var(--primaria); }
/* Posição do texto na forma (#131): a largura e a altura lado a lado,
embaixo do nome da fonte. */
.texto-na-forma {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
/* o vão do meio maior que o de dentro: são duas perguntas, e não seis botões */
gap: .6vh 1.6vh; margin: 0 0 1.4vh;
}
.texto-na-forma__rot {
flex: 1 0 100%; font-size: max(1.5vh, 12.0px); font-weight: 600; color: var(--suave);
}
/* Metade da largura para cada eixo, e os botões dividindo a metade:
do tamanho dos atalhos de baixo, e não miúdos no canto. */
.texto-na-forma .grupo-btn { flex: 1 1 0; gap: .5vh; }
.texto-na-forma .grupo-btn button { flex: 1; width: auto; height: max(3.8vh, 30px); }
.texto-na-forma .grupo-btn svg { width: max(2.2vh, 17.6px); height: max(2.2vh, 17.6px); display: block; }
/* ==========================================================
========================================================== */
/* ==========================================================
60. Roda de cores do pincel, na barra
========================================================== */
.swatch--roda {
position: relative; overflow: hidden; cursor: pointer;
background-image:
conic-gradient(#ff0a2b, #ff8a00, #ffd84d, #1fbf6b, #00e5ff,
#2563eb, #a855f7, #ff2bb0, #ff0a2b);
background-color: transparent;
display: inline-block; padding: 0;
}
.swatch--roda input {
position: absolute; inset: -20%; width: 140%; height: 140%;
opacity: 0; cursor: pointer; padding: 0; border: 0;
}
.swatch--roda::after {
content: ''; position: absolute; inset: 30%;
border-radius: 50%; background: var(--miolo-roda);
}
/* ==========================================================
62. Mapa mental: apagar tópico
========================================================== */
.mapa-menos {
position: absolute; right: -1vh; top: -1vh;
width: 2.4vh; height: 2.4vh; border-radius: 50%;
background: #fff; color: #9aa3b0; border: .12vh solid var(--borda);
font-size: max(1.6vh, 12.8px); line-height: 1; cursor: pointer;
display: grid; place-items: center;
opacity: 0; transition: opacity var(--t-botao) var(--mov-padrao), background var(--t-botao) var(--mov-padrao), color var(--t-botao) var(--mov-padrao);
}
.mapa-no:hover .mapa-menos { opacity: 1; }
.mapa-menos:hover { background: #e8232a; color: #fff; border-color: #e8232a; }
/* ==========================================================
63. Cantos em forma recortada
O truque de desfocar e puxar o contraste arredondava as quinas,
mas o filtro pega o elemento inteiro — a foto de dentro virava
mancha junto. Nao ha como isentar o filho: filtro no pai vale
para toda a subarvore.
Agora o recorte em si nasce arredondado: o poligono e reescrito
como caminho, trocando cada quina por uma curva. Ver
recorteArredondado() em objetos.js.
========================================================== */
/* ==========================================================
64. Mapa mental: quatro direções para ramificar
Os botões só aparecem no tópico sob o mouse — quatro por nó,
sempre visíveis, viraria um mapa de bolinhas azuis.
========================================================== */
/* Escondido e escondido, inclusive para o ponteiro: `opacity: 0` apaga
o botao mas nao o tira do caminho, e estes tambem se projetam para
fora do topico. Mesma armadilha da caixinha de tarefas, e a mesma
cura — as duas propriedades na mesma regra, para nunca discordarem. */
.mapa-mais { opacity: 0; pointer-events: none; transition: opacity var(--t-botao) var(--mov-padrao), transform var(--t-botao) var(--mov-padrao), background var(--t-botao) var(--mov-padrao); }
.mapa-no:hover .mapa-mais, .mapa-no:focus-within .mapa-mais { opacity: 1; pointer-events: auto; }
.mapa-mais--cima, .mapa-mais--baixo {
left: 50%; margin-left: -1.1vh; top: auto; margin-top: 0;
}
.mapa-mais--cima { top: -1.1vh; }
.mapa-mais--baixo { bottom: -1.1vh; }
.mapa-mais { background: var(--cor-mapa, #2f6bff); }
/* ==========================================================
Cadeado: o que está travado não responde
==========================================================
O `cadeiaDe` já tira o objeto de tudo que depende de escolhê-lo.
Isto aqui é o segundo portão, e existe por causa do texto: o
`contenteditable` aceita digitação sem passar por seleção nenhuma,
então sem `pointer-events` daria para reescrever um texto travado. */
.obj[data-travado], .obj[data-preso] { pointer-events: none; user-select: none; }
/* ==========================================================
Preenchimento da forma: gradiente e transparência
Fica embaixo da paleta de sempre, e não no lugar dela — a cor
chapada continua sendo o caminho curto.
========================================================== */
.cor-forma {
/* Largura fixa, igual à da paleta acima — e agora pela MESMA medida,
e não por um número copiado. Sem largura fixa quem mandava no
menu era a linha mais larga do momento (a de graus é maior que a
do botão de mover): o menu encolhia no radial, a paleta encolhia
junto, e a altura mudava por tabela. Era o resto do "muda de
tamanho".
O `24vh` do fallback é a medida antiga, para o painel de texto —
que usa esta mesma classe fora do menu flutuante — não ficar sem
largura nenhuma. Ali o `--txt` a substitui por `auto`. */
width: var(--larg-paleta, 24vh);
margin-top: 1.4vh; padding-top: 1.4vh;
border-top: .12vh solid var(--borda);
}
/* No painel de texto a caixa é filha de uma coluna que já tem
largura própria: a medida fixa de lá faria uma coluna dentro da
outra. */
.cor-forma--txt { width: auto; }
/* TIPO E CONTROLES ACOMPANHAM AS AMOSTRAS.
Com as bolinhas de cor maiores, o que vinha embaixo parecia miúdo —
letra de 9px e botão de 28px de altura sob um círculo de 30px. As
medidas daqui para baixo subiram um degrau, na mesma proporção, e
não até o tamanho das amostras: um rótulo de seção não quer ter o
tamanho de um alvo de clique. */
.cor-forma__t {
font-size: max(1.4vh, 11.2px); font-weight: 700; color: var(--suave);
text-transform: uppercase; letter-spacing: .06vh;
margin: 0 0 .9vh; display: flex; justify-content: space-between; align-items: baseline;
}
.cor-forma__t b { font-variant-numeric: tabular-nums; color: var(--ink); }
.cor-forma__modo { display: flex; gap: .7vh; margin-bottom: 1.3vh; }
.cor-forma__modo button {
flex: 1; font: inherit; font-size: max(1.5vh, 12px); font-weight: 600; cursor: pointer;
padding: 1.05vh .5vh; border-radius: 1vh; line-height: 1;
background: #f3f6fa; border: .12vh solid transparent; color: #2b3442;
}
.cor-forma__modo button:hover { background: var(--linha); }
.cor-forma__modo button.on { background: var(--primaria-leve); border-color: var(--primaria-tinta); color: var(--primaria-tinta); }
.cor-forma__grads { display: flex; gap: .7vh; margin-bottom: 1.3vh; }
.cor-forma__grads button {
flex: none; min-width: 5.2vh; font: inherit; font-size: max(1.5vh, 12px); cursor: pointer;
padding: .9vh .7vh; border-radius: 1vh; line-height: 1;
background: #f3f6fa; border: .12vh solid transparent; color: #2b3442;
}
.cor-forma__grads button:hover { background: var(--linha); }
.cor-forma__grads button.on { background: var(--primaria-leve); border-color: var(--primaria-tinta); color: var(--primaria-tinta); }
/* As paradas do gradiente: amostras clicáveis, a ativa com anel.
O "x" é ETIQUETA por cima da amostra, e não irmã dela. Como irmã,
a primeira — que não tem "x" — encurtava e a fila saía desalinhada:
era o "as duas primeiras parecem diferentes na ordem". Por cima,
toda amostra ocupa o mesmo espaço, com ou sem o "x". */
.cor-paradas { display: flex; align-items: center; gap: .6vh; flex-wrap: wrap; margin-bottom: 1vh; }
.parada {
position: relative;
width: 3.4vh; height: 3.4vh; min-width: 3.4vh; border-radius: 50%; cursor: pointer;
border: .12vh solid rgba(0,0,0,.12); box-shadow: none; padding: 0;
}
.parada.on { box-shadow: 0 0 0 .28vh var(--primaria-tinta); }
.parada--mais {
background: #f3f6fa; color: #6b7684; font: inherit; font-size: max(1.6vh, 12.8px);
line-height: 1; display: grid; place-items: center;
}
.parada__tirar {
position: absolute; top: -.5vh; right: -.5vh;
width: 1.6vh; height: 1.6vh; border-radius: 50%; cursor: pointer; padding: 0;
background: #fff; color: #9aa3b0; border: .1vh solid var(--borda);
font-size: max(1.1vh, 8.8px); line-height: 1; display: grid; place-items: center;
opacity: 0; transition: opacity var(--t-botao) var(--mov-padrao);
}
.parada:hover .parada__tirar, .parada.on .parada__tirar { opacity: 1; }
.parada__tirar:hover { background: #ffe6e6; color: #c81e24; border-color: #ffc9c9; }
/* O ângulo em graus, no lugar das quatro setas. */
/* As três peças desta linha têm a MESMA altura de propósito: o
campo de graus e o botão de mover o centro se revezam na mesma
vaga, e alturas diferentes fariam o menu pular ao alternar entre
linear e radial. */
.cor-graus, .cor-centro, .cor-forma__grads button { min-height: 3.6vh; }
.cor-graus {
flex: 1; display: flex; align-items: center; gap: .3vh;
background: #f3f6fa; border: .12vh solid transparent; border-radius: .8vh;
padding: 0 .8vh;
}
.cor-graus:focus-within { border-color: var(--primaria-tinta); background: var(--primaria-leve); }
.cor-graus input {
width: 100%; min-width: 0; border: 0; background: none; outline: none; padding: 0;
font: inherit; font-size: max(1.35vh, 10.8px); font-weight: 600; color: var(--ink);
font-variant-numeric: tabular-nums;
}
.cor-graus span { color: var(--suave); font-size: max(1.3vh, 10.4px); }
.cor-centro {
flex: 1; font: inherit; font-size: max(1.2vh, 9.6px); font-weight: 600;
cursor: pointer; padding: 0 .7vh; border-radius: .8vh;
background: #f3f6fa; border: .12vh solid transparent; color: #2b3442;
}
.cor-centro:hover { background: var(--linha); }
.cor-centro.on { background: var(--primaria-leve); border-color: var(--primaria-tinta); color: var(--primaria-tinta); }
/* Enquanto se move o centro, o ponteiro diz o que vai acontecer e
nada mais na página responde ao arrasto. */
body.movendo-centro .obj--shape { cursor: crosshair; }
body.noite .cor-graus { background: #23232b; }
body.noite .cor-centro:not(.on):not(:hover) { background: var(--linha); color: var(--ink); }
body.noite .parada__tirar:not(:hover) { background: var(--paper); border-color: var(--borda); }
#cor-paradas-dica { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .75; }
body.noite .cor-forma__modo button:not(.cor-propria):not(.on) { background: var(--linha); color: var(--ink); }
body.noite .cor-forma__modo button:not(.cor-propria):hover { background: var(--borda); }
body.noite .parada--mais { background: #23232b; color: #9c9caa; }
/* TODAS as barras dos painéis, na mesma regra de propósito: de fora
dela, uma barra fica com a largura padrão que o navegador dá a um
range — bem menor — e termina antes das outras. Barra nova entra
aqui, e não numa regra própria. */
.cor-forma input[type=range] {
width: 100%; margin: 0;
/* A barra tambem cresceu: uma linha de 16px embaixo de amostras de
30px era o degrau mais visivel do painel. */
height: 2.2vh; accent-color: var(--primaria);
}
/* O mesmo no painel de texto, e de uma vez para todas as barras dele:
as de distorção e a de espaço entre letras carregavam a margem que
o navegador dá a um range por padrão, e passavam 2px à direita do
próprio contêiner. Ao lado das barras novas isso vira degrau. */
#pop-texto input[type=range] { width: 100%; margin: 0; }
body.noite .cor-forma__grads button:not(.cor-propria):not(.on) { background: var(--linha); color: var(--ink); }
body.noite .cor-forma__grads button:not(.cor-propria):hover { background: var(--borda); }
/* ==========================================================
Mover páginas com a mão
========================================================== */
.fm-mao {
width: 100%; margin-top: 1.1vh;
display: flex; align-items: center; justify-content: center; gap: .7vh;
font: inherit; font-size: max(1.4vh, 11.2px); font-weight: 700;
padding: 1.1vh 0; border-radius: 1vh; cursor: pointer;
background: #f3f6fa; color: #2b3442; border: .12vh solid var(--borda);
}
.fm-mao:hover { background: #e9eef6; }
.fm-mao.on { background: var(--primaria-leve); border-color: var(--primaria-tinta); color: var(--primaria-tinta); }
.fm-mao__icone { font-size: max(1.6vh, 12.8px); line-height: 1; }
/* Com a mão ligada, a página inteira vira alça — e nada dentro dela
responde ao mouse, senão arrastar um post-it moveria o objeto em
vez da página. */
body.movendo-paginas .panel { cursor: grab; }
body.movendo-paginas .panel * { pointer-events: none !important; }
body.movendo-paginas .panel.arrastando-pagina { cursor: grabbing; }
body.movendo-paginas .panel.arrastando-pagina .guia__quadro {
outline-color: var(--primaria-tinta);
}
/* o respiro só faz sentido com um formato escolhido */
/* margens internas podem ser desligadas sem perder o quadro */
body.sem-margem .guia__margem { display: none; }
/* A FONTE EM LINHAS (ver o comentário no HTML): Espessura e Tamanho
lado a lado, com o rótulo em cima; os três grupos de botões numa
linha só, cada botão do mesmo tamanho. */
#pop-texto-fonte .fonte-par {
display: grid; grid-template-columns: 1fr 1fr; gap: 1vh; align-items: end; margin-bottom: 1.2vh;
}
#pop-texto-fonte .fonte-par .campo { margin-bottom: 0; min-width: 0; }
#pop-texto-fonte .fonte-par select,
#pop-texto-fonte .fonte-par .passo { height: 4.2vh; min-height: 32px; margin-top: .6vh; }
#pop-texto-fonte .fonte-par select { width: 100%; padding: 0 .8vh; }
#pop-texto-fonte .fonte-par .passo input,
#pop-texto-fonte .fonte-par .passo button { height: 100%; padding-top: 0; padding-bottom: 0; }
#pop-texto-fonte .fonte-botoes {
display: grid; grid-template-columns: repeat(3, 1fr); gap: .8vh; margin-bottom: 1.4vh;
}
#pop-texto-fonte .fonte-botoes .grupo-btn { gap: .3vh; min-width: 0; }
#pop-texto-fonte .fonte-botoes .grupo-btn button {
flex: 1 1 0; width: auto; min-width: 0; height: 3.8vh; min-height: 30px;
font-size: max(1.6vh, 12.8px);
}
#pop-texto-fonte .fonte-botoes svg { width: 1.9vh; height: 1.9vh; min-width: 14px; min-height: 14px; }
/* O BLOCO FIXO DO TEXTO (#377): sem aba, sempre aberto. O título tem a
cara do cabeçalho de uma aba aberta — o mesmo ícone, a mesma letra —,
sem a seta e sem o clique, e o corpo tem o respiro do corpo aberto. */
.peca-bloco--fixo > .peca-fixo__titulo {
display: flex; align-items: center; gap: 1.1vh; padding: 1.2vh 1.3vh;
border-radius: 1.1vh 1.1vh 0 0; background: var(--linha);
}
.peca-bloco--fixo > .peca-fixo__titulo strong {
font-size: max(1.25vh, 10px); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.peca-bloco--fixo > .peca-corpo { padding: 1.4vh 1.3vh; border-top: .1vh solid var(--card-borda); }
#pop-texto-fonte .pop-cores { margin-bottom: 1.4vh; }
/* As quatro escolhas do estilo da letra, cada uma com a própria cara. */
.txt-estilos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6vh; margin: .6vh 0 1.2vh; }
.txt-estilos button {
display: flex; flex-direction: column; align-items: center; gap: .4vh; min-width: 0;
padding: .8vh .3vh .6vh; border: .12vh solid var(--borda); border-radius: .9vh;
background: var(--paper); color: var(--ink); cursor: pointer;
font: inherit; font-size: max(1.15vh, 9.6px); font-weight: 700;
}
.txt-estilos button:hover { background: var(--linha); }
.txt-estilos button[aria-pressed="true"] {
border-color: var(--primaria-tinta); background: var(--primaria-leve);
box-shadow: 0 0 0 .1vh var(--primaria-tinta);
}
.txt-estilos__arte {
display: flex; align-items: center; justify-content: center; height: 3vh;
font-family: 'Outfit', sans-serif; font-size: max(2.3vh, 18px); font-weight: 900; line-height: 1;
}
.txt-estilos__arte--recortada i {
font-style: normal; font-size: .8em; padding: .05em .14em; margin: 0 .02em;
font-family: Georgia, serif; background: #e3cfa5; color: #14161a; transform: rotate(-4deg);
}
.txt-estilos__arte--recortada i + i { background: #1f2733; color: #fff; transform: rotate(5deg); font-family: 'Archivo Black', sans-serif; }
.txt-estilos__arte--vazada { color: transparent; -webkit-text-stroke: .1vh var(--ink); -webkit-text-stroke-width: max(.14vh, 1.2px); }
.txt-estilos__arte--contorno { color: var(--ink); -webkit-text-stroke: max(.2vh, 1.6px) var(--red); paint-order: stroke fill; }
.txt-estilo-opcoes[hidden] { display: none; }
.campo-check {
display: flex; align-items: center; gap: .9vh; cursor: pointer;
font-size: max(1.4vh, 11.2px); font-weight: 700; margin-bottom: 1.2vh;
}
.campo-check input { width: 1.7vh; height: 1.7vh; accent-color: var(--primaria); flex: none; }
/* Os dois botoes dos efeitos do texto: largura inteira, um embaixo do
outro, como o "Zerar inclinação" da distorcao. */
.txt-efeito-bt { display: block; width: 100%; margin-top: .8vh; }
.txt-efeito-bt:disabled { opacity: .45; cursor: not-allowed; }
/* ---- tamanho exato ---- */
.campo-medida { display: flex; align-items: center; gap: .5vh; margin-bottom: 1.2vh; }
.campo-medida input {
width: 7vh; font: inherit; font-size: max(1.4vh, 11.2px); text-align: center;
padding: .7vh .4vh; border-radius: .8vh;
background: var(--fundo); color: var(--ink); border: .12vh solid var(--borda);
}
.campo-medida input:focus { outline: none; border-color: var(--primaria-tinta); }
.campo-medida b { font-weight: 600; color: var(--suave); font-size: max(1.3vh, 10.4px); }
.campo-medida i { font-style: normal; color: var(--suave); font-size: max(1.25vh, 10.0px); }
.campo-medida button {
margin-left: auto; font: inherit; font-size: max(1.3vh, 10.4px); font-weight: 700;
cursor: pointer; padding: .7vh 1.3vh; border-radius: .8vh;
background: var(--red); color: #fff; border: none;
}
.campo-medida button:hover { background: var(--red-deep); }
/* ==========================================================
Modo noturno
==========================================================
Só os tokens mudam. Cada regra do mural já lê daqui, então
trocar a raiz vira tema novo sem tocar em nenhum componente.
O papel não é preto puro: #191817 contra texto claro cansa
menos que o contraste máximo, e ainda deixa a sombra aparecer.
========================================================== */
/* O ESCURO DEIXOU DE SER MARROM.
Ele era quente — #191817 de fundo, linhas em #2a2825, cinza da
letra em #b6b0a6 —, e cor quente de interface briga com a cor das
PECAS: ao lado de um post-it amarelo o fundo parecia sujo, e ao
lado do azul da selecao parecia esverdeado. O novo e neutro e um
pouco frio, que e o que deixa cor de peca parecer cor de peca.
O papel nao e preto puro pelo mesmo motivo de antes: #1d1c22 contra
texto claro cansa menos que o contraste maximo, e ainda deixa a
sombra aparecer. */
body.noite {
--ink: #f0eeea;
--ink-soft: #9c9caa;
--grid: #23232b;
--grid-bold: #2d2c36;
--paper: #1d1c22;
--fundo: #141318;
--linha: #23232b;
--linha-forte: #2d2c36;
--suave: #9c9caa; /* claro o bastante para titulo de menu ler */
--borda: #2d2c36;
--ponto: #343340; /* as bolinhas do fundo, tom discreto */
/* No escuro quem separa e o degrau, e nao a sombra: ver o comentario
dos tres no tema claro. */
--trilho: #17161c;
--card-borda: #2d2c36;
--card-sombra: none;
/* Os dois azuis se separam aqui: o cheio tem que aguentar branco em
cima (4,50) e o escrito tem que ler sobre o cartao (8,30). O
vermelho nao aparece nesta lista porque ele e `--red`, um so,
igual nos dois temas. */
--primaria: #2f6bff;
--primaria-tinta: #8fb6ff;
--primaria-toque: #3d79ff; /* clareia: branco em cima ainda da 3,91 */
--primaria-leve: #24375c; /* separa 1,32 da linha vizinha; a tinta em cima da 5,80 */
--red-tinta: #ff6b73; /* sobre o cartao: 6,12 */
/* Subiu de #3a1d20: a lavagem antiga separava 1,11 da barra, que
e quase nada — o Gravar quase nao se via como botao. Em
#52262d ela separa 1,35 e o branco em cima ainda da 12,55. */
--red-leve: #52262d;
--sombra-1: 0 .2vh .8vh rgba(0,0,0,.45);
--sombra-2: 0 .8vh 2.4vh rgba(0,0,0,.55), 0 .2vh .6vh rgba(0,0,0,.4);
--sombra-3: 0 2vh 5vh rgba(0,0,0,.6), 0 .4vh 1.2vh rgba(0,0,0,.45);
--shadow-sm: 0 .18vh .5vh rgba(0,0,0,.5);
--shadow-md: 0 .9vh 2.2vh rgba(0,0,0,.55), 0 .2vh .5vh rgba(0,0,0,.4);
--shadow-lg: 0 2vh 4.5vh rgba(0,0,0,.6), 0 .4vh 1vh rgba(0,0,0,.45);
color: var(--ink);
}
/* No escuro o fundo deixa de ser grade e vira bolinhas. Linha sobre
preto vira uma teia que briga com o desenho; ponto marca a mesma
malha e desaparece quando não se olha para ele.
O gradiente radial é uma bolinha por célula, repetida pelo
background-size — mais barato que uma imagem e acompanha o vh
como o resto do mural. */
body.noite #board { background-color: #141318 !important; }
body.noite { background: #141318; }
/* Superfícies que nasceram brancas no CSS claro. Trocar o token não
alcança quem escreveu #fff na mão, então cada uma é nomeada.
Foram levantadas medindo a página no modo escuro e listando tudo
que continuou com fundo claro — não de memória. */
/* `.panel` NAO entra aqui. Eu a tinha jogado no lote das superficies
de chrome ao montar o tema escuro, e a pagina virou uma caixa
opaca por cima do fundo. No tema claro ela sempre foi
transparente, com a grade aparecendo atraves — agora as duas se
comportam igual: quem marca a pagina e a linha-guia, e nao um
retangulo pintado. */
body.noite #toolbar,
body.noite #dots,
body.noite #brand,
body.noite .pop-menu,
body.noite .gaveta,
/* Estes quatro ficavam BRANCOS no tema escuro: o painel de texto e os
tres flutuantes de cor, fonte e canto. Eles nao usam a classe
`.pop-menu` — tem classe propria — e a regra do escuro so listava a
outra. O `background: #fff` fixo deles vencia, e o menu abria como
uma janela clara sobre o mural escuro. */
/* O painel escuro nao tem mais cor propria: `--trilho` ja responde por
ele nos dois temas (ver os tokens). */
body.noite .pop-cor-flutua {
background: var(--paper); color: var(--ink);
}
body.noite .painel-lado { color: var(--ink); }
body.noite .painel-lado,
body.noite .pop-cor-flutua { border-color: var(--borda); }
body.noite .panel { background: none; color: var(--ink); }
body.noite .pop-menu,
body.noite #dots,
body.noite #toolbar,
body.noite #brand{ border-color: var(--borda); }
/* Botõezinhos de chip: o mais/menos do pincel e do zoom. A barra de
páginas SAIU desta lista: os botões dela deixaram de ser chips e
passaram a ler os tokens, como os da barra de baixo — pintá-los aqui
de novo devolveria o fundo cinza que o desenho novo tirou. */
body.noite #size-minus,
body.noite #size-plus,
body.noite #zoom-menos,
body.noite #zoom-mais {
background: var(--linha); color: var(--ink);
}
body.noite #size-minus:hover,
body.noite #size-plus:hover,
body.noite #zoom-menos:hover,
body.noite #zoom-mais:hover { background: var(--linha-forte); color: var(--ink); }
/* o número da página ativa segue a regra: azul, nos dois temas */
body.noite #dots button.on { background: var(--primaria); color: #fff; }
/* Cartão de aviso na prancheta: era branco translúcido e, com o
texto virando claro, ficava cinza sobre cinza. */
/* Teclas nas dicas das ferramentas */
body.noite .tool__tip { background: #111016; color: #f0eeea; }
body.noite #scrub-knob { background: #f0eeea; }
/* #1f2733 e o chip escuro do tema claro — azulado. No escuro ele fica
quase igual ao fundo e ainda puxa para o azul; vira grafite quente
um degrau acima do papel, para continuar se destacando. */
/* `#t-nav` NAO entra aqui. Eu o incluí porque, ao medir, ele estava
com o fundo escuro — mas estava assim por ser a ferramenta ativa
naquele momento, e nao por regra propria. Fixado pelo id, ele
ficava aceso para sempre e parecia que a seta continuava
selecionada mesmo usando outra ferramenta. Quem marca a ativa e
`.tool.on`, e so ela. */
/* A ferramenta ligada no escuro: a tinta do tema, como no claro. Ela
tinha um marrom proprio (#3b3733), que era o cinza quente de antes. */
body.noite .tool.on { background: var(--ink); color: var(--paper); }
/* Os ícones da barra liam `#2b3442` fixo — um azul-chumbo do tema
claro, que sobre o escuro dava contraste 1,31 e parecia desativado.
Agora leem `--ink`, e estas duas regras existem so para o hover: a
tinta ja vem certa do token. */
body.noite .tool:hover { background: var(--linha); color: var(--ink); }
body.noite .tool[disabled] { color: #86868f; opacity: 1; }
/* ---- por dentro dos menus ----
Levantado abrindo cada menu no escuro e medindo o contraste de
cada item contra o fundo real dele, e nao no olho. */
body.noite .pop-menu__t { color: var(--ink); }
/* Cor E fundo. Na primeira passada eu troquei so a cor: o texto
ficou claro sobre fundo claro (#f7f9fc), que e pior do que estava
antes. As excecoes sao o que tem cor propria — botao principal,
amostras de cor e o destaque vermelho.
E A LISTA DE EXCECOES VIROU UMA MARCA, porque lista nao acaba.
O "Adaptar ao tema" caiu nesta rede e ficou cinza no escuro —
vermelho no claro, cinza no escuro, o mesmo botao —, e ganhou o
nome dele no `:not()`. Depois cairam outros quatro: "Destravar
tudo" (dois, um no cadeado e outro na lista de presas), "Comecar a
gravar" e o "Aplicar" do tamanho da pagina. MEDIDO, varrendo as
duas temas e comparando cor, fundo e borda de cada elemento da
pagina: nove propriedades vermelhas no claro que no escuro nao
eram.
Acrescentar mais quatro nomes aqui adiaria a quinta vez. `.cor-propria`
diz a regra em vez de listar quem a cumpre: quem pinta a si mesmo
nao e repintado. Os que ja estavam na lista ficam — tirar nome de
rede que funciona e mexer no que nao doi. */
body.noite .pop-menu button:not(.on):not(.btn--ok):not(.tool--destaque):not(.swatch):not(.cor):not(.pop-menu__acao):not(.cor-propria) {
background: var(--linha); color: var(--ink); border-color: var(--borda);
}
body.noite .pop-menu button:not(.on):not(.btn--ok):not(.swatch):not(.cor):not(.pop-menu__acao):not(.cor-propria):hover {
background: var(--borda); color: #fff;
}
/* `:not(.on):not(:hover)` PORQUE A BASE DO ESCURO ENGOLIA O ESTADO.
`body.noite .formatos button` carrega um elemento a mais que
`.formatos button:hover` e vem depois no arquivo: o efeito aparecia
no claro e nao no escuro. "No tema escuro nao tem tantos efeitos e
cores" — nao era falta de desenho, era o desenho sendo coberto. Os
outros oito casos abaixo sao o mesmo. */
body.noite .formatos button:not(.on):not(:hover) { background: var(--linha); }
/* a lista de tópicos tinha #2b3442 fixo: contraste 1,31 */
body.noite .pop-menu__dica, body.noite .rotulo-campo { color: var(--suave); }
/* rotulos soltos com cor fixa do tema claro */
body.noite .campo__num i,
body.noite .campo,
body.noite .pop-grid i,
body.noite .export i { color: #9c9caa; }
body.noite .campo__num { background: #17161c; color: #9c9caa; border-color: var(--borda); }
/* O FUNDO ESCURO DOS ATALHOS VEM DO PAINEL. Havia aqui um
`body.noite #help` com exatamente os mesmos tres valores que
`body.noite .painel-lado` ja da — e, por carregar id, era ele quem
valia. Dois lugares com o mesmo valor sao um lugar a mais para
esquecer no dia em que o valor mudar. */
body.noite #toolbar .size,
body.noite #toolbar .zoom { background: #23232b; }
/* `#help kbd` tem especificidade de id e ganhava de `body.noite kbd`.
Precisa carregar o id junto para valer. */
body.noite kbd,
body.noite #help kbd { background: #2b2a33; color: #dedee6; border-color: #3a3947; }
/* As barrinhas (`range`) ficam de fora: o fundo escuro aqui pintava uma
faixa atrás de cada uma — "no tema escuro as barrinhas têm uma sombra
ainda mais escura atrás; tire de todas" —, e na régua em pé ainda
apagava o fio, que é desenhado no fundo dela. */
body.noite input:not([type="range"]), body.noite select, body.noite textarea {
background: #17161c; color: var(--ink); border-color: var(--borda);
}
/* As barras leem os tokens: o hover delas e `--linha` nos dois temas,
e a regra escura que existia aqui era so a mesma cor escrita de
novo. */
/* A grade some se ficar clara demais sobre o escuro */
/* Todos os botões da barra de páginas com a mesma caixa e o ícone no
centro. Cada um tinha a sua própria regra (`.dots__casa`,
`.dots__lixo`, …) e a lua, criada depois, não tinha nenhuma: ficou
com `display: block`, e o ícone encostava à esquerda em vez de
centrar — 5,9px fora do meio, medido. */
#dots button {
display: grid; place-items: center;
width: 3.2vh; height: 3.2vh; min-width: 3.2vh; padding: 0;
border-radius: 50%;
}
#dots button.on { width: auto; min-width: 3.2vh; padding: 0 1vh; border-radius: 1vh; }
#dots button svg { width: 1.9vh; height: 1.9vh; }
/* SEM SOL AMARELO (#299). Aqui havia `body.noite .dots__noite { color:
var(--yellow) }`, que nunca valeu: o `#dots button` pinta a tinta com
um id no seletor e pesa mais. O sol do escuro sempre saiu na tinta do
tema, e a decisão foi deixar assim — a regra saiu para não enganar
quem lê. */
/* O BOTÃO DE TEMA ABERTO (#329). Os três — o da barra do mural, o da
estante e o da página de vendas — ficam marcados enquanto a janela
está aberta embaixo deles. O `:is()` com os ids das três telas dá o
peso para passar por cima do hover próprio de cada uma
(`#dots button:hover`, `.inicio__redondo:hover`...). O desenho do
outro tema ao passar o mouse (#294) saiu: o clique abre a janela, e
não troca mais o tema. */
:is(#dots, #inicio, #vitrine) .botao-tema[aria-expanded="true"] {
background: var(--primaria-leve); border-color: var(--primaria-leve); color: var(--primaria-tinta);
}
/* A JANELA DE APARÊNCIA (#329). "Pense em algo como era antes, mas
melhorado: ao clicar vai abrir uma janela." Mora no e passa
por cima da estante (z-index 400) e da página de vendas (390).
Medida em px, e não em vh: a pílula anda de ponta a ponta, e a
conta fica exata em qualquer altura de janela. */
.janela-aparencia {
position: fixed; z-index: 460; width: 256px; box-sizing: border-box; padding: 12px;
background: var(--paper); color: var(--ink);
border: .12vh solid var(--borda); border-radius: 14px; box-shadow: var(--sombra-3);
}
.janela-aparencia[hidden] { display: none; }
.janela-aparencia__titulo { margin: 0 0 8px; font-size: 13px; font-weight: 800; }
.janela-aparencia__rotulo { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--suave); }
.janela-aparencia__titulo + .janela-aparencia__rotulo { margin-top: 0; }
/* A PÍLULA DO TEMA: "faz os temas em uma única pílula, unificando os
dois temas nas extremidades; ao clicar vai sair da lua para o sol
em uma animação fluida". A bola anda de uma ponta à outra e, no
caminho, o sol gira e vira lua. As cores são os tokens do tema, que
viram junto com ele: a pílula escurece enquanto a bola anda.
A BOLA ANDA POR `transform`, e não por `left`. MEDIDO: logo depois da
troca de tema o navegador fica uns 180 ms ocupado (as peças se
repintam no tema novo), e com `left` a bola congelava no começo e
pulava para o fim. O `transform` é animado fora desse trabalho, e anda
liso. O curso — a largura da pílula menos a bola — é medido ao abrir
a janela (`--pilula-curso`, em mural.js). */
.pilula-tema {
position: relative; display: block; width: 100%; height: 40px; padding: 0;
border-radius: 999px; border: .12vh solid var(--borda); background: var(--linha);
font: inherit; color: var(--suave); cursor: pointer;
transition: background-color 450ms var(--mov-padrao), border-color 450ms var(--mov-padrao);
}
.pilula-tema:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 2px; }
.pilula-tema__ponta {
position: absolute; top: 0; bottom: 0; display: flex; align-items: center; gap: 2px;
font-size: 12px; pointer-events: none;
}
/* o ícone da ponta ocupa o lugar exato da bola: chegando, ela o cobre, e a palavra fica livre */
.pilula-tema__ponta svg { width: 34px; height: 17px; flex: none; }
.pilula-tema__ponta--claro { left: 2px; }
.pilula-tema__ponta--escuro { right: 2px; flex-direction: row-reverse; }
.pilula-tema__ponta b { font-weight: 600; }
.pilula-tema:not(.escuro) .pilula-tema__ponta--claro b,
.pilula-tema.escuro .pilula-tema__ponta--escuro b { font-weight: 800; color: var(--primaria); }
.pilula-tema__bola {
position: absolute; top: 2px; left: 2px; width: 34px; height: 34px; box-sizing: border-box;
border-radius: 50%; background: var(--paper); border: .12vh solid var(--borda);
display: grid; place-items: center; pointer-events: none;
will-change: transform;
transition: transform 520ms cubic-bezier(.65, 0, .35, 1), background-color 450ms, border-color 450ms;
}
.pilula-tema.escuro .pilula-tema__bola { transform: translateX(var(--pilula-curso, 190px)); }
.pilula-tema:hover .pilula-tema__bola { border-color: var(--primaria-tinta); }
.pilula-tema__bola svg {
position: absolute; width: 19px; height: 19px;
transition: opacity 380ms, transform 520ms cubic-bezier(.65, 0, .35, 1);
}
/* o amarelo do sol é o do passeio (tour.js), que já desenha este sol */
.pilula-tema__sol { color: #e0a100; }
.pilula-tema__lua { color: var(--ink); opacity: 0; transform: rotate(-120deg) scale(.4); }
.pilula-tema.escuro .pilula-tema__sol { opacity: 0; transform: rotate(120deg) scale(.4); }
.pilula-tema.escuro .pilula-tema__lua { opacity: 1; transform: none; }
/* OS CARTÕES DO FUNDO: "adicione esse visual na seleção do pattern" —
uma miniatura do mural, com um post-it, em cima do nome. A
miniatura usa os tokens do fundo de verdade (`--fundo`, `--linha-forte`,
`--ponto`), então mostra o tema que vale agora, e vira junto com ele. */
.janela-aparencia__fundos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cartao-fundo {
position: relative; display: block; padding: 0; overflow: hidden; text-align: left;
border: .12vh solid var(--borda); border-radius: 10px; background: var(--paper); color: var(--ink);
font: inherit; cursor: pointer;
}
.cartao-fundo:hover { border-color: var(--suave); }
.cartao-fundo.on { outline: 2px solid var(--primaria); outline-offset: -1px; }
.cartao-fundo:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 2px; }
.cartao-fundo__mini {
display: block; position: relative; height: 58px; background-color: var(--fundo);
transition: background-color 450ms var(--mov-padrao);
}
.cartao-fundo__mini--grade {
background-image: linear-gradient(var(--linha-forte) 1px, transparent 0),
linear-gradient(90deg, var(--linha-forte) 1px, transparent 0);
background-size: 12px 12px;
}
.cartao-fundo__mini--pontos {
background-image: radial-gradient(circle, var(--ponto) 0 1px, transparent 1.5px);
background-size: 12px 12px;
}
.cartao-fundo__mini::after {
content: ""; position: absolute; left: 14px; top: 14px; width: 20px; height: 18px;
border-radius: 3px; background: var(--yellow);
}
.cartao-fundo__nome { display: block; padding: 6px 8px; font-size: 12px; font-weight: 600; }
.cartao-fundo__ok {
position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; padding: 4px;
box-sizing: border-box; border-radius: 50%; background: var(--primaria); color: #fff; display: none;
}
.cartao-fundo.on .cartao-fundo__ok { display: block; }
@media (prefers-reduced-motion: reduce) {
.pilula-tema, .pilula-tema__bola, .pilula-tema__bola svg, .cartao-fundo__mini { transition: none; }
}
/* ==========================================================
Página com medida de entrega
==========================================================
A página passou a ter altura própria em pixels (1080, 1920,
2048...). Duas consequências que precisam de regra:
1. `align-items: stretch` do #board esticaria a página de volta
para a altura da tela se a altura fosse automática. Com altura
explícita ele já não estica, mas `align-self` deixa isso dito
em vez de depender do detalhe.
2. Formatos em pé passam da altura da janela. Sem rolagem
vertical o rodapé da página fica inalcançável.
========================================================== */
#board { align-items: flex-start; overflow-y: auto; }
#board::-webkit-scrollbar { width: 0; }
.panel { align-self: flex-start; }
/* ---- gaveta do chat e cartão de atalhos no escuro ---- */
/* Cor E fundo — pela terceira vez o mesmo descuido: trocar so a cor
deixa claro sobre claro, que e pior do que estava. */
body.noite .gaveta__x { color: #c9c9d2; background: #23232b; }
body.noite .gaveta__topo { background: #1d1c22; border-color: var(--borda); }
/* DOIS RESTOS SAIRAM DAQUI, e o primeiro escondia o segundo.
Havia um comentario que nunca fechava: a remocao dos selos do plano
da IA cortou do meio dele ate o meio da regra seguinte, deixando
`para "é pago"{ color: #f0c368; ... }` sem nunca fechar. Tudo o
que vinha depois, ate o primeiro fecha-comentario adiante, virou
comentario — inclusive
`body.noite #help button { color: #ff6b74 }`, que pintava o
"ocultar" do cartao de atalhos e que, de comentario, nunca pintou
nada. Os selos nao existem mais em lugar nenhum (`ia-plano` nao
aparece no projeto), e o botao virou a aba na beirada do painel.
E o `#help { bottom }` tambem foi: o painel vai de cima a baixo na
borda da direita, e nao tem rodape de que fugir. */
/* no escuro o anel precisa de mais presenca para separar do fundo */
/* No escuro as amostras usam o mesmo aro branco; a bolinha segue. */
body.noite .size__dot { border-color: #fff; box-shadow: 0 0 0 .12vh #2d2c36; }
/* ==========================================================
Menu de config (os três traços)
==========================================================
Contorno em cada item: sem ele, no escuro, os botões viravam
texto solto e não se lia onde um acaba e o outro começa.
"Criar conta" volta a ser vermelho. Minha regra geral dos menus
pintou de escuro todo botão sem cor própria e pegou este também —
o mesmo engano que eu já tinha cometido com o inserir.
========================================================== */
body.noite .brand__link {
border: .12vh solid var(--borda);
background: #212029; color: #d4d4dc;
}
body.noite .brand__link:hover { background: #2d2c36; color: #fff; border-color: #4a453f; }
.brand__cta { border: .12vh solid transparent; }
body.noite .brand__cta,
body.noite .menu-topo .brand__cta {
background: var(--red) !important; color: #fff !important;
border-color: #ff5a72;
box-shadow: 0 .4vh 1.4vh rgba(255,10,43,.35);
}
body.noite .brand__cta:hover,
body.noite .menu-topo .brand__cta:hover { background: var(--red-deep) !important; }
/* As três barras do ☰ são pintados por background, e não por
color — então herdaram o #2b3442 do tema claro e ficaram quase
invisíveis, com aquele ar azulado. Igualam-se ao ícone do chat. */
body.noite .brand__barras i { background: #f0eeea; }
body.noite #brand:hover .brand__barras i { background: #fff; }
body.noite #brand:hover{ background: #2d2c36; }
/* Controles nativos — campo de data, selects, barras de rolagem —
não obedecem a background/color: quem os pinta é o color-scheme.
Sem isto o seletor de data continuava branco no meio do escuro, e
o calendarinho que ele abre também. */
body.noite { color-scheme: dark; }
body.noite #timer-data { background: #17161c; color: var(--ink); border-color: var(--borda); }
.cal {
background: #fff; border: .12vh solid var(--borda);
border-radius: 1.1vh; padding: 1.1vh; margin-bottom: 1vh;
box-shadow: var(--sombra-2);
}
/* hoje leva um anel; o dia escolhido leva o preenchimento — assim os
dois podem aparecer ao mesmo tempo sem um esconder o outro */
body.noite .cal { background: #1d1c22; border-color: var(--borda); }
/* Com o calendário aberto o menu do temporizador passa da altura da
tela e o topo sai do quadro. Teto com rolagem resolve para todos
os menus, e não só para este — qualquer um pode crescer. */
/* `overflow-x: hidden` junto de propósito: quando um eixo vira
`auto`, o outro deixa de ser `visible` e vira `auto` também. Um
transbordo de 4px passou a desenhar uma barra de rolagem
horizontal cinza no pé do menu do ajudante, que antes não existia. */
.pop-menu { max-height: 92vh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.pop-menu::-webkit-scrollbar { width: .6vh; }
.pop-menu::-webkit-scrollbar-thumb { background: var(--borda); border-radius: 1vh; }
body.noite .pop-menu::-webkit-scrollbar-thumb { background: #343340; }
body.noite .obj--polaroid,
body.noite .polaroid { color: #14161a; }
body.noite .polaroid .shot { background: #e7ebf1; }
/* a dica de "colar link" e cinza sobre branco: escurece para ler */
body.noite .polaroid .midia { color: #4b5563; }
/* O texto da data vive num dentro do botão, e havia uma regra
de span nos menus pintando com o #2b3442 do tema claro. Herdar do
botão resolve nos dois temas de uma vez. */
/* A barra de cima volta a ser controle: clicar e arrastar percorre o
mural. O que ela nao pode e iniciar um arrasto NATIVO do
navegador — era isso que acendia a moldura de "solte aqui" e a
deixava presa na tela. `user-select: none` corta o arrasto de
selecao; a moldura em si ja foi resolvida em separado, e agora so
responde a arquivo. */
#scrub { cursor: pointer; }
#scrub, #scrub * { user-select: none; -webkit-user-drag: none; }
#scrub-knob { cursor: grab; }
#scrub.puxando, #scrub.puxando #scrub-knob { cursor: grabbing; }
/* ==========================================================
Fundo do mural: grade ou pontinhos
==========================================================
A escolha é do usuário e vale nos dois temas — quem manda é a
classe em , não o tema. As cores vêm dos tokens, então cada
tema pinta o seu.
Todas as medidas chegam prontas do JS, em pixel inteiro e já
multiplicadas pelo zoom. Em `vh` as camadas caíam em frações
diferentes e saíam de registro ao escalar: a linha grossa parava
entre duas finas e parecia duplicar, andando conforme o zoom.
========================================================== */
body.fundo-grade #board {
background-image:
linear-gradient(var(--linha-forte) var(--grade-traco, 1px), transparent 0),
linear-gradient(90deg, var(--linha-forte) var(--grade-traco, 1px), transparent 0),
linear-gradient(var(--linha) 1px, transparent 0),
linear-gradient(90deg, var(--linha) 1px, transparent 0) !important;
background-size:
var(--grade-forte, 70px) var(--grade-forte, 70px),
var(--grade-forte, 70px) var(--grade-forte, 70px),
var(--grade-fina, 14px) var(--grade-fina, 14px),
var(--grade-fina, 14px) var(--grade-fina, 14px) !important;
background-position: 0 0 !important;
background-attachment: local !important;
}
body.fundo-pontos #board {
background-image: radial-gradient(circle,
var(--ponto) 0 var(--ponto-r, 1px),
transparent var(--ponto-borda, 1.5px)) !important;
background-size: var(--malha, 14px) var(--malha, 14px) !important;
background-position: 0 0 !important;
background-attachment: local !important;
}
/* ---- o mesmo fundo nas telas de fora do mural ----
A estante, a vitrine e a conta eram lisas, e a escolha de
quadriculado ou pontinhos so valia dentro do mural — o site parecia
dois produtos diferentes. Aqui a malha e de medida fixa: fora do
mural nao ha zoom para acompanhar, e amarrar ao zoom faria o fundo
mudar de tamanho sem motivo ao entrar e sair de um projeto. */
body.fundo-grade #inicio,
body.fundo-grade #conta {
background-image:
linear-gradient(var(--linha-forte) 1px, transparent 0),
linear-gradient(90deg, var(--linha-forte) 1px, transparent 0),
linear-gradient(var(--linha) 1px, transparent 0),
linear-gradient(90deg, var(--linha) 1px, transparent 0);
background-size: 70px 70px, 70px 70px, 14px 14px, 14px 14px;
}
body.fundo-pontos #inicio,
body.fundo-pontos #conta {
background-image: radial-gradient(circle, var(--ponto) 0 1px, transparent 1.5px);
background-size: 14px 14px;
}
/* ---- o menuzinho de aparencia ---- */
.pop-menu__acao {
font: inherit; font-size: max(1.4vh, 11.2px); font-weight: 700; cursor: pointer;
width: 100%; padding: 1.1vh 1.4vh; border-radius: 1vh;
background: var(--red); color: #fff;
border: .12vh solid var(--red);
}
.pop-menu__acao:hover { background: var(--red-deep); border-color: var(--red-deep); }
/* no claro os pontos precisam de um cinza próprio: o --ponto nasceu
para o escuro e sumiria sobre o branco.
MAIS LEVE (#294): "o pattern de pontos do tema claro está muito
forte". O #c3cedd era bem mais escuro que as linhas do quadriculado
(#eef1f6 e #e3e8f0): na média os dois escurecem o fundo quase o mesmo,
mas o ponto concentra tudo num pixel e salta aos olhos. Com a bandeja
da lua, trocar um pelo outro ficou a um gesto, e a diferença apareceu. */
body:not(.noite) { --ponto: #d6dee9; }
/* ---- as escolhas em duas colunas (as Preferências da conta usam) ---- */
.escolhas { display: grid; grid-template-columns: 1fr 1fr; gap: .6vh; margin-bottom: 1.2vh; }
.escolhas button {
display: flex; flex-direction: column; align-items: center; gap: .6vh;
padding: 1.1vh .6vh; border-radius: 1vh; cursor: pointer;
font: inherit; font-size: max(1.25vh, 10.0px); font-weight: 700;
background: #f3f6fa; color: #2b3442; border: .12vh solid var(--borda);
}
.escolhas button span:first-child { font-size: max(2vh, 16.0px); line-height: 1; }
.escolhas button:hover { background: #e9eef6; }
.escolhas button.on { background: var(--primaria-leve); border-color: var(--primaria-tinta); color: var(--primaria-tinta); }
/* as miniaturas mostram o próprio padrão, e não um desenho parecido */
.mini-fundo {
width: 100%; height: 3.4vh; border-radius: .6vh;
border: .1vh solid var(--borda); background-color: var(--paper);
}
.mini-fundo--grade {
background-image:
linear-gradient(var(--linha-forte) 1px, transparent 0),
linear-gradient(90deg, var(--linha-forte) 1px, transparent 0);
background-size: 10px 10px;
}
.mini-fundo--pontos {
background-image: radial-gradient(circle, var(--ponto) 0 1px, transparent 1.6px);
background-size: 7px 7px;
}
body.noite .escolhas button:not(.cor-propria):not(.on) { background: var(--linha); color: var(--ink); border-color: var(--borda); }
body.noite .escolhas button:not(.cor-propria):hover { background: var(--borda); }
body.noite .mini-fundo { background-color: #141318; }
/* A roda de cores selecionada leva o mesmo aro das outras amostras.
Antes ela só mudava o miolo, então "selecionada" ficava difícil de
ver — e no escuro, onde o aro das amostras é branco, ela era a
única sem aro nenhum. */
.swatch--roda.on { box-shadow: 0 0 0 .32vh #1f2733; }
body.noite .swatch--roda.on { box-shadow: 0 0 0 .32vh #f0eeea; }
body.noite .swatch.on { box-shadow: 0 0 0 .32vh #f0eeea; }
/* Barra de rolagem sem nada para percorrer: apagada e sem cursor de
controle. Prometer um arrasto que não move nada é pior do que não
mostrar a barra. */
#scrub.inerte { opacity: .35; cursor: default; }
#scrub.inerte #scrub-knob { cursor: default; }
#scrub.inerte:hover #scrub-knob { transform: none; }
/* ==========================================================
Campo de ir para a página, ao lado do +
==========================================================
Mesma cara do campo de zoom: sem borda, fundo transparente e
cantos suaves. `flex: none` é o que mais importa — #dots é um
flex, e sem isso o input esticava e tomava a barra inteira.
========================================================== */
#dots .dots__ir {
flex: 0 0 auto;
width: 3.8vh; min-width: 0; height: 2.6vh; padding: 0;
border: 0; background: transparent;
font: inherit; font-size: max(1.4vh, 11.2px); font-weight: 700;
color: var(--suave); text-align: center;
border-radius: .9vh; cursor: text;
}
#dots .dots__ir::placeholder { color: #9aa3b0; font-weight: 600; }
#dots .dots__ir:hover { background: rgba(150,160,175,.16); }
#dots .dots__ir:focus {
outline: none; background: #fff; color: #2b3442;
box-shadow: 0 0 0 .18vh var(--primaria-tinta);
}
body.noite #dots .dots__ir { color: #c2c2cc; }
body.noite #dots .dots__ir::placeholder { color: #86868f; }
body.noite #dots .dots__ir:hover { background: #2d2c36; }
body.noite #dots .dots__ir:focus { background: #111016; color: var(--ink); }
/* ==========================================================
Espessura do pincel: campo digitável e bolinha contida
==========================================================
O número virou input, com a mesma cara do campo de zoom. A
bolinha ganhou teto: em 1:1 uma ponta de 100px estouraria a
barra, e ela já encostava nas bordas em 30.
========================================================== */
.size__num {
width: 3.6vh; min-width: 0; padding: 0; border: 0; background: transparent;
font: inherit; font-size: max(1.4vh, 11.2px); font-weight: 800;
color: var(--suave); text-align: center;
border-radius: .8vh; cursor: text; letter-spacing: .02em;
}
.size__num:hover { background: rgba(150,160,175,.16); }
.size__num:focus {
outline: none; background: #fff; color: #2b3442;
box-shadow: 0 0 0 .18vh var(--primaria-tinta);
}
body.noite .size__num { color: #c2c2cc; }
body.noite .size__num:hover { background: #2d2c36; }
body.noite .size__num:focus { background: #111016; color: var(--ink); }
/* A caixa da amostra ganha folga para a bolinha nunca encostar. */
.size__preview {
width: 3.6vh; height: 3.6vh;
display: grid; place-items: center; overflow: visible;
}
/* ---- os redondos da barra, todos com a mesma caixa ----
Antes cada grupo tinha a sua medida e as bolinhas ficavam em
alturas ligeiramente diferentes. Uma caixa só alinha todas. */
#toolbar .swatch,
#toolbar .size button,
#toolbar .zoom button {
width: 3.4vh; height: 3.4vh; flex: 0 0 auto;
display: grid; place-items: center;
}
#toolbar .size, #toolbar .zoom { align-items: center; }
/* E OS BOTÕES DE ÍCONE NA MESMA CAIXA DAS BOLINHAS. "Confira o
espaçamento dos ícones, quero o mínimo de espaço necessário." O vão
entre caixas já era um só (--vao-barra); o que sobrava era a caixa
de 4,2vh em volta de um ícone de 2,2vh, quase um ícone inteiro de
ar entre dois vizinhos. Com 3,4vh, as ferramentas, a engrenagem, as
cores e o zoom têm a mesma medida, e o ícone não muda de tamanho. */
#toolbar .tool,
#toolbar .mini-ctrl__bt--so { width: 3.4vh; height: 3.4vh; }
#toolbar #ctrl-zoom .mini-ctrl__bt { height: 3.4vh; }
/* O ÍCONE NÃO PODE SER APERTADO PELA CAIXA. "Tamanho dos ícones da
barra inferior ainda estão pequenos! Único que dá a impressão de
grande é o zoom e a engrenagem." MEDIDO: com a caixa de 3,4vh, o
recuo de 6px que o navegador dá a todo botão deixava 11,7px para
um ícone de 15,4px, e ele saía com 13,5px de largura na tela,
contra 20,2px da engrenagem. Sem o recuo, e na medida da
engrenagem (#bt-ajustes), os ícones da barra são todos do mesmo
tamanho. */
#toolbar .tool { padding: 0; }
/* A LIXEIRA ACESA EM VERMELHO COM UMA PEÇA NA MÃO (#215): "adicionar uma
iluminação vermelha na lixeira na barra inferior para, ao apertar na
lixeira, o fantasma sumir". O vermelho é o mesmo do Gravar, e ela fica
ligada mesmo sem nada para apagar (ver `sincronizar` no caneta.js). */
#t-clear { position: relative; overflow: visible; }
/* ---------- A LIXEIRA DIZ EM QUE ESTADO ESTA (#250) ----------
Sao tres degraus, e cada um acrescenta ao de baixo:
tem o que apagar o icone fica vermelho
o mouse chegou fundo suave, e ela treme de leve
apagou o balanco forte e os tracinhos
Antes so havia o primeiro e o ultimo, e o primeiro so valia com uma
peca na mao: com tracos no mural para apagar, a lixeira era igual a
qualquer outro botao, e o jeito de saber se o clique faria algo era
clicando. */
#t-clear:enabled { color: var(--red); }
#t-clear:enabled:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }
/* O CONTORNO SAIU, e a cor e o fundo ficaram: "retirar o contorno do
circulo vermelho". O anel desenhava um segundo botao dentro do
botao, numa barra onde nenhum outro tem borda. */
body.colando #t-clear {
color: var(--red); background: color-mix(in srgb, var(--red) 16%, transparent);
}
/* TODO APAGAR SE VÊ IGUAL (#283). "Ao clicar nela não acontece a
animação da explosão de raios brancos igual acontece quando deleta
um fantasma." Acontecia — MEDIDO, o balanço e o estouro tocavam ao
apagar um traço —, mas não se via: os raios são brancos, e só com a
peça na mão a lixeira tinha o fundo vermelho onde o branco aparece.
Apagando, ela ficava sem fundo, e ainda esmaecida, porque desliga no
mesmo clique que apaga o último traço (`.tool[disabled]`, 35%).
Durante a confirmação ela ganha o fundo aceso da peça na mão, inteira. */
#t-clear.balancando {
color: var(--red); background: color-mix(in srgb, var(--red) 16%, transparent);
opacity: 1;
}
/* DOIS MOVIMENTOS, E NAO UM. O tremor diz "pode clicar"; o balanco
diz "apaguei". Com o mesmo gesto para as duas coisas, a confirmacao
se perderia no meio do hover — a pessoa veria o mesmo antes e
depois do clique.
O TREMOR E UM ESTADO; O BALANCO E UM EVENTO. E por isso que o
balanco NAO leva `:enabled`: quando ele toca, o apagar ja aconteceu
e muitas vezes nao sobrou nada para apagar — a lixeira acabou de
ficar `disabled`. Medido: com `:enabled` na regra do balanco, a
animacao saia `none` exatamente no clique que apagou tudo, que e o
caso mais comum de todos.
A SEGUNDA LINHA DO SELETOR E QUEM GANHA DO HOVER. Com o mouse em
cima e a lixeira ainda habilitada (apagar uma selecao e sobrar
tracos), as duas regras casam na mesma propriedade do mesmo `svg`,
e sem ela o tremor venceria o balanco bem na hora da confirmacao.
Duas linhas dizendo "confirmando, mostre o balanco" valem mais que
um `:not(.balancando)` pendurado no hover, que e como a rede de
excecoes desta base comecou das outras vezes. */
#t-clear:enabled:hover svg { animation: lixeira-treme .45s ease-in-out; transform-origin: 50% 20%; }
#t-clear.balancando svg,
#t-clear:enabled.balancando:hover svg { animation: lixeira-balanca .5s ease-in-out; transform-origin: 50% 20%; }
@keyframes lixeira-treme {
0%, 100% { transform: rotate(0); }
25% { transform: rotate(-7deg); }
75% { transform: rotate(5deg); }
}
@keyframes lixeira-balanca {
0%, 100% { transform: rotate(0); }
20% { transform: rotate(-16deg); }
40% { transform: rotate(12deg); }
60% { transform: rotate(-8deg); }
80% { transform: rotate(4deg); }
}
/* OS TRACINHOS DE CONFIRMAÇÃO (#215). Oito raios curtos: um degradê
cônico (traço de 7° a cada 45°) recortado por uma máscara num anel, o
que faz de cada raio um tracinho solto. Brancos, como pedido, com uma
sombra fina que os deixa ler também sobre o branco do tema claro: a
sombra fica no invólucro, porque filtro e máscara no mesmo elemento
cortariam a sombra junto. Abrem para fora e somem. */
.estouro {
position: absolute; left: 50%; top: 50%; width: 260%; height: 260%;
pointer-events: none; z-index: 2;
filter: drop-shadow(0 0 .12vh rgba(20, 22, 26, .6));
transform: translate(-50%, -50%) scale(.5);
animation: estouro .5s cubic-bezier(.2, .7, .2, 1) forwards;
}
.estouro::before {
content: ''; position: absolute; inset: 0;
background: repeating-conic-gradient(from -3.5deg, #fff 0deg 7deg, transparent 7deg 45deg);
-webkit-mask: radial-gradient(closest-side, transparent 54%, #000 55% 78%, transparent 79%);
mask: radial-gradient(closest-side, transparent 54%, #000 55% 78%, transparent 79%);
}
/* na estrela, menor: o cartão corta o que passa da borda, e ela mora a 1vh do canto */
.proj__estrela .estouro { width: 190%; height: 190%; }
@keyframes estouro {
0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
30% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes estouro-parado { 0%, 100% { opacity: 0; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
#t-clear.balancando svg,
#t-clear:enabled.balancando:hover svg,
#t-clear:enabled:hover svg { animation: none; }
.estouro { transform: translate(-50%, -50%) scale(.9); animation: estouro-parado .5s linear forwards; }
}
#toolbar .tool svg { width: max(2.2vh, 17.6px); height: max(2.2vh, 17.6px); }
/* A BARRA NÃO ENCOLHE JUNTO. "Diminuiu o tamanho da barra? A gente
não tinha aumentado?" A caixa menor tirava altura da barra inteira;
o que saiu da caixa volta como folga em cima e embaixo, e a barra
fica da altura que tinha com a caixa de 4,2vh. */
/* A ALTURA DAS DUAS BARRAS É UMA SÓ, e é dita, e não deduzida dos
recuos: a de antes, com a caixa de 4,2vh, 1vh de folga e a borda.
"Aumenta o tamanho da barra superior para ficar igual da de baixo!"
A de cima é reduzida inteira pelo zoom (a de baixo, só os filhos) e
tem o respiro do trilho das páginas; acertar as duas por recuo seria
uma conta diferente para cada uma. Com a altura mínima declarada, a
de cima divide pela escala e as duas saem iguais. A de baixo ainda
pode quebrar em duas linhas numa janela estreita: por isso mínima, e
não fixa. */
:root { --altura-das-barras: calc(4.2vh * var(--escala-barras) + 2.2vh); }
#toolbar { padding-block: .4vh; min-height: var(--altura-das-barras); }
#dots {
padding-block: calc(.4vh / var(--escala-barras));
min-height: calc(var(--altura-das-barras) / var(--escala-barras));
}
/* E os botões de cima com as medidas dos de baixo: caixa de 3,4vh e o
ícone da engrenagem. */
#dots button, .dots__mais { width: 3.4vh; height: 3.4vh; min-width: 3.4vh; }
#dots button.on { min-width: 3.4vh; }
#dots button svg { width: max(2.2vh, 17.6px); height: max(2.2vh, 17.6px); }
/* Arrastando o vazio com a seta: o cursor vira mão enquanto dura o
gesto, mas a ferramenta continua sendo a seta. */
body.empurrando, body.empurrando #board { cursor: grabbing !important; }
/* ==========================================================
+ e lixeira: seta ao passar o mouse, vermelho ao clicar
==========================================================
Passando o mouse, o símbolo some e fica só a seta apontando para
onde o gesto vale — direita no +, esquerda na lixeira. O vermelho
é do clique: ele avisa que a ação está acontecendo, e não que ela
está disponível.
O + era texto e some por `color: transparent`; virou desenho
(ic-plus), e como o traço dele é `currentColor` a mesma regra
continua apagando. A lixeira some por `opacity`.
========================================================== */
.dots__mais, .dots__lixo { position: relative; }
.dots__mais { transition: background var(--t-botao) var(--mov-padrao), color var(--t-botao) var(--mov-padrao); }
.dots__lixo > svg { transition: opacity var(--t-botao) var(--mov-padrao); }
.dots__mais::after, .dots__lixo::after {
position: absolute; inset: 0;
display: grid; place-items: center;
opacity: 0; transition: opacity var(--t-botao) var(--mov-padrao);
font-size: max(1.9vh, 15.2px); font-weight: 900; line-height: 1;
color: currentColor; pointer-events: none;
}
.dots__mais::after { content: '→'; }
.dots__lixo::after { content: '←'; }
/* Todas prefixadas com #dots: as regras de tema desta barra sao
`body.noite #dots button`, que carregam um id — sem o mesmo peso,
estas aqui perdiam e o vermelho nunca aparecia. */
/* passar o mouse: troca o desenho, sem mudar a cor do botão */
/* `!important` porque `body.noite #dots button:hover` tambem define
`color` e tem um seletor de tipo a mais — no tema escuro ela
ganhava, o + continuava pintado e a seta ficava por cima dele. */
#dots .dots__mais:hover { color: transparent !important; }
#dots .dots__lixo:hover > svg { opacity: 0; }
#dots .dots__mais:hover::after,
#dots .dots__lixo:hover::after { opacity: 1; color: var(--seta, #6b7684); }
/* clicar (ou arrastar): fica vermelho e a seta vira branca */
#dots .dots__mais:active, #dots .dots__mais.puxando,
#dots .dots__lixo:active, #dots .dots__lixo.puxando {
background: var(--red) !important;
}
#dots .dots__mais:active, #dots .dots__mais.puxando { color: transparent !important; }
#dots .dots__lixo:active > svg, #dots .dots__lixo.puxando > svg { opacity: 0; }
#dots .dots__mais:active::after, #dots .dots__mais.puxando::after,
#dots .dots__lixo:active::after, #dots .dots__lixo.puxando::after {
opacity: 1; color: #fff;
}
.dots__mais.puxando { cursor: e-resize; }
.dots__lixo.puxando { cursor: w-resize; }
/* a seta herda o cinza de cada tema */
body:not(.noite) { --seta: #6b7684; }
body.noite { --seta: #c2c2cc; }
/* ==========================================================
Caixa de número dos menus (margem, respiro, aproximar)
==========================================================
MESMO DESENHO DA CAIXA DO TAMANHO DA PÁGINA, que mora no mesmo
menu, três linhas acima: borda fina, fundo do tema, canto de .8vh
e a borda azulando no foco. Eram duas caixas de número a um palmo
uma da outra, cada uma com um desenho — pastilha cinza sem borda
aqui, campo com borda ali —, e nada explicava a diferença a quem
olhava as duas ao mesmo tempo.
As setinhas do navegador VOLTAM, e é a mesma razão. Elas tinham
sido tiradas porque, numa pastilha sem borda, apareciam como um
risco solto no canto; dentro de um campo com borda elas são o que
são em qualquer formulário — e a caixa do tamanho da página,
que nunca as escondeu, já mostrava isso.
As cores saem de variáveis, como lá: assim o tema escuro vem de
graça, em vez de uma regra `body.noite` para cada peça. */
/* A CAIXA EM VOLTA DO NUMERO. A medida e a mesma do campo de
tamanho da pagina: 7vh de largura e o mesmo respiro por dentro.
Parecido nao bastava — as duas aparecem na mesma tela, e duas
caixas quase iguais chamam mais atencao para a diferenca do que
duas diferentes.
ESTA REGRA SUMIU POR ENGANO MEU e voltou por isso: ao refazer o
campo de dentro eu cortei do comentario ate a primeira chave, e
ela estava no meio do caminho. Sem ela os numeros de margem e
respiro ficaram soltos na linha, enquanto os de tamanho da
pagina, que usam outra regra, seguiam encaixotados. */
.campo__num {
display: inline-flex; align-items: center; gap: .3vh;
width: 7vh; padding: .7vh .4vh;
background: var(--fundo); border: .12vh solid var(--borda); border-radius: .8vh;
}
/* A SETINHA DO NAVEGADOR SAI, E COM ELA O PROBLEMA INTEIRO.
Primeiro eu reservei uma faixa a direita para ela, e MEDI que a
faixa nao valia: o seletor `.campo__num input` perdia para
`.campo--num input[type="number"]`, do estudio.css, que tem um
atributo a mais. Pus o atributo aqui tambem, as duas passaram a
pesar igual, e a ordem dos arquivos — clean.css por ultimo —
desempatou a favor da faixa.
SO QUE A FAIXA NUNCA FOI O CONSERTO. O "200" continuou cortado, e a
conta por largura dizia que cabia: 35px livres para 24px de texto. O
que ela nao via e que a setinha ocupa lugar DENTRO da area de
conteudo do campo, e nao por cima dela — `scrollWidth` maior que
`clientWidth` com folga de sobra na conta. O campo rolava, e o
primeiro algarismo saia pela esquerda: "200" lido como "?00".
Nao ha o que reservar para quem nao precisa existir. A barrinha logo
ao lado faz o mesmo trabalho com mais precisao, e as setas do
teclado continuam funcionando num `input[type="number"]` sem os
botoes. Sem ela, o numero tem o campo inteiro e fica centrado de
verdade. */
/* E A REGRA VALE PARA TODO CAMPO DE NUMERO DO SITE, e nao so para
este. Sao catorze, e nenhum deles esta sozinho: cada um tem ao lado
um menos e um mais, uma barrinha ou uma lista de medidas prontas.
A setinha do navegador nao acrescenta nada em nenhum, e tira de
todos a mesma coisa — "retirar essas duas setas desse box numerico,
deixar apenas o botao de MENOS E DE MAIS".
TIRAR A SETINHA E O QUE CENTRALIZA O NUMERO. Ela nao fica POR CIMA
do campo, ocupa lugar DENTRO da area de conteudo: com ela ali, o
`text-align: center` centraliza no que sobra, e o numero aparece
torto para a esquerda. Foi o mesmo defeito que corrompeu o "200" do
tamanho da pagina, e e o mesmo conserto. */
input[type="number"] {
-moz-appearance: textfield; appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none; appearance: none; margin: 0;
}
.campo__num input[type="number"] {
width: 100%; border: 0; background: transparent; padding: 0;
font: inherit; font-size: max(1.4vh, 11.2px); font-weight: 700;
color: var(--ink); text-align: center;
}
.campo__num input:focus { outline: none; }
.campo__num:focus-within { border-color: var(--primaria-tinta); }
.campo__num i { font-style: normal; font-size: max(1.2vh, 9.6px); font-weight: 700; color: var(--suave); }
/* ==========================================================
PÁGINA INICIAL — a estante de projetos
==========================================================
Cobre a tela inteira e é por onde se entra. Vive dentro do
index em vez de ser um arquivo à parte: do lado de quem usa é a
página inicial, e do lado do código não há rota nova para
quebrar nem o mural para reconstruir.
========================================================== */
#inicio {
position: fixed; inset: 0; z-index: 400;
background: var(--fundo); color: var(--ink);
overflow: auto; padding: 4vh;
}
/* O #pen-canvas e uma tela fixa do tamanho da janela, com z-index 80:
escondendo so o #board, o desenho continuava por cima da estante
como um fantasma. Onde o mural nao esta em cena, ele sai inteiro —
o quadro e a tinta. */
body.na-estante #board,
body.na-estante #scrub,
body.na-estante #pen-canvas,
body.na-estante #toolbar,
body.na-estante #dots,
body.na-estante #help,
body.na-estante #topo-dir{ display: none !important; }
/* O EXEMPLO DO VISITANTE NASCE POR TRÁS DA ESTANTE (#264). As fábricas
medem as peças, e com `display: none` tudo mede zero: só enquanto ele
nasce, o mural volta ao layout sem aparecer e sem receber clique. A
opacidade cobre também o filho que se declare `visibility: visible`. */
body.na-estante.semeando-exemplo #board {
display: block !important; visibility: hidden; opacity: 0; pointer-events: none;
}
/* A estante dentro de uma folha, igual a tela da conta. Antes o
titulo, os cartoes e o rodape flutuavam soltos sobre a grade, e a
pagina terminava no meio da altura com fundo quadriculado ate
embaixo — parecia que nao tinha carregado. */
.inicio__caixa {
max-width: 132vh; margin: 0 auto;
background: var(--paper); color: var(--ink);
border: .12vh solid var(--borda); border-radius: 1.8vh;
box-shadow: var(--sombra-2);
padding: 3vh;
min-height: calc(100vh - 8vh); /* desconta so o respiro do #inicio */
}
@media (max-width: 800px) { .inicio__caixa { padding: 2vh; min-height: 0; } }
/* Sobre a folha branca, o cartao de projeto ficava branco no branco e
perdia a silhueta. A borda mais firme devolve o contorno sem
precisar de sombra maior, que sujaria a folha. */
.inicio__caixa .proj { border-color: var(--linha-forte, var(--borda)); }
.inicio__topo {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 2vh; margin-bottom: 3vh; flex-wrap: wrap;
}
.inicio__titulo {
font-family: 'Archivo Black', system-ui, sans-serif;
font-size: 3.4vh; letter-spacing: -.02em; margin: 0;
}
.inicio__conta { margin: .6vh 0 0; font-size: max(1.5vh, 12.0px); color: var(--suave); }
/* o aviso de quem entrou sem cadastro: discreto, mas sempre a vista */
/* O AVISO E O CONVITE NUMA CAIXA SO.
Eram dois blocos soltos, e o convite parecia nota de rodape do
aviso. O quadro e um: a nota perde a borda propria e o convite
ganha um risco acima, que separa sem dividir. */
.inicio__guarda {
margin: .8vh 0 0; padding: .7rem .9rem; border-radius: .7rem;
background: var(--fundo); border: 1px solid var(--borda);
}
.inicio__guarda .inicio__nota { margin: 0; }
/* ---------- a cota de espaco ----------
Uma barra e uma linha de texto, e nada mais. Ela responde a uma
pergunta so — quanto ainda cabe — e quem quer saber isso quer saber
de relance. A cor muda em 80% e em 98%: antes disso nao ha decisao
a tomar, e um vermelho permanente vira ruido. */
.inicio__cota { margin: 1.2vh 0 0; max-width: 34vh; }
.cota__trilho {
height: .7vh; border-radius: .4vh; background: var(--linha); overflow: hidden;
}
.cota__cheio {
display: block; height: 100%; width: 0; border-radius: .4vh;
background: var(--ink); transition: width .3s ease;
}
.cota--apertado .cota__cheio { background: #e8a33a; }
.cota--cheio .cota__cheio { background: var(--red); }
.cota__linha {
margin: .5vh 0 0; font-size: max(1.35vh, 10.8px); color: var(--suave);
}
.cota__linha b { color: var(--ink); font-weight: 700; }
.cota__linha i { font-style: normal; }
.cota--cheio .cota__linha b { color: var(--red); }
/* `align-items: center` PORQUE SEM ISSO O FLEX ESTICA.
O seletor de vista mede 37,5px por conta propria. Esticado ate
a altura do "Novo projeto", virava 45 — 6px que os icones nao
ocupam, deixando o respiro de cima e de baixo quase o dobro do
dos lados. A linha das camadas ja centralizava, e e por isso
que la o mesmo seletor sempre pareceu certo. */
.inicio__acoes { display: flex; align-items: center; gap: .8vh; }
.inicio__principal, .inicio__secundario {
font: inherit; font-size: max(1.6vh, 12.8px); font-weight: 700; cursor: pointer;
padding: 1.3vh 2.4vh; border-radius: 1.1vh; border: .12vh solid transparent;
}
.inicio__principal { background: var(--red); color: #fff; }
.inicio__principal:hover:not(:disabled) { background: var(--red-deep); }
.inicio__principal:disabled { opacity: .45; cursor: not-allowed; }
.inicio__secundario { background: transparent; color: var(--ink); border-color: var(--borda); }
.inicio__secundario:hover:not(:disabled) { background: var(--linha); }
.inicio__secundario:disabled { opacity: .45; cursor: not-allowed; }
/* A ESTANTE É SEMPRE UMA PILHA, E QUEM É GRADE É A SEÇÃO.
Ela já foi a própria grade quando não havia seções, e as seções a
viravam bloco por uma regra `:has`. Funcionou enquanto seção era
coisa de plano pago; no dia em que os vídeos ganharam a sua, bastou
existir um vídeo para o container virar bloco e os cartões soltos —
que estavam direto nele — esticarem de ponta a ponta. Foi o "olha o
tamanho que tá".
Agora cartão nenhum mora solto aqui: mesmo sem seções, eles vão
dentro de uma `.estante__grade`. Uma forma só, e não duas que
dependem de quem mais está na tela. */
.inicio__estante { display: block; }
/* ==========================================================
A estante: tamanho, seções e a estrela
==========================================================
Três tamanhos porque são três maneiras de procurar: pelo desenho
(grande), pela quantidade (pequena) e pelo nome (lista). A imagem
aparece nas três — lista sem imagem seria uma tabela de nomes, e
quem guarda peça visual reconhece pelo desenho antes do título.
A grade mora em cada seção, e não no container: senão os títulos
entrariam como células e ficariam lado a lado com os cartões. */
/* O respiro é entre QUAISQUER dois blocos da pilha, e não só entre
duas seções: a grade dos projetos soltos também é um bloco, e sem
isto o título "Vídeos" encostava no cartão de cima. */
.inicio__estante > * + * { margin-top: 3.2vh; }
.estante__titulo {
font-size: max(1.5vh, 12px); font-weight: 700; letter-spacing: .04em;
color: var(--suave); text-transform: uppercase; margin: 0 0 1.4vh;
}
.estante__grade {
display: grid; gap: 2vh;
grid-template-columns: repeat(auto-fill, minmax(34vh, 1fr));
}
.estante--p .estante__grade { grid-template-columns: repeat(auto-fill, minmax(21vh, 1fr)); gap: 1.4vh; }
.estante--p .proj__miniatura { height: 12vh; }
.estante--p .proj__pe { padding: .9vh 1.1vh; }
.estante--p .proj__nome { font-size: max(1.3vh, 10.4px); }
/* Na lista a imagem vira uma faixa à esquerda: pequena, mas ainda é
a peça — é por ela que se reconhece o projeto. */
.estante--l .estante__grade { grid-template-columns: 1fr; gap: .9vh; }
.estante--l .proj {
display: grid; grid-template-columns: 16vh 1fr auto; align-items: center;
}
.estante--l .proj__miniatura { height: 9vh; border-bottom: 0; border-right: .12vh solid var(--borda); }
.estante--l .proj__pe { padding: 0 1.6vh; }
.estante--l .proj__botoes { border-top: 0; padding: 0 1.2vh; }
.estante--l .proj__estrela { top: .8vh; left: .8vh; right: auto; }
.inicio__vista {
display: inline-flex; gap: .2vh; padding: .3vh;
background: var(--fundo); border: .12vh solid var(--borda); border-radius: 1vh;
}
.inicio__vista button {
width: 3.4vh; height: 3.4vh; border: 0; border-radius: .8vh; padding: .6vh;
background: none; color: var(--suave); cursor: pointer;
}
.inicio__vista button svg { width: 100%; height: 100%; display: block; }
.inicio__vista button:hover { background: var(--paper); color: var(--ink); }
.inicio__vista button.on { background: var(--paper); color: var(--primaria-tinta); box-shadow: var(--sombra-1); }
/* A estrela fica SOBRE a miniatura, e não no rodapé com os outros
botões: ela responde "é este?" enquanto os olhos varrem, e o rodapé
é onde se decide o que fazer depois de já ter achado. */
.proj__estrela {
position: absolute; top: 1vh; right: 1vh; z-index: 3;
width: 3.2vh; height: 3.2vh; padding: .6vh; border-radius: 50%;
border: 0; cursor: pointer; color: #fff;
background: rgba(20, 22, 26, .45);
opacity: 0; transition: opacity var(--t-botao) var(--mov-padrao), background var(--t-botao) var(--mov-padrao);
}
.proj__estrela svg { width: 100%; height: 100%; display: block; fill: none;
stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.proj:hover .proj__estrela, .proj:focus-within .proj__estrela { opacity: 1; }
.proj--favorito .proj__estrela { opacity: 1; background: rgba(20, 22, 26, .62); }
.proj--favorito .proj__estrela svg { fill: #ffd84d; stroke: #ffd84d; }
.proj__estrela:hover { background: rgba(20, 22, 26, .78); }
/* A ESTRELA CAI COMO A DA MARCA.
A entrada e a mesma da abertura (`ab-cadente`): chega de raspao,
esticada, e vira estrela ao parar. Encurtada, porque la ela
atravessa a tela e aqui cai dentro de um botao de 3,2vh.
`--acendeu` e posta no clique e tirada no fim da animacao. Sem
isso, toda repintura da estante faria as estrelas ja favoritadas
cairem de novo — e a estante repinta a cada favorito, justamente
porque a secao de favoritos muda de tamanho. */
.proj__estrela--acendeu svg { animation: estrela-cai .42s var(--mov-entrada) both; }
@keyframes estrela-cai {
0% { opacity: .2; transform: translate(42%, -34%) scaleX(1.5) scaleY(.8) rotate(-18deg); }
58% { opacity: 1; transform: translate(-6%, 5%) scaleX(1.1) scaleY(1.04) rotate(4deg); }
100% { opacity: 1; transform: none; }
}
/* Quem pediu para o sistema nao animar nao recebe a queda: a cor
sozinha ja diz que o projeto virou favorito. */
@media (prefers-reduced-motion: reduce) {
.proj__estrela--acendeu svg { animation: none; }
}
/* A miniatura vira o alvo principal de abrir. */
/* A MINIATURA E UMA FOTOGRAFIA (#244).
Ela e uma copia viva das pecas do mural, e cada peca traz os
proprios estilos junto: "o projeto que tem video importado do meu
pc muda o ponteiro do mouse ao passar em cima".
A PRIMEIRA TENTATIVA FOI BRIGAR POR CURSOR, e perdeu: `.obj .txt`
do estudio.css pede `cursor: text` com duas classes, e
`.proj__miniatura *` tem uma so. Dava para empatar e ganhar na
ordem dos arquivos, mas seria o comeco de uma corrida — cada peca
nova com cursor proprio pediria uma regra nova aqui.
ENTAO A REGRA DIZ A VERDADE, e o cursor vem junto de graca: dentro
da miniatura nada e interativo. E uma foto do mural, e nao o mural.
Com os filhos fora do alcance do ponteiro, o navegador nem consulta
o cursor deles — ele ve a miniatura e so. De quebra, ninguem
seleciona um texto nem da play num video por engano.
O CLIQUE CONTINUA CHEGANDO: o ouvinte mora na propria miniatura, e
nao nos filhos. Medido no meio dela — quem esta sob o ponteiro e a
`.proj__miniatura`, o cursor e `pointer`, e o alvo do clique e ela.
E fica a MAOZINHA, e nao a seta: a miniatura inteira abre o
projeto, e a seta esconderia isso. O relato pede que o cursor nao
MUDE, que e o que esta garantido aqui. */
.proj__miniatura { cursor: pointer; }
.proj__miniatura * { pointer-events: none; }
/* ---------- o cartao de um video ----------
A miniatura e o proprio video, com os controles do navegador: ver
antes de baixar e a pergunta que a pessoa faz ao olhar um cartao
destes, e um player nativo responde melhor que qualquer botao que
eu desenhasse. Fundo preto porque video tem barra preta, e barra
preta sobre papel branco parece defeito. */
.proj--video .proj__miniatura { background: #11161d; cursor: default; }
.proj--video .video__tela {
width: 100%; height: 100%; object-fit: contain; display: block; background: #11161d;
}
.estante__secao--videos .estante__titulo { color: var(--red); }
.proj {
border: .12vh solid var(--borda); border-radius: 1.4vh;
background: var(--paper); overflow: hidden;
box-shadow: var(--sombra-1); transition: box-shadow var(--t-botao) var(--mov-padrao), transform var(--t-botao) var(--mov-padrao);
}
.proj:hover { box-shadow: var(--sombra-2); transform: translateY(-.3vh); }
/* A miniatura é a primeira página de verdade, encolhida — com três
projetos parecidos o nome sozinho não diz qual é qual. */
.proj__miniatura {
position: relative; height: 20vh; overflow: hidden;
background: var(--fundo); border-bottom: .12vh solid var(--borda);
}
/* Ancorado no canto, e nao no centro: o palco nao tem largura
propria — quem tem tamanho e a pagina dentro dele — entao
`margin-left: -50%` media contra zero e jogava tudo para fora da
caixa. Do canto com `transform-origin: 0 0`, o que se ve e o
comeco da pagina, que e onde o conteudo costuma estar. */
.proj__palco {
position: absolute; left: 0; top: 0;
transform-origin: 0 0;
pointer-events: none;
}
.proj__palco .panel {
position: static !important; margin: 0 !important;
box-shadow: none !important;
}
.proj__pe { padding: 1.4vh 1.6vh .8vh; }
/* O NOME RESERVA A CAIXA DO CAMPO QUE O SUBSTITUI (#244).
Renomear troca este `` por um `` nao tinha: medido, 25,63
contra 20,00 — 5,63px a mais. O cartao crescia, a pagina crescia, a
barra de rolagem aparecia, e era a barra que empurrava a box branca
inteira para o lado. "Ao clicar em renomear a box branca inteira se
move."
SO NO EIXO VERTICAL. Reservar tambem o lateral deixava a altura
certa e tirava o nome do alinhamento com a data logo abaixo —
medido em 4,75px de desvio. O recuo lateral fica so no campo, que e
o que todo campo de texto faz, e a borda dele nasce exatamente onde
o nome estava. */
.proj__nome {
display: block; font-size: max(1.7vh, 13.6px); font-weight: 700;
padding-block: .2vh;
border-block: .12vh solid transparent;
}
.proj__quando { font-size: max(1.3vh, 10.4px); color: var(--suave); }
.proj__botoes { display: flex; gap: .6vh; padding: 0 1.6vh 1.4vh; }
.proj__botoes button {
font: inherit; font-size: max(1.35vh, 10.8px); font-weight: 700; cursor: pointer;
padding: .9vh 1.2vh; border-radius: .9vh;
background: var(--linha); color: var(--ink); border: 0;
}
/* O HOVER DOS BOTOES, IGUAL AO DA ABA DE CAMADAS (#244).
"Troque a cor dos botoes ao passar o mouse igual como e na aba de
layers." La o padrao ja existe e tem sentido:
.cam-ir:hover { background: var(--primaria); color: #fff; }
.cam-tirar:hover { background: var(--red); color: #fff; }
Azul para acao neutra, VERMELHO para a destrutiva. Aqui era um
cinza um pouco mais escuro para os tres, que nao separava renomear
de apagar — e apagar um projeto e o unico gesto desta fileira que
nao tem volta.
O `:not([data-acao="apagar"])` e o que faz o vermelho ganhar sem
precisar de peso extra: as duas regras ficam com a mesma conta, e a
de baixo vence por ordem. Empilhar uma excecao mais pesada por cima
e como as redes de `:not()` crescem. */
.proj__botoes button:hover:not([data-acao="apagar"]) {
background: var(--primaria); color: #fff;
}
.proj__botoes button[data-acao="apagar"]:hover {
background: var(--red); color: #fff;
}
/* O Duplicar desliga com a estante cheia (#389), como o "Novo projeto":
apagado, e sem o azul do hover, que diria que ele faz alguma coisa. */
.proj__botoes button:disabled,
.proj__botoes button:disabled:hover,
.proj__botoes button:disabled:active {
opacity: .4; cursor: not-allowed; background: var(--linha); color: var(--ink); transform: none;
}
.proj__abrir { flex: 1; background: var(--ink) !important; color: var(--paper) !important; }
.proj__abrir:hover { opacity: .88; }
.inicio__vazio, .inicio__nota {
font-size: max(1.5vh, 12.0px); color: var(--suave); margin-top: 2.4vh; line-height: 1.6;
}
.inicio__vazio p { margin: 0; }
/* O AVISO E UMA FAIXA DE TRES PARTES: o selo, o que se diz, e a
saida. Era um paragrafo com um botao embaixo; com os tres itens do
degrau seguinte, a leitura vira "isto aconteceu / isto voce ganha /
e o botao", que e a ordem em que a pergunta nasce.
Numa tela estreita as tres partes viram uma coluna so, e os itens
deixam de ser fileira: largura e o que falta ali, e o que importa e
que nenhum deles saia cortado. */
.inicio__cheio {
/* O TOPO E MAIS CURTO QUE O PE, de proposito. MEDIDO: com 1.8vh em
cima, o titulo caia a 29,8px da borda — 13px a mais que o padding,
porque a fileira de cima e esticada pelo bloco do botao, que e
mais alto que o selo e que o texto. Encurtando o padding, o vao
que se VE volta a ser o que se pediu. */
margin-top: 2.4vh; padding: 1vh 2vh 1.5vh; border-radius: 1.2vh;
background: #fff5f6; border: .12vh solid #ffd9dd;
font-size: max(1.5vh, 12.0px); line-height: 1.6;
/* DUAS FILEIRAS A ESQUERDA, UMA COLUNA A DIREITA. O que se diz
ocupa as duas linhas; a saida atravessa as duas, e por isso nao
sobra quina vazia embaixo do botao. */
display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: center; column-gap: 1.8vh;
}
/* A fileira de cima: o selo e o que aconteceu. */
.inicio__cheio-topo {
grid-column: 1; grid-row: 1;
display: flex; align-items: center; gap: 1.8vh; flex-wrap: wrap;
}
.inicio__cheio-ic {
flex: none; width: 4.6vh; height: 4.6vh; border-radius: 50%;
display: grid; place-items: center;
background: var(--red-leve); color: var(--red-tinta);
}
.inicio__cheio-ic svg { width: 2.4vh; height: 2.4vh; fill: currentColor; }
.inicio__cheio-dizer { flex: 1 1 24vh; min-width: 0; }
.inicio__cheio b { display: block; margin-bottom: .4vh; color: var(--red-tinta); }
.inicio__cheio i { font-style: normal; font-weight: 700; }
/* OS TRES ITENS DO DEGRAU SEGUINTE. Cada um diz o que e e, embaixo,
em que medida — "Exportar / PNG, PDF e .linealt". Sem a segunda
linha o item vira promessa vaga; com ela, vira contrato. */
/* A fileira de baixo atravessa a caixa inteira: ela comeca na borda,
rente ao selo, e nao recuada com o titulo. */
.inicio__cheio-itens {
grid-column: 1; grid-row: 2;
list-style: none; margin: 1.6vh 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: .8vh 2.4vh;
}
/* O visitante não tem fileira de itens: a frase já diz o que a conta
libera (#370). O `display: flex` acima venceria o `hidden`. */
.inicio__cheio-itens[hidden] { display: none; }
.inicio__cheio-itens li { display: flex; align-items: center; gap: .9vh; }
.inicio__cheio-itens svg {
flex: none; width: 2.6vh; height: 2.6vh; padding: .5vh;
/* SEM FUNDO: o icone sozinho, na cor da marca.
O quadradinho passou por branco e pelo cinza dos botoes do cartao,
e nenhum dos dois aparecia sobre o rosa claro da tarja — a conta
explica por que: 1,069 e 1,059 de contraste, ou seja, quase a
mesma claridade do fundo em ambos. Um fundo que nao se ve nao e um
fundo: e um padding com nome.
Sem ele, quem marca a diferenca e o PROPRIO icone, no azul da
marca sobre o rosa — que e contraste de cor, e nao de claridade. */
color: var(--primaria-tinta); fill: currentColor; box-sizing: content-box;
}
.inicio__cheio-itens b { display: block; margin: 0; color: var(--ink); line-height: 1.25; }
.inicio__cheio-itens small { display: block; color: var(--suave); line-height: 1.25; }
.inicio__cheio-acao {
grid-column: 2; grid-row: 1 / span 2; align-self: center;
text-align: center;
}
/* Numa tela estreita a grade vira uma coluna so, e a saida desce para
o fim — empilhada, ela e a ultima coisa que se le, que e a ordem
certa: o que aconteceu, o que se ganha, e so entao o botao. */
@media (max-width: 760px) {
.inicio__cheio { grid-template-columns: minmax(0, 1fr); }
.inicio__cheio-acao { grid-column: 1; grid-row: auto; margin-top: 1.2vh; }
}
/* A letrinha encosta mais no botao: cada pixel entre os dois estica a
fileira inteira, e com ela o vao do topo. */
.inicio__cheio-acao small { display: block; margin-top: .4vh; color: var(--suave); }
/* O BOTAO DA SAIDA SEGUE A REGRA DE COR DAS ACOES (#373): vermelho e
a acao principal da tela, uma por tela; azul e selecao e estado no
editor; grafite e o resto. Ele era azul, e o mesmo "Criar conta
gratis" era vermelho no popup dos planos — a mesma acao com duas
cores, conforme a porta por onde se chegava.
Para o visitante e para a estante cheia, ele E a acao principal: o
"Novo projeto" esta desligado. No convite do gratis com espaco, a
principal e o "Novo projeto", vermelho no alto, e o "Ver o Premium"
fica grafite, como o "Abrir" dos cartoes. */
.inicio__cheio button {
margin-top: 1.1vh; font: inherit; font-weight: 700; cursor: pointer;
padding: .9vh 1.6vh; border-radius: .9vh; border: 0;
background: var(--red); color: #fff;
}
.inicio__cheio button:hover { background: var(--red-deep); }
.inicio__cheio--convite:not(.inicio__cheio--primeiro) button { background: var(--ink); color: var(--paper); }
.inicio__cheio--convite:not(.inicio__cheio--primeiro) button:hover { background: var(--ink); opacity: .88; }
body.noite .inicio__cheio { background: #2a1e1f; border-color: #4a2c30; }
/* O CONVITE DO PLANO GRÁTIS (#267). A mesma tarja, sem o alarme: com
espaço sobrando nada aconteceu de errado, então o vermelho sai do
fundo, do selo e do título. O azul da marca é o do botão, que já era
a ação que a gente quer que a pessoa faça. */
.inicio__cheio--convite { background: var(--primaria-leve); border-color: #cfdcf8; }
.inicio__cheio--convite .inicio__cheio-ic { background: #fff; color: var(--primaria-tinta); }
.inicio__cheio--convite .inicio__cheio-dizer b { color: var(--ink); }
body.noite .inicio__cheio--convite { background: #1b2233; border-color: #2c3a55; }
body.noite .inicio__cheio--convite .inicio__cheio-ic { background: #26314a; }
body.noite .proj__abrir { background: #f0eeea !important; color: #1d1c22 !important; }
/* ==========================================================
Janela de novo projeto
========================================================== */
.modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: safe center; }
.modal__fundo { position: absolute; inset: 0; background: rgba(10,12,16,.55); }
.modal__caixa {
position: relative; width: min(58vh, 92vw);
max-height: 92vh; overflow: auto;
background: var(--paper); color: var(--ink);
border: .12vh solid var(--borda); border-radius: 1.6vh;
box-shadow: var(--sombra-3); padding: 2.6vh;
}
.modal__titulo {
font-family: 'Archivo Black', system-ui, sans-serif;
font-size: max(2.3vh, 18.4px); margin: 0 0 1.8vh;
}
.modal__rotulo {
display: block; font-size: max(1.25vh, 10.0px); font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; color: var(--suave); margin: 1.8vh 0 .7vh;
}
.modal__campo {
width: 100%; font: inherit; font-size: max(1.6vh, 12.8px); padding: 1.2vh 1.4vh;
border: .12vh solid var(--borda); border-radius: 1vh;
background: var(--fundo); color: var(--ink);
}
.modal__campo:focus { outline: none; border-color: var(--primaria-tinta); box-shadow: 0 0 0 .22vh rgba(37,99,235,.18); }
.modal__formatos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7vh; }
.modal__formatos button {
display: flex; flex-direction: column; align-items: center; gap: .5vh;
padding: 1.1vh .5vh; border-radius: 1vh; cursor: pointer;
font: inherit; font-size: max(1.3vh, 10.4px); font-weight: 700;
background: var(--fundo); color: var(--ink); border: .12vh solid var(--borda);
}
.modal__formatos button i { font-style: normal; font-size: max(1.05vh, 8.4px); color: var(--suave); font-weight: 600; }
.modal__formatos button:hover { border-color: var(--primaria-tinta); }
.modal__formatos button.on { border-color: var(--primaria-tinta); background: var(--primaria-leve); color: var(--primaria-tinta); }
/* a miniatura do formato é a própria proporção, não um desenho */
/* A largura sai do menor entre o teto e o que a altura permite. Antes
era largura fixa com max-height, e a altura das proporções em pé era
cortada: 9:16, 3:4 e 5:7 desenhavam todas o mesmo quadrado, logo na
seção que existe para mostrar que elas são diferentes. */
.mini-fm {
width: min(3.4vh, 2.6vh * var(--r, 1));
aspect-ratio: var(--r, 1);
border: .16vh solid currentColor; border-radius: .3vh; opacity: .7;
}
.modal__medida {
display: flex; align-items: center; gap: .6vh; margin-top: 1vh;
font-size: max(1.3vh, 10.4px); color: var(--suave);
}
.modal__medida input {
width: 8vh; font: inherit; font-size: max(1.4vh, 11.2px); text-align: center;
padding: .8vh .4vh; border-radius: .8vh;
background: var(--fundo); color: var(--ink); border: .12vh solid var(--borda);
}
.modal__medida input:focus { outline: none; border-color: var(--primaria-tinta); }
.modal__medida b { font-weight: 600; }
.modal__medida i { font-style: normal; }
.modal__caixinha {
display: flex; gap: 1vh; align-items: flex-start; cursor: pointer;
margin-top: 2vh; padding: 1.2vh; border-radius: 1vh; background: var(--fundo);
}
.modal__caixinha input { width: 1.8vh; height: 1.8vh; margin-top: .2vh; accent-color: var(--primaria); flex: none; }
.modal__caixinha b { display: block; font-size: max(1.5vh, 12.0px); }
.modal__caixinha i { font-style: normal; font-size: max(1.3vh, 10.4px); color: var(--suave); }
.modal__acoes { display: flex; justify-content: flex-end; gap: .8vh; margin-top: 2.4vh; }
.modal__cancelar, .modal__ok {
font: inherit; font-size: max(1.5vh, 12.0px); font-weight: 700; cursor: pointer;
padding: 1.2vh 2.2vh; border-radius: 1vh; border: .12vh solid transparent;
}
.modal__cancelar { background: transparent; color: var(--ink); border-color: var(--borda); }
.modal__cancelar:hover { background: var(--linha); }
.modal__ok { background: var(--red); color: #fff; }
.modal__ok:hover { background: var(--red-deep); }
/* A JANELA DE APAGAR (#235). A frase logo abaixo do título, e o que se
perde numa lista curta, um item por linha. O "antes" (exportar ou
baixar) fica à esquerda, longe do Apagar: é a saída de quem ainda
quer guardar, e não um terceiro jeito de confirmar. */
.apagar .modal__nota { margin: 0; color: var(--ink); font-size: max(1.5vh, 12.0px); }
.apagar__perde {
margin: 1.2vh 0 0; padding: 1.2vh 1.6vh; list-style: none;
background: var(--linha); border-radius: 1vh;
font-size: max(1.45vh, 11.6px); line-height: 1.7; color: var(--suave);
}
.apagar__perde li::before { content: '\2022'; margin-right: .8vh; color: var(--red); }
.apagar__antes { margin-right: auto; }
.apagar button:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 2px; }
/* ==========================================================
Entrar
==========================================================
A conta aparece ao lado dos botoes da estante, e nao numa faixa
propria no topo: entrar e uma acao entre outras, nao um portao.
========================================================== */
/* Tema, idioma e conta: tres botoes redondos do mesmo tamanho, antes
do botao vermelho. Redondos porque nao sao acoes sobre os projetos
— sao ajustes de quem esta olhando. */
.inicio__redondo {
display: grid; place-items: center; flex: none;
width: 4.6vh; height: 4.6vh; border-radius: 50%; cursor: pointer;
background: transparent; color: var(--ink);
border: .12vh solid var(--borda); padding: 0;
}
.inicio__redondo:hover { background: var(--linha); border-color: var(--suave); }
.inicio__redondo svg { width: 2.2vh; height: 2.2vh; }
.inicio__bandeira {
font: inherit; font-size: max(1.25vh, 10.0px); font-weight: 800; letter-spacing: .04em;
}
/* Com foto o botao e a propria foto: o anel vermelho em volta so
apertava o retrato. Sem foto ele continua sendo o circulo vermelho
com a inicial, e ai a borda da mesma cor nao apareceria de qualquer
jeito. */
/* Com foto o botao e a propria foto. A borda precisa ir a ZERO, e nao
so ficar transparente: transparente ela continua ocupando o lugar, e
o fundo vermelho do botao pinta por baixo dela — sobrava um anel de
1px em volta do retrato. Sem foto o botao segue sendo o circulo
vermelho com a inicial. */
.inicio__redondo.tem-conta { background: var(--red); border-width: 0; }
.inicio__redondo.tem-conta:hover { border-width: 0; background: var(--red); }
/* Com foto, o vermelho sai. Ele existe para ser o fundo da inicial de
quem não tem retrato; atrás de uma foto ele não é fundo nenhum — só
um fio que escapa pela borda do círculo, onde o recorte suaviza os
pixels e deixa passar a cor de trás. Era o "traço vermelho" que se
via em volta do rosto. */
.inicio__redondo.tem-conta:has(img),
.inicio__redondo.tem-conta:has(img):hover { background: transparent; }
.brand__inicial:has(img), .conta__inicial:has(img) { background: transparent; }
/* Precisa ser um circulo de verdade, e nao um span solto: e ele que
recorta a foto. Sem tamanho nem raio, a foto saia quadrada e o
vermelho do botao aparecia atras dela. */
.inicio__inicial {
display: grid; place-items: center;
width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
font: inherit; font-size: max(1.9vh, 15.2px); font-weight: 800; color: #fff; line-height: 1;
}
/* ==========================================================
A vitrine
==========================================================
Diferente do resto do site, aqui as medidas sao em rem e nao em vh.
O editor e uma tela so, onde vh faz sentido; a vitrine e uma pagina
que rola, lida em telefone e em monitor grande, e vh a faria
encolher a letra justamente onde a tela e pequena.
========================================================== */
/* Ate o roteador decidir para onde ir, o mural nao aparece. Sem isto
ele pintava no primeiro quadro — guias e tudo — e so depois era
coberto pela tela certa, o que dava um fantasma atravessado a cada
F5. A classe sai em vitrine.js, assim que a decisao e tomada. */
/* Tudo, e nao uma lista. A lista anterior esquecia alguem a cada
elemento novo — foi assim que a janela de Atalhos continuou piscando
depois de o mural ja ter parado. Enquanto o roteador nao decide, a
pagina inteira fica fora de vista; as telas de destino ja nascem
com `hidden`, entao esconder tudo nao tira nada de ninguem. */
html.decidindo body > * { visibility: hidden !important; }
/* AS CORES DA VITRINE SÃO AS DO CANVAS (#176): "azul para o básico e
suavizar, vermelho para dar importância/decisão". O azul é o mesmo
`--primaria` da seleção e dos controles do editor; o vermelho fica só
no que pede uma decisão (começar, criar conta), na marca, nas frases
de destaque, no aviso importante e no REC da gravação.
O fundo leva um pouco do azul por cima do cinza do mural, e por isso
é uma mistura e não uma cor fixa: no tema escuro ela sai do escuro. */
#vitrine {
--vit-fundo: color-mix(in srgb, var(--primaria) 4%, var(--fundo));
position: fixed; inset: 0; z-index: 390; overflow: auto;
background: var(--vit-fundo); color: var(--ink);
}
body.na-vitrine #board,
body.na-vitrine #scrub,
body.na-vitrine #pen-canvas,
body.na-vitrine #toolbar,
body.na-vitrine #dots,
body.na-vitrine #help,
body.na-vitrine #topo-dir{ display: none !important; }
.vit__topo {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding: 1.1rem clamp(1rem, 5vw, 3.5rem);
border-bottom: 1px solid var(--borda);
position: sticky; top: 0; z-index: 2;
background: var(--vit-fundo);
}
/* O logotipo do topo, em caixa baixa e com "alt" em vermelho — a
assinatura da marca. O "line" fica na tinta do tema, entao ele se lê
no claro e no escuro sem duas versões do arquivo. */
.vit__marca {
font-family: 'Archivo Black', system-ui, sans-serif;
font-size: 1.15rem; letter-spacing: -.01em;
text-transform: lowercase;
}
.vit__marca em { font-style: normal; color: var(--red); }
/* ---- o pingo do "i" da marca ----
Medidas tiradas da propria Archivo Black para o pingo nascer da
fonte e nao de chute: a haste tem .2em de largura com .07em de
folga a esquerda dentro do avanco, a altura de x fica a .53em da
linha de base e o pingo original tem .13em de altura. A unica coisa
que mudamos e o vao — de .067em para .11em —, o bastante para
sobreviver ao antialiasing em corpo pequeno. O quadradinho e
encaixado com margem negativa para nao empurrar o "n" seguinte. */
.marca__i { position: relative; }
.marca__i::before {
content: ''; display: inline-block;
width: .2em; height: .13em;
margin-left: .07em; margin-right: -.27em;
background: currentColor;
vertical-align: .64em; /* .53 da altura de x + .11 de vao */
}
.vit__topo-acoes { display: flex; align-items: center; gap: .5rem; }
.vit__redondo {
display: grid; place-items: center; flex: none;
width: 2.4rem; height: 2.4rem; border-radius: 50%; cursor: pointer;
background: transparent; color: var(--ink);
border: 1px solid var(--borda); padding: 0;
}
.vit__redondo:hover { background: var(--linha); }
.vit__redondo svg { width: 1.1rem; height: 1.1rem; }
.vit__vazado, .vit__cheio {
font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer;
padding: .65rem 1.2rem; border-radius: .7rem; border: 1px solid transparent;
white-space: nowrap;
}
.vit__vazado { background: transparent; color: var(--ink); border-color: var(--borda); }
.vit__vazado:hover { background: var(--linha); }
.vit__cheio { background: var(--red); color: #fff; }
.vit__cheio:hover { background: var(--red-deep); }
.vit__cheio--g { font-size: 1.05rem; padding: .95rem 2rem; border-radius: .85rem; }
/* No telefone os quatro botoes do topo nao cabem e empurram a pagina
para o lado. "Criar conta" sai: e o mesmo destino do botao grande da
capa, que fica logo abaixo e e o dobro do tamanho. */
@media (max-width: 560px) {
.vit__topo { padding: .9rem 1rem; }
.vit__marca { font-size: 1rem; }
#vit-criar { display: none; }
}
/* ---- capa ----
Duas colunas: a promessa a esquerda, o filme cumprindo a promessa a
direita — a frase e o produto no mesmo olhar, sem rolar. O texto e
curto de proposito: quem chega decide em segundos, e o filme fala
mais que um paragrafo. Abaixo de 960px as colunas empilham. */
.vit__capa {
padding: clamp(1.5rem, 3.5vw, 3rem) clamp(1rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
max-width: 90rem; margin: 0 auto;
display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
}
.vit__capa-txt { text-align: left; }
.vit__capa h1 {
font-family: 'Archivo Black', system-ui, sans-serif;
font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1.02;
letter-spacing: -.025em; margin: 0 0 1.3rem;
}
.vit__capa h1 em { color: var(--red); font-style: normal; display: inline-block; }
.vit__capa .vit__linha { max-width: 32rem; margin: 0 0 1.8rem; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.vit__capa-acoes { display: flex; flex-wrap: wrap; gap: .8rem; }
.vit__capa-nota { margin: .8rem 0 0; font-size: .92rem; color: var(--suave); }
@media (max-width: 960px) {
.vit__capa { grid-template-columns: minmax(0, 1fr); }
.vit__capa-txt { text-align: center; }
.vit__capa .vit__linha { margin-left: auto; margin-right: auto; }
.vit__capa-acoes { justify-content: center; }
}
.vit__vazado--g {
font-size: 1.05rem; padding: .95rem 1.6rem; border-radius: .85rem;
background: var(--paper);
}
/* ---- o filme da capa ---- */
.vreel {
position: relative; max-width: 68rem; margin: clamp(1.4rem, 3vw, 2.2rem) auto 0;
border-radius: 1.1rem; overflow: hidden;
border: 1px solid var(--borda); background: var(--fundo);
box-shadow: var(--sombra-3);
}
.vreel__janela { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
@media (max-width: 640px) { .vreel__janela { aspect-ratio: 4 / 3; } }
.vreel__mundo {
position: absolute; left: 0; top: 0; width: 1600px; height: 900px;
transform-origin: 0 0; will-change: transform, filter;
}
.vreel__mundo::before {
content: ''; position: absolute; inset: -700px; z-index: -1;
background-color: var(--fundo);
background-image:
linear-gradient(var(--linha-forte) 1px, transparent 0),
linear-gradient(90deg, var(--linha-forte) 1px, transparent 0),
linear-gradient(var(--linha) 1px, transparent 0),
linear-gradient(90deg, var(--linha) 1px, transparent 0);
background-size: 70px 70px, 70px 70px, 14px 14px, 14px 14px;
}
.vreel__mundo > div { position: absolute; }
.vreel__fios, .vreel__riscos { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* O traco que a mao desenha ao chegar na cena. Some de uma vez ao
recomecar e aparece correndo: e o gesto de circular um detalhe. */
.vreel__riscos path {
fill: none; stroke: var(--red); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 1; stroke-dashoffset: 1;
}
.vreel__riscos path.on { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1); }
/* CADA ANOTACAO COM UMA FERRAMENTA E UMA COR. Antes todas eram a
caneta vermelha, e o vermelho se confundia com a barra do grafico e
com o "+38%": "melhore as cores dos brushs para se diferenciar dos
objetos da cena". Agora o filme mostra o leque do editor — caneta,
marca-texto, spray, tracejado e forma —, cada um na cor dele. */
.vreel__riscos path[data-tinta] { stroke: var(--cor, var(--red)); }
.vreel__riscos path[data-tinta="caneta"] { stroke-width: 8; }
.vreel__riscos path[data-tinta="forma"] { stroke-width: 7; }
/* O marca-texto e sempre uma reta, como no editor (provas/marcatexto-anda-reto.mjs): no filme ele ja foi uma curva solta, que a ferramenta nao faz. */
.vreel__riscos path[data-tinta="marca"] { stroke-width: 30; stroke-linecap: butt; opacity: .55; }
.vreel__riscos path[data-tinta="spray"] { stroke-width: 14; filter: url(#vreel-spray); }
/* O tracejado nao corre como os outros: o risco ja usa o tracejado
para ser cortado em pedacos, entao ele aparece de uma vez. E a
medida e em unidades do quadro, e nao em fracao do caminho (por
isso esses paths nao tem `pathLength`): em fracao, um caminho curto
saia com os pedacos colados e um longo com eles espalhados — "esse
tracejado nao esta padrao". Assim todo tracejado tem o mesmo passo. */
.vreel__riscos path[data-tinta="tracejado"] {
stroke-width: 7; stroke-dasharray: 22 16; stroke-dashoffset: 0; opacity: 0;
}
.vreel__riscos path[data-tinta="tracejado"].on { opacity: 1; transition: opacity .5s ease; }
.vreel__filtros { position: absolute; width: 0; height: 0; }
.vreel__marco { position: absolute; width: 0; height: 0; }
/* A luz: o centro da cena aceso e as bordas no escuro. Ao revelar o
quadro inteiro, o ambiente acende. */
.vreel__luz {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 46% 52% at 50% 50%, rgba(255, 233, 176, .18), transparent 70%),
radial-gradient(ellipse 60% 70% at 50% 50%, transparent 30%, rgba(6, 8, 14, .58) 100%);
transition: opacity .9s ease;
}
.vreel.revelado .vreel__luz { opacity: .2; }
.vreel__rec {
position: absolute; left: 1rem; top: .9rem;
display: inline-flex; align-items: center; gap: .45rem;
padding: .3rem .7rem; border-radius: 999px;
background: rgba(10, 12, 18, .72); color: #fff;
font: 700 .78rem/1 'Outfit', system-ui, sans-serif; letter-spacing: .06em;
}
.vreel__rec i {
width: .55rem; height: .55rem; border-radius: 50%; background: #ef2b2b;
animation: vreel-pisca 1.2s steps(2, start) infinite;
}
.vreel__rec b { font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes vreel-pisca { to { visibility: hidden; } }
.vreel__legenda {
position: absolute; left: 1rem; bottom: .9rem; margin: 0;
padding: .45rem .8rem; border-radius: .6rem;
background: rgba(10, 12, 18, .72); color: #fff; font-size: .88rem; font-weight: 600;
max-width: calc(100% - 6rem);
}
.vreel__tecla {
position: absolute; right: 1rem; bottom: .9rem;
min-width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
border-radius: .55rem; background: var(--paper); color: var(--ink);
border: 1px solid var(--borda); border-bottom-width: 4px;
font: 700 1.1rem/1 'Outfit', system-ui, sans-serif;
transition: transform .12s, border-bottom-width .12s, background .12s;
}
.vreel__tecla.on { transform: translateY(3px); border-bottom-width: 1px; background: var(--primaria); color: #fff; }
/* ---- o quadro de investigacao do filme ----
Papeis reais de um caso: retrato, recorte de jornal, mapa, recibo,
post-it e a ficha da conclusao, cada um preso por alfinete e
ligado pelo barbante. Os papeis tem cor propria, como papel tem:
nao mudam com o tema, so o canvas em volta muda. */
.vcaso, .vcaso__titulo, .vcaso__pino { position: absolute; }
.vcaso { box-shadow: 0 14px 30px rgba(20, 24, 40, .22), 0 2px 4px rgba(20, 24, 40, .12); }
.vcaso__titulo {
margin: 0; font-family: 'Archivo Black', system-ui, sans-serif; font-size: 2.6rem;
text-transform: uppercase; letter-spacing: .02em; color: var(--ink);
}
.vcaso__titulo span { color: var(--red); }
.vcaso__foto { width: 230px; padding: 14px 14px 46px; background: #fff; transform: rotate(-3deg); }
/* o retrato: uma silhueta sobre fundo de parede, como foto de vigilancia */
.vcaso__foto i {
display: block; aspect-ratio: 1;
background:
radial-gradient(circle at 50% 38%, #2b2f38 0 18%, transparent 18.5%),
radial-gradient(ellipse 42% 30% at 50% 92%, #2b2f38 0 98%, transparent 100%),
linear-gradient(180deg, #9fb4c6, #6f8597);
filter: grayscale(.35) contrast(1.05);
}
.vcaso__foto span {
position: absolute; left: 0; right: 0; bottom: 10px; text-align: center;
font-family: 'Caveat', cursive; font-size: 1.7rem; color: #333;
}
.vcaso__jornal {
width: 360px; padding: 18px 20px 20px; background: #f3efe4; color: #23211c;
transform: rotate(1.5deg); font-family: Georgia, 'Times New Roman', serif;
}
.vcaso__jornal small {
display: block; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 2px solid #23211c;
font-size: .95rem; letter-spacing: .08em; text-transform: uppercase;
}
.vcaso__jornal b { display: block; font-size: 1.85rem; line-height: 1.12; margin-bottom: 14px; }
.vcaso__jornal i { display: block; height: 7px; margin: 9px 0; background: #c9c3b3; border-radius: 2px; }
.vcaso__jornal i:nth-of-type(2) { width: 92%; }
.vcaso__jornal i:nth-of-type(4) { width: 64%; }
.vcaso__mapa {
width: 360px; height: 240px; transform: rotate(-2deg);
background:
linear-gradient(25deg, transparent 47%, #fff 47% 53%, transparent 53%),
linear-gradient(115deg, transparent 46%, #fff 46% 50%, transparent 50%),
repeating-linear-gradient(0deg, transparent 0 38px, rgba(255, 255, 255, .7) 38px 42px),
repeating-linear-gradient(90deg, transparent 0 52px, rgba(255, 255, 255, .7) 52px 56px),
#dfe8d3;
}
.vcaso__mapa .vcaso__x, .vcaso__mapa small { position: absolute; }
.vcaso__x { font: 700 2.4rem/1 system-ui, sans-serif; color: #ef2b2b; transform: translate(-50%, -50%); }
/* Mesmo caso do lapis: o hover de todo botao apagaria a centralizacao
dos dois eixos. Ninguem tinha visto porque e um boneco da vitrine. */
.vcaso__x:hover { transform: translate(-50%, calc(-50% - .18vh)); }
.vcaso__mapa small {
padding: 2px 8px; background: #fff; border-radius: 4px;
font-family: 'Caveat', cursive; font-size: 1.5rem; color: #333;
}
.vcaso__recibo {
width: 250px; padding: 18px 20px 24px; background: #fff; color: #333;
font-family: 'Courier New', monospace; font-size: 1.05rem; line-height: 1.6;
transform: rotate(2deg);
-webkit-mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 16px 100%;
mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 16px 100%;
}
.vcaso__recibo b { display: block; font-size: 1.25rem; border-bottom: 1px dashed #999; padding-bottom: 6px; margin-bottom: 6px; }
.vcaso__recibo span { display: block; }
.vcaso__postit {
width: 190px; aspect-ratio: 1; display: grid; place-items: center; text-align: center;
background: #ffe58a; color: #3a3200; transform: rotate(-3deg);
font-family: 'Caveat', cursive; font-weight: 700; font-size: 2.5rem; line-height: 1;
}
.vcaso__ficha {
width: 380px; padding: 18px 22px 22px; color: #23305a; transform: rotate(-1deg);
background:
linear-gradient(#ef8a8a, #ef8a8a) 0 54px / 100% 2px no-repeat,
repeating-linear-gradient(transparent 0 33px, #c6d4ef 33px 34px) 0 56px / 100% calc(100% - 56px) no-repeat,
#fffdf7;
}
.vcaso__ficha b {
display: block; height: 40px; font-family: 'Archivo Black', system-ui, sans-serif;
font-size: 1.3rem; text-transform: uppercase; letter-spacing: .04em; color: #ef2b2b;
}
.vcaso__ficha p { margin: 6px 0 0; font-family: 'Caveat', cursive; font-size: 2rem; line-height: 34px; }
/* o alfinete: cabeca vermelha com brilho, e a sombra caindo no papel */
.vcaso__pino {
width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; z-index: 1;
background: radial-gradient(circle at 35% 30%, #ff8a8a, #d61f1f 55%, #8f1010);
box-shadow: 3px 5px 6px rgba(0, 0, 0, .35);
}
.vreel__fios path {
fill: none; stroke: #c81e1e; stroke-width: 3; stroke-linecap: round;
stroke-dasharray: none; opacity: .55; transition: opacity .9s ease;
}
.vreel.revelado .vreel__fios path { opacity: .95; }
@media (prefers-reduced-motion: reduce) {
.vreel__rec i { animation: none; }
.vreel__riscos path { stroke-dashoffset: 0; }
}
/* ---- como funciona e o contraste ---- */
.vit__passos {
list-style: none; margin: 0; padding: 0; counter-reset: passo;
display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.vit__passos li {
position: relative; counter-increment: passo;
border: 1px solid var(--borda); border-radius: 1rem; background: var(--paper);
padding: 1.5rem;
}
/* O numero do passo em cor cheia: a 18% de opacidade ele quase sumia no
claro e virava um borrao escuro no escuro. Azul, e nao vermelho: o
passo explica, nao pede decisao (#176). */
.vit__passos li::before {
content: counter(passo); position: absolute; right: 1.2rem; top: 1rem;
font-family: 'Archivo Black', system-ui, sans-serif; font-size: 2.2rem;
color: var(--primaria-tinta);
}
.vit__passos b { display: block; font-size: 1.05rem; margin-bottom: .4rem; }
.vit__passos p { font-size: .93rem; line-height: 1.55; color: var(--suave); margin: 0; }
/* ---- um projeto do comeco ao fim (#374) ----
Os tres cartoes dos quatro gestos, com uma janela em cima: a mesma
reuniao do filme da capa em tres momentos (js/vitrine-demos.js,
ligarCaso). O mundo dentro da janela e o de 1600 por 900 do filme,
encolhido pela largura dela. */
.vcasof {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.vcasof__etapa {
display: flex; flex-direction: column;
border: 1px solid var(--borda); border-radius: 1rem; background: var(--paper);
padding: .8rem .8rem 1.3rem;
}
.vcasof__janela {
position: relative; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 1rem;
border: 1px solid var(--borda); border-radius: .7rem; background: var(--fundo);
}
.vcasof__janela .vreel__mundo { will-change: auto; }
.vcasof__num {
margin: 0 .5rem .3rem; font-size: .78rem; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; color: var(--primaria-tinta);
}
.vcasof__etapa b { display: block; margin: 0 .5rem .4rem; font-size: 1.05rem; }
.vcasof__etapa p { margin: 0 .5rem; font-size: .93rem; line-height: 1.55; color: var(--suave); }
.vcasof__assistir { align-self: flex-start; margin: 1rem .5rem 0; }
/* Os pontos da camera, como os pins numericos do editor: um circulo
azul com o numero da cena. As medidas sao do mundo, antes de encolher. */
.vcasof__janela .vreel__marco::after {
content: attr(data-marco); position: absolute; left: -36px; top: -36px;
width: 72px; height: 72px; border-radius: 50%;
display: grid; place-items: center;
background: var(--primaria); color: #fff;
font: 800 40px/1 'Outfit', sans-serif;
box-shadow: 0 6px 16px rgba(20, 30, 60, .3);
}
/* O resultado e um video: o quadro escurece um pouco, com o play no meio. */
.vcasof__janela--video::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: rgba(10, 14, 24, .28);
}
.vcasof__play {
position: absolute; left: 50%; top: 50%; z-index: 1;
width: 3.2rem; height: 3.2rem; margin: -1.6rem 0 0 -1.6rem; border-radius: 50%;
background: rgba(255, 255, 255, .92); box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.vcasof__play::before {
content: ''; position: absolute; left: 1.25rem; top: .95rem;
border-left: 1.1rem solid #14161a;
border-top: .65rem solid transparent; border-bottom: .65rem solid transparent;
}
/* ---- relatorio de 11/10: um CTA so, entregas, aviso e perguntas ---- */
/* A acao secundaria e um link: ela existe, mas nao disputa com o
botao vermelho. */
.vit__link {
font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink);
background: none; border: 0; padding: .95rem .6rem; cursor: pointer;
text-decoration: underline; text-underline-offset: .25em;
text-decoration-color: var(--borda); text-decoration-thickness: 2px;
}
.vit__link:hover { text-decoration-color: var(--primaria-tinta); }
.vit__link:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 2px; border-radius: .3rem; }
.vit__usos h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom: .6rem; }
.vit__usos .vit__linha { margin-bottom: 2rem; }
/* O icone de linha num quadradinho azul-claro, o da selecao do editor:
identifica sem gritar (#176). Mesmo desenho nos usos e nos formatos,
para lerem como uma familia. */
.vit__icone {
display: inline-grid; place-items: center; flex: none;
width: 3rem; height: 3rem; border-radius: .8rem;
background: var(--primaria-leve); color: var(--primaria-tinta);
}
.vit__icone svg {
width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor;
stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.vit__usos .vit__cartoes .vit__icone { margin-bottom: 1rem; }
/* OS FORMATOS DE ENTREGA, logo abaixo dos usos e na mesma caixa de
assunto: tres colunas separadas por um fio, e a nota do video
embaixo, centrada. */
/* Branca com borda, como os quatro cartoes de cima: com o cinza do
fundo, ela tinha a cor exata da secao seguinte e, sem botao entre as
duas, parecia um pedaco dela que tinha subido. Assim a caixa fecha
esta secao, e a proxima comeca no cinza. */
.vit__formatos {
margin-top: 1.6rem; padding: clamp(1.4rem, 3vw, 2rem) clamp(1rem, 3vw, 2.2rem);
border: 1px solid var(--borda); border-radius: 1.2rem; background: var(--paper);
box-shadow: var(--sombra-1, 0 1px 2px rgba(24, 32, 48, .05));
}
.vit__formatos h3 {
margin: 0 0 1.5rem; text-align: center;
font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 800; color: var(--ink);
}
.vit__formatos-lista { display: grid; grid-template-columns: repeat(3, 1fr); }
.vit__formatos-lista > div { display: flex; gap: 1rem; align-items: flex-start; padding: 0 1.4rem; }
.vit__formatos-lista > div + div { border-left: 1px solid var(--borda); }
.vit__formatos-lista p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--suave); }
.vit__formatos-lista b { display: block; margin-bottom: .25rem; font-size: 1.05rem; color: var(--ink); }
.vit__formatos-nota {
margin: 1.5rem 0 0; text-align: center; font-size: .85rem; line-height: 1.55; color: var(--suave);
}
@media (max-width: 760px) {
.vit__formatos-lista { grid-template-columns: 1fr; gap: 1.2rem; }
.vit__formatos-lista > div { padding: 0; }
.vit__formatos-lista > div + div { border-left: 0; border-top: 1px solid var(--borda); padding-top: 1.2rem; }
}
.vit__alerta {
max-width: 52rem; margin: 1.6rem auto 0; padding: 1.1rem 1.3rem;
border: 1px solid color-mix(in srgb, var(--red) 35%, var(--borda));
border-left: 4px solid var(--red); border-radius: .8rem; background: var(--paper);
}
.vit__alerta b { display: block; margin-bottom: .3rem; }
.vit__alerta p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--suave); }
.vit__perguntas { max-width: 48rem; margin: 0 auto; display: grid; gap: .6rem; }
.vit__perguntas details {
border: 1px solid var(--borda); border-radius: .8rem; background: var(--paper);
padding: 0 1.1rem;
}
.vit__perguntas summary {
cursor: pointer; padding: 1rem 0; font-weight: 700; list-style: none;
display: flex; justify-content: space-between; gap: 1rem;
}
.vit__perguntas summary::-webkit-details-marker { display: none; }
.vit__perguntas summary::after { content: '+'; color: var(--primaria-tinta); font-weight: 700; }
.vit__perguntas details[open] summary::after { content: '\2212'; }
.vit__perguntas summary:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 2px; border-radius: .3rem; }
.vit__perguntas p { margin: 0 0 1rem; font-size: .93rem; line-height: 1.6; color: var(--suave); }
/* ---- canetas, formas e texto: a barra de verdade do editor ----
Botoes redondos brancos, o escolhido em azul cheio, e a engrenagem
abrindo as reguas em pe — o mesmo desenho da barra do mural. */
.vpen__barra {
display: grid; gap: .55rem; justify-items: center;
padding: .8rem .7rem .9rem;
}
.vpen__gaveta {
display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem;
}
.vpen__gaveta button, .vpen__redondo {
width: 2.25rem; height: 2.25rem; padding: 0; display: grid; place-items: center;
border-radius: 50%; border: 1px solid var(--borda); background: var(--paper);
color: var(--ink); cursor: pointer; box-shadow: 0 1px 3px rgba(20, 24, 40, .08);
}
.vpen__gaveta button svg, .vpen__redondo svg { width: 1.05rem; height: 1.05rem; }
.vpen__gaveta--traco svg {
fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.vpen__gaveta button.on, .vpen__redondo.on { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.vpen__gaveta button:focus-visible, .vpen__redondo:focus-visible {
outline: 2px solid var(--primaria-tinta); outline-offset: 2px;
}
.vpen__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45rem; }
#demo-pincel canvas, #demo-formas canvas { cursor: crosshair; touch-action: none; outline: none; }
#demo-pincel canvas.com-pena { cursor: copy; }
.tem-rabisco .vdemo__frase { opacity: .35; }
.vdemo__frase--formas { font-size: clamp(1.6rem, 3vw, 2.2rem); }
/* o rascunho da pena: tracejado azul e o primeiro ponto como alvo */
.vpen__pena { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.vpen__pena path { fill: none; stroke: var(--primaria-tinta); stroke-width: 2; stroke-dasharray: 6 4; }
.vpen__pena circle { fill: #fff; stroke: var(--primaria-tinta); stroke-width: 2.5; }
.vpen__dica {
position: absolute; left: .6rem; right: .6rem; bottom: .5rem; margin: 0;
text-align: center; pointer-events: none;
}
.vpen__dica span:not(:empty) {
display: inline-block; padding: .3rem .6rem; border-radius: .5rem;
background: rgba(10, 12, 18, .72); color: #fff; font-size: .74rem; line-height: 1.35;
}
/* texto */
.vtxt__tela { cursor: text; touch-action: none; }
.vtxt__peca {
position: absolute; transform: translate(-50%, -50%);
padding: .1em .25em; white-space: nowrap; line-height: 1.15;
color: var(--ink); cursor: move; outline: none; user-select: none;
border: 1px dashed transparent;
}
.vtxt__peca.on { border-color: var(--primaria-tinta); }
.vtxt__peca[contenteditable="true"] { cursor: text; user-select: text; background: color-mix(in srgb, var(--primaria) 8%, transparent); }
.vtxt__fontes button {
width: auto; height: 2.25rem; padding: 0 .7rem; border-radius: 999px; font-size: .85rem;
}
.vtxt .vtxt__cores button::after { background: var(--c, var(--ink)); }
/* ---- paginas em animacao ---- */
.vpg__tela { display: grid; grid-template-rows: auto 1fr; }
.vpg__barra {
justify-self: center; margin-top: .6rem; z-index: 1;
display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .5rem;
border-radius: 999px; background: var(--paper); border: 1px solid var(--borda);
box-shadow: 0 2px 8px rgba(20, 24, 40, .1);
}
.vpg__bt {
width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%;
color: var(--ink); transition: background .15s, color .15s, transform .15s;
}
.vpg__bt svg {
width: .95rem; height: .95rem; fill: none; stroke: currentColor;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* o botao do gesto acende como um clique, para o olho ligar o efeito a causa */
.vpg__bt.on { background: var(--primaria); color: #fff; transform: scale(1.12); }
.vpg__num {
min-width: 1.7rem; height: 1.7rem; display: grid; place-items: center;
border-radius: .45rem; background: var(--primaria); color: #fff; font-size: .85rem;
}
.vpg__palco { position: relative; }
.vpg__tela { cursor: pointer; }
.vpg__mundo {
position: absolute; inset: 0; transform-origin: 0 0;
transition: transform .6s var(--mov-entrada, ease);
}
button.vpg__bt { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
button.vpg__bt:hover { background: var(--fundo); }
button.vpg__bt:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 2px; }
/* a casa fica marcada enquanto a pagina esta aproximada */
.vpg__bt.ligado { box-shadow: inset 0 0 0 2px var(--primaria-tinta); color: var(--primaria-tinta); }
.vpg__folha { cursor: pointer; }
/* so os quatro formatos mais usados, numa linha: a caixa fica da
altura das vizinhas. Os oito estao no editor. */
.vpg__formatos { gap: .1rem; }
.vpg__sep { width: 1px; height: 1.1rem; background: var(--borda); }
/* uma seta so: deitada para a direita, girada para baixo. Sem
transicao — e a troca de um estado, nao um enfeite. */
.vpg__bt--direcao.abaixo svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .vpg__mundo { transition: none; } }
.vpg__folha {
position: absolute; overflow: hidden; border-radius: 3px;
background: var(--paper); border: 1px solid var(--linha-forte);
box-shadow: 0 6px 14px rgba(20, 24, 40, .12);
transition: left .5s var(--mov-entrada, ease), top .5s var(--mov-entrada, ease),
width .5s var(--mov-entrada, ease), height .5s var(--mov-entrada, ease),
opacity .35s, transform .35s, border-color .2s;
}
.vpg__folha.on { border-color: var(--primaria-tinta); box-shadow: 0 0 0 2px var(--primaria-tinta), 0 6px 14px rgba(20, 24, 40, .12); }
.vpg__folha.nascendo, .vpg__folha.saindo { opacity: 0; transform: scale(.6); }
.vpg__folha i { position: absolute; left: 10%; top: 12%; width: 45%; height: 9%; border-radius: 2px; background: var(--ink); opacity: .75; }
.vpg__folha b {
position: absolute; left: 10%; top: 30%; width: 80%; height: 42%; border-radius: 3px;
background: linear-gradient(160deg, #7cc4ff 0 45%, #2f7a4f 45% 70%, #1d4e33 70%);
}
.vpg__folha span { position: absolute; left: 10%; top: 80%; width: 55%; height: 6%; border-radius: 2px; background: var(--red); opacity: .85; }
.vpg__folha em {
position: absolute; right: 5%; top: 6%; font-style: normal; font-weight: 800;
font-size: .7rem; color: var(--suave);
}
.vpg__folha.on em { color: var(--primaria-tinta); }
.vpg__legenda {
position: absolute; left: 0; right: 0; bottom: .6rem; margin: 0; text-align: center; pointer-events: none;
}
.vpg__legenda span {
display: inline-block; padding: .3rem .7rem; border-radius: .5rem;
background: rgba(10, 12, 18, .72); color: #fff; font-size: .78rem; font-weight: 600;
}
@media (prefers-reduced-motion: reduce) { .vpg__folha, .vpg__bt { transition: none; } }
/* ---- camera e gravacao: a mesma tarja REC do filme da capa ---- */
.vcam__rec { z-index: 1; }
/* ---- a demonstracao do filme ----
Titulo, escolha do exemplo e filme numa caixa so, com fundo
proprio: sem ela os botoes ficavam soltos sobre a malha da capa e
liam como enfeite, e nao como a porta de entrada da demonstracao.
O mundo que nao esta em cena fica escondido. */
.vreel__mundo[hidden] { display: none; }
.vreel__caixa {
min-width: 0;
padding: clamp(1.1rem, 2.4vw, 1.8rem) clamp(.8rem, 2vw, 1.6rem) clamp(.9rem, 2vw, 1.4rem);
border-radius: 1.6rem; border: 1px solid var(--borda);
background: var(--paper); box-shadow: var(--sombra-2); text-align: left;
}
.vreel__titulo {
font-family: 'Archivo Black', system-ui, sans-serif;
font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.15; margin: 0; color: var(--ink);
}
.vreel__roteiros {
display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0;
}
/* O quanto do roteiro ja passou, por cena; e a nota da gravacao. */
/* O play/pausa dentro da cena, no canto de cima a direita — do lado
oposto ao REC. Redondo e azul, como os controles do editor: o
vermelho da cena e o do REC (#176). Pausado, o icone vira o
triangulo de "continuar". */
.vreel__play {
position: absolute; top: .9rem; right: 1rem; z-index: 2;
width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 0; cursor: pointer;
display: grid; place-items: center; background: var(--primaria); color: #fff; padding: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.vreel__play:hover { filter: brightness(1.08); }
.vreel__play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vreel__play svg { width: 1rem; height: 1rem; fill: currentColor; }
.vreel__play .vreel__ic-play, .vreel__play.pausado .vreel__ic-pausa { display: none; }
.vreel__play.pausado .vreel__ic-play { display: block; }
/* a seta de voltar, ao lado da de avancar */
.vreel__tecla--voltar { right: 3.9rem; }
.vreel__nota { display: flex; align-items: center; gap: .5rem; margin: .8rem 0 0; font-size: .88rem; color: var(--suave); }
.vreel__nota svg { width: 1.2rem; height: 1.2rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vreel__caixa .vreel { margin-top: clamp(1rem, 2.4vw, 1.5rem); text-align: left; }
.vreel__roteiros button {
font: inherit; font-size: .95rem; font-weight: 700; padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer;
border: 1px solid var(--borda); background: var(--paper); color: var(--ink);
}
.vreel__roteiros button:hover { border-color: var(--primaria-tinta); }
.vreel__roteiros button.on { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.vreel__roteiros button:focus-visible, button.vreel__tecla:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 2px; }
/* a seta e um botao de verdade: clicar avanca a cena */
button.vreel__tecla { cursor: pointer; padding: 0; }
button.vreel__tecla:hover { border-color: var(--primaria-tinta); }
/* aula: o sol, a folha, a lousa */
.vaula__sol, .vaula__folha, .vaula__lousa, .vneg__grafico, .vneg__kpi, .vneg__lista { position: absolute; }
.vaula__sol {
width: 220px; height: 220px; border-radius: 50%;
background: radial-gradient(circle, #ffd84d 0 46%, #ffc21a 47% 52%, transparent 53%),
repeating-conic-gradient(#ffc21a 0 6deg, transparent 6deg 30deg);
-webkit-mask: radial-gradient(circle, #000 70%, transparent 71%);
mask: radial-gradient(circle, #000 70%, transparent 71%);
}
.vaula__folha {
width: 260px; height: 170px; transform: rotate(-12deg);
background: linear-gradient(135deg, #3fb36b, #1f7a45);
border-radius: 0 100% 0 100%; box-shadow: 0 14px 30px rgba(20, 24, 40, .22);
}
/* A nervura central vai de ponta a ponta da folha. As pontas sao os
cantos sem arredondar — em cima a esquerda e embaixo a direita —,
entao ela desce na diagonal da caixa (atan 170/260 = 33 graus). Ela
ja esteve a -30 graus, atravessando a folha como um risco. */
.vaula__folha i {
position: absolute; left: 4%; right: 4%; top: 50%; height: 3px; margin-top: -1.5px;
background: rgba(255, 255, 255, .45); transform: rotate(33deg); border-radius: 2px;
}
.vaula__lousa {
width: 440px; padding: 30px 32px; border-radius: 10px; display: grid; gap: 10px;
background: #23402f; border: 10px solid #8a6a43; box-shadow: 0 16px 34px rgba(20, 24, 40, .3);
font-family: 'Caveat', cursive; font-size: 2.6rem; line-height: 1.1; color: #f1efe6;
}
/* negocios: o grafico, o numero, os proximos passos */
.vneg__grafico {
width: 420px; padding: 22px 26px; border-radius: 14px; background: #fff;
box-shadow: 0 14px 30px rgba(20, 24, 40, .2); color: #1d1c1a;
}
.vneg__grafico b { display: block; font-size: 1.5rem; margin-bottom: 14px; }
.vneg__grafico div { height: 220px; display: flex; align-items: flex-end; gap: 22px; border-bottom: 3px solid #d9d5ce; }
.vneg__grafico i { flex: 1; border-radius: 6px 6px 0 0; background: #c9c4ba; }
.vneg__grafico i.on { background: #ed1f33; }
.vneg__grafico small { display: flex; gap: 22px; margin-top: 8px; font-size: 1.2rem; color: #6b6862; }
.vneg__grafico small span { flex: 1; text-align: center; }
.vneg__kpi {
width: 300px; padding: 26px 28px; border-radius: 14px; background: #fff; text-align: center;
box-shadow: 0 14px 30px rgba(20, 24, 40, .2);
}
.vneg__kpi b { display: block; font-family: 'Archivo Black', system-ui, sans-serif; font-size: 4.4rem; line-height: 1; color: #ed1f33; }
.vneg__kpi span { display: block; margin-top: 10px; font-size: 1.4rem; color: #5f5c56; }
.vneg__lista {
width: 380px; padding: 24px 28px; border-radius: 14px; background: #fff; display: grid; gap: 12px;
box-shadow: 0 14px 30px rgba(20, 24, 40, .2); color: #1d1c1a; font-size: 1.45rem;
}
.vneg__lista b { font-family: 'Archivo Black', system-ui, sans-serif; font-size: 1.5rem; margin-bottom: 4px; }
.vneg__lista span { padding-left: 38px; position: relative; }
.vneg__lista span::before {
content: ''; position: absolute; left: 0; top: .15em; width: 22px; height: 22px;
border: 3px solid #c9c4ba; border-radius: 5px;
}
/* ---- camera: uma linha do tempo da musica ----
Quatro decadas sobre um eixo, cada objeto desenhado aqui mesmo: o
vinil com sulcos, a fita com os dois carreteis, o CD furta-cor e o
celular tocando. Os objetos tem cor propria, como objeto tem; so o
canvas e o texto em volta acompanham o tema. */
.vlinha > div, .vlinha > p, .vlinha__ano { position: absolute; }
.vlinha__titulo {
margin: 0; font-family: 'Archivo Black', system-ui, sans-serif; font-size: 2.4rem;
transform: translateX(-50%);
text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
.vlinha__titulo em { font-style: normal; color: var(--red); }
.vlinha__eixo {
width: 1040px; height: 6px; border-radius: 3px; background: var(--ink); opacity: .85;
}
.vlinha__eixo::after {
content: ''; position: absolute; right: -14px; top: -9px;
border-left: 18px solid var(--ink); border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.vlinha__ano {
transform: translateX(-50%); font-family: 'Archivo Black', system-ui, sans-serif;
font-size: 2rem; color: var(--red);
}
.vlinha__ano::before {
content: ''; position: absolute; left: 50%; top: -34px; width: 18px; height: 18px; margin-left: -9px;
border-radius: 50%; background: var(--paper); border: 5px solid var(--red);
}
.vlinha__nota {
margin: 0; transform: translateX(-50%); white-space: nowrap;
font-family: 'Caveat', cursive; font-size: 1.9rem; color: var(--ink);
}
.vlinha__vinil {
width: 200px; height: 200px; border-radius: 50%;
background: repeating-radial-gradient(circle, #1a1a1d 0 3px, #2b2b30 3px 5px);
box-shadow: 0 14px 30px rgba(20, 24, 40, .3);
}
.vlinha__vinil i {
position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px;
border-radius: 50%; background: radial-gradient(circle, #1a1a1d 0 5px, #ef2b2b 6px);
}
.vlinha__fita {
width: 230px; height: 150px; border-radius: 12px; background: #2d2f36;
box-shadow: 0 14px 30px rgba(20, 24, 40, .3), inset 0 0 0 6px #23252b;
}
.vlinha__fita b {
position: absolute; left: 18px; right: 18px; top: 16px; height: 40px; border-radius: 4px;
background: #f3efe4; color: #1f2a6b; font-family: 'Caveat', cursive; font-size: 1.7rem;
line-height: 40px; text-align: center;
}
.vlinha__fita i {
position: absolute; top: 74px; width: 44px; height: 44px; border-radius: 50%;
background: radial-gradient(circle, #2d2f36 0 7px, #e9e3d6 8px 13px, #5a4a3a 14px);
}
.vlinha__fita i:first-of-type { left: 42px; }
.vlinha__fita i:last-of-type { right: 42px; }
.vlinha__cd {
width: 190px; height: 190px; border-radius: 50%;
background: conic-gradient(from 30deg, #dfe6ef, #b9f0ff, #f7c6ff, #fff3b8, #c8ffd8, #dfe6ef);
box-shadow: 0 14px 30px rgba(20, 24, 40, .25), inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.vlinha__cd i {
position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
border-radius: 50%; background: var(--fundo); box-shadow: 0 0 0 10px rgba(255, 255, 255, .7);
}
.vlinha__celular {
width: 120px; height: 230px; border-radius: 22px; background: #111318; padding: 10px;
box-shadow: 0 14px 30px rgba(20, 24, 40, .3);
}
.vlinha__celular i {
display: block; height: 100%; border-radius: 14px;
background: linear-gradient(160deg, #ef2b2b, #7b2ff7);
}
.vlinha__celular b {
position: absolute; left: 50%; top: 42%; width: 0; height: 0; margin: -16px 0 0 -9px;
border-left: 28px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent;
}
.vlinha__celular span {
position: absolute; left: 24px; right: 24px; bottom: 34px; height: 5px; border-radius: 3px;
background: linear-gradient(90deg, #fff 60%, rgba(255, 255, 255, .35) 60%);
}
/* ---- a previa avisa que e previa ----
O selo vem por ultimo, depois das caixas: e a frase que fica na
cabeca de quem experimentou. Fundo azul-claro e letra azul, que
informa sem gritar: e um aviso, e nao uma decisao (#176). */
.vit__previa-selo {
display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .8rem;
padding: .45rem .9rem; border-radius: .6rem;
background: var(--primaria-leve); color: var(--primaria-tinta);
font-size: .85rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
/* Classe propria, e nao a do botao "Destravar tudo": o selo so usa o
mesmo desenho, e nao e um botao de destravar. */
.vit__previa-ic { width: 1rem; height: 1rem; flex: 0 0 auto; }
/* ---- a aparencia, para experimentar ----
O convite a esquerda e, a direita, dois cartoes com o editor em
miniatura — cada um pintado no seu tema, qualquer que seja o tema
da pagina, para a pessoa ver o que escolhe antes de escolher. O
escolhido ganha a borda vermelha e o visto. */
.vit__visual {
display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
margin-top: 1.2rem; padding: clamp(1rem, 2.4vw, 1.4rem) clamp(1rem, 2.4vw, 1.6rem);
border-radius: 1.2rem; background: var(--paper); border: 1px solid var(--borda);
box-shadow: var(--sombra-2);
}
.vit__visual-txt { flex: 1 1 14rem; display: grid; gap: .35rem; }
.vit__visual-txt b { font-family: 'Archivo Black', system-ui, sans-serif; font-weight: 400; font-size: clamp(1.15rem, 2vw, 1.4rem); }
.vit__visual-txt span { font-size: .92rem; color: var(--suave); }
/* Pequenos de proposito ("pode fazer menor"): sem barra e sem
descricao, o retrato basta. Tema e fundo lado a lado, cada par com
o seu titulo pequeno em cima; o texto ocupa o resto da faixa. */
.vit__escolhas { flex: 0 1 34rem; display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; }
.vit__escolha { flex: 1 1 15rem; display: grid; gap: .45rem; }
.vit__escolha-t {
font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--suave);
}
.vit__temas { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.vit__tema {
position: relative; display: grid; gap: .45rem; padding: .45rem; text-align: left; cursor: pointer;
border: 2px solid var(--borda); border-radius: 1rem; background: var(--fundo); color: var(--ink);
font: inherit; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.vit__tema:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.vit__tema:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 3px; }
.vit__tema.on { border-color: var(--primaria-tinta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primaria) 14%, transparent); }
/* o visto do escolhido */
.vit__tema.on::after {
content: '\2713'; position: absolute; top: -.6rem; right: -.6rem;
width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center;
background: var(--primaria); color: #fff; font-weight: 800; font-size: .9rem;
}
/* A TELA EM MINIATURA: o padrao, um post-it e um traco. As cores vem
de variaveis no cartao (--tf fundo, --tl linha da grade, --tp ponto,
--tt tinta do traco), e e isso que deixa um par conversar com o
outro:
- o cartao de TEMA tem cores fixas (o escuro e escuro mesmo com a
pagina clara) e o PADRAO do fundo escolhido na pagina;
- o cartao de FUNDO tem o padrao fixo e as CORES do tema da pagina. */
.vit__tema--claro, .vit__fundo { --tf: #f6f8fb; --tl: #dfe5ee; --tp: #b9c3d3; --tt: #14161a; }
.vit__tema--escuro, body.noite .vit__fundo { --tf: #1b1a18; --tl: #2e2c29; --tp: #55514b; --tt: #f2f0ec; }
/* Nos cartoes de fundo a miniatura e so o padrao — sem post-it nem
traco, "para ficar bem visivel o que e" —, um tom mais forte. */
.vit__fundo { --tl: #cbd4e1; --tp: #93a0b4; }
body.noite .vit__fundo { --tl: #343340; --tp: #6d6862; }
.vit__tema-tela {
position: relative; display: block; aspect-ratio: 16 / 9; border-radius: .5rem; overflow: hidden;
background-color: var(--tf); border: 1px solid var(--tl); background-size: 11px 11px;
background-image: linear-gradient(var(--tl) 1px, transparent 1px), linear-gradient(90deg, var(--tl) 1px, transparent 1px);
}
body.fundo-pontos .vit__tema:not(.vit__fundo) .vit__tema-tela,
.vit__fundo--pontos .vit__tema-tela {
background-image: radial-gradient(circle, var(--tp) 0 1.2px, transparent 1.7px);
}
.vit__fundo--grade .vit__tema-tela {
background-image: linear-gradient(var(--tl) 1px, transparent 1px), linear-gradient(90deg, var(--tl) 1px, transparent 1px);
}
.vit__tema-tela i { position: absolute; display: block; }
.vit__tema-postit {
left: 16%; top: 26%; width: 30%; aspect-ratio: 1; background: #fbe38a; transform: rotate(-4deg);
box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}
/* A seta saindo do centro do post-it, na tinta de cada tema, como o
editor faz: preto no claro, branco no escuro — a caneta troca de cor
sozinha com o tema. O traco nao engrossa com o esticar do desenho. */
.vit__tema-seta { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vit__tema-seta path {
fill: none; stroke: var(--tt); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.vit__tema-nome { padding: 0 .15rem; }
.vit__tema-nome b { font-size: .92rem; }
@media (max-width: 560px) { .vit__escolhas { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .vit__tema { transition: none; } .vit__tema:hover { transform: none; } }
.vit__completo {
margin-top: 1.4rem; padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.1rem, 2.6vw, 1.7rem); border-radius: 1.2rem;
background: var(--paper); border: 1px solid var(--borda); box-shadow: var(--sombra-2);
}
.vit__completo-t { display: block; margin: .2rem 0 1.1rem; font-size: 1.05rem; }
/* O que o editor tem e a pagina nao mostrou: tres colunas de itens
curtos, cada um com o seu emoji, o nome e uma linha do que faz. */
.vit__extras {
margin: 0; padding: 0; list-style: none;
display: grid; gap: 1rem 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.vit__extras li {
display: grid; grid-template-columns: 2.2rem 1fr; column-gap: .7rem; align-items: start;
font-size: .88rem; color: var(--suave); line-height: 1.45;
}
.vit__extras li > span {
grid-row: span 2; width: 2.2rem; height: 2.2rem; border-radius: .6rem; display: grid; place-items: center;
background: var(--primaria-leve); font-size: 1.1rem;
}
.vit__extras li b { display: block; color: var(--ink); font-size: .95rem; margin-bottom: .1rem; }
.vit__linha {
font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6;
color: var(--suave); margin: 0 0 1.8rem; max-width: 34rem;
}
.vit__linha--centro { margin-left: auto; margin-right: auto; text-align: center; }
/* ---- blocos ---- */
.vit__bloco {
padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 5vw, 3.5rem);
max-width: 84rem; margin: 0 auto;
}
.vit__bloco h2, .vit__fim h2 {
font-family: 'Archivo Black', system-ui, sans-serif;
font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 1.6rem; text-align: center;
}
/* A segunda metade de um titulo em vermelho, como o "Dirija a cena." */
.vit__bloco h2 em { font-style: normal; color: var(--red); }
.vit__cartoes {
display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 1rem;
}
.vit__cartoes article {
border: 1px solid var(--borda); border-radius: 1rem;
background: var(--paper); padding: 1.5rem;
}
.vit__emoji { font-size: 1.7rem; display: block; margin-bottom: .7rem; }
.vit__cartoes b { display: block; font-size: 1.05rem; margin-bottom: .4rem; }
.vit__cartoes p { font-size: .93rem; line-height: 1.55; color: var(--suave); margin: 0; }
.planos--vitrine { max-width: 52rem; margin: 0 auto; }
.planos--vitrine .plano { padding: 1.8rem; }
.planos--vitrine .plano__nome { font-size: 1.5rem; }
.planos--vitrine .plano__preco { font-size: 1rem; }
.planos--vitrine .plano li { font-size: .95rem; line-height: 1.8; }
.planos--vitrine .plano__aviso { font-size: .85rem; }
.planos--vitrine .plano__selo { font-size: .68rem; }
/* O Premium era tracejado e apagado aqui, um passo atras; desde o #177
ele e o cartao escuro, igual nos tres lugares. */
.vit__plano-bt { width: 100%; margin-top: 1.2rem; padding: .8rem 1rem; border-radius: .75rem; font-size: 1rem; }
.planos--vitrine .plano__diamante { width: 1.5rem; height: 1.5rem; }
.vit__fim {
text-align: center;
padding: clamp(3rem, 8vw, 6.5rem) clamp(1rem, 5vw, 3.5rem);
border-top: 1px solid var(--borda);
}
/* A frase grande, terminando na marca no mesmo tamanho dela. */
.vit__fim h2 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 1rem; }
.vit__marca--fim { font-size: 1em; letter-spacing: -.02em; }
.vit__fim-linha { margin: 0 auto 2rem; font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--suave); }
.vit__fim-bt { min-width: min(16rem, 100%); }
.vit__rodape .vit__marca { font-size: 1.4rem; color: var(--ink); }
/* Fundo de papel (branco no claro), e nao o cinza do fim: o rodape se
separa da ultima secao em vez de parecer a continuacao dela. */
.vit__rodape {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
padding: 1.5rem clamp(1rem, 5vw, 3.5rem) 3rem;
border-top: 1px solid var(--borda); background: var(--paper);
color: var(--suave); font-size: .88rem;
}
.vit__rodape nav { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.vit__rodape a { color: var(--suave); }
.vit__rodape a:hover { color: var(--ink); }
/* ---- experimente: pincel, luz e camera ----
Cada caixa tem o fundo do mural, para que o visitante reconheca o
lugar quando entrar. Malha por padrao; pontos se for o escolhido. */
/* As tres lado a lado, cabendo na largura do texto da capa; numa tela
estreita elas descem uma embaixo da outra. */
.vdemos {
display: grid; gap: 1.2rem;
/* Cada linha da altura da sua maior caixa, e nao todas da maior da
grade: com 1fr a linha de baixo copiava os controles altos da de
cima e sobrava um vazio grande em luz, camera e paginas. */
grid-auto-rows: auto;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
margin-top: 1.6rem;
}
.vit__provar { padding-top: clamp(1rem, 2vw, 1.5rem) !important; }
.vit__provar h2 { text-align: left; margin-bottom: .4rem; }
.vit__provar > .vit__linha { max-width: none; margin-bottom: 0; }
.vdemo {
display: flex; flex-direction: column;
border: 1px solid var(--borda); border-radius: 1rem; overflow: hidden;
background: var(--paper); box-shadow: var(--sombra-2);
}
.vdemo__cab { padding: 1.1rem 1.2rem .8rem; }
.vdemo__cab b { display: block; font-size: 1.05rem; margin-bottom: .2rem; }
.vdemo__cab p { margin: 0; font-size: .9rem; color: var(--suave); }
.vdemo__fundo, .vdemo__mundo::before {
background-color: var(--fundo);
background-image:
linear-gradient(var(--linha-forte) 1px, transparent 0),
linear-gradient(90deg, var(--linha-forte) 1px, transparent 0),
linear-gradient(var(--linha) 1px, transparent 0),
linear-gradient(90deg, var(--linha) 1px, transparent 0);
background-size: 70px 70px, 70px 70px, 14px 14px, 14px 14px;
}
body.fundo-pontos .vdemo__fundo, body.fundo-pontos .vdemo__mundo::before {
background-image: radial-gradient(circle, var(--ponto) 0 1px, transparent 1.5px);
background-size: 14px 14px;
}
.vdemo__tela {
position: relative; overflow: hidden;
aspect-ratio: 4 / 3;
border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
}
.vdemo__tela canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.vdemo__controles {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: .6rem; padding: .8rem 1rem;
}
.vdemo__fileira {
display: inline-flex; gap: .2rem; padding: .2rem;
border-radius: .7rem; background: var(--fundo); border: 1px solid var(--borda);
}
.vdemo__fileira button, .vdemo__limpar, .vdemo__seta {
font: inherit; font-size: .82rem; color: var(--suave);
background: transparent; border: 0; border-radius: .5rem;
padding: .4rem .65rem; cursor: pointer;
}
.vdemo__fileira button:hover, .vdemo__limpar:hover, .vdemo__seta:hover { color: var(--ink); }
.vdemo__fileira button.on { background: var(--paper); color: var(--ink); box-shadow: var(--sombra-2); }
.vdemo__fileira button:focus-visible, .vdemo__limpar:focus-visible,
.vdemo__seta:focus-visible, .vdemo__janela:focus-visible {
outline: 2px solid var(--primaria-tinta); outline-offset: 2px;
}
.vdemo__cores button { width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 50%; }
.vdemo__cores button::after {
content: ''; display: block; width: .9rem; height: .9rem; margin: auto;
border-radius: 50%; background: var(--ink);
}
.vdemo__cores [data-cor="verde"]::after { background: #12b76a; }
.vdemo__cores [data-cor="vermelho"]::after { background: #ef2b2b; }
.vdemo__limpar { border: 1px solid var(--borda); }
/* pincel */
#demo-pincel canvas { cursor: crosshair; touch-action: none; }
.vdemo__frase {
position: absolute; inset: 0; display: grid; place-items: center;
padding: 1rem; text-align: center; pointer-events: none;
font-family: 'Caveat', cursive; font-weight: 700;
font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.1;
color: var(--ink); opacity: .55;
}
/* as pecas que a luz e a camera mostram */
.vdemo__palco { cursor: none; touch-action: none; }
.vdemo__peca, .vdemo__mundo > div { position: absolute; }
.vdemo__veu { pointer-events: none; }
.vdemo__postit {
width: 26%; aspect-ratio: 1; display: grid; place-items: center;
background: #ffe58a; color: #3a3200; border-radius: 3px;
font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.4rem;
transform: rotate(-4deg);
}
.vdemo__postit--verde { background: #b9f0c9; color: #0d3a1d; transform: rotate(3deg); }
.vdemo__polaroide {
width: 28%; padding: 4% 4% 12%; background: #fff; border-radius: 2px;
transform: rotate(5deg);
}
.vdemo__polaroide i {
display: block; aspect-ratio: 1;
background: linear-gradient(160deg, #7cc4ff 0 45%, #2f7a4f 45% 70%, #1d4e33 70%);
}
.vdemo__bola { width: 18%; aspect-ratio: 1; border-radius: 50%; border: 5px solid var(--red); }
.vdemo__rotulo {
font-family: 'Archivo Black', system-ui, sans-serif; font-size: 1.15rem; color: var(--ink);
}
.vdemo__rotulo em { color: var(--red); font-style: normal; }
/* Na caixa da luz as pecas medem pela ALTURA da caixa (cqmin): deitada
ou em pe no celular, o post-it continua quadrado e cabendo. */
.vdemo__palco { container-type: size; }
.vdemo__palco .vdemo__postit { width: 34cqmin; font-size: 8cqmin; }
.vdemo__palco .vdemo__polaroide { width: 32cqmin; padding: 2.4cqmin 2.4cqmin 7cqmin; }
.vdemo__palco .vdemo__bola { width: 24cqmin; }
.vdemo__palco .vdemo__rotulo { font-size: 7cqmin; }
/* camera: o mundo tem medida fixa e a janela e quem enquadra */
.vdemo__janela { outline: none; }
.vdemo__mundo {
position: absolute; left: 0; top: 0; width: 1200px; height: 760px;
transform-origin: 0 0; will-change: transform, filter;
}
/* O fundo do mural passa muito da borda do mundo: na caixa deitada a
camera enxerga alem dele, e ali tem de continuar sendo mural, e nao
um vazio. 700 e multiplo de 70 e de 14, entao a malha emenda. */
.vdemo__mundo::before {
content: ''; position: absolute; inset: -700px; z-index: -1;
}
.vdemo__mundo .vdemo__postit--g { width: 150px; font-size: 1.9rem; }
.vdemo__mundo .vdemo__polaroide--g { width: 160px; padding: 12px 12px 34px; }
.vdemo__polaroide--g span {
position: absolute; left: 0; right: 0; bottom: 6px; text-align: center;
font-family: 'Caveat', cursive; font-size: 1.3rem; color: #333;
}
.vdemo__mundo .vdemo__rotulo--g { font-size: 2rem; white-space: nowrap; }
.vdemo__mundo .vdemo__bola--g { width: 110px; border-width: 8px; }
.vdemo__fio { position: absolute; inset: 0; width: 100%; height: 100%; }
.vdemo__fio path {
fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round;
stroke-dasharray: 2 12;
}
.vdemo__marco {
position: absolute; display: grid; place-items: center;
width: 34px; height: 34px; border-radius: 50%;
background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
font: 700 1rem 'Outfit', system-ui, sans-serif;
}
.vdemo__marco.on { background: var(--red); border-color: var(--red); color: #fff; }
.vdemo__cena { font-size: .85rem; color: var(--suave); min-width: 3.5rem; text-align: center; }
.vdemo__seta { font-size: 1.1rem; border: 1px solid var(--borda); }
/* ==========================================================
A tela da conta
==========================================================
Mesma moldura da estante — e a mesma tela, trocada — com uma
coluna de secoes a esquerda. As secoes que ainda nao existem
(cobranca, assinatura) aparecem dizendo que nao existem: melhor um
vazio explicado do que um formulario que nao leva a lugar nenhum.
========================================================== */
#conta {
position: fixed; inset: 0; z-index: 400; overflow: auto;
background: var(--fundo); padding: 4vh;
}
body.na-conta #board,
body.na-conta #scrub,
body.na-conta #pen-canvas,
body.na-conta #toolbar,
body.na-conta #dots,
body.na-conta #help,
body.na-conta #topo-dir{ display: none !important; }
/* A folha comeca no "voltar" e nao abaixo dele. Antes o botao e o
titulo ficavam soltos sobre a grade e a folha comecava so no meio,
como se fossem duas paginas empilhadas. */
.conta__caixa {
max-width: 118vh; margin: 0 auto;
background: var(--paper); color: var(--ink);
border: .12vh solid var(--borda); border-radius: 1.8vh;
box-shadow: var(--sombra-2);
padding: 3vh;
min-height: calc(100vh - 8vh); /* desconta so o respiro do #conta */
}
@media (max-width: 800px) { .conta__caixa { padding: 2vh; min-height: 0; } }
.conta__topo { margin-bottom: 3vh; }
.conta__voltar {
font: inherit; font-size: max(1.4vh, 11.2px); font-weight: 700; cursor: pointer;
padding: .9vh 1.4vh; border-radius: 1vh; margin-bottom: 1.4vh;
background: transparent; color: var(--suave); border: .12vh solid var(--borda);
}
.conta__voltar:hover { background: var(--linha); color: var(--ink); }
.conta__titulo {
font-family: 'Archivo Black', system-ui, sans-serif;
font-size: 3.4vh; letter-spacing: -.02em; margin: 0;
}
/* A tela inteira dentro de uma folha, e nao solta sobre a grade.
Antes o conteudo terminava no meio da altura e o resto era fundo
quadriculado ate embaixo — parecia pagina que nao carregou. A altura
minima faz a folha ir ate o pe da janela mesmo quando a aba tem
pouca coisa, como Perfil. */
.conta__corpo {
display: grid; grid-template-columns: 26vh 1fr; gap: 3vh; align-items: start;
}
@media (max-width: 800px) { .conta__corpo { grid-template-columns: 1fr; } }
/* Dentro da folha, a aba selecionada nao precisa mais de moldura
propria: duas bordas encaixadas viram ruido. */
.conta__corpo .conta__nav button.on { background: var(--linha); border-color: transparent; }
/* ---- sair, no fim do perfil ---- */
.conta__sair-linha {
display: flex; align-items: center; gap: 1.4vh; flex-wrap: wrap;
margin-top: 3.4vh; padding-top: 2.4vh;
border-top: .12vh solid var(--borda);
}
/* Vermelho cheio, como o "Salvar" ao lado — o mesmo vermelho da
marca, e nao um vermelho de alerta proprio: sair da conta nao e
destruir nada, os projetos continuam no computador. Quem apaga de
verdade e o botao de "Seus dados", que tem cor propria. */
.conta__sair {
font: inherit; font-size: max(1.45vh, 11.6px); font-weight: 700; cursor: pointer;
padding: 1.1vh 2vh; border-radius: 1vh; border: 0;
background: var(--red); color: #fff;
}
.conta__sair:hover { background: var(--red-deep); }
.conta__sair-linha .conta__dica { margin: 0; }
.conta__nav { display: flex; flex-direction: column; gap: .3vh; }
.conta__nav button {
font: inherit; font-size: max(1.5vh, 12.0px); font-weight: 700; text-align: left; cursor: pointer;
padding: 1.2vh 1.4vh; border-radius: 1vh;
background: transparent; color: var(--suave); border: .12vh solid transparent;
}
.conta__nav button:hover { background: var(--linha); color: var(--ink); }
.conta__nav button.on { background: var(--paper); color: var(--ink); border-color: var(--borda); }
.conta__quem { display: flex; align-items: center; gap: 1.6vh; margin-bottom: 3vh; }
.conta__inicial {
display: grid; place-items: center; flex: none;
width: 7vh; height: 7vh; border-radius: 50%;
background: var(--red); color: #fff; font-size: max(3vh, 24.0px); font-weight: 800;
}
.conta__quem b { display: block; font-size: max(1.9vh, 15.2px); }
.conta__quem i { font-style: normal; font-size: max(1.35vh, 10.8px); color: var(--suave); }
.conta__rotulo {
display: block; font-size: max(1.25vh, 10.0px); font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; color: var(--suave); margin: 1.8vh 0 .7vh;
}
.conta__linha-campo { display: flex; gap: .8vh; align-items: stretch; }
.conta__linha-campo .modal__campo { flex: 1; }
.conta__dica { font-size: max(1.3vh, 10.4px); color: var(--suave); margin: 1vh 0 0; line-height: 1.5; }
.conta__cartao {
border: .12vh solid var(--borda); border-radius: 1.2vh;
background: var(--paper); padding: 2vh; margin-bottom: 1.6vh;
}
.conta__cartao > b { display: block; font-size: max(1.7vh, 13.6px); margin-bottom: .8vh; }
.conta__cartao p { font-size: max(1.4vh, 11.2px); color: var(--suave); margin: 0; line-height: 1.55; }
.conta__acoes { display: flex; gap: .8vh; margin-top: 1.6vh; flex-wrap: wrap; }
.conta__cartao--perigo { border-color: var(--red); }
.conta__perigo {
font: inherit; font-size: max(1.45vh, 11.6px); font-weight: 700; cursor: pointer;
padding: 1.1vh 1.8vh; border-radius: 1vh;
background: transparent; color: var(--red-tinta); border: .12vh solid var(--red-tinta);
}
.conta__perigo:hover { background: var(--red); color: #fff; }
.conta__linhas {
border: .12vh solid var(--borda); border-radius: 1.2vh;
overflow: hidden; margin-bottom: 1.6vh; background: var(--paper);
}
/* ---- planos ---- */
.planos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vh; }
@media (max-width: 800px) { .planos { grid-template-columns: 1fr; } }
.plano {
border: .12vh solid var(--borda); border-radius: 1.4vh;
background: var(--paper); padding: 2.2vh; position: relative;
}
.plano--atual { border-color: var(--primaria-tinta); }
.plano__selo {
display: inline-block; font-size: max(1.05vh, 8.4px); font-weight: 800;
letter-spacing: .08em; text-transform: uppercase;
padding: .4vh .9vh; border-radius: .6vh;
background: var(--primaria); color: #fff; margin-bottom: 1.2vh;
}
.plano__selo--breve { background: var(--linha); color: var(--suave); }
.plano__nome {
display: block; font-family: 'Archivo Black', system-ui, sans-serif;
font-size: max(2.2vh, 17.6px);
}
.plano__preco { display: block; font-size: max(1.5vh, 12.0px); color: var(--suave); margin-bottom: 1.4vh; }
/* O VISTO NO LUGAR DA BOLINHA (#177): cada item com um visto azul, o
azul do básico (#176). Desenhado com duas bordas giradas, sem ícone:
ele acompanha a cor e o tamanho da letra sozinho. */
.plano ul { margin: 0; padding-left: 0; list-style: none; }
.plano li { font-size: max(1.4vh, 11.2px); line-height: 1.9; position: relative; padding-left: 1.7em; }
.plano li::before {
content: ''; position: absolute; left: .35em; top: .45em;
width: .34em; height: .68em; transform: rotate(45deg);
border: solid var(--primaria-tinta); border-width: 0 .15em .15em 0;
}
/* OS CARTÕES EM COLUNA, COM A AÇÃO EMBAIXO (#170): sem selo em cima do
nome — o Grátis não é "o seu plano", e quem está no teste nem plano
tem —, e o botão no pé: criar a conta no Grátis, "Em preparação" no
Premium. A lista empurra o resto para baixo, e os botões dos dois
cartões ficam na mesma altura. */
.plano { display: flex; flex-direction: column; }
.plano > ul { margin-bottom: auto; }
.plano__bt { width: 100%; margin-top: 1.6vh; }
.plano__breve {
width: 100%; margin-top: 1.6vh; padding: 1.2vh 2.2vh; border-radius: 1vh;
border: .12vh dashed var(--borda); background: transparent; color: var(--suave);
font: inherit; font-size: max(1.5vh, 12.0px); font-weight: 700; cursor: not-allowed;
}
/* O que o Premium tem a mais que o Grátis (#158): a lista dele repete
tudo, e a diferença salta à vista em vez de ser procurada. */
.plano li.plano__mais { font-weight: 700; }
.plano__aviso {
font-size: max(1.25vh, 10.0px); color: var(--suave); line-height: 1.55;
margin: 1.6vh 0 0; padding-top: 1.4vh; border-top: .12vh solid var(--borda);
}
/* O PREMIUM EM CARTÃO ESCURO (#177), a versão 3 das quatro de teste: o
Grátis é o cartão claro de sempre, e o Premium um azul-marinho com o
diamante, para ler como o produto especial que é — mesmo ainda em
preparação. As cores são fixas, e não do tema: o cartão é escuro nos
dois, como o "Escuro" na escolha de tema da vitrine.
A lista dele continua repetindo o que o Grátis tem (#158, "para não
deixar dúvidas"), mas o que é em comum fica mais apagado, e o que é a
mais, em branco e negrito: a diferença salta à vista. */
.plano--premium {
--pm-fundo: #0f1b3d; --pm-tinta: #e6ecfa; --pm-suave: #a9b8d8;
--pm-visto: #8fb6ff; --pm-linha: #26365f; --pm-botao: #1e3a8a;
background: var(--pm-fundo); border-color: var(--pm-fundo); color: var(--pm-tinta);
}
.plano__cabeca { display: flex; align-items: center; gap: .45em; }
.plano__diamante { width: max(2.2vh, 17.6px); height: max(2.2vh, 17.6px); flex: none; }
.plano--premium .plano__nome { color: #fff; }
.plano--premium .plano__preco,
.plano--premium .plano__aviso,
.plano--premium li:not(.plano__mais) { color: var(--pm-suave); }
.plano--premium li.plano__mais { color: #fff; }
.plano--premium li::before { border-color: var(--pm-visto); }
.plano--premium .plano__aviso { border-top-color: var(--pm-linha); }
.plano--premium .plano__breve { border: 0; background: var(--pm-botao); color: #dbe6ff; }
/* OS TRÊS MOTIVOS DO PREMIUM (#371), antes da lista: continuidade,
recuperação e entrega profissional. Um degrau mais claro que o fundo
do cartão, para lerem como o começo da conversa, e não como mais
três itens da lista. */
.plano__destaques { display: grid; gap: .8vh; margin: 0 0 1.8vh; }
.plano__destaque {
display: flex; align-items: flex-start; gap: 1vh;
padding: 1vh 1.2vh; border-radius: 1vh; background: var(--pm-linha);
}
.plano__destaque svg {
flex: none; width: max(2vh, 16px); height: max(2vh, 16px); margin-top: .25em;
color: var(--pm-visto);
}
.plano__destaque span { font-size: max(1.3vh, 10.4px); line-height: 1.45; color: var(--pm-suave); }
.plano__destaque b { display: block; color: #fff; font-size: max(1.45vh, 11.6px); }
.planos--vitrine .plano__destaque span { font-size: .85rem; }
.planos--vitrine .plano__destaque b { font-size: .98rem; }
.perfil__linhas {
border: .12vh solid var(--borda); border-radius: 1.1vh; overflow: hidden;
}
.perfil__linha {
display: flex; justify-content: space-between; align-items: center;
padding: 1.2vh 1.4vh; font-size: max(1.45vh, 11.6px);
}
.perfil__linha + .perfil__linha { border-top: .12vh solid var(--borda); }
.perfil__linha span { color: var(--suave); font-weight: 600; }
.perfil__linha b { font-weight: 800; }
/* A foto ocupa o circulo inteiro, cortada pelo meio. Vale para os tres
lugares onde o retrato aparece — estante, menu e tela da conta. */
.inicio__inicial img, .brand__inicial img, .conta__inicial img {
width: 100%; height: 100%;
object-fit: cover; display: block;
/* Sem raio proprio: quem recorta e o pai, que ja tem overflow
escondido. Arredondar os dois deixava um fio da cor do pai
aparecendo na volta da foto — o "contorno" reclamado. */
border-radius: 0;
}
.inicio__inicial, .brand__inicial, .conta__inicial { overflow: hidden; }
.conta__foto-acoes { display: flex; gap: .8vh; flex-wrap: wrap; margin: -1.6vh 0 .4vh; }
.conta__foto-acoes button { font-size: max(1.35vh, 10.8px); padding: .8vh 1.4vh; }
/* ---- janela de idioma ---- */
.idiomas__lista { display: grid; gap: .5vh; max-height: 46vh; overflow: auto; }
.idiomas__lista button {
display: flex; align-items: center; gap: 1.2vh; width: 100%; text-align: left;
font: inherit; font-size: max(1.5vh, 12.0px); cursor: pointer;
padding: 1.1vh 1.2vh; border-radius: 1vh;
background: transparent; color: var(--ink); border: .12vh solid transparent;
}
.idiomas__lista button:hover { background: var(--linha); }
.idiomas__lista button.on { border-color: var(--primaria-tinta); background: var(--primaria-leve); }
.idiomas__sigla {
display: grid; place-items: center; flex: none;
width: 3.4vh; height: 2.4vh; border-radius: .5vh;
background: var(--linha); border: .12vh solid var(--borda);
font-size: max(1.1vh, 8.8px); font-weight: 800; letter-spacing: .04em;
}
.idiomas__lista b { font-weight: 700; }
.idiomas__lista i { font-style: normal; color: var(--suave); font-size: max(1.3vh, 10.4px); }
/* A janela de entrar mede em pixels, e nao em vh como as outras.
Motivo: o botao do Google e desenhado por eles em pixels, e o
personalizado ("Continuar como Fulano") chega a 381px porque
precisa de espaco para nome e e-mail — ele ignora a largura que
pedimos. Amarrada a `42vh`, a caixa encolhia junto com a ALTURA da
janela e cortava o botao pela metade. */
.modal__caixa--estreita { width: min(28rem, 92vw); }
/* O POPUP DOS PLANOS (#154): dois cartões lado a lado pedem mais
largura que a caixa padrão, amarrada à altura da janela. Abaixo de
800px o `.planos` já empilha os dois. */
.pedir-conta .modal__caixa { width: min(48rem, 92vw); }
.pedir-conta__criar { width: 100%; margin-top: 1.6vh; }
/* O selo do que é do Premium, já no teste (#159): o diamante azul,
pequeno, ao lado do nome da opção — e não uma frase embaixo dela. */
.selo-premium {
display: inline-block; width: 1.1em; height: 1.1em;
margin-left: .35em; vertical-align: -.18em; flex: none;
}
/* O MESMO SELO NO TÍTULO DA BOX (#175): "gravar vídeo é um recurso
premium, destacar com o diamante no título da box lateral", e o mesmo
para a iluminação. No título ele é maior que no botão, porque a letra
ali é pequena e em caixa alta: a 1.1em o diamante sumia dentro dela.
MEDIDO EM vh, E NÃO EM em: os dois selos moram em pais diferentes —
o do Gravar dentro do do título, o da Iluminação ao lado dele,
porque aquele título é reescrito com `textContent` — e cada pai tem
a sua letra. Em `em` saíram 18,1px e 23,2px, dois diamantes de
tamanhos diferentes para a mesma coisa. Em vh, ambos medem o mesmo
venha de onde vier.
O título é `display: block`, então um irmão cairia na linha de baixo.
Aqui os dois viram uma linha só. A margem de baixo continua no
título, que é quem a tinha — movê-la para o selo deixaria o espaço
preso a um elemento que some. */
#peca-titulo { display: inline-block; }
/* O ARO DO SELO (#175): "adicionar o que é / descrição rápida ao passar
o mouse, adicionar fundo circular para dar efeito ao passar o mouse".
O aro é que é o alvo, e não o diamante: um ícone de 20px é pequeno
demais para acertar com o mouse, e menor ainda no toque. O círculo dá
a ele a área de um botão sem desenhar botão nenhum — porque ele não
é botão: não leva a lugar nenhum, só explica.
`tabindex="0"` porque quem anda de teclado também precisa da
explicação, e `:focus-visible` mostra a mesma dica que o mouse. */
.selo-aro {
position: relative; display: inline-grid; place-items: center;
width: max(3.4vh, 27.2px); height: max(3.4vh, 27.2px);
margin-left: .2em; border-radius: 50%; vertical-align: -1.05vh;
background: transparent; cursor: help; outline: none;
transition: background var(--t-botao) var(--mov-padrao);
}
.selo-aro:hover, .selo-aro:focus-visible { background: color-mix(in srgb, var(--primaria) 16%, transparent); }
.selo-aro .selo-premium--titulo { margin-left: 0; vertical-align: 0; }
/* A DICA SE ANCORA NO TITULO, e nao no diamante.
Presa ao diamante ela tinha largura propria e saia pela lateral do
painel — e `.painel-peca` tem `overflow: auto`, que CORTA o que passa
da borda: "todas as caixas dos diamantes estao cortando, limitadas ao
box". Presa ao titulo, que e um bloco da largura do painel, ela nasce
com a largura certa e nao tem como transbordar.
Para baixo, e nao para o lado: pela esquerda ela ia parar em cima da
barra de cima, cobrindo os icones e o proprio botao que a pessoa
acabou de clicar — o selo fica a 27px do topo da janela.
`:has()` porque quem acende e o diamante e quem desenha e o titulo. O
alvo do mouse continua sendo o circulo pequeno; sem isso o balao
abriria so de passar por cima do nome da caixa. */
.selo-titulo { position: relative; }
.selo-titulo::after {
content: attr(data-dica);
position: absolute; top: 100%; left: 0; right: 0;
transform: translateY(-.4vh);
padding: .9vh 1.2vh; border-radius: .8vh;
background: #1f2733; color: #fff; text-align: left;
font-size: max(1.35vh, 10.8px); font-weight: 600; line-height: 1.4;
letter-spacing: 0; text-transform: none;
opacity: 0; pointer-events: none; z-index: 12;
transition: opacity var(--t-botao) var(--mov-padrao), transform var(--t-botao) var(--mov-padrao);
}
.selo-titulo:has(.selo-aro:hover)::after,
.selo-titulo:has(.selo-aro:focus-visible)::after { opacity: 1; transform: translateY(0); }
.selo-premium--titulo { width: max(2.2vh, 17.6px); height: max(2.2vh, 17.6px); }
/* A MARCA D'ÁGUA DO VÍDEO NO GRÁTIS (#159): no canto do mural enquanto
grava, para entrar no filme. Branca translúcida, para ler sobre o
claro e sobre o escuro, e sem pegar clique. FIXA, e não absoluta: o
#board rola, e uma peça absoluta dentro dele andava com a rolagem —
foi parar a 697 mil pixels da tela. O #board ocupa a janela inteira,
então o canto da janela é o canto do que é filmado. */
.marca-dagua {
position: fixed; right: 2.4vh; bottom: 2.4vh; z-index: 90;
pointer-events: none; user-select: none;
display: flex; flex-direction: column; align-items: flex-end; gap: .3vh;
padding: 1vh 1.5vh; border-radius: 1.2vh;
background: rgba(255, 255, 255, .82); color: #16181d;
box-shadow: 0 .3vh 1.2vh rgba(0, 0, 0, .18);
}
.marca-dagua .vit__marca { font-size: max(2.6vh, 18px); line-height: 1; }
.marca-dagua__site { font-size: max(1.15vh, 9px); font-weight: 700; letter-spacing: .03em; opacity: .7; }
.modal__google {
display: flex; align-items: center; justify-content: center; gap: 1vh;
width: 100%; font: inherit; font-size: max(1.55vh, 12.4px); font-weight: 700; cursor: pointer;
padding: 1.3vh; border-radius: 1vh;
background: var(--paper); color: var(--ink); border: .12vh solid var(--borda);
}
.modal__google:hover { background: var(--linha); border-color: var(--suave); }
.modal__google svg { flex: none; }
/* o "ou" e uma linha cortada pelo texto: separa os dois caminhos sem
sugerir que um deles seja o certo */
.modal__ou {
display: flex; align-items: center; gap: 1.2vh;
margin: 2vh 0 0; font-size: max(1.25vh, 10.0px); color: var(--suave);
font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.modal__ou::before, .modal__ou::after {
content: ''; flex: 1; height: .12vh; background: var(--borda);
}
.modal__recado {
margin: 1.6vh 0 0; font-size: max(1.35vh, 10.8px); font-weight: 600; color: var(--suave);
}
.modal__recado.ruim { color: var(--red); }
.modal__nota {
margin: 1.8vh 0 0; font-size: max(1.25vh, 10.0px); line-height: 1.5; color: var(--suave);
}
body.noite .modal__google { background: #262523; }
body.noite .modal__google:hover { background: #302f2c; }
/* ---- renomear e menu de saídas no cartão ---- */
.proj { position: relative; }
.proj__editando {
width: 100%; font: inherit; font-size: max(1.7vh, 13.6px); font-weight: 700;
padding: .2vh .4vh; border: .12vh solid var(--primaria-tinta); border-radius: .6vh;
background: var(--fundo); color: var(--ink);
}
.proj__editando:focus { outline: none; }
.proj__botoes button svg { width: 1.7vh; height: 1.7vh; }
/* `fixed` e posicionado por coordenada: dentro do cartao, a rolagem
da estante recortava o menu e as primeiras opcoes sumiam. */
.proj__saidas {
position: fixed; z-index: 520;
background: var(--paper); border: .12vh solid var(--borda);
border-radius: 1.1vh; box-shadow: var(--sombra-3); padding: .6vh;
min-width: 26vh;
}
.proj__saidas button {
display: block; width: 100%; text-align: left; cursor: pointer;
font: inherit; padding: .9vh 1.1vh; border: 0; border-radius: .8vh;
background: transparent; color: var(--ink);
}
.proj__saidas button:hover { background: var(--linha); }
.proj__saidas b { display: block; font-size: max(1.4vh, 11.2px); font-weight: 700; }
.proj__saidas i { font-style: normal; font-size: max(1.15vh, 9.2px); color: var(--suave); }
/* AS SAÍDAS POR ALCANCE (#236, proposta A), no menu do mural e no do
cartão. Três cartões lado a lado — o que sai —, cada um com o ícone, o
nome e os dois formatos; o .linealt embaixo, de ponta a ponta, porque
não é imagem nem documento: é o projeto. Os cartões têm o fundo das
categorias, e o formato acende no azul da marca. Os seletores levam
`.saidas` na frente para vencer o `.proj__saidas button` de cima. */
#pop-export { width: max(44vh, 320px); }
.proj__saidas.saidas { padding: 1.2vh; width: max(44vh, 320px); min-width: 0; }
.saidas__alcances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8vh; }
.saidas__alcance {
display: grid; justify-items: center; align-content: start; gap: .6vh;
padding: 1.2vh .8vh .8vh; border-radius: 1.2vh; background: var(--linha);
}
.saidas__ic { width: 4.4vh; height: 3.5vh; min-width: 34px; min-height: 27px; color: var(--ink); }
.saidas .saidas__nome {
display: block; margin: 0; text-align: center; color: var(--ink);
font-size: max(1.35vh, 10.8px); font-weight: 800;
}
.saidas__formatos { display: grid; gap: .5vh; width: 100%; }
.saidas .saidas__formatos button {
display: block; width: 100%; text-align: center; cursor: pointer;
font: inherit; font-size: max(1.35vh, 10.8px); font-weight: 700;
padding: .7vh 0; border-radius: .9vh; border: .12vh solid var(--borda);
background: var(--paper); color: var(--ink);
}
.saidas .saidas__formatos button:hover {
border-color: var(--primaria-tinta); color: var(--primaria-tinta); background: var(--primaria-leve);
}
.saidas .saidas__linealt {
display: flex; align-items: center; gap: 1.1vh; width: 100%; margin-top: .8vh;
padding: 1vh 1.2vh; border: 0; border-radius: 1.2vh; background: var(--linha);
font: inherit; font-size: max(1.4vh, 11.2px); font-weight: 700; color: var(--ink);
text-align: left; cursor: pointer;
}
.saidas .saidas__linealt:hover { background: #e7ecf4; }
.saidas__ic-arquivo { width: 2.2vh; height: 2.5vh; min-width: 17px; min-height: 19px; flex: none; }
.saidas .saidas__linealt i {
margin-left: auto; font-style: normal; font-weight: 400;
font-size: max(1.15vh, 9.2px); color: var(--suave);
}
.saidas__nota { margin: .8vh .2vh 0; font-size: max(1.15vh, 9.2px); color: var(--suave); }
.saidas button:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 2px; }
body.noite .saidas__alcance, body.noite .saidas .saidas__linealt { background: #212029; }
body.noite .saidas .saidas__linealt:hover { background: #2b2a33; }
body.noite .saidas .saidas__formatos button:not(:hover) { background: var(--fundo); }
/* ---- tema e fundo na janela de novo projeto ---- */
.modal__dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 1vh; }
.modal__par { display: grid; grid-template-columns: 1fr 1fr; gap: .6vh; }
.modal__par button {
display: flex; flex-direction: column; align-items: center; gap: .5vh;
padding: 1vh .4vh; border-radius: 1vh; cursor: pointer;
font: inherit; font-size: max(1.2vh, 9.6px); font-weight: 700;
background: var(--fundo); color: var(--ink); border: .12vh solid var(--borda);
}
.modal__par button span:first-child { font-size: max(1.8vh, 14.4px); line-height: 1; }
.modal__par button:hover { border-color: var(--primaria-tinta); }
.modal__par button.on { border-color: var(--primaria-tinta); background: var(--primaria-leve); color: var(--primaria-tinta); }
.modal__par .mini-fundo { width: 100%; height: 2.4vh; }
/* ==========================================================
ABERTURA — o logo se montando
==========================================================
As pecas vivem no mesmo quadro, empilhadas por `inset: 0`. Elas ja
nascem alinhadas do Illustrator, entao nao ha nenhuma coordenada a
acertar aqui: o encaixe vem de graca, e mexer em posicao seria
justamente o que quebraria o logo.
A montagem tem tres tempos. O fundo assenta; o L vem da esquerda e
o "a" da direita, cada um do lado a que pertence; por ultimo a
estrela cruza a tela como estrela cadente e o nome entra por baixo.
Houve aqui uma etapa a mais que saiu com a arte nova: o trio dava
lugar a um "recorte", o fundo com as letras vazadas, para elas nao
parecerem tinta colada por cima. Naquela arte as letras eram
brancas e a troca era imperceptivel; nesta o vazado deixa o fundo
da pagina aparecer no lugar delas, e no tema escuro a marca sumia
pelo meio. As letras brancas ficam como estao.
========================================================== */
#abertura {
position: fixed; inset: 0; z-index: 600;
display: grid; place-items: center; align-content: center;
gap: 2.2vh;
background: var(--fundo);
}
/* O roteador esconde o corpo inteiro enquanto decide para onde ir.
A abertura precisa escapar disso — ela existe justamente para
ocupar esse vao. */
html.decidindo body > #abertura { visibility: visible !important; }
.abertura__marca {
position: relative;
width: clamp(112px, 22vh, 190px);
/* A proporcao vem do proprio arquivo. As quatro pecas sao
recortadas na MESMA caixa — a uniao das quatro —, que e o que
mantem o encaixe entre elas e ao mesmo tempo tira a folga vazia
do quadrado original. */
aspect-ratio: 440 / 541;
/* Sem recorte. Ele existia para a estrela nao vazar ao entrar, mas
cortava tambem o L e o "a" enquanto eles deslizam de fora para
dentro — as letras apareciam com o lado ceifado em linha reta, e
o logo parecia preso numa caixa. A estrela passou a entrar de
mais perto, entao nao ha mais o que conter. */
}
.abertura__peca {
position: absolute; inset: 0;
width: 100%; height: 100%;
opacity: 0;
}
/* O monograma nao precisa de versao por tema: vermelho se le tanto
sobre o fundo claro quanto sobre o escuro. Ja o logotipo precisa,
e o motivo esta logo abaixo. */
/* Duas versoes do logotipo, uma por tema. Ele e bicolor — "line"
escuro e "alt" vermelho —, entao mascara de uma cor so nao serve:
apagaria o vermelho. A do escuro tem so a parte escura trocada. */
.abertura__peca--texto-escuro { display: none; }
body.noite .abertura__peca--texto { display: none; }
body.noite .abertura__peca--texto-escuro { display: block; }
/* ---- a montagem ----
Os tempos andaram 180ms para tras. Esse atraso existia para dar
passagem a chapa vermelha, que entrava primeiro; sem ela, manter o
atraso faria a abertura comecar com um vao parado. */
.abertura--montando .abertura__peca--l {
animation: ab-esquerda var(--t-pagina) var(--mov-estouro) both;
}
.abertura--montando .abertura__peca--a {
animation: ab-direita var(--t-pagina) var(--mov-estouro) var(--t-toque) both;
}
.abertura--montando .abertura__peca--estrela {
animation: ab-cadente .72s var(--mov-entrada) .70s both;
}
.abertura--montando .abertura__peca--texto,
.abertura--montando .abertura__peca--texto-escuro {
animation: ab-nome var(--t-pagina) var(--mov-entrada) .92s both;
}
/* ---- o recado de espera ----
So aparece quando a montagem ja rodou algumas vezes: aparecer de
cara faria toda abertura parecer problema. */
.abertura__espera {
font: inherit; font-size: max(1.45vh, 11.6px); color: var(--suave);
margin: 0; min-height: 2vh; text-align: center;
opacity: 0; transition: opacity var(--t-janela) var(--mov-padrao);
}
.abertura__espera.aparece { opacity: 1; }
.abertura__espera.sem-rede { color: var(--red); font-weight: 700; }
@keyframes ab-esquerda {
from { opacity: 0; transform: translateX(-16%) scale(.94); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes ab-direita {
from { opacity: 0; transform: translateX(16%) scale(.94); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes ab-apagar { from { opacity: 1; } to { opacity: 0; } }
@keyframes ab-acender { from { opacity: 0; } to { opacity: 1; } }
/* Estrela cadente: entra reto pela esquerda, esticada no sentido do
movimento — e o alongamento que da a impressao de rastro — e volta
a forma ao parar no lugar. Sem rotacao: girar tiraria a leitura de
"veio em linha reta". */
/* Entra de -46%, e nao de -150%: de tao longe ela precisava do quadro
recortado para nao aparecer atravessada por cima do resto, e era
esse recorte que ceifava as letras. Daqui ela ainda cruza o
suficiente para ler como estrela cadente. */
/* O estica de 2.6 por .5 deformava demais: a estrela entrava como um
borrao horizontal e so virava estrela no fim. Em 1.62 por .82 ela
ainda le como rastro, mas continua sendo uma estrela o tempo todo.
O trajeto tambem ficou um pouco mais longo (.62s -> .72s), que e o
que sobra de suavidade quando se tira exagero da forma. */
@keyframes ab-cadente {
0% { opacity: 0; transform: translateX(-46%) scaleX(1.62) scaleY(.82); }
34% { opacity: 1; transform: translateX(-21%) scaleX(1.32) scaleY(.89); }
72% { opacity: 1; transform: translateX(3%) scaleX(1.04) scaleY(.99); }
100% { opacity: 1; transform: translateX(0) scaleX(1) scaleY(1); }
}
@keyframes ab-nome {
from { opacity: 0; transform: translateY(.8vh); }
to { opacity: 1; transform: translateY(0); }
}
/* ---- a saida ----
Cresce um fio ao sumir, como quem passa por cima da marca e entra.
Encolher daria a impressao de voltar atras. */
.abertura--saindo {
animation: ab-saida var(--t-saida-janela) var(--mov-saida) forwards;
}
@keyframes ab-saida {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(1.06); }
}
/* Quem pediu menos movimento ve a marca inteira, so que aparecendo
em vez de se montando. Antes o monograma ficava escondido nesse
modo, o que sobrava era estrela e nome soltos — e sem a chapa
vermelha isso deixaria de ser um logo. Trocar a animacao por nada
tambem nao serve: a tela ficaria vazia durante a espera, que e
pior do que um logo parado. */
@media (prefers-reduced-motion: reduce) {
.abertura--montando .abertura__peca--l,
.abertura--montando .abertura__peca--a,
.abertura--montando .abertura__peca--estrela,
.abertura--montando .abertura__peca--texto,
.abertura--montando .abertura__peca--texto-escuro {
animation: ab-acender var(--t-janela) var(--mov-entrada) both;
}
.abertura--saindo { animation: ab-apagar var(--t-saida-janela) var(--mov-saida) forwards; }
}
/* ==========================================================
AVISO DE COOKIES
==========================================================
Faixa embaixo, e nao janela no meio: o aviso informa, nao
interrompe. Quem chegou para ver o produto continua vendo o
produto enquanto decide.
========================================================== */
#cookies {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 620;
background: var(--paper); color: var(--ink);
border-top: 1px solid var(--borda);
box-shadow: 0 -.6rem 2rem rgba(20, 18, 14, .10);
animation: ck-sobe var(--t-janela) var(--mov-estouro) both;
}
.cookies--saindo { animation: ck-desce var(--t-saida-cartao) var(--mov-saida) forwards; }
@keyframes ck-sobe { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ck-desce { from { transform: translateY(0); } to { transform: translateY(100%); } }
.cookies__caixa {
max-width: 78rem; margin: 0 auto;
padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem;
align-items: center;
}
.cookies__texto p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--suave); }
.cookies__texto b { color: var(--ink); }
.cookies__mais { margin-top: .3rem !important; }
.cookies__mais a { color: var(--red); }
.cookies__acoes { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cookies__acoes button {
font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
padding: .62rem 1.1rem; border-radius: .6rem; white-space: nowrap;
}
.cookies__texto-btn {
background: transparent; border: 0; color: var(--suave);
text-decoration: underline; padding-left: .4rem; padding-right: .4rem;
}
.cookies__texto-btn:hover { color: var(--ink); }
.cookies__vazado {
background: transparent; color: var(--ink); border: 1px solid var(--borda);
}
.cookies__vazado:hover { background: var(--linha); }
.cookies__cheio { background: var(--red); color: #fff; border: 1px solid var(--red); }
.cookies__cheio:hover { background: var(--red-deep); border-color: var(--red-deep); }
/* ---- as categorias ---- */
.cookies__detalhes {
grid-column: 1 / -1;
border-top: 1px solid var(--borda); padding-top: 1rem; margin-top: .2rem;
display: grid; gap: .7rem;
}
.cookies__linha {
display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
font-size: .9rem;
}
.cookies__linha input { margin-top: .25rem; width: 1rem; height: 1rem; accent-color: var(--red); }
.cookies__linha input:disabled { opacity: .55; }
.cookies__linha b { display: block; }
.cookies__linha i { font-style: normal; color: var(--suave); font-size: .84rem; line-height: 1.5; }
.cookies__detalhes-acoes { display: flex; justify-content: flex-end; }
@media (max-width: 760px) {
.cookies__caixa { grid-template-columns: 1fr; }
.cookies__acoes { justify-content: flex-start; }
#cookies { max-height: 80vh; overflow: auto; }
}
/* ==========================================================
VITRINE — o ritmo da pagina
==========================================================
A malha cobria a pagina inteira, de cima a baixo, e o resultado
era uma pagina sem ritmo: tudo no mesmo plano, nada dizendo onde
um assunto acaba e outro comeca. Agora ela mora so na capa — onde
diz "isto e um mural" — e desaparece por baixo. Dali para frente
as secoes se alternam entre a cor de fundo e a do papel, que e o
que da a impressao de andar pela pagina.
========================================================== */
#vitrine { background: var(--vit-fundo); } /* o fundo azulado do #176 */
.vit__capa { position: relative; }
.vit__capa::before {
content: ''; position: absolute; inset: 0; z-index: 0;
pointer-events: none;
/* some para baixo: cortar a malha numa linha reta pareceria
recorte, e nao fim */
-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
body.fundo-grade .vit__capa::before {
background-image:
linear-gradient(var(--linha-forte) 1px, transparent 0),
linear-gradient(90deg, var(--linha-forte) 1px, transparent 0),
linear-gradient(var(--linha) 1px, transparent 0),
linear-gradient(90deg, var(--linha) 1px, transparent 0);
background-size: 70px 70px, 70px 70px, 14px 14px, 14px 14px;
}
body.fundo-pontos .vit__capa::before {
background-image: radial-gradient(circle, var(--ponto) 0 1px, transparent 1.5px);
background-size: 14px 14px;
}
.vit__capa > * { position: relative; z-index: 1; }
/* Secoes alternadas: o papel marca a pausa entre um assunto e o
seguinte sem precisar de linha divisoria. */
.vit__bloco:nth-of-type(even) { background: var(--paper); }
/* Ate 4rem, e nao 6: com 6 o vazio em cima e embaixo de cada secao
pesava mais que o conteudo ("a area em branco esta grande demais"). */
.vit__bloco { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
/* ---- a rolagem revela ----
Cada peca entra quando chega a vista, e uma vez so: repetir a
cada subida e descida transformaria a leitura em piscar. O estado
inicial so e aplicado quando o JS assume (`html.revela`), senao
quem estiver sem JS ficaria com a pagina invisivel. */
/* Entrada, e nao estouro. A curva de estouro passa do ponto e volta —
num botao clicado isso da vida, mas aqui a peca entra enquanto a
pessoa ROLA, e o balanco briga com a rolagem: o texto chega, passa,
volta, e o olho que estava acompanhando a descida perde a linha.
CURTA E QUASE PARADA. A auditoria viu secoes "momentaneamente
vazias" antes dos cartoes: a entrada era longa (480ms, subindo 1,6
rem, com cascata de ate meio segundo) e so comecava quando a peca ja
estava na tela. Agora ela comeca antes de a peca chegar (ver o
`varrer` em vitrine.js), dura menos e quase nao se desloca: o que se
ve e um leve assentar, nunca um buraco. */
html.revela [data-revela] {
opacity: 0; transform: translateY(.5rem);
transition: opacity 260ms var(--mov-entrada), transform 260ms var(--mov-entrada);
}
html.revela [data-revela].aparece { opacity: 1; transform: none; }
/* filhos em cascata, curta: a lista assenta junta, sem fila de espera */
html.revela [data-revela-fila] > * {
opacity: 0; transform: translateY(.5rem);
transition: opacity 260ms var(--mov-entrada), transform 260ms var(--mov-entrada);
}
html.revela [data-revela-fila].aparece > * { opacity: 1; transform: none; }
html.revela [data-revela-fila].aparece > *:nth-child(1) { transition-delay: 0s; }
html.revela [data-revela-fila].aparece > *:nth-child(2) { transition-delay: .03s; }
html.revela [data-revela-fila].aparece > *:nth-child(3) { transition-delay: .06s; }
html.revela [data-revela-fila].aparece > *:nth-child(4) { transition-delay: .09s; }
html.revela [data-revela-fila].aparece > *:nth-child(5) { transition-delay: .12s; }
html.revela [data-revela-fila].aparece > *:nth-child(6) { transition-delay: .15s; }
html.revela [data-revela-fila].aparece > *:nth-child(7) { transition-delay: .18s; }
html.revela [data-revela-fila].aparece > *:nth-child(8) { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
html.revela [data-revela],
html.revela [data-revela-fila] > * {
opacity: 1 !important; transform: none !important; transition: none !important;
}
}
/* O botao do Google vem dentro de um iframe com largura propria, em
pixels. A caixa centra o que vier e corta o que passar: assim uma
medida errada vira desalinho, e nao um botao saindo pela borda do
modal. */
#entrar-google-gis {
display: flex; justify-content: center;
width: 100%; margin-bottom: .4vh;
}
/* Encolhe inteiro quando nao cabe — numa tela estreita de celular a
caixa fica menor que o botao, e diminuir e melhor que cortar. A
conta e feita no JS, que compara as duas medidas depois de o
Google desenhar. */
#entrar-google-gis > * { transform-origin: center top; }
/* ==========================================================
COR POR CÓDIGO — RGB, CMYK e hexadecimal
==========================================================
Medidas em rem, e nao em vh como o resto do mural: sao campos de
digitar numero, e numero ilegivel nao serve para nada. Amarrado a
vh, num notebook de tela baixa o texto encolhia junto e virava
enfeite.
A seta do seletor e desenhada aqui, e nao a nativa do : no
tamanho que cabe nesta caixa a nativa fica quase invisivel, e era
justamente ela que ninguem achava para trocar de sistema.
========================================================== */
.cor-campos {
grid-column: 1 / -1;
margin-top: .55rem; padding-top: .55rem;
border-top: 1px solid var(--borda);
display: grid; gap: .4rem;
}
/* ---- o seletor de sistema ---- */
.cor-campos__modo { position: relative; }
.cor-campos__modo select {
appearance: none; -webkit-appearance: none;
font: inherit; font-size: .8rem; font-weight: 800; letter-spacing: .04em;
width: 100%; padding: .38rem 1.9rem .38rem .55rem;
background: var(--fundo); color: var(--ink);
border: 1px solid var(--borda); border-radius: .4rem; cursor: pointer;
}
.cor-campos__modo select:hover { border-color: var(--suave); }
.cor-campos__modo select:focus { outline: 2px solid var(--primaria-tinta); outline-offset: -1px; }
.cor-campos__modo svg {
position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
width: .7rem; height: .5rem; pointer-events: none; color: var(--ink);
}
/* ---- os numeros ---- */
.cor-campos__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.cor-campos__nums--4 { grid-template-columns: repeat(4, 1fr); }
.cor-campos__nums label {
display: flex; flex-direction: column; gap: .15rem;
font-size: .68rem; font-weight: 700; color: var(--suave); letter-spacing: .04em;
}
.cor-campos__nums span { text-align: center; }
.cor-campos input {
font: inherit; font-size: .78rem; font-weight: 600;
background: var(--fundo); color: var(--ink);
border: 1px solid var(--borda); border-radius: .35rem;
padding: .3rem .25rem; min-width: 0; width: 100%;
text-align: center; box-sizing: border-box;
}
.cor-campos input:focus { outline: 2px solid var(--primaria-tinta); outline-offset: -1px; }
/* A setinha ja saiu de todo `input[type="number"]` do site, la em
cima, junto com o porque. */
/* ---- a caixinha do hexadecimal ----
Sem rotulo: o "#" ja diz o que e, e uma palavra ali so gastaria a
largura que os numeros precisam. */
.cor-campos__hex {
text-transform: lowercase; letter-spacing: .03em; font-size: .82rem !important;
}
.cor-campos__nota {
margin: 0; font-size: .65rem; line-height: 1.4; color: var(--suave);
}
/* ==========================================================
PISO DE ESCALA — para o notebook nao espremer a interface
==========================================================
O mural mede quase tudo em `vh`, entao a interface acompanha a
ALTURA da tela. Num monitor de 950px isso da uma escala
confortavel; num notebook de 625px a mesma regra encolhe tudo em um
terco — e onde uma caixa em vh guarda conteudo em px, o conteudo
deixa de caber e vaza. Foi o que apareceu nos prints: roda de
emojis atravessando o painel, paleta cortada, barra espremida.
Medido: `.pop-menu--roda` tem 30vh de largura e a `.roda` dentro
dela tem 220px fixos. A 950px o painel da 285px e sobra espaco; a
625px cai para 187px e a roda vaza 33px. A conta e a mesma nos
outros dois casos.
A correcao e dar PISO em pixels as caixas que guardam conteudo de
tamanho fixo. Em tela grande o valor em vh continua ganhando, entao
nada muda para quem ja estava bem.
========================================================== */
/* a roda de emojis tem 220px fixos; o painel precisa caber ela mais o recheio */
.pop-menu--roda { width: max(30vh, 17rem); }
/* grades de botoes e campos: o conteudo tem medida propria e nao
encolhe junto com a caixa */
.pop-menu { min-width: min(17rem, 92vw); }
.pop-menu--roda .roda { max-width: 100%; }
/* Campos de formulario dentro dos menus: a largura vinha de fora e o
recheio de dentro, e nas telas baixas os dois brigavam. */
.pop-menu .campo,
.pop-menu .linha-txt,
.pop-menu .pop-grid { max-width: 100%; box-sizing: border-box; }
.pop-menu input, .pop-menu select, .pop-menu textarea { max-width: 100%; box-sizing: border-box; }
/* O MENU DA CONTA É UMA LISTA (ver o comentário no HTML): a conta em
cima, com o retrato maior, um risco, e Planos e Preferências como
linhas de ícone, nome e seta. Já foram pílulas lado a lado, e antes
disso palavras soltas no branco. */
.brand__links {
display: flex; flex-direction: column; gap: .2vh;
margin-top: .2vh; padding-top: .6vh; border-top: .12vh solid var(--borda);
/* o .menu-topo centraliza os filhos: sem isto a lista encolhia
para o tamanho do texto (141px de 256), como a tira de idiomas */
width: 100%; box-sizing: border-box;
}
.brand__links .brand__link {
width: 100%; display: flex; align-items: center; gap: 1.3vh;
padding: 1.1vh 1.2vh; border: 0; border-radius: 1vh; text-align: left;
background: transparent; color: var(--ink);
font-size: max(1.6vh, 12.8px); font-weight: 700;
}
.brand__link-ic { width: 2.3vh; height: 2.3vh; min-width: 18px; min-height: 18px; flex: none; }
/* A seta de "leva a outra tela", encostada à direita. */
.brand__seta { margin-left: auto; width: 1.6vh; height: 1.6vh; min-width: 12px; min-height: 12px; color: var(--suave); }
/* Com o id: a regra geral de hover de todo botão (`button:not(...)`,
com sete `:not`) é mais específica que qualquer combinação de
classes, e subia a linha ("está muito para cima"). */
#pop-brand .brand__links .brand__link:hover,
#pop-brand .brand__conta:hover {
background: var(--linha); color: var(--ink);
transform: none; box-shadow: none;
}
#pop-brand .brand__links .brand__link:active,
#pop-brand .brand__conta:active { transform: scale(.985); box-shadow: none; }
/* A conta, na mesma língua: sem a caixa em volta, o retrato maior. */
#pop-brand .brand__conta { border: 0; padding: 1vh 1.2vh; gap: 1.4vh; }
#pop-brand .brand__inicial { width: 4.8vh; height: 4.8vh; min-width: 36px; min-height: 36px; }
#pop-brand .brand__quem b { font-size: max(1.75vh, 14px); }
#pop-brand .brand__quem i { font-size: max(1.4vh, 11.2px); }
body.noite .brand__links { border-top-color: #2d2c36; }
body.noite .brand__links .brand__link { background: transparent; color: #d4d4dc; border: 0; }
body.noite #pop-brand .brand__links .brand__link:hover,
body.noite #pop-brand .brand__conta:hover { background: #23232b; color: #fff; }
/* Sem conta: o desenho de uma pessoa num círculo neutro (ver
`vestirInicial` em conta.js), e não a cor da marca, que é da
inicial de quem tem conta. É o mesmo desenho que a estante já usa
no botão de entrar (`pintarConta`, em projetos.js). */
.brand__inicial.sem-conta, .conta__inicial.sem-conta {
background: var(--linha); color: var(--suave);
}
.brand__inicial.sem-conta svg, .conta__inicial.sem-conta svg { width: 60%; height: 60%; }
body.noite .brand__inicial.sem-conta, body.noite .conta__inicial.sem-conta {
background: #23232b; color: #9c9caa;
}
/* O atalho de idioma. Uma tira so, com as tres siglas lado a lado:
trocar de lingua vira um clique, sem passar por janela nenhuma.
`grid-auto-flow: column` e nao tres colunas fixas — a lista sai do
IDIOMAS, e o dia em que ela tiver quatro linguas o CSS nao pode ser
o que impede. */
.brand__idiomas {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .4vh;
/* `width: 100%` porque o `.menu-topo` centraliza os filhos, e sem
isto a tira encolhia para o tamanho do conteudo: as tres siglas
sairam com 13px de largura, pequenas demais para acertar. E o
`grid-auto-columns: 1fr` para as tres repartirem a largura em
partes iguais — sem ele as colunas nascem do tamanho do texto, e
"EN" fica maior que "ES". */
width: 100%;
margin-top: .6vh; padding-top: .8vh;
border-top: .12vh solid var(--borda, #e9eef5);
}
.brand__idioma {
padding: .7vh 0; border-radius: .8vh;
font-size: 1.3vh; font-weight: 700; letter-spacing: .04em;
color: var(--suave, #6b7684); background: var(--superficie-2, #f2f5f9);
}
.brand__idioma:hover { color: var(--tinta, #14161a); }
/* O AZUL DE "ESCOLHIDO" É O DA INTERFACE, e não o do mural.
Aqui estava `var(--blue)`, que é #3bb9ff — o azul-céu que o mural
usa para o que é DESENHO: a cor de fábrica das formas, as alças da
seleção, o contorno de arrastar arquivo. Na tira de idiomas ele
destoava de todo o resto do menu, onde escolhido é #2563eb: o
formato da página, o botão forte, o "+" dos GIFs.
Dois azuis parecidos lado a lado parecem descuido, e eram. */
.brand__idioma.on { background: var(--primaria); color: #fff; }
body.noite .brand__idioma:not(.on) { background: #212029; color: #d4d4dc; }
body.noite .brand__idioma.on { background: var(--primaria); color: #fff; }
/* ==========================================================
BARRA DE PÁGINAS + PERCORRER, JUNTAS
==========================================================
O "percorrer" era uma faixa colada no topo da janela, da largura
inteira da tela, longe da barra a que pertence. Agora mora logo
abaixo dela e tem a MESMA largura.
Quem dita a largura e o #dots, que cresce a cada pagina nova. Por
isso os dois entram num contêiner de `width: max-content`: a
medida sai do filho mais largo e o #scrub estica para ela com
`width: 100%`. Nenhuma conta no JS, e nada para sair de sincronia
quando o numero de paginas muda.
========================================================== */
#barra-paginas {
position: fixed; top: 2.6vh; left: 0; z-index: 96;
/* mesma reserva que o #dots tinha, para nao passar sob o menu do topo */
right: calc(var(--largura-menu, 0px) + 4vh);
margin: 0 auto; width: max-content; max-width: 60vw;
display: grid; gap: .7vh; justify-items: stretch;
pointer-events: none; /* o vao entre as duas nao intercepta cliques */
}
#barra-paginas > * { pointer-events: auto; }
/* o #dots deixa de se posicionar sozinho: quem posiciona e o contêiner */
#dots {
position: static; top: auto; right: auto; bottom: auto; left: auto;
margin: 0; width: auto; max-width: none;
}
/* o percorrer acompanha a largura da barra e ganha a mesma silhueta */
#scrub {
position: relative; top: auto; left: auto; right: auto;
width: 100%; height: 1.1vh;
border-radius: 10vh;
background: var(--linha);
border: .1vh solid var(--borda);
box-shadow: var(--sombra-1);
}
/* Sem `overflow: hidden` no trilho: o botao e mais alto que ele — como
em todo controle de arrastar — e recortar cortava metade dele nas
pontas e um fio em cima e embaixo o tempo todo. Medido: 12,7px de
botao num trilho de 10px. Quem arredonda e cada peca por si. */
#scrub-fill { border-radius: 10vh; }
#scrub-knob {
width: 1.5vh; height: 1.5vh; margin: -.75vh 0 0 -.75vh;
border-width: .18vh;
}
/* Com uma pagina so nao ha para onde ir. A barra continua a vista,
apagada, em vez de sumir: sumindo, a barra de paginas pularia de
lugar ao criar a segunda. */
#scrub.inerte { opacity: .38; pointer-events: none; }
#scrub.inerte #scrub-knob { opacity: .6; }
/* ==========================================================
SELETOR DE COR PRÓPRIO
==========================================================
Substitui o `` porque a linha inteira se
clica, mas ela nao e um botao de icone: ela ja responde ao mouse
com o fundo (`.camada:hover`). Levantando, ela empurrava a si
mesma 1,6px para cima enquanto o lapis — que mora na `li`, fora
dela — ficava parado; e ao mirar o lapis a linha DESCIA de volta
no mesmo instante em que o lapis subia. Duas coisas andando em
sentidos opostos leem como uma animacao enorme, e foi isso que o
dono do produto viu. A linha fica na base (o fundo continua
suave) e sai so do levantar. */
button:not(.alca):not(.girar):not(.cor):not(.parada):not(.swatch):not(.proj__estrela):not(.painel-lado__aba):not([data-alca]):not(.camada__lapis):not(.camada__ir):not(.vcaso__x):not(.camada__desfazer) {
transition: transform var(--t-hover-sai) var(--mov-padrao),
box-shadow var(--t-hover-sai) var(--mov-padrao),
background var(--t-hover-sai) var(--mov-padrao),
color var(--t-hover-sai) var(--mov-padrao),
border-color var(--t-hover-sai) var(--mov-padrao);
}
button:not(.alca):not(.girar):not(.cor):not(.parada):not(.swatch):not(.proj__estrela):not(.painel-lado__aba):not([data-alca]):not(.camada__lapis):not(.camada__ir):not(.vcaso__x):not(.camada__desfazer):not(.camada):hover {
transform: translateY(-.18vh);
transition-duration: var(--t-hover);
}
/* ---- a rede que pega o resto ----
Perseguir família por família fazia a lista crescer sem fim: a cada
auditoria sobravam mais dez botões sem nome. Então o padrão se
inverte — afundar ao clique e anel de foco valem para TODO botão, e
a lista passa a ser de quem NÃO deve se mexer.
Levantar no hover fica de fora desta rede de propósito: é onde o
gosto importa, e um levantar igual em tudo achata a diferença entre
um botão principal e um "x" de fechar.
As exceções são as peças que vivem sobre o canvas: alça de
redimensionar, botão de girar e as amostras de cor já têm movimento
próprio, e somar dois faria a peça pular na mão de quem arrasta.
A ABA DA BARRA LATERAL ENTROU NA LISTA POR OUTRO MOTIVO: ela já usa
`transform` para se centrar na altura da janela, e `translateY(-50%)`
não sobrevive a um `translateY(-.18vh)` escrito por cima. No hover
ela perdia a centralização e saltava meia altura — 32px de um
pulo, animados, num botão de 64. "A animação da seta está muito
grande, deixar fixa, mas manter a animação de mudança de cor": a
cor continua, porque é a `transition` dela que faz isso, e não
esta regra. */
button:not(.alca):not(.girar):not(.cor):not(.parada):not(.swatch):not(.proj__estrela):not(.painel-lado__aba):not(.tool):not([data-alca]) {
transition: transform var(--t-hover-sai) var(--mov-padrao),
box-shadow var(--t-hover-sai) var(--mov-padrao),
background var(--t-hover-sai) var(--mov-padrao),
color var(--t-hover-sai) var(--mov-padrao);
}
/* O lápis, a seta e o desfazer pasta das camadas ficam de fora (#195):
eles se centralizam com `translateY(-50%)`, e o `scale(.96)` daqui —
mais forte que a regra deles — trocava esse transform no clique, e o
botão caía meia altura ("ao clicar o botão vai lá embaixo"). O afundar
deles mora nas regras próprias, com a centralização junto. A regra do
passar o mouse já tinha a mesma exceção. */
button:not(.alca):not(.girar):not(.cor):not(.parada):not(.swatch):not(.proj__estrela):not(.painel-lado__aba):not(.tool):not([data-alca]):not(.camada__lapis):not(.camada__ir):not(.camada__desfazer):active {
transform: scale(.96);
transition-duration: var(--t-press);
}
button:not(.alca):not(.girar):not([data-alca]):focus-visible {
outline: .28vh solid var(--primaria-tinta);
outline-offset: .22vh;
}
/* ---- os cartões da estante ----
Já levantavam; o que faltava era afundar ao clicar, agora que a
miniatura inteira abre o projeto. */
.proj:active { transform: translateY(0) scale(.995); transition-duration: var(--t-press); }
.proj__miniatura { transition: filter var(--t-hover-sai) var(--mov-padrao); }
.proj:hover .proj__miniatura { filter: brightness(1.04); transition-duration: var(--t-hover); }
/* ==========================================================
A COR DO PAPEL
==========================================================
E a paleta de sempre, com a roda de cores junto — so o "A" e novo:
ele volta a cor do tema, e existe porque uma escolha sem volta atras
nao e escolha. */
.cores-fundo { margin: .4vh 0 1vh; }
/* A mesa de recorte e outra fileira porque e outra coisa: nao e
papel, e a superficie EMBAIXO do papel. Misturada com os pasteis,
quem procurasse um papel verde-escuro acharia uma mesa. */
.rotulo-campo--sub {
margin-top: .2vh; font-size: max(1.15vh, 9.2px); opacity: .75;
}
.cores-mesa { margin-bottom: 1vh; }
/* ==========================================================
POR QUE O MURAL NÃO VESTE O FORMATO DA PÁGINA
==========================================================
Eu tentei. O pedido era "preciso da minha página por inteira", e a
ideia era encolher o `#board` para a proporção da página enquanto
grava, com o resto da tela virando moldura — quem grava veria o
quadro que sai.
QUEBROU A GRAVAÇÃO INTEIRA, de duas formas ao mesmo tempo:
O arquivo saía PRETO. O Element Capture só filma um elemento que
pinte dentro dos próprios limites e forme um contexto simples; o
`transform` que centrava o quadro e a sombra gigante que fazia a
moldura tiram o `#board` dessa condição, e a captura passa a
entregar quadros vazios.
E as LATERAIS SAÍAM CORTADAS, por outro motivo: pedir à faixa uma
resolução 16:9 enquanto a fonte tem a proporção da janela faz o
navegador cortar os lados para encaixar.
A lição é a mesma nos dois casos: o elemento capturado não é um
lugar para desenhar. Enquadrar a página é trabalho da CÂMERA — o
ponto 1 do roteiro guarda o zoom, e é ele quem decide o que entra
no primeiro quadro. */
/* ==========================================================
OS QUATRO CANTOS, UM A UM
==========================================================
O desenho é a própria peça em miniatura: um quadrado com o canto
que o botão liga já arredondado. Ligado, ele fica preenchido; um
rótulo escrito "em cima à esquerda" diria a mesma coisa em quatro
vezes mais espaço e ainda precisaria de tradução. */
.canto-quais {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: .5vh; width: 7.4vh; margin: .8vh auto 1.2vh;
}
/* O QUADRADO ENCHE A PROPRIA CELULA, e nao tem largura so dele.
MEDIDO: a grade dava colunas de 3,45vh (7,4vh menos o vao de .5vh,
dividido por dois) e o botao media 3,4vh cravados. Sobrava meio
pixel em cada coluna, o botao ficava encostado a esquerda dela, e
o resultado era um vao horizontal de 5,02px contra 4,57px de vao
vertical — a cruz do meio saia mais grossa de um lado, e o
quadrado de baixo parecia fora de lugar.
Com `1fr` e `aspect-ratio`, quem manda no tamanho e a grade: os
dois vaos passam a ser exatamente o mesmo .5vh, e o desenho fecha
nos quatro lados. */
.canto-quais button {
width: 100%; aspect-ratio: 1; padding: 0; cursor: pointer;
border: .22vh solid var(--borda); background: #f5f7fa;
}
.canto-quais button:hover { border-color: var(--primaria-tinta); }
.canto-quais button.on { background: var(--primaria); border-color: var(--primaria); }
.canto-quais [data-quina="0"] { border-top-left-radius: 1.4vh; }
.canto-quais [data-quina="1"] { border-top-right-radius: 1.4vh; }
.canto-quais [data-quina="3"] { border-bottom-left-radius: 1.4vh; }
.canto-quais [data-quina="2"] { border-bottom-right-radius: 1.4vh; }
/* ==========================================================
DISTORCER, FORA DO PAINEL DE TEXTO
==========================================================
Os quatro controles moravam dentro do painel de texto, onde
herdavam a largura dele. Soltos num painel próprio, precisam de uma
medida: sem ela o painel encolhe até o conteúdo e as barras ficam
com uns poucos pixels de curso, o que é pior do que não ter barra.
A medida é a mesma do painel dos cantos, que é o vizinho de botão e
faz o mesmo tipo de ajuste — dois painéis de tamanhos diferentes
abrindo no mesmo lugar dão um salto a cada troca. */
.pop-distorcer { width: 26vh; }
.pop-distorcer .campo { display: block; margin: 0 0 .9vh; font-size: max(1.35vh, 10.8px); }
.pop-distorcer .campo input[type="range"] { width: 100%; margin-top: .3vh; }
.pop-distorcer .pop-menu__sub { margin: 0 0 .8vh; display: block; }
.pop-distorcer .pop-acoes { margin-top: .2vh; }
.pop-distorcer .pop-acoes .btn { width: 100%; }
/* ---------- LETRAS RECORTADAS ----------
Cada letra e um pedaco de papel: fundo proprio, tinta que contrasta
com ele, um giro de poucos graus e um `clip-path` que corta a borda
como tesoura sem regua. Os cinco recortes sao poligonos diferentes;
qual deles cada letra usa vem sorteado no JavaScript, preso ao id da
peca para nao mudar a cada repintura.
O `display: inline-block` e o que permite girar e deslocar cada uma
sem tirar as outras da linha. O respiro por dentro e em `em`: o
papel cresce junto com a letra, e nao sobra moldura num texto
grande nem falta num pequeno. */
.txt--recorte { line-height: 1.6; }
/* `--tam` e o tamanho sorteado de cada papel (#378), em volta de 1: a
bagunca da peca diz o quanto ele foge do tamanho do texto. */
.txt-recorte {
display: inline-block;
background: var(--papel, #f4f1e8);
color: var(--tinta, #14161a);
font-size: calc(var(--tam, 1) * 1em);
padding: .06em .14em;
margin: 0 .02em;
transform: rotate(var(--giro, 0deg)) translateY(var(--sobe, 0));
}
/* A PALAVRA NAO SE PARTE, e o espaco entre elas existe (#378): cada
palavra e um bloco que nao quebra (ver `juntarPalavras`), e a linha so
quebra no espaco, que ganha largura de verdade. A sombra de papel
colado mora na palavra, e nao na letra: o `clip-path` da tesoura
cortava a `box-shadow` da propria letra, e ela nunca aparecia. */
.txt--recorte .txt-palavra {
display: inline-block; white-space: nowrap;
filter: drop-shadow(.02em .05em 0 rgba(20, 22, 26, .22));
}
.txt--recorte .txt-espaco { margin: 0 .16em; }
.txt-recorte[data-recorte-forma="0"] {
clip-path: polygon(2% 6%, 97% 0%, 100% 92%, 4% 100%);
}
.txt-recorte[data-recorte-forma="1"] {
clip-path: polygon(0% 4%, 95% 3%, 98% 96%, 3% 92%);
}
.txt-recorte[data-recorte-forma="2"] {
clip-path: polygon(4% 0%, 100% 5%, 96% 100%, 0% 94%);
}
.txt-recorte[data-recorte-forma="3"] {
clip-path: polygon(1% 2%, 99% 7%, 94% 93%, 6% 99%);
}
.txt-recorte[data-recorte-forma="4"] {
clip-path: polygon(3% 5%, 96% 0%, 100% 97%, 0% 91%);
}
/* O espaco entre palavras nao leva papel — e quem decide isso e o
JavaScript, que simplesmente nao poe a classe nele. A regra de
CSS que tentei primeiro nao servia: o espaco vira ` `, que e
conteudo, entao `:empty` nunca o alcancava. */
/* ---------- OS ATALHOS DO PAINEL DA LUZ ----------
As predefinicoes e os modos sao cartoes de duas linhas: o nome e o
que ele faz. Um nome sozinho — "destaque", "escurecido" — pede que
a pessoa clique para descobrir, e descobrir custa desfazer. */
.luz-presets { display: grid; grid-template-columns: 1fr 1fr; gap: .6vh; margin-bottom: 1.2vh; }
/* OS MODOS DO AMBIENTE SÃO A FILEIRA DO ROTEIRO (#301): `.cam-lados`,
como "suave | instantânea". Três colunas iguais, para o escolhido não
mudar a largura dos vizinhos; o nome mais comprido pode quebrar em
duas linhas em vez de vazar do cartão. */
.cam-lados.luz-modos { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 1.2vh; }
.cam-lados.luz-modos button { white-space: normal; line-height: 1.15; padding: .7vh .4vh; }
/* e a lâmpada com a câmera (#339) é a mesma fileira de três */
.cam-lados.luz-camera { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 .4vh; }
.cam-lados.luz-camera button { white-space: normal; line-height: 1.15; padding: .7vh .4vh; }
.luz-presets button {
display: block; text-align: left; padding: .9vh 1vh; border-radius: 1vh;
background: var(--fundo); border: .12vh solid var(--borda); color: var(--ink);
font: inherit; cursor: pointer;
}
.luz-presets button:hover { background: var(--linha); }
/* Estes dois sao botoes LARGOS, com titulo e descricao dentro: pintar
o fundo inteiro da secundaria apagaria a leitura. Aqui o "e este" e
o contorno na cor, com o fundo so insinuado. */
.luz-presets button.on {
border-color: var(--primaria-tinta);
background: var(--primaria-leve);
}
.luz-presets b { display: block; font-size: max(1.3vh, 10.4px); font-weight: 800; }
/* A luz ligada a uma peca: o botao, o estado e o contorno das pecas
ligadas. Escolhendo, o cursor vira mira — a proxima peca clicada e
a que recebe a luz. */
.luz-ligar__bt {
width: 100%; padding: 1vh; border-radius: 1vh; font: inherit; font-weight: 800; cursor: pointer;
background: var(--fundo); border: .12vh solid var(--borda); color: var(--ink);
}
.luz-ligar__bt:hover { background: var(--linha); }
.luz-ligar__bt.on { background: var(--red); border-color: var(--red); color: #fff; }
/* os botoes empilhados, com um respiro entre eles; o de por lampada
leva a cor de acao, porque e o primeiro passo */
.luz-ligar__bt + .luz-ligar__bt { margin-top: .6vh; }
.luz-ligar__bt--nova { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.luz-ligar__bt--nova:hover { background: var(--ink); opacity: .88; }
/* o bloco da cena tem o mesmo desenho dos blocos da luz */
/* o corpo é o do cartão, como nos outros blocos (#213): sem fundo nem
cantos próprios, que faziam dele um cartão dentro do cartão */
.peca-bloco--luz-cena > .peca-corpo {
padding: 1.2vh 1.3vh 1.4vh; margin: 0; border-radius: 0 0 1.2vh 1.2vh; background: transparent;
}
.luz-ligar__bt:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 2px; }
body.escolhendo-peca #stage, body.escolhendo-peca #stage .obj { cursor: crosshair; }
#stage .obj.alvo-da-luz { outline: 2px dashed #f5b400; outline-offset: 6px; }
body.gravando #stage .obj.alvo-da-luz, body.ensaiando #stage .obj.alvo-da-luz { outline: none; }
.luz-temp { display: flex; gap: .5vh; margin-bottom: 1.2vh; }
.luz-temp button { flex: 1; }
/* O EFEITO DA LÂMPADA (#191): cinco botões em três colunas — numa linha
só eles não cabem na largura do painel —, e as três cores do efeito
Cores lado a lado. Com `.grupo-btn` no seletor porque a regra dele, no
estudio.css, põe tudo numa fileira. */
.grupo-btn.luz-efeitos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5vh; margin-bottom: 1.2vh; }
/* o botão do grupo tem largura de ícone (4vh); aqui ele ocupa a célula */
.grupo-btn.luz-efeitos button { width: auto; height: auto; padding: .9vh .4vh; font-size: max(1.45vh, 11.6px); }
.luz-efeito-ajustes { display: grid; gap: .6vh; margin-bottom: 1.2vh; }
.luz-cores-lista { display: flex; gap: .8vh; margin-bottom: .6vh; }
.luz-cores-lista input[type="color"] {
width: 4.2vh; height: 4.2vh; min-width: 32px; min-height: 32px; padding: 0;
border: .1vh solid var(--borda); border-radius: .8vh; background: none; cursor: pointer;
}
/* OS CARTÕES DA LUZ USAM A ABA DE TODO PAINEL (#291), a mesma do gravar:
o título solto (`.luz-secao`, #213) existia porque eles não dobravam. */
/* O corpo nao e mais um cartao dentro do cartao: a caixa com borda e o
bloco, e o corpo mora dentro dela como nos outros. */
.peca-bloco--luz > .peca-corpo {
padding: 1.2vh 1.3vh 1.4vh; margin: 0; border-radius: 0; background: transparent;
}
/* o bloco da cena tem o mesmo corpo dos blocos da luz */
/* `:not(.on)` PORQUE A REGRA DE BASE DO ESCURO VENCIA O ESCOLHIDO.
`body.noite .luz-presets button` carrega um elemento a mais que
`.luz-presets button.on`, entao ela pintava por cima: no claro o
escolhido aparecia com borda e fundo na cor, e no escuro os tres
botoes ficavam iguais. "No tema escuro nao tem tantos efeitos e
cores" — nao era falta de desenho, era o desenho sendo coberto. */
body.noite .luz-presets button:not(.on) {
background: var(--fundo); border-color: var(--borda);
}
body.noite .luz-presets button:hover { background: var(--linha); }
/* ---------- AS QUATRO MOLDURAS ----------
Todas sao a mesma peca por baixo — area de midia mais casca —, e o
que muda aqui e so a casca. A polaroid ja tinha a dela no
estudio.css; estas tres vem completar a familia. */
/* SELO: a serrilha e um `clip-path` de dentes, e nao uma mascara.
A MASCARA FOI A PRIMEIRA TENTATIVA, e falhou: quatro camadas de
`radial-gradient` compostas com `mask-composite: intersect`,
que e a receita classica do selo em CSS. MEDIDO na pagina, a
mascara chegava a ser aplicada — aparecia no estilo calculado — e
mesmo assim a borda saia lisa. Nao insisti: o recorte por poligono
ja estava provado no retrato de papel, ao lado, e nao depende de
composicao de camadas.
OS DENTES SAO GERADOS, e nao escritos a mao: onze por lado, cada um
entrando 2,6% da caixa. Escritos a mao seriam oitenta e oito pares
de numeros que ninguem conferiria.
E A MOLDURA PRECISOU ENGROSSAR. Com o respiro de 1,4vh que eu tinha
posto, o dente acontecia dentro de uma faixa de onze pixels e a
borda lia como reta — MEDIDO, o recorte estava aplicado e nao se
via. Enfeite de borda precisa de borda. */
/* A serrilha mora no papel, e não na peça (#279, ver o
`.postit-f--retangular`): cortada na peça, ela apagava a luz de recorte. */
.mold--selo { background: transparent; padding: 2.8vh; box-shadow: none; isolation: isolate; }
.mold--selo::before {
background: #fdfbf4;
clip-path: polygon(0% 0%, 4.55% 2.6%, 9.09% 0%, 13.64% 2.6%, 18.18% 0%, 22.73% 2.6%, 27.27% 0%, 31.82% 2.6%, 36.36% 0%, 40.91% 2.6%, 45.45% 0%, 50% 2.6%, 54.55% 0%, 59.09% 2.6%, 63.64% 0%, 68.18% 2.6%, 72.73% 0%, 77.27% 2.6%, 81.82% 0%, 86.36% 2.6%, 90.91% 0%, 95.45% 2.6%, 100% 0%, 97.4% 4.55%, 100% 9.09%, 97.4% 13.64%, 100% 18.18%, 97.4% 22.73%, 100% 27.27%, 97.4% 31.82%, 100% 36.36%, 97.4% 40.91%, 100% 45.45%, 97.4% 50%, 100% 54.55%, 97.4% 59.09%, 100% 63.64%, 97.4% 68.18%, 100% 72.73%, 97.4% 77.27%, 100% 81.82%, 97.4% 86.36%, 100% 90.91%, 97.4% 95.45%, 100% 100%, 95.45% 97.4%, 90.91% 100%, 86.36% 97.4%, 81.82% 100%, 77.27% 97.4%, 72.73% 100%, 68.18% 97.4%, 63.64% 100%, 59.09% 97.4%, 54.55% 100%, 50% 97.4%, 45.45% 100%, 40.91% 97.4%, 36.36% 100%, 31.82% 97.4%, 27.27% 100%, 22.73% 97.4%, 18.18% 100%, 13.64% 97.4%, 9.09% 100%, 4.55% 97.4%, 0% 100%, 2.6% 95.45%, 0% 90.91%, 2.6% 86.36%, 0% 81.82%, 2.6% 77.27%, 0% 72.73%, 2.6% 68.18%, 0% 63.64%, 2.6% 59.09%, 0% 54.55%, 2.6% 50%, 0% 45.45%, 2.6% 40.91%, 0% 36.36%, 2.6% 31.82%, 0% 27.27%, 2.6% 22.73%, 0% 18.18%, 2.6% 13.64%, 0% 9.09%, 2.6% 4.55%);
}
.mold--selo .midia { border-radius: 0; }
/* RETRATO DE PAPEL: a borda rasgada e um `clip-path` de muitos
pontos irregulares. Nao ha aleatorio aqui de proposito — um rasgo
que muda de forma a cada repintura nao e um rasgo, e um ruido. */
.mold--papel {
/* Mesma licao do selo: o rasgo precisa de papel para acontecer. */
background: transparent; padding: 2.4vh; isolation: isolate;
box-shadow: none;
}
/* o rasgo mora no papel, e não na peça (#279) */
.mold--papel::before {
background: #fff;
clip-path: polygon(
2% 3%, 9% 0%, 17% 4%, 26% 1%, 35% 5%, 44% 1%, 53% 4%, 62% 0%,
71% 5%, 80% 1%, 89% 4%, 97% 1%, 100% 9%, 96% 18%, 100% 27%,
97% 36%, 100% 45%, 96% 54%, 100% 63%, 97% 72%, 100% 81%, 98% 92%,
91% 97%, 82% 100%, 73% 96%, 64% 100%, 55% 97%, 46% 100%, 37% 96%,
28% 100%, 19% 97%, 10% 100%, 2% 95%, 0% 86%, 4% 77%, 0% 68%,
3% 59%, 0% 50%, 4% 41%, 0% 32%, 3% 23%, 0% 14%
);
}
/* Pintados, o selo e o papel rasgado levam a cor no papel recortado:
no `background` da peça (`.obj--polaroid[data-cor]`), ela encheria o
retângulo inteiro, por cima da serrilha e do rasgo. */
.obj--polaroid[data-cor].mold--selo,
.obj--polaroid[data-cor].mold--papel { background: transparent; }
.obj--polaroid[data-cor].mold--selo::before,
.obj--polaroid[data-cor].mold--papel::before { background: var(--cor-obj); }
/* FOLHA DE CADERNO: a margem furada a esquerda e uma coluna de
circulos, tambem repetida — mesma razao do selo. */
.mold--caderno {
background: #fffdf7; padding: 1.2vh 1.2vh 1.2vh 4.4vh;
background-image:
radial-gradient(circle at 2.2vh 50%, #e7e3d8 .62vh, transparent .64vh);
background-size: 100% 3.6vh;
background-repeat: repeat-y;
border-left: .12vh solid #f0ebdd;
}
.mold--caderno .txt { font-family: 'Caveat', cursive; }
/* Os retratos do menu: a casca de verdade, encolhida e sem foto. */
.mold-galeria { display: grid; grid-template-columns: 1fr 1fr; gap: .8vh; }
.mold-galeria button {
display: flex; flex-direction: column; align-items: center; gap: .6vh;
padding: 1vh .6vh; border-radius: 1vh; cursor: pointer;
background: var(--fundo); border: .12vh solid var(--borda); color: var(--ink);
font: inherit;
}
/* O hover dos pins: o cartão escurece e o nome fica branco ("no preview
das molduras adiciona esse fundo escuro ao passar o mouse"). A
pastilha do retrato é transparente, para a moldura aparecer sobre o
escuro. */
.mold-galeria button:not(.cor-propria):hover { background: #1f2733; color: #fff; border-color: #1f2733; }
.mold-galeria .jan-mini { background: transparent; }
.mold-galeria i {
font-style: normal; font-size: max(1.2vh, 9.6px); font-weight: 700;
}
/* O retrato vai inteiro, no tamanho de verdade, para o palco da
pastilha (a mesma `.jan-mini` das janelas), e é reduzido lá. Não é
peça do mural: nada do que a faz arrastável vale aqui. */
.mold-retrato { display: block; position: static; transform: none; pointer-events: none; }
.mold-retrato .txt { display: block; }
.mold-retrato .midia { background: #dfe6ef; }
.mold-galeria .jan-mini { height: 11vh; }
body.noite .mold-galeria button:not(.cor-propria) { background: var(--paper); border-color: var(--borda); }
body.noite .mold-galeria button:not(.cor-propria):hover { background: #1f2733; border-color: #1f2733; color: #fff; }
/* O status da exportacao nasce vazio (issue #15: sem dicas no editor)
e so ocupa lugar quando ha o que dizer. */
#export-status:empty { display: none; }
/* ==========================================================
CAMADAS (js/camadas.js)
==========================================================
Por cima da barra da peça: escolher uma camada seleciona a peça, e
a barra dela abriria tapando a lista que está sendo usada. */
.painel-lado--camadas { z-index: 98; }
/* ---- camadas: miniatura + nome, em três vistas ----
O lado da miniatura em cada vista é o mesmo número de `LADO` em
js/camadas.js: lista 40, pequenos 72, grandes 132. */
.camadas__vista { width: max-content; margin: .4vh 0 1.2vh auto; }
/* A COLUNA NUNCA PASSA DA LISTA (#201). Com a coluna `auto` de antes,
o campo de renomear levava a largura natural dele (20 letras) para a
conta da grade: a coluna crescia de 274 para 293px, passava do painel
e abria uma barra de rolagem de lado. `minmax(0, 1fr)` deixa a coluna
do tamanho da lista, e o campo encolhe dentro dela. */
.camadas__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5vh; grid-template-columns: minmax(0, 1fr); }
.camadas__lista--p { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .6vh; }
.camadas__lista--g { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .8vh; }
.camada {
width: 100%; display: flex; align-items: center; gap: 1vh;
padding: .6vh; border-radius: 1vh; text-align: left; cursor: grab;
font: inherit; font-size: max(1.4vh, 11.2px); color: var(--ink);
background: var(--fundo); border: .12vh solid transparent;
touch-action: none;
}
/* nas grades a miniatura vai em cima e o nome embaixo */
.camadas__lista--p .camada, .camadas__lista--g .camada {
flex-direction: column; align-items: stretch; gap: .5vh;
}
.camada__mini {
position: relative; overflow: hidden; flex: 0 0 auto;
width: 40px; height: 40px; border-radius: .7vh;
background: var(--paper); border: .1vh solid var(--borda);
}
.camadas__lista--p .camada__mini { width: 100%; height: 72px; }
.camadas__lista--g .camada__mini { width: 100%; height: 132px; }
/* a cópia mora no centro, encolhida; a escala vem do JS */
.camada__copia { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; }
.camada__nome { display: flex; flex-direction: column; min-width: 0; }
.camada__nome b, .camada__nome small {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.camada__nome b { font-weight: 800; }
.camada__nome small { color: var(--suave); font-size: .9em; }
.camada__campo {
flex: 1 1 auto; min-width: 0; font: inherit; font-weight: 800; color: var(--ink);
padding: .3vh .6vh; border-radius: .6vh; border: .12vh solid var(--primaria-tinta); background: var(--paper);
}
.camada:hover { background: var(--linha); }
.camada.on { border-color: var(--primaria-tinta); background: var(--primaria-leve); }
.camada:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 2px; }
/* arrastando: a camada segue o ponteiro sem transição, e um traço
azul marca onde ela vai cair */
.camada.arrastando { position: relative; z-index: 1; cursor: grabbing; box-shadow: var(--sombra-2); }
.reordenando .camada:not(.arrastando) { pointer-events: none; }
/* ENQUANTO ARRASTA, SÓ O TRAÇO FALA.
A linha escolhida mantinha a lavagem e o anel enquanto outra era
arrastada: dois sinais azuis na lista, dizendo coisas diferentes.
Durante o gesto só uma pergunta importa — onde isto vai cair — e
quem responde é o traço. A seleção não se perde; o que sai é o
desenho dela, e ele volta ao soltar. */
/* A cor de uma linha EM REPOUSO, que nao e a mesma nos dois temas: no
claro vem de `.camada`, no escuro da rede do painel. Aqui estava
`--fundo` nos dois, e no escuro isso e mais escuro que a linha
normal — ela nao perdia so o azul, afundava. */
.reordenando .camada.on {
background: var(--fundo); border-color: transparent; box-shadow: none;
}
body.noite .reordenando .camada.on { background: var(--linha); }
.reordenando .camada.on.arrastando { box-shadow: var(--sombra-2); }
/* O LÁPIS SOME ENQUANTO DURA O ARRASTO.
Ele mora FORA da camada, como irmão dela dentro do `` (botão
dentro de botão não existe), e por isso é posicionado em relação
ao ` `. A camada arrastada anda por `transform`, o lápis fica
parado, e parece que ele fugiu — era a linha saindo de baixo
dele. Arrastando não se renomeia: ele sai do caminho. */
.reordenando .camada__lapis { opacity: 0; pointer-events: none; }
.camada.cai-aqui { box-shadow: 0 -.3vh 0 var(--primaria-tinta); }
.camadas__lista--p .camada.cai-aqui, .camadas__lista--g .camada.cai-aqui { box-shadow: -.3vh 0 0 var(--primaria-tinta); }
.cai-no-fim li:last-child .camada { box-shadow: 0 .3vh 0 var(--primaria-tinta); }
.camadas__vazio { color: var(--suave); font-size: max(1.3vh, 10.4px); text-align: center; }
body.noite .camada:not(.on):not(:hover) { background: var(--paper); }
/* o lápis de renomear: à direita da linha na lista, no canto da
miniatura nas grades */
.camadas__lista > li { position: relative; }
/* O MESMO BOTAO DA ESTANTE, trazido para ca: corpo, canto e a
animacao da rede (levanta e cresce no hover, afunda no clique).
Antes era um icone solto sobre a linha, e nao se lia como botao. */
.camada__lapis {
position: absolute; right: .6vh; top: 50%; transform: translateY(-50%);
width: 26px; height: 26px; padding: 5px; border: 0; border-radius: .9vh;
background: var(--linha); color: var(--ink); cursor: pointer; display: grid; place-items: center;
transition: background var(--t-hover-sai) var(--mov-padrao),
color var(--t-hover-sai) var(--mov-padrao),
transform var(--t-hover-sai) var(--mov-padrao);
}
.camadas__lista--p .camada__lapis, .camadas__lista--g .camada__lapis {
top: 1vh; right: 1vh; transform: none; background: var(--paper); box-shadow: var(--sombra-1);
}
.camada__lapis svg { width: 100%; height: 100%; }
/* O LEVANTAR E O AFUNDAR SAO ESCRITOS AQUI, com a centralizacao
dentro deles.
`transform` NAO SOMA. A rede escreve `translateY(-.25vh)
scale(1.06)` no hover, e isso apagaria o `translateY(-50%)` que
centraliza este botao — ele cairia meia altura ao receber o mouse,
que foi um defeito real desta tela. Os valores sao os mesmos da
rede; o que muda e que aqui eles vem acompanhados. */
/* AZUL COMO A SETA (#201): "coloca o destaque azul no botão de
renomear também, igual da seta". */
.camada__lapis:hover {
background: var(--primaria); color: #fff;
transform: translateY(calc(-50% - .1vh)) scale(1.03);
transition-duration: var(--t-hover);
}
.camada__lapis:active {
transform: translateY(-50%) scale(.97);
transition-duration: var(--t-press);
}
/* NO ESCURO A LINHA JÁ É `--linha`, então o lápis precisa do degrau
SEGUINTE para não sumir dentro dela.
MEDIDO na estante, que é o botão que ele está copiando: o cartão é
`--paper` e o botão é `--linha` — um degrau de distância, e é isso
que o faz ler como botão. Aqui a conta é a mesma, partindo de um
degrau acima, porque a superfície de trás já subiu um. */
body.noite .camada__lapis { background: var(--borda); }
body.noite .camada__lapis:hover { background: var(--primaria); }
/* Nas grades ele mora no canto da miniatura e nao e centralizado
(ver a regra logo abaixo), entao ali os valores da rede servem
como estao. */
.camadas__lista--p .camada__lapis:hover,
.camadas__lista--g .camada__lapis:hover { transform: translateY(-.1vh) scale(1.03); }
.camadas__lista--p .camada__lapis:active,
.camadas__lista--g .camada__lapis:active { transform: translateY(0) scale(.97); }
.camada__lapis:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 2px; }
/* ==========================================================
OS MENUS DA BARRA DE CIMA NO PADRÃO DOS PAINÉIS
==========================================================
"Ajuste o layout das box flutuantes das ferramentas do menu superior
também." Cadeado, exportar e aparência continuam suspensos (são
escolha de um clique), mas falam a mesma língua da coluna lateral:
título grande e escuro, opções em cartão com o fundo das categorias
(`.peca-aba`), e a escolhida marcada pelo contorno azul — e não por
um bloco cheio, nem por virar preto ao passar o mouse. */
#pop-cadeado > .pop-menu__t, #pop-export > .pop-menu__t,
#pop-inserir > .pop-menu__t {
display: block; margin: .2vh 0 1.4vh;
font-size: max(1.8vh, 14.4px); font-weight: 800;
letter-spacing: .04em; color: var(--ink);
}
#pop-cadeado .cadeado-modos button, #pop-export .pop-grid button, #pop-inserir .pop-grid button {
background: var(--linha); border: .12vh solid transparent; border-radius: 1.2vh;
color: var(--ink); transform: none;
}
#pop-cadeado .cadeado-modos button:hover, #pop-export .pop-grid button:hover,
#pop-inserir .pop-grid button:hover {
background: #e7ecf4; color: var(--ink); border-color: transparent; transform: none;
}
#pop-cadeado .cadeado-modos button.on { background: var(--primaria-leve); border-color: var(--primaria-tinta); }
#pop-cadeado .cadeado-modos button.on b { color: var(--ink); }
#pop-cadeado .cadeado-modos button.on i { color: var(--suave); }
body.noite #pop-cadeado .cadeado-modos button:not(.on):not(.cor-propria),
body.noite #pop-export .pop-grid button:not(.on):not(.cor-propria),
body.noite #pop-inserir .pop-grid button:not(.on):not(.cor-propria) {
background: #212029; color: var(--ink);
}
body.noite #pop-cadeado .cadeado-modos button:not(.cor-propria):hover,
body.noite #pop-export .pop-grid button:not(.cor-propria):hover,
body.noite #pop-inserir .pop-grid button:not(.cor-propria):hover {
background: #2b2a33;
}
/* As caixas de número do Formato (margem e respiro) iguais às do
"Tamanho exato": "deixe essa box numérica da página e da margem igual
a onde colocamos o tamanho exato". MEDIDO: fundo, borda, canto e
tamanho já batiam; sobravam o número em negrito e um segundo
contorno — o do campo de dentro — ao focar. */
#pop-formato .campo__num input[type="number"] { font-weight: 400; }
#pop-formato .campo__num input:focus,
#pop-formato .campo__num input:focus-visible { outline: none; box-shadow: none; }
/* Toda barrinha sem fundo próprio. No esquema escuro o navegador dá a
cada `range` um fundo cinza (#3b3b3b, MEDIDO), que aparecia como uma
sombra atrás da barra. Só a cor: a régua em pé desenha o fio dela
como imagem de fundo (`.mini-ctrl__barra`), e essa fica. */
input[type="range"] { background-color: transparent; }
/* ---- camadas: pastas e lista geral (js/camadas.js) ---- */
.camadas__topo { display: flex; align-items: center; gap: 1vh; margin: .4vh 0 1.2vh; }
.camadas__topo .camadas__vista { margin: 0 0 0 auto; }
/* A TRANSPARÊNCIA DA CAMADA (#194): a barra logo abaixo do topo, para as
escolhidas. Só ela: "tá bom só em cima" — nada a mais na linha. */
.camadas__opacidade { margin: 0 0 1.2vh; }
.camadas__opacidade input:disabled { opacity: .45; }
/* OS TIPOS DE TRANSPARÊNCIA (#217): oito quadradinhos numa fileira, cada
um com a miniatura do degradê que aplica — o desenho diz a direção
melhor que uma seta. A tinta é a do texto, então vale nos dois temas. */
/* a categoria do degradê fica entre a opacidade e a lista, com o mesmo
respiro embaixo que a opacidade tem */
.camadas__degrade { margin: 0 0 1.2vh; }
.camadas__degrade .campo { display: block; margin: 1vh 0 0; }
.camadas__sumir { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5vh; margin: 0; }
.camadas__sumir button {
aspect-ratio: 1; padding: .45vh; border-radius: .7vh; cursor: pointer;
border: .12vh solid var(--borda); background: var(--paper); display: grid; place-items: stretch;
}
.camadas__sumir button:hover { border-color: var(--primaria-tinta); }
.camadas__sumir button.on { border-color: var(--primaria); background: var(--primaria-leve); }
.camadas__sumir button:disabled { opacity: .45; cursor: default; border-color: var(--borda); }
.camadas__sumir button:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 2px; }
.camadas__sumir i { display: block; border-radius: .35vh; background: var(--ink); }
.camadas__sumir [data-sumir="direita"] i { background: linear-gradient(90deg, var(--ink), transparent); }
.camadas__sumir [data-sumir="esquerda"] i { background: linear-gradient(270deg, var(--ink), transparent); }
.camadas__sumir [data-sumir="baixo"] i { background: linear-gradient(180deg, var(--ink), transparent); }
.camadas__sumir [data-sumir="cima"] i { background: linear-gradient(0deg, var(--ink), transparent); }
.camadas__sumir [data-sumir="diagonal"] i { background: linear-gradient(135deg, var(--ink), transparent); }
.camadas__sumir [data-sumir="radial"] i { background: radial-gradient(closest-side, var(--ink) 25%, transparent); }
.camadas__sumir [data-sumir="centro"] i { background: radial-gradient(closest-side, transparent 25%, var(--ink)); }
.camadas__nova-pasta {
display: inline-flex; align-items: center; gap: .6vh;
padding: .7vh 1.1vh; border-radius: 1vh; border: 0; cursor: pointer;
font: inherit; font-size: max(1.3vh, 10.4px); font-weight: 700;
background: var(--primaria); color: #fff;
}
.camadas__nova-pasta svg { width: 2vh; height: 2vh; }
.camadas__nova-pasta:hover:not(:disabled) { background: var(--primaria-toque); }
.camadas__nova-pasta:disabled { opacity: .45; cursor: default; }
.camadas__nova-pasta:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 2px; }
/* a pasta e o nome da página ocupam a largura toda, também nas grades */
.camadas__lista > .camada-pasta, .camadas__lista > .camadas__pagina { grid-column: 1 / -1; }
.camada--pasta { padding-right: 64px; }
.camada__seta {
flex: 0 0 auto; width: 2.4vh; height: 2.4vh; display: grid; place-items: center; cursor: pointer;
}
.camada__seta::before {
content: ''; width: .9vh; height: .9vh; border-right: .22vh solid var(--suave);
border-bottom: .22vh solid var(--suave); transform: rotate(45deg) translate(-.15vh, -.15vh);
}
.camada--pasta.fechada .camada__seta::before { transform: rotate(-45deg); }
.camada__pasta-ic { flex: 0 0 auto; width: 2.4vh; height: 2.4vh; color: var(--suave); }
.camadas__lista--p .camada--pasta, .camadas__lista--g .camada--pasta {
flex-direction: row; align-items: center;
}
/* as peças da pasta vêm recuadas, com um fio à esquerda dizendo de quem são */
.camadas__lista--l > .camada-na-pasta { margin-left: 2.4vh; position: relative; }
.camadas__lista--l > .camada-na-pasta::before {
content: ''; position: absolute; left: -1.3vh; top: 0; bottom: 0; width: .2vh; background: var(--borda);
}
.camada__desfazer {
position: absolute; right: calc(.6vh + 30px); top: 50%; transform: translateY(-50%);
width: 26px; height: 26px; padding: 5px; border: 0; border-radius: 50%;
background: transparent; color: var(--suave); cursor: pointer; display: grid; place-items: center;
transition: background var(--t-hover-sai) var(--mov-padrao),
color var(--t-hover-sai) var(--mov-padrao),
transform var(--t-hover-sai) var(--mov-padrao);
}
.camada__desfazer svg { width: 100%; height: 100%; }
/* Os mesmos valores do lapis ao lado, com a centralizacao DENTRO
deles: `transform` nao soma, e dois irmaos na mesma linha tem que
se mexer igual. */
.camada__desfazer:hover {
color: var(--ink); background: var(--linha);
transform: translateY(calc(-50% - .1vh)) scale(1.03);
transition-duration: var(--t-hover);
}
.camada__desfazer:active {
transform: translateY(-50%) scale(.97);
transition-duration: var(--t-press);
}
.camada__desfazer:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 2px; }
/* nas grades a pasta é uma linha: lápis e desfazer no meio dela */
/* A pasta ocupa a largura toda tambem nas grades, entao o lapis dela
volta a ser centralizado — e volta junto o cuidado do transform. */
.camadas__lista--p > .camada-pasta .camada__lapis:hover,
.camadas__lista--g > .camada-pasta .camada__lapis:hover {
transform: translateY(calc(-50% - .1vh)) scale(1.03);
}
.camadas__lista--p > .camada-pasta .camada__lapis:active,
.camadas__lista--g > .camada-pasta .camada__lapis:active {
transform: translateY(-50%) scale(.97);
}
.camadas__lista--p > .camada-pasta .camada__lapis, .camadas__lista--g > .camada-pasta .camada__lapis {
top: 50%; right: .6vh; transform: translateY(-50%); background: transparent; box-shadow: none;
}
.camadas__pagina {
margin: 1.2vh 0 .2vh; font-size: max(1.2vh, 9.6px); font-weight: 800;
letter-spacing: .1em; text-transform: uppercase; color: var(--suave);
}
.camadas__lista > .camadas__pagina:first-child { margin-top: 0; }
/* ==========================================================
ÍCONES DE LINHA NO LUGAR DE CARACTERES
==========================================================
"Ícones de linha > concordo, avançar!" As setas, o círculo do
degradê, o x de tirar e o olho do roteiro eram caracteres de texto,
e cada sistema os desenhava de um jeito. Agora são `` com a
classe `.ic-linha`, do tamanho da letra do botão (1em), e cada
lugar ajusta o seu. Sem `margin: auto` de fábrica: num botão com
ícone e texto lado a lado, ela empurraria o texto para o canto. */
.ic-linha { display: block; width: 1em; height: 1em; flex: none; }
.ic-linha--esq { transform: rotate(180deg); }
.ic-linha--cima { transform: rotate(-90deg); }
.ic-linha--baixo { transform: rotate(90deg); }
/* junto de uma palavra, na linha dela */
.ic-linha--texto { display: inline-block; vertical-align: -.15em; margin-right: .45em; }
.ic-linha--depois { margin-right: 0; margin-left: .45em; }
/* sozinhos no botão: centralizados onde o botão não é grade */
.cor-forma__grads button .ic-linha { width: 1.35em; height: 1.35em; margin: 0 auto; }
.foto-setas .ic-linha { width: 1.6em; height: 1.6em; margin: 0 auto; }
.vdemo__seta .ic-linha { margin: 0 auto; }
/* nas grades, só o tamanho */
.painel-lado__aba .ic-linha { width: .75em; height: .75em; }
/* "Aumenta o tamanho do ícone do olho nos pins numéricos", e depois
"o olho tá grande em comparação aos outros": os quatro da linha —
setas, olho, ir, tirar — no MESMO tamanho, um pouco acima dos 0,95
de antes. Um maior que os vizinhos parece outro tipo de botão. */
/* Em medida própria, e não em `em`: o olho e o ir têm letras de tamanhos
diferentes (13,6 e 14,4px), e 1em de cada um já saía desigual. */
.cam-ir .ic-linha, .cam-tirar .ic-linha {
width: max(1.9vh, 15px); height: max(1.9vh, 15px);
}
.parada__tirar .ic-linha, .gifs__tirar .ic-linha { width: .95em; height: .95em; }
.escolhas button .escolha__ic { width: max(2vh, 16px); height: max(2vh, 16px); }
.fm-mao__icone.ic-linha { width: 1.25em; height: 1.25em; }
/* ==========================================================
POST-IT E FORMAS NA BARRA DE BAIXO
========================================================== */
/* Os quatro tipos de post-it numa fileira, cada um a miniatura de
verdade da peça, na cor escolhida embaixo, com o nome. A arte mora
numa caixa da altura da miniatura quadrada: o retangular e o
marca-páginas, mais baixos, ficam no meio dela, e os quatro nomes
na mesma linha. */
.postit-tipos { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8vh; margin: .4vh 0 1.2vh; }
.postit-tipo {
display: flex; flex-direction: column; align-items: center; gap: .7vh;
padding: .9vh .4vh .9vh; border-radius: 1vh; cursor: pointer;
border: .12vh solid transparent; background: var(--linha); color: var(--ink);
font: inherit; font-size: max(1.2vh, 9.6px); font-weight: 700; line-height: 1.2; text-align: center;
}
.postit-tipo:hover { border-color: var(--borda-forte, #c9d3e0); background: #e7ecf4; }
/* A miniatura ocupa quase a largura do cartão ("aumentar o preview,
tem muito espaço em branco"): era 3,6vh, 28px num cartão de 64. */
.postit-tipo__arte {
--mini: max(5.8vh, 42px);
display: grid; place-items: center; width: 100%; height: var(--mini);
}
.postit-tipo .mini { --mini: inherit; margin: 0; }
body.noite .postit-tipo { background: #212029; }
body.noite .postit-tipo:hover { background: #2b2a33; }
#pop-shape > .pop-grid__faixa { margin: .2vh 0 .8vh; }
/* ==========================================================
BARRAS E ÍCONES MAIORES
==========================================================
Escolhido numa prévia ao vivo, comparando com uma barra de ícones
maiores e mais grossos: "barras tanto inferior quanto superior
+15%" e "box lateral em +45%".
O `zoom` vai nos FILHOS de cada barra, e não na barra. Na barra ele
multiplicaria também o deslocamento de quem é posicionado (`right`,
`bottom`), e a prévia mostrou o efeito: a barrinha da peça se
afastava da peça. Nos filhos, cresce o que se vê, e a barra continua
no lugar que o CSS dela manda. */
:root { --escala-barras: 1.15; }
#toolbar > *, #dots, #topo-dir > *, .sel-acoes > * { zoom: var(--escala-barras); }
/* AS DUAS BARRAS NO MESMO EIXO. "Configura as duas barras para
ficarem sempre alinhadas centralizadas, não podem ficar
desajustadas!"
A de baixo centraliza na janela; a de cima centralizava numa faixa
que descontava o menu do canto (#topo-dir) SÓ do lado direito, e o
meio dela caía ~35px à esquerda do meio da de baixo. Descontando o
mesmo dos dois lados, ela continua sem passar por baixo do menu e o
meio volta a ser o da janela.
E NENHUMA DAS DUAS ANDA QUANDO UM PAINEL ABRE. Elas chegaram a se
recentrar no espaço ao lado do painel da direita, e o pedido foi o
contrário: "ao abrir uma box lateral de ferramentas as barras tanto
superior quanto inferior se deslocam, não é para acontecer, elas são
fixas e centralizadas! Sem movimento!" O meio delas é o da janela,
sempre; numa janela estreita o painel passa por cima delas. */
:root { --reserva-topo: calc(var(--largura-menu, 0px) + 4vh); }
#barra-paginas { left: var(--reserva-topo); right: var(--reserva-topo); }
/* Os ícones das categorias do painel lateral: 2,9vh, o tamanho
aprovado na prévia (era 2,2vh). */
.peca-aba__ic { width: 2.9vh; height: 2.9vh; }
/* ==========================================================
SUA CONTA NO PADRÃO NOVO
==========================================================
"Melhorar esse layout. Já ajuste todo menu de sua conta para o novo
padrão, tudo pensando na experiência do usuário." O padrão é o das
barras laterais: ícone de traço, a escolha em azul, cartões com o
mesmo canto e o mesmo respiro, e cada seção dizendo o nome dela. */
/* As abas: ícone e nome, e a escolhida em azul, como as categorias
abertas do painel lateral. */
.conta__nav button { display: flex; align-items: center; gap: 1.3vh; }
.conta__nav-ic { width: 2.4vh; height: 2.4vh; min-width: 18px; min-height: 18px; flex: none; }
.conta__corpo .conta__nav button.on { background: var(--primaria-leve); color: var(--primaria-tinta); border-color: transparent; }
/* O nome da seção em cima do que ela mostra: a aba diz onde se está,
o título diz de novo junto do conteúdo, onde o olho está. */
.conta__secao {
margin: .4vh 0 2vh; font-size: max(2.3vh, 17px); font-weight: 800; color: var(--ink);
}
/* Todos os cartões com o mesmo corpo. */
.conta__cartao { border-radius: 1.4vh; padding: 2.2vh 2.4vh; }
.conta__cartao > b { font-size: max(1.75vh, 14px); margin-bottom: 1vh; }
.conta__rotulo--topo { margin-top: 0; }
/* O retrato do perfil dentro de um cartão, e não solto. */
.conta__cartao--retrato .conta__quem { margin-bottom: 1.8vh; }
.conta__cartao--retrato .conta__foto-acoes { margin: 0; }
.conta__inicial.sem-conta svg { width: 55%; height: 55%; }
/* O visitante: um cartão em azul claro, que é convite e não alerta. */
.conta__cartao--visitante { background: #f5f8ff; border-color: #d6e2fb; }
body.noite .conta__cartao--visitante { background: #1a2233; border-color: #2a3a5c; }
/* Tema e fundo: cartões de escolher, com o desenho em cima, e a
escolhida em azul — o mesmo jeito de marcar dos formatos. */
.conta__cartao .modal__par { gap: 1vh; }
.conta__cartao .modal__par button {
padding: 1.6vh 1vh 1.3vh; gap: .9vh; border-radius: 1.2vh;
font-size: max(1.4vh, 11.2px);
}
.modal__par .escolha__ic { width: max(2.6vh, 20px); height: max(2.6vh, 20px); }
.conta__cartao .modal__par .mini-fundo { height: 4.2vh; border-radius: .8vh; }
/* Idioma: o escolhido ganha um ✓ no fim da linha, além do azul. */
.idiomas__lista button.on::after {
content: ''; margin-left: auto; flex: none;
width: 1.8vh; height: 1.8vh; min-width: 14px; min-height: 14px; background: var(--primaria);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ==========================================================
MIOLO DA RODA
==========================================================
"Corrigir esse erro no círculo cromático, deixar configurado no
branco no tema claro e no preto no tema escuro."
O miolo mostrava a cor escolhida, com um aro claro em volta. Na
barra, a cor do pincel virava um disco dentro do arco-íris, e o aro
branco sobre o vermelho do começo do gradiente lia como defeito. A
cor que está valendo continua dita pela caneta acesa, que se veste
dela; a roda fica sendo só a porta para escolher qualquer cor. */
/* O MIOLO E O FUNDO DO CANVAS, e nao um branco e um preto escolhidos
a parte. "No modo escuro deixar com a mesma cor do fundo do canvas,
no tema claro o mesmo fundo do tema claro."
Eram #fff e #000, e nenhum dos dois era o fundo: MEDIDO, o canvas e
#f4f6f9 no claro e #141318 no escuro — que e exatamente o `--fundo`
dos dois temas. Com o token no lugar dos dois valores, o buraco da
roda deixa de ser um disco por cima do mural e passa a ser um
buraco mesmo, da cor do que esta atras.
Declarado no `body`, e nao no `:root`: `--fundo` troca de valor em
`body.noite`, e um `var()` escrito no `:root` seria resolvido ali,
com o valor do tema claro, nos dois temas. */
body { --miolo-roda: var(--fundo); }
/* Os emojis do menu Mais ("volta com os ícones de emojis 3D"): a fonte
de emoji do sistema, em cor, e uma caixa de 1em, a mesma que os
ícones de traço tinham — senão a altura da linha mudaria de um
sistema para outro e a fileira desalinharia. */
#pop-inserir .capa-emoji {
display: block; height: 1em; line-height: 1;
font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}
/* ==========================================================
O MUNDO SEM BORDA (ver o #mundo no index.html)
==========================================================
Uma folga de um milhão de pixels para cada lado, FORA do zoom: na
tela ela tem sempre o mesmo tamanho, em qualquer escala. Um milhão
é centenas de telas em cada direção, e a rolagem inteira fica bem
abaixo do limite de tamanho que os navegadores aceitam. O botão de
casa traz a vista de volta. */
:root { --sobra-do-mundo: 1000000px; }
#mundo {
flex: 0 0 auto; box-sizing: content-box;
width: max-content; height: max-content;
padding: var(--sobra-do-mundo);
}
@media print { #mundo { padding: 0 !important; } }
/* ==========================================================
O BOTÃO DAS LETRAS RECORTADAS
==========================================================
Grande, da largura do bloco, com o rótulo em letras recortadas de
verdade (as classes do efeito, pintadas pelo O.pintarRecortadas). O
fundo é o cinza dos botões do painel; as letras é que são a arte. */
.txt-recorte-caixa { position: relative; margin-top: 1vh; }
.txt-recorte-bt {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 5.4vh; padding: 0 3.6vh; cursor: pointer; overflow: hidden;
border-radius: 1.1vh; border: .12vh solid var(--borda); background: var(--linha);
font: inherit;
}
.txt-recorte-bt:hover { border-color: var(--borda-forte, #c9d3e0); background: #e7ecf4; }
.txt-recorte-bt[aria-pressed="true"] { border-color: var(--primaria-tinta); }
/* As letras grandes, mesmo que passem da largura ("aumenta o preview
das letras, mesmo que corte, deixa maior mantendo o mesmo tamanho do
botão"): o botão tem altura fixa e corta o que sobra, e o centro do
flex faz o corte sair igual dos dois lados. */
.txt-recorte-bt__letras {
font-size: max(2.6vh, 20px); font-weight: 700; line-height: 1;
white-space: nowrap; pointer-events: none; flex: 0 0 auto;
}
/* O × centrado SEM transform: as regras gerais de botão do site usam o
transform para o afundar do clique e o levantar do hover, e trocavam
o translateY daqui — o × saía torto, para baixo. */
.txt-recorte-tirar {
position: absolute; top: 0; bottom: 0; margin: auto 0; right: .8vh;
transform: none !important;
width: 2.6vh; height: 2.6vh; padding: 0; border-radius: 50%;
display: grid; place-items: center; cursor: pointer;
background: #fff; color: var(--suave); border: .12vh solid var(--borda);
}
.txt-recorte-tirar:hover { color: var(--red); border-color: var(--red); }
.txt-recorte-tirar svg { width: 1.4vh; height: 1.4vh; }
body.noite .txt-recorte-bt { background: #212029; }
body.noite .txt-recorte-bt:hover { background: #2b2a33; }
body.noite .txt-recorte-tirar { background: #1d1c22; }
/* A MISTURA DO RECORTE (#378): as pilhas de papel em duas colunas, com
a amostra das cores em cima do nome, e as de letra numa fileira que
quebra. Marcada é o azul de escolha do painel; desmarcada, a borda
de sempre. Cada letra aparece na família dela quando ela já está
carregada, e numa parecida do sistema quando não: abrir o painel não
baixa fonte nenhuma. */
.txt-rec-mistura { margin-top: 1vh; }
.txt-rec-mistura[hidden] { display: none; }
.txt-rec-papeis { display: grid; grid-template-columns: 1fr 1fr; gap: .6vh; margin: .6vh 0 1.2vh; }
.txt-rec-papeis button, .txt-rec-letras button {
font: inherit; font-size: max(1.3vh, 10.4px); font-weight: 600; cursor: pointer;
border: .12vh solid var(--borda); border-radius: .8vh; background: var(--paper); color: var(--ink);
}
.txt-rec-papeis button { display: flex; flex-direction: column; gap: .5vh; padding: .6vh; text-align: left; }
.txt-rec-amostra { display: block; height: 1.4vh; border-radius: .4vh; box-shadow: inset 0 0 0 .1vh rgba(20, 22, 26, .12); }
.txt-rec-letras { display: flex; flex-wrap: wrap; gap: .5vh; margin: .6vh 0 1.2vh; }
.txt-rec-letras button { padding: .5vh 1vh; font-size: max(1.45vh, 11.6px); }
.txt-rec-papeis button:hover, .txt-rec-letras button:hover { background: var(--linha); }
.txt-rec-papeis button[aria-pressed="true"],
.txt-rec-letras button[aria-pressed="true"] {
border-color: var(--primaria-tinta); background: var(--primaria-leve);
box-shadow: 0 0 0 .1vh var(--primaria-tinta);
}
.txt-rec-letras [data-letra="serifada"] { font-family: 'Playfair Display', Georgia, serif; }
.txt-rec-letras [data-letra="grossa"] { font-family: 'Archivo Black', Impact, sans-serif; font-weight: 400; }
.txt-rec-letras [data-letra="maquina"] { font-family: 'Courier Prime', 'Courier New', monospace; }
.txt-rec-letras [data-letra="simples"] { font-family: 'Outfit', sans-serif; }
.txt-rec-letras [data-letra="manuscrita"] { font-family: 'Caveat', cursive; font-size: max(1.8vh, 14.4px); }
.txt-rec-letras [data-letra="cartaz"] { font-family: 'Bebas Neue', 'Arial Narrow', sans-serif; font-weight: 400; letter-spacing: .04em; }
.txt-rec-letras [data-letra="gibi"] { font-family: 'Bangers', 'Comic Sans MS', fantasy; font-weight: 400; letter-spacing: .04em; }
.txt-rec-bagunca__faixa { display: flex; align-items: center; gap: .8vh; margin-top: .4vh; color: var(--suave); font-size: max(1.2vh, 9.6px); }
.txt-rec-bagunca__faixa input { flex: 1; min-width: 0; }
/* O RETRATO NA PRÉVIA DE PÔR FICA NO MEIO DA CAIXA, como o das janelas.
"Ajustar o preview fantasma para o ponto âncora do ponteiro do mouse,
fora do ponteiro, igual no post-it." Na galeria o retrato precisa
de `position: static` (é ele que dá o tamanho do palco); na prévia
isso o tirava do meio da `.previa-encaixe`, e o encaixe o puxava
meio corpo para cima e para a esquerda — para cima do ponteiro. */
.previa-encaixe > .mold-retrato,
.previa-encaixe > .mapa-retrato { position: absolute; }
/* OS PINS DE EMOJI (ver PINS, no objetos.js): no menu, o emoji na caixa
da miniatura dos outros; no mural, do tamanho do pin desenhado. A
fonte é a de emoji do sistema, em cor — a do menu Mais. */
.pin-emoji, .obj--pin .emo--pin {
font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
line-height: 1; display: block;
}
.pin-emoji { font-size: max(3vh, 24px); height: 1em; }
.obj--pin .emo--pin { font-size: 40px; text-align: center; }
/* A AGULHA DO 📌 E DO 📍 MAIS CURTA. "Diminui o comprimento total dessa
ponta de ferro, faça o mesmo com o pin de bolinha para ficar igual!"
O emoji vem pronto do sistema e não se redesenha; o que dá para
fazer é recortar a ponta. O corte é medido em `em` a partir do
centro do emoji — vale no mural, no menu e na prévia de pôr, em
qualquer tamanho. No 📌 a agulha é diagonal, e o corte é
perpendicular a ela; no 📍 ela desce reta, e o corte é horizontal.
"Pode diminuir mais o ferro desses pins, deixa só um pedacinho, e
faça o pin principal com o mesmo tamanho do ferro do bolinha." As
duas ficam com o MESMO comprimento, .1em de agulha à mostra.
MEDIDO no Segoe UI Emoji, a 300px: as duas tinham ~.41em; o 📍 sai
da bola a .131em abaixo do centro, e o 📌 sai da base em
(-.165em, .234em), na direção (-.724, .690). */
.obj--pin-tachinha .emo--pin, [data-pin="tachinha"] .pin-emoji, .previa-emoji--tachinha {
clip-path: polygon(calc(50% - 2em) calc(50% - 2em), calc(50% + 2em) calc(50% - 2em),
calc(50% + 2em) calc(50% + 2em), calc(50% + 1.38em) calc(50% + 2em),
calc(50% - 2em) calc(50% - 1.547em));
}
.obj--pin-alfinete .emo--pin, [data-pin="alfinete"] .pin-emoji, .previa-emoji--alfinete {
clip-path: polygon(calc(50% - 2em) calc(50% - 2em), calc(50% + 2em) calc(50% - 2em),
calc(50% + 2em) calc(50% + .231em), calc(50% - 2em) calc(50% + .231em));
}
/* O CONTORNO DE CADA PEÇA NA SELEÇÃO DE VÁRIAS (ver pintarContornos,
no nucleo.js): o mesmo azul e o mesmo filete branco da seleção de
uma peça só.
E A CAIXA DO CONJUNTO POR CIMA DELES. Ela chegou a sair ("não uma
super seleção gigantesca"), e voltou: "preciso dos ícones para
redimensionar o grupo, igual quando seleciona um único objeto;
mantenha o destaque e volte com a segunda caixa de seleção para pegar
todos". Os contornos dizem QUEM está na mão; a caixa, tracejada no
mesmo azul, é o conjunto — e é dela que saem as oito alças e o
girar, os mesmos de uma peça só. */
.sel-cada {
position: absolute; box-sizing: border-box; pointer-events: none;
/* um pouco mais grosso que a caixa do conjunto: é ele que diz quem
está na mão */
border: .26vh solid var(--primaria-tinta);
box-shadow: 0 0 0 .12vh rgba(255,255,255,.9), inset 0 0 0 .12vh rgba(255,255,255,.9);
}
#selecao.multi .sel-box { border-style: dashed; border-color: var(--primaria-tinta); box-shadow: none; }
/* ==========================================================
A MISSÃO DE 30 SEGUNDOS (ver js/missao.js, #376)
==========================================================
A pergunta no centro, sobre o mural escurecido como o do tour: duas
escolhas em cartões, a missão marcada em vermelho por ser a que a
gente quer que a pessoa faça, e o tour completo num link embaixo.
O cartão da missão fica no canto de baixo à esquerda, acima da
barra, e some fora do mural e enquanto grava ou ensaia: não entra
no filme. Nada aqui anima — a pergunta aparece, e o visto marca. */
.missao-pergunta {
position: fixed; inset: 0; z-index: 10000;
display: grid; place-items: center; background: rgba(15, 20, 30, .62);
}
.missao-pergunta__caixa {
width: min(30rem, 92vw); box-sizing: border-box; padding: 2.4vh 2.4vh 1.8vh; text-align: center;
background: #fff; color: #1f2733; border-radius: 16px; box-shadow: 0 18px 50px rgba(15, 20, 30, .35);
}
.missao-pergunta__t { display: block; margin-bottom: 1.8vh; font-size: max(2.2vh, 17px); font-weight: 800; }
.missao-pergunta__escolhas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2vh; text-align: left; }
@media (max-width: 520px) { .missao-pergunta__escolhas { grid-template-columns: 1fr; } }
.missao-escolha {
display: flex; flex-direction: column; gap: .5vh; padding: 1.6vh;
border: .15vh solid #d5dce6; border-radius: 1.2vh; background: #fff; color: #1f2733;
font: inherit; text-align: left; cursor: pointer;
}
.missao-escolha:hover { background: #f4f6f9; }
.missao-escolha:focus-visible, .missao-pergunta__tour:focus-visible { outline: 3px solid var(--primaria-tinta); outline-offset: 2px; }
.missao-escolha b { font-size: max(1.7vh, 13.6px); }
.missao-escolha span { font-size: max(1.35vh, 10.8px); line-height: 1.4; color: #6a7585; }
.missao-escolha__ic { width: 2.6vh; height: 2.6vh; min-width: 20px; min-height: 20px; }
.missao-escolha--missao { border: .25vh solid var(--primaria-tinta); }
.missao-escolha--missao .missao-escolha__ic { color: var(--primaria-tinta); }
.missao-pergunta__tour {
margin-top: 1.6vh; padding: .6vh 1vh; border: 0; background: none; cursor: pointer;
font: inherit; font-size: max(1.35vh, 10.8px); font-weight: 700; color: var(--primaria-tinta);
text-decoration: underline; text-underline-offset: .2em;
}
.missao {
position: fixed; left: 2vh; bottom: 11vh; z-index: 96;
width: min(19rem, 80vw); box-sizing: border-box; padding: 1.4vh 1.6vh 1.6vh;
background: var(--paper); color: var(--ink);
border: .12vh solid var(--borda); border-radius: 1.4vh; box-shadow: var(--sombra-3);
}
body.na-estante .missao, body.na-vitrine .missao, body.na-conta .missao,
body.gravando .missao, body.ensaiando .missao { display: none; }
.missao__topo { display: flex; align-items: center; gap: 1vh; margin-bottom: 1vh; }
.missao__t { flex: 1; font-size: max(1.6vh, 12.8px); font-weight: 800; }
.missao__conta { font-size: max(1.3vh, 10.4px); font-weight: 700; color: var(--suave); }
.missao__x {
width: 2.8vh; height: 2.8vh; min-width: 22px; min-height: 22px; padding: 0;
display: grid; place-items: center; border: 0; border-radius: 50%;
background: var(--linha); color: var(--ink); cursor: pointer;
}
.missao__x svg { width: 1.4vh; height: 1.4vh; min-width: 11px; min-height: 11px; }
.missao__passos { list-style: none; margin: 0; padding: 0; display: grid; gap: .7vh; }
.missao__passos li { display: flex; align-items: center; gap: .9vh; font-size: max(1.4vh, 11.2px); color: var(--suave); }
.missao__marca {
flex: none; width: 1.8vh; height: 1.8vh; min-width: 14px; min-height: 14px; box-sizing: border-box;
border: .2vh solid var(--borda); border-radius: 50%;
}
.missao__passos li.agora { color: var(--ink); font-weight: 700; }
.missao__passos li.agora .missao__marca { border-color: var(--primaria-tinta); }
.missao__passos li.feito { color: var(--ink); }
.missao__passos li.feito .missao__marca {
border-color: #1fbf6b; background: #1fbf6b;
box-shadow: inset 0 0 0 .3vh var(--paper);
}
.missao__fim { margin-top: 1.4vh; padding-top: 1.2vh; border-top: .12vh solid var(--borda); }
.missao__fim[hidden] { display: none; }
.missao__fim b { display: block; margin-bottom: 1vh; font-size: max(1.45vh, 11.6px); }
.missao__ver {
width: 100%; padding: 1vh; border: 0; border-radius: .9vh; cursor: pointer;
background: var(--red); color: #fff; font: inherit; font-weight: 700;
}
.missao__ver:hover { background: var(--red-deep); }
/* ==========================================================
O TOUR DAS FERRAMENTAS (ver js/tour.js)
==========================================================
A tela escurece por uma sombra enorme em volta do recorte — o
recorte É o buraco, e por isso acompanha a ferramenta sem máscara
nenhuma. O cartão traz a cena, a conta, o título, a frase e os
botões. As cenas são desenhos de 280x120 animados aqui; o quadro
sem animação é o final, e é ele que fica para quem pede menos
movimento. */
.tour { position: fixed; inset: 0; z-index: 10000; }
.tour--centro { background: rgba(15, 20, 30, .62); }
.tour__foco {
position: fixed; border-radius: 14px; pointer-events: none;
box-shadow: 0 0 0 9999px rgba(15, 20, 30, .62), 0 0 0 3px rgba(255, 255, 255, .9);
transition: left .3s var(--mov-padrao), top .3s var(--mov-padrao),
width .3s var(--mov-padrao), height .3s var(--mov-padrao);
}
.tour--centro .tour__foco { display: none; }
.tour__cartao {
position: fixed; box-sizing: border-box; padding: 14px 16px 16px;
background: #fff; color: var(--ink); border-radius: 16px;
box-shadow: 0 18px 50px rgba(15, 20, 30, .35);
transition: left .3s var(--mov-padrao), top .3s var(--mov-padrao);
}
.tour__fechar {
position: absolute; top: 20px; right: 22px; z-index: 1;
width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer;
display: grid; place-items: center;
background: rgba(255, 255, 255, .92); color: #5b6b80; border: 1px solid var(--borda);
}
.tour__fechar svg { width: 15px; height: 15px; }
.tour__fechar:hover { color: var(--ink); background: #fff; }
.tour__demo {
height: 128px; border-radius: 12px; overflow: hidden;
background: #f7f9fc; border: 1px solid var(--borda);
}
.tour__demo svg { display: block; width: 100%; height: 100%; }
.tour__conta {
margin: 12px 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .06em;
color: #8a94a3; text-transform: uppercase;
}
.tour__titulo { margin: 0 0 4px; font-size: 18px; font-weight: 800; line-height: 1.2; }
.tour__texto { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: #4b5563; }
.tour__botoes { display: flex; justify-content: space-between; gap: 8px; }
.tour__botoes button {
font: inherit; font-size: 14px; font-weight: 700; padding: 9px 16px; cursor: pointer;
border-radius: 10px; border: 1px solid var(--borda); background: #f5f7fa; color: #2b3442;
}
.tour__botoes button:disabled { opacity: .4; cursor: default; }
.tour__botoes .tour__proximo { background: #1f2733; color: #fff; border-color: #1f2733; }
body.noite .tour__cartao { background: #1d1c22; }
body.noite .tour__texto { color: #c2c2cc; }
body.noite .tour__botoes .tour__voltar { background: #23232b; color: var(--ink); border-color: var(--borda); }
/* as cenas */
.tour__demo .td-pop, .tour__demo .td-cai, .tour__demo .td-alfinete,
.tour__demo .td-some, .tour__demo .td-tecla, .tour__demo .td-risco,
.tour__demo .td-aperta, .tour__demo .td-casa-ic { transform-box: fill-box; transform-origin: center; }
.td-pop { animation: tdPop 3.2s ease-out infinite both; }
.td-pop--2 { animation-delay: .25s; }
.td-pop--3 { animation-delay: .5s; }
@keyframes tdPop {
0% { transform: scale(0); opacity: 0; }
14% { transform: scale(1.1); opacity: 1; }
22%, 86% { transform: scale(1); opacity: 1; }
100% { transform: scale(1); opacity: 0; }
}
.td-cursor--sel { animation: tdCursorSel 3.4s ease-in-out infinite; }
@keyframes tdCursorSel {
0% { transform: translate(214px, 98px); }
32% { transform: translate(96px, 64px); }
38% { transform: translate(96px, 64px) scale(.82); }
44% { transform: translate(96px, 64px) scale(1); }
80%, 100% { transform: translate(186px, 64px); }
}
.td-peca { animation: tdPecaSel 3.4s ease-in-out infinite; }
@keyframes tdPecaSel { 0%, 44% { transform: translateX(0); } 80%, 100% { transform: translateX(90px); } }
.td-contorno { animation: tdContorno 3.4s linear infinite; }
@keyframes tdContorno { 0%, 37% { opacity: 0; } 41%, 94% { opacity: 1; } 100% { opacity: 0; } }
.td-anda { animation: tdAnda 3.6s ease-in-out infinite alternate; }
@keyframes tdAnda { from { transform: translate(0, 0); } to { transform: translate(-34px, -14px); } }
.td-traco { stroke-dasharray: 420; stroke-dashoffset: 0; animation: tdTraco 3.2s ease-in-out infinite both; }
.td-traco--marca { animation-delay: .4s; }
@keyframes tdTraco {
0% { stroke-dashoffset: 420; opacity: 1; }
55%, 88% { stroke-dashoffset: 0; opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 0; }
}
.td-contorno-desenha { stroke-dasharray: 330; stroke-dashoffset: 0; animation: tdTraco2 3.2s ease-in-out infinite both; }
.td-contorno-desenha--2 { animation-delay: .6s; }
@keyframes tdTraco2 {
0% { stroke-dashoffset: 330; opacity: 1; }
50%, 88% { stroke-dashoffset: 0; opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 0; }
}
/* A BORRACHA APAGA O TRAÇO INTEIRO NO TOQUE, como no mural: ela passa
pelos três, e cada um some de uma vez no instante em que é tocado
(12%, 36% e 62% do laço). No fim ela sai de cena antes de voltar ao
começo, para não atravessar os traços que estão reaparecendo. */
.td-borracha { animation: tdBorracha 3.6s ease-in-out infinite; }
@keyframes tdBorracha {
0% { transform: translate(20px, 100px); opacity: 1; }
12% { transform: translate(64px, 30px); }
36% { transform: translate(112px, 84px); }
62% { transform: translate(208px, 60px); }
82%, 90% { transform: translate(256px, 98px); opacity: 1; }
94%, 99% { transform: translate(20px, 100px); opacity: 0; }
100% { transform: translate(20px, 100px); opacity: 1; }
}
.td-risco--1 { animation: tdRisco1 3.6s linear infinite; }
.td-risco--2 { animation: tdRisco2 3.6s linear infinite; }
.td-risco--3 { animation: tdRisco3 3.6s linear infinite; }
@keyframes tdRisco1 {
0%, 11% { opacity: 1; transform: scale(1); }
15%, 95% { opacity: 0; transform: scale(.85); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes tdRisco2 {
0%, 35% { opacity: 1; transform: scale(1); }
39%, 95% { opacity: 0; transform: scale(.85); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes tdRisco3 {
0%, 61% { opacity: 1; transform: scale(1); }
65%, 95% { opacity: 0; transform: scale(.85); }
100% { opacity: 1; transform: scale(1); }
}
.td-digita { animation: tdDigita 3.4s steps(11) infinite; }
@keyframes tdDigita {
0% { clip-path: inset(0 100% 0 0); }
60%, 100% { clip-path: inset(0 0 0 0); }
}
.td-caret { animation: tdCaret 3.4s steps(11) infinite, tdPisca .8s steps(2) infinite; }
@keyframes tdCaret { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(168px); } }
@keyframes tdPisca { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.td-sobe { animation: tdSobe 3.2s ease-out infinite; }
@keyframes tdSobe {
0% { transform: translateY(70px); opacity: 0; }
35%, 88% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(0); opacity: 0; }
}
.td-seta-sobe { animation: tdPisca 1.6s ease-in-out infinite; }
.td-cai { animation: tdCai 3.2s cubic-bezier(.3, 1.4, .5, 1) infinite; }
@keyframes tdCai {
0% { transform: translateY(-80px) rotate(-12deg); opacity: 0; }
30%, 88% { transform: translateY(0) rotate(0); opacity: 1; }
100% { transform: translateY(0); opacity: 0; }
}
.td-alfinete { animation: tdAlfinete 3.2s ease-out infinite; }
@keyframes tdAlfinete {
0%, 34% { transform: scale(0); opacity: 0; }
44% { transform: scale(1.2); opacity: 1; }
50%, 88% { transform: scale(1); opacity: 1; }
100% { transform: scale(1); opacity: 0; }
}
.td-some { animation: tdSome 3.6s ease-in-out infinite; }
@keyframes tdSome {
0% { transform: scale(0); opacity: 0; }
12%, 34% { transform: scale(1); opacity: 1; }
44%, 62% { transform: scale(.6); opacity: 0; }
74%, 100% { transform: scale(1); opacity: 1; }
}
.td-volta { animation: tdAcende1 3.6s infinite; }
.td-refaz { animation: tdAcende2 3.6s infinite; }
@keyframes tdAcende1 { 0%, 34% { opacity: .3; } 38%, 50% { opacity: 1; } 60%, 100% { opacity: .3; } }
@keyframes tdAcende2 { 0%, 62% { opacity: .3; } 66%, 80% { opacity: 1; } 90%, 100% { opacity: .3; } }
.td-quadro { animation: tdQuadro 3.6s ease-in-out infinite; }
@keyframes tdQuadro {
0%, 22% { transform: translateX(0); }
33%, 55% { transform: translateX(76px); }
66%, 88% { transform: translateX(152px); }
100% { transform: translateX(0); }
}
/* A câmera do Gravar voando de pin em pin: cada parada põe uma peça no
meio da moldura (140, 60) com um zoom diferente — translate(140 − x·z,
60 − y·z) scale(z). Vista geral (z .55) → post-it (1,7) → círculo
(2,3) → estrela (1,3) → vista geral. */
.td-voo { animation: tdVoo 7s ease-in-out infinite; }
@keyframes tdVoo {
0%, 10% { transform: translate(44px, 11px) scale(.55); }
22%, 34% { transform: translate(34.6px, -52.2px) scale(1.7); }
48%, 60% { transform: translate(-379.8px, -32px) scale(2.3); }
74%, 84% { transform: translate(-55px, -120.7px) scale(1.3); }
96%, 100% { transform: translate(44px, 11px) scale(.55); }
}
.td-rec { animation: tdPisca 1.2s ease-in-out infinite; }
.td-tecla--1 { animation: tdTecla 2.4s ease-in-out infinite; }
.td-tecla--2 { animation: tdTecla 2.4s ease-in-out .3s infinite; }
@keyframes tdTecla { 0%, 30%, 100% { transform: translateY(0); } 40%, 60% { transform: translateY(3px); } }
/* ---- as cenas das outras ferramentas ----
Sem animação, cada uma fica no quadro que a explica: por isso as
peças que só aparecem no meio do laço (`td-frente`, os terços e as
metades seguintes) nascem apagadas aqui, e a animação as acende. */
/* cores: o traço troca de cor e o anel azul anda para a cor escolhida */
.td-pinta { animation: tdPinta 4.8s steps(1) infinite; }
@keyframes tdPinta {
0% { stroke: #1f2733; } 25% { stroke: #2fa84f; } 50% { stroke: #e8232a; } 75% { stroke: #8b5cf6; }
}
.td-escolhe { animation: tdEscolhe 4.8s ease-in-out infinite; }
@keyframes tdEscolhe {
0%, 21% { transform: translateY(0); }
25%, 46% { transform: translateY(26px); }
50%, 71% { transform: translateY(52px); }
75%, 96% { transform: translateY(78px); }
100% { transform: translateY(0); }
}
/* ajustes: o traço engrossa conforme o botão corre na régua */
.td-grossura { animation: tdGrossura 3.6s ease-in-out infinite alternate; }
@keyframes tdGrossura { 0%, 10% { stroke-width: 3; } 90%, 100% { stroke-width: 14; } }
.td-botao-regua { animation: tdRegua 3.6s ease-in-out infinite alternate; }
@keyframes tdRegua { 0%, 10% { transform: translateX(0); } 90%, 100% { transform: translateX(160px); } }
/* apagar e apagar página: a lixeira é apertada quando a peça some */
.td-aperta { animation: tdAperta 3.6s ease-in-out infinite; }
@keyframes tdAperta {
0%, 30%, 44%, 100% { transform: scale(1); }
36% { transform: scale(.82); }
}
/* zoom: o mural aproxima e afasta em volta do meio da cena */
.td-zoom { transform-origin: 140px 60px; animation: tdZoom 3.6s ease-in-out infinite alternate; }
@keyframes tdZoom { 0%, 10% { transform: scale(.6); } 90%, 100% { transform: scale(1.5); } }
/* casa: de longe, um clique leva à página; outro clique volta */
.td-casa { transform-origin: 140px 60px; animation: tdCasa 4.4s ease-in-out infinite; }
@keyframes tdCasa {
0%, 22% { transform: scale(.4); }
34%, 66% { transform: scale(1); }
78%, 100% { transform: scale(.4); }
}
.td-casa-ic { animation: tdCasaIc 4.4s ease-in-out infinite; }
@keyframes tdCasaIc {
0%, 20%, 28%, 64%, 72%, 100% { transform: scale(1); }
24%, 68% { transform: scale(.78); }
}
/* formato: três proporções, uma de cada vez */
.td-terco--2, .td-terco--3 { opacity: 0; }
.td-terco { animation: tdTerco 4.5s steps(1) infinite; }
.td-terco--2 { animation-delay: -3s; }
.td-terco--3 { animation-delay: -1.5s; }
@keyframes tdTerco { 0% { opacity: 1; } 33.33% { opacity: 0; } }
/* cadeado e aparência: duas metades, a segunda depois da primeira */
.td-meia--2 { opacity: 0; }
.td-meia--1 { animation: tdMeia1 4s ease-in-out infinite; }
.td-meia--2 { animation: tdMeia2 4s ease-in-out infinite; }
@keyframes tdMeia1 { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tdMeia2 { 0%, 44% { opacity: 0; } 50%, 94% { opacity: 1; } 100% { opacity: 0; } }
/* cadeado: com tudo travado, o traço novo entra por cima */
.td-traco-depois { stroke-dasharray: 420; stroke-dashoffset: 0; animation: tdTracoDepois 4s ease-in-out infinite; }
@keyframes tdTracoDepois {
0%, 50% { stroke-dashoffset: 420; opacity: 1; }
82%, 94% { stroke-dashoffset: 0; opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 0; }
}
/* aparência: o mural escurece e clareia junto do sol e da lua */
.td-tema-fundo { animation: tdTema 4s ease-in-out infinite; }
@keyframes tdTema { 0%, 44% { fill: #f7f9fc; } 50%, 94% { fill: #201f1d; } 100% { fill: #f7f9fc; } }
/* camadas: a de trás sobe na lista e passa para a frente */
.td-frente { opacity: 0; animation: tdFrente 4s ease-in-out infinite; }
@keyframes tdFrente { 0%, 40% { opacity: 0; } 48%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
.td-sobe-linha { animation: tdSobeLinha 4s ease-in-out infinite; }
@keyframes tdSobeLinha {
0%, 20% { transform: translateY(0); }
42%, 86% { transform: translateY(-48px); }
100% { transform: translateY(0); }
}
.td-desce-linha { animation: tdDesceLinha 4s ease-in-out infinite; }
@keyframes tdDesceLinha {
0%, 20% { transform: translateY(0); }
42%, 86% { transform: translateY(24px); }
100% { transform: translateY(0); }
}
/* iluminação: a luz anda de uma peça para a outra */
.td-luz-anda { animation: tdLuzAnda 3.6s ease-in-out infinite alternate; }
@keyframes tdLuzAnda { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(120px); } }
/* menu: o cartão desce do botão */
.td-desce { animation: tdDesce 3.2s ease-out infinite; }
@keyframes tdDesce {
0%, 18% { transform: translateY(-10px); opacity: 0; }
32%, 88% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.tour__demo * { animation: none !important; }
.tour__foco, .tour__cartao { transition: none; }
}
/* O botão do painel de atalhos que abre o tour de novo. */
.help__tour {
display: flex; align-items: center; justify-content: center; gap: .8vh; width: 100%;
margin: 0 0 1.2vh; padding: 1.1vh 1.2vh; cursor: pointer;
font: inherit; font-size: max(1.35vh, 11px); font-weight: 700;
border-radius: 1.2vh; border: .12vh solid var(--borda); background: var(--linha); color: var(--ink);
}
.help__tour:hover { background: #e7ecf4; }
body.noite .help__tour:not(:hover) { background: var(--linha); }
/* ESCREVENDO NUM TEXTO, SÓ O TEXTO E O CURSOR AZUL: "no ato de editar o
texto retire temporariamente a caixa de seleção com os quadrados,
deixando somente o texto com um traço piscante azul". A marca
`escrevendo-texto` vem do `abrirEdicao` (js/objetos.js) e cai ao sair
da escrita, quando a seleção volta como sempre. A caixa, as alças, o
girar e a barrinha de ações somem; o anel azul e o fundo branco que o
texto ganhava ao ser editado também. `visibility`, e não `display`:
a seleção continua medida e posicionada, e volta no lugar. */
body.escrevendo-texto #selecao,
body.escrevendo-texto #selecao * { visibility: hidden !important; }
.obj[data-tipo="texto"] .txt[contenteditable="true"] {
box-shadow: none; background: transparent; caret-color: var(--primaria-tinta);
}
/* A BARRINHA DO TRECHO MARCADO — Selecionar tudo, Copiar, Recortar e
Colar —, acima do texto (ver `barrinhaDoTrecho` no js/objetos.js).
Por cima das peças e da camada da seleção (81), e sem animação:
aparece junto do gesto de escrever. */
.trecho-acoes {
position: fixed; z-index: 90; left: 0; top: 0;
display: flex; align-items: center; gap: 2px; padding: 3px;
border-radius: 1vh; background: #fff; border: .12vh solid var(--borda);
box-shadow: 0 .6vh 1.8vh rgba(15, 20, 30, .16);
}
.trecho-acoes[hidden], .trecho-acoes__bt[hidden] { display: none; }
/* A perninha de balão de fala, apontando para o começo do trecho: um
quadrado girado com a cor e a borda da barrinha. Atrás dos botões
(z-index negativo dentro da barrinha), e por cima do fundo dela, para
apagar a borda onde a perninha sai. `--perna-x` vem do porBarra. */
.trecho-acoes::after {
content: ''; position: absolute; z-index: -1; left: var(--perna-x, 14px); bottom: -6px;
width: 10px; height: 10px; background: inherit;
border-right: .12vh solid var(--borda); border-bottom: .12vh solid var(--borda);
transform: rotate(45deg);
}
.trecho-acoes--abaixo::after { bottom: auto; top: -6px; transform: rotate(225deg); }
.trecho-acoes__bt {
padding: .6vh 1.1vh; border: 0; border-radius: .7vh; cursor: pointer; white-space: nowrap;
font: inherit; font-size: max(1.35vh, 11px); font-weight: 700;
background: transparent; color: var(--ink);
}
.trecho-acoes__bt:hover { background: #f3f6fa; }
.trecho-acoes__bt:focus-visible { outline: 2px solid var(--primaria-tinta); outline-offset: 1px; }
body.noite .trecho-acoes { background: #1d1c22; }
body.noite .trecho-acoes__bt:hover { background: #23232b; }
/* O MENU DO BOTÃO DIREITO NO MURAL (ver `abrirMenuDireito`, no
ferramentas.js): o mesmo cartão da barrinha do texto, em coluna, com
o atalho de cada ação à direita — quem lê aprende a tecla. A linha
não sobe no passar do mouse como os botões soltos do site (daí o
`!important` contra a regra geral dos botões): numa lista, a linha
acesa já diz onde se está, e o menu é gesto frequente, sem animação. */
.menu-direito {
position: fixed; z-index: 120; left: 0; top: 0; min-width: 17vh;
display: flex; flex-direction: column; gap: 1px; padding: 4px;
border-radius: 1vh; background: #fff; border: .12vh solid var(--borda);
box-shadow: 0 .6vh 1.8vh rgba(15, 20, 30, .16);
}
.menu-direito[hidden] { display: none; }
.menu-direito:focus { outline: none; }
.menu-direito__item {
display: flex; align-items: center; justify-content: space-between; gap: 2.4vh;
padding: .75vh 1.1vh; border: 0; border-radius: .7vh; cursor: pointer; white-space: nowrap;
font: inherit; font-size: max(1.4vh, 11.5px); font-weight: 700; text-align: left;
background: transparent; color: var(--ink); transform: none !important;
}
.menu-direito__item kbd { font: inherit; font-size: .92em; font-weight: 500; color: var(--suave); }
.menu-direito__item:hover:not(:disabled),
.menu-direito__item:focus-visible { background: #f3f6fa; }
.menu-direito__item:disabled { cursor: default; opacity: .45; }
body.noite .menu-direito { background: #1d1c22; }
body.noite .menu-direito__item:hover:not(:disabled),
body.noite .menu-direito__item:focus-visible { background: #23232b; }
/* O TRECHO MARCADO NUM TEXTO EM EDIÇÃO: fundo azul claro, e a letra
fica com a cor dela por cima — "o shape azul fica de fundo então a
letra com a cor que for vai ficar bem visível". Sem `color` aqui: o
azul forte do navegador vinha com a letra branca, e a cor sumia. */
.obj .txt[contenteditable="true"]::selection,
.obj .txt[contenteditable="true"] *::selection { background: rgba(59, 130, 246, .28); }
/* A CAIXA TRACEJADA EM VOLTA DO TRECHO (ver `contornoDaSelecao` no
js/objetos.js): "uma caixa tracejada azul animada fazendo o percurso
ao entorno do texto selecionado". Os traços andam em volta — o
desenho de "trecho marcado" que os editores de imagem usam —, e para
quem pede menos movimento ficam parados. Não pega o ponteiro: o
clique passa para a letra embaixo dela. */
.trecho-contorno { position: fixed; z-index: 89; pointer-events: none; overflow: visible; }
.trecho-contorno rect {
fill: none; stroke: var(--primaria-tinta); stroke-width: 1.5; stroke-dasharray: 6 4;
animation: trechoAnda .6s linear infinite;
}
@keyframes trechoAnda { to { stroke-dashoffset: -10; } }
@media (prefers-reduced-motion: reduce) {
.trecho-contorno rect { animation: none; }
}
/* O TIPO DO DEGRADÊ COM NOME — Linear e Radial; no sumir, Linear, Das
bordas e Do centro —, numa linha só dele, como o chapado e o
gradiente logo acima (ver o `index.html`). Cada botão traz uma
amostrinha do próprio desenho, pintada com a cor do texto dele. */
.cor-forma__grads { flex-wrap: wrap; }
.cor-tipo {
flex: 1 0 100%; display: flex; gap: .4vh; padding: .3vh;
border-radius: 1vh; background: var(--fundo);
}
.cor-forma__grads .cor-tipo__bt {
flex: 1; min-width: 0; min-height: 3.2vh; display: flex; align-items: center; justify-content: center;
gap: .6vh; padding: .6vh; border-radius: .8vh; border: .12vh solid transparent;
background: transparent; color: var(--suave); font-size: max(1.25vh, 10px); font-weight: 700; white-space: nowrap;
}
.cor-forma__grads .cor-tipo__bt:hover { background: var(--linha); }
.cor-forma__grads .cor-tipo__bt.on {
background: var(--trilho); border-color: var(--primaria-tinta); color: var(--primaria-tinta); box-shadow: 0 .2vh .6vh rgba(15, 20, 30, .08);
}
.cor-tipo__amostra {
flex: none; width: 1.5vh; height: 1.5vh; min-width: 12px; min-height: 12px;
border-radius: .3vh; border: 1px solid currentColor;
}
.cor-tipo__bt--linear .cor-tipo__amostra { background: linear-gradient(90deg, currentColor, transparent); }
.cor-tipo__bt--radial .cor-tipo__amostra { border-radius: 50%; background: radial-gradient(circle, currentColor 0 20%, transparent 75%); }
.cor-tipo__bt--bordas .cor-tipo__amostra { border-radius: 50%; background: radial-gradient(circle, currentColor 0 25%, transparent 80%); border-style: dashed; }
.cor-tipo__bt--centro .cor-tipo__amostra { border-radius: 50%; background: radial-gradient(circle, transparent 0 25%, currentColor 85%); }
body.noite .cor-forma__grads .cor-tipo__bt:hover { background: #343340; }
/* O MOSTRADOR DO ÂNGULO, dentro da caixa do número: um círculo com a
seta para onde o degradê vai. `--ang` vem do `vestirMostrador`. */
/* 26px no mínimo e borda de 1,5px: com 22px e borda de 0,8px o círculo
sumia no cinza da caixa, e sobrava só a seta. */
.cor-mostrador {
position: relative; flex: none; width: 3.2vh; height: 3.2vh; min-width: 26px; min-height: 26px;
margin-left: -.3vh; border-radius: 50%; cursor: grab; touch-action: none;
background: #fff; border: 1.5px solid #9fb0c6;
}
.cor-mostrador:active { cursor: grabbing; }
.cor-mostrador::after {
content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px;
margin: -2px 0 0 -2px; border-radius: 50%; background: var(--primaria);
}
.cor-mostrador__seta {
position: absolute; left: 50%; top: 12%; width: 2.5px; height: 38%; margin-left: -1.25px;
border-radius: 1px; background: var(--primaria);
transform-origin: 50% 100%; transform: rotate(var(--ang, 180deg));
}
.cor-mostrador__seta::before {
content: ''; position: absolute; left: 50%; top: -4px; margin-left: -4px;
border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid var(--primaria-tinta);
}
body.noite .cor-mostrador { background: #1d1c22; border-color: #4a4640; }
/* A MARCA DE TEXTO NUM DEGRADÊ fica igual à do texto normal: "seleção de
texto com gradiente é diferente do texto normal". Duas coisas:
- a letra do degradê é um fundo recortado, e a marca era pintada por
cima dele — as letras marcadas saíam lavadas. A letra marcada ganha
a primeira cor do degradê (`--tinta-da-marca`, ver
`vestirTintaDoTexto`), e fica por cima da marca, como no normal;
- o "sumir" é uma máscara da peça inteira, e apagava a marca junto.
Enquanto se escreve, a máscara sai — como a curva, que endireita
para editar — e volta ao fechar a escrita. */
.obj .txt[contenteditable="true"].txt--degrade::selection,
.obj .txt[contenteditable="true"] .txt--degrade::selection {
color: var(--tinta-da-marca); -webkit-text-fill-color: var(--tinta-da-marca);
}
/* SÓ A MÁSCARA DO "SUMIR" SAI, que é escrita no estilo da própria peça
(`vestirDegrade` — só forma e texto têm "sumir"). A regra tirava qualquer
máscara, e o post-it coração é DESENHADO por uma: "ao clicar para
editar o texto o coração vira quadrado". A dele vem da classe, e não
do estilo, e a peça sem "sumir" nem entra aqui.
A peça com "sumir" é reconhecida pelo `data-deg-inicio` abaixo de 100,
o mesmo dado de onde `vestirDegrade` tira a máscara — e não pelo
`style`, que muda a todo instante (#206). */
.obj[data-deg-inicio]:not([data-deg-inicio="100"]):has(.txt[contenteditable="true"]) { -webkit-mask-image: none !important; mask-image: none !important; }
/* ==========================================================
CONECTORES (#141, ADR-006)
==========================================================
A caixa do conector é a da reta inteira, e por isso não recebe o
ponteiro: um clique no vazio entre as duas peças tem de cair no que
está embaixo. Quem recebe é uma faixa invisível ao longo da linha,
larga o bastante para o dedo. A tinta, sem escolha, é a do tema; a
cor escolhida vem no estilo da peça e vence. */
.obj--conector { pointer-events: none; --cor-conector: #1f2733; --esp: 2.6px; }
body.noite .obj--conector { --cor-conector: #e8e6e1; }
.conector__svg { display: block; overflow: visible; }
.conector__alvo { fill: none; stroke: transparent; stroke-width: 16; stroke-linecap: round; pointer-events: stroke; cursor: pointer; }
.conector__linha { fill: none; stroke: var(--cor-conector); stroke-width: var(--esp); stroke-linecap: round; stroke-linejoin: round; }
.conector__ponta { fill: var(--cor-conector); stroke: var(--cor-conector); stroke-width: 1.4; stroke-linejoin: round; }
/* selecionado, a própria linha diz que está na mão: uma faixa azul por baixo */
.obj--conector.sel .conector__alvo { stroke: rgba(37, 99, 235, .28); stroke-width: 10; }
.conector--solto { display: none; }
#selecao.so-conector .alca, #selecao.so-conector .girar, #selecao.so-conector .sel-box { display: none !important; }
/* O ANDAIME NA MÃO (#348) — ponto de câmera e lâmpada —: sem os quadrados
de esticar e sem a bolinha de girar ("retirar bolinha de girar do pin
numérico, não precisa"), porque nenhum dos dois tem tamanho nem giro a
mudar. Com vários deles na mão, a caixa do conjunto sai também: cada um
já mostra o seu anel. */
#selecao.so-andaime .alca, #selecao.so-andaime .girar, #selecao.so-andaime .girar__graus,
#selecao.so-andaime.multi .sel-box { display: none !important; }
/* A LÂMPADA NÃO TEM CAIXA: "retirar a caixa de seleção da lâmpada
também". O anel tracejado dela (`.luz-halo`, em estudio.css) já acende
com ela na mão. */
#selecao.so-luz .sel-box, .sel-cada--luz { display: none !important; }
/* E O PONTO GANHA UM ANEL IGUAL AO DELA, NA COR DELE: "redondo e
tracejado da mesma cor que a pessoa escolher o pin", "use a mesma
distância da caixa circular e tracejada da lâmpada". O da lâmpada fica
10 px do palco para fora dela, com 2 px de linha; aqui, fora do palco, a
conta leva o zoom (`--zoom`, escrito pelo núcleo) para dar o mesmo na
tela. O contorno de cada peça já nasce 3 px de tela mais largo (ver
`pintarContornos`), e o anel desconta isso. */
#selecao.so-marco .sel-box, .sel-cada--pin {
border: none; box-shadow: none; border-radius: 50%;
}
#selecao.so-marco .sel-box::before, .sel-cada--pin::before {
content: ''; position: absolute; border-radius: 50%;
inset: calc(-10px * var(--zoom, 1));
border: max(1px, calc(2px * var(--zoom, 1))) dashed var(--cor-do-pin, var(--primaria-tinta));
}
.sel-cada--pin::before { inset: calc(3px - 10px * var(--zoom, 1)); }
/* A SETA QUE SE DESENHA (#208), PELA MÁSCARA (#219).
A tinta da seta (linha, fita da forma e cabeça) mora num grupo com
máscara, e quem se desenha é a máscara: um caminho largo do começo ao
fim da seta, com comprimento 1 (`pathLength`, ver `desenharConector`).
Um traço de 1 com vão de 2, deslocado de 1,02 até 0, o revela de ponta
a ponta — e revela o que estiver por baixo, seja traço sólido,
tracejado, pontilhado, spray ou com forma. A cabeça aparece sozinha
quando a máscara chega nela. O vão de 2 e o 1,02 são pela ponta
redonda: sem eles, as tampas dos traços vizinhos ficavam como
pontinhos nas bordas da seta ainda apagada.
"sempre": desenha, segura, some e recomeça. Todas no mesmo compasso
(#218): o JS prende o começo de cada laço ao relógio da página. */
.conector__revela { fill: none; stroke: #fff; stroke-width: 36; stroke-linecap: round; stroke-linejoin: round; }
#stage .obj--conector[data-anima="sempre"] .conector__revela {
stroke-dasharray: 1 2;
animation: seta-desenha-sempre 2.8s cubic-bezier(.45, 0, .25, 1) infinite;
}
#stage .obj--conector[data-anima="sempre"] .conector__tinta { animation: seta-some-sempre 2.8s linear infinite; }
@keyframes seta-desenha-sempre {
0% { stroke-dashoffset: 1.02; }
45%, 100% { stroke-dashoffset: 0; }
}
@keyframes seta-some-sempre {
0%, 85% { opacity: 1; }
100% { opacity: 0; }
}
/* "fluxo" (#220): o tracejado correndo pela linha, do começo para o fim,
sem parar. Em pixels, e não em comprimento 1, para o passo ser o mesmo
numa seta curta e numa longa. */
#stage .obj--conector[data-anima="fluxo"] .conector__linha {
stroke-dasharray: calc(var(--esp) * 3.4) calc(var(--esp) * 2.6);
animation: seta-fluxo .8s linear infinite;
}
@keyframes seta-fluxo {
from { stroke-dashoffset: calc(var(--esp) * 6); }
to { stroke-dashoffset: 0; }
}
/* "câmera": antes da vez, sem desenho nenhum; na chegada, uma vez só,
começando um pouco depois da câmera partir, para terminar com ela
assentando (ver `aplicarRevelacao`). */
#stage .obj--conector.seta-espera .conector__tinta,
#stage .obj--conector.seta-espera .conector__rotulo { opacity: 0; }
/* O TEMPO VEM DO VOO (#323). A seta se desenha enquanto a câmera
viaja e as duas terminam juntas — "ela tem que acompanhar a camera e
fazer a animação junto até chegar no fim juntos". O `--seta-voo` é
escrito pelo JS com a duração daquela viagem; o valor de reserva
serve para quem chegar aqui sem ela.
E SEM ATRASO: os 0,3s que havia eram o respiro depois de a câmera
pousar, e agora não há pouso a esperar. */
#stage .obj--conector.seta-desenha .conector__revela {
stroke-dasharray: 1 2;
animation: seta-desenha var(--seta-voo, .95s) cubic-bezier(.45, 0, .25, 1) both;
}
@keyframes seta-desenha { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
/* Menos movimento pedido ao sistema: a seta fica pronta, sem desenhar
nem correr — a que espera a câmera só aparece quando ela chega. */
@media (prefers-reduced-motion: reduce) {
#stage .obj--conector .conector__revela, #stage .obj--conector .conector__tinta,
#stage .obj--conector .conector__linha { animation: none !important; }
#stage .obj--conector .conector__revela { stroke-dasharray: none; }
#stage .obj--conector[data-anima="fluxo"] .conector__linha { stroke-dasharray: none; }
}
/* OS ESTILOS DA SETA (#219, #220). Tudo pela marca na peça, e tudo na
mesma espessura (`--esp`), para o tracejado e o pontilhado crescerem
junto com a linha. */
.obj--conector[data-espessura="fina"] { --esp: 1.6px; }
.obj--conector[data-espessura="grossa"] { --esp: 4.5px; }
.obj--conector[data-traco="tracejada"] .conector__linha { stroke-dasharray: calc(var(--esp) * 4) calc(var(--esp) * 2.6); }
/* pontilhada: traço de comprimento zero com ponta redonda vira bolinha */
.obj--conector[data-traco="pontilhada"] .conector__linha { stroke-dasharray: 0 calc(var(--esp) * 2.4); }
/* O BARBANTE DOS ALFINETES (#391): "esse estilo de corda/cordão/barbante
nos conectores apenas dos pins alfinetes". A classe vem de
`desenharConector`, que vê as duas pontas; nada disso é guardado.
Vermelho de quadro de investigação nos dois temas — a cor pintada vem
no estilo da peça e vence esta. Mais grosso que a seta (o 1,7 é o
mesmo `LARGURA_DO_BARBANTE` do JS, que mede os fios) e sem corte:
barbante tracejado não existe. Os fios inclinados, claros e escuros,
fazem o torcido em cima de qualquer cor. */
.obj--conector.conector--barbante, body.noite .obj--conector.conector--barbante { --cor-conector: #d61f2b; }
.conector--barbante .conector__linha {
stroke-width: calc(var(--esp) * 1.7); stroke-dasharray: none !important;
filter: drop-shadow(0 1.5px 1px rgba(20, 22, 26, .35));
}
.conector__fios { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: calc(var(--esp) * .42); stroke-linecap: round; }
.conector__fios--escuros { stroke: rgba(60, 0, 8, .35); stroke-width: calc(var(--esp) * .3); }
/* O spray saiu (#262); o filtro `#seta-spray` do index.html continua
servindo ao PINCEL spray, que e outra coisa. */
/* O TEXTO NO MEIO DA SETA (#220): uma pílula do papel, com a borda na cor
da seta. Recebe o clique, que seleciona a seta como a linha. */
.conector__rotulo {
position: absolute; transform: translate(-50%, -50%); z-index: 1;
padding: 2px 9px; border-radius: 999px; white-space: nowrap;
background: var(--paper); color: var(--ink); border: 1.5px solid var(--cor-conector);
font: 700 15px/1.25 'Outfit', system-ui, sans-serif;
pointer-events: auto; cursor: pointer;
}
.conector__rotulo[hidden] { display: none; }
/* LIGAR ARRASTANDO (#196): os quatro pontinhos fora dos lados da peça,
o rastro tracejado enquanto se arrasta, e a peça de chegada marcada.
Com o id na frente porque a regra geral dos botões levanta no hover e
encolhe no clique — e um ponto de mira não pode sair de baixo do
dedo. */
#selecao .ligar-ponto {
position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; padding: 0;
border-radius: 50%; border: 2px solid var(--primaria-tinta); background: var(--paper);
pointer-events: auto; cursor: crosshair; touch-action: none;
}
#selecao .ligar-ponto:hover { background: var(--primaria); transform: none; box-shadow: none; }
#selecao .ligar-ponto:active { transform: none; }
#selecao.multi .ligar-ponto, #selecao.so-conector .ligar-ponto { display: none; }
.ligar-rastro {
position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 95;
pointer-events: none; display: none; overflow: visible;
}
.ligar-rastro line { stroke: var(--primaria-tinta); stroke-width: 2; stroke-dasharray: 6 5; }
#stage .obj.alvo-de-ligar { outline: 2px solid var(--primaria-tinta); outline-offset: 4px; }
/* o "Virar a curva", embaixo das três linhas */
.conector-virar { margin: .8vh 0 0; }
/* o aviso da seta "câmera" sem ponto que a dispare, e os botões de
copiar o jeito dela (#207, #208) */
.conector-gatilho {
margin: .4vh 0 .8vh; font-size: max(1.15vh, 9.2px); line-height: 1.35; color: var(--suave);
}
.conector-padrao { display: flex; flex-direction: column; gap: .6vh; margin-top: 1vh; }
/* a fileira da animação na altura das de linha e de pontas, logo acima */
.pop-conector .cam-lados button { min-height: 3.4vh; font-size: max(1.25vh, 10px); }
.conector-fabrica {
align-self: flex-start; border: 0; background: none; padding: 0; cursor: pointer;
font: inherit; font-size: max(1.15vh, 9.2px); color: var(--primaria-tinta); text-decoration: underline;
}
.pop-conector .grupo-btn button svg { width: max(2.4vh, 19px); height: max(2.4vh, 19px); display: block; margin: 0 auto; }
/* A LISTA DAS LAMPADAS (#179). Mesmo desenho da lista do roteiro, de
proposito: sao a mesma ideia — poucos itens, numerados, com um botao
de levar a camera ate la. Duas listas parecidas que parecessem
diferentes custariam duas aprendizagens. */
.luz-lista { display: flex; flex-direction: column; gap: .4vh; margin: .8vh 0 0; }
.luz-item {
display: flex; align-items: center; gap: .6vh;
padding: .4vh .5vh; border-radius: .8vh; background: #f5f8fc;
cursor: pointer;
/* o Shift + clique da lista (#344) não pinta de azul o texto entre as linhas */
user-select: none;
}
.luz-item.on { background: var(--primaria-leve); box-shadow: inset 0 0 0 .12vh var(--primaria-tinta); }
.luz-item__cor {
flex: none; width: max(2.2vh, 18px); height: max(2.2vh, 18px); border-radius: 50%;
box-shadow: inset 0 0 0 .1vh rgba(20,22,26,.18);
}
.luz-item__nome {
flex: 1; min-width: 0; font-size: max(1.35vh, 10.8px); font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* `:not(.on)` na rede do escuro, pelo mesmo motivo de sempre:
`body.noite .luz-item` pesa mais que `.luz-item.on` e engoliria o
destaque de quem esta selecionado. */
body.noite .luz-item:not(.on) { background: var(--cartao); }
/* O BOTAO DE IR, NAS CAMADAS (#179). Do lado do lapis, a pedido:
"deixar o botao de voar para o objeto do lado do renomear".
ELE PRECISA SER ABSOLUTO COMO O LAPIS. O lapis esta fora do fluxo
(`position: absolute`), entao a seta, no fluxo, caia numa linha
propria embaixo da camada — foi o que apareceu na tela. Na mesma
regua, ela senta ao lado dele: 26px de botao mais uma folga, medidos
a partir da direita.
E a mesma medida do lapis, pelo mesmo motivo de sempre: dois
vizinhos de tamanhos diferentes fazem a fileira tremer. */
.camada__ir {
position: absolute; right: calc(.6vh + 26px + .5vh); top: 50%; transform: translateY(-50%);
width: 26px; height: 26px; padding: 5px; border: 0; border-radius: .9vh;
background: var(--linha); color: var(--ink); cursor: pointer; display: grid; place-items: center;
transition: background var(--t-hover-sai) var(--mov-padrao),
color var(--t-hover-sai) var(--mov-padrao),
transform var(--t-hover-sai) var(--mov-padrao);
}
.camada__ir svg { width: 100%; height: 100%; }
/* `transform` NAO SOMA, a mesma armadilha do lapis: o hover precisa
trazer o `translateY(-50%)` junto, senao o botao cai meia altura ao
receber o mouse. */
.camada__ir:hover {
background: var(--primaria); color: #fff;
transform: translateY(-50%) translateY(-.1vh) scale(1.03);
}
.camadas__lista--p .camada__ir, .camadas__lista--g .camada__ir {
top: 1vh; right: calc(1vh + 26px + .5vh); transform: none; background: var(--paper); box-shadow: var(--sombra-1);
}
.camadas__lista--p .camada__ir:hover, .camadas__lista--g .camada__ir:hover {
transform: translateY(-.1vh) scale(1.03);
}
/* O LÁPIS E A SETA MEXEM POUCO (#195): "ao clicar está muito grande a
animação, deixa mais curto". Sobem .1vh e crescem 3% com o mouse, e
afundam 3% no clique — eram .25vh, 6% e 6%. A seta não tinha o
afundar; ganha o mesmo do lápis, curto. */
.camada__ir:active { transform: translateY(-50%) scale(.97); transition-duration: var(--t-press); }
.camadas__lista--p .camada__ir:active, .camadas__lista--g .camada__ir:active { transform: translateY(0) scale(.97); }
/* Nas grades o lápis e a seta vestem o fundo branco do cartão, e essa
regra vinha depois do hover: nenhum dos dois acendia azul ali (#201).
Aqui o azul volta, nas duas vistas e também no lápis da pasta. */
.camadas__lista--p .camada__lapis:hover, .camadas__lista--g .camada__lapis:hover,
.camadas__lista--p .camada__ir:hover, .camadas__lista--g .camada__ir:hover {
background: var(--primaria); color: #fff;
}
/* A linha abre espaco para os DOIS botoes, e nao so para um: com 36px
o nome passava por baixo da seta. */
.camadas__lista--l .camada { padding-right: 68px; }
/* OS AJUSTES DA PECA SE SOMAM AOS DA LUZ (#181).
`style.filter` ja tem dono: a luz escreve ali por `--sombra-luz`, e
peca acesa recebe o brilho dela a cada repintura. Dois donos no mesmo
lugar seria um apagando o outro a cada quadro. Por isso os ajustes
moram numa variavel propria e o CSS soma as duas.
O NEUTRO DE UM FILTRO NAO E `none`, E `brightness(1)`, e isto custou
uma medicao para aparecer. Com a luz acesa e uma peca sem brilho
proprio — uma peca fora das paginas presas, por exemplo —, a regra
montava `filter: none brightness(1.3) ...`. `none` nao e uma funcao
de filtro: a lista inteira vira invalida e o navegador descarta tudo.
Os ajustes simplesmente nao apareciam, sem erro nenhum no console.
`brightness(1)` nao muda um pixel e pode estar no meio da fila. Por
isso ele e o padrao dos dois lados.
SAO DUAS REGRAS, e nao uma: com a luz apagada a peca nao tem brilho
para somar, e `filter: var(--ajuste, none)` sozinho ja diz tudo. A
regra da luz pesa mais (1,2,1 contra 1,1,0) e ganha quando ela esta
acesa. */
#stage .obj { filter: var(--ajuste, none); }
body.com-luz #stage .obj {
filter: var(--sombra-luz, brightness(1)) var(--ajuste, brightness(1));
}
/* A BUSCA NA ESTANTE (#182). Mesma altura dos botoes de vista ao lado,
para a fileira do topo nao tremer. */
.inicio__busca {
display: flex; align-items: center; gap: .6vh; min-width: 0;
padding: 0 1vh; height: max(4.2vh, 34px);
border-radius: 1vh; border: .12vh solid var(--borda); background: #fff;
}
.inicio__busca-ic { width: 1.8vh; height: 1.8vh; min-width: 15px; min-height: 15px; flex: none; color: var(--suave); }
/* a argola do diamante (#214) encosta no fim da barra, sem empurrar o campo */
.inicio__busca .selo-aro { flex: none; margin: 0 -.6vh 0 0; }
.inicio__busca input {
flex: 1; min-width: 0; width: max(18vh, 150px);
border: 0; background: none; font: inherit;
font-size: max(1.5vh, 12px); color: var(--ink); outline: none;
}
/* O X nativo do `type="search"` muda de desenho em cada navegador e
nenhum deles combina com o resto. Apagar com o teclado basta. */
.inicio__busca input::-webkit-search-cancel-button { display: none; }
.inicio__busca:focus-within { border-color: var(--primaria); }
body.noite .inicio__busca { background: var(--cartao); }
/* A LISTA DOS RECURSOS PREMIUM EM USO (#183). Cada linha diz o que e e
o que acontece com ele — "Iluminacao / sai sem a luz e sem a sombra"
—, porque "voce esta usando recursos premium" sozinho nao ajuda
ninguem a decidir. */
.premium-usados { list-style: none; margin: 1.6vh 0 0; padding: 0; display: grid; gap: .8vh; }
.premium-usados li {
display: flex; align-items: baseline; gap: .8vh;
padding: 1vh 1.2vh; border-radius: 1vh; background: var(--cartao-fundo, #f5f8fc);
}
.premium-usados b { font-size: max(1.5vh, 12px); }
.premium-usados small { color: var(--suave); font-size: max(1.35vh, 10.8px); }
.premium-saidas { display: flex; flex-wrap: wrap; gap: .8vh; margin-top: 2vh; }
.premium-saidas .btn { flex: 1; min-width: max(14vh, 112px); }
body.noite .premium-usados li { background: var(--cartao); }
/* ==========================================================
A TABELA DOS PLANOS (#186)
==========================================================
Eram duas colunas com sete e nove linhas, cinco delas identicas: para
achar as tres diferencas era preciso ler as duas listas e compara-las
de cabeca. Cada recurso passa a ser uma linha, com o que muda lado a
lado.
GRADE, E NAO . O conteudo e uma comparacao, mas no telefone
ele precisa poder empilhar, e tabela de verdade nao empilha sem
gambiarra. Tres colunas que viram duas linhas quando o espaco acaba.
========================================================== */
.planos-tabela { display: grid; gap: 0; margin: 2vh 0 0; }
.ptab__cabeca, .ptab__linha {
display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1.2vh;
padding: 1.1vh .4vh; align-items: baseline;
}
.ptab__linha { border-top: .1vh solid var(--borda); }
.ptab__cabeca {
font-size: max(1.3vh, 10.4px); letter-spacing: .08em; text-transform: uppercase;
color: var(--suave); font-weight: 700;
}
.ptab__rec { font-size: max(1.45vh, 11.6px); font-weight: 600; }
.ptab__col { font-size: max(1.45vh, 11.6px); color: var(--ink); }
.ptab__col--nao { color: var(--suave); }
/* A coluna do Premium e a que se quer ler: ela ganha o azul e o peso,
e o diamante no alto diz de quem ela e. */
.ptab__col--premium { color: var(--primaria-tinta); font-weight: 600; }
.ptab__cabeca .ptab__col--premium { display: flex; align-items: center; gap: .4em; }
.ptab__cabeca .plano__diamante { width: 1.5em; height: 1.5em; flex: none; }
.ptab__breve {
font-style: normal; font-size: .85em; letter-spacing: .04em;
padding: .15em .5em; border-radius: 99px;
background: var(--primaria-leve); color: var(--primaria-tinta);
}
/* O AVISO DO ARMAZENAMENTO. Nao e letra miuda: e a diferenca entre
"criei uma conta, estou seguro" e saber onde o trabalho esta. */
.planos-aviso {
margin: 1.6vh 0 0; padding: 1.1vh 1.3vh; border-radius: 1vh;
background: var(--aviso-fundo, #fff6e5); color: var(--ink);
font-size: max(1.4vh, 11.2px); line-height: 1.45;
}
body.noite .planos-aviso { background: rgba(255, 196, 92, .14); }
/* AS SAIDAS, EMPILHADAS E CENTRADAS, embaixo dos dois planos. "Agora
nao" ficava isolado num canto, longe da decisao — e nao dizia o que
ia acontecer. */
.planos-acoes { display: grid; justify-items: center; gap: .8vh; margin-top: 2vh; }
.planos-acoes .pedir-conta__criar { width: 100%; margin-top: 0; }
.planos-acoes__nota {
margin: 0; text-align: center; color: var(--suave);
font-size: max(1.3vh, 10.4px); line-height: 1.4;
}
.planos-acoes .modal__cancelar { background: none; border: 0; }
@media (max-width: 560px) {
/* No telefone a comparacao vira uma lista: o nome do recurso em cima,
os dois valores embaixo, lado a lado. Tres colunas de 180px nao
cabem, e encolher a letra ate caber seria resolver o errado. */
.ptab__cabeca { display: none; }
.ptab__linha { grid-template-columns: 1fr 1fr; }
.ptab__rec { grid-column: 1 / -1; color: var(--suave); }
}
/* "SEU PLANO" NA COLUNA DO GRATIS (#214). A pergunta que a pessoa faz
diante de uma tabela comparativa e "em qual coluna eu estou?"; sem
resposta, a tabela le como duas propostas, nenhuma delas dela.
Verde, e nao azul: o azul desta tabela e do Premium, e duas marcas
azuis competiriam pela mesma leitura. Esta diz "voce esta aqui", a
outra diz "isto se paga". */
.ptab__seu {
font-style: normal; font-size: .85em; letter-spacing: .04em;
padding: .15em .5em; border-radius: 99px; white-space: nowrap;
background: color-mix(in srgb, var(--verde, #16a34a) 16%, transparent);
color: var(--verde-tinta, #15803d);
}
body.noite .ptab__seu { color: #6ee7a8; }
/* A VITRINE SOME PARA QUEM JA ASSINOU (#233).
Os diamantes dizem "isto e pago". Para quem paga, nao ha o que
anunciar: sao cinco selos na tela vendendo o que a pessoa ja tem.
O QUE SOME: os tres aros dos titulos (Gravar, Iluminacao, busca) e
os selos dos botoes de qualidade do painel de gravar.
O QUE FICA, E E IMPORTANTE: os diamantes da TABELA DE PLANOS, no
popup e na aba Planos. Ali o diamante nomeia a coluna de uma
comparacao — e informacao, nao oferta, e a tabela perde o sentido
sem ele. Por isso a regra nomeia `.selo-aro` e `.selo-premium`, e
nao `.plano__diamante`, que e o da tabela. */
body.assinou .selo-aro,
body.assinou #gravar-qualidades .selo-premium { display: none; }
/* O BOTAO FORMA NAO VALE PARA O MARCA-TEXTO (#242).
"O marca texto nao deve sofrer modificacoes de forma, deve sempre
ser quadrado." A ponta dele e chanfrada e a junta e em bisel, e uma
tarja de marcador que afina numa ponta nao existe no mundo real.
APAGADO, E NAO ESCONDIDO. Sumir com ele reposicionaria os outros
tres da fileira toda vez que a pessoa trocasse de pincel, e um
painel que muda de forma sozinho parece quebrado. Apagado, o
controle continua onde estava e diz que existe — so nao vale agora.
E `pointer-events: none` e o que impede o clique de passar: sem
ele o botao ficaria palido e ainda assim obedeceria, que e pior
que nao avisar nada. */
body.pincel-marcatexto #ctrl-perfil {
opacity: .35;
pointer-events: none;
}
/* O CABECALHO DE FAMILIA DO PAINEL DOS CONECTORES (#256).
Ele existe para que os rotulos PAREM de ter todos o mesmo peso: sao
nove ajustes, e sem familia a pessoa le os nove para achar um.
E A HIERARQUIA SE FAZ POR CONTRASTE, e nao por tamanho. Os rotulos
(`.cor-forma__t`) ja sao maiusculas pequenas e cinzas; se a familia
tambem fosse maiuscula, as duas competiriam e o ganho seria zero.
Entao a familia vem em caixa normal, na cor do texto, com uma linha
acima separando — ela se le como titulo justamente por NAO parecer
uma etiqueta.
O primeiro nao leva linha nem espaco: nao ha o que separar do topo
do painel. */
.seta-familia {
font-size: max(1.5vh, 12px); font-weight: 700; color: var(--ink);
margin: 1.8vh 0 1.1vh; padding-top: 1.4vh;
border-top: .12vh solid var(--borda);
}
.seta-familia:first-child { margin-top: 0; padding-top: 0; border-top: 0; }