# Brandbook · Projeto Petrobras Vitalício > **Bundle agent-ready** — source-of-truth visual da família Petrobras Vitalício (Concurseiro Zero1). > Gerado automaticamente em 2026-06-20 a partir do repositório [lp-c01](https://github.com/lauropilatti-c01/lp-c01). > Versão online: https://lp.c01.com.br/_brandbook/ ## Como usar com agentes de IA (Claude, ChatGPT, Cursor, etc) Cole este arquivo inteiro no contexto do agente e peça: ``` Use este brandbook como source-of-truth pra criar uma landing/criativo/peça no design system "Petrobras Vitalício". Respeite TODOS os tokens, componentes, regras de voz e word coloring 3-tone. NUNCA use emojis — use os componentes do DS (eyebrow, cards com border accent, SVG inline) pra criar hierarquia. ``` Quando aplicar este DS: - Landings relacionadas a **Petrobras, Vitalício, Engenharia (concurso público)**, Transpetro, ANSA, BB Engenharia, PRF - Qualquer produto **Concurseiro Zero1** com tema de concurso público - Criativos pagos, thumbs, anúncios, materiais e cards desses produtos Quando NÃO aplicar: - Marcas que não são Zero1 - Produtos com identidade visual própria (Peptio, Kelp, etc) - Conteúdo institucional C01 (usa outra identidade) ## Estrutura deste bundle 1. **System** — tokens, escalas, regras, voz, don'ts (de `SYSTEM.md`) 2. **Examples** — uso prático, word coloring, padrões comuns (de `EXAMPLES.md`) 3. **Icons** — biblioteca canônica de SVGs que substituem emojis (de `icons.md`) 4. **Tokens CSS** — variáveis CSS prontas pra copiar (de `tokens.css`) Cada seção mantém o conteúdo original — basta seguir. --- ## 1. System (source-of-truth canônica) > Origem: `docs/design-systems/petrobras-vitalicio/SYSTEM.md` --- name: "Concurseiro Zero1 — Família Visual Projeto Petrobras Vitalício" version: "v3.0 — 2026-05-07" purpose: "Source-of-truth canônica para TODA criação visual: páginas, criativos, thumbs, ads, cards, materiais." url-reference: "https://lp.concurseirozero1.com.br/projeto-petrobras-vitalicio-eng" # ═══════════════════════════════════════════════════════════ # FONTS — sempre carregar PF Fusion Sans Pro Medium para títulos # ═══════════════════════════════════════════════════════════ fonts: display: family: "PF Fusion Sans Pro" weight: 500 style: "Medium" local-file: "~/workspace/knowledge/zero1-brand-assets/PFFusionSansPro-Medium.ttf" project-file: "assets/PFFusionSansPro-Medium.ttf" use: "TODOS os títulos, headlines, section dividers, valores grandes, números de destaque" text-transform: "uppercase (default)" style-notes: "geometric heavy sans, levemente condensada, alta densidade vertical, ideal pra grito" body: family: "Sora" weights: [400, 500, 600, 700, 800] source: "Google Fonts" use: "Body copy, parágrafos, descrições, lead text, captions, UI labels" style-notes: "humanist geometric sans, abertura generosa, boa leitura em fundo escuro" fallback-system: "system-ui, -apple-system, BlinkMacSystemFont, sans-serif" # ═══════════════════════════════════════════════════════════ # COLORS — paleta corrigida com gradientes oficiais Zero1 # ═══════════════════════════════════════════════════════════ colors: # Backgrounds bg-base: "#000000" # preto puro — fundo padrão de TODA peça bg-deep-green: "#051914" # verde quase-preto — overlay sutil, gradient stops bg-card: "#0a2418" # verde escuro — fundo de cards, blocos de conteúdo bg-card-elevated: "#103a28" # verde escuro um nível acima — cards em hover ou primária # Borders border-card: "#1a4d3a" # verde escuro fino — borda padrão de cards border-card-strong: "#015734" # verde escuro mais saturado — borda em destaque # Greens (BRAND GRADIENT — usar SEMPRE como gradiente, não cor sólida) green-1: "#0FFC84" # verde-neon brilhante — START do gradiente green-2: "#1EE751" # verde-neon escuro — END do gradiente green-glow: "rgba(15, 252, 132, 0.45)" # rgba do verde-1 pra glows # Yellows / Gold (BRAND GRADIENT — usar SEMPRE como gradiente) yellow-1: "#FFDC00" # amarelo brilhante — START do gradiente yellow-2: "#E3AE00" # gold escuro — END do gradiente yellow-glow: "rgba(255, 220, 0, 0.45)" # rgba do yellow-1 pra glows # Alert / Urgência red-alert: "#6E0A10" # burgundy escuro — barra de alerta superior red-alert-deep: "#480709" # burgundy mais escuro — END do gradiente red-alert-text-accent: "#FFDC00" # amarelo dentro da alert bar pra destaques # Text text: "#FFFFFF" # branco — corpo padrão text-soft: "#D1D5DB" # cinza claro — body em fundos pretos text-muted: "#9CA3AF" # cinza médio — labels, captions, metadata text-on-light: "#0a1812" # verde-quase-preto — texto SOBRE CTA amarelo/verde # ═══════════════════════════════════════════════════════════ # GRADIENTS — usar SEMPRE estes (não cor sólida) # ═══════════════════════════════════════════════════════════ gradients: yellow: "linear-gradient(180deg, #FFDC00 0%, #E3AE00 100%)" yellow-radial: "radial-gradient(ellipse at top, #FFDC00 0%, #E3AE00 80%)" green: "linear-gradient(180deg, #0FFC84 0%, #1EE751 100%)" green-radial: "radial-gradient(ellipse at top, #0FFC84 0%, #1EE751 80%)" alert: "linear-gradient(180deg, #6E0A10 0%, #480709 100%)" card-surface: "linear-gradient(180deg, #0a2418 0%, #051914 100%)" bg-vignette: "radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(0, 80, 50, 0.15) 0%, transparent 70%)" # ═══════════════════════════════════════════════════════════ # SHADOWS / GLOWS — depth comunicada via LUZ neon, não sombra escura # ═══════════════════════════════════════════════════════════ shadows: glow-green: "0 0 32px rgba(15, 252, 132, 0.5), 0 0 64px rgba(15, 252, 132, 0.22)" glow-green-soft: "0 0 24px rgba(15, 252, 132, 0.18)" glow-yellow: "0 0 28px rgba(255, 220, 0, 0.45)" glow-yellow-soft: "0 0 16px rgba(255, 220, 0, 0.2)" card-elevation: "0 8px 24px rgba(0, 0, 0, 0.5)" cta-inner: "inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.28)" text-shadow-yellow: "0 0 16px rgba(255, 220, 0, 0.4)" text-shadow-green: "0 0 16px rgba(15, 252, 132, 0.4)" # ═══════════════════════════════════════════════════════════ # RADII / SPACING # ═══════════════════════════════════════════════════════════ rounded: none: "0" sm: "6px" # pílulas pequenas, time tags, badges md: "10px" # cards, CTAs lg: "20px" # video frames, modais grandes pill: "9999px" # pills horizontais, ícones circulares spacing: xs: "4px" sm: "8px" md: "16px" lg: "24px" xl: "32px" "2xl": "48px" "3xl": "64px" # ═══════════════════════════════════════════════════════════ # TYPOGRAPHY — escala completa # ═══════════════════════════════════════════════════════════ typography: hero-headline: font: "PF Fusion Sans Pro Medium" size: "clamp(2.25rem, 5.5vw, 4rem)" line-height: 1.02 letter-spacing: "-0.025em" text-transform: "uppercase" use: "Headline principal de qualquer peça (LP, criativo, thumb)" thumb-headline: font: "PF Fusion Sans Pro Medium" size: "5.5rem" line-height: 0.95 letter-spacing: "-0.02em" text-transform: "uppercase" use: "Headlines de thumbs YouTube/Instagram (1280x720, 1080x1350)" section-heading: font: "PF Fusion Sans Pro Medium" size: "clamp(1.5rem, 3.5vw, 2.5rem)" line-height: 1.1 text-transform: "uppercase" use: "Section dividers ('ÚLTIMAS VAGAS DISPONÍVEIS', 'COMO FUNCIONA')" number-large: font: "PF Fusion Sans Pro Medium" size: "3rem" line-height: 1 use: "Stats grandes (81 aulas, 17 ênfases), valores monetários" cta: font: "Sora" weight: 700 size: "1rem" letter-spacing: "0.02em" text-transform: "uppercase" use: "Botões" pill-stamp: font: "Sora" weight: 700 size: "0.875rem" letter-spacing: "0.04em" text-transform: "uppercase" use: "Pills de metadata (AULA 2 | 05 DE MAIO | 20H)" body: font: "Sora" weight: 400 size: "1rem" line-height: 1.5 use: "Body copy padrão" body-large: font: "Sora" weight: 400 size: "1.125rem" line-height: 1.6 use: "Lead text, intro de seção" # ═══════════════════════════════════════════════════════════ # PATTERNS — convenções visuais reusáveis # ═══════════════════════════════════════════════════════════ patterns: word-coloring-3-tone: description: "Headlines com palavras em 3 cores: branco padrão, palavra-chave em verde, palavra-chave em amarelo" rule: "Branco eh 70-80% das palavras. Verde para conceito/ação ('CARREIRA', 'AO VIVO'). Amarelo para escala/promessa ('MAIOR EMPRESA', 'R$26.000')." example: "TUDO SOBRE A [verde]CARREIRA[/verde] NA [amarelo]MAIOR EMPRESA[/amarelo] DO BRASIL" css-recipe: ".gold {color: #FFDC00; text-shadow: 0 0 16px rgba(255,220,0,0.3)} .green {color: #0FFC84; text-shadow: 0 0 16px rgba(15,252,132,0.3)}" pill-stamp-yellow: description: "Pill horizontal amarelo-gold pra metadata em thumbs/criativos" use: "AULA N | DATA | HORA | ÊNFASE" css: "background: var(--gradient-yellow); color: #000; padding: 8px 16px; border-radius: 9999px; font: Sora 700 0.875rem uppercase" pill-stamp-bordered: description: "Variação bordered: fundo escuro com gradiente amarelo só na borda (mais sutil)" use: "Quando precisa de pill mas não competir com headline" css: "background: #000; border: 2px solid; border-image: linear-gradient(180deg, #FFDC00, #E3AE00) 1; color: #FFDC00" glow-border-card: description: "Cards com borda fina verde sobre fundo preto, com glow neon sutil" css: "background: var(--gradient-card-surface); border: 1px solid #1a4d3a; border-radius: 10px; box-shadow: var(--glow-green-soft)" hero-photo-overlay: description: "Hero com foto de pessoa em uniforme Petrobras (engenheiro/técnico) em fundo de refinaria escurecido" overlay: "linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%)" placement: "Foto à direita ou centro do hero, headline sobre ela com text-shadow" underline-accent: description: "Pequena linha (3-4px) embaixo de palavras douradas/verdes, INTERNA à palavra (não sublinhado da palavra inteira)" rule: "Apenas em criativos/thumbs onde precisa enfatizar palavra. NUNCA em LPs (fica feio)" # ═══════════════════════════════════════════════════════════ # COMPONENTS — receitas prontas # ═══════════════════════════════════════════════════════════ components: cta-primary-yellow: background: "linear-gradient(180deg, #FFDC00 0%, #E3AE00 100%)" text-color: "#000000" font: "Sora 700 1rem uppercase letter-spacing 0.02em" padding: "16px 22px 16px 28px" border-radius: "10px" icon-suffix: "white circle 28px round with dark arrow → inside" box-shadow: "glow-yellow + cta-inner" hover: "translateY(-2px) + brightness(1.05) + glow-yellow stronger" use: "CTA secundário ou warm action" cta-primary-green: background: "linear-gradient(180deg, #0FFC84 0%, #1EE751 100%)" text-color: "#000000" font: "Sora 700 1rem uppercase letter-spacing 0.02em" padding: "16px 22px 16px 28px" border-radius: "10px" icon-suffix: "white circle 28px round with dark arrow → inside" box-shadow: "glow-green + cta-inner" hover: "translateY(-2px) + brightness(1.05) + glow-green stronger" use: "CTA principal de conversão (Garantir vaga, Inscreva-se, Acessar)" schedule-row: background: "linear-gradient(180deg, #0a2418, #051914)" border: "1px solid #1a4d3a" border-radius: "10px" padding: "12px" grid: "100px 1fr (time-pill | content)" hover: "border #0FFC84, transform translateX(4px), glow-green-soft" use: "Linhas de agenda, lista de aulas" pill-time: background: "#000000" text-color: "#FFFFFF" border: "1px solid #1a4d3a" border-radius: "6px" font: "Sora 700 1rem" icon-prefix: "⌚ em verde-1" use: "Marcadores de horário (9H, 11H, 18H)" pill-subject: background: "linear-gradient(180deg, #FFDC00, #E3AE00)" text-color: "#000000" border-radius: "6px" padding: "3px 10px" font: "Sora 700 0.9375rem" use: "Highlight de matéria/ênfase no schedule" feature-card: background: "linear-gradient(180deg, #0a2418, #051914)" border: "1px solid #1a4d3a" border-radius: "10px" padding: "24px" box-shadow: "glow-green-soft" title: "PF Fusion Sans Pro 1.125rem uppercase white" body: "Sora 400 1rem #D1D5DB" use: "Bloco de feature/benefício" alert-bar-top: background: "linear-gradient(180deg, #6E0A10, #480709)" text: "#FFFFFF Sora 700 0.875rem uppercase" text-emphasis: "#FFDC00" icon: "⚠ em #FFDC00" sticky: true height: "auto, padding 10-12px" use: "Urgência crítica (BANCA CONFIRMADA, EDITAL IMINENTE, VAGAS LIMITADAS)" stat-card: background: "linear-gradient(180deg, #0a2418, #103a28)" border: "1px solid #1a4d3a" border-radius: "10px" padding: "14px 22px" number: "PF Fusion Sans Pro 2.25rem #0FFC84 line-height 1" label: "Sora 700 0.6875rem uppercase #9CA3AF letter-spacing 0.12em" use: "Stats de hero (81 aulas, 17 ênfases)" # ═══════════════════════════════════════════════════════════ # BACKGROUNDS — tratamentos canônicos # ═══════════════════════════════════════════════════════════ backgrounds: default-page: color: "#000000" overlays: - "radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(0, 80, 50, 0.15) 0%, transparent 70%)" - "radial-gradient(ellipse 800px 400px at 50% 100%, rgba(255, 177, 0, 0.04) 0%, transparent 70%)" notes: "Sempre preto puro como base. Vignettes radiais sutis dão atmosfera sem competir." thumb-criativo: base: "Foto de plataforma/refinaria/petroleiros escurecida em modo overlay 60-70% black" overlay: "linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.65) 100%)" notes: "Sempre escurecer foto pra texto branco/colorido se destacar" card-surface: base: "linear-gradient(180deg, #0a2418, #051914)" notes: "Cards sempre em verde-escuro sobre preto pra criar contraste" # ═══════════════════════════════════════════════════════════ # LOGO — uso e tratamentos # ═══════════════════════════════════════════════════════════ logo: primary-file: "~/workspace/knowledge/zero1-brand-assets/logos/projeto-petrobras-vitalicio.webp" source-url: "https://lp.concurseirozero1.com.br/wp-content/uploads/2025/07/logo-projeto-petrobras-768x768.png.webp" treatment-default: "filter: drop-shadow(0 0 24px rgba(15, 252, 132, 0.3))" sizes: hero-desktop: "260px wide" hero-mobile: "180px wide" footer-cta: "160px wide" thumb-corner: "100-120px wide (top-right)" do-not: - "Não recolorir" - "Não distorcer proporções" - "Não usar sem o glow neon verde" - "Não usar sobre fundos claros (perde o gradiente verde)" # ═══════════════════════════════════════════════════════════ # Tokens utilitários para preview.html (consumo direto pelo design-md tool) # ═══════════════════════════════════════════════════════════ preview_tokens: button_primary_bg: "#0FFC84" button_primary_text: "#000000" button_primary_border: "#0FFC84" button_secondary_bg: "transparent" button_secondary_text: "#0FFC84" button_secondary_border: "#0FFC84" button_tertiary_text: "#FFDC00" surface_bg: "#000000" card_bg: "#0a2418" text: "#FFFFFF" text_muted: "#9CA3AF" border: "#1a4d3a" accent: "#FFDC00" button_radius: "10px" card_radius: "10px" input_radius: "10px" --- ## 1. Visão geral da identidade visual A família "Projeto Petrobras Vitalício" do Concurseiro Zero1 é uma **identidade dark-promo industrial premium** construída sobre 3 pilares cromáticos rígidos: 1. **Preto absoluto (`#000000`)** = território. 95% da área de qualquer peça. NUNCA branco, NUNCA cinza claro. 2. **Verde neon gradiente (`#0FFC84` → `#1EE751`)** = ação, energia, "futuro garantido". Usado em CTAs principais, glows, palavras-chave de conceito ("CARREIRA", "AO VIVO"), borders. 3. **Amarelo gradiente (`#FFDC00` → `#E3AE00`)** = marca + dinheiro + escala. Usado em logo, palavras-chave de promessa ("R$26.000", "MAIOR EMPRESA"), pills de subject/metadata, accent text em alertas. Tipografia tem dois pilares igualmente rígidos: 1. **PF Fusion Sans Pro Medium** = todas as headlines, números grandes, section dividers, valores. All-caps por padrão. Geometric heavy sans, levemente condensada — projeta "energia, precisão, escala". 2. **Sora** = tudo que é leitura — body, descrições, CTAs (peso 700), labels (peso 600). Humanist com abertura generosa. Profundidade vem de **glow neon (verde ou amarelo)**, NUNCA de sombra escura. O fundo já é preto — sombra escura sumiria. --- ## 2. Padrão de coloração de palavras (3-tone headlines) Headlines típicos da família Vitalício seguem este padrão: ``` [BRANCO normal] [VERDE conceito-chave] [BRANCO normal] [AMARELO promessa-chave] [BRANCO normal] ``` **Exemplos canônicos:** - "TUDO SOBRE A **CARREIRA**(verde) NA **MAIOR EMPRESA**(amarelo) DO BRASIL" - "CONQUISTE UMA CARREIRA ESTÁVEL COM UM **SALÁRIO**(amarelo) DE ATÉ **R$26.000,00**(amarelo) POR MÊS NA PETROBRAS" - "INTENSIVO DE AULAS **AO VIVO**(verde)" - "GARANTA A SUA **VAGA AGORA!**(amarelo)" **Regra de proporção:** branco 70-80%, colorido 20-30%. Nunca mais que duas palavras coloridas seguidas. **Regra semântica:** - **Verde** = conceito, ação, momento, pertencimento ("CARREIRA", "AO VIVO", "VAGA", "APROVADO") - **Amarelo** = escala, dinheiro, autoridade, promessa ("R$26.000", "MAIOR", "VITALÍCIO", "AGORA") --- ## 3. Hierarquia tipográfica Todas as headlines/section dividers/números usam **PF Fusion Sans Pro Medium** all-caps. A diferença vem do tamanho: | Role | Size | Use | |------|------|-----| | thumb-headline | 5.5rem | Thumb YouTube/Instagram (proporção 16:9 ou 4:5) | | hero-headline | clamp(2.25rem, 5.5vw, 4rem) | Headline principal de LP | | section-heading | clamp(1.5rem, 3.5vw, 2.5rem) | Section dividers ("ÚLTIMAS VAGAS DISPONÍVEIS") | | number-large | 3rem | Stats grandes, valores monetários | Body usa **Sora**: | Role | Spec | Use | |------|------|-----| | body-large | Sora 400 1.125rem 1.6 | Lead, intro | | body | Sora 400 1rem 1.5 | Padrão | | cta | Sora 700 1rem uppercase 0.02em | Botões | | pill-stamp | Sora 700 0.875rem uppercase 0.04em | Pills metadata | | caption | Sora 400 0.75rem | Legendas, metadata pequena | --- ## 4. Componentes essenciais (recipe-by-recipe) ### CTA Primary Verde — sempre o conversion principal ```css background: linear-gradient(180deg, #0FFC84 0%, #1EE751 100%); color: #000000; padding: 16px 22px 16px 28px; border-radius: 10px; font: 700 1rem/1 "Sora", sans-serif; text-transform: uppercase; letter-spacing: 0.02em; box-shadow: 0 0 32px rgba(15, 252, 132, 0.5), 0 0 64px rgba(15, 252, 132, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.28); ``` Sempre com **arrow-circle-suffix**: círculo branco 28px com seta → preta dentro, à direita do label. ### CTA Yellow — secundário ou alternativa Mesma receita, swap do gradiente para `linear-gradient(180deg, #FFDC00, #E3AE00)` e glow para `rgba(255, 220, 0, 0.45)`. ### Schedule Row (linha de aula clicável) ```css display: grid; grid-template-columns: 100px 1fr; gap: 12px; background: linear-gradient(180deg, #0a2418, #051914); border: 1px solid #1a4d3a; border-radius: 10px; padding: 12px; transition: all 0.2s ease; /* hover */ &:hover { border-color: #0FFC84; transform: translateX(4px); box-shadow: 0 0 24px rgba(15, 252, 132, 0.18); } ``` Dentro: **pill-time** (`9H` em pill preta com clock icon verde) + **content** (subject pill amarela + topic em texto suave). ### Alert Bar Top — barra de urgência ```css position: sticky; top: 0; z-index: 100; background: linear-gradient(180deg, #6E0A10 0%, #480709 100%); color: #FFFFFF; padding: 10px 16px; font: 700 0.875rem/1.4 "Sora", sans-serif; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; ``` Texto de ênfase em `#FFDC00` (BANCA CONFIRMADA, 50 VAGAS, EDITAL IMINENTE). --- ## 5. Backgrounds e atmosfera **Página padrão:** `body { background: #000000 }` + 2 vignettes radiais sutis: ```css background-image: radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(0, 80, 50, 0.15) 0%, transparent 70%), radial-gradient(ellipse 800px 400px at 50% 100%, rgba(255, 177, 0, 0.04) 0%, transparent 70%); ``` **Thumb / criativo de aula:** foto de cenário (plataforma, refinaria, técnico em uniforme) escurecida em overlay 60-70% black + gradient bottom pra dar peso pro texto. **Cards / blocos:** sempre em gradient verde-escuro sobre o preto base — `linear-gradient(180deg, #0a2418, #051914)`. --- ## 6. Logo e tratamento **Arquivo canônico:** `~/workspace/knowledge/zero1-brand-assets/logos/projeto-petrobras-vitalicio.webp` **Tratamento padrão (sempre):** ```css filter: drop-shadow(0 0 24px rgba(15, 252, 132, 0.3)); ``` **Tamanhos canônicos:** - Hero desktop: 260px wide - Hero mobile: 180px wide - Footer CTA: 160px wide - Canto de thumb: 100-120px wide **NUNCA:** recolorir, distorcer, usar sem glow, usar sobre fundo claro. --- ## 7. Do's e Don'ts ### ✅ Do's ✅ **PF Fusion APENAS em títulos grandes (h-hero, h-section, números ≥2rem).** Display geometric heavy condensada perde legibilidade em tamanho pequeno. Card-titles, body, bullets, labels usam Sora. Detalhes em `frontend-rules.md` seção "Tipografia". ✅ **Eyebrow é opcional e informativo.** Não usar em todas as seções. Só quando agrega contexto único (urgência, numeração, tipo raro). Detalhes em `frontend-rules.md`. ✅ **Sempre gradiente nos verdes e amarelos.** Cor sólida fica chapada. Use os gradientes definidos. ✅ **Glow neon como depth.** Substitua qualquer `box-shadow: 0 4px 6px rgba(0,0,0,0.x)` por glow verde ou amarelo. ✅ **Background sempre preto.** Nunca branco, nunca cinza claro, nunca azul. ✅ **Word coloring 3-tone em headlines.** Branco padrão + verde conceito + amarelo promessa. ✅ **Logo SEMPRE com glow drop-shadow verde.** ✅ **Sora 700 + uppercase + letter-spacing em CTAs.** Não usar Sora 400 ou peso baixo em botões. ✅ **Use eyebrow + h-section para criar hierarquia de seção.** Texto pequeno uppercase verde/amarelo ("URGÊNCIA", "REQUISITOS") antes do título substitui emoji-categoria com elegância. Classe `.eyebrow` ou `.eyebrow.gold`. ✅ **Use border-left accent (3px) em cards para diferenciação visual.** Verde para info neutra/positiva (`.card.accent-green`), amarelo para premium/destaque (`.card.accent-gold`), vermelho para urgência (`.card.accent-alert`). ✅ **Bullets com bolinha verde + glow (`.bullets`).** Substitui emoji ✓/✅ em listas. ✅ **Mobile-first sempre.** Container com padding lateral mínimo de 24px no mobile. Cards com `padding: var(--s-xl) var(--s-lg)` para respiro adequado. ### ❌ Don'ts ❌ **NUNCA emojis em landing pages.** Sem 🚨, 💰, 🚀, 🎯, ⚠️, ✅, 📝, 💡, 👨‍🎓, 🔧, 📚, 🏖️, 📰, ou qualquer outro. Emoji é o atalho do designer preguiçoso e a marca registrada de "feito por IA". Substitua por: - `.eyebrow` (texto verde/amarelo uppercase) antes de `

