/* ============================================================================ Condomi.io — Landing Page Estilo: marketing, clean, responsivo. Paleta primária azul (#2563eb). ============================================================================ */ :root { /* Marca */ --primary: #2563eb; --primary-strong: #1d4ed8; --primary-light: #eff6ff; /* Azul da marca quando usado como texto/ícone (precisa de contraste próprio) */ --accent-text: #2563eb; --accent-text-strong: #1d4ed8; /* Texto e fundos */ --ink: #0f172a; --ink-soft: #1e293b; --muted: #64748b; --bg: #ffffff; --bg-alt: #f8fafc; --border: #e2e8f0; --border-soft: #eef2f7; /* Superfícies: cards, mockups e header */ --surface: #ffffff; --surface-alt: #f8fafc; --surface-inset: #ffffff; --header-bg: rgba(255, 255, 255, 0.85); --hero-from: #fbfdff; --hero-to: #ffffff; --footer-bg: #0a0f1c; /* Esqueletos dos mockups (barras cinzas) */ --skeleton: #dbe3ee; --skeleton-strong: #cbd5e1; /* Aparelho do morador */ --phone-frame: #0f172a; --phone-screen-from: #f8fafc; --phone-screen-to: #eef2f7; /* Etiquetas do ciclo */ --tag-desk-bg: #eef2ff; --tag-desk-fg: #4f46e5; --tag-app-bg: #ecfdf5; --tag-app-fg: #059669; /* Seção de contato (escura nos dois temas) */ --dark-bg: #0b1220; --dark-panel: #111a2e; /* Feedback */ --danger: #b91c1c; --radius: 16px; --radius-lg: 24px; --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14); /* Brilho das marcas do ciclo. No claro o azul salta fácil no branco, então o brilho é desligado (sombra transparente) e fica só o halo — a "nuvem" em que o ícone flutua. --mark-halo multiplica a opacidade do gradiente #cycleHalo (0.32) e --mark-halo-scale é o tamanho do halo no pico. */ --mark-glow-weak: rgba(37, 99, 235, 0); --mark-glow-strong: rgba(37, 99, 235, 0); --mark-halo: 0.4; --mark-halo-scale: 1.12; --container: 1120px; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* Avisa o navegador para usar controles nativos no tema claro */ color-scheme: light; } /* Tema escuro. O atributo data-theme é gravado no por js/main.js: sem escolha salva, ele reflete prefers-color-scheme; com escolha salva, vale a escolha do usuário. */ html[data-theme="dark"] { --primary-strong: #3b82f6; --primary-light: rgba(37, 99, 235, 0.18); --accent-text: #93c5fd; --accent-text-strong: #bfdbfe; --ink: #e8eefc; --ink-soft: #c3cfe4; --muted: #94a3b8; --bg: #0b1220; --bg-alt: #0f1728; --border: #1f2b42; --border-soft: #1a2438; --surface: #16213a; --surface-alt: #101a2c; --surface-inset: #1c2842; --header-bg: rgba(11, 18, 32, 0.85); --hero-from: #0d1626; --hero-to: #0b1220; --footer-bg: #05090f; --skeleton: #2b3a56; --skeleton-strong: #3d4f70; --phone-frame: #060c17; --phone-screen-from: #0e1626; --phone-screen-to: #0a121f; --tag-desk-bg: rgba(99, 102, 241, 0.18); --tag-desk-fg: #a5b4fc; --tag-app-bg: rgba(16, 185, 129, 0.18); --tag-app-fg: #6ee7b7; --dark-bg: #070d18; --dark-panel: #0f1a2e; --danger: #f87171; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); /* Brilho das marcas do ciclo: no fundo escuro o azul precisa de mais força para ser percebido. Mantém o efeito que já funcionava bem aqui. */ --mark-glow-weak: rgba(37, 99, 235, 0.22); --mark-glow-strong: rgba(59, 130, 246, 0.5); --mark-halo: 1; --mark-halo-scale: 1.45; color-scheme: dark; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* ============================================================================ Botões ============================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 12px; font-weight: 600; font-size: 15px; line-height: 1; border: 1px solid transparent; cursor: pointer; transition: all 180ms var(--ease); white-space: nowrap; } .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28); } .btn-primary:hover { background: var(--primary-strong); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37, 99, 235, 0.34); } .btn-ghost { background: var(--surface); color: var(--ink-soft); border-color: var(--border); } .btn-ghost:hover { border-color: var(--accent-text); color: var(--accent-text); transform: translateY(-2px); } .btn-lg { padding: 15px 28px; font-size: 16px; } .btn-block { width: 100%; } /* ============================================================================ Header / Nav ============================================================================ */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; } /* Marca "crua" (monograma sem o quadrado): a cor vem do próprio `.brand-mark`, usando o azul de texto/ícone (--accent-text) para manter contraste nos dois temas. */ .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; color: var(--accent-text); } .brand-mark svg { width: 100%; height: 100%; } /* Fonte da marca: o nome "Condomi.io" escrito usa Montserrat, a fonte da identidade. Vale para o wordmark ao lado do logo (`.brand-name`) e para menções de destaque em títulos/eyebrows/copyright (`.wordmark`). Menções em texto corrido seguem com Inter. */ .wordmark, .brand-name { font-family: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } .nav { display: flex; align-items: center; gap: 30px; /* Empurra nav + controles para a direita, mantendo a marca à esquerda. */ margin-left: auto; } .nav-link { font-size: 15px; font-weight: 500; color: var(--ink-soft); transition: color 160ms var(--ease); } .nav-link:hover { color: var(--accent-text); } .nav-cta { margin-left: 6px; } /* Controles de tema e de movimento, ao lado do CTA */ .nav-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .tool-toggle { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: color 160ms var(--ease), border-color 160ms var(--ease), background 160ms var(--ease); } .tool-toggle:hover { border-color: var(--accent-text); color: var(--accent-text); } .tool-toggle svg { width: 18px; height: 18px; } /* O ícone visível conta o que o clique vai fazer. */ .tool-toggle .icon-on { display: none; } .tool-toggle[aria-pressed="true"] { border-color: var(--accent-text); color: var(--accent-text); background: var(--primary-light); } .tool-toggle[aria-pressed="true"] .icon-off { display: none; } .tool-toggle[aria-pressed="true"] .icon-on { display: block; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: transparent; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; } .nav-toggle span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; transition: transform 200ms var(--ease), opacity 200ms var(--ease); } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================================ Hero ============================================================================ */ .hero { position: relative; overflow: hidden; background: radial-gradient(60% 80% at 85% 0%, rgba(37, 99, 235, 0.10), transparent 60%), radial-gradient(50% 60% at 10% 100%, rgba(37, 99, 235, 0.08), transparent 55%), linear-gradient(180deg, var(--hero-from) 0%, var(--hero-to) 100%); } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 56px; padding-top: 88px; padding-bottom: 96px; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--primary-light); color: var(--accent-text); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; } .pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); } .hero-title { margin-top: 22px; font-size: clamp(34px, 5vw, 56px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; color: var(--ink); } .hero-sub { margin-top: 22px; font-size: clamp(16px, 2vw, 19px); color: var(--muted); max-width: 520px; } .hero-sub strong { color: var(--ink-soft); font-weight: 600; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .hero-trust { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 34px; font-size: 14px; color: var(--muted); } .hero-trust li { display: inline-flex; align-items: center; gap: 8px; } .hero-trust .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; } /* --- Mockup: app do morador + Desk do condomínio --- */ .hero-visual { position: relative; display: flex; justify-content: center; } .hero-stage { position: relative; width: 100%; max-width: 540px; height: 392px; } /* Setas do ciclo (registro vai / retorno volta) */ .loop-arrow { position: absolute; height: 2px; /* Começa depois do celular (168px) para o tracejado não passar sobre ele. */ left: 186px; right: 2%; border-radius: 2px; } /* A linha tracejada fica num elemento interno: o deslocamento é feito com transform (composto pelo navegador) e não com background-position, que recriava o padrão a cada quadro e deixava os tracinhos grudados/saltando no reinício do ciclo. */ .loop-arrow-line { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; } .loop-arrow-line::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: calc(100% + 14px); background-image: repeating-linear-gradient(90deg, rgba(37, 99, 235, 0.5) 0 7px, transparent 7px 14px); will-change: transform; animation: dash-flow 1.1s linear infinite; } .loop-arrow::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .loop-arrow-to-desk { top: 21px; } .loop-arrow-to-desk::after { right: -3px; border-left: 9px solid var(--primary); } .loop-arrow-to-app { bottom: 22px; } .loop-arrow-to-app .loop-arrow-line::before { animation-name: dash-flow-reverse; } .loop-arrow-to-app::after { left: -3px; border-right: 9px solid var(--primary); } @keyframes dash-flow { from { transform: translateX(-14px); } to { transform: translateX(0); } } @keyframes dash-flow-reverse { from { transform: translateX(0); } to { transform: translateX(-14px); } } /* Janela do Desk */ .desk-window { position: absolute; top: 44px; right: 0; width: calc(100% - 96px); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; z-index: 2; } .desk-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--surface-alt); border-bottom: 1px solid var(--border); } .desk-dot { width: 8px; height: 8px; border-radius: 50%; } .desk-dot:nth-child(1) { background: #fca5a5; } .desk-dot:nth-child(2) { background: #fcd34d; } .desk-dot:nth-child(3) { background: #86efac; } .desk-url { margin-left: 8px; padding: 3px 12px; border-radius: 999px; background: var(--surface-inset); border: 1px solid var(--border); font-size: 11px; color: var(--muted); } .desk-body { display: grid; grid-template-columns: 92px 1fr; min-height: 216px; } .desk-side { display: flex; flex-direction: column; gap: 11px; padding: 16px 12px; background: var(--surface-alt); border-right: 1px solid var(--border); } .desk-side-logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #2563eb, #6366f1); color: #fff; margin-bottom: 4px; } .desk-side-logo svg { width: 16px; height: 16px; } .desk-side-item { height: 7px; border-radius: 4px; background: var(--skeleton); } .desk-side-item.is-active { width: 72%; background: #2563eb; } .desk-main { display: flex; flex-direction: column; gap: 12px; padding: 16px; } .desk-head { display: flex; align-items: center; justify-content: space-between; } .desk-btn { width: 54px; height: 18px; border-radius: 6px; background: var(--primary); } .desk-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--surface-alt); border: 1px solid var(--border-soft); } .desk-row.is-live { background: var(--surface-inset); border-color: rgba(37, 99, 235, 0.25); animation: live-row 4s ease-in-out infinite; } .desk-ava { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, #93c5fd, #6366f1); flex-shrink: 0; } .desk-ava-amber { background: linear-gradient(135deg, #fcd9a8, #f59e0b); } .desk-ava-indigo { background: linear-gradient(135deg, #c7d2fe, #4f46e5); } .desk-lines { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; } .desk-lines .line { height: 8px; } .desk-lines .line-lg { width: 82%; } .desk-lines .line-tiny { width: 52%; } .desk-row .chip { width: 34px; height: 8px; margin-bottom: 0; flex-shrink: 0; } /* Aparelho do morador */ .phone { position: absolute; left: 0; bottom: 34px; width: 168px; height: 336px; border-radius: 30px; background: var(--phone-frame); padding: 8px; box-shadow: var(--shadow-lg); border: 1px solid rgba(15, 23, 42, 0.15); z-index: 3; } .phone-screen { position: relative; width: 100%; height: 100%; border-radius: 24px; background: linear-gradient(180deg, var(--phone-screen-from), var(--phone-screen-to)); padding: 28px 12px 12px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; } .phone-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 62px; height: 14px; border-radius: 999px; background: var(--phone-frame); z-index: 3; } .app-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .app-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #6366f1); flex-shrink: 0; } .app-head-lines { display: flex; flex-direction: column; gap: 6px; } .line { display: block; height: 9px; border-radius: 6px; background: var(--skeleton); } .line-short { width: 90px; } .line-tiny { width: 56px; height: 7px; } .line-lg { width: 80%; background: var(--skeleton-strong); } .app-head-lines .line-short { width: 58px; } .app-head-lines .line-tiny { width: 38px; } .app-card { background: var(--surface); border-radius: 14px; padding: 11px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 7px; } .app-card .line { height: 7px; } .app-card .line-lg { width: 72%; } .app-card.is-live { border: 1px solid rgba(37, 99, 235, 0.25); animation: live-card 4s ease-in-out infinite 1.2s; } @keyframes live-row { 0%, 10% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.3); } 45% { box-shadow: 0 0 0 7px rgba(37, 99, 235, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } } @keyframes live-card { 0%, 10% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.3); } 45% { transform: translateY(-4px); box-shadow: 0 0 0 9px rgba(37, 99, 235, 0); } 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } } .chip { width: 44px; height: 6px; border-radius: 4px; background: #93c5fd; margin-bottom: 2px; } .chip-alt { background: #fcd9a8; } .chip-green { background: #bbf7d0; } .app-tabbar { margin-top: auto; display: flex; justify-content: space-around; padding-top: 10px; border-top: 1px solid var(--border); } .tab { width: 26px; height: 6px; border-radius: 4px; background: var(--skeleton); } .tab-active { background: #2563eb; } .float-badge { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-md); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; z-index: 4; } .float-badge-1 { top: -16px; left: 0; animation: float 5s ease-in-out infinite; } .float-badge-2 { bottom: 52px; right: -14px; animation: float 6s ease-in-out infinite 0.6s; } .float-dot { width: 9px; height: 9px; border-radius: 50%; } .float-dot-amber { background: #f59e0b; } .float-dot-green { background: #22c55e; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ============================================================================ Seções genéricas ============================================================================ */ .section { padding: 96px 0; } .section-alt { background: var(--bg-alt); } .section-head { max-width: 680px; margin: 0 auto 56px; text-align: center; } .eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; } .eyebrow-light { color: #93c5fd; } .section-title { font-size: clamp(26px, 3.5vw, 38px); line-height: 1.16; letter-spacing: -0.02em; font-weight: 800; } .section-sub { margin-top: 16px; font-size: 17px; color: var(--muted); } /* ============================================================================ Diferenciais ============================================================================ */ .cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .feature-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--primary-light); color: var(--accent-text); margin-bottom: 20px; } .feature-icon svg { width: 24px; height: 24px; } .feature-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; } .feature-card p { font-size: 15px; color: var(--muted); } /* ============================================================================ Recursos (módulos) ============================================================================ */ .modules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .module-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); } .module-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .module-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px; background: rgba(37, 99, 235, 0.10); color: var(--accent-text); } .module-icon svg { width: 22px; height: 22px; } .module-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .module-card p { font-size: 14.5px; color: var(--muted); } /* Acentos por módulo */ .icon-orange { background: rgba(249, 115, 22, 0.12); color: #f97316; } .icon-teal { background: rgba(20, 184, 166, 0.12); color: #14b8a6; } .icon-green { background: rgba(34, 197, 94, 0.12); color: #22c55e; } .icon-indigo { background: rgba(99, 102, 241, 0.12); color: #6366f1; } .icon-amber { background: rgba(245, 158, 11, 0.12); color: #f59e0b; } .icon-cyan { background: rgba(6, 182, 212, 0.12); color: #06b6d4; } .icon-rose { background: rgba(244, 63, 94, 0.12); color: #f43f5e; } .icon-purple { background: rgba(168, 85, 247, 0.12); color: #a855f7; } /* Teaser "tem mais recursos" */ .modules-teaser { display: flex; align-items: center; gap: 20px; margin-top: 24px; padding: 28px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg); } .teaser-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--primary-light); color: var(--accent-text); flex-shrink: 0; } .teaser-icon svg { width: 24px; height: 24px; } .teaser-copy { flex: 1; } .teaser-copy h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; } .teaser-copy p { font-size: 14.5px; color: var(--muted); } .modules-note { margin-top: 16px; font-size: 13px; color: var(--muted); text-align: right; } /* ============================================================================ O ciclo (ex-seção de integração) ============================================================================ */ .cycle { position: relative; width: min(620px, 100%); aspect-ratio: 1 / 1; margin: 0 auto; } .cycle-ring { position: absolute; inset: 0; width: 100%; height: 100%; } /* O tracejado do anel corre no mesmo sentido das setas (horário). No SVG o pathLength faz o perímetro fechar em 85 voltas exatas do padrão (85 × 11), então o reinício do laço não deixa emenda visível. */ .cycle-ring circle { animation: ring-flow 1.2s linear infinite; } @keyframes ring-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -11; } } /* Marcas do ciclo: o ícone do passo que acontece naquele trecho. Flutuam no mesmo ritmo dos cards, sobre um halo difuso (a "nuvem" sob o ícone). */ .cycle-mark { animation: mark-float 6s ease-in-out infinite; } @keyframes mark-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .cycle-mark-halo { fill: url(#cycleHalo); /* Também é o valor usado quando a animação está desligada (movimento reduzido), por isso a opacidade base sai do mesmo token. */ opacity: var(--mark-halo); /* O halo "respira": cresce (raio e alcance) enquanto fica mais visível e volta a encolher, junto com o brilho do ícone. A pulsação é mais rápida que a flutuação (3.2s contra 6s) para dar para perceber a mudança. */ transform-box: fill-box; transform-origin: center; animation: mark-halo 3.2s ease-in-out infinite; } @keyframes mark-halo { 0%, 100% { transform: scale(calc(var(--mark-halo-scale) * 0.75)); opacity: calc(var(--mark-halo) * 0.55); } 50% { transform: scale(var(--mark-halo-scale)); opacity: var(--mark-halo); } } .cycle-mark-icon { fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px var(--mark-glow-weak)) drop-shadow(0 2px 4px var(--mark-glow-weak)); animation: mark-glow 3.2s ease-in-out infinite; } /* No tema claro o brilho está desligado, então o ícone nem anima a sombra. */ html:not([data-theme="dark"]) .cycle-mark-icon { animation: none; } /* Brilho do ícone: de fraco para forte, com o raio e o alcance da sombra abrindo junto — e depois fechando de volta, como uma luz respirando. */ @keyframes mark-glow { 0%, 100% { filter: drop-shadow(0 1px 2px var(--mark-glow-weak)) drop-shadow(0 2px 4px var(--mark-glow-weak)); } 50% { filter: drop-shadow(0 2px 6px var(--mark-glow-strong)) drop-shadow(0 4px 14px var(--mark-glow-strong)); } } /* Mesma defasagem dos cards: cada ícone sobe e desce junto com o passo dele (6s de flutuação = quarto de fase a cada 1.5s). */ .cycle-mark-1 { animation-delay: 0s; } .cycle-mark-2 { animation-delay: -1.5s; } .cycle-mark-3 { animation-delay: -3s; } .cycle-mark-4 { animation-delay: -4.5s; } /* A pulsação do brilho tem período próprio (3.2s), então a defasagem entre os passos é de um quarto dela (0.8s) para os ícones pulsarem fora de fase. */ .cycle-mark-1 .cycle-mark-halo, .cycle-mark-1 .cycle-mark-icon { animation-delay: 0s; } .cycle-mark-2 .cycle-mark-halo, .cycle-mark-2 .cycle-mark-icon { animation-delay: -0.8s; } .cycle-mark-3 .cycle-mark-halo, .cycle-mark-3 .cycle-mark-icon { animation-delay: -1.6s; } .cycle-mark-4 .cycle-mark-halo, .cycle-mark-4 .cycle-mark-icon { animation-delay: -2.4s; } .cycle-node { position: absolute; width: 210px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transform: translate(-50%, -50%); animation: node-float 6s ease-in-out infinite; z-index: 2; } /* O float precisa repor o translate(-50%, -50%) que centraliza o card. */ @keyframes node-float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 9px)); } } .cycle-node-1 { left: 50%; top: 10%; animation-delay: 0s; } .cycle-node-2 { left: 90%; top: 50%; animation-delay: -1.5s; } .cycle-node-3 { left: 50%; top: 90%; animation-delay: -3s; } .cycle-node-4 { left: 10%; top: 50%; animation-delay: -4.5s; } .cycle-node-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .cycle-step { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-light); color: var(--accent-text); font-size: 13px; font-weight: 700; } .cycle-side { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; } .cycle-side-desk { background: var(--tag-desk-bg); color: var(--tag-desk-fg); } .cycle-side-app { background: var(--tag-app-bg); color: var(--tag-app-fg); } .cycle-node h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; } .cycle-node p { font-size: 13.5px; line-height: 1.5; color: var(--muted); } .cycle-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 208px; padding: 22px 18px; border-radius: 20px; background: linear-gradient(150deg, #1d4ed8, #2563eb 55%, #4f46e5); color: #fff; text-align: center; box-shadow: var(--shadow-lg); z-index: 1; } .cycle-core-icon { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.16); } .cycle-core-icon svg { width: 22px; height: 22px; } .cycle-core strong { display: block; font-size: 17px; font-weight: 700; } .cycle-core-sub { display: block; margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, 0.78); } .integration-note { max-width: 640px; margin: 56px auto 0; text-align: center; font-size: 15.5px; color: var(--muted); } .integration-note p { margin: 0; } /* Divisória em linha que isola a proposta destacada do texto de apoio. */ .integration-divider { display: block; height: 1px; margin: 20px 0; background: linear-gradient( 90deg, transparent, var(--skeleton-strong) 18%, var(--skeleton-strong) 82%, transparent ); } /* O trecho que resume a proposta ganha mais peso que a nota de apoio. */ .integration-emphasis { font-size: 19px; line-height: 1.5; color: var(--ink); } .integration-emphasis strong { font-weight: 700; color: var(--accent-text); } /* ============================================================================ Contato (seção escura) ============================================================================ */ .section-dark { background: radial-gradient(50% 60% at 80% 0%, rgba(37, 99, 235, 0.25), transparent 60%), var(--dark-bg); color: #e2e8f0; } .contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; } .contact-copy .section-title { color: #fff; } .contact-sub { margin-top: 18px; font-size: 16.5px; color: #94a3b8; max-width: 420px; } .contact-links { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; } .contact-link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: #e2e8f0; transition: color 160ms var(--ease); } .contact-link svg { width: 18px; height: 18px; color: #93c5fd; } .contact-link:hover { color: #fff; } .contact-form { background: var(--dark-panel); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: var(--radius-lg); padding: 32px; } .field { margin-bottom: 18px; } /* Campo honeypot anti-spam: fora da tela, mas presente no DOM */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; color: #cbd5e1; } .field .optional { font-weight: 400; color: #64748b; } .field input, .field textarea { width: 100%; padding: 13px 15px; border-radius: 11px; border: 1px solid rgba(148, 163, 184, 0.25); background: rgba(15, 23, 42, 0.5); color: #fff; font-size: 15px; font-family: inherit; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); } .field input::placeholder, .field textarea::placeholder { color: #64748b; } .field input:focus, .field textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); } .field textarea { resize: vertical; min-height: 110px; } .form-note { margin-bottom: 18px; font-size: 13px; line-height: 1.55; color: #94a3b8; } .form-note a { color: #93c5fd; text-decoration: underline; text-underline-offset: 2px; } .form-note a:hover { color: #fff; } .form-status { margin-top: 14px; font-size: 14px; min-height: 20px; } .form-status.success { color: #4ade80; } .form-status.error { color: #f87171; } /* ============================================================================ Footer ============================================================================ */ .site-footer { background: var(--footer-bg); border-top: 1px solid rgba(148, 163, 184, 0.12); color: #64748b; } .footer-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-top: 56px; padding-bottom: 56px; } .brand-footer { color: #fff; } /* No rodapé escuro a marca vira branca (contraste), mantendo o wordmark. */ .brand-footer .brand-mark { color: #fff; } .footer-tag { font-size: 15px; color: #94a3b8; margin-top: 4px; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 18px; } .footer-links a { font-size: 14px; color: #94a3b8; transition: color 160ms var(--ease); } .footer-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .footer-copy { font-size: 13px; margin-top: 14px; } /* ============================================================================ Página de documento legal (Termos, Privacidade, Cookies) ============================================================================ */ .legal-main { padding: 48px 0 72px; background: var(--bg); } .legal-container { max-width: 820px; } .legal-back { display: inline-block; font-size: 14px; font-weight: 600; color: var(--accent-text); margin-bottom: 24px; } .legal-back:hover { color: var(--accent-text-strong); text-decoration: underline; } .legal-header { border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 32px; } .legal-title { font-size: 34px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); } .legal-meta { margin-top: 10px; font-size: 13.5px; color: var(--muted); } .legal-status { font-size: 15px; color: var(--muted); } .legal-status.is-error { color: var(--danger); } .legal-content { font-size: 16px; color: var(--ink-soft); } .legal-content > * + * { margin-top: 16px; } .legal-content h2 { font-size: 22px; line-height: 1.3; margin-top: 36px; color: var(--ink); } .legal-content h3 { font-size: 18px; margin-top: 28px; color: var(--ink); } .legal-content h4 { font-size: 16px; margin-top: 22px; color: var(--ink); } .legal-content ul, .legal-content ol { padding-left: 24px; } .legal-content ul { list-style: disc; } .legal-content ol { list-style: decimal; } .legal-content li + li { margin-top: 6px; } .legal-content a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .legal-content a:hover { color: var(--accent-text-strong); } .legal-content strong { color: var(--ink); font-weight: 600; } .legal-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px; } .legal-content blockquote { border-left: 3px solid var(--border); background: var(--bg-alt); border-radius: 0 10px 10px 0; padding: 14px 18px; font-size: 14.5px; color: var(--muted); } .legal-content blockquote > * + * { margin-top: 10px; } .legal-content hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; } .legal-content table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .legal-content th, .legal-content td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; } .legal-content th { background: var(--bg-alt); font-weight: 600; color: var(--ink); } /* ============================================================================ Responsivo ============================================================================ */ @media (max-width: 1024px) { .cards-grid, .modules-grid { grid-template-columns: repeat(2, 1fr); } .hero-grid { grid-template-columns: 1fr; gap: 48px; padding-top: 56px; } .hero-copy { text-align: center; } .hero-sub { margin-left: auto; margin-right: auto; } .hero-actions, .hero-trust { justify-content: center; } .hero-visual { order: -1; } .contact-grid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 900px) { /* Em telas estreitas o ciclo vira uma lista de passos. */ .cycle { width: 100%; aspect-ratio: auto; display: flex; flex-direction: column; gap: 12px; } .cycle-ring { display: none; } .cycle-core { position: static; transform: none; width: 100%; order: -1; margin-bottom: 6px; padding: 20px 18px; } .cycle-node { position: static; transform: none; width: 100%; padding: 16px 18px; animation: none; } } @media (max-width: 720px) { .nav { position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 16px 24px 24px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: all 200ms var(--ease); } .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; } .nav-link { padding: 12px 0; } .nav-cta { margin: 12px 0 0; justify-content: center; } .nav-toggle { display: flex; } /* Marca + controles + hambúrguer precisam caber na mesma linha */ .nav-inner { gap: 10px; justify-content: flex-start; flex-wrap: wrap; } .nav-tools { margin-left: auto; } .tool-toggle { width: 36px; height: 36px; } .cards-grid, .modules-grid { grid-template-columns: 1fr; } .modules-teaser { flex-direction: column; align-items: stretch; text-align: left; } .modules-note { text-align: left; } .field-row { grid-template-columns: 1fr; gap: 0; } /* Herói: cena app + Desk em escala reduzida */ .hero-stage { height: 344px; } .desk-window { top: 38px; width: calc(100% - 74px); } .desk-url { font-size: 10px; padding: 2px 9px; } .desk-body { grid-template-columns: 76px 1fr; min-height: 190px; } /* A seta acompanha a largura do celular para não cruzar o aparelho. */ .loop-arrow { left: 166px; } .phone { width: 148px; height: 296px; border-radius: 26px; bottom: 26px; } .phone-screen { border-radius: 20px; padding: 24px 10px 10px; gap: 9px; } .phone-notch { width: 52px; height: 12px; } .app-tabbar { padding-top: 8px; } .float-badge { padding: 8px 11px; font-size: 12px; } .float-badge-1 { top: -12px; left: 0; } .float-badge-2 { bottom: 40px; right: -8px; } .section { padding: 64px 0; } .legal-title { font-size: 26px; } .legal-content { font-size: 15.5px; } .legal-content h2 { font-size: 20px; } } @media (max-width: 480px) { /* Cabe tudo na linha: marca + controles + CTA/hambúrguer */ .brand-name { font-size: 17px; } .tool-toggle { width: 34px; height: 34px; } .tool-toggle svg { width: 16px; height: 16px; } /* Herói ainda mais compacto em telas pequenas */ .hero-stage { height: 300px; } .desk-window { top: 30px; width: calc(100% - 56px); } .desk-body { grid-template-columns: 58px 1fr; min-height: 166px; } .desk-side { padding: 12px 8px; gap: 9px; } .desk-main { padding: 12px; gap: 10px; } .chip { width: 30px; } .loop-arrow { left: 148px; } .phone { width: 130px; height: 260px; border-radius: 22px; bottom: 20px; } .phone-screen { border-radius: 17px; padding: 22px 9px 9px; gap: 8px; } .phone-notch { width: 46px; height: 11px; } .app-avatar { width: 22px; height: 22px; } .app-head-lines .line-short { width: 46px; } .app-head-lines .line-tiny { width: 30px; } .float-badge { padding: 7px 10px; font-size: 11.5px; } .float-badge-1 { top: -10px; } .float-badge-2 { bottom: 30px; right: -4px; } } /* Respeitar usuários que preferem menos movimento no sistema operacional. O seletor ignora quem ligou o movimento explicitamente pelo botão do site (html[data-motion="full"]). */ @media (prefers-reduced-motion: reduce) { html:not([data-motion="full"]) *, html:not([data-motion="full"]) *::before, html:not([data-motion="full"]) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* Controle manual "reduzir movimento" do próprio site. Os pseudo-elementos entram na lista porque o serrilhado do herói é animado em `.loop-arrow-line::before` — o `*` sozinho não o alcança. */ html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }