/* ========================================================================= Xentory — Design System (v1 · Swiss/minimal claro) Identidade v1: sky-blue + laranja sobre fundo claro. Plus Jakarta Sans. Anti-hype = clareza e confiança de compra, não glow nem hype visual. Fonte do design: site/_design-exploration/v1-swiss.html (spec 0020). Este arquivo faz DUAS coisas: 1. Veste o chrome ESTRUTURAL que o site já usa (.site-header, .site-footer, .container, .prose, .ops, .loop, .cmp-banner, .legal, etc.) com o visual v1. 2. Fornece os COMPONENTES v1 como classes reutilizáveis para novas LPs (.btn-cta, .icon-box, .price-card, .lead-magnet, FAQ
, .fit, etc.). Regras: mobile-first · sem 3D/WebGL · contraste WCAG >= 4.5:1 · :focus-visible · prefers-reduced-motion. Comentado por seção. ========================================================================= */ /* ====================== 0. FONTES (self-hosted) ======================== Plus Jakarta Sans self-hospedada (SIL OFL — ver assets/fonts/OFL.txt). Elimina o render-block do Google Fonts (~834ms confirmado no /qa-lp). É uma fonte VARIÁVEL: 1 woff2 por subset cobre o eixo de peso 400–700, por isso o mesmo arquivo é referenciado em todos os font-weight. Subsets latin + latin-ext (acentos pt-BR). font-display: swap. Os pesos críticos (latin) são pré-carregados via no . ----------------------------------------------------------------------- */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 700; /* eixo variável: cobre 400/500/600/700 */ font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-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: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-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; } /* Fallback ajustado por métrica: enquanto a webfont carrega (swap), o texto usa Arial reescalado para casar as métricas de Plus Jakarta Sans → swap sem CLS. Valores Capsize/fontaine (PJS sobre Arial). Entra em --font-sans ANTES das fontes de sistema cruas, para que o fallback do swap seja o ajustado. */ @font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Arial"); ascent-override: 92.7%; descent-override: 23.16%; line-gap-override: 0%; size-adjust: 104.34%; } /* ============================ 1. TOKENS (:root) ========================= */ :root { /* --- Cores (v1) --- */ --bg: #F0F9FF; /* fundo geral (sky-50) */ --surface: #FFFFFF; /* superfície de card/painel */ --primary: #0EA5E9; /* sky-500 — acento de marca (NÃO-textual: ícones/bordas/fills) */ --primary-text: #0369A1; /* sky-700 — variante textual do acento (WCAG AA: 5.9:1 s/ branco, 5.6:1 s/ sky-50) */ --secondary: #38BDF8; /* sky-400 — acento claro (decorativo) */ --cta: #C2410C; /* orange-700 — ação principal (branco 5.2:1, AA) */ --cta-hover: #9A3412; /* orange-800 — hover do CTA (branco 7.3:1, AA; distinto do base) */ --ink: #0C4A6E; /* texto principal (sky-900) */ --muted: #475569; /* texto secundário (slate-600, AA sobre claro) */ --border: #E2E8F0; /* hairline (slate-200) */ --border-strong: #CBD5E1; /* hairline de destaque (slate-300) */ /* Aliases de compatibilidade: nomes que o CSS/HTML antigos esperavam. Mantidos para que nada referencie variável inexistente. */ --text: var(--ink); --panel: var(--surface); --line: var(--border); --line-bright:var(--border-strong); --ink-muted: var(--muted); --warn: var(--cta); /* --- Tipografia: Plus Jakarta Sans (self-hosted; @font-face na seção 0) --- "Plus Jakarta Sans Fallback" (Arial reescalado) absorve o swap sem CLS. */ --font-sans: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Escala clamp() da v1 */ --fs-h1: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); --fs-h3: clamp(1.15rem, 1.05rem + 0.6vw, 1.4rem); --fs-lead: clamp(1.05rem, 0.98rem + 0.5vw, 1.25rem); --fs-body: 1rem; --fs-small: 0.85rem; --lh-tight: 1.15; --lh-body: 1.6; /* --- Forma / espaço --- */ --radius-sm: 10px; --radius: 14px; --radius-lg: 18px; --maxw: 1120px; --maxw-prose: 42rem; --gap: clamp(36px, 5.5vw, 72px); /* espaço vertical entre seções */ --pad-x: 24px; /* Espaçamentos nomeados (compat com HTML que usa var(--space-*) inline) */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem; /* --- Sombras (tons de sky-900 rgba) --- */ --shadow-sm: 0 4px 18px -14px rgba(12, 74, 110, 0.35); --shadow: 0 14px 40px -22px rgba(12, 74, 110, 0.45); --shadow-lg: 0 20px 50px -30px rgba(12, 74, 110, 0.50); --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ============================ 2. RESET / BASE =========================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { max-width: 100%; display: block; height: auto; } a { color: var(--primary-text); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } h1, h2, h3 { font-family: var(--font-sans); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--space-2); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; } p { margin: 0 0 var(--space-2); color: var(--muted); } strong, b { color: var(--ink); font-weight: 600; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.1em 0.4em; } /* Foco visível (a11y) */ :focus-visible { outline: 3px solid var(--primary-text); outline-offset: 3px; border-radius: 6px; } /* Skip link (estrutural — preservado) */ .skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--ink); color: #fff; font-size: var(--fs-small); font-weight: 600; padding: var(--space-1) var(--space-2); border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } /* ============================ 3. LAYOUT / UTILS ========================= */ /* .container = grade principal do site (estrutural — preservado) */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); } /* .wrap = equivalente da v1 (alias para LPs novas que usam .wrap) */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); } .prose { max-width: var(--maxw-prose); } .muted { color: var(--muted); } .small { font-size: var(--fs-small); } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .center { text-align: center; } .center .eyebrow { display: inline-block; } /* .section = bloco vertical (estrutural — preservado). Usa o gap da v1. */ .section { padding-block: var(--gap); border-top: 1px solid var(--border); } /*
nu (LPs v1 que não usam .section) */ section { padding-block: var(--gap); } /* .section-tag (home) e .eyebrow (v1) — mesmo papel: rótulo de seção. */ .section-tag, .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-text); margin-bottom: 14px; } /* .lead = subtítulo de seção/hero */ .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); } .center .lead { max-width: 62ch; margin-inline: auto; } /* ============================ 4. HEADER (sticky + blur) ================= */ /* .site-header = chrome real do site. header.site = variante v1 p/ LPs. */ .site-header, header.site { position: sticky; top: 0; z-index: 50; background: rgba(240, 249, 255, 0.85); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 62px; } /* .nav da v1 (LP): wrapper flex de header */ header.site .nav, .site-header .nav-wrap { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--pad-x); max-width: var(--maxw); margin-inline: auto; } /* Marca / logo */ .brand, .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); } .brand:hover, .logo:hover { text-decoration: none; } .brand .logo-mark { width: 30px; height: 30px; flex: 0 0 auto; } .logo .mark { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; background: var(--primary); display: grid; place-items: center; color: #fff; } /* Nav de links (home) */ .site-header .nav { display: flex; gap: var(--space-3); align-items: center; } .site-header .nav a { color: var(--muted); font-size: 0.95rem; font-weight: 500; } .site-header .nav a:hover { color: var(--primary-text); text-decoration: none; } /* CTA no header (v1) */ header.site .btn, .site-header .nav .btn { padding: 11px 18px; font-size: 0.92rem; } /* o .btn-cta do header precisa vencer o `.nav a { color: var(--muted) }` (especificidade) */ .site-header .nav a.btn-cta, .site-header .nav a.btn-cta:hover { color: #fff; } @media (max-width: 640px) { .site-header .nav { gap: var(--space-2); } .nav-hide-sm { display: none; } /* CTA do header atropela o layout apertado do mobile; o CTA do hero (topo) e a barra sticky de compra (no scroll) cobrem a conversão. */ .site-header .nav .btn-cta { display: none; } } /* ============================ 5. BOTÕES ================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1; padding: 16px 28px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background 0.18s var(--ease), transform 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease); } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn svg { flex: 0 0 auto; } /* CTA laranja (ação principal) */ .btn-cta { background: var(--cta); color: #fff; border-color: var(--cta); } .btn-cta:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: #fff; } /* Botão fantasma (secundário) */ .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--border-strong); } .btn-ghost:hover { border-color: var(--primary); color: var(--ink); } /* .btn-primary = alias usado pelo HTML atual (home/forms/CMP) → estilo CTA. */ .btn-primary { background: var(--cta); color: #fff; border-color: var(--cta); } .btn-primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); transform: translateY(-1px); } /* Linha de CTAs (home: .cta-row · v1: .hero-cta) */ .cta-row, .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--space-4); } /* ============================ 6. HERO ================================== */ .hero { padding-top: clamp(32px, 4.5vw, 56px); } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } .hero-main { max-width: 36rem; } .hero h1 { font-size: var(--fs-h1); margin-bottom: var(--space-3); } .hero .sub, .hero .lead { font-size: var(--fs-lead); margin-top: 20px; max-width: 54ch; color: var(--muted); } /* Selo de confiança (v1) */ .trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; font-size: 0.9rem; color: var(--muted); } .trust span { display: inline-flex; align-items: center; gap: 7px; } .trust svg { color: var(--primary); } /* Visual do hero (card de capa/preview) */ .hero-visual { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } /* Placeholder hachurado (usado só em exploração; sem peso) */ .ph { width: 100%; background: repeating-linear-gradient(45deg, #EEF4F9, #EEF4F9 14px, #E6EEF5 14px, #E6EEF5 28px); border: 1px solid var(--border); border-radius: var(--radius-sm); display: grid; place-items: center; color: #5B7184; font-size: 0.85rem; font-weight: 500; } /* Imagem de produto dentro do card .hero-visual */ .product-media { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); } .product-media.cover { max-width: 320px; margin-inline: auto; box-shadow: 0 18px 44px -14px rgba(12, 74, 110, 0.4); } /* asset-pack: imagem menor e centrada (não preenche o card todo) */ .product-media.compact { max-width: 300px; margin-inline: auto; } @media (min-width: 960px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; } } /* ====================== 7. OPS READOUT (home, assinatura) ============== */ /* Painel de métricas ilustrativas no hero da home. Reestilizado p/ v1 claro. */ .ops { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .ops::before { /* faixa de acento no topo */ content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); } .ops-head, .ops-row, .ops-foot { padding: 0.8rem 1rem; } .ops-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); } .ops-dot { color: var(--primary-text); margin-right: 0.35rem; } .ops-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--border); } .ops-row .l { display: flex; flex-direction: column; gap: 0.1rem; } .ops-k { color: var(--primary-text); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; } .ops-g { color: var(--muted); font-size: 0.7rem; } .ops-v { color: var(--ink); font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; } .ops-v.ok { color: var(--primary-text); font-size: 0.85rem; } .ops-foot { color: var(--muted); font-size: 0.72rem; line-height: 1.5; } /* ====================== 8. CARDS / GRIDS / LISTAS ====================== */ .grid-2 { display: grid; grid-template-columns: 1fr; gap: 28px; } .grid-3 { display: grid; grid-template-columns: 1fr; gap: 24px; } .grid-4 { display: grid; grid-template-columns: 1fr; gap: 24px; } /* Responsivo DEPOIS da base (senão a base sobrescreve por ordem de fonte). */ @media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1080px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); } .card h3 { margin-top: 0; margin-bottom: 10px; } /* Ícone-box 44px (v1) */ .icon-box { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border); display: grid; place-items: center; color: var(--primary); margin-bottom: 18px; } /* Lista de checks (v1) */ ul.checks { list-style: none; display: grid; gap: 16px; margin: 0; padding: 0; } ul.checks li { display: flex; gap: 12px; align-items: flex-start; } ul.checks li svg { flex: 0 0 auto; margin-top: 3px; color: var(--primary); } ul.checks li b { color: var(--ink); font-weight: 600; } /* ====================== 9. MÉTODO = loop (home) ======================== */ .loop { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .loop-step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); } .loop-step:last-child { border-bottom: none; } .loop-step::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background 0.2s var(--ease); } .loop-step:hover::before { background: var(--primary); } .step-num { font-size: 1.5rem; font-weight: 700; color: var(--primary-text); line-height: 1; padding-top: 0.15rem; font-variant-numeric: tabular-nums; } .loop-step h3 { margin-bottom: 0.4rem; } .loop-step p { margin: 0; color: var(--muted); } /* ====================== 10. SERVE / NÃO-SERVE (v1) ===================== */ .fit { border-top: 4px solid var(--primary); } .fit.no { border-top-color: var(--border-strong); } /* ====================== 11. PREÇO / OFERTA (v1) ======================== */ .price-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 52px); text-align: center; max-width: 680px; margin-inline: auto; box-shadow: var(--shadow-lg); } .price-tag { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 18px 0 6px; } .price-tag .amt { font-size: clamp(3rem, 8vw, 4.5rem); font-weight: 700; color: var(--ink); letter-spacing: -0.03em; line-height: 1; } .price-tag .cur { font-size: 1.4rem; font-weight: 600; color: var(--ink); } .price-note { font-size: 0.95rem; color: var(--muted); } .ladder { display: inline-flex; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--muted); background: var(--bg); border: 1px solid var(--border); padding: 8px 14px; border-radius: 999px; margin-top: 14px; } .ladder svg { color: var(--primary); } .price-card ul.checks { text-align: left; max-width: 420px; margin: 28px auto; justify-items: start; } .price-card .btn-cta, .price-card .btn-primary { width: 100%; max-width: 420px; margin: 8px auto 0; } .disclosure { font-size: 0.82rem; color: var(--muted); margin-top: 16px; } /* Garantia (v1) */ .guarantee { display: flex; flex-direction: column; gap: 20px; align-items: center; flex-wrap: wrap; justify-content: center; text-align: center; } .guarantee .seal { width: 72px; height: 72px; border-radius: 50%; background: var(--bg); border: 2px solid var(--primary); display: grid; place-items: center; color: var(--primary); } /* ====================== 12. LEAD MAGNET (v1) ========================== */ .lead-magnet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(30px, 5vw, 48px); box-shadow: var(--shadow-lg); } .form-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .form-row input[type="email"], .form-row input[type="text"] { flex: 1 1 240px; font-family: inherit; font-size: 1rem; padding: 15px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; color: var(--ink); } .form-row input::placeholder { color: #64748B; } .form-row .btn-cta, .form-row .btn-primary { flex: 0 0 auto; } .form-note { font-size: 0.8rem; color: var(--muted); margin-top: 12px; } /* ====================== 13. FORMS (estrutural — home/contato) ========= */ .form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-2); } .form-field label { font-size: 0.85rem; font-weight: 600; color: var(--ink); } .form-field input, .form-field textarea { font-family: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 14px 16px; } .form-field input::placeholder, .form-field textarea::placeholder { color: #64748B; } .form-field input:focus, .form-field textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18); } .form-status { font-size: var(--fs-small); margin-top: var(--space-1); min-height: 1.2em; } .form-status[data-state="ok"] { color: #0F766E; } /* teal-700, AA sobre claro */ .form-status[data-state="err"] { color: #B91C1C; } /* red-700, AA sobre claro */ /* ====================== 14. FAQ
(v1) ======================== */ .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0; margin-bottom: 14px; overflow: hidden; } .faq summary { list-style: none; cursor: pointer; padding: 22px 24px; font-weight: 600; color: var(--ink); font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq summary::-webkit-details-marker { display: none; } .faq summary .chev { transition: transform 0.2s var(--ease); color: var(--primary-text); flex: 0 0 auto; } .faq details[open] summary .chev { transform: rotate(180deg); } .faq .ans { padding: 0 24px 22px; color: var(--muted); } .faq-disclaimer { margin-top: 26px; font-size: 0.9rem; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-sm); padding: 18px 20px; } /* ====================== 15. CTA FINAL (v1) ============================ */ .final { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .final .inner { text-align: center; max-width: 680px; margin-inline: auto; } /* ====================== 16. DISCLOSURE DE AFILIADO ==================== */ .affiliate-disclosure { display: block; font-size: var(--fs-small); line-height: 1.6; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-block: var(--space-4) 0; } .affiliate-disclosure strong { color: var(--ink); } /* ====================== 17. CONTEÚDO LEGAL =========================== */ .legal { max-width: var(--maxw-prose); } .legal h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); margin-bottom: var(--space-3); } .legal h2 { font-size: var(--fs-h2); margin-top: var(--space-4); } .legal h3 { font-size: var(--fs-h3); margin-top: var(--space-3); } .legal ul { padding-left: 1.2rem; color: var(--muted); } .legal li { margin-bottom: 0.4rem; } .legal a { color: var(--primary-text); text-decoration: underline; text-underline-offset: 2px; } .placeholder { font-family: ui-monospace, monospace; font-size: 0.85em; color: var(--cta-hover); } /* ====================== 18. FOOTER =================================== */ /* .site-footer = footer real do site. footer.site = variante v1 p/ LPs. */ .site-footer, footer.site { background: var(--bg); border-top: 1px solid var(--border); margin-top: 0; padding-block: 44px 56px; font-size: 0.9rem; color: var(--muted); } .site-footer .container, footer.site .frow { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: flex-start; } .site-footer strong, footer.site strong { color: var(--ink); font-weight: 700; } .site-footer nav, footer .links { display: flex; flex-wrap: wrap; gap: 18px; } .site-footer a, footer .links a { color: var(--muted); text-decoration: none; } .site-footer a:hover, footer .links a:hover { color: var(--primary-text); } footer .brand-disc { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); max-width: 70ch; font-size: 0.84rem; } /* ====================== 19. BANNER DE CONSENTIMENTO (CMP) ============= */ /* Injetado por consent.js — classes não podem mudar. */ .cmp-banner { position: fixed; inset: auto 0 0 0; z-index: 80; background: var(--surface); border-top: 1px solid var(--border-strong); box-shadow: 0 -10px 30px -20px rgba(12, 74, 110, 0.5); padding: var(--space-3); transform: translateY(110%); transition: transform 0.3s var(--ease); } .cmp-banner::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); } .cmp-banner[data-open="true"] { transform: translateY(0); } .cmp-banner .cmp-inner { max-width: var(--maxw); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .cmp-banner p { flex: 1 1 320px; margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--muted); } .cmp-banner a { color: var(--primary-text); } .cmp-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .cmp-actions .btn { padding: 0.7rem 1.15rem; font-size: 0.92rem; } /* ====================== 21. LP CONVERSÃO (v2) ======================== */ /* Listas escaneáveis — hero (.sub-bullets), problema (.pain-list / .check-list) */ .sub-bullets, .pain-list, .check-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; } .sub-bullets li, .pain-list li, .check-list li { position: relative; padding-left: 28px; color: var(--muted); line-height: 1.5; } .sub-bullets li b, .pain-list li b, .check-list li b { color: var(--ink); font-weight: 600; } .sub-bullets li::before { content: ""; position: absolute; left: 6px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); } .pain-list li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 2px; background: var(--cta); } .check-list li::before { content: "✓"; position: absolute; left: 2px; top: -1px; color: var(--primary-text); font-weight: 700; } .vs-block { margin-top: 22px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-sm); padding: 20px 22px; text-align: left; } .vs-block > p:first-child { color: var(--ink); margin-bottom: 8px; } .vs-block > p:last-child { margin-bottom: 0; } /* Outcome 'Você sai...' nos cards do currículo */ .takeaway { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--ink); font-size: 0.95rem; } .takeaway b { color: var(--primary-text); } /* Autoridade do autor */ .authority { max-width: 720px; margin-inline: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(24px, 4vw, 36px); } .authority .who { display: flex; align-items: center; gap: 14px; margin-top: 18px; } .authority .who .avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border-strong); display: grid; place-items: center; color: var(--primary); flex: 0 0 auto; } .authority .who b { color: var(--ink); } .authority .who span { color: var(--muted); font-size: 0.9rem; } .authority .who .avatar-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 40%; border: 1px solid var(--border-strong); flex: 0 0 auto; display: block; } .authority .who-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--primary-text); font-size: 0.85rem; font-weight: 500; } .authority .who-link:hover { text-decoration: underline; } .authority .who-link svg { flex: 0 0 auto; } /* Faixa de oferta no hero */ .offer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--muted); } .offer-bar .now { font-size: 1.3rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; } .offer-bar .tag { font-size: 0.78rem; font-weight: 600; color: var(--primary-text); background: var(--bg); border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; } .offer-bar .step { font-variant-numeric: tabular-nums; } /* Demonstração — artefatos reais */ .demo-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 36px; } .demo-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .demo-card > h3 { margin: 0; padding: 18px 20px 0; } .demo-card > p { margin: 0; padding: 6px 20px 0; color: var(--muted); } .demo-table { width: calc(100% - 40px); margin: 14px 20px 20px; border-collapse: collapse; font-size: 0.9rem; } .demo-table th, .demo-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .demo-table thead th { color: var(--muted); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; } .demo-table tbody td { color: var(--muted); } .demo-table tbody td b { color: var(--ink); font-weight: 600; } .demo-table tbody tr:last-child td { border-bottom: none; } .code-snip { margin: 14px 0 0; background: #0C2A3E; color: #CFE8F5; border-top: 1px solid var(--border); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; line-height: 1.6; padding: 16px 20px; overflow-x: auto; white-space: pre; } .code-snip .c { color: #6FA8C7; } .code-snip .k { color: #7FD4A8; } .demo-card > img.product-media { border-radius: 0; margin-top: 0; } /* Moldura honesta de lote (price-card) */ .lot-frame { margin: 16px auto 0; max-width: 460px; text-align: left; background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-sm); padding: 13px 16px; font-size: 0.88rem; color: var(--muted); } .lot-frame b { color: var(--ink); } /* Eco de garantia colado ao botão */ .guarantee-echo { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.9rem; color: var(--muted); text-align: left; } .guarantee-echo svg { color: var(--primary); flex: 0 0 auto; } /* Barra sticky de compra (mobile/tablet) */ .buybar { position: fixed; inset: auto 0 0 0; z-index: 70; background: var(--surface); border-top: 1px solid var(--border-strong); box-shadow: 0 -10px 30px -20px rgba(12, 74, 110, 0.5); padding: 10px 14px; transform: translateY(110%); transition: transform 0.3s var(--ease); } .buybar[data-show="true"] { transform: translateY(0); } .buybar .inner { max-width: var(--maxw); margin-inline: auto; display: flex; align-items: center; gap: 12px; justify-content: space-between; } .buybar .bb-info { display: flex; flex-direction: column; line-height: 1.2; } .buybar .bb-info b { color: var(--ink); font-size: 0.95rem; } .buybar .bb-info span { color: var(--muted); font-size: 0.75rem; } .buybar .btn { padding: 11px 18px; white-space: nowrap; } @media (min-width: 760px) { .demo-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 860px) { .buybar { display: none; } } /* ====================== 20. prefers-reduced-motion =================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .btn:active, .btn-primary:hover { transform: none; } } /* ====================== 21. tooltip de definição ("?") ================ Gatilho = botão real "?" inline ao lado do termo + popover nativo (popover="auto"). Toggle/Escape/clique-fora/top-layer/foco = 100% nativos, ZERO JS. CLS 0: o popover renderiza na top-layer, fora do fluxo. Tokens do design system. data-i18n só nos spans-folha do popover (term/body). */ .defterm { white-space: nowrap; } .defterm__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 18px; block-size: 18px; margin-inline-start: 4px; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; vertical-align: middle; transition: color .15s ease, border-color .15s ease; } .defterm__btn:hover { color: var(--ink); border-color: var(--primary); } .defterm__btn::before { content: ""; position: absolute; inset: -6px; } /* alvo de toque >= 24px (WCAG 2.5.8) */ .defpop { max-inline-size: min(280px, calc(100vw - 32px)); margin: 0; padding: 12px 14px; background: var(--surface); color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: 0.85rem; line-height: 1.5; } .defpop__term { display: block; color: var(--ink); font-weight: 600; margin-block-end: 4px; } .defpop:popover-open { animation: defpop-in .12s ease both; } /* desligado por prefers-reduced-motion (bloco 20) */ @keyframes defpop-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; } } /* honeypot anti-spam: fora da tela sem display:none (bots às vezes ignoram display:none) */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* .case-metrics: moldura dos números do card de portfólio (dogfood) — reusa ops-row */ .case-metrics { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: var(--space-3) 0; overflow: hidden; background: var(--surface); } .case-metrics .ops-row:last-child { border-bottom: 0; }