/* ===================================================================== DS67 · Sistema de Design Site67 — Folha de estilo canônica Conceito "Luz Profunda": elegância corporativa aquecida por luz brasileira. HTML/CSS puro · UTF-8 · pt-BR · sem framework · sem build Contrato: ver site67-novo/DESIGN.md (fonte da verdade) ===================================================================== */ /* ------------------------------------------------------------------ * * 0. FONTES — máx. 2 famílias Google Fonts + fallback de sistema * Sora (display) · Manrope (texto) * NB: carregadas via no do index.html (paralelo com * o preconnect; @import aqui seria round-trip serial render-blocking) * ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ * * 1. TOKENS — CSS custom properties (papel semântico, nunca HEX no markup) * ------------------------------------------------------------------ */ :root { /* --- Azul-noite: profundidade --- */ --azul-abismo: #0B1220; --azul-noite: #111A2C; --azul-petroleo: #182640; --azul-rio: #20304E; /* --- Claro: acolhimento --- */ --gelo: #F7F9FC; --neve: #FFFFFF; --neve-quente: #FBF8F3; /* --- Texto --- */ --tinta: #0E1626; --tinta-suave: #445063; --texto-luz: #E9EEF7; --texto-luz-suave: #9CA8BD; /* --- Marca: DNA verde evoluído (lime → esmeralda luminoso) --- */ --verde-luz: #3ECF8E; --verde-claro: #7BE3B4; --verde-profundo: #0F6B47; /* --- Dourado: a "luz" / calor brasileiro (só brilho, nunca texto longo) --- */ --dourado: #F2B544; --dourado-claro: #FFD487; /* --- Estados --- */ --erro: #F2545B; --sucesso: #2FBF71; --cta-degrade: linear-gradient(135deg, #3ECF8E 0%, #1FA37A 100%); --foco: 0 0 0 3px rgba(62, 207, 142, .35); --foco-escuro: 0 0 0 3px rgba(126, 227, 180, .45); /* --- Tipografia --- */ --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; --font-texto: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; --fs-hero: clamp(2.5rem, 6vw, 4.25rem); --fs-h2: clamp(1.75rem, 3.2vw, 2.5rem); --fs-h3: clamp(1.2rem, 2vw, 1.5rem); --fs-h4: clamp(1.05rem, 1.4vw, 1.15rem); --fs-lead: clamp(1.05rem, 1.6vw, 1.2rem); --fs-body: 1rem; --fs-sm: .875rem; --fs-xs: .75rem; /* --- Espaçamento (base 4px) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* --- Raios --- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* --- Sombras: elevação em camadas --- */ --shadow-sm: 0 1px 2px rgba(11, 18, 32, .06); --shadow-md: 0 4px 12px rgba(11, 18, 32, .08); --shadow-lg: 0 12px 32px -8px rgba(11, 18, 32, .18); --shadow-xl: 0 24px 64px -16px rgba(11, 18, 32, .28); --shadow-glow-verde: 0 8px 32px -8px rgba(62, 207, 142, .45); --shadow-glow-dourado:0 8px 32px -8px rgba(242, 181, 68, .35); /* --- Blur (navbar / widget) --- */ --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; /* --- Movimento --- */ --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --dur-xslow: 700ms; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out:cubic-bezier(.65, 0, .35, 1); --ease-spring:cubic-bezier(.34, 1.56, .64, 1); /* --- Layout --- */ --container-max: 1200px; --navbar-h: 68px; /* --- Superfície semântica (default = tema CLARO) --- */ --bg: var(--gelo); --superficie: var(--neve); --superficie-2: var(--neve-quente); --superficie-rim: var(--azul-rio); --texto: var(--tinta); --texto-suave: var(--tinta-suave); --borda: rgba(11, 18, 32, .10); --foco-atual: var(--foco); } /* --- Tema escuro global (alternativa manual) --- */ [data-theme="dark"] { --bg: var(--azul-abismo); --superficie: var(--azul-noite); --superficie-2: var(--azul-petroleo); --superficie-rim: var(--azul-rio); --texto: var(--texto-luz); --texto-suave: var(--texto-luz-suave); --borda: rgba(255, 255, 255, .10); --foco-atual: var(--foco-escuro); } /* --- Faixa escura pontual dentro de uma página clara (hero, CTA, footer) --- */ .section--dark { --bg: var(--azul-abismo); --superficie: var(--azul-noite); --superficie-2: var(--azul-petroleo); --superficie-rim: var(--azul-rio); --texto: var(--texto-luz); --texto-suave: var(--texto-luz-suave); --borda: rgba(255, 255, 255, .10); --foco-atual: var(--foco-escuro); } /* ------------------------------------------------------------------ * * 2. RESET MODERNO — moderno, sem agressividade, com herança de border * ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--navbar-h) + 16px); tab-size: 4; } body { font-family: var(--font-texto); font-size: var(--fs-body); line-height: 1.65; font-weight: 400; color: var(--texto); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; /* proteção 360px: nada de rolagem horizontal */ transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out); } img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } a { color: var(--verde-profundo); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { text-decoration: underline; text-underline-offset: 3px; } h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: var(--fs-hero); font-weight: 800; line-height: 1.05; } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: 600; } h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; } p { text-wrap: pretty; } ::selection { background: rgba(62, 207, 142, .25); color: inherit; } /* Foco visível (a11y) — todo elemento interativo */ :focus-visible { outline: none; box-shadow: var(--foco-atual); border-radius: var(--radius-sm); } /* ------------------------------------------------------------------ * * 3. CONTAINER & GRID — utilitários de layout * ------------------------------------------------------------------ */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: 20px; } .grid { display: grid; gap: var(--space-5); } .grid--2 { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: 1fr; } .grid--4 { grid-template-columns: 1fr; } /* Fluxo em coluna com controle de gap (substitui o antigo "stack" manual) */ .stack { display: flex; flex-direction: column; } .stack--sm { gap: var(--space-2); } .stack--md { gap: var(--space-4); } .stack--lg { gap: var(--space-6); } .center { text-align: center; } .mx-auto { margin-inline: auto; } /* ------------------------------------------------------------------ * * 4. SEÇÕES & DIVISORES DE LUZ — alternância claro/escuro = profundidade * ------------------------------------------------------------------ */ .section { padding: clamp(4rem, 8vw, 7rem) 0; background-color: var(--bg); position: relative; overflow: clip; } .section--dark { background-color: var(--azul-abismo); color: var(--texto-luz); } /* Iluminação: no máximo 2 luzes radiais suaves por seção escura (8–14%) */ .section--dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% 0%, rgba(62, 207, 142, .14), transparent 70%), radial-gradient(45% 40% at 85% 15%, rgba(242, 181, 68, .09), transparent 70%); } .section--dark > * { position: relative; z-index: 1; } /* Divisor de luz: gradiente fino transparent → verde → transparent */ .divider { border: 0; height: 1px; width: 100%; background: linear-gradient(90deg, transparent, rgba(62, 207, 142, .5), transparent); margin-block: 0; } .section--dark .divider { background: linear-gradient(90deg, transparent, rgba(126, 227, 180, .55), transparent); } /* Cabeçalho de seção reutilizável */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-texto); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--verde-luz); } .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: var(--radius-pill); background: var(--cta-degrade); } .lead { font-size: var(--fs-lead); color: var(--texto-suave); max-width: 62ch; } .center .lead { margin-inline: auto; } .muted { color: var(--texto-suave); } /* ------------------------------------------------------------------ * * 5. BOTÕES — primário com sweep de luz, secundário, ghost * ------------------------------------------------------------------ */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-texto); font-weight: 700; font-size: var(--fs-body); letter-spacing: -.01em; padding: 14px 26px; border-radius: var(--radius-pill); border: 1px solid transparent; white-space: nowrap; isolation: isolate; overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .btn svg { flex: none; } .btn:active { transform: translateY(1px); } .btn--primary { color: #07241A; background-image: var(--cta-degrade); background-size: 200% 100%; box-shadow: var(--shadow-md), var(--shadow-glow-verde); } .btn--primary:hover { transform: translateY(-2px) scale(1.02); background-position: 100% 0; box-shadow: var(--shadow-lg), var(--shadow-glow-verde); text-decoration: none; } /* Sweep de luz: pseudo branco 12% cruzando o botão no hover */ .btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-150%); background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transition: transform var(--dur-xslow) var(--ease-out); } .btn--primary:hover::after { transform: translateX(150%); } .btn--secondary { color: var(--texto); background-color: var(--superficie); border-color: var(--borda); box-shadow: var(--shadow-sm); } .btn--secondary:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--verde-luz) 55%, transparent); box-shadow: var(--shadow-md), var(--shadow-glow-verde); text-decoration: none; } .btn--ghost { color: var(--texto); background-color: transparent; border-color: transparent; } .btn--ghost:hover { color: var(--verde-luz); background-color: color-mix(in srgb, var(--verde-luz) 10%, transparent); text-decoration: none; } .btn--lg { padding: 17px 34px; font-size: 1.05rem; } .btn--block { width: 100%; } /* ------------------------------------------------------------------ * * 6. BADGES & CHIPS — reforços discretos de hierarquia * ------------------------------------------------------------------ */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); color: #4A3204; background: linear-gradient(135deg, var(--dourado-claro), var(--dourado)); box-shadow: var(--shadow-glow-dourado); } .section--dark .badge { color: #3A2A05; } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; padding: 6px 14px; border-radius: var(--radius-pill); color: var(--verde-profundo); background: color-mix(in srgb, var(--verde-luz) 12%, transparent); border: 1px solid color-mix(in srgb, var(--verde-luz) 30%, transparent); } .section--dark .chip { color: var(--verde-claro); background: rgba(62, 207, 142, .12); border-color: rgba(62, 207, 142, .3); } /* ------------------------------------------------------------------ * * 7. NAVBAR — sticky com backdrop-blur e compactação no scroll * ------------------------------------------------------------------ */ .nav { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(var(--blur-md)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(160%); border-bottom: 1px solid var(--borda); transition: box-shadow var(--dur-slow) var(--ease-out), background-color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); } .nav.is-scrolled { box-shadow: var(--shadow-md); background: color-mix(in srgb, var(--bg) 92%, transparent); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: var(--navbar-h); } /* Logo: símbolo "67" com gradiente de luz + wordmark Sora */ .nav__logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em; color: var(--texto); text-decoration: none; } .nav__logo:hover { text-decoration: none; } .nav__mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #07241A; background: var(--cta-degrade); box-shadow: var(--shadow-glow-verde); font-size: .85rem; font-weight: 800; } .nav__links { display: none; /* mobile: vira menu (ver media queries) */ align-items: center; gap: var(--space-1); } .nav__links a { position: relative; padding: 8px 14px; font-weight: 600; font-size: var(--fs-sm); color: var(--texto-suave); border-radius: var(--radius-pill); text-decoration: none; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .nav__links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: var(--radius-pill); background: var(--cta-degrade); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); } .nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--texto); text-decoration: none; } .nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); } .nav__links .btn { margin-left: var(--space-2); } .nav__toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--borda); border-radius: var(--radius-md); background: var(--superficie); color: var(--texto); } .nav__toggle:hover { border-color: color-mix(in srgb, var(--verde-luz) 55%, transparent); } /* Menu mobile: painel deslizante abaixo da navbar */ .nav__menu { display: none; flex-direction: column; gap: var(--space-2); padding: var(--space-4) 20px var(--space-5); background: var(--superficie); border-bottom: 1px solid var(--borda); box-shadow: var(--shadow-lg); } .nav__menu.is-open { display: flex; } .nav__menu a { padding: 12px 14px; border-radius: var(--radius-md); font-weight: 600; color: var(--texto); text-decoration: none; } .nav__menu a:hover { background: color-mix(in srgb, var(--verde-luz) 10%, transparent); } .nav__menu .btn { margin-top: var(--space-2); } /* ------------------------------------------------------------------ * * 8. HERO — faixa escura, headline em luz, formulário de projeto * ------------------------------------------------------------------ */ .hero { position: relative; background-color: var(--azul-abismo); color: var(--texto-luz); padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem); overflow: clip; isolation: isolate; } /* Luz do hero: radial verde ao topo + dourado à direita, ambas suaves */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(55% 60% at 20% 0%, rgba(62, 207, 142, .18), transparent 70%), radial-gradient(45% 45% at 90% 10%, rgba(242, 181, 68, .12), transparent 70%); } /* Camada de textura sutil (grade de pontos) — profundidade sem ruído */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent 75%); } /* Campo de partículas do hero (canvas pintado por site67.js) — abaixo do texto, acima das luzes radiais. Decorativo: pointer-events off, aria-hidden no markup. */ .hero__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; } /* Parallax 3D do mockup do navegador (A.3) — o JS faz o lerp no mesmo loop do plexus e só aplica em pointer:fine; a transicao de volta (mouseleave) e inline. */ .hero__mock { transform-style: preserve-3d; will-change: transform; } /* ------------------------------------------------------------------ * 8.1 LUZ INTERATIVA (A/B/C do dono, 2026-09-16) * ------------------------------------------------------------------ */ /* B) Spotlight esmeralda que percorre o card por dentro no hover. --mx/--my são atualizados pelo JS (mousemove, rAF-throttled). Fica ACIMA do fundo do card e ABAIXO do texto? É leve (12%) e não intercepta eventos — funciona como luz de cena, não como overlay. */ .card::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: radial-gradient( 220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--verde-luz) 14%, transparent), transparent 62%); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); pointer-events: none; } .card:hover::after { opacity: 1; } /* Em seções claras o mesmo brilho, mais contido (João não ofusca) */ .section--light .card::after { background: radial-gradient( 220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--verde-profundo) 9%, transparent), transparent 62%); } /* Cards escuros (featured/plan) já têm anel — o spotlight entra sutil */ .section--dark .card::after { background: radial-gradient( 220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--verde-luz) 10%, transparent), transparent 58%); } /* Conteúdo do card SEMPRE acima da luz (z do pseudo é 1; aqui é 2) — layout intacto */ .card > * { position: relative; z-index: 2; } @media (prefers-reduced-motion: reduce) { .card::after { transition: none; opacity: 0 !important; } } @media (hover: none) { .card::after { display: none; } } .hero__grid { display: grid; gap: var(--space-7); align-items: center; } .hero h1 { color: var(--texto-luz); margin-block: var(--space-4); } .hero h1 em { font-style: normal; background: linear-gradient(120deg, var(--verde-claro), var(--verde-luz) 45%, var(--dourado-claro)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .lead { color: var(--texto-luz-suave); max-width: 48ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); } .hero__provas { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-7); margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, .1); } .prova { display: flex; flex-direction: column; gap: 2px; } .prova strong { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; line-height: 1; color: var(--verde-claro); } .prova span { font-size: var(--fs-sm); color: var(--texto-luz-suave); } /* ------------------------------------------------------------------ * * 9. CARTÕES — ossada única reutilizada por serviço / plano / template * ------------------------------------------------------------------ */ .card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background-color: var(--superficie); border: 1px solid var(--borda); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); } /* Elevate no hover: sobe 6px, acende a borda, ganha glow */ .card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--verde-luz) 45%, transparent); box-shadow: var(--shadow-lg), var(--shadow-glow-verde); } .card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .card__icon { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-md); color: var(--verde-profundo); background: color-mix(in srgb, var(--verde-luz) 14%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--verde-luz) 28%, transparent); } .section--dark .card__icon, [data-theme="dark"] .card__icon { color: var(--verde-claro); background: rgba(62, 207, 142, .12); } .card__icon svg { width: 22px; height: 22px; } .card__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; } .card__desc { color: var(--texto-suave); font-size: var(--fs-sm); } .card__features { display: flex; flex-direction: column; gap: 10px; padding: 0; list-style: none; margin-top: auto; /* empurra o footer p/ baixo — alinhamento perfeito entre cartões */ } .card__features li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); color: var(--texto-suave); } .card__features li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--verde-luz); } .card__foot { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--borda); } .card__price { font-size: var(--fs-sm); color: var(--texto-suave); } .card__price strong { display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 1.85rem); font-weight: 800; letter-spacing: -.03em; color: var(--texto); } .card__price small { font-size: var(--fs-sm); font-weight: 600; color: var(--verde-profundo); } .section--dark .card__price small { color: var(--verde-claro); } /* --- Plano em destaque: anel de luz + badge (um só por seção) --- */ .card--featured { border-color: color-mix(in srgb, var(--verde-luz) 55%, transparent); } .card--featured::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, var(--verde-claro), var(--verde-luz) 40%, var(--dourado)); -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask-composite: xor; mask-composite: exclude; } .card--featured:hover { box-shadow: var(--shadow-xl), var(--shadow-glow-verde); } /* --- Template: thumbnail 16:10 com overlay e demo no hover --- */ .card--template { padding: 0; overflow: hidden; } .card__thumb { position: relative; aspect-ratio: 16 / 10; background: var(--azul-noite); overflow: hidden; } .card__thumb img { width: 100%; height: 100%; object-fit: cover; } .card__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11, 18, 32, .72)); opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); } .card__demo { position: absolute; left: 50%; bottom: var(--space-4); transform: translate(-50%, 140%); transition: transform var(--dur-slow) var(--ease-spring); } .card--template:hover .card__thumb::after { opacity: 1; } .card--template:hover .card__demo { transform: translate(-50%, 0); } .card--template > .card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); } /* ------------------------------------------------------------------ * * 10. FORMULÁRIOS — inputs premium com estados focus (data-lead-form) * ------------------------------------------------------------------ */ .field { display: flex; flex-direction: column; gap: var(--space-2); } .field > label { font-weight: 700; font-size: var(--fs-sm); color: var(--texto); } .field .hint { font-size: var(--fs-xs); color: var(--texto-suave); } .input, .textarea { width: 100%; padding: 14px 16px; font-size: var(--fs-sm); line-height: 1.5; color: var(--texto); background-color: var(--superficie); border: 1px solid var(--borda); border-radius: var(--radius-md); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .textarea { resize: vertical; min-height: 120px; } .input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--texto-suave) 75%, transparent); } .input:hover, .textarea:hover { border-color: color-mix(in srgb, var(--verde-luz) 40%, transparent); } .input:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--verde-luz); box-shadow: var(--foco-atual); } .input[aria-invalid="true"] { border-color: var(--erro); box-shadow: 0 0 0 3px rgba(242, 84, 91, .18); } .field__erro { font-size: var(--fs-xs); font-weight: 600; color: var(--erro); display: none; } .field__erro.is-visible { display: block; } /* Zona de upload de referências (drag & drop) */ .upload-zone { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); text-align: center; border: 2px dashed color-mix(in srgb, var(--texto-suave) 35%, transparent); border-radius: var(--radius-lg); background: var(--superficie-2); cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .upload-zone:hover { border-color: var(--verde-luz); transform: translateY(-2px); } .upload-zone.is-dragover { border-color: var(--verde-luz); background: color-mix(in srgb, var(--verde-luz) 10%, var(--superficie-2)); } .upload-zone.has-files { border-style: solid; border-color: var(--verde-luz); padding: var(--space-4); } .upload-zone__icon { font-size: 1.75rem; line-height: 1; } .upload-zone p { margin: 0; font-size: var(--fs-sm); color: var(--texto-suave); } .upload-zone strong { color: var(--texto); } .upload-previews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-3); justify-content: center; } .upload-preview { position: relative; width: 96px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--borda); box-shadow: var(--shadow-sm); } .upload-preview img { width: 100%; height: 100%; object-fit: cover; } .upload-preview button { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(11, 18, 32, .65); color: #fff; font-size: 12px; line-height: 1; } .upload-preview button:hover { background: var(--erro); } /* ------------------------------------------------------------------ * * 11. FAQ — accordion (data-faq) com altura fluida via grid-rows * ------------------------------------------------------------------ */ .faq { display: flex; flex-direction: column; gap: var(--space-3); max-width: 760px; } .faq-item { border: 1px solid var(--borda); border-radius: var(--radius-lg); background: var(--superficie); overflow: hidden; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .faq-item:hover { border-color: color-mix(in srgb, var(--verde-luz) 45%, transparent); } .faq-item.is-open { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--verde-luz) 55%, transparent); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; padding: var(--space-4) var(--space-5); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); text-align: left; color: var(--texto); background: transparent; border: 0; border-radius: inherit; } .faq-q:hover { text-decoration: none; } .faq-q__icon { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--verde-profundo); background: color-mix(in srgb, var(--verde-luz) 14%, transparent); transition: transform var(--dur-slow) var(--ease-spring), color var(--dur-base) var(--ease-out); } .section--dark .faq-q__icon { color: var(--verde-claro); } .faq-item.is-open .faq-q__icon { transform: rotate(135deg); color: #fff; background: var(--cta-degrade); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-in-out); } .faq-a > div { overflow: hidden; min-height: 0; } .faq-item.is-open .faq-a { grid-template-rows: 1fr; } .faq-a p { padding: 0 var(--space-5) var(--space-5); color: var(--texto-suave); font-size: var(--fs-sm); } /* ------------------------------------------------------------------ * * 12. MODAL — demonstração / iniciar projeto (data-modal) * ------------------------------------------------------------------ */ .modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(11, 18, 32, .6); backdrop-filter: blur(var(--blur-sm)); -webkit-backdrop-filter: blur(var(--blur-sm)); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base); } .modal.is-open { opacity: 1; visibility: visible; } .modal__panel { width: 100%; max-width: 560px; max-height: min(88vh, 760px); overflow-y: auto; padding: var(--space-6); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); transform: translateY(16px) scale(.97); transition: transform var(--dur-slow) var(--ease-out); } .modal.is-open .modal__panel { transform: translateY(0) scale(1); } .modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); } .modal__close { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--borda); border-radius: 50%; background: var(--superficie-2); color: var(--texto); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .modal__close:hover { background: var(--erro); color: #fff; transform: rotate(90deg); } /* ------------------------------------------------------------------ * * 13. WIDGET FLUTUANTE — agente 67 (data-widget): botão "67" + chat * ------------------------------------------------------------------ */ .widget { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); } .widget__btn { position: relative; width: 60px; height: 60px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #07241A; background: var(--cta-degrade); box-shadow: var(--shadow-lg), var(--shadow-glow-verde); font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; animation: float 3s var(--ease-in-out) infinite; transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out); } .widget__btn:hover { transform: scale(1.08) rotate(-3deg); } .widget__btn.is-active { animation: none; transform: scale(.92); } /* Badge "pulse" — aviso de novidade / mensagem */ .widget__badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--erro); color: #fff; font-size: var(--fs-xs); font-weight: 800; border: 2px solid var(--bg); } .widget__badge::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--erro); animation: pulse 2s var(--ease-out) infinite; } /* Painel chat deslizante (sobe a partir do botão) */ .widget__panel { width: min(360px, calc(100vw - 40px)); max-height: min(520px, 70vh); display: flex; flex-direction: column; overflow: hidden; background: var(--azul-noite); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); backdrop-filter: blur(var(--blur-lg)); -webkit-backdrop-filter: blur(var(--blur-lg)); opacity: 0; visibility: hidden; transform: translateY(16px) scale(.96); transform-origin: bottom right; transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow), transform var(--dur-slow) var(--ease-spring); } .widget__panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .widget__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: linear-gradient(135deg, rgba(62, 207, 142, .18), rgba(242, 181, 68, .1)); border-bottom: 1px solid rgba(255, 255, 255, .1); } .widget__head strong { color: var(--texto-luz); font-family: var(--font-display); font-size: 1rem; } .widget__head small { display: block; color: var(--texto-luz-suave); font-size: var(--fs-xs); } .widget__status { width: 9px; height: 9px; border-radius: 50%; background: var(--sucesso); box-shadow: 0 0 0 3px rgba(47, 191, 113, .25); } .widget__body { flex: 1; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); overflow-y: auto; color: var(--texto-luz-suave); font-size: var(--fs-sm); } .widget__msg { max-width: 85%; padding: 10px 14px; border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 4px; background: rgba(255, 255, 255, .07); color: var(--texto-luz); } .widget__msg--bot { align-self: flex-start; } .widget__msg--user { align-self: flex-end; background: var(--cta-degrade); color: #07241A; border-radius: var(--radius-md) var(--radius-md) 4px; } .widget__foot { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid rgba(255, 255, 255, .1); } .widget__foot .input { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: var(--texto-luz); } .widget__foot .input::placeholder { color: rgba(233, 238, 247, .5); } .widget__send { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--radius-md); color: #07241A; background: var(--cta-degrade); } .widget__send:hover { filter: brightness(1.08); } /* ------------------------------------------------------------------ * * 14. FOOTER — faixa escura final com selos de confiança * ------------------------------------------------------------------ */ .footer { background-color: var(--azul-abismo); color: var(--texto-luz-suave); padding: var(--space-8) 0 var(--space-5); position: relative; overflow: clip; } .footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 100% at 50% 0%, rgba(62, 207, 142, .12), transparent 70%); } .footer > .container { position: relative; } .footer__grid { display: grid; gap: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid rgba(255, 255, 255, .1); } .footer h4 { color: var(--texto-luz); margin-bottom: var(--space-3); font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; } .footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .footer a { color: var(--texto-luz-suave); font-size: var(--fs-sm); } .footer a:hover { color: var(--verde-claro); } .footer__brand .nav__logo { color: var(--texto-luz); } .footer__brand p { font-size: var(--fs-sm); max-width: 32ch; margin-top: var(--space-3); } .footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-5); font-size: var(--fs-xs); } .footer__selos { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* ------------------------------------------------------------------ * * 15. KEYFRAMES — reveal, float, sweep, fadeUp, pulse * ------------------------------------------------------------------ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes pulse { 0% { opacity: .7; transform: scale(1); } 70% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } } @keyframes sweep { 0% { transform: translateX(-150%); } 100% { transform: translateX(150%); } } /* Reveal on scroll — estado inicial no CSS (fallback: JS adiciona .is-visible) */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-xslow) var(--ease-out), transform var(--dur-xslow) var(--ease-out); transition-delay: 0ms; will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* ------------------------------------------------------------------ * * 16. UTILITÁRIOS DIVERSOS * ------------------------------------------------------------------ */ .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; } .skip-link { position: absolute; left: var(--space-4); top: -60px; z-index: 100; padding: 10px 18px; background: var(--cta-degrade); color: #07241A; font-weight: 700; border-radius: var(--radius-pill); transition: top var(--dur-base) var(--ease-out); } .skip-link:focus { top: var(--space-3); text-decoration: none; } .hidden-mobile { display: none; } .text-verde { color: var(--verde-luz); } .text-dourado { color: var(--dourado); } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } /* ------------------------------------------------------------------ * * 17. MEDIA QUERIES — 360 (base) / 640 / 1024 / 1440 * ------------------------------------------------------------------ */ /* ≥640px — nav completa, grids 2 colunas */ @media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } .nav__toggle { display: none; } .nav__links { display: flex; } .nav__menu { display: none; } .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } .hero__grid { grid-template-columns: 1fr; } .upload-previews { gap: 12px; } } /* ≥1024px — 3 colunas, hero em duas colunas, widget largo */ @media (min-width: 1024px) { .grid { gap: var(--space-6); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(3, 1fr); } .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--space-9); align-items: center; } .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } .widget { right: 28px; bottom: 28px; } .hidden-mobile { display: initial; } } /* ≥1440px — container no máximo, respiro */ @media (min-width: 1440px) { :root { --navbar-h: 76px; } .container { padding-inline: 32px; } .grid--4 { grid-template-columns: repeat(4, 1fr); } .section { padding-block: clamp(5rem, 7vw, 8rem); } } /* 360–480px — aperto extra: container menor, hero sem respiro lateral */ @media (max-width: 480px) { .container { padding-inline: 16px; } .hero { padding-top: var(--space-7); } .btn { width: 100%; } /* CTA em coluna única no celular */ .hero__cta .btn { width: 100%; } .hero__provas { gap: var(--space-4) var(--space-5); } .card { padding: var(--space-4); } .modal__panel { padding: var(--space-5); } } /* ------------------------------------------------------------------ * * 18. ACESSIBILIDADE — respeita prefers-reduced-motion (mata TUDO) * ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* Reveal já visível — nada de conteúdo escondido sem movimento */ [data-reveal] { opacity: 1 !important; transform: none !important; } .widget__btn { animation: none; } .widget__badge::after { animation: none; opacity: 0; } .btn--primary::after { display: none; } .card:hover { transform: none; } .btn:hover { transform: none; } } /* Respeitar preferência de esquema do SO (data-theme manual prevalece) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--azul-abismo); --superficie: var(--azul-noite); --superficie-2: var(--azul-petroleo); --texto: var(--texto-luz); --texto-suave: var(--texto-luz-suave); --borda: rgba(255, 255, 255, .10); --foco-atual: var(--foco-escuro); } } /* ------------------------------------------------------------------ * * 19. EXTENSÕES DE PÁGIN — hero, mockups CSS puros e apoios de layout * Apenas tokens do DS67. Criadas para renderizar a index sem CSS * inline (checklist §13). Design-Lead: revisar e incorporar ao contrato. * ------------------------------------------------------------------ */ /* Hero herda os tokens dark — botões, chips e campos funcionam sobre o azul-abismo */ .hero { --texto: var(--texto-luz); --texto-suave: var(--texto-luz-suave); --superficie: var(--azul-noite); --superficie-2: var(--azul-petroleo); --borda: rgba(255, 255, 255, .12); --foco-atual: var(--foco-escuro); } /* Variações de superfície clara (frio / quente) — alternância de "cena iluminada" */ .section--light { background-color: var(--gelo); } .section--warm { background-color: var(--neve-quente); } /* Rede de seguranca (zero efeito no modo claro shipped): se o tema-escuro do SO for acionado um dia, as ilhas de superficie fixa viram ILHAS LUMINOSAS COMPLETAS — superfícies, tintas e bordas da paleta clara juntas, nunca misturadas com a noite. */ .section--warm, .section--light { color: var(--texto); /* consumir o proprio token: sem isso, o color herdado do body passa por cima da pin */ --superficie: var(--neve); --superficie-2: var(--neve-quente); --texto: var(--tinta); --texto-suave: var(--tinta-suave); --borda: rgba(11, 18, 32, .10); } /* Cabeçalho de seção centralizado (eyebrow + título + lead) */ .section__head { max-width: 62ch; margin-inline: auto; } /* Fileira de botões (CTA final) */ .btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); } /* Formulário de lead centralizado */ .lead-form { max-width: 720px; } /* Chips no rodapé escuro (contraste) */ .footer .chip { color: var(--verde-claro); background: rgba(62, 207, 142, .12); border-color: rgba(62, 207, 142, .3); } /* Consentimento LGPD (checkbox + texto) */ .check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); line-height: 1.5; color: var(--texto-suave); cursor: pointer; } .check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--verde-luz); } /* Status do formulário de lead (sucesso / erro) */ .lead-form__status { font-size: var(--fs-sm); font-weight: 600; } .lead-form__status.is-success { color: var(--verde-profundo); } .lead-form__status.is-error { color: var(--erro); } /* --- Mockup do hero: navegador estilizado (CSS puro, zero imagens) --- */ .hero__mock { position: relative; } .mock-browser { border-radius: var(--radius-lg); overflow: hidden; background: var(--azul-noite); border: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--shadow-xl), var(--shadow-glow-verde); } .mock-browser__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--azul-petroleo); border-bottom: 1px solid rgba(255, 255, 255, .08); } .mock-browser__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .22); } .mock-browser__dot--green { background: var(--verde-luz); } .mock-browser__dot--gold { background: var(--dourado); } .mock-browser__url { flex: 1; max-width: 200px; height: 12px; margin-left: 8px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .08); } .mock-browser__body { padding: 18px; display: flex; flex-direction: column; gap: 12px; } .mock-hero { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 88px; padding: 0 16px; border-radius: var(--radius-md); background: linear-gradient(120deg, var(--azul-rio), var(--azul-petroleo)); border: 1px solid rgba(255, 255, 255, .08); } .mock-line { height: 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .14); } .mock-line--w40 { width: 40%; } .mock-line--w70 { width: 70%; } .mock-line--green { background: var(--verde-luz); } .mock-row { display: flex; gap: 10px; align-items: center; } .mock-card { flex: 1; height: 52px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .07); } .mock-cta { flex: none; width: 96px; height: 22px; border-radius: var(--radius-pill); background: var(--cta-degrade); box-shadow: var(--shadow-glow-verde); } /* Selo flutuante "Site no ar" sobre o mockup */ .mock-float { position: absolute; right: -8px; bottom: -16px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--neve); color: var(--tinta); box-shadow: var(--shadow-lg); font-size: var(--fs-sm); font-weight: 700; } .mock-float i { width: 9px; height: 9px; border-radius: 50%; background: var(--sucesso); box-shadow: 0 0 0 3px rgba(47, 191, 113, .25); } /* --- Mockups dos templates de galeria (CSS puro, sem screenshots) --- */ .tpl-mock { position: absolute; inset: 0; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, var(--azul-noite), var(--azul-abismo)); } .tpl-mock__logo { width: 34px; height: 8px; flex: none; border-radius: var(--radius-pill); background: var(--verde-luz); } .tpl-mock__hero { display: flex; align-items: flex-end; gap: 8px; height: 42%; flex: none; padding: 10px; border-radius: var(--radius-sm); background: linear-gradient(130deg, var(--azul-petroleo), var(--azul-rio)); border: 1px solid rgba(255, 255, 255, .08); } .tpl-mock__row { display: flex; align-items: center; gap: 8px; } .tpl-mock__bar { flex: 1; min-width: 0; height: 7px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .13); } .tpl-mock__bar--short { flex: none; width: 24%; } .tpl-mock__box { flex: 1; min-width: 0; height: 22px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .06); } .tpl-mock__box--green { background: rgba(62, 207, 142, .28); border-color: rgba(62, 207, 142, .4); } .tpl-mock__box--gold { background: linear-gradient(135deg, rgba(242, 181, 68, .85), rgba(255, 212, 135, .55)); border-color: transparent; } .tpl-mock__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .3); } @media (max-width: 480px) { .mock-float { right: 0; bottom: -12px; } }