/* ========================================================================== Vértice White Label · tokens ÂNCORA DE SENSAÇÃO: estrutura silenciosa e portante. A página tem que parecer uma fundação. Peso, base, carga. Zero ornamento. Sem sombra flutuante. Profundidade por borda e superfície. O único elemento vivo em toda a tela é o ponto verde do parceiro. Se uma decisão não serve a essa âncora, ela sai. Direção: Minimalism & Swiss Style, página clara com blocos invertidos. Cor e posicionamento: Brandbook Vértice White Label, seções 10 e 04. Layout, ritmo e escala: critérios do cliente mais renda-site-designer. ========================================================================== */ /* --- Poppins: a marca. Pesos extremos, 300 e 800, como contraste principal. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/poppins-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/poppins-300-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/poppins-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/poppins-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/poppins-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/poppins-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/poppins-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/poppins-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --- JetBrains Mono: só o registro técnico. Um peso, 400. Norma, arquivo legal, prazo, domínio, dado de tabela. Nunca em título, nunca em texto corrido, nunca em negrito: peso alto destrói o caráter da mono. Licença OFL, servida local. */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ==== primitivos de cor. Tabela fechada do brandbook. ================= */ --lime-200: #E2F2BA; --lime-400: #BFF73B; --lime-600: #A7E90A; --lime-700: #85BA08; --lime-900: #435D04; --azul-300: #C3CEE9; --azul-500: #5D8AD5; --azul-700: #25479D; --azul-800: #1E3E74; --azul-950: #0C1733; --n-100: #F7F7F7; --n-300: #D6D6D6; --n-500: #999999; --n-700: #616161; --n-950: #1C1C1C; --ambar: #FFB020; --coral: #FF6B4A; --sucesso: #3DD68C; /* Papel do modo claro, seção 10 do brandbook. */ --papel: #F7F8F5; /* Sinais em versão texto. O âmbar, o coral e o verde de sucesso do brandbook são cor de PREENCHIMENTO: sobre papel dão 1.9:1, 2.8:1 e 1.9:1 e reprovam como texto. Estes são os mesmos sinais rebaixados até passar 4.5:1, e só entram onde o sinal é palavra ou ícone. */ --ambar-txt: #8A5B00; /* 5.87:1 no branco */ --coral-txt: #C0341A; /* 5.60:1 no branco */ --sucesso-txt: #0F7A4A; /* 5.38:1 no branco */ /* ====================================================================== SEMÂNTICOS · TEMA CLARO, que é o padrão da página. Receita do brandbook, seção 10: papel dominante, card em branco puro, e o azul entrando como BLOCO INVERTIDO dentro da página clara. O motivo do bloco invertido não é estético, é de contraste: o lime #A7E90A sobre papel dá 1.38:1, e o próprio brandbook o declara tecnicamente ilegível e o proíbe. No claro não existe texto verde: o acento de texto é azul (ver --acento, abaixo). O lime da marca continua vivo, em cheio, dentro dos blocos escuros e como preenchimento de botão. ====================================================================== */ --fundo: var(--papel); --fundo-2: #FFFFFF; --fundo-3: var(--azul-950); /* Profundidade é borda, não sombra. Três degraus de linha estrutural. */ --borda: #E4E6E0; --borda-media: #D3D6CD; --borda-forte: #ADB1A6; /* Contorno de COMPONENTE INTERATIVO. WCAG 1.4.11 pede 3:1. No claro quem passa é n-700: 5.81:1 no papel e 6.19:1 no card. Campo, botão secundário, aba e hambúrguer usam este, nunca --borda-*. */ --borda-interativa: var(--n-700); /* A hierarquia vem de peso, escala e da mono, nunca de rebaixar a cor. */ --txt: var(--n-950); /* 15.99:1 no papel */ --txt-2: #3D3D3D; /* 10.2:1. Não é cinza de rebaixamento, é leitura */ --txt-azul: #E4E9F2; /* SÓ dentro de bloco azul escuro. Nunca no papel */ /* Decorativo apenas: linha, ponto, marcador. NUNCA em texto. */ --txt-3: var(--n-500); /* Acento em duas camadas, que é o que torna o tema claro possível. --acento cor de TEXTO, ícone e linha. Muda com o tema. --acento-fundo cor de PREENCHIMENTO. É sempre o lime da marca. No claro o acento de TEXTO é AZUL, não verde. O lime cheio dá 1.38:1 no papel e reprova; o lime-900 passa no contraste mas lê como verde-oliva, que não é a identidade. O azul-700 é cor de marca, dá 7.99:1 no papel e 8.51:1 no card, e devolve cor ao site sem inventar tom nenhum. Decisão do cliente. O lime continua vivo em dois lugares: preenchimento (botão, ponto) e qualquer coisa dentro de bloco invertido. */ --acento: var(--azul-700); /* 7.99:1 no papel, 8.51:1 no card */ --acento-hover: var(--azul-800); /* 9.87:1 */ --acento-press: var(--azul-950); --acento-fundo: var(--lime-600); --acento-fundo-hover: var(--lime-400); --acento-fundo-press: var(--lime-700); /* Botão sem fio, decisão do cliente. Registrado: sem o contorno, o LIMITE do botão lime sobre papel fica em 1.38:1 e não atende a WCAG 1.4.11. O texto dentro dele passa com folga (11.61:1), então o rótulo é legível; o que não se distingue do papel é a borda da pílula. */ --acento-contorno: transparent; --sobre-acento: var(--n-950); /* Sinais: texto e ícone usam a versão rebaixada, preenchimento usa a cor cheia do brandbook. */ --sinal-ok: var(--sucesso-txt); --sinal-aviso: var(--ambar-txt); --sinal-erro: var(--coral-txt); /* Lavagens e superfícies de estado. */ --lavagem-acento: rgba(37, 71, 157, 0.05); --hover-superficie: rgba(28, 28, 28, 0.04); --acento-linha: rgba(37, 71, 157, 0.28); --linha-grade: rgba(28, 28, 28, 0.055); --holofote: rgba(37, 71, 157, 0.07); /* O ponto verde é 9px. No papel o lime some, então ganha um fio escuro em volta. É contorno de legibilidade, não decoração. */ --ponto-anel: 0 0 0 1px rgba(28, 28, 28, 0.28); /* ==== gradientes ====================================================== */ /* Estes dois SÃO o bloco escuro: não mudam com o tema. */ --grad-profundidade: linear-gradient(160deg, #0C1733 0%, #1E3E74 100%); --grad-acao: linear-gradient(90deg, #85BA08 0%, #BFF73B 100%); /* Estes dois são superfície de página: acompanham o tema. */ /* Sem azul clarinho: lavagem azul pálida sobre papel não é a identidade. No claro a superfície é papel ou branco; cor vem do bloco azul ESCURO. */ --grad-card: linear-gradient(180deg, #FFFFFF 0%, #F2F3EF 100%); /* Seta do select: precisa casar com --borda-interativa e, por ser data URI, não aceita var(). Uma por tema. */ --chevron-campo: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* ==== tipografia ====================================================== */ --fonte: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --fonte-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace; /* Escala fluida. Um termo em rem sempre, para respeitar o zoom. */ /* Escala rebaixada a pedido do cliente: mais amigável, clean e profissional. Display caiu de 4.5rem para 3.25rem, H2 de 4rem para 2.25rem. */ --t-display: clamp(1.875rem, 3.6vw, 3.25rem); --t-h2: clamp(1.5rem, 2.4vw, 2.25rem); --t-h2-menor: clamp(1.25rem, 1.9vw, 1.75rem); --t-h3: clamp(1.0625rem, 1.4vw, 1.25rem); --t-sub: clamp(1rem, 1.15vw, 1.125rem); --t-corpo: 1.0625rem; --t-peq: 0.9375rem; --t-impacto: clamp(2.25rem, 4.2vw, 3.5rem); --t-impacto-menor: clamp(1.5rem, 2.4vw, 2rem); /* Eyebrow: critério 7 do cliente. 0.4em de tracking, peso 700. */ --t-eyebrow: 0.75rem; --tracking-eyebrow: 0.4em; /* Mono: três tamanhos, nada entre eles. Entrelinha 1.2, tracking normal. */ --t-mono-p: 0.75rem; --t-mono: 0.8125rem; --t-mono-g: 0.875rem; /* ==== espaço. Régua de 8 do brandbook. ================================ */ --e-1: 8px; --e-2: 16px; --e-3: 24px; --e-4: 32px; --e-6: 48px; --e-8: 64px; --e-12: 96px; --e-16: 128px; --e-20: 160px; /* Ritmo de seção. Estava travado em 160px no desktop, o mesmo valor em toda seção do site. Com o conteúdo que essas seções têm, 160 em cima MAIS 160 embaixo deixa o bloco majoritariamente vazio e o site inteiro com a mesma respiração, que é o que fazia as páginas parecerem espaçadas demais e monótonas. Agora escala com a viewport e para em 120. */ --secao-y: clamp(72px, 7.6vw, 120px); /* A dobra respira mais que o corpo: é ela que dá o tom de entrada. */ --dobra-y: clamp(88px, 9.5vw, 152px); /* Conteúdo ocupa 70% da largura da tela, com piso e teto. Texto corrido continua limitado por medida em ch, dentro dos 70%. */ --container-largura: 70%; --container-min: 320px; --container-max: 1600px; --prosa: 68ch; --gutter: 24px; --grade-gap: var(--e-3); /* ==== forma =========================================================== Duas camadas, de propósito. ESTRUTURA em canto vivo, coerente com as terminações retas do símbolo: card, bloco, tabela, mega menu, faixa. AÇÃO arredondada, por decisão do cliente, contrariando o brandbook ("sem arredondamento em card, bloco e botão"): botão e selo em pílula. O contraste entre as duas camadas é o que torna o CTA o elemento mais óbvio da tela sem precisar de mais cor. */ --raio: 0px; /* estrutura */ --raio-acao: 999px; /* botão e selo, pílula */ --raio-campo: 10px; /* campo de formulário, parente do botão */ /* No claro a sombra é leve e quente: sombra preta forte sobre papel lê como sujeira. Dentro do bloco invertido ela volta a ser preta. */ --elev-flutuante: 0 1px 2px rgba(28, 28, 28, .05), 0 16px 40px rgba(28, 28, 28, .12); --elev-hover: 0 1px 3px rgba(28, 28, 28, .05), 0 12px 30px rgba(28, 28, 28, .1), 0 0 0 1px rgba(28, 28, 28, .05); /* ==== movimento ======================================================= */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-ui: 200ms; /* Duração da entrada por scroll. Estava faltando: sem ela o atalho `animation: entrar var(--dur-entrada) ...` era inválido e NENHUM efeito de carregamento rodava. */ --dur-entrada: 620ms; --header-h: 72px; } /* ========================================================================== BLOCO INVERTIDO O mesmo conjunto semântico, em escuro. Não é um segundo tema: é a receita de bloco invertido do brandbook aplicada dentro da página clara. Como todo componente consome só o semântico, redefinir os tokens no escopo do bloco já veste tudo que estiver dentro dele: card, campo, selo, mockup, ícone, sombra. Nenhuma view precisa saber que isso existe. Onde entra, e por quê: .hero, .secao--tese, .artigo__hero primeira dobra de cada página .secao--atmosfera a seção de respiro no meio da página .cta o bloco de conversão .rodape, .zap a base da página e a ação flutuante .inverso utilitário, para inverter à mão ========================================================================== */ .inverso, .hero, .secao--tese, .secao--atmosfera, .artigo__hero, .cta, .rodape, .zap { --fundo: #141414; --fundo-2: var(--n-950); --borda: #262626; --borda-media: #333333; --borda-forte: #454545; /* No escuro só n-500 passa a 1.4.11: 6.47:1 no fundo, 5.98:1 no card. n-700 para em 2.97:1 e reprova. */ --borda-interativa: var(--n-500); /* REGRA: nunca cinza em texto sobre fundo escuro. Ver CLAUDE.md, item 1. */ --txt: #EDEFEC; /* 15.93:1 */ --txt-2: #D9DBD7; /* 13.2:1. Branco levemente rebaixado, não é cinza */ --txt-3: var(--n-700); /* Aqui o lime da marca volta em cheio: é para isto que o bloco existe. */ --acento: var(--lime-600); --acento-hover: var(--lime-400); --acento-press: var(--lime-700); --acento-contorno: transparent; --sobre-acento: #141414; --sinal-ok: var(--sucesso); --sinal-aviso: var(--ambar); --sinal-erro: var(--coral); --lavagem-acento: rgba(167, 233, 10, 0.05); --hover-superficie: rgba(237, 239, 236, 0.05); --acento-linha: rgba(167, 233, 10, 0.3); --linha-grade: rgba(228, 233, 242, 0.07); --holofote: rgba(167, 233, 10, 0.09); --ponto-anel: none; --grad-card: linear-gradient(180deg, #1C1C1C 0%, #0C1733 100%); --chevron-campo: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --elev-flutuante: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 48px rgba(0, 0, 0, .34); --elev-hover: 0 2px 6px rgba(0, 0, 0, .34), 0 14px 36px rgba(0, 0, 0, .3), 0 0 0 1px rgba(237, 239, 236, .06); color: var(--txt); } @media (min-width: 768px) { :root { --header-h: 84px; --grade-gap: var(--e-4); } } /* ========================================================================== Superfície dentro do bloco azul Card preto chapado sobre o degradê vira um buraco: come a cor da seção e deixa o ícone parecendo apagado. Aqui a superfície é um AZUL quase preto translúcido, mais escuro que a ponta escura do próprio degradê. O card afunda em vez de flutuar, o matiz continua azul, e o degradê ainda passa por baixo o bastante para a seção não achatar. Contraste conferido nas duas pontas do degradê, porque a sonda automática pula elemento sobre gradiente. Pior caso: azul-300 sobre o selo na ponta clara, 8.51:1. Melhor: texto sobre o card na ponta escura, 16.16:1. ========================================================================== */ .secao--atmosfera { /* Card: azul quase preto. Na ponta escura do degradê ele quase encosta no fundo, então quem desenha o limite é a borda, e por isso ela sobe. */ --fundo-2: rgba(7, 14, 32, 0.62); /* Selo do ícone e campos: um degrau ACIMA do card, para o disco do ícone aparecer contra ele. */ --fundo: rgba(237, 239, 236, 0.07); --borda: rgba(228, 233, 242, 0.22); --borda-media: rgba(228, 233, 242, 0.32); --borda-forte: rgba(228, 233, 242, 0.48); } /* Mockup é exceção: uma tela de produto precisa parecer opaca, senão o degradê da seção atravessa o "monitor" e destrói a ilusão. */ .secao--atmosfera .mock, .secao--atmosfera .pmock { --fundo-2: var(--n-950); --fundo: #141414; --borda: #262626; --borda-media: #333333; --borda-forte: #454545; } /* Dentro do bloco azul, o TÍTULO do card é lime e só a descrição fica branca. Pedido do cliente. O lime dá 6.2:1 sobre a superfície do card na ponta clara do degradê, que é o pior caso, então passa AA como texto normal. Fora do bloco azul nada muda: no papel o acento é azul e título de card continua em --txt. */ .secao--atmosfera .h3, .secao--atmosfera .entrega__titulo, .secao--atmosfera .fonte__nome, .secao--atmosfera .vertical-item b, .secao--atmosfera .comp__nome, .secao--atmosfera .quem__bloco h3, .secao--atmosfera .solucao__texto .h2 { color: var(--acento); }