` - `.card.accent-*` (border-left colorida) ao invés de emoji-categoria - `.pill-stamp` para metadata em destaque - `.bullets` para listas - SVG inline simples (relógio, check) só se semanticamente necessário ❌ **Não use Bebas Neue, Impact, Montserrat ou Open Sans.** Apenas PF Fusion Sans Pro (títulos) + Sora (body). ❌ **Não use cor azul.** Não faz parte da família Vitalício. ❌ **Não use shadows escuros tradicionais (`box-shadow: 0 4px 6px black`).** Em fundo preto somem. Use glow neon. ❌ **Não pinte cards de amarelo ou verde sólido.** Esses são acentos, não preenchimentos. Cards são verde-escuro. ❌ **Não use vermelho fora da alert bar.** Vermelho dilui o impacto de urgência. ❌ **Não centralize tudo em LPs longas.** Variar alinhamento mantém ritmo visual. Hero pode ser centro; schedule é left-align; CTA bar é centro. ❌ **Não use sublinhado decorativo embaixo de palavras inteiras em LP.** Em thumbs ok, em LPs fica feio. ❌ **Não use mais de 2 palavras coloridas seguidas na mesma headline.** Mata a hierarquia. --- ## 8. Como reusar essa identidade em outros concursos Zero1 Para criar variantes (Transpetro, ANSA, BB Engenharia, PRF, etc), **mantenha 100% do esqueleto** e troque APENAS: 1. **Logo:** swap do arquivo em `~/workspace/knowledge/zero1-brand-assets/logos/` 2. **Foto de fundo (thumbs/criativos):** trocar de refinaria pra cenário relevante (BB → agência bancária; PRF → rodovia) 3. **Copy:** valores, datas, ênfases específicas da prova 4. **Opcional:** se a marca-alvo tem cor primária forte (ex: BB azul Banco do Brasil), pode AJUSTAR o yellow gradient pra azul-amarelo, mas o verde continua igual (é cor de "ação Zero1", não de cliente) NUNCA troque: - Background preto base - Verde neon dos CTAs - PF Fusion Sans Pro como fonte de títulos - Padrão word-coloring 3-tone - Tratamento glow nos elementos premium --- ## 9. Agent Prompt Guide — quick reference ``` Use a família visual "Projeto Petrobras Vitalício — Concurseiro Zero1": FONTS: - Headlines: PF Fusion Sans Pro Medium (uppercase, letter-spacing -0.025em) - Body/CTA: Sora (700 para CTAs/labels, 400 para body) CORES: - Background: #000000 puro - Cards: linear-gradient(180deg, #0a2418, #051914) com border #1a4d3a - Verde neon (CTA principal, ação): linear-gradient(180deg, #0FFC84, #1EE751) - Amarelo gold (logo, dinheiro, alerta): linear-gradient(180deg, #FFDC00, #E3AE00) - Vermelho alert (apenas barra topo): linear-gradient(180deg, #6E0A10, #480709) GLOWS (não usar shadows escuros): - Verde: 0 0 32px rgba(15, 252, 132, 0.5), 0 0 64px rgba(15, 252, 132, 0.22) - Amarelo: 0 0 28px rgba(255, 220, 0, 0.45) CTAs: - Sempre gradiente + arrow-circle suffix (círculo branco com seta preta) - Padding 16px 22px 16px 28px, radius 10px - Inner highlight: inset 0 1px 0 rgba(255,255,255,0.4) WORD COLORING: - Branco padrão, palavra-chave verde para CONCEITO, palavra-chave amarela para PROMESSA/VALOR - Ex: "TUDO SOBRE A [CARREIRA verde] NA [MAIOR EMPRESA amarelo]" LOGO: - Sempre com filter: drop-shadow(0 0 24px rgba(15, 252, 132, 0.3)) - Arquivo: ~/workspace/knowledge/zero1-brand-assets/logos/projeto-petrobras-vitalicio.webp ``` ## 2. Examples (uso prático) > Origem: `docs/design-systems/petrobras-vitalicio/EXAMPLES.md` # Exemplos de uso — Petrobras Vitalício > **Regra zero:** sem emojis. Use os componentes do design system pra criar hierarquia visual e diferenciação. Detalhe em `SYSTEM.md` seção Don'ts. ## Word coloring 3-tone (a regra mais importante) ```html

TUDO SOBRE A CARREIRA NA MAIOR EMPRESA DO BRASIL

CONQUISTE UMA CARREIRA ESTÁVEL COM SALÁRIO DE ATÉ R$26.000 POR MÊS NA PETROBRAS

INTENSIVO DE AULAS AO VIVO

``` **Regras:** - 70-80% branco, 20-30% colorido - Verde = conceito/ação (CARREIRA, AO VIVO, VAGA, APROVADO) - Amarelo = promessa/escala (R$26.000, MAIOR, VITALÍCIO, AGORA) - Nunca mais que 2 palavras coloridas seguidas ## Eyebrow + título de seção (substitui emoji) Antes (errado, com emoji): ```html

💰 Quanto você vai ganhar

``` Depois (certo, com eyebrow): ```html
Remuneração

Quanto você vai ganhar

``` Cor do eyebrow: - `.eyebrow` (verde) = neutro, informativo, conceito - `.eyebrow.gold` (amarelo) = urgência, premium, dinheiro, exclusivo ## Cards com border accent (substitui emoji-categoria) ```html
Nível superior
Margem Equatorial

Pode liberar até 300.000 empregos.

Edital pode sair a qualquer momento

Cesgranrio já foi contratada.

``` ## Bullets com glow verde (substitui ✓/✅) ```html ``` ## CTA principal (verde) ```html Garantir minha vaga ``` A seta circular branca já vem automática via CSS (`::after`). ## CTA secundário (amarelo) ```html Ver programação completa ``` ## Alert bar topo ```html
BANCA CONFIRMADA · APENAS 50 VAGAS POR ÊNFASE
``` Sticky só desktop (mobile fica estático). Já configurado no tokens.css. ## Stats grid ```html
81
aulas
17
ênfases
15
dias
``` ## Schedule row (linha de programação) ```html
9H
Engenharia de Petróleo

Reservatórios e produção: tudo que cai na prova

``` ## Logo com tratamento ```html ``` A classe `.logo` aplica o `drop-shadow` neon verde automaticamente. ## Inicializando uma landing nova com este design system Estrutura mínima de `public//index.html`: ```html ... ``` Lembrar de copiar `tokens.css` e a pasta `assets/` (com fonte e logo) pra dentro de `public//`. ## Tom de voz típico - Direto e energético: "GARANTA SUA VAGA AGORA" - Com promessa concreta: "R$26.000 por mês" - Com prova: "+1.000 aprovados" - Com urgência factual: "BANCA CONFIRMADA · EDITAL IMINENTE" - NUNCA genérico: "Não perca essa oportunidade incrível!" — peão - SEMPRE específico: "81 aulas. 17 ênfases. 15 dias." ## 3. Icons SVG (substituem emojis) > Origem: `docs/design-systems/petrobras-vitalicio/icons.md` # Ícones SVG — biblioteca canônica Substitui emojis em landings. Sempre **inline**, em `currentColor` ou cor explícita do DS (`var(--green-1)`, `var(--yellow-1)`). > Regra: emoji = "feito por IA". SVG = intencional. Se você vai usar um emoji, vem aqui primeiro. ## Como usar Cola direto no HTML. Ajusta `width`, `height`, `fill`/`stroke` conforme contexto. ```html Adicionar ao calendário ``` ## Catálogo ### Calendário (substitui 📅) ```html ``` ### Relógio (substitui ⏰ ⌚) ```html ``` ### Play / Vídeo (substitui ▶️ 🎬) ```html ``` ### WhatsApp (substitui 💬 e logo) ```html ``` ### Check (substitui ✅ ✓) ```html ``` ### Bell / Lembrete (substitui 🔔 🚨) ```html ``` ### Alerta (substitui ⚠️ — usar SÓ na alert-bar se necessário) ```html ``` ### Seta direita (já no `.cta-green::after` mas se precisar standalone) ```html ``` ### Cadeado (substitui 🔒 — pra "acesso liberado") ```html ``` ### Money / Dinheiro (substitui 💰 💵 — quando precisar de ícone) ```html ``` ### Fogo / Hot (substitui 🔥) ```html ``` ## Regras de uso 1. **Cor**: sempre `currentColor` (herda da classe pai) ou variável CSS do DS. NUNCA cor hardcoded fora da paleta. 2. **Tamanho**: 16px (inline em texto), 18-20px (pre/posfixo de botão), 24px (standalone com label). 3. **Stroke vs fill**: a maioria dos ícones aqui é stroke (mais leve, mais elegante). Usar `fill` só pra play, money, fogo. 4. **Acessibilidade**: se o ícone tem significado semântico, adicionar `` dentro ou `aria-label` no elemento pai. Se é decorativo, `aria-hidden="true"`. 5. **Botões com ícone + texto**: `display: inline-flex; align-items: center; gap: 8px;` ## Quando criar SVG novo Se precisar de um ícone que não está aqui: 1. Pega da biblioteca **Lucide Icons** (https://lucide.dev) ou **Tabler Icons** — são free, bem desenhadas e em SVG limpo 2. Adiciona aqui em `icons.md` com o nome semântico 3. Usa `currentColor` no stroke 4. Stroke-width 2 (padrão Lucide) ou 2.5 (mais bold quando standalone) ## 4. Tokens CSS — copie e cole > Origem: `docs/design-systems/petrobras-vitalicio/tokens.css` > Salve em `tokens.css` no diretório da landing e importe via `<link rel="stylesheet" href="tokens.css">` no `<head>`. ```css /* ═══════════════════════════════════════════════════════════ Petrobras Vitalício — Concurseiro Zero1 — Design System v4.0 Source-of-truth: docs/design-systems/petrobras-vitalicio/SYSTEM.md Audit: docs/audits/v1-audit-report.md (último score 64/100, alvo 92+) Lifecycle: cada componente marcado com @status canonical|stable|experimental ═══════════════════════════════════════════════════════════ */ @font-face { font-family: "PF Fusion Sans Pro"; src: url("./assets/PFFusionSansPro-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } :root { color-scheme: dark; /* Backgrounds */ --bg-base: #000000; --bg-deep-green: #051914; --bg-card: #0a2418; --bg-card-elevated: #103a28; /* Borders */ --border-card: #1a4d3a; --border-card-strong: #015734; /* Brand greens (use as gradient, never solid) */ --green-1: #0FFC84; --green-2: #1EE751; --green-glow: rgba(15, 252, 132, 0.45); /* Brand yellows/gold (use as gradient, never solid) */ --yellow-1: #FFDC00; --yellow-2: #E3AE00; --yellow-glow: rgba(255, 220, 0, 0.45); /* Alert / Urgência */ --red-alert: #6E0A10; --red-alert-deep: #480709; --red-alert-text-accent: #FFDC00; /* Text */ --text: #FFFFFF; --text-soft: #D1D5DB; --text-muted: #9CA3AF; --text-on-light: #0a1812; /* Gradients (BRAND — sempre usar estes) */ --gradient-green: linear-gradient(180deg, #0FFC84 0%, #1EE751 100%); --gradient-green-radial: radial-gradient(ellipse at top, #0FFC84 0%, #1EE751 80%); --gradient-yellow: linear-gradient(180deg, #FFDC00 0%, #E3AE00 100%); --gradient-yellow-radial: radial-gradient(ellipse at top, #FFDC00 0%, #E3AE00 80%); --gradient-alert: linear-gradient(180deg, #6E0A10 0%, #480709 100%); --gradient-card-surface: linear-gradient(180deg, #0a2418 0%, #051914 100%); --gradient-card-glass: linear-gradient(180deg, rgba(15, 50, 35, 0.55) 0%, rgba(5, 25, 20, 0.4) 100%); --border-glass: rgba(26, 77, 58, 0.6); --bg-vignette: radial-gradient(ellipse 1200px 600px at 50% 0%, rgba(0, 80, 50, 0.15) 0%, transparent 70%); /* Glows (depth = LUZ neon, NUNCA sombra escura) */ --glow-green: 0 0 32px rgba(15, 252, 132, 0.5), 0 0 64px rgba(15, 252, 132, 0.22); --glow-green-soft: 0 0 24px rgba(15, 252, 132, 0.18); --glow-yellow: 0 0 28px rgba(255, 220, 0, 0.45); --glow-yellow-soft: 0 0 16px rgba(255, 220, 0, 0.2); --card-elevation: 0 8px 24px rgba(0, 0, 0, 0.5); --cta-inner: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.28); /* Radii */ --r-sm: 6px; --r-md: 10px; --r-lg: 20px; --r-pill: 9999px; /* Spacing */ --s-xs: 4px; --s-sm: 8px; --s-md: 16px; --s-lg: 24px; --s-xl: 32px; --s-2xl: 48px; --s-3xl: 64px; /* Fonts */ --font-display: "PF Fusion Sans Pro", "Bebas Neue", system-ui, sans-serif; --font-body: "Sora", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } /* ═══════════════════════════════════════════════════════════ Base reset + page background com vignettes ricos (sutil) ═══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } body { font-family: var(--font-body); background: var(--bg-base); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; background-image: radial-gradient(ellipse 800px 500px at 15% 0%, rgba(15, 252, 132, 0.05) 0%, transparent 55%), radial-gradient(ellipse 700px 400px at 85% 30%, rgba(255, 220, 0, 0.03) 0%, transparent 55%), radial-gradient(ellipse 1000px 600px at 50% 100%, rgba(0, 80, 50, 0.08) 0%, transparent 70%); background-attachment: fixed; } /* ═══════════════════════════════════════════════════════════ A11y baseline — focus-visible global e prefers-reduced-motion @status canonical | @since 2026-05 | @sources all-landings ═══════════════════════════════════════════════════════════ */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--green-1); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Skip-to-content link — primeira coisa no <body> @status canonical | @since 2026-05 | a11y WCAG 2.4.1 */ .skip-link { position: absolute; top: -100px; left: 0; background: var(--green-1); color: #000; padding: 12px 20px; text-decoration: none; font-weight: 700; font-size: 0.875rem; z-index: 9999; border-radius: 0 0 var(--r-md) 0; } .skip-link:focus { top: 0; } /* Visually hidden — pra texto que so screen reader le */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ═══════════════════════════════════════════════════════════ Typography ═══════════════════════════════════════════════════════════ */ .h-hero { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.5rem, 8vw, 4rem); line-height: 1.02; letter-spacing: -0.025em; text-transform: uppercase; margin: 0 0 var(--s-md); } .h-section { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.875rem, 5.5vw, 2.5rem); line-height: 1.05; letter-spacing: -0.015em; text-transform: uppercase; margin: 0 0 var(--s-lg); } /* Eyebrow: texto pequeno acima do h-section, substitui emoji "categoria" */ .eyebrow { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--green-1); margin: 0 0 var(--s-sm); } .eyebrow.gold { color: var(--yellow-1); } .h-thumb { font-family: var(--font-display); font-weight: 500; font-size: 5.5rem; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; } .n-large { font-family: var(--font-display); font-weight: 500; font-size: 3rem; line-height: 1; } .t-body { font-size: 1rem; line-height: 1.5; color: var(--text-soft); } .t-lead { font-size: 1.125rem; line-height: 1.6; color: var(--text-soft); } .t-caption { font-size: 0.75rem; color: var(--text-muted); } /* Word coloring 3-tone */ .w-green { color: var(--green-1); text-shadow: 0 0 16px rgba(15, 252, 132, 0.3); } .w-gold { color: var(--yellow-1); text-shadow: 0 0 16px rgba(255, 220, 0, 0.3); } /* ═══════════════════════════════════════════════════════════ Components ═══════════════════════════════════════════════════════════ */ /* CTA primário verde (conversion principal) @status canonical | @since 2025-09 | @sources all-landings @states default, hover, focus-visible, active, disabled */ .cta-green { display: inline-flex; align-items: center; gap: var(--s-md); background: var(--gradient-green); color: #000; padding: 16px 22px 16px 28px; border-radius: var(--r-md); font-family: var(--font-body); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; box-shadow: var(--glow-green), var(--cta-inner); transition: all 0.2s ease; border: 0; cursor: pointer; } .cta-green:hover { transform: translateY(-2px); filter: brightness(1.05); } .cta-green:active { transform: translateY(0); filter: brightness(0.95); } .cta-green:disabled, .cta-green[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; filter: grayscale(0.4); } .cta-green:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; } .cta-green::after { content: "→"; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; background: #fff; color: #000; border-radius: 50%; font-weight: 700; } /* CTA amarelo (secundário) @status canonical | @since 2025-09 | @sources 4-landings @states default, hover, focus-visible, active, disabled */ .cta-yellow { display: inline-flex; align-items: center; gap: var(--s-md); background: var(--gradient-yellow); color: #000; padding: 16px 22px 16px 28px; border-radius: var(--r-md); font-family: var(--font-body); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; box-shadow: var(--glow-yellow), var(--cta-inner); transition: all 0.2s ease; border: 0; cursor: pointer; } .cta-yellow:hover { transform: translateY(-2px); filter: brightness(1.05); } .cta-yellow:active { transform: translateY(0); filter: brightness(0.95); } .cta-yellow:disabled, .cta-yellow[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; filter: grayscale(0.4); } .cta-yellow:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; } .cta-yellow::after { content: "→"; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; background: #fff; color: #000; border-radius: 50%; font-weight: 700; } /* Alert bar topo */ .alert-bar { position: sticky; top: 0; z-index: 100; background: var(--gradient-alert); color: #fff; padding: 10px var(--s-md); font-family: var(--font-body); font-weight: 700; font-size: 0.875rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; } .alert-bar strong { color: var(--yellow-1); } /* Card padrão — glass discreto */ .card { background: linear-gradient(180deg, rgba(15, 50, 35, 0.55) 0%, rgba(5, 25, 20, 0.4) 100%); border: 1px solid rgba(26, 77, 58, 0.6); border-radius: var(--r-md); padding: var(--s-xl) var(--s-lg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--glow-green-soft), inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* Card title — Sora 700 uppercase (NAO PF Fusion). Reservar PF Fusion so pra h-hero, h-section e numeros grandes (.stat-num, .ct-num, .big). */ .card-title { font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 var(--s-md); color: var(--text); } /* Variante grande do card-title (quando o card e o foco da secao) */ .card-title.lg { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.01em; } /* Card variant com border accent vertical (substitui emoji "categoria") */ .card.accent-green { border-left: 3px solid var(--green-1); } .card.accent-gold { border-left: 3px solid var(--yellow-1); } .card.accent-alert { border-left: 3px solid var(--red-alert); background: linear-gradient(180deg, rgba(110, 10, 16, 0.25) 0%, rgba(5, 25, 20, 0.4) 100%); } /* Stat card — glass */ .stat-card { background: var(--gradient-card-glass); border: 1px solid var(--border-glass); border-radius: var(--r-md); padding: var(--s-md) var(--s-lg); text-align: center; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .stat-num { font-family: var(--font-display); font-weight: 500; font-size: 2.5rem; line-height: 1; color: var(--green-1); } .stat-label { font-family: var(--font-body); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.08em; margin-top: 6px; } /* Pill subject (amarelo) */ .pill-subject { display: inline-block; background: var(--gradient-yellow); color: #000; border-radius: var(--r-sm); padding: 3px 10px; font-family: var(--font-body); font-weight: 700; font-size: 0.9375rem; } /* Pill metadata (Sora 700 uppercase) */ .pill-stamp { display: inline-flex; align-items: center; gap: 6px; background: var(--gradient-yellow); color: #000; padding: 8px 16px; border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; } /* Pill time (preto com clock) */ .pill-time { display: inline-flex; align-items: center; gap: 6px; background: #000; color: #fff; border: 1px solid var(--border-card); border-radius: var(--r-sm); padding: 6px 12px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; } /* Schedule row */ .schedule-row { display: grid; grid-template-columns: 100px 1fr; gap: var(--s-md); background: var(--gradient-card-surface); border: 1px solid var(--border-card); border-radius: var(--r-md); padding: var(--s-md); transition: all 0.2s ease; } .schedule-row:hover { border-color: var(--green-1); transform: translateX(4px); box-shadow: var(--glow-green-soft); } /* Logo treatment */ .logo { filter: drop-shadow(0 0 24px rgba(15, 252, 132, 0.3)); display: block; } /* Layout helpers — usar padding-inline/block pra evitar conflito quando .section + .container combinam */ .container { max-width: 1100px; margin: 0 auto; padding-inline: var(--s-lg); } @media (min-width: 768px) { .container { padding-inline: var(--s-xl); } } /* Section padding mobile-first: 32px mobile, 64px desktop (so block, lateral fica do container) */ .section { padding-block: var(--s-xl); } @media (min-width: 768px) { .section { padding-block: var(--s-3xl); } } .center { text-align: center; } /* Pill time icon usando SVG inline ao invés de emoji ⌚ */ .pill-time::before { content: ""; display: inline-block; width: 12px; height: 12px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230FFC84'><path d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 110-16 8 8 0 010 16zm.5-13H11v6l5.2 3.1.8-1.3-4.5-2.7V7z'/></svg>"); background-size: contain; background-repeat: no-repeat; } /* ═══════════════════════════════════════════════════════════ Componentes promovidos (originados em landings, generalizados) ═══════════════════════════════════════════════════════════ */ /* Confirm bar — variante green da alert-bar pra confirmação positiva @status canonical | @since 2026-05 | @sources 1 @a11y wrap em role="status" aria-live="polite" se for dinamico */ .confirm-bar { position: sticky; top: 0; z-index: 100; background: linear-gradient(180deg, rgba(15, 252, 132, 0.12) 0%, rgba(15, 252, 132, 0.04) 100%); border-bottom: 1px solid rgba(15, 252, 132, 0.35); color: var(--text); padding: 10px var(--s-md); font-family: var(--font-body); font-weight: 700; font-size: 0.8125rem; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em; text-align: center; } .confirm-bar strong { color: var(--green-1); font-weight: 700; } .confirm-bar svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; color: var(--green-1); } @media (min-width: 768px) { .confirm-bar { font-size: 0.875rem; padding: 12px var(--s-md); } } /* Countdown timer (4-cell grid: dias / horas / min / seg) @status canonical | @since 2026-05 | @sources 1 @a11y use role="timer" aria-live="polite" aria-atomic="true" no wrapper */ .countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-sm); max-width: 480px; margin: var(--s-md) auto; } .countdown .ct-cell { background: var(--bg-base); border: 1px solid var(--border-card); border-radius: var(--r-md); padding: var(--s-sm) var(--s-xs); text-align: center; } .countdown .ct-num { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1; color: var(--green-1); font-variant-numeric: tabular-nums; } .countdown .ct-label { font-family: var(--font-body); font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 2px; } /* Avatar circular com iniciais (substitui emoji 👨‍🎓 / 👩‍🏫) */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(180deg, var(--bg-card-elevated) 0%, var(--bg-card) 100%); border: 1px solid var(--border-card); color: var(--green-1); font-family: var(--font-body); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.04em; flex-shrink: 0; } .avatar.lg { width: 48px; height: 48px; font-size: 0.875rem; } /* Meta chip — pill horizontal com SVG inline (calendar / clock / play / etc) */ .meta-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--gradient-card-surface); border: 1px solid var(--border-card); border-radius: var(--r-pill); padding: 6px 14px; font-family: var(--font-body); font-weight: 600; font-size: 0.8125rem; color: var(--text-soft); } .meta-chip svg { width: 14px; height: 14px; color: var(--green-1); flex-shrink: 0; } .meta-chip.gold { color: var(--yellow-1); border-color: rgba(255, 220, 0, 0.3); } .meta-chip.gold svg { color: var(--yellow-1); } /* Thumb frame — wrapper de imagem/vídeo com glow neon */ .thumb-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--glow-green-soft); } .thumb-frame img, .thumb-frame iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; } /* Lesson card — card horizontal de aula (thumb + título + meta + CTAs) @status canonical | @since 2026-05 | @sources 1 */ .lesson-card { display: grid; grid-template-columns: 1fr; gap: var(--s-md); background: var(--gradient-card-glass); border: 1px solid var(--border-glass); border-radius: var(--r-md); padding: var(--s-md); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: all 0.2s ease; } .lesson-card:hover { border-color: var(--green-1); box-shadow: var(--glow-green-soft); } @media (min-width: 640px) { .lesson-card { grid-template-columns: 220px 1fr; align-items: center; } } .lesson-card .lesson-info { display: grid; gap: var(--s-sm); } .lesson-card .lesson-title { font-family: var(--font-body); font-weight: 700; font-size: 1.0625rem; line-height: 1.25; letter-spacing: 0; margin: 0; color: var(--text); } .lesson-card .lesson-meta { display: flex; flex-wrap: wrap; gap: var(--s-sm); font-size: 0.8125rem; color: var(--text-muted); } .lesson-card .lesson-actions { display: flex; flex-wrap: wrap; gap: var(--s-sm); } /* Botão Add to Calendar — variante outline/ghost com SVG */ .btn-calendar { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--green-1); border: 1px solid var(--green-1); padding: 10px 16px; border-radius: var(--r-md); font-family: var(--font-body); font-weight: 700; font-size: 0.875rem; text-decoration: none; cursor: pointer; transition: all 0.15s ease; } .btn-calendar:hover { background: rgba(15, 252, 132, 0.08); } .btn-calendar:focus-visible { outline-color: var(--green-1); } .btn-calendar:disabled, .btn-calendar[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .btn-calendar svg { width: 16px; height: 16px; } .btn-calendar.gold { color: var(--yellow-1); border-color: var(--yellow-1); } .btn-calendar.gold:hover { background: rgba(255, 220, 0, 0.08); } .btn-calendar.gold:focus-visible { outline-color: var(--yellow-1); } /* ═══════════════════════════════════════════════════════════ Form components — captura de leads @status canonical | @since 2026-05 | @sources 0 (novo, pra v4) @a11y label associado via for/id; aria-invalid + aria-describedby pra erro ═══════════════════════════════════════════════════════════ */ .form-group { display: grid; gap: var(--s-xs); margin-bottom: var(--s-md); } .form-label { font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; color: var(--text); letter-spacing: 0.01em; } .form-label .required { color: var(--yellow-1); margin-left: 2px; } .form-input, .form-textarea, .form-select { font-family: var(--font-body); font-size: 1rem; color: var(--text); background: var(--gradient-card-glass); border: 1px solid var(--border-glass); border-radius: var(--r-md); padding: 12px 14px; width: 100%; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); } .form-input:hover, .form-textarea:hover, .form-select:hover { border-color: rgba(15, 252, 132, 0.4); } .form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--green-1); box-shadow: 0 0 0 3px rgba(15, 252, 132, 0.18); } .form-input:disabled, .form-textarea:disabled, .form-select:disabled { opacity: 0.5; cursor: not-allowed; } .form-input[aria-invalid="true"], .form-textarea[aria-invalid="true"] { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); } .form-help { font-size: 0.8125rem; color: var(--text-muted); } .form-error { font-size: 0.8125rem; color: #ef4444; display: flex; align-items: center; gap: 6px; } .form-error::before { content: ""; width: 14px; height: 14px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12' stroke='white' stroke-width='2'/><line x1='12' y1='16' x2='12.01' y2='16' stroke='white' stroke-width='2'/></svg>"); background-size: contain; background-repeat: no-repeat; flex-shrink: 0; } .form-success { font-size: 0.8125rem; color: var(--green-1); display: flex; align-items: center; gap: 6px; } .form-success::before { content: ""; width: 14px; height: 14px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230FFC84' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); background-size: contain; background-repeat: no-repeat; flex-shrink: 0; } /* Checkbox e radio */ .form-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } .form-check input[type="checkbox"], .form-check input[type="radio"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green-1); cursor: pointer; flex-shrink: 0; } .form-check label { font-size: 0.9375rem; color: var(--text-soft); cursor: pointer; } /* ═══════════════════════════════════════════════════════════ Modal — pra popup de captura, oferta, confirmação @status canonical | @since 2026-05 | @sources 0 (novo, pra v4) @a11y role="dialog" aria-modal="true" aria-labelledby="..."; ESC fecha; focus trap ═══════════════════════════════════════════════════════════ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--s-md); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .modal-backdrop[aria-hidden="false"], .modal-backdrop.open { opacity: 1; pointer-events: auto; } .modal { position: relative; background: linear-gradient(180deg, rgba(15, 50, 35, 0.95) 0%, rgba(5, 25, 20, 0.92) 100%); border: 1px solid var(--border-glass); border-radius: var(--r-lg); padding: var(--s-2xl); max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6), var(--glow-green-soft); transform: translateY(20px); transition: transform 0.2s ease; } .modal-backdrop[aria-hidden="false"] .modal, .modal-backdrop.open .modal { transform: translateY(0); } .modal-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-card); color: var(--text-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; } .modal-close:hover { background: rgba(15, 252, 132, 0.1); color: var(--green-1); } .modal-close:focus-visible { outline-color: var(--green-1); } .modal-title { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 var(--s-sm); } .modal-body { color: var(--text-soft); margin-bottom: var(--s-lg); } .modal-actions { display: flex; gap: var(--s-sm); flex-wrap: wrap; } /* ═══════════════════════════════════════════════════════════ Toast — notificacao apos acao (sucesso, erro, info) @status canonical | @since 2026-05 | @sources 0 (novo, pra v4) @a11y role="status" aria-live="polite" ═══════════════════════════════════════════════════════════ */ .toast-container { position: fixed; top: 20px; right: 20px; z-index: 1100; display: grid; gap: 8px; pointer-events: none; } @media (max-width: 480px) { .toast-container { left: 16px; right: 16px; top: 16px; } } .toast { pointer-events: auto; background: linear-gradient(180deg, rgba(15, 50, 35, 0.95) 0%, rgba(5, 25, 20, 0.92) 100%); border: 1px solid var(--border-glass); border-left: 3px solid var(--green-1); border-radius: var(--r-md); padding: 14px 18px; min-width: 280px; max-width: 420px; display: flex; align-items: flex-start; gap: 12px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); animation: toast-in 0.25s ease-out; } @keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .toast.success { border-left-color: var(--green-1); } .toast.success .toast-icon { color: var(--green-1); } .toast.error { border-left-color: #ef4444; } .toast.error .toast-icon { color: #ef4444; } .toast.warning { border-left-color: var(--yellow-1); } .toast.warning .toast-icon { color: var(--yellow-1); } .toast-icon { flex-shrink: 0; width: 20px; height: 20px; } .toast-body { flex: 1; } .toast-title { font-weight: 700; font-size: 0.875rem; color: var(--text); margin: 0 0 2px; } .toast-msg { font-size: 0.8125rem; color: var(--text-soft); margin: 0; } /* ═══════════════════════════════════════════════════════════ Footer canônico — pra evitar repetição em cada landing @status canonical | @since 2026-05 | @sources promove de 5 landings ═══════════════════════════════════════════════════════════ */ .footer-canonical { border-top: 1px solid var(--border-card); padding: var(--s-2xl) var(--s-md); text-align: center; color: var(--text-muted); font-size: 0.875rem; } .footer-canonical p { margin: 0 0 8px; } .footer-canonical .footer-meta { font-size: 0.75rem; color: var(--text-muted); } .footer-canonical a { color: var(--text-muted); text-decoration: none; transition: color 0.15s ease; } .footer-canonical a:hover { color: var(--green-1); } .footer-canonical .footer-links { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .footer-canonical .footer-links a::after { content: "·"; margin-left: 8px; color: var(--text-muted); } .footer-canonical .footer-links a:last-child::after { content: ""; } /* Lifecycle markers nos componentes ja existentes (apenas comentários documentais, sem regras CSS) @status canonical: cta-green, cta-yellow, alert-bar, .card e variants stat-card, schedule-row, pill-time, pill-subject, pill-stamp, logo, container, section, eyebrow, bullets, w-green, w-gold @status canonical (novos v4): skip-link, sr-only, form-*, modal*, toast*, footer-canonical */ ``` --- **Bundle gerado:** 2026-06-20 · commit `528de85` **Repo:** https://github.com/lauropilatti-c01/lp-c01 **Brandbook online:** https://lp.c01.com.br/_brandbook/