/* ============================================================================= * /white-label — CAMADA PROPRIA DA PAGINA * ============================================================================= * Esta folha NAO faz parte do build do Next e NAO substitui nenhuma das tres * folhas compiladas. Ela existe por um motivo so: o layout de /white-label foi * remontado sobre um esqueleto de grade cujas medidas nao existem no conjunto * FIXO de utilitarias que o build compilou. Classe que nao esta no CSS * compilado nao pinta nada, entao tudo que e novo mora aqui, com prefixo * `.wl-`, e so aqui. * * REGRAS QUE ESTE ARQUIVO SEGUE * * 1. ZERO hex cru. Toda cor sai de um token `--gs-*` do tema, direto ou por * `color-mix()`. Se um dia a paleta mudar, esta pagina muda junto sozinha. * (`color-mix` ja e usado pelo proprio CSS compilado em * `.gs-card-border-hover`, entao nao introduz requisito de navegador novo.) * 2. Tipografia herdada. Nenhuma `font-family` e declarada aqui: os titulos * continuam em Sora pela cascata do tema e os rotulos usam a utilitaria * `font-mono` (IBM Plex Mono) direto no markup. * 3. Nenhuma URL. Sem `url()`, sem `@import`, sem fonte, sem imagem. As placas * que ocupam o lugar das fotos do layout de referencia sao SVG geometrico * escrito no proprio template e pintado por `currentColor`. * 4. Escopo. Tudo desce de `.wl-page` (a classe do
desta pagina), entao * nenhuma regra daqui pode vazar para outra rota, mesmo que a folha seja um * dia enfileirada no site inteiro por engano. * * ENFILEIRAMENTO * `page-white-label.php` chama `wp_enqueue_style()` ANTES de `get_header()`, * portanto antes de `wp_head()`, e a folha sai no logo depois de * `guidse-fixes`. Se preferir, mova a chamada para `guidse_assets()` em * functions.php com `is_page_template( 'page-white-label.php' )` — o efeito e o * mesmo, muda so onde a decisao fica. * * MEDIDAS * As proporcoes de grade (1fr/1.05fr, 1fr/1.07fr, 1fr/2fr, 0.72fr/1fr/1fr), os * gaps (90/142/12/7/16px), as alturas das placas (742/625px) e o raio dos * cartoes (20px) vieram do esqueleto de referencia. So as medidas: cor, * tipografia, sombra e forma sao da GUIDSE. * ========================================================================== */ /* ----------------------------------------------------------------------------- * 0. VARIAVEIS LOCAIS * ----------------------------------------------------------------------------- * Derivadas dos tokens do tema. Existem para que uma placa clara e uma escura * compartilhem a mesma regra e troquem so o valor destas quatro. * -------------------------------------------------------------------------- */ .wl-page { --wl-plate-wash: color-mix(in srgb, var(--gs-primary) 9%, transparent); --wl-plate-glow: color-mix(in srgb, var(--gs-mint) 18%, transparent); --wl-plate-base: var(--gs-surface-2); --wl-plate-edge: var(--gs-border); --wl-plate-ink: var(--gs-primary-deep); --wl-plate-grid: color-mix(in srgb, var(--gs-primary-deep) 9%, transparent); /* A cor que ACENDE. Uma so variavel para todo filete de luz e todo realce de * foco desta pagina, para que claro e escuro nunca acendam em verdes * diferentes. Do lado claro o verde da marca; do escuro, o mint. */ --wl-lit: var(--gs-primary); /* A SOMBRA DE CONTATO DOS CARTOES. * * Duas camadas e nao uma: a de 1px encosta o cartao na pagina e desenha o * limite; a de 24px da o ar por baixo. Uma sombra unica de 10px nao faz nem * uma coisa nem outra — em secao branca, cartao branco com borda de 1,26:1 de * contraste contra o proprio fundo simplesmente desaparecia. * * Fica em variavel porque repouso e hover usam as MESMAS duas camadas: o * hover so acrescenta um fio de luz por fora. Se as duas listas fossem * escritas a mao, uma delas ficaria para tras no primeiro ajuste, e o cartao * pareceria afundar quando o cursor chegasse. Resolver a fronteira aqui e o * que permite nao mexer em `--gs-border`, que e token das 14 rotas. */ --wl-contato: 0 1px 2px color-mix(in srgb, var(--gs-text) 7%, transparent), 0 8px 24px color-mix(in srgb, var(--gs-text) 6%, transparent); } /* Variante escura: mesma estrutura, tokens do lado escuro da paleta. */ .wl-page .wl-on-dark { --wl-plate-wash: color-mix(in srgb, var(--gs-mint) 7%, transparent); --wl-plate-glow: color-mix(in srgb, var(--gs-mint) 16%, transparent); --wl-plate-base: var(--gs-surface-dark-2); --wl-plate-edge: var(--gs-border-dark); --wl-plate-ink: var(--gs-mint); --wl-plate-grid: color-mix(in srgb, var(--gs-mint) 10%, transparent); --wl-lit: var(--gs-mint); } /* ----------------------------------------------------------------------------- * 1. GRADES * ----------------------------------------------------------------------------- * O CSS compilado traz `grid-cols-*` apenas nos valores que o build encontrou * no codigo Next. Nenhuma destas proporcoes esta la, por isso viram regras. * Todas empilham em coluna unica no telefone e so abrem a partir do ponto em * que o texto ainda cabe em linha legivel. * -------------------------------------------------------------------------- */ /* Divisao 1fr / 1.05fr — placa alta a esquerda, texto a direita. */ .wl-split { display: grid; gap: 40px; } @media (min-width: 992px) { .wl-split { grid-template-columns: 1fr 1.05fr; gap: 50px; } } @media (min-width: 1400px) { .wl-split { gap: 90px; } } /* Divisao 1fr / 1.07fr — texto a esquerda, painel largo a direita. */ .wl-wide { display: grid; gap: 40px; } @media (min-width: 992px) { .wl-wide { grid-template-columns: 1fr 1.07fr; gap: 52px; align-items: center; } } @media (min-width: 1400px) { .wl-wide { gap: 96px; } } /* Trilho 1fr / 2fr — lista vertical a esquerda, cartao grande a direita. * * ORDEM: no HTML o CARTAO vem primeiro e a lista depois, porque e essa a ordem * em que o conteudo se le — rotulo, titulo, paragrafo e so entao a enumeracao. * Empilhado (telefone e tablet) e exatamente isso que aparece. A partir de * 1200px a colocacao explicita devolve o arranjo do esqueleto, lista a * esquerda e cartao a direita, sem mexer no HTML. Nao ha nada focavel dentro * dos dois, entao a ordem visual nao pode divergir da ordem do teclado. */ .wl-rail { display: grid; gap: 12px; } @media (min-width: 1200px) { .wl-rail { grid-template-columns: 1fr 2fr; gap: 16px; align-items: start; } .wl-rail > :first-child { grid-area: 1 / 2; } .wl-rail > :last-child { grid-area: 1 / 1; } } /* Trio 0.72fr / 1fr / 1fr — cartao de destaque + dois cartoes iguais. */ .wl-tri { display: grid; gap: 12px; } @media (min-width: 768px) { .wl-tri { grid-template-columns: 1fr 1fr; } } @media (min-width: 992px) { .wl-tri { grid-template-columns: 0.72fr 1fr 1fr; } } /* Grade de quatro colunas, itens alinhados pelo topo. Herdada do bloco de * retratos do layout de referencia; aqui carrega cartoes de responsabilidade. */ .wl-quad { display: grid; gap: 12px; align-items: stretch; } @media (min-width: 576px) { .wl-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px) { .wl-quad { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Baralho de cartoes de processo. Quatro colunas no desktop, tres quando o * conteudo e sequencial (`--wl-deck-cols`). */ .wl-deck { display: grid; gap: 12px; } @media (min-width: 576px) { .wl-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px) { .wl-deck { grid-template-columns: repeat(var(--wl-deck-cols, 4), minmax(0, 1fr)); } } /* UMA ESCADA DE VAOS SO PARA TODA GRADE DE CARTAO. * * As quatro grades de cartao da pagina nasceram com quatro vaos diferentes — * 4, 7, 12 e 16px — para o MESMO idioma visual. O pior era o de 7px do trilho: * duas bordas de 1px separadas por sete pixels nao lem como espaco, lem como * erro de renderizacao. * * Agora sao dois numeros e so dois: 12px enquanto os cartoes empilham, 16px a * partir de 768px, quando a grade abre de verdade. O ganho maior nao e a * uniformidade em si: com 16px nas duas, a grade de quatro de s03 passa a ter * exatamente as mesmas bordas verticais da grade de quatro de s04, e as duas * secoes — que sao vizinhas — param de se desalinhar por tres pixels. * * A lista do trilho fica com metade do vao (8px) de proposito: ali os itens * sao um bloco continuo de opcoes, nao cartoes independentes. */ @media (min-width: 768px) { .wl-deck, .wl-tri, .wl-quad { gap: 16px; } } /* Cabecalho de secao com texto a esquerda e acao a direita. */ .wl-head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } @media (min-width: 992px) { .wl-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; } } /* ----------------------------------------------------------------------------- * 2. PLACAS — o que ocupa o lugar das fotos * ----------------------------------------------------------------------------- * O layout de referencia tem 66 : retratos, logos de cliente e mockups. * Nenhum entra aqui. Cada um virou uma PLACA: caixa com a mesma proporcao, * fundo em gradiente da paleta, malha de pontos e um desenho geometrico em SVG * por dentro. A proporcao e a que importa — e ela que segura o ritmo vertical * do esqueleto sem que nenhum pixel de terceiro seja servido. * -------------------------------------------------------------------------- */ .wl-plate { position: relative; isolation: isolate; overflow: hidden; border-radius: 16px; border: 1px solid var(--wl-plate-edge); color: var(--wl-plate-ink); background: radial-gradient(120% 92% at 14% 0%, var(--wl-plate-glow) 0%, transparent 62%), linear-gradient(158deg, var(--wl-plate-wash) 0%, var(--wl-plate-base) 100%); } /* Malha de pontos, no mesmo passo de 24px do `.gs-dot-grid` do tema. */ .wl-plate::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, var(--wl-plate-grid) 1px, transparent 1px); background-size: 24px 24px; } /* Tudo que a placa contem fica ACIMA da malha de pontos. Sem isto o ordinal * dos cartoes de jornada seria lido por cima de uma trama de 24px. */ .wl-plate > * { position: relative; z-index: 1; } .wl-plate > svg { display: block; width: 100%; height: 100%; } /* O desenho da placa aproxima quando o cartao esta sob o cursor. So `transform` * — a placa ja e `overflow:hidden`, entao o recorte faz o trabalho e nenhum * layout e recalculado. Fica nas placas GRANDES: nas chapas de 26 e 72px o * mesmo gesto so borraria o glifo. */ .wl-plate--cap > svg, .wl-plate--tall > svg, .wl-plate--panel > svg, .wl-plate--console > svg { transition: transform var(--motion-entrance) var(--motion-ease); } /* A chapa de icone sobe um fio e a borda acende. Ela e o unico elemento comum * aos cartoes de s03, s09 e s10, o que da a pagina um gesto de hover so. */ .wl-plate--icon { transition: transform var(--motion-base) var(--motion-ease), border-color var(--motion-base) var(--motion-ease); } /* Placa alta da secao "what it is" — 742px no layout de referencia. * * BAIXADA PARA 680px, e o numero nao e arbitrario. A coluna de texto ao lado * mede pouco mais de 360px de conteudo: os 742px vinham de uma FOTO do * esqueleto de origem, e aqui quem dita a altura da secao inteira e um desenho * decorativo, nao o que se le. 680 tira 62px de vazio sem que o desenho perca * nada. * * O PISO E 680 e nao menos. A placa e `preserveAspectRatio slice`: ela cobre a * caixa e joga fora o excedente, e o excedente cresce depressa quando a altura * cai. A 742 o corte era de 20px por lado; a 680 vai a ~51px, que ainda cabe na * margem vazia do desenho (a primeira caixa da pilha comeca em 52 unidades do * topo). A 620 o corte passa de 80px por lado e decepa a primeira caixa. Nao * baixe daqui sem abrir a captura. */ .wl-plate--tall { aspect-ratio: 1 / 1.15; } @media (min-width: 992px) { .wl-plate--tall { aspect-ratio: auto; height: 680px; } } /* Painel da secao "client environments" — 625px no layout de referencia. */ .wl-plate--panel { height: 340px; } @media (min-width: 576px) { .wl-plate--panel { height: 460px; } } /* Mesma historia da placa alta: a coluna de texto de s05 tem 331px e o painel * segurava a secao em 625, quase o dobro. 560 encurta o vazio de 294 para 229px * — e 560 e o piso, pelo mesmo motivo de `slice`: o painel tem 70 unidades de * margem no topo e a 560 o corte chega perto disso. Abaixo daqui as tres * colunas do desenho comecam a perder a tampa. */ @media (min-width: 992px) { .wl-plate--panel { height: 560px; } } /* Placa larga dentro do cartao do trilho. */ .wl-plate--console { height: 240px; } @media (min-width: 992px) { .wl-plate--console { height: 320px; } } /* Topo do cartao de responsabilidade: recorta so a metade de cima do cartao. */ .wl-plate--cap { height: 150px; border: 0; border-radius: 0; border-bottom: 1px solid var(--wl-plate-edge); } /* Ladrilho de 68px da faixa rolante. */ .wl-plate--tile { flex: 0 0 auto; width: 68px; height: 68px; border-radius: 10px; padding: 17px; } /* Chapa de 72px dos cartoes de processo. */ .wl-plate--icon { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 10px; padding: 18px; display: flex; align-items: center; justify-content: center; } /* Chapa pequena, usada nas pilulas do catalogo. */ .wl-plate--chip { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; padding: 5px; } .wl-plate--chip::before { content: none; } /* ----------------------------------------------------------------------------- * 3. FILETES * ----------------------------------------------------------------------------- * Dois separadores do esqueleto. O primeiro tem um no de 9px na ponta * esquerda; o segundo e uma barra que acende no meio. Ambos sao decoracao e * saem do fluxo de leitura por `aria-hidden` no markup. * -------------------------------------------------------------------------- */ .wl-rule { position: relative; width: 100%; height: 1px; background: var(--gs-border); } /* O no do filete e a MESMA coisa que os aneis do conector: um ponto de conexao * aceso. Recebe o halo duplo da camada de efeitos (perto + longe, como o * `.fx-bead`) para que os tres filetes da pagina e os seis aneis dos dois * conectores leiam como um vocabulario so. * * ESTATICO de proposito. Sao tres pontos espalhados pela pagina; pulsar os tres * daria pisca-pisca, e nao ha nada acontecendo neles que justifique movimento. */ .wl-rule::after { content: ""; position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--gs-primary); outline: 4px solid var(--gs-surface); box-shadow: 0 0 6px color-mix(in srgb, var(--gs-primary) 60%, transparent), 0 0 16px color-mix(in srgb, var(--gs-primary) 32%, transparent); } .wl-on-dark .wl-rule { background: var(--gs-border-dark); } .wl-on-dark .wl-rule::after { background: var(--gs-mint); outline-color: var(--gs-surface-dark-1); box-shadow: 0 0 6px color-mix(in srgb, var(--gs-mint) 70%, transparent), 0 0 18px color-mix(in srgb, var(--gs-mint) 38%, transparent); } .wl-glow { display: block; width: 100%; height: 2px; background: radial-gradient(50% 50% at 50% 50%, var(--gs-mint) 0%, transparent 100%); } /* Versao curta, para o bloco de conversao centrado. `max-w-[280px]` nao existe * no CSS compilado — o build so emitiu os valores que o codigo Next usava. */ .wl-glow--short { max-width: 280px; } /* ----------------------------------------------------------------------------- * 4. CARTOES * ----------------------------------------------------------------------------- * Raio 20px e altura minima 260px vem do esqueleto. A borda, a sombra e o * hover sao os mesmos que o resto do site ja usa nos cartoes. * -------------------------------------------------------------------------- */ .wl-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 26px; border-radius: 20px; border: 1px solid var(--gs-border); background: var(--gs-surface); box-shadow: var(--wl-contato); transition: border-color var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease); } @media (min-width: 992px) { .wl-card { padding: 32px; min-height: 260px; } /* O BARALHO NUMERADO DA JORNADA — o cartao vale pelo passo, nao pelo vazio. * * Os 260px vieram do esqueleto e nenhum dos seis passos chega perto: o mais * alto ocupa 157px de conteudo, entao sobravam de 70 a 92px de fundo caido em * cada cartao. Um piso que o conteudo nunca encosta nao e ritmo, e um buraco * repetido seis vezes. Com 220px o piso passa a ser so uma garantia de que os * seis cartoes tem a mesma cara mesmo quando o texto e curto; quem manda na * altura volta a ser o passo mais longo da fileira. * * E o ORDINAL. Ele e a razao de ser de um baralho numerado — e o que diz que * "04" vem depois de "03" — e estava em 17px, o mesmo corpo do texto do passo * logo abaixo, ocupando um oitavo de uma chapa de 72x72. Em 26px a chapa * passa a ser lida como numero e nao como icone generico, e o `tracking` some * porque dois digitos espacados a 0.02em ficam desalinhados do centro otico. * * Preso em `ol.wl-deck` de proposito: `.wl-plate--icon` tambem serve s03, s08 * e s09, onde o conteudo da chapa e um SVG e um `font-size` nao faria nada * alem de esperar para dar errado no dia em que alguem puser texto la. */ .wl-page ol.wl-deck .wl-card { min-height: 220px; } } /* O corpo do ordinal vale em TODA largura, e nao so no desktop: a chapa mede * 72px em qualquer tela, entao no telefone um numero de 17px flutua no mesmo * vazio. Por isso esta regra fica fora do bloco de 992px acima. */ .wl-page ol.wl-deck .wl-plate--icon { font-size: 26px; letter-spacing: 0; } /* O FILETE DE LUZ DO TOPO. * * O mesmo gesto do conector, reduzido a uma linha: acende do centro para as * pontas quando o cartao esta sob o cursor. Anima so `opacity` e `transform`, * e o `overflow:hidden` do cartao ja recorta as duas pontas no raio de 20px, * entao a linha nasce e morre dentro da forma. */ .wl-card::after { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 2; height: 1px; pointer-events: none; opacity: 0; transform: scaleX(0.35); background: linear-gradient(90deg, transparent 0%, var(--wl-lit) 50%, transparent 100%); transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease); } /* O HOVER NAO LEVANTA MAIS. * * Levantar e ganhar elevacao e a promessa universal de "isto e clicavel". Esta * pagina tem 10 elementos focaveis e 33 cartoes que faziam esse gesto sem levar * a lugar nenhum: o visitante mira, o cartao responde, e nada acontece. Sobrou * o que informa sem prometer — a borda escurece e o filete de luz do topo * acende. Os `` da pagina continuam com os gestos deles. * * A sombra de repouso continua inteira sob o cursor; so entra por fora um fio * de luz de 1px. Trocar a lista de sombras aqui faria o cartao AFUNDAR no * hover, que e o defeito oposto e igualmente errado. */ .wl-card:hover { border-color: color-mix(in srgb, var(--gs-text) 35%, transparent); box-shadow: var(--wl-contato), 0 0 0 1px color-mix(in srgb, var(--wl-lit) 14%, transparent); } .wl-card:hover::after { opacity: 1; transform: scaleX(1); } /* Sem `translateY`: a chapa nao e clicavel, e deslocar promete clique. * A doutrina de hover da rota diz que elemento decorativo reage em cor, borda * e opacidade — nunca em posicao nem em elevacao. O cartao claro ja tinha sido * corrigido; a chapa dentro dele tinha ficado para tras, e o resultado era uma * pagina com duas regras de hover para o mesmo componente. */ .wl-card:hover > .wl-plate--icon { border-color: color-mix(in srgb, var(--wl-lit) 42%, transparent); } /* Cartao no lado escuro. */ .wl-card--dark { border-color: var(--gs-border-dark); background: var(--gs-surface-dark-2); box-shadow: none; } /* Mesma razao do bloco acima: o cartao escuro tambem nao e link, entao nao * levanta. Sobrou a borda, que e sinal de superficie viva sem prometer acao. * Antes, o lado claro so mudava de borda e o lado escuro florescia — dois * comportamentos para o mesmo tipo de cartao na mesma pagina. */ .wl-card--dark:hover { border-color: var(--gs-border-strong-dark); } .wl-card--dark:hover > .wl-plate--console > svg { transform: scale(1.03); } /* Cartao de destaque do trio: fundo preto e moldura larga, como no esqueleto. */ .wl-card--accent { border: 8px solid color-mix(in srgb, var(--gs-mint) 12%, transparent); border-radius: 20px; background: var(--gs-core-black); box-shadow: none; padding: 28px 24px; } @media (min-width: 992px) { .wl-card--accent { padding: 34px 30px; } } /* A moldura larga de 8px JA e o filete de luz deste cartao — desenhar outro por * dentro dela daria duas linhas concentricas e nenhuma leitura. */ .wl-card--accent::after { content: none; } .wl-card--accent:hover { border-color: color-mix(in srgb, var(--gs-mint) 22%, transparent); } /* Cartao da grade de quatro: placa em cima, texto embaixo, altura igual. */ .wl-quad-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 14px; border: 1px solid var(--gs-border); background: var(--gs-surface); box-shadow: var(--wl-contato); transition: border-color var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease); } /* Mesma decisao do `.wl-card` — ver o comentario la em cima. */ .wl-quad-card:hover { border-color: color-mix(in srgb, var(--gs-text) 35%, transparent); box-shadow: var(--wl-contato), 0 0 0 1px color-mix(in srgb, var(--wl-lit) 14%, transparent); } .wl-quad-card > .wl-plate { border-radius: 0; } /* Aqui o filete de luz vai na COSTURA, nao no topo: a placa ocupa a metade de * cima do cartao e a divisa entre ela e o texto e a linha que o olho ja segue. * Acender essa e reforcar a leitura; acender o topo seria uma linha a mais. */ .wl-quad-card > .wl-plate--cap::after { content: ""; position: absolute; inset: auto 0 0 0; z-index: 2; height: 1px; pointer-events: none; opacity: 0; transform: scaleX(0.35); background: linear-gradient(90deg, transparent 0%, var(--wl-lit) 50%, transparent 100%); transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease); } .wl-quad-card:hover > .wl-plate--cap::after { opacity: 1; transform: scaleX(1); } .wl-quad-card:hover > .wl-plate--cap > svg { transform: scale(1.045); } .wl-quad-card .wl-body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; padding: 20px; } @media (min-width: 992px) { .wl-quad-card .wl-body { padding: 24px; } } /* ----------------------------------------------------------------------------- * 4b. O DEGRAU QUE FALTAVA NA ESCADA DE CORPOS * ----------------------------------------------------------------------------- * A pagina saltava de 40px (H2) direto para 17px, e o MESMO 17px carregava * titulo de cartao e texto corrido. Dois corpos para tres papeis: nao havia * como o olho separar "este e o nome da coisa" de "esta e a explicacao". * * O tema define `--gs-fs-h3` e `--gs-fs-h4` justamente para isso e nenhum dos * dois aparecia uma unica vez nesta rota. O titulo de cartao passa a usar o * h4 (22px em tela larga, 19px no telefone), que e o degrau que as outras * rotas do pacote ja usam — aplicar aqui APROXIMA as quatro paginas em vez de * afastar. Vai em CSS a mao porque nao existe utilitaria compilada que aponte * para uma variavel do tema. * * O `line-height` cai para 1.28: titulo de duas ou tres linhas com entrelinha * de texto corrido nao se le como bloco unico. * * E o corpo dos cartoes de s03, que era o unico 14px da pagina inteira, sobe * para 15px — o mesmo corpo da linha de qualificacao logo abaixo, do cartao de * destaque de s09 e das respostas da FAQ. Um tamanho a menos para justificar. */ .wl-page .wl-card > p.font-heading, .wl-page .wl-quad-card .wl-body > p { font-size: var(--gs-fs-h4); line-height: 1.28; } .wl-page #for-partners .wl-card > p + p { font-size: 15px; line-height: 1.6; } /* ----------------------------------------------------------------------------- * 5. TRILHO * ----------------------------------------------------------------------------- * A coluna estreita de blocos empilhados do esqueleto (padding 33/34, raio 12, * fundo translucido, desfoque atras). Aqui e uma LISTA, nao um seletor de abas: * a pagina nao tem paineis para trocar e um controle que nao controla nada e * pior que nenhum controle. * -------------------------------------------------------------------------- */ .wl-rail-list { display: flex; flex-direction: column; gap: 8px; } .wl-rail-item { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-radius: 12px; border: 1px solid var(--gs-border-dark); background: color-mix(in srgb, var(--gs-text-on-dark) 5%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color var(--motion-base) var(--motion-ease), background-color var(--motion-base) var(--motion-ease); } @media (min-width: 992px) { .wl-rail-item { padding: 26px 30px; } } .wl-rail-item:hover { border-color: color-mix(in srgb, var(--gs-mint) 45%, transparent); background: color-mix(in srgb, var(--gs-mint) 8%, transparent); } /* O ponto do trilho e a mesma coisa que um anel do conector, so que solido: * sob o cursor ele acende e cresce, e o rotulo anda um fio na direcao da * leitura. Dois `transform` e uma sombra — nada de largura ou margem. */ .wl-rail-item:hover .wl-rail-dot { background: var(--gs-mint); transform: scale(1.45); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gs-mint) 12%, transparent), 0 0 12px color-mix(in srgb, var(--gs-mint) 55%, transparent); } .wl-rail-item:hover .wl-rail-label { transform: translateX(3px); } /* O tamanho do rotulo vive aqui e nao no markup: `min-[992px]:text-[20px]` nao * esta no CSS compilado. Peso e familia continuam vindo das utilitarias. */ .wl-rail-item .wl-rail-label { font-size: 17px; line-height: 1.3; transition: transform var(--motion-base) var(--motion-ease); } @media (min-width: 992px) { .wl-rail-item .wl-rail-label { font-size: 20px; } } .wl-rail-item .wl-rail-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--gs-mint) 55%, transparent); transition: transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease), background-color var(--motion-base) var(--motion-ease); } /* ----------------------------------------------------------------------------- * 6. FAIXA ROLANTE * ----------------------------------------------------------------------------- * A animacao e o `.tj-marquee-track` que o CSS compilado ja traz (usado na * home). Aqui so entram o espacamento entre os itens e a mascara que apaga as * duas pontas para o loop nao "cortar" no meio de um item. * -------------------------------------------------------------------------- */ .wl-strip { display: flex; align-items: center; flex: 0 0 auto; gap: 56px; padding-right: 56px; } @media (min-width: 992px) { .wl-strip { gap: 110px; padding-right: 110px; } } .wl-strip > li { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; white-space: nowrap; } /* A cor da mascara e so o canal alfa — qualquer cor OPACA serve. Usa o token * mesmo assim, para a folha inteira continuar sem um unico hex cru. */ .wl-fade-edges { -webkit-mask-image: linear-gradient( 90deg, transparent 0, var(--gs-core-black) 96px, var(--gs-core-black) calc(100% - 96px), transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0, var(--gs-core-black) 96px, var(--gs-core-black) calc(100% - 96px), transparent 100% ); } /* NO TELEFONE A MASCARA COME A FAIXA INTEIRA. * * 96px de cada lado sao 192px de um viewport de 390: 49% da esteira sai * apagada, e a pilula mais estreita do catalogo tem 266px — mais larga que a * janela limpa que sobrava. Nao havia um so item legivel por inteiro. Com 32px * sobram 326px de faixa nitida e a pilula cabe. * * As duas propriedades TEM de ser reescritas juntas: `mask-image` nao herda de * `-webkit-mask-image` nem vice-versa, e deixar uma das duas com o valor antigo * daria 96px em um motor e 32px no outro. */ @media (max-width: 767px) { .wl-page .wl-fade-edges { -webkit-mask-image: linear-gradient( 90deg, transparent 0, var(--gs-core-black) 32px, var(--gs-core-black) calc(100% - 32px), transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0, var(--gs-core-black) 32px, var(--gs-core-black) calc(100% - 32px), transparent 100% ); } } /* Pilula da faixa do catalogo. O `.tj-marquee-track` do CSS compilado ja para * a esteira sob o cursor — entao o hover da pilula tem tempo de ser lido, e * vale marcar qual delas o visitante parou para ver. */ .wl-pill { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 999px; border: 1px solid var(--gs-border); background: var(--gs-surface); transition: border-color var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease); } .wl-pill:hover { border-color: color-mix(in srgb, var(--gs-primary) 45%, transparent); transform: translateY(-2px); } /* ----------------------------------------------------------------------------- * 7. LISTAS * -------------------------------------------------------------------------- */ .wl-marks { display: flex; flex-direction: column; } .wl-marks > li { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; border-top: 1px solid var(--gs-border); } /* O PE VAZIO DOS DOIS CARTOES DE LISTA DE s09. * * A altura da fileira e ditada pelo cartao de destaque, que carrega um * paragrafo inteiro numa coluna estreita. Os dois cartoes de lista tem tres * linhas cada e ficavam com mais de 200px de nada no pe — mais da metade do * cartao. Nao e sobra de sorte: e um cartao dimensionado por um irmao. * * A saida nao e encolher o cartao (a fileira precisa da mesma altura) nem * empurrar conteudo para dentro: e a lista DISTRIBUIR o que recebeu. Ela cresce * para ocupar o cartao e afasta as tres linhas por igual, e os filetes de cada * item passam a marcar a altura em vez de se amontoarem no topo. */ .wl-tri .wl-card > .wl-marks { flex: 1 1 auto; justify-content: space-between; } /* O ORFAO DE 768px. * * Entre 768 e 991 o trio abre em DUAS colunas e sobra um cartao sozinho na * terceira posicao, ao lado de um buraco retangular do tamanho de um cartao. * Fazer o cartao de destaque atravessar a largura inteira nessa faixa * transforma 2+1 em 1+2: nenhuma sobra, e o destaque ganha o lugar que ele ja * quer ter. Acima de 992 mandam as tres colunas; abaixo de 768 a grade ja e de * coluna unica e nao ha orfao possivel. */ @media (min-width: 768px) and (max-width: 991px) { .wl-tri > div:first-child { grid-column: 1 / -1; } } .wl-on-dark .wl-marks > li { border-top-color: var(--gs-border-dark); } .wl-marks > li > .wl-dash { flex: 0 0 auto; width: 12px; height: 1px; margin-top: 10px; background: color-mix(in srgb, var(--gs-primary-deep) 60%, transparent); } .wl-on-dark .wl-marks > li > .wl-dash { background: color-mix(in srgb, var(--gs-mint) 60%, transparent); } /* Linha de item com chapa de icone (o "feature single" do esqueleto). */ .wl-feature { display: flex; gap: 20px; align-items: flex-start; } /* A BORDA ESQUERDA DO CABECALHO DE s08 — por que ha um recuo aqui e so aqui. * * Nesta secao a chapa de 72px abre a LINHA do cabecalho: ela e irma do bloco * que carrega o rotulo e o H2, entao os dois comecam 92px adentro (72 da chapa * + 20 do gap). O paragrafo que continua o mesmo cabecalho e irmao da LINHA, * nao do bloco de texto, e por isso volta a margem do container — 92px a * esquerda do titulo que ele explica. Nenhum outro cabecalho da pagina faz * isso, e o olho le a diferenca como desalinhamento, que e o que ela e. * * O conserto e de RECUO e nao de estrutura de proposito. Mover o

