/* ══════════════════════════════════════════════════════════════════ styles-v2.css — Caderno Secreto Valle Nevado (redesign v2) Design system: régua tipográfica Claude Basics × identidade WLC. Autor: Félix (Fase 1). Depende de colors_and_type.css para os tokens --wlc-* e as @font-face (Lufga, Chalkiez). Nenhuma cor, família ou clamp tipográfico é recriado aqui fora dos tokens abaixo. REGRA DURA: clamp() só existe nos 8 tokens --type-*. Toda cor vem de var(--wlc-*). Sentence case no corpo; CAIXA ALTA só em rótulos. Prefixo de classe: .v2-* (namespace isolado dos vn e cad legados). ══════════════════════════════════════════════════════════════════ */ :root { /* ── REGRA chalk (Laise 07/07, decisão final): Chalkiez SÓ em texto sem acento e sem número (a fonte não tem esses glifos e nenhum fallback handwritten aprovado existe; o Chaloopswoo foi testado e reprovado). Título com acento/dígito recebe a classe .v2-sans e vira Lufga 800. ── */ --font-chalk: "Chalkiez", "Lufga", sans-serif; /* ── RÉGUA TIPOGRÁFICA · 7 papéis + caption (única fonte de clamps) ── */ --type-display: clamp(48px, 8.5vw, 92px); /* hero da página · Lufga 900 */ --type-chap-num: clamp(72px, 10vw, 120px); /* número ghost · Lufga 900 */ --type-chap-title: clamp(26px, 3.5vw, 38px); /* título de capítulo · Lufga 800 */ --type-section: clamp(24px, 3vw, 30px); /* título de seção · Chalkiez gradiente */ --type-lead: clamp(18px, 2.4vw, 21px); /* lead · Lufga 500 */ --type-body: 17px; /* corpo · Lufga 400 */ --type-label: 12px; /* rótulo · Lufga 700-800 CAIXA ALTA */ --type-caption: 13px; /* legenda de foto · Lufga 500 */ /* ── fundo base da página (hex específico deste caderno, herdado do do caderno.html; sem token oficial na paleta WLC. Preferência da Laise 2026-07-04 sobre --wlc-alabaster #F5EFE8). NÃO é superfície de card (essas seguem --wlc-cream). ── */ --v2-page-bg: #F3EBDB; --rgb-page-bg: 243,235,219; /* ── medidas de coluna ── */ --v2-wrap: 940px; /* coluna de leitura */ --v2-wide: 1100px; /* componentes largos: mapas, tabelas, timeline */ /* ── RITMO VERTICAL · escala de gap tokenizada (Fase 1, Félix 04/07) ── Elimina o swing 20px→282px sem token do piloto. Três degraus só: tight = respiro intra-bloco; block = entre blocos irmãos numa seção; section = entre seções maiores de capítulo. Nada de valores avulsos. */ --v2-gap-tight: 24px; /* head↔conteúdo, spacer curto */ --v2-gap-block: 48px; /* entre blocos irmãos (spacer grande) */ --v2-gap-section: 88px; /* entre seções maiores de capítulo */ /* ── enquadramento de imagem · controle fino por eixo (Fase 1, Félix 04/07) ── Hero: X e Y independentes, sobrescritíveis por breakpoint via media query. Band: só o eixo vertical por imagem (--band-pos-y), fallback 30% (evita raspar o topo do cabelo no desktop no modo cover). Recalibrado 04/07 p/ a composição v4a (personagens no terço esquerdo): --hero-pos-x default 20% (favorece a esquerda → se um desktop estreito/alto cair no modo height-fill, os personagens não são raspados; no 1440 padrão a largura preenche exata e o eixo X é inócuo). --hero-pos-y 52% centra o corte vertical mínimo (só ~60px de overflow no 1440) mantendo cabeça e pés inteiros. */ --hero-pos-x: 20%; --hero-pos-y: 52%; --band-pos-y: 30%; /* ── triplets RGB dos tokens WLC (para glows/halos do conector neon) ── */ --rgb-imperial-red: 231,64,65; --rgb-space-cadet: 36,34,88; --rgb-green-blue: 33,100,174; --rgb-chinese-yellow: 252,180,21; --rgb-powder-blue: 159,217,216; --rgb-terra-cotta: 235,105,82; --rgb-midnight: 124,40,123; --rgb-skobeloff: 2,112,113; /* deep-ink dos accents que reprovam AA como TEXTO pequeno (fix QA Vera 04/07, itens M3/M4). Versões escurecidas dos accents para rótulos/tags que falhavam 4.5:1 — tokenizadas aqui, nunca hardcode nos partials. Valores conferidos por cálculo de contraste WCAG. */ --wlc-imperial-red-deep: #B02E2F; /* red p/ texto: 6.05 no cream · 4.91 no tint red .16 · white 6.41 */ --wlc-terra-deep: #A5412A; /* terra p/ texto: 4.95 no tint terra .16 */ --wlc-chinese-yellow-deep: #8A540A; /* amarelo p/ texto: token status-warn DI-003-wlc §2 · 5.91 no cream #FBF8F3 (fix QA Vera 05/07, cap-09 tag warn). Amarelo puro nunca é texto. */ /* accent de capítulo (default; cada capítulo sobrescreve --chap-accent e --chap-deep via style inline no wrapper) */ --chap-accent: var(--wlc-chinese-yellow); --chap-deep: #C98E0A; --chap-rgb: var(--rgb-chinese-yellow); /* --chap-ink · cor de TEXTO/número sobre superfície clara (cream/page). Separado de --chap-deep (que fica p/ sombras e gradientes decorativos): alguns --chap-deep não passam AA como texto (ex: chinese-yellow #C98E0A = 2,69 no cream). Default herda --chap-deep; capítulos cujo deep falha AA sobrescrevem --chap-ink por um tom que passe 4,5:1 (Félix 04/07). */ --chap-ink: var(--chap-deep); } /* ══════════════════ 1 · BASE / CANVAS ═══════════════════════════════ */ .v2 * { box-sizing: border-box; } .v2 { margin: 0; background: var(--v2-page-bg); color: var(--wlc-space-cadet); font-family: var(--font-sans); font-size: var(--type-body); line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; } .v2 img { max-width: 100%; } .v2 ::selection { background: var(--wlc-imperial-red); color: var(--wlc-white); } /* film-grain contínuo (portado do Claude Basics) */ .v2::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .v2-wrap { max-width: var(--v2-wrap); margin: 0 auto; padding: 0 26px; } .v2-wrap--wide { max-width: var(--v2-wide); } /* scroll-reveal (IntersectionObserver marca .in) */ .v2 .reveal { opacity: 0; transform: translateY(16px); } .v2 .reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); } .v2 :focus-visible { outline: 3px solid var(--chap-accent); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .v2 .reveal { opacity: 1; transform: none; } .v2 *, .v2 *::before, .v2 *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } /* guarda-chuvas: sem a queda animada viram fileira estática visível (escalonada em 2 alturas p/ não ficar linha reta), nunca sumindo fora do quadro como o keyframe deixaria. */ .v2-div__rain i { animation: none !important; opacity: 1; } .v2-div__rain i:nth-child(odd) { top: 30%; } .v2-div__rain i:nth-child(even) { top: 48%; } } /* ══════════════════ 2 · PAPÉIS TIPOGRÁFICOS ═════════════════════════ */ /* --type-label · rótulo/eyebrow (o ÚNICO papel em CAIXA ALTA) */ .v2-label { font-family: var(--font-sans); font-weight: 700; font-size: var(--type-label); letter-spacing: .2em; text-transform: uppercase; color: var(--wlc-skobeloff); margin: 0 0 18px; display: inline-flex; align-items: center; gap: 9px; } /* --type-section · título de seção · Chalkiez com gradiente clipado no accent */ .v2-section { font-family: var(--font-chalk); font-weight: 400; font-size: var(--type-section); line-height: 1.06; text-align: center; margin: 0 auto 10px; max-width: 44ch; text-wrap: balance; background: linear-gradient(100deg, var(--chap-deep) 0%, var(--chap-accent) 60%, var(--wlc-space-cadet) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 3px 16px rgba(var(--chap-rgb), .22)); } /* nota sob o título de seção */ .v2-section-note { font-family: var(--font-sans); font-weight: 700; font-size: var(--type-label); letter-spacing: .18em; text-transform: uppercase; color: var(--wlc-ink-70); text-align: center; margin: 0 auto 36px; } /* --type-lead · nunca 2 consecutivos, máx ~50ch */ .v2-lead { font-family: var(--font-sans); font-weight: 500; font-size: var(--type-lead); line-height: 1.5; color: var(--wlc-ink-70); max-width: 50ch; margin: 0 auto 26px; text-align: center; } .v2-lead b { color: var(--wlc-space-cadet); font-weight: 700; } /* --type-body · corpo geral, máx 60ch */ .v2-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--type-body); line-height: 1.65; color: var(--wlc-ink-70); max-width: 60ch; margin: 0 auto 20px; text-align: center; } .v2-body b { color: var(--wlc-space-cadet); font-weight: 700; } /* --type-caption · legenda de foto */ .v2-caption { font-family: var(--font-sans); font-weight: 500; font-size: var(--type-caption); line-height: 1.4; color: var(--wlc-ink-70); text-align: center; margin: 12px auto 0; max-width: 60ch; } /* ══════════════════ 3 · HERO DA PÁGINA ══════════════════════════════ */ /* Hero de tela cheia (spec: "Seção Hero — tela inteira"). A altura vem de min-height:100vh (100dvh no mobile p/ descontar a barra do navegador), NÃO do conteúdo — sem isto a seção colapsava p/ ~508px numa viewport de 900px e renderizava como faixa curta. O conteúdo é centrado na vertical. */ .v2-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--wlc-border-warm); min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; } /* Enquadramento do hero: X e Y controlados por variável, independentes e sobrescritíveis por breakpoint (media queries abaixo). Composição v4a: dupla no terço esquerdo (bbox x[3%,35%] y[17%,90%] na imagem 1536×1024), zona livre à direita p/ o texto. No DESKTOP 1440×900 o cover preenche a LARGURA (aspect 1,6 > 1,5 da imagem) → só há overflow vertical (~60px), o eixo X é inócuo e a dupla aparece inteira à esquerda; --hero-pos-y 52% mantém cabeça e pés. */ .v2-hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: var(--hero-pos-x, 20%) var(--hero-pos-y, 52%); filter: saturate(1.05); } /* VÉU DE LEITURA (Félix 04/07 — recalibrado p/ a composição v4a). Agora o texto cai INTEIRAMENTE sobre a zona direita (céu dourado, cordilheira, vale) e os personagens ficam à ESQUERDA (bbox termina em x≈35%). Isso simplifica o véu: um único scrim cream (--rgb-page-bg) ANCORADO À DIREITA, cuja borda esquerda já zera em ~34% da largura — nunca toca os personagens. Como o texto é escuro (navy/vermelho) sobre um fundo claro/quente, o scrim CLAREIA a base e sobe o contraste do texto sem lavar rosto nenhum (o rosto está fora do scrim, à esquerda). Mantém-se a 2ª camada: HALO cream por glifo (text-shadow abaixo), que dá contraste local a cada letra — útil sobre o brilho do sol na borda direita. No tablet/mobile o layout empilha (media queries abaixo) e o véu é desligado: o texto vai p/ fundo cream sólido, dispensa scrim. */ .v2-hero__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 47% 66% at 74% 50%, rgba(var(--rgb-page-bg),.74) 0%, rgba(var(--rgb-page-bg),.58) 42%, rgba(var(--rgb-page-bg),.24) 68%, rgba(var(--rgb-page-bg),0) 84%); } /* Bloco de texto deslocado p/ a zona livre da direita (padding-left ~46% reserva o terço esquerdo dos personagens + um respiro de céu). Texto alinhado à ESQUERDA dentro da coluna (composição assimétrica, editorial — não centralizado na página toda). A coluna tem max-width p/ não colar no brilho do sol na borda. */ .v2-hero__in { position: relative; z-index: 1; width: 100%; padding: 88px 6vw 88px 50%; display: flex; justify-content: flex-start; } .v2-hero__col { max-width: 600px; text-align: left; } /* halo cream por glifo — camada 2 do véu de leitura (ver bloco acima). Tokenizado em --rgb-page-bg; nenhuma cor hardcode. Subtítulo e eyebrow (texto menor/mais fino, maior risco) ganham halo mais forte; título e chalk (grandes, já legíveis) ganham um lift suave só p/ não "colar" na neve. */ .v2-hero .v2-label, .v2-hero__sub { text-shadow: 0 1px 2px rgba(var(--rgb-page-bg),.95), 0 2px 14px rgba(var(--rgb-page-bg),.92), 0 0 22px rgba(var(--rgb-page-bg),.70); } .v2-hero__title { text-shadow: 0 2px 18px rgba(var(--rgb-page-bg),.75); } .v2-hero__title .chalk { text-shadow: 0 1px 10px rgba(var(--rgb-page-bg),.85); } .v2-hero__title { font-family: var(--font-sans); font-weight: 900; font-size: var(--type-display); line-height: .94; letter-spacing: -.03em; color: var(--wlc-space-cadet); margin: 0 auto 22px; max-width: 15ch; } .v2-hero__title .chalk { display: block; font-family: var(--font-chalk); font-weight: 400; font-size: var(--type-section); line-height: 1; letter-spacing: 0; color: var(--wlc-imperial-red); margin-bottom: 6px; } .v2-hero__sub { font-family: var(--font-sans); font-weight: 500; font-size: var(--type-lead); line-height: 1.5; color: var(--wlc-ink-70); max-width: 50ch; margin: 0 auto 26px; } .v2-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; } .v2-chip { font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--wlc-space-cadet); background: var(--wlc-cream); border: 1px solid var(--wlc-skobeloff); border-radius: 999px; padding: 8px 15px; display: inline-flex; align-items: center; gap: 8px; } .v2-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wlc-skobeloff); } /* Alinhamento à esquerda dentro da coluna deslocada do hero (as classes de título/sub/chips centralizam por padrão via margin:auto / justify:center — aqui são sobrescritas p/ a composição assimétrica v4a). */ .v2-hero__col .v2-hero__title { margin: 0 0 22px; } .v2-hero__col .v2-hero__sub { margin: 0 0 26px; } .v2-hero__col .v2-chips { justify-content: flex-start; } /* Enquadramento do hero por breakpoint — composição v4a (dupla no terço esquerdo). No overlay full-bleed do desktop não cabe um layout lado-a-lado em telas estreitas sem cortar personagem OU esconder a zona de texto (a janela cover de um tablet/mobile só mostra ~50–66% da largura da imagem 1,5). Solução robusta e consistente com o padrão do projeto (a .v2-band já EMPILHA a ≤900px, mostrando a imagem inteira): ≤900px o hero deixa de ser cover full-bleed e EMPILHA — a imagem vira um bloco com a razão de aspecto casada, mostrando os dois personagens inteiros, e o texto desce p/ baixo, centralizado, sobre o fundo cream sólido da página (contraste natural, véu desligado). • TABLET ≤900px → banda com aspect-ratio 3/2 (= 1,5, exatamente a razão da imagem 1536×1024): a imagem aparece INTEIRA, sem corte, dupla à esquerda, vale à direita. Texto empilhado abaixo, centralizado. */ @media (max-width: 900px) { .v2-hero { min-height: 0; display: block; } .v2-hero__bg { position: static; width: 100%; height: auto; aspect-ratio: 3 / 2; background-position: 50% 50%; } .v2-hero__bg::after { display: none; } /* texto não fica mais sobre a imagem → sem véu */ .v2-hero__in { position: static; padding: 40px 24px 52px; display: block; } .v2-hero__col { width: 100%; max-width: 640px; margin: 0 auto; text-align: center; } /* eyebrow: inline-flex é nowrap por padrão → em telas estreitas seu max-content (~550px) estoura a coluna. Aqui deixa quebrar e trava na largura da coluna. */ .v2-hero .v2-label { justify-content: center; flex-wrap: wrap; max-width: 100%; } .v2-hero__col .v2-hero__sub { max-width: 100%; } .v2-hero__col .v2-hero__title { margin: 0 auto 22px; } .v2-hero__col .v2-hero__sub { margin: 0 auto 26px; } .v2-hero__col .v2-chips { justify-content: center; } /* halo por glifo desnecessário sobre fundo cream sólido — removido p/ limpeza */ .v2-hero .v2-label, .v2-hero__sub, .v2-hero__title, .v2-hero__title .chalk { text-shadow: none; } } /* • MOBILE ≤560px → em 390px a banda 3/2 fica muito baixa (~260px) e a dupla no terço esquerdo minúscula. Estreita-se a razão p/ ~1/1 e ancora-se o corte à ESQUERDA (background-position 0%) — o cover então mostra a faixa esquerda da imagem (x≈0–67%), com a dupla INTEIRA e maior; o céu vazio da direita é o que sai do quadro. Vertical inteiro (razão < da imagem → preenche a altura). Texto segue empilhado abaixo, centralizado, sem véu. */ @media (max-width: 560px) { .v2-hero__bg { aspect-ratio: 1 / 1; background-position: 0% 50%; } .v2-hero__in { padding: 30px 20px 44px; } } /* ══════════════════ 4 · PRÉVIA DE CAPÍTULOS ═════════════════════════ */ .v2-previa { padding: 64px 0 24px; } .v2-chapgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 880px; margin: 0 auto; } .v2-chapcard { text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--wlc-cream); border: 1.5px solid var(--wlc-space-cadet); border-radius: 14px; padding: 22px 16px; box-shadow: 5px 5px 0 var(--wlc-space-cadet); transition: transform .15s, box-shadow .15s; /* color = accent do capítulo: as ilustrações flat usam currentColor como massa principal (var() em atributo fill não é confiável cross-browser). Os textos abaixo definem a própria cor, então não herdam o accent. */ color: var(--chap-accent, var(--wlc-skobeloff)); } .v2-chapcard:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--chap-accent, var(--wlc-chinese-yellow)); } .v2-chapcard__art { width: 48px; height: 48px; display: block; } .v2-chapcard__name { font-family: var(--font-sans); font-weight: 700; font-size: 14px; line-height: 1.3; text-align: center; color: var(--wlc-space-cadet); } .v2-chapcard__num { font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--wlc-ink-70); } @media (max-width: 900px) { .v2-chapgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .v2-chapgrid { grid-template-columns: 1fr; } } /* ══════════════════ 5 · BAND + CARD-CAP DE CAPÍTULO ═════════════════ */ /* Band de abertura de capítulo em TELA CHEIA (pedido Laise 04/07: preencher a página inteira igual à hero). Mesmo padrão de altura da .v2-hero: min-height:100vh (100dvh no mobile p/ descontar a barra do navegador), NÃO height fixa. Antes era height:78vh/min:520/max:900 — trocado por 100vh full. IMPACTO NO CROP (só afeta o DESKTOP >900px; ≤900px a band vira faixa com a imagem inteira, sem cover — ver media query abaixo): container mais alto aproxima o aspect do container (1440/900=1,6) do aspect da imagem 1536×1024 (1,5). Continua acima de 1,5, então o modo cover segue cortando no eixo VERTICAL (não flipa p/ horizontal) — mas o overflow vertical cai de ~258px (78vh) p/ ~60px (100vh), então sobra MAIS imagem em cima e embaixo: Lalas e os WePets ficam ainda mais folgados no topo/base. --band-pos-y mantido em 30% (folga de sobra; confirmado por screenshot real 04/07). */ .v2-band { position: relative; width: 100vw; margin-left: calc(50% - 50vw); min-height: 100vh; min-height: 100dvh; overflow: hidden; border-block: 1px solid var(--wlc-border-warm); } /* background-position vertical controlado por --band-pos-y (fallback 30%) para não raspar o topo do cabelo no modo cover do desktop. Cada band sobrescreve --band-pos-y inline conforme a imagem (Félix 04/07). Antes era 'center' (=50%), o que empurrava o corte do topo p/ 14,9% no cap-03; 30% devolve ~5,7%. */ .v2-band__bg { position: absolute; inset: 0; background-size: cover; background-position: 50% var(--band-pos-y, 30%); filter: saturate(1.04); transform: scale(1.04); } .v2-band__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--rgb-page-bg),.14) 0%, rgba(36,34,88,.42) 100%); } .v2-band__kicker { position: absolute; left: 0; right: 0; top: 40px; z-index: 2; text-align: center; font-family: var(--font-sans); font-weight: 700; font-size: var(--type-label); letter-spacing: .22em; text-transform: uppercase; color: var(--wlc-alabaster); opacity: .9; } .v2-band__cap { position: absolute; left: 0; right: 0; bottom: 40px; z-index: 2; text-align: center; font-family: var(--font-chalk); font-weight: 400; font-size: var(--type-chap-title); color: var(--wlc-alabaster); text-shadow: 0 2px 24px rgba(36,34,88,.7); } /* card-cap estilo Claude Basics: kicker + ghost 900 + título + block-shadow tingido */ .v2-cardcap { position: relative; max-width: 720px; margin: -70px auto 0; z-index: 3; background: var(--chap-accent); border: 1.5px solid var(--wlc-space-cadet); border-radius: 16px; box-shadow: 8px 8px 0 var(--chap-deep); padding: 22px 34px 22px; overflow: hidden; text-align: left; } .v2-cardcap--onlight { color: var(--wlc-space-cadet); } /* fundo claro (amarelo/powder): texto navy */ .v2-cardcap--ondark { color: var(--wlc-alabaster); } /* fundo saturado: texto alabaster */ /* GUARDA DURA (regra Laise 01/07 · terra-cotta = texto navy, nunca alabaster): terra-cotta #EB6952 é claro o suficiente p/ reprovar alabaster (2,76) e aprovar navy (4,62). Capítulos 04 e 09 (accent terra) DEVEM usar --onlight; esta guarda força navy mesmo se --ondark for aplicado por engano no rollout. */ .v2-cardcap--terra, .v2-cardcap--terra.v2-cardcap--ondark { color: var(--wlc-space-cadet); } .v2-cardcap__ghost { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-family: var(--font-sans); font-weight: 900; font-size: var(--type-chap-num); line-height: 1; opacity: .16; pointer-events: none; z-index: 0; color: currentColor; } .v2-cardcap > * { position: relative; z-index: 1; } .v2-cardcap__kicker { font-family: var(--font-sans); font-weight: 800; font-size: var(--type-label); letter-spacing: .16em; text-transform: uppercase; opacity: .92; margin: 0 0 10px; } .v2-cardcap__title { font-family: var(--font-sans); font-weight: 800; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.02; letter-spacing: -.025em; margin: 0; } /* Variação 1 (aprovada Laise 07/07): eyebrow "Capítulo 0N" + nome-tema grande numa coluna à esquerda, número 3D showpiece à direita, alinhados pela base. Substitui o lockup antigo (palavra "Capítulo" gigante + tema pequeno abaixo). */ .v2-cardcap__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin: 2px 0 14px; } .v2-cardcap__headtext { min-width: 0; } .v2-cardcap__head .v2-cardcap__kicker { margin: 0 0 8px; } .v2-cardcap__head .v2-cardcap__no { align-self: flex-end; } /* lockup horizontal "Capítulo 03" — número grande AO LADO da palavra (não empilhado). Substitui o número ghost gigante; o título completo do capítulo NÃO se repete aqui (já aparece em Chalkiez sobre a band logo acima). */ .v2-cardcap__lockup { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin: 0 0 16px; } .v2-cardcap__word { font-family: var(--font-sans); font-weight: 800; font-size: var(--type-chap-title); line-height: 1; letter-spacing: -.01em; align-self: flex-end; } /* número "03" — showpiece 3D extrudado + glow ambiente (Laise 04/07: maior, empurrado p/ a borda direita do lockup — mais separado da palavra "Capítulo" — e tratamento estilizado neon/3D no lugar da cor chapada). A pilha de sombras duras espelha o próprio block-shadow do card (8px 8px 0 --chap-deep) → o numeral vira um bloco extrudado na MESMA linguagem WLC (quente, sticker, aventureira), não neon de festa. Face/extrude/glow por tokens do capítulo, nunca hardcode: onlight (cards claros: amarelo/powder) usa face navy + extrude --chap-deep + lift navy suave; ondark (cards saturados) usa face alabaster + extrude navy + glow neon do accent (--chap-rgb), que aí sim contrasta. */ .v2-cardcap__no { font-family: var(--font-sans); font-weight: 900; font-size: calc(var(--type-chap-num) * 1.16); line-height: .7; letter-spacing: -.05em; align-self: flex-end; /* Laise 07/07: número descido p/ encurtar a altura do card-cap */ transform: translateY(.16em); --no-face: var(--wlc-space-cadet); --no-extrude: var(--chap-deep); --no-glow: rgba(var(--rgb-space-cadet), .28); color: var(--no-face); text-shadow: 1px 1px 0 var(--no-extrude), 2px 2px 0 var(--no-extrude), 3px 3px 0 var(--no-extrude), 4px 4px 0 var(--no-extrude), 5px 5px 0 var(--no-extrude), 6px 6px 0 var(--no-extrude), 7px 7px 0 var(--no-extrude), 8px 8px 0 var(--no-extrude), 9px 12px 20px var(--no-glow); } .v2-cardcap--ondark .v2-cardcap__no { --no-face: var(--wlc-alabaster); --no-extrude: rgba(var(--rgb-space-cadet), .92); --no-glow: rgba(var(--chap-rgb), .60); } .v2-cardcap__theme { font-family: var(--font-sans); font-weight: 800; font-size: var(--type-label); letter-spacing: .16em; text-transform: uppercase; opacity: .92; margin: 0 0 16px; } .v2-cardcap__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .v2-cardcap__chips span { font-family: var(--font-sans); font-weight: 600; font-size: 12.5px; padding: 6px 13px; border-radius: 999px; background: rgba(36,34,88,.10); border: 1px solid rgba(36,34,88,.28); } .v2-cardcap--ondark .v2-cardcap__chips span { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); } .v2-cardcap__tag { font-family: var(--font-sans); font-weight: 500; font-size: var(--type-body); line-height: 1.45; margin: 0; max-width: 46ch; opacity: .92; } /* C1 (fix QA Vera 04/07) — o CSS legado colors_and_type.css carrega ANTES de styles-v2.css e sua regra `p{color:var(--fg1)}` (navy) vence, por especificidade de seletor de elemento, a herança de cor que o card `.v2-cardcap--ondark` daria aos

internos (__theme e __tag). Resultado: eyebrow + tag pintados de navy sobre fundo saturado (pior caso cap-quando: navy sobre navy, contraste 1.0, texto invisível). Aqui fixamos a cor de texto POR VARIANTE com seletor descendente (mais específico que `p`), sem depender da herança nem da ordem de carga do CSS. ondark → alabaster; onlight/terra → navy (regra Laise 01/07). */ .v2-cardcap--ondark .v2-cardcap__theme, .v2-cardcap--ondark .v2-cardcap__tag, .v2-cardcap--ondark .v2-cardcap__kicker, .v2-cardcap--ondark .v2-cardcap__title { color: var(--wlc-alabaster); } .v2-cardcap--onlight .v2-cardcap__theme, .v2-cardcap--onlight .v2-cardcap__tag, .v2-cardcap--onlight .v2-cardcap__kicker, .v2-cardcap--onlight .v2-cardcap__title, .v2-cardcap--terra .v2-cardcap__theme, .v2-cardcap--terra .v2-cardcap__tag, .v2-cardcap--terra .v2-cardcap__kicker, .v2-cardcap--terra .v2-cardcap__title { color: var(--wlc-space-cadet); } /* ── Card-cap de capítulo imperial-red (cap-06 · cap-10) — fix QA Vera 05/07 (C1) ── O vermelho vivo #E74041 (--chap-accent desses caps) é MID-TONE: como FUNDO de card-cap reprova AA com QUALQUER cor de texto pequeno — navy 3.60, alabaster 3.53, branco 4.03. Não cabe na família onlight (accents claros amarelo/terra → navy) nem simplesmente na ondark (o fundo continuaria #E74041 e alabaster daria só 3.53). Correção: usar a variante ondark E escurecer SÓ o FUNDO do card-cap para a sombra oficial do red (--wlc-imperial-red-deep #B02E2F, DI-003-wlc §8) com texto branco (§8 manda #FFFFFF no cartão-título) = 6.41:1 AA ok. Mantém a linguagem de bloco sólido colorido (igual ao amarelo cap-03), só num tom mais fundo. O --chap-accent do capítulo (#E74041) NÃO muda: botões, bordas e destaques do cap seguem no red vivo; só o card-cap escurece. O carimbo vira navy (--wlc-space-cadet, já é a cor do border do card e do extrude do numeral ondark) — red + navy é o par canônico WLC (§2). */ .v2-cardcap--red { background: var(--wlc-imperial-red-deep); box-shadow: 8px 8px 0 var(--wlc-space-cadet); color: var(--wlc-white); } .v2-cardcap--red .v2-cardcap__theme, .v2-cardcap--red .v2-cardcap__tag, .v2-cardcap--red .v2-cardcap__kicker, .v2-cardcap--red .v2-cardcap__title { color: var(--wlc-white); } /* mobile + tablet: band vira faixa com imagem inteira (regra Laise 01/07: personagens nunca cortados). Breakpoint subido de 720px → 900px (Félix 04/07): a auditoria achou 5 capítulos com corte real da Lalas/mãos em 768px no modo cover, porque a faixa lateral 3:2 corta a personagem. 900px cobre o tablet sem afetar o desktop 1440. RECOMENDAÇÃO p/ o CSS legado do caderno v1 (_componentes-wlc/project/styles.css, .vn-band / regra 'imagem inteira'): subir o mesmo 720→900 numa tarefa futura — NÃO editado aqui (fora de escopo: o caderno v1 já está publicado). */ @media (max-width: 900px) { .v2-band { height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; } .v2-band__bg { position: static; width: 100%; aspect-ratio: 3/2; transform: none; order: 1; } .v2-band__bg::after { display: none; } .v2-band__kicker { position: static; order: 0; color: var(--wlc-ink-70); opacity: 1; padding: 20px 22px 12px; } .v2-band__cap { position: static; order: 2; color: var(--wlc-space-cadet); text-shadow: none; padding: 14px 22px 0; } .v2-cardcap { margin: var(--v2-gap-tight) auto 0; } .v2-cardcap__ghost { display: none; } /* ritmo comprimido em telas menores: seções mais próximas */ .v2 { --v2-gap-section: 56px; } } /* ══════════════════ 6 · CONECTOR NEON (portado do CB, adaptado ao accent) ═ */ .v2-neon { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 210px; padding: 30px 0; text-align: center; --div-rgb: var(--chap-rgb); } .v2-neon--yellow { --div-rgb: var(--rgb-chinese-yellow); } .v2-neon--red { --div-rgb: var(--rgb-imperial-red); } .v2-neon--skob { --div-rgb: var(--rgb-skobeloff); } .v2-neon--terra { --div-rgb: var(--rgb-terra-cotta); } .v2-neon--gblue { --div-rgb: var(--rgb-green-blue); } .v2-neon--midnight { --div-rgb: var(--rgb-midnight); } .v2-neon--navy { --div-rgb: var(--rgb-space-cadet); } .v2-neon > * { position: relative; z-index: 1; } .v2-neon__label { font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--wlc-ink-70); margin-bottom: 22px; display: inline-flex; align-items: center; gap: 9px; } .v2-neon__label svg { width: 15px; height: 15px; color: rgb(var(--div-rgb)); } .v2-neon__arrow { font-family: var(--font-sans); font-weight: 700; font-size: 22px; color: rgb(var(--div-rgb)); margin-bottom: 12px; text-shadow: 0 0 8px rgba(var(--div-rgb),.75), 0 0 18px rgba(var(--div-rgb),.4); animation: v2bob 2.4s ease-in-out infinite; } @keyframes v2bob { 0%,100% { transform: translateY(0); opacity: .65; } 50% { transform: translateY(8px); opacity: 1; } } .v2-neon__line { position: relative; width: 3px; height: 240px; border-radius: 3px; margin: 16px 0 28px; --scroll-pos: 50%; overflow: visible; background: linear-gradient(180deg, rgba(var(--div-rgb),0) 0%, rgba(var(--div-rgb),.55) 12%, rgba(var(--div-rgb),.95) 50%, rgba(var(--div-rgb),.55) 88%, rgba(var(--div-rgb),0) 100%); box-shadow: 0 0 1px rgba(var(--div-rgb),1), 0 0 2px rgba(var(--div-rgb),1), 0 0 4px rgba(var(--div-rgb),.95), 0 0 8px rgba(var(--div-rgb),.8), 0 0 16px rgba(var(--div-rgb),.65), 0 0 28px rgba(var(--div-rgb),.5), 0 0 48px rgba(var(--div-rgb),.35), 0 0 72px rgba(var(--div-rgb),.22), 0 0 112px rgba(var(--div-rgb),.12); } .v2-neon__line::before { content: ""; position: absolute; left: 50%; top: 8%; bottom: 8%; width: 1px; margin-left: -.5px; border-radius: 2px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 18%, rgba(255,255,255,1) 50%, rgba(255,255,255,.85) 82%, rgba(255,255,255,0) 100%); box-shadow: 0 0 2px rgba(255,255,255,.9), 0 0 6px rgba(255,255,255,.55), 0 0 12px rgba(255,255,255,.3); } .v2-neon::before { content: ""; position: absolute; left: 50%; top: 50%; width: 220px; height: 360px; margin-left: -110px; margin-top: -180px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(var(--div-rgb),.26) 0%, rgba(var(--div-rgb),.13) 30%, rgba(var(--div-rgb),.05) 55%, rgba(var(--div-rgb),0) 75%); filter: blur(18px); pointer-events: none; z-index: 0; opacity: 0; transition: opacity .5s ease; } .v2-neon.is-in-view::before { opacity: 1; } .v2-neon__line::after { content: ""; position: absolute; left: 50%; top: var(--scroll-pos); width: 110px; height: 110px; margin-left: -55px; margin-top: -55px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--div-rgb),.85) 0%, rgba(var(--div-rgb),.45) 28%, rgba(var(--div-rgb),.18) 55%, rgba(var(--div-rgb),0) 75%); filter: blur(10px); pointer-events: none; opacity: 0; transition: top .18s cubic-bezier(.22,.61,.36,1), opacity .5s ease; will-change: top; } .v2-neon.is-in-view .v2-neon__line::after { opacity: 1; } /* variante INTRA-capítulo (Laise 04/07): o neon deixa de separar capítulos e passa a marcar a transição entre SEÇÕES internas do mesmo capítulo. A cor herda --chap-rgb do próprio capítulo (o wrapper .v2-wrap já o define), então dispensa modificador de cor — não faz mais sentido usar o accent "do próximo capítulo". Mais curto/discreto que o inter-capítulo p/ não dominar o fluxo. */ .v2-neon--intra { min-height: 210px; padding: 10px 0; } .v2-neon--intra .v2-neon__label { margin-bottom: 14px; } .v2-neon--intra .v2-neon__line { height: 200px; margin: 10px 0 18px; } .v2-neon--intra::before { width: 190px; height: 320px; margin-left: -95px; margin-top: -160px; } .v2-neon--intra .v2-neon__arrow { font-size: 20px; margin-bottom: 10px; } /* ══════════════════ 6b · DIVISOR GUARDA-CHUVAS (inter-capítulo) ══════════ Portado do .cad-div do caderno v1: fileira de 12 guarda-chuvas SVG mascarados que "chovem"/balançam de cima p/ baixo, nas cores da paleta WLC. Decisão Laise 04/07: os guarda-chuvas voltam a ser o divisor ENTRE um capítulo completo e o próximo (onde o neon estava), e o neon migra p/ dentro do capítulo (.v2-neon --intra acima). Cores por token --wlc-* (sem hardcode dos hexes do v1). O balanço/queda respeita prefers-reduced-motion (vira fileira estática abaixo). */ .v2-div { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--v2-gap-tight) 0; text-align: center; } .v2-div__rain { position: relative; width: min(560px, 88vw); height: 280px; overflow: hidden; } .v2-div__rain i { position: absolute; width: 52px; height: 52px; top: 38%; opacity: 1; transform: translateX(-50%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M12 1C6 1 1 6 1 12H23C23 6 18 1 12 1Z' fill='black'/%3E%3Crect x='11' y='12' width='2' height='10' fill='black'/%3E%3Cpath d='M11 22C11 26 15 26 15 23C15 21.5 13.5 21 13 22L11 22Z' fill='black'/%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 28'%3E%3Cpath d='M12 1C6 1 1 6 1 12H23C23 6 18 1 12 1Z' fill='black'/%3E%3Crect x='11' y='12' width='2' height='10' fill='black'/%3E%3Cpath d='M11 22C11 26 15 26 15 23C15 21.5 13.5 21 13 22L11 22Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; animation: v2umbrellaFall 4.5s ease-in infinite; } .v2-div__rain i:nth-child(1) { left: 4%; background-color: var(--wlc-space-cadet); animation-delay: 0s; animation-duration: 4.2s; } .v2-div__rain i:nth-child(2) { left: 13%; background-color: var(--wlc-imperial-red); animation-delay: .7s; animation-duration: 4.8s; } .v2-div__rain i:nth-child(3) { left: 22%; background-color: var(--wlc-chinese-yellow); animation-delay: 1.3s; animation-duration: 4.3s; } .v2-div__rain i:nth-child(4) { left: 31%; background-color: var(--wlc-skobeloff); animation-delay: .4s; animation-duration: 5.0s; } .v2-div__rain i:nth-child(5) { left: 40%; background-color: var(--wlc-terra-cotta); animation-delay: 1.8s; animation-duration: 4.5s; } .v2-div__rain i:nth-child(6) { left: 50%; background-color: var(--wlc-space-cadet); animation-delay: 1.0s; animation-duration: 4.0s; } .v2-div__rain i:nth-child(7) { left: 59%; background-color: var(--wlc-imperial-red); animation-delay: 2.2s; animation-duration: 4.6s; } .v2-div__rain i:nth-child(8) { left: 68%; background-color: var(--wlc-chinese-yellow); animation-delay: .5s; animation-duration: 4.2s; } .v2-div__rain i:nth-child(9) { left: 77%; background-color: var(--wlc-skobeloff); animation-delay: 1.5s; animation-duration: 5.1s; } .v2-div__rain i:nth-child(10) { left: 86%; background-color: var(--wlc-terra-cotta); animation-delay: 2.8s; animation-duration: 4.3s; } .v2-div__rain i:nth-child(11) { left: 10%; background-color: var(--wlc-green-blue); animation-delay: 3.4s; animation-duration: 4.8s; } .v2-div__rain i:nth-child(12) { left: 95%; background-color: var(--wlc-midnight); animation-delay: .9s; animation-duration: 4.5s; } @keyframes v2umbrellaFall { 0% { top: -28%; opacity: 0; transform: translateX(-50%) rotate(-12deg); } 12% { opacity: 1; } 42% { transform: translateX(-50%) rotate(8deg); } 74% { transform: translateX(-50%) rotate(-6deg); } 88% { opacity: 1; } 100% { top: 110%; opacity: 0; transform: translateX(-50%) rotate(10deg); } } /* ══════════════════ 7 · SEÇÃO / RITMO ═══════════════════════════════ */ /* Ritmo vertical tokenizado (Félix 04/07): seções separadas por --v2-gap-section; head→conteúdo por --v2-gap-tight. Sem valores avulsos. */ .v2-sect { padding: var(--v2-gap-section) 0 0; } /* Cabeçalho de seção (Laise 07/07, v2): SÓ o eyebrow vive num badge próprio, um carimbo pill na cor do capítulo com sombra dura e leve inclinação, formato que não existe em nenhum outro componente do caderno. O título fica fora, e com acento/dígito recebe .v2-sans (regra chalk acima). */ .v2-sect__head { text-align: center; margin-bottom: var(--v2-gap-tight); } .v2-sect__head .v2-label { display: inline-flex; justify-content: center; align-items: center; padding: 8px 18px 7px; border-radius: 999px; background: var(--chap-accent); color: var(--chap-on, var(--wlc-white)); box-shadow: 0 3px 0 var(--chap-deep, var(--wlc-space-cadet)); margin-bottom: 16px; } .v2-sect__head .v2-section { margin-bottom: 6px; } .v2-sect__head .v2-section-note { margin-bottom: 0; } /* Título chalk com acento ou número vira Lufga 800 (nunca fallback de fonte) */ .v2 .v2-sans { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.02em; } /* ── stat-tiles com glow ── */ .v2-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 760px; margin: 0 auto 34px; } .v2-stat { background: var(--wlc-cream); border: 1.5px solid var(--wlc-space-cadet); border-radius: 14px; padding: 22px 16px; text-align: center; box-shadow: 5px 5px 0 var(--wlc-space-cadet); } .v2-stat__v { font-family: var(--font-sans); font-weight: 900; font-size: var(--type-chap-title); line-height: 1; letter-spacing: -.02em; color: var(--wlc-space-cadet); } .v2-stat__v em { font-style: normal; color: var(--chap-ink); } .v2-stat__k { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--wlc-ink-70); margin-top: 8px; } @media (max-width: 640px) { .v2-stats { grid-template-columns: 1fr; } } /* ── INFOGRÁFICO SVG · perfil de elevação ── */ .v2-elev { max-width: var(--v2-wide); margin: 0 auto 20px; background: var(--wlc-cream); border: 1.5px solid var(--wlc-space-cadet); border-radius: 16px; box-shadow: 8px 8px 0 var(--wlc-space-cadet); padding: 26px 26px 20px; overflow: hidden; } .v2-elev__svg { display: block; width: 100%; height: auto; } .v2-elev svg text { font-family: var(--font-sans); } /* ── FOTO de elevação com pins (Laise 07/07: mapa ultrarrealista no lugar do diagrama). Pins = badges Lufga posicionados por % sobre a foto; as posições moram inline no HTML porque dependem da imagem gerada. ── */ .v2-elevfoto { position: relative; border-radius: 14px; overflow: hidden; border: 1.5px solid var(--wlc-space-cadet); } .v2-elevfoto img { display: block; width: 100%; height: auto; } /* Marcadores numerados sobre a foto (Laise 07/07: texto nunca cobre a imagem; os nomes vivem no painel numerado abaixo da foto). */ .v2-elevdot { position: absolute; z-index: 2; width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--wlc-space-cadet); color: var(--wlc-white); border: 2px solid var(--wlc-white); box-shadow: 0 3px 10px rgba(36,34,88,.45); font-family: var(--font-sans); font-weight: 800; font-size: 14px; line-height: 1; } @media (max-width: 640px) { .v2-elevdot { width: 22px; height: 22px; font-size: 11px; } } .v2-panel__num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--wlc-space-cadet); color: var(--wlc-white); font-family: var(--font-sans); font-weight: 800; font-size: 12.5px; line-height: 1; } .v2-elev__stops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; } .v2-elev__stop { text-align: center; padding: 14px 10px; border-radius: 12px; background: var(--wlc-white); border: 1px solid var(--wlc-border-warm); border-top: 3px solid var(--chap-accent); } .v2-elev__stop .alt { font-family: var(--font-sans); font-weight: 900; font-size: 22px; line-height: 1; letter-spacing: -.02em; color: var(--wlc-space-cadet); } .v2-elev__stop .place { font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; color: var(--wlc-space-cadet); margin-top: 6px; } .v2-elev__stop .note { font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 1.35; color: var(--wlc-ink-70); margin-top: 4px; } @media (max-width: 640px) { .v2-elev__stops { grid-template-columns: 1fr 1fr; } } /* ── grid de cards (sintomas / prevenção) ── */ .v2-cardgrid { display: grid; gap: 14px; max-width: 820px; margin: 0 auto 24px; } .v2-cardgrid--3 { grid-template-columns: repeat(3, 1fr); } .v2-cardgrid--2 { grid-template-columns: repeat(2, 1fr); } .v2-tile { display: flex; gap: 14px; align-items: flex-start; text-align: left; background: var(--wlc-cream); border: 1px solid var(--wlc-border-warm); border-radius: 14px; border-left: 4px solid var(--chap-accent); padding: 18px 20px; box-shadow: var(--shadow-sm); } .v2-tile__ico { flex: none; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(var(--chap-rgb), .16); color: var(--chap-ink); } .v2-tile__ico svg { width: 22px; height: 22px; } .v2-tile__b h4 { font-family: var(--font-sans); font-weight: 700; font-size: 15.5px; line-height: 1.25; color: var(--wlc-space-cadet); margin: 0 0 4px; } .v2-tile__b p { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--wlc-ink-70); margin: 0; } .v2-tile__n { flex: none; font-family: var(--font-sans); font-weight: 900; font-size: 26px; line-height: 1; color: var(--chap-ink); width: 26px; text-align: center; } @media (max-width: 760px) { .v2-cardgrid--3, .v2-cardgrid--2 { grid-template-columns: 1fr; } } /* chips de sintoma (compactos, sem card) */ .v2-symrow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 720px; margin: 0 auto 24px; } .v2-sym { display: inline-flex; align-items: center; gap: 9px; background: var(--wlc-cream); border: 1px solid var(--wlc-border-warm); border-radius: 999px; padding: 10px 18px; font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--wlc-space-cadet); box-shadow: var(--shadow-sm); } .v2-sym svg { width: 18px; height: 18px; color: var(--chap-ink); } /* ── CALLOUT tipo .rule (bolinha luminosa) ── */ .v2-rule { position: relative; max-width: 720px; margin: 0 auto 24px; text-align: center; background: var(--wlc-cream); border: 1.5px solid var(--wlc-space-cadet); border-radius: 14px; padding: 22px 26px; box-shadow: 0 8px 24px rgba(var(--chap-rgb), .16); } /* Titulo do callout (Laise 07/07 rodada 2): virou um titulo de verdade dentro do componente, maior e na cor do capitulo, pra se diferenciar do corpo. */ .v2-rule__lbl { font-family: var(--font-sans); font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--chap-ink); margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; gap: 10px; } .v2-rule__lbl::before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: var(--chap-accent); box-shadow: 0 0 10px rgba(var(--chap-rgb), .7); flex: none; animation: v2blink 1.4s ease-in-out infinite; } /* bolinha pulsante do rótulo (Laise 07/07: aplicar no caderno inteiro) */ @keyframes v2blink { 0%,100% { opacity: 1; box-shadow: 0 0 10px rgba(var(--chap-rgb), .7); } 50% { opacity: .35; box-shadow: 0 0 4px rgba(var(--chap-rgb), .3); } } @media (prefers-reduced-motion: reduce) { .v2-rule__lbl::before { animation: none; } } .v2-rule p { font-family: var(--font-sans); font-weight: 500; font-size: 15.5px; line-height: 1.5; color: var(--wlc-ink-70); margin: 0; } .v2-rule b { color: var(--wlc-space-cadet); font-weight: 700; } /* ── steps compactos (Valsalva) ── */ .v2-steps { list-style: none; padding: 0; margin: 0 auto 24px; max-width: 720px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .v2-step { text-align: center; background: var(--wlc-cream); border: 1px solid var(--wlc-border-warm); border-radius: 14px; padding: 20px 16px; box-shadow: var(--shadow-sm); } .v2-step__n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--chap-accent); color: var(--wlc-space-cadet); font-family: var(--font-sans); font-weight: 800; font-size: 16px; margin-bottom: 12px; } .v2-step h4 { font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--wlc-space-cadet); margin: 0 0 5px; } .v2-step p { font-family: var(--font-sans); font-weight: 500; font-size: 13.5px; line-height: 1.45; color: var(--wlc-ink-70); margin: 0; } @media (max-width: 640px) { .v2-steps { grid-template-columns: 1fr; } } /* ── ALERTA em bloco COLORIDO (clímax de segurança) ── */ .v2-alert { max-width: 760px; margin: 0 auto 24px; border-radius: 18px; padding: 30px 34px; text-align: left; display: flex; gap: 20px; align-items: flex-start; background: #B02E2F; border: 1.5px solid var(--wlc-space-cadet); box-shadow: 8px 8px 0 #7E2122; color: var(--wlc-alabaster); } /* nota AA (Félix 04/07): fundo escurecido de imperial-red #E74041 → #B02E2F. Mantém a identidade de alerta vermelho, mas sobe o contraste do corpo alabaster@92% de 3,20 → 4,98 e do h4 branco de 4,03 → 6,41 (ambos ≥ AA). */ .v2-alert--navy { background: var(--wlc-space-cadet); box-shadow: 8px 8px 0 #14132E; } .v2-alert--skob { background: var(--wlc-skobeloff); box-shadow: 8px 8px 0 #014E4F; } .v2-alert__ico { flex: none; width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; } .v2-alert__ico svg { width: 26px; height: 26px; color: var(--wlc-alabaster); } .v2-alert__b h4 { font-family: var(--font-sans); font-weight: 800; font-size: 19px; line-height: 1.2; margin: 0 0 8px; color: var(--wlc-white); } .v2-alert__b p { font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 1.55; margin: 0; color: rgba(245,239,232,.92); } .v2-alert__b p b { color: var(--wlc-chinese-yellow); font-weight: 700; } @media (max-width: 560px) { .v2-alert { flex-direction: column; gap: 14px; } } /* ── stamprow (selos de cobertura) ── */ .v2-stamprow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 760px; margin: 0 auto 24px; } .v2-stamp { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 13px; padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow-sm); background: var(--wlc-skobeloff); color: var(--wlc-white); } .v2-stamp svg { width: 17px; height: 17px; } .v2-stamp--skob { background: var(--wlc-skobeloff); color: var(--wlc-white); } .v2-stamp--terra { background: var(--wlc-terra-cotta); color: var(--wlc-white); } .v2-stamp--red { background: var(--wlc-imperial-red); color: var(--wlc-white); } .v2-stamp--navy { background: var(--wlc-space-cadet); color: var(--wlc-white); } /* ── FIGURE de foto real (moldura scrapbook + legenda) ── */ .v2-figure { max-width: 720px; margin: 0 auto 28px; background: var(--wlc-white); border-radius: 4px; padding: 10px 10px 8px; box-shadow: 0 12px 30px rgba(36,34,88,.16); } .v2-figure img { display: block; width: 100%; border-radius: 3px; object-fit: cover; } .v2-figure figcaption { font-family: var(--font-sans); font-weight: 700; font-size: 12px; color: var(--wlc-space-cadet); text-align: center; padding: 10px 6px 6px; } /* ── DICA DA LAÍSE (callout compacto, máx 1/capítulo) ── */ .v2-laise { display: flex; gap: 16px; align-items: flex-start; max-width: 680px; margin: 26px auto; text-align: left; background: var(--wlc-cream); border: 1px solid var(--wlc-border-warm); border-left: 4px solid var(--wlc-chinese-yellow); border-radius: 16px; padding: 20px 24px; box-shadow: var(--shadow-sm); } .v2-laise img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--wlc-chinese-yellow); flex: none; } .v2-laise__who { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--wlc-skobeloff); margin-bottom: 7px; } .v2-laise p { font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--wlc-space-cadet); margin: 0; } .v2-sp { height: var(--v2-gap-tight); } .v2-sp--lg { height: var(--v2-gap-block); } /* ══════════════════ 8 · COMPONENTES LOTE 1 (Félix · cap 01/02/04) ═════ Primitivos que o rollout dos capítulos 01, 02 e 04 exige e que o piloto (cap-03) não precisou. Todos namespaced .v2-*, construídos SÓ com tokens --wlc-* / --chap-*. Reutilizáveis por capítulos futuros (timeline, tabs, checklist, comparador recorrem). Contraste on-accent resolvido por --chap-on (cor do TEXTO sobre superfície preenchida com --chap-accent): cada capítulo o define inline no wrapper — dark accent (skobeloff/green-blue) usa branco; light accent (terra/amarelo) usa navy. Fallback navy. ── */ /* ── stat-tiles: variante de 4 colunas (vn02) ── */ .v2-stats--4 { grid-template-columns: repeat(4, 1fr); max-width: 900px; } @media (max-width: 760px) { .v2-stats--4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 440px) { .v2-stats--4 { grid-template-columns: 1fr; } } /* ── FRAME de imagem (infográfico ilustrado / diagrama / foto real) ── */ .v2-frame { max-width: 640px; margin: 0 auto 24px; background: var(--wlc-cream); border: 1.5px solid var(--wlc-space-cadet); border-radius: 18px; box-shadow: 8px 8px 0 var(--chap-deep); padding: 14px; overflow: hidden; } .v2-frame img { display: block; width: 100%; border-radius: 10px; } .v2-frame figcaption { font-family: var(--font-sans); font-weight: 600; font-size: var(--type-caption); color: var(--wlc-ink-70); text-align: center; padding: 12px 8px 2px; } .v2-frame--tall { max-width: 380px; } .v2-frame--wide { max-width: var(--v2-wide); } /* ── painéis dentro do card de SVG (vn04: pontos + legenda de pistas) ── */ .v2-panelgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; } @media (max-width: 640px) { .v2-panelgrid { grid-template-columns: 1fr; } } .v2-panel { background: var(--wlc-white); border: 1px solid var(--wlc-border-warm); border-radius: 12px; padding: 16px 18px; text-align: left; } .v2-panel__h { font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--chap-ink); margin: 0 0 12px; } .v2-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .v2-panel li { display: flex; gap: 11px; align-items: flex-start; font-family: var(--font-sans); font-size: 14px; line-height: 1.4; color: var(--wlc-space-cadet); } .v2-panel__mk { flex: none; width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(var(--chap-rgb), .15); color: var(--chap-ink); } .v2-panel__mk svg { width: 15px; height: 15px; } .v2-panel__nm { font-weight: 700; display: block; } .v2-panel__meta { color: var(--wlc-ink-70); font-weight: 500; font-size: 13px; } .v2-piste { display: flex; gap: 12px; align-items: center; } .v2-piste__line { flex: none; width: 26px; height: 5px; border-radius: 3px; } /* ── ROTA vertical numerada (vn05 · G-21) ── */ .v2-route { list-style: none; margin: 0 auto 24px; padding: 0; max-width: 620px; position: relative; } .v2-route::before { content: ""; position: absolute; left: 23px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(180deg, var(--chap-accent), rgba(var(--chap-rgb), .2)); } .v2-route li { position: relative; display: flex; gap: 18px; align-items: flex-start; padding: 0 0 20px; } .v2-route li:last-child { padding-bottom: 0; } .v2-route__n { position: relative; z-index: 1; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--chap-accent); color: var(--chap-on, var(--wlc-space-cadet)); border: 2px solid var(--wlc-space-cadet); display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 800; font-size: 18px; box-shadow: var(--shadow-sm); } .v2-route__b { padding-top: 4px; } .v2-route__b h4 { font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--wlc-space-cadet); margin: 0 0 2px; } .v2-route__b p { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--wlc-ink-70); margin: 0; } .v2-route__alt { font-weight: 800; color: var(--chap-ink); } /* ── TIMELINE horizontal (vn06 · dia hora a hora) ── */ .v2-timeline { list-style: none; margin: 0 auto 24px; padding: 0; max-width: var(--v2-wide); display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .v2-timeline li { position: relative; text-align: center; padding-top: 42px; } .v2-timeline li::before { content: ""; position: absolute; top: 15px; left: 0; right: 0; height: 2px; background: rgba(var(--chap-rgb), .4); } .v2-timeline li:first-child::before { left: 50%; } .v2-timeline li:last-child::before { right: 50%; } .v2-timeline__node { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--chap-accent); border: 2px solid var(--wlc-space-cadet); color: var(--chap-on, var(--wlc-space-cadet)); display: flex; align-items: center; justify-content: center; } .v2-timeline__node svg { width: 17px; height: 17px; } .v2-timeline__t { font-family: var(--font-sans); font-weight: 800; font-size: 13px; color: var(--wlc-space-cadet); } .v2-timeline__l { font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 1.3; color: var(--wlc-ink-70); margin-top: 3px; } @media (max-width: 760px) { .v2-timeline { grid-template-columns: 1fr; gap: 0; max-width: 420px; } .v2-timeline li { text-align: left; padding: 0 0 22px 46px; } .v2-timeline li::before { top: 6px; bottom: -6px; left: 15px; right: auto; width: 2px; height: auto; } .v2-timeline li:last-child::before { display: none; } .v2-timeline__node { left: 0; top: 0; transform: none; } } /* ── BANDAS de horário coloridas (vn07 · restrição da estrada) ── */ .v2-bands { max-width: 720px; margin: 0 auto 20px; display: flex; flex-direction: column; gap: 10px; } .v2-bandrow { display: flex; align-items: center; gap: 16px; padding: 15px 20px; border-radius: 14px; border: 1.5px solid var(--wlc-space-cadet); box-shadow: var(--shadow-sm); text-align: left; } .v2-bandrow__ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .v2-bandrow__ico svg { width: 22px; height: 22px; } .v2-bandrow__time { flex: none; width: 128px; font-family: var(--font-sans); font-weight: 800; font-size: 15px; color: var(--wlc-space-cadet); } .v2-bandrow__rule { font-family: var(--font-sans); font-weight: 500; font-size: 14.5px; line-height: 1.4; color: var(--wlc-space-cadet); } .v2-bandrow--up { background: rgba(2,112,113,.12); } .v2-bandrow--up .v2-bandrow__ico { background: var(--wlc-skobeloff); color: var(--wlc-white); } .v2-bandrow--closed { background: rgba(231,64,65,.12); } .v2-bandrow--closed .v2-bandrow__ico { background: var(--wlc-imperial-red); color: var(--wlc-white); } .v2-bandrow--down { background: rgba(252,180,21,.18); } .v2-bandrow--down .v2-bandrow__ico { background: var(--wlc-chinese-yellow); color: var(--wlc-space-cadet); } .v2-bandrow--free { background: rgba(36,34,88,.08); } .v2-bandrow--free .v2-bandrow__ico { background: var(--wlc-space-cadet); color: var(--wlc-white); } @media (max-width: 560px) { .v2-bandrow { flex-wrap: wrap; gap: 10px 16px; } .v2-bandrow__time { width: auto; } .v2-bandrow__rule { flex-basis: 100%; } } /* ── ABAS interativas (vn22 · camadas de roupa) ── */ .v2-tabs { max-width: 760px; margin: 0 auto 24px; } .v2-tabs__list { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .v2-tabs__btn { flex: 1 1 0; min-width: 150px; display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer; background: var(--wlc-cream); border: 1.5px solid var(--wlc-border-warm); border-radius: 12px; padding: 12px 14px; font-family: var(--font-sans); transition: border-color .15s, box-shadow .15s; } .v2-tabs__btn[aria-selected="true"] { border-color: var(--chap-accent); box-shadow: inset 0 0 0 1px var(--chap-accent), var(--shadow-sm); } .v2-tabs__dot { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--chap-accent); color: var(--chap-on, var(--wlc-space-cadet)); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; } .v2-tabs__lbl { display: flex; flex-direction: column; } .v2-tabs__kick { font-weight: 800; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--chap-ink); } .v2-tabs__name { font-weight: 700; font-size: 13.5px; color: var(--wlc-space-cadet); line-height: 1.2; } .v2-tabs__panel { background: var(--wlc-cream); border: 1.5px solid var(--wlc-space-cadet); border-radius: 16px; box-shadow: 6px 6px 0 var(--chap-deep); padding: 24px 26px; text-align: left; } .v2-tabs__panel[hidden] { display: none; } .v2-tabs__panel h4 { font-family: var(--font-sans); font-weight: 800; font-size: 18px; color: var(--wlc-space-cadet); margin: 0 0 10px; } .v2-tabs__panel p { font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 1.55; color: var(--wlc-ink-70); margin: 0 0 14px; } .v2-tabs__panel p b { color: var(--wlc-space-cadet); font-weight: 700; } .v2-tabs__chips { display: flex; flex-wrap: wrap; gap: 8px; } .v2-tabs__chips span { font-family: var(--font-sans); font-weight: 600; font-size: 12.5px; padding: 6px 13px; border-radius: 999px; background: rgba(var(--chap-rgb), .14); border: 1px solid rgba(var(--chap-rgb), .4); color: var(--chap-ink); } /* ── CHECKLIST interativo com barra de progresso (vn23) ── */ .v2-check { max-width: 720px; margin: 0 auto 24px; background: var(--wlc-cream); border: 1.5px solid var(--wlc-space-cadet); border-radius: 18px; box-shadow: 8px 8px 0 var(--chap-deep); padding: 24px 26px; text-align: left; } .v2-check__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .v2-check__lbl { font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--chap-ink); display: inline-flex; gap: 8px; align-items: center; } .v2-check__lbl svg { width: 16px; height: 16px; } .v2-check__count { font-family: var(--font-sans); font-weight: 500; font-size: 13px; color: var(--wlc-ink-70); } .v2-check__count strong { color: var(--wlc-space-cadet); font-weight: 800; font-size: 16px; } .v2-check__track { height: 10px; border-radius: 999px; background: rgba(36,34,88,.1); overflow: hidden; margin-bottom: 6px; } .v2-check__fill { height: 100%; width: 0; border-radius: 999px; background: var(--chap-accent); transition: width .35s cubic-bezier(.2,.7,.2,1); } .v2-check__hint { font-family: var(--font-sans); font-weight: 500; font-size: 13px; color: var(--wlc-ink-70); margin: 0 0 18px; } .v2-check__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 640px) { .v2-check__list { grid-template-columns: 1fr; } } .v2-check__item button { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; cursor: pointer; background: var(--wlc-white); border: 1px solid var(--wlc-border-warm); border-radius: 12px; padding: 12px 14px; font-family: var(--font-sans); transition: border-color .15s, background .15s; } .v2-check__box { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--wlc-space-cadet); display: flex; align-items: center; justify-content: center; background: transparent; } .v2-check__box svg { width: 15px; height: 15px; opacity: 0; } .v2-check__item button[aria-pressed="true"] { background: rgba(var(--chap-rgb), .08); border-color: var(--chap-accent); } .v2-check__item button[aria-pressed="true"] .v2-check__box { background: var(--chap-accent); border-color: var(--chap-accent); color: var(--chap-on, var(--wlc-space-cadet)); } .v2-check__item button[aria-pressed="true"] .v2-check__box svg { opacity: 1; } .v2-check__item button[aria-pressed="true"] .v2-check__name { text-decoration: line-through; color: var(--wlc-ink-70); } .v2-check__nm { display: flex; flex-direction: column; } .v2-check__name { font-weight: 700; font-size: 14px; color: var(--wlc-space-cadet); line-height: 1.3; } .v2-check__sub { font-weight: 500; font-size: 12.5px; color: var(--wlc-ink-70); line-height: 1.35; margin-top: 2px; } .v2-check__foot { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--wlc-border-warm); } .v2-check__foot svg { flex: none; width: 20px; height: 20px; color: var(--chap-ink); margin-top: 2px; } .v2-check__foot p { font-family: var(--font-sans); font-weight: 500; font-size: 13.5px; line-height: 1.5; color: var(--wlc-ink-70); margin: 0; } .v2-check__foot b { color: var(--wlc-space-cadet); font-weight: 700; } /* ── COMPARADOR de duas opções (vn24 alugar/comprar · vn25 tênis/bota) ── */ .v2-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 820px; margin: 0 auto 24px; } @media (max-width: 640px) { .v2-compare { grid-template-columns: 1fr; } } .v2-compare__card { position: relative; background: var(--wlc-cream); border: 1.5px solid var(--wlc-space-cadet); border-radius: 16px; padding: 24px 22px; box-shadow: 5px 5px 0 var(--wlc-space-cadet); text-align: left; } .v2-compare__card--good { box-shadow: 5px 5px 0 var(--chap-deep); border-color: var(--chap-accent); } .v2-compare__badge { position: absolute; top: -11px; left: 20px; font-family: var(--font-sans); font-weight: 800; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--chap-accent); color: var(--chap-on, var(--wlc-space-cadet)); border: 1.5px solid var(--wlc-space-cadet); } .v2-compare__head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } .v2-compare__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(var(--chap-rgb), .14); color: var(--chap-ink); } .v2-compare__ico svg { width: 24px; height: 24px; } .v2-compare__ico--bad { background: rgba(231,64,65,.12); color: var(--wlc-imperial-red); } .v2-compare__kick { font-family: var(--font-sans); font-weight: 800; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--wlc-ink-70); } .v2-compare__name { font-family: var(--font-sans); font-weight: 800; font-size: 17px; color: var(--wlc-space-cadet); line-height: 1.15; margin-top: 2px; } .v2-compare__price { font-family: var(--font-sans); font-weight: 900; font-size: 22px; color: var(--wlc-space-cadet); margin-bottom: 2px; } .v2-compare__pricesub { font-family: var(--font-sans); font-weight: 500; font-size: 12.5px; color: var(--wlc-ink-70); margin-bottom: 14px; display: block; line-height: 1.35; } .v2-compare__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .v2-compare__list li { display: flex; gap: 11px; align-items: flex-start; font-family: var(--font-sans); font-size: 14px; line-height: 1.4; color: var(--wlc-space-cadet); } .v2-compare__list li b { font-weight: 700; } .v2-compare__mk { flex: none; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .v2-compare__mk svg { width: 13px; height: 13px; } .v2-compare__mk--ok { background: var(--wlc-skobeloff); color: var(--wlc-white); } .v2-compare__mk--no { background: var(--wlc-imperial-red); color: var(--wlc-white); } .v2-compare__mk--warn { background: var(--wlc-chinese-yellow); color: var(--wlc-space-cadet); } .v2-compare__tag { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; color: var(--chap-ink); } .v2-compare__tag svg { width: 16px; height: 16px; } /* ── nota-selo (badge + texto) reaproveitável (vn25 "dica de ouro") ── */ .v2-goldnote { max-width: 720px; margin: 0 auto 24px; background: var(--wlc-cream); border: 1px solid var(--wlc-border-warm); border-left: 4px solid var(--chap-accent); border-radius: 14px; padding: 18px 22px; display: flex; gap: 14px; align-items: center; text-align: left; box-shadow: var(--shadow-sm); } .v2-goldnote__badge { flex: none; font-family: var(--font-sans); font-weight: 800; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: var(--chap-accent); color: var(--chap-on, var(--wlc-space-cadet)); } .v2-goldnote p { font-family: var(--font-sans); font-weight: 500; font-size: 14.5px; line-height: 1.5; color: var(--wlc-ink-70); margin: 0; } .v2-goldnote b { color: var(--wlc-space-cadet); font-weight: 700; } /* ══════════════════ 9 · COMPONENTES LOTE 4 · CAUDA (Félix · cap-quando/ cap-docs/faq/quem-assina/cta) ═════════════════════════════════════════ Portados de vn19/20/21 (cap-quando), vn28/29 (cap-docs), vn33 (faq) + bloco de assinatura da Laíse e CTA final ÚNICO. Só tokens --wlc-*/--chap-*. Texto sobre superfície accent usa --chap-on (convenção do lote 1). */ /* ── vn20 · abas de mês (interativo, "qual mês combina") ────────────── */ .v2-months { max-width: var(--v2-wide); margin: 0 auto 24px; } .v2-months__tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0 0 16px; } .v2-mtab { cursor: pointer; text-align: center; background: var(--wlc-cream); border: 1.5px solid var(--wlc-border-warm); border-radius: 14px; padding: 14px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .14s, box-shadow .14s, border-color .14s; font-family: var(--font-sans); color: var(--wlc-space-cadet); } .v2-mtab svg { width: 24px; height: 24px; color: var(--chap-ink); } .v2-mtab__name { font-weight: 800; font-size: 15px; line-height: 1; } .v2-mtab__tag { font-weight: 600; font-size: 11px; line-height: 1.2; color: var(--wlc-ink-70); } .v2-mtab[aria-selected="true"] { background: var(--chap-accent); border-color: var(--wlc-space-cadet); color: var(--chap-on, var(--wlc-white)); box-shadow: 5px 5px 0 var(--chap-deep); transform: translate(-1px, -1px); } .v2-mtab[aria-selected="true"] svg, .v2-mtab[aria-selected="true"] .v2-mtab__tag { color: var(--chap-on, var(--wlc-white)); opacity: .88; } .v2-mtab--best { position: relative; } .v2-mtab--best::after { content: "★"; position: absolute; top: -8px; right: -6px; width: 22px; height: 22px; line-height: 22px; border-radius: 50%; background: var(--wlc-chinese-yellow); color: var(--wlc-space-cadet); font-size: 12px; box-shadow: var(--shadow-sm); } .v2-mpanel { background: var(--wlc-cream); border: 1.5px solid var(--wlc-space-cadet); border-radius: 18px; box-shadow: 8px 8px 0 var(--chap-deep); padding: 26px 30px 28px; } .v2-mpanel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; } .v2-mpanel__month { font-family: var(--font-sans); font-weight: 900; font-size: 26px; letter-spacing: -.02em; color: var(--wlc-space-cadet); margin: 0; } .v2-mbadge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-weight: 700; font-size: 12px; padding: 6px 13px; border-radius: 999px; background: rgba(var(--chap-rgb), .14); border: 1px solid rgba(var(--chap-rgb), .4); color: var(--chap-ink); } .v2-mbadge svg { width: 15px; height: 15px; } .v2-mstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 16px; } .v2-mstat { background: var(--wlc-white); border: 1px solid var(--wlc-border-warm); border-radius: 12px; border-top: 3px solid var(--chap-accent); padding: 14px 14px 15px; text-align: left; } .v2-mstat__k { display: flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--wlc-ink-70); margin: 0 0 8px; } .v2-mstat__k svg { width: 15px; height: 15px; color: var(--chap-ink); } .v2-mstat__v { font-family: var(--font-sans); font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--wlc-space-cadet); } .v2-mrec { display: flex; gap: 13px; align-items: flex-start; background: var(--wlc-white); border: 1px solid var(--wlc-border-warm); border-left: 4px solid var(--chap-accent); border-radius: 12px; padding: 15px 18px; } .v2-mrec svg { flex: none; width: 22px; height: 22px; color: var(--chap-ink); margin-top: 2px; } .v2-mrec__k { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--wlc-skobeloff); margin-bottom: 5px; } .v2-mrec p { font-family: var(--font-sans); font-weight: 500; font-size: 14.5px; line-height: 1.5; color: var(--wlc-space-cadet); margin: 0; } .v2-mpanel.v2-fade { animation: v2mfade .32s ease; } @keyframes v2mfade { from { opacity: .25; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (max-width: 760px) { .v2-months__tabs { grid-template-columns: repeat(2, 1fr); } .v2-mstats { grid-template-columns: 1fr; } } /* ── vn21 · comparação dia de semana × fim de semana ────────────────── */ .v2-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 880px; margin: 0 auto 24px; } .v2-vscard { background: var(--wlc-cream); border: 1.5px solid var(--wlc-space-cadet); border-radius: 16px; padding: 22px 24px 24px; box-shadow: 6px 6px 0 var(--wlc-space-cadet); } .v2-vscard--go { border-left: 6px solid var(--wlc-skobeloff); } .v2-vscard--stop { border-left: 6px solid var(--wlc-terra-cotta); } .v2-vsbadge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin: 0 0 12px; } .v2-vsbadge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; } .v2-vsbadge--go { background: rgba(2,112,113,.14); color: var(--wlc-skobeloff); } .v2-vsbadge--go::before { background: var(--wlc-skobeloff); box-shadow: 0 0 8px rgba(2,112,113,.7); } .v2-vsbadge--stop { background: rgba(235,105,82,.18); color: #B6472F; } .v2-vsbadge--stop::before { background: var(--wlc-terra-cotta); box-shadow: 0 0 8px rgba(235,105,82,.7); } .v2-vscard__title { font-family: var(--font-sans); font-weight: 800; font-size: 19px; letter-spacing: -.01em; color: var(--wlc-space-cadet); margin: 0 0 4px; } .v2-vscard__tag { font-family: var(--font-sans); font-weight: 600; font-size: 13px; margin: 0 0 16px; } .v2-vscard--go .v2-vscard__tag { color: var(--wlc-skobeloff); } .v2-vscard--stop .v2-vscard__tag { color: #B6472F; } .v2-vslist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .v2-vsitem { display: flex; gap: 11px; align-items: flex-start; } .v2-vsitem svg { flex: none; width: 20px; height: 20px; margin-top: 1px; } .v2-vscard--go .v2-vsitem svg { color: var(--wlc-skobeloff); } .v2-vscard--stop .v2-vsitem svg { color: var(--wlc-terra-cotta); } .v2-vsitem span { font-family: var(--font-sans); font-weight: 500; font-size: 14.5px; line-height: 1.45; color: var(--wlc-ink-70); } .v2-vsitem b { color: var(--wlc-space-cadet); font-weight: 700; } @media (max-width: 760px) { .v2-vs { grid-template-columns: 1fr; } } /* ── vn28 · documentos (hero "RG resolve" + checklist interativo) ────── */ .v2-doc { display: grid; grid-template-columns: 1fr 1.05fr; gap: 16px; max-width: 900px; margin: 0 auto 24px; } .v2-dochero { background: var(--chap-accent); border: 1.5px solid var(--wlc-space-cadet); border-radius: 18px; box-shadow: 8px 8px 0 var(--chap-deep); padding: 26px 28px 28px; color: var(--chap-on, var(--wlc-white)); } .v2-dochero__badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.5); color: var(--chap-on, var(--wlc-white)); margin: 0 0 16px; } .v2-dochero__badge svg { width: 15px; height: 15px; } /* M5 (fix QA Vera 04/07): __big é um

, então a regra legada `p{color:navy}` vencia a cor do container .v2-dochero e pintava "RG resolve!" de navy sobre green-blue (2.42, reprova até texto grande). Cor explícita alabaster: 5.26 no green-blue do cap-docs (o único capítulo que usa o dochero). */ .v2-dochero__big { font-family: var(--font-sans); font-weight: 900; font-size: clamp(30px, 4.5vw, 42px); line-height: 1; letter-spacing: -.02em; margin: 0 0 12px; color: var(--wlc-alabaster); } .v2-dochero__sub { font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 1.5; color: rgba(245,239,232,.9); margin: 0 0 18px; } .v2-dochero__note { display: flex; gap: 11px; align-items: flex-start; background: rgba(255,255,255,.12); border-radius: 12px; padding: 13px 15px; } .v2-dochero__note svg { flex: none; width: 20px; height: 20px; color: var(--wlc-chinese-yellow); margin-top: 1px; } .v2-dochero__note p { font-family: var(--font-sans); font-weight: 500; font-size: 13.5px; line-height: 1.45; color: rgba(245,239,232,.92); margin: 0; } .v2-dochero__note b { color: var(--wlc-chinese-yellow); font-weight: 700; } .v2-docchecks { background: var(--wlc-cream); border: 1.5px solid var(--wlc-space-cadet); border-radius: 18px; box-shadow: 8px 8px 0 var(--wlc-space-cadet); padding: 22px 24px 20px; } .v2-docchecks__head { font-family: var(--font-sans); font-weight: 800; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--wlc-skobeloff); margin: 0 0 14px; } .v2-docitem { width: 100%; text-align: left; cursor: pointer; display: flex; gap: 13px; align-items: flex-start; background: var(--wlc-white); border: 1px solid var(--wlc-border-warm); border-radius: 12px; padding: 14px 16px; margin: 0 0 10px; transition: border-color .14s, background .14s; font-family: var(--font-sans); } .v2-docitem__box { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--wlc-ink-70); display: flex; align-items: center; justify-content: center; color: var(--chap-on, var(--wlc-white)); margin-top: 1px; } .v2-docitem__box svg { width: 15px; height: 15px; opacity: 0; } .v2-docitem[aria-pressed="true"] { border-color: var(--chap-accent); background: rgba(var(--chap-rgb), .06); } .v2-docitem[aria-pressed="true"] .v2-docitem__box { background: var(--chap-accent); border-color: var(--chap-accent); } .v2-docitem[aria-pressed="true"] .v2-docitem__box svg { opacity: 1; } .v2-docitem__b { text-align: left; } .v2-docitem__t { font-family: var(--font-sans); font-weight: 700; font-size: 14.5px; color: var(--wlc-space-cadet); margin: 0 0 3px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .v2-docitem__chip { font-family: var(--font-sans); font-weight: 700; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(var(--chap-rgb), .16); color: var(--chap-ink); } .v2-docitem__d { font-family: var(--font-sans); font-weight: 500; font-size: 13.5px; line-height: 1.45; color: var(--wlc-ink-70); margin: 0; } .v2-doccount { font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--wlc-ink-70); text-align: right; margin: 12px 2px 0; } .v2-doccount b { color: var(--chap-ink); font-weight: 800; } @media (max-width: 760px) { .v2-doc { grid-template-columns: 1fr; } } /* ── vn29 · linha do tempo de preparação (VERTICAL — não colide com a .v2-timeline horizontal do vn06) ──────────────────────────────────── */ .v2-prep { list-style: none; margin: 0 auto 24px; padding: 0; max-width: 760px; position: relative; } .v2-prep::before { content: ""; position: absolute; left: 21px; top: 12px; bottom: 30px; width: 2px; background: rgba(var(--chap-rgb), .35); } .v2-prep__step { position: relative; display: flex; gap: 18px; align-items: flex-start; padding: 0 0 18px 0; } .v2-prep__node { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--chap-accent); border: 2px solid var(--wlc-space-cadet); display: flex; align-items: center; justify-content: center; z-index: 1; box-shadow: var(--shadow-sm); } .v2-prep__node svg { width: 22px; height: 22px; color: var(--chap-on, var(--wlc-white)); } .v2-prep__card { flex: 1; background: var(--wlc-cream); border: 1px solid var(--wlc-border-warm); border-radius: 14px; padding: 16px 20px 18px; box-shadow: var(--shadow-sm); } .v2-prep__when { display: inline-block; font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: rgba(var(--chap-rgb), .14); color: var(--chap-ink); margin: 0 0 10px; } .v2-prep__h { font-family: var(--font-sans); font-weight: 800; font-size: 16.5px; color: var(--wlc-space-cadet); margin: 0 0 5px; } .v2-prep__d { font-family: var(--font-sans); font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--wlc-ink-70); margin: 0 0 12px; } .v2-prep__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .v2-prep__chips li { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 600; font-size: 12.5px; color: var(--wlc-space-cadet); background: var(--wlc-white); border: 1px solid var(--wlc-border-warm); border-radius: 999px; padding: 6px 12px; } .v2-prep__chips svg { width: 15px; height: 15px; color: var(--chap-ink); } /* ── vn33 · FAQ acordeão (nativo

) ─────────────────────────── */ .v2-faq { max-width: 780px; margin: 0 auto 24px; display: flex; flex-direction: column; gap: 12px; } .v2-faqcard { background: var(--wlc-cream); border: 1.5px solid var(--wlc-border-warm); border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .14s; } .v2-faqcard[open] { border-color: var(--chap-accent); } .v2-faqq { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 13px; padding: 18px 20px; font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--wlc-space-cadet); } .v2-faqq::-webkit-details-marker { display: none; } .v2-faqq__ic { flex: none; width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--chap-rgb), .14); color: var(--chap-ink); display: flex; align-items: center; justify-content: center; } .v2-faqq__ic svg { width: 20px; height: 20px; } .v2-faqq__tx { flex: 1; line-height: 1.3; } .v2-faqq__chev { flex: none; color: var(--chap-ink); transition: transform .25s ease; display: flex; } .v2-faqcard[open] .v2-faqq__chev { transform: rotate(180deg); } .v2-faqa { padding: 0 20px 20px 71px; } .v2-faqa p { font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 1.55; color: var(--wlc-ink-70); margin: 0 0 12px; } .v2-faqa b { color: var(--wlc-space-cadet); font-weight: 700; } .v2-faqtag { display: inline-flex; align-items: center; font-family: var(--font-sans); font-weight: 700; font-size: 12px; padding: 6px 13px; border-radius: 999px; background: rgba(var(--chap-rgb), .14); color: var(--chap-ink); } .v2-faqtag--warn { background: rgba(231,64,65,.14); color: #B6472F; } .v2-faqtag--info { background: rgba(33,100,174,.14); color: var(--wlc-green-blue); } .v2-faqnote { display: flex; gap: 12px; align-items: center; max-width: 780px; margin: 0 auto; background: var(--wlc-cream); border: 1px solid var(--wlc-border-warm); border-radius: 14px; padding: 16px 20px; } .v2-faqnote svg { flex: none; width: 22px; height: 22px; color: var(--chap-ink); } .v2-faqnote p { font-family: var(--font-sans); font-weight: 500; font-size: 14.5px; line-height: 1.45; color: var(--wlc-space-cadet); margin: 0; } @media (max-width: 560px) { .v2-faqa { padding-left: 20px; } } /* ── bloco de assinatura da Laíse (encerramento) ────────────────────── */ .v2-sign { position: relative; max-width: 820px; margin: 0 auto 30px; overflow: hidden; background: var(--wlc-space-cadet); border-radius: var(--radius-modal); box-shadow: var(--shadow-lg); padding: 52px 48px 44px; } .v2-sign__quote { position: absolute; top: -34px; left: 24px; font-family: var(--font-chalk); font-weight: 400; font-size: 190px; line-height: 1; color: rgba(252,180,21,.20); pointer-events: none; user-select: none; z-index: 0; } .v2-sign > * { position: relative; z-index: 1; } .v2-sign__eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--wlc-chinese-yellow); margin: 0 0 22px; } .v2-sign__stmt { font-family: var(--font-sans); font-weight: 700; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.35; letter-spacing: -.015em; color: #F5EFE8; margin: 0 0 26px; max-width: 46ch; text-wrap: balance; } .v2-sign__bio { font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 1.6; color: rgba(245,239,232,.74); margin: 0 0 26px; max-width: 54ch; } .v2-sign__by { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .v2-sign__by img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--wlc-chinese-yellow); flex: none; } .v2-sign__name { font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: #F5EFE8; line-height: 1.2; } .v2-sign__role { font-family: var(--font-sans); font-weight: 500; font-size: 13px; color: rgba(245,239,232,.6); line-height: 1.2; } .v2-sign__badges { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; } .v2-sign__badges span { font-family: var(--font-sans); font-weight: 600; font-size: 12px; padding: 7px 14px; border-radius: 999px; } .v2-sign__badges .b-y { background: rgba(252,180,21,.16); border: 1px solid rgba(252,180,21,.4); color: var(--wlc-chinese-yellow); } .v2-sign__badges .b-r { background: rgba(231,64,65,.16); border: 1px solid rgba(231,64,65,.4); color: #ff8a8a; } @media (max-width: 560px) { .v2-sign { padding: 44px 26px 34px; } .v2-sign__badges { margin-left: 0; } } /* ── CTA final (ÚNICO — regra não negociável do caderno) ─────────────── */ .v2-cta { position: relative; max-width: 760px; margin: 0 auto 24px; overflow: hidden; text-align: center; background: var(--wlc-space-cadet); border-radius: var(--radius-modal); box-shadow: 10px 10px 0 #14132E; padding: 46px 40px 44px; } .v2-cta__circ { position: absolute; top: -70px; right: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--chap-rgb),.4) 0%, rgba(var(--chap-rgb),0) 70%); pointer-events: none; } .v2-cta > * { position: relative; z-index: 1; } .v2-cta__eyebrow { font-family: var(--font-sans); font-weight: 800; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--wlc-chinese-yellow); margin: 0 0 16px; } .v2-cta__stmt { font-family: var(--font-sans); font-weight: 800; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; letter-spacing: -.02em; color: #F5EFE8; margin: 0 auto 16px; max-width: 20ch; text-wrap: balance; } .v2-cta__sub { font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 1.6; color: rgba(245,239,232,.78); margin: 0 auto 26px; max-width: 52ch; } /* M4 (fix QA Vera 04/07): branco sobre imperial-red = 4.03 → reprova texto normal. Preservamos o vermelho da marca (CTA primário) e subimos a fonte de 17px para 19px mantendo o peso 800: ≥18.66px bold qualifica como TEXTO GRANDE (limiar AA 3.0), e 4.03 passa com folga. */ .v2-cta__btn { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-sans); font-weight: 800; font-size: 19px; text-decoration: none; background: var(--wlc-imperial-red); color: var(--wlc-white); padding: 16px 32px; border-radius: 999px; box-shadow: 5px 5px 0 #8E2020; transition: transform .14s, box-shadow .14s; } .v2-cta__btn svg { width: 22px; height: 22px; } .v2-cta__btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #8E2020; } .v2-cta__handle { font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: .04em; color: rgba(245,239,232,.62); margin: 20px 0 0; } .v2-footer { text-align: center; font-family: var(--font-sans); font-weight: 500; font-size: 13px; line-height: 1.7; color: var(--wlc-ink-70); padding: 30px 20px 48px; } .v2-footer strong { color: var(--wlc-space-cadet); font-weight: 800; } /* ── previa: rotulo "menu" colado no lead (picker Laise 07/07) ── */ .v2-previa__head { margin-bottom: 6px; } .v2-previa__head .v2-label { margin-bottom: 0; } /* ── LIGHTBOX global de imagens (Laise 07/07: clicar na imagem e expandir) ── */ /* REDESIGN ESTRUTURAL 2026-07-09 (Felix): .v2-gal__grid (aba Galeria, 00b-sidedrawer.html) e .v2-blog-entry__gallery (entradas de blog, 70-blog-*.html) somam-se a lista de containers cujo cursor sinaliza "clicavel para ampliar", reutilizando a MESMA lightbox global (nenhuma lightbox nova foi criada). O handler de clique correspondente em 90-scripts.html tambem ganhou esses dois seletores (unica linha tocada fora do escopo desta sessao, ver comentario la mesmo). */ .v2-frame img, .v2-figure img, .c8-trio img, .c10-gal img, .v2-elevfoto img, .c5rest__photo img, .v2-gal__grid img, .v2-blog-entry__gallery img { cursor: zoom-in; } .v2-lightbox { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 14px; background: rgba(27,25,60,.9); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 4vh 4vw; cursor: zoom-out; } .v2-lightbox.open { display: flex; } .v2-lightbox img { max-width: 94vw; max-height: 82vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); } .v2-lightbox figcaption { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: #F5EFE8; text-align: center; max-width: 70ch; } .v2-lightbox__close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); background: rgba(255,255,255,.12); color: #fff; font-size: 19px; line-height: 1; cursor: pointer; } /* ══════════════════════════════════════════════════════════════════════ REDESIGN ESTRUTURAL 2026-07-09 (Felix) · placeholders de contribuicao comunitaria (A6). Classes reservadas e estilizadas, mas INERTES: nenhum JS de logica as usa ainda. .v2-contrib-mount ja esta em producao (span vazio apos cada h3.v2-section, ver MANIFEST.md); .v2-contrib-avatarrow e .v2-contrib-panel ficam prontas para quando uma sessao futura implementar a leitura de data-contrib-slot e a abertura do painel. ══════════════════════════════════════════════════════════════════════ */ .v2-contrib-mount { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 6px; vertical-align: middle; cursor: default; /* nao clicavel ainda: sem logica associada */ } .v2-contrib-avatarrow { display: inline-flex; align-items: center; } .v2-contrib-avatarrow img, .v2-contrib-avatarrow span { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--wlc-white); background: var(--wlc-border-warm); margin-left: -8px; object-fit: cover; } .v2-contrib-avatarrow img:first-child, .v2-contrib-avatarrow span:first-child { margin-left: 0; } .v2-contrib-panel { position: fixed; top: 0; right: -100%; width: min(420px, 92vw); height: 100dvh; background: var(--v2-page-bg); z-index: 8200; display: flex; flex-direction: column; border-left: 1.5px solid var(--wlc-space-cadet); box-shadow: -10px 0 48px rgba(36,34,88,.30); transition: right .34s cubic-bezier(.4,0,.2,1); } .v2-contrib-panel.open { right: 0; } .v2-contrib-panel__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1.5px solid var(--wlc-border-warm); } .v2-contrib-panel__title { font-family: var(--font-sans); font-weight: 800; font-size: var(--type-label); letter-spacing: .18em; text-transform: uppercase; color: var(--wlc-space-cadet); margin: 0; } .v2-contrib-panel__close { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--wlc-space-cadet); background: var(--wlc-cream); color: var(--wlc-space-cadet); font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: .5; cursor: not-allowed; /* disabled: painel ainda sem logica de abrir/fechar */ } .v2-contrib-panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 30px; } @media (prefers-reduced-motion: reduce) { .v2-contrib-panel { transition: none !important; } }