para * dentro do bloco resolveria igual no papel, mas o

traz o proprio * envolucro de revelacao com atraso de 180ms e o `.wl-head` alinha pela BASE a * partir de 992px: mudar a arvore mudaria a altura do bloco e arrastaria o * link da direita junto. Um padding faz o alinhamento sem tocar em nada disso. * * Abaixo de 768px a chapa passa a ficar ACIMA do texto — em 390px, 92px de * recuo comem um terco da linha — e ai o recuo do paragrafo tambem zera. * * Os 675px sao a medida de texto da casa: o `max-w-[62ch]` do markup rende * 783px, que da linhas de quase 80 caracteres. */ .wl-page .wl-feature + p { max-width: 675px; } @media (min-width: 768px) { .wl-page .wl-feature + p { padding-left: 92px; } } @media (max-width: 767px) { .wl-page .wl-feature { flex-direction: column; gap: 16px; } .wl-page .wl-feature + p { padding-left: 0; } } /* ----------------------------------------------------------------------------- * 8. O CAMPO CAPILAR — ancoragem e porta de visibilidade * ----------------------------------------------------------------------------- * O tecido em si e da camada central (`.fx-field`, preenchido pelo * `efeitos.js`). Aqui entram so as duas coisas que a camada central nao tem * como saber: ONDE o campo se encaixa nesta secao, e QUANDO ele deve estar * aceso. * * A ANCORAGEM, e por que nao basta `inset: 0`. * O SVG do campo sai com `preserveAspectRatio="xMidYMid slice"`, ou seja ele * COBRE a caixa e corta o excedente. Numa caixa larga e baixa — que e * exatamente o formato de um banner — o corte come o topo e a base, e a origem * do leque, que o markup pediu no canto inferior esquerdo, vai parar FORA da * area visivel. O leque apareceria pelo meio, sem ponto de partida. * * A correcao e dar a caixa a mesma proporcao do viewBox (1000x625). Com as duas * iguais, `slice` nao corta nada e a origem cai onde foi pedida. A caixa e * ancorada pela BASE: numa secao mais baixa que ela, o que se perde e o topo do * leque, onde os fios ja estao quase transparentes. * * A PORTA DE VISIBILIDADE. * O `efeitos.js` liga e desliga `data-fx-flow` por interseccao, mas so age * sobre tracejado e pulsos — o campo nao tem nem um nem outro. O markup poe * `data-fx-flow="idle"` no container mesmo assim, so para receber esse sinal, e * a regra abaixo o transforma em o que o campo precisa: fora da tela, opacidade * zero. E tambem a entrada — o tecido nasce apagado e acende quando o banner * aparece, em vez de ja estar la no primeiro quadro. * -------------------------------------------------------------------------- */ .wl-page .wl-field { top: auto; bottom: 0; height: auto; aspect-ratio: 1000 / 625; } .wl-page .wl-field .fx-field-layer { transition: opacity var(--motion-entrance) var(--motion-ease); } .wl-page .wl-field[data-fx-flow="idle"] .fx-field-layer { opacity: 0; } /* ----------------------------------------------------------------------------- * 9. O CONECTOR NEON — encaixe na grade e a versao para fundo CLARO * ----------------------------------------------------------------------------- * O desenho e a luz sao da camada central. Aqui entram duas coisas. * * PRIMEIRA: o conector e uma LINHA DA GRADE, nao um elemento solto. Ele ocupa * uma faixa inteira (`grid-column: 1 / -1`) entre duas fileiras de cartoes, e * so existe a partir de 992px — que e o unico ponto em que as duas secoes * abrem no numero de colunas que o desenho pressupoe (4 na s04, 3 na s10). * Abaixo disso os cartoes empilham em uma ou duas colunas, as "fileiras" que o * conector liga deixam de existir, e um fio que nao liga nada e ruido. Some. * * O SVG escala UNIFORME (`height: auto`): nenhuma circunferencia vira elipse, * nenhum desfoque estica. A altura da faixa acompanha a largura, o que e o * comportamento certo — em tela larga a divisa entre as fileiras respira mais. * * SEGUNDA: a camada central foi desenhada para superficie ESCURA, e as duas * secoes que o dono apontou sao CLARAS. Duas coisas nao sobrevivem a troca: * * - o furo do anel. `.fx-port` pinta o furo com `--gs-core-black`, porque no * escuro o furo E o fundo. Sobre um cartao branco isso vira um disco preto. * O furo tem de ser a superficie em que o anel esta pousado. * - a relacao de luminancia. No escuro o nucleo e mais claro que o halo e por * isso parece aceso. No claro, quanto mais claro menos se ve. Entao o fio * usa o verde PROFUNDO, que e o que tem contraste contra o branco, e a * bolinha usa o verde da marca — mais clara que o fio, exatamente como a * camada central manda, e VERDE, como o dono mandou. Nenhum pixel branco. * * Nada disso e um efeito novo: sao os mesmos `--fx` e `--fx-core` que a propria * camada central ja redeclara no estado `idle`. Trocar as variaveis e o * mecanismo previsto; reescrever as regras nao seria. * -------------------------------------------------------------------------- */ .wl-page .wl-wire { display: none; } @media (min-width: 992px) { .wl-page .wl-wire { display: block; grid-column: 1 / -1; } } .wl-page .wl-wire-svg { display: block; width: 100%; height: auto; } .wl-page .wl-wire--light { --fx: var(--gs-primary-deep); --fx-core: var(--gs-primary); } .wl-page .wl-wire--light .fx-port { fill: var(--gs-surface); } /* O ESTADO APAGADO, tambem traduzido. * A camada central apaga o fio com `--gs-border-strong-dark`, que e branco a * 38% — a cor certa para "linha morta" sobre preto e a pior possivel sobre * branco: some. Sobre claro, linha morta e a borda forte do tema. * * Isto NAO e detalhe: `idle` e o estado com que o conector chega ao navegador, * e e o estado em que ele FICA se o JavaScript nao rodar. Um fio invisivel sem * JS seria uma secao com um buraco no meio; um fio cinza sem JS e um diagrama * que so nao esta aceso. */ .wl-page .wl-wire--light [data-fx-flow="idle"] { --fx: var(--gs-border-strong); --fx-core: var(--gs-primary-deep); } /* ----------------------------------------------------------------------------- * 10. A VARREDURA DE ENTRADA — uma placa, uma vez * ----------------------------------------------------------------------------- * A pagina tem 46 placas. Esta regra atinge UMA: a do banner, a unica acima da * dobra. Uma faixa de luz atravessa o desenho no momento em que o bloco e * revelado e nao volta mais — `1` iteracao, nao `infinite`. Uma placa que pulsa * sem parar vira pisca-pisca, e 46 delas piscando seria um letreiro. * * O gatilho e o `.is-revealed` que o `reveal.js` ja escreve no envolucro * `.tj-fade-anim`: nenhum JS novo, nenhum observador novo. O atraso de 0,55s * deixa a placa terminar de entrar antes de a luz passar. * -------------------------------------------------------------------------- */ .wl-page .wl-plate--lit::after { content: ""; position: absolute; inset: -40% -70%; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient( 104deg, transparent 43%, color-mix(in srgb, var(--gs-mint) 26%, transparent) 50%, transparent 57% ); } .wl-page .tj-fade-anim.is-revealed .wl-plate--lit::after { animation: wl-sheen 1.45s var(--motion-ease) 0.55s 1 both; } @keyframes wl-sheen { from { opacity: 0; transform: translateX(-42%); } 35% { opacity: 1; } to { opacity: 0; transform: translateX(42%); } } /* ----------------------------------------------------------------------------- * 11. O ACORDEAO DA FAQ — largura util e o sinal de "esta aberta" * ----------------------------------------------------------------------------- * A LARGURA. O markup pede `max-w-[1000px]` no mesmo

que ja e * `.tj-container`. As duas utilitarias tem a MESMA especificidade (0,1,0) e a * regra do container e a que sai depois no arquivo compilado, entao ela vence: * as perguntas saem com 1320px e o chevron fica a mais de mil pixels da frase * que ele abre. Trocar por outra utilitaria de uma classe so perderia igual — * a disputa e de ORDEM na cascata, nao de valor. Uma classe propria, aqui, com * dois nomes de classe no seletor, resolve sem tocar em nada compartilhado. * * O ESTADO ABERTO. Os
compartilham `name`, entao abrir um fecha o * outro: e uma SELECAO, e selecao precisa de sinal proprio, distinto do hover. * O verde entra marcando qual pergunta esta aberta — a unica cor com funcao * possivel nesta secao, que hoje nao tem nenhum verde. * * A borda de repouso vem de `.gs-card-border-hover:hover` (0,2,0) no CSS * compilado; por isso o estado aberto precisa dos DOIS nomes de classe no * prefixo (0,3,1) para nao ser atropelado enquanto o cursor passa por cima. * * O chevron acende no hover E no aberto, que e o mesmo par de estados que os * outros acordeoes do pacote usam. Em fundo claro o verde de texto e sempre o * profundo, nunca o verde da marca. * -------------------------------------------------------------------------- */ /* A medida menor fica; a CENTRALIZACAO nao — e quem encolhe e o CONTEUDO. * * O template tinha `max-w-[1000px]` no proprio `.tj-container`. Como o * container traz `margin-inline: auto`, encolhe-lo centralizou o bloco inteiro * e a FAQ virou a unica secao da rota fora da borda esquerda comum — medido a * 1440: todos os titulos em x=53 e o da FAQ em 235. * * A primeira tentativa foi `margin-inline: 0`, e passou do ponto na direcao * contraria: o container colou no x=0 e o titulo foi para 15, agora 38px a * ESQUERDA dos irmaos. O container e que nao podia ser tocado — ele carrega a * margem automatica e o recuo que alinham a pagina inteira. * * Entao o container volta a ser um container igual aos outros (a classe saiu * do template) e o teto de 1000px passa para os dois filhos diretos: o titulo * e a lista. Mesma borda esquerda dos irmaos, linha mais curta para ler. */ .wl-page .wl-faq-narrow > * { max-width: 1000px; } .wl-page .wl-faq-narrow details[open] { border-color: color-mix(in srgb, var(--gs-primary) 32%, transparent); } .wl-page .wl-faq-narrow details[open] summary svg, .wl-page .wl-faq-narrow summary:hover svg { color: var(--gs-primary-deep); } /* ----------------------------------------------------------------------------- * 12. MOVIMENTO REDUZIDO * ----------------------------------------------------------------------------- * O que ja esta coberto por outra folha e NAO se repete aqui: * - `.tj-marquee-track`, parado pelo CSS compilado; * - `.tj-fade-anim`, idem; * - o tracejado que marcha, o pulso que viaja e o cintilar das bolinhas, * parados por `zz-efeitos.css`. * * O que sobra e o que ESTA folha escreveu, mais uma lacuna que so aparece nesta * pagina: * * AS BOLINHAS QUE VIAJAM PELO CAMPO SAO SMIL (`animateMotion`), e CSS nao para * SMIL. A camada central nao tinha como resolver isso — quem monta o campo e o * JS, e a folha dele so alcanca o que e animacao CSS. Aqui o segundo grupo do * campo, que e o que carrega TODAS as bolinhas (as que correm e as que * cintilam), sai do desenho. Os fios ficam: eles sao estaticos, e a textura e * justamente o que o dono elogiou. Movimento zero, tecido inteiro. * -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .wl-page .wl-strip { gap: 56px; padding-right: 56px; } /* Hovers: a cor pode continuar trocando, o que nao pode e a caixa se mexer. */ .wl-page .wl-card, .wl-page .wl-card::after, .wl-page .wl-quad-card, .wl-page .wl-quad-card > .wl-plate--cap::after, .wl-page .wl-plate--icon, .wl-page .wl-plate > svg, .wl-page .wl-pill, .wl-page .wl-rail-item, .wl-page .wl-rail-item .wl-rail-dot, .wl-page .wl-rail-item .wl-rail-label, .wl-page .wl-field .fx-field-layer { transition: none; } /* `.wl-card:hover` e `.wl-quad-card:hover` sairam desta lista junto com o * `translateY` deles: seletor que zera o que nao existe mais e so uma pista * falsa para quem vier depois. */ .wl-page .wl-pill:hover, .wl-page .wl-quad-card:hover > .wl-plate--cap > svg, .wl-page .wl-card--dark:hover > .wl-plate--console > svg, .wl-page .wl-rail-item:hover .wl-rail-dot, .wl-page .wl-rail-item:hover .wl-rail-label { transform: none; } /* A varredura de entrada nao roda. */ .wl-page .tj-fade-anim.is-revealed .wl-plate--lit::after { animation: none; } /* A porta de visibilidade do campo deixa de piscar: o tecido fica sempre no * mesmo estado, aceso e parado. Precisa da MESMA especificidade da regra que * apaga, senao nao vence. */ .wl-page .wl-field[data-fx-flow="idle"] .fx-field-layer { opacity: 0.34; } /* A lacuna do SMIL — ver o cabecalho deste bloco. */ .wl-page .wl-field g.fx-field-layer + g.fx-field-layer { display: none; } } /* ============================================================================= * 12. AJUSTES PEDIDOS PELO DONO * ========================================================================== */ /* 12.1 "CLEAR ROLES" — faixa escura com degrade para o verde. * * Duas camadas somadas: um radial que nasce no canto superior direito, de onde * o tecido capilar tambem parte (as duas coisas tem de vir da MESMA origem, * senao a luz aponta para um lado e os fios para outro), e uma base escura por * baixo. O verde entra diluido — e ambiente, nao mancha. * * Com a faixa escura, os tokens de texto da secao trocam de par. O eyebrow sai * do verde profundo (feito para fundo claro) para o mint, e o titulo e o link * vao para branco, que era o item 2 do mesmo pedido. Faco por CSS escopado em * vez de trocar as classes no template: as utilitarias do Tailwind estao no * HTML colhido e mexer nelas e o caminho mais curto para escrever uma classe * que nao existe compilada. */ .wl-clearroles { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--gs-primary) 26%, transparent), transparent 62%), linear-gradient(180deg, var(--gs-surface-dark-2), var(--gs-surface-dark-3)); } .wl-clearroles .wl-head span[class*="text-gs-primary-deep"] { color: var(--gs-mint); } .wl-clearroles .wl-head h2 { color: var(--gs-text-on-dark); } .wl-clearroles .wl-head a { color: var(--gs-text-on-dark); } .wl-clearroles .wl-head a svg { color: var(--gs-mint); } /* O tecido fica atras de tudo e nao intercepta clique. `z-index: 0` com o * container em `z-index: 1` — o mesmo par que a /resources usa. */ .wl-clearroles > .fx-field { z-index: 0; } .wl-clearroles > .tj-container { position: relative; z-index: 1; } /* 12.2 "BUILD A CATALOG" — cabecalho centrado. * O bloco era `flex-col items-start`; passa a centrado, e o H2 (que tem * `max-width: 22ch`) recebe a margem automatica, sem a qual so o texto * centraria dentro de uma caixa ainda encostada na esquerda. */ .wl-page section:has(#wl-catalog) > .tj-container > .flex { align-items: center; text-align: center; } .wl-page section:has(#wl-catalog) #wl-catalog h2 { margin-inline: auto; } .wl-page section:has(#wl-catalog) > .tj-container > .flex > p { margin-inline: auto; } /* 12.3 "ONE CONTROL PLANE" — a coluna da esquerda acompanha a altura do cartao. * * A grade era `align-items: start`: os seis itens ficavam empilhados no topo e * sobrava um vazio alto embaixo, do tamanho da diferenca para o cartao escuro. * Com `stretch` na grade e `flex: 1` nos itens, os seis dividem a altura * inteira e as duas colunas terminam juntas. * * `align-content: stretch` na lista e o que faz a divisao valer: sem ele, o * flex container cresce mas os filhos continuam do tamanho do conteudo. */ @media (min-width: 1200px) { .wl-rail { align-items: stretch; } .wl-rail-list { height: 100%; } .wl-rail-list > li { display: flex; flex: 1 1 0; } .wl-rail-item { width: 100%; } } /* 12.4 OS ITENS DO TRILHO COM O DESENHO DOS CARTOES DE "PRODUCT EVIDENCE". * * Eram pilulas de vidro (fundo translucido, `backdrop-filter`, um pontinho a * esquerda). Passam a cartao de verdade, no mesmo desenho da secao "Product * evidence" da home: superficie solida, raio de 14px, respiro generoso e o * rotulo em peso de titulo. * * O que muda em relacao a home sao os TOKENS, nao a forma: la o cartao e * branco sobre faixa clara; aqui a faixa e escura, entao superficie e borda * vem do par escuro. Mesma peca, lado certo da paleta. * * O pontinho sai. Ele existia para desenhar um trilho vertical que, com os * cartoes distribuidos por altura, deixa de existir. */ .wl-rail-item { border-radius: 14px; background: var(--gs-surface-dark-3); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 2px 12px color-mix(in srgb, var(--gs-core-black) 40%, transparent); } .wl-rail-item:hover { background: var(--gs-surface-dark-2); } .wl-rail-item .wl-rail-dot { display: none; } @media (min-width: 992px) { .wl-rail-item { padding: 28px 32px; } }