/* ============================================================ GROVIC — style.css v4 — Navy Enterprise Navy palette · radius ≤16px · glows ≤0.12 · Team section ============================================================ */ /* ──────────────────────────────────────────────────────────── 0. FONTES SELF-HOSTED (variáveis — 1 arquivo cobre o range de peso) Arquivos em assets/fonts/ (subset latin, do Google Fonts): Inter.woff2 (400–600) · PlusJakartaSans.woff2 (500–700) · JetBrainsMono.woff2 (400–500) Sem dependência do Google CDN no . ──────────────────────────────────────────────────────────── */ @font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/PlusJakartaSans.woff2') format('woff2'); font-weight: 500 700; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/JetBrainsMono.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; } /* Sentinela do header (IntersectionObserver) — invisível, sem reflow */ .scroll-sentinel { position: absolute; top: 24px; left: 0; width: 1px; height: 1px; pointer-events: none; visibility: hidden; } /* ──────────────────────────────────────────────────────────── 1. TOKENS v6 — Quase-preto cinematográfico ──────────────────────────────────────────────────────────── */ :root { /* ===== Bases — quase-preto com tonalidade navy ===== */ --bg: #020308; --bg-elevated: #05070F; --bg-deeper: #000104; --bg-section-alt: #03050C; /* ===== Surfaces ===== */ --surface: #0A0D1A; --surface-2: #11152A; --surface-3: #181D38; --surface-mono: #06080E; /* ===== Borders ===== */ --border: #1A1F36; --border-strong: #262D4A; --border-soft: #11162B; --border-mono: #1F2A4A; /* ===== Texto ===== */ --text: #F7F8FB; --text-muted: #8E97AD; --text-dim: #868FA9; --text-mono: #9098B2; --text-mono-soft: #838CA8; /* ===== Accent ===== */ --accent: #1E4FCC; --accent-bright: #4076EA; --accent-soft: #6190E8; --accent-deep: #0E2C7A; --accent-glow: rgba(30,79,204,0.07); --accent-glow-strong: rgba(30,79,204,0.16); --accent-glow-edge: rgba(64,118,234,0.32); /* ===== Status semânticos ===== */ --ok: #4ADE80; --ok-soft: rgba(74,222,128,0.12); --warn: #FBBF24; --warn-soft: rgba(251,191,36,0.12); --err: #F87171; --err-soft: rgba(248,113,113,0.12); /* ===== Gradients ===== */ --gradient-accent: linear-gradient(135deg,#4076EA 0%,#1E4FCC 50%,#0E2C7A 100%); --gradient-text: linear-gradient(180deg,#F7F8FB 0%,#565E78 100%); --gradient-text-accent: linear-gradient(180deg,#6190E8 0%,#1E4FCC 100%); --gradient-surface: linear-gradient(180deg,rgba(17,21,42,0.85) 0%,rgba(10,13,26,0.95) 100%); --gradient-surface-mono:linear-gradient(180deg,rgba(6,8,14,0.92) 0%,rgba(2,3,8,0.96) 100%); /* ===== Vinheta global ===== */ --vignette: radial-gradient(ellipse 90% 70% at 50% 30%, transparent 0%, rgba(0,1,4,0.4) 90%); /* ===== Shadows ===== */ --shadow-sm: 0 1px 3px rgba(0,0,0,.32); --shadow: 0 8px 30px rgba(0,0,0,.44); --shadow-lg: 0 24px 80px rgba(0,0,0,.60); --shadow-xl: 0 48px 120px rgba(0,0,0,.72); /* ===== Radius ===== */ --radius-sm: 4px; --radius-md: 8px; --radius-card: 14px; /* ===== Spacing ===== */ --space-xs: 8px; --space-sm: 12px; --space-md: 20px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 72px; --space-3xl: 112px; /* ===== Container ===== */ --container-w: 1240px; --container-px: clamp(24px, 5vw, 48px); /* ===== Typography ===== */ --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ===== Motion ===== */ --ease-enter: cubic-bezier(0.16,1,0.3,1); --ease-out: cubic-bezier(0.0,0,0.2,1); --ease-editorial: cubic-bezier(0.22,1,0.36,1); --duration-reveal: 950ms; --duration-counter: 1800ms; --stagger: 100ms; } /* ──────────────────────────────────────────────────────────── 2. RESET ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.65; font-size: 0.9375rem; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-optical-sizing: auto; } body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: var(--vignette); mix-blend-mode: multiply; } /* Page vignette div (alternativa ao pseudo-elemento) */ .page-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(30,79,204,0.04) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(2,3,8,0.6) 0%, transparent 70%); } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; } input, textarea { font: inherit; } :focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 4px; } ::selection { background: rgba(59,111,230,0.25); } /* Skip link */ .skip-link { position: absolute; top: -100%; left: 16px; background: var(--accent); color: #fff; padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 600; z-index: 9999; } .skip-link:focus { top: 16px; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-deeper); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } /* ──────────────────────────────────────────────────────────── 3. TYPOGRAPHY ──────────────────────────────────────────────────────────── */ .h1 { font-family: var(--font-display); font-size: clamp(3rem, 6.2vw, 5.8rem); font-weight: 700; line-height: 0.98; letter-spacing: -0.028em; text-wrap: balance; } .h2 { font-family: var(--font-display); font-size: clamp(2rem, 3.8vw, 3.4rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.022em; text-wrap: balance; } .h3 { font-family: var(--font-display); font-size: clamp(1.35rem, 1.9vw, 1.65rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } .body-lg { font-size: 1.0625rem; line-height: 1.58; } .body { font-size: 0.9375rem; line-height: 1.65; } .small { font-size: 0.875rem; line-height: 1.5; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; background: rgba(30,79,204,0.06); border: 1px solid rgba(91,130,224,0.18); border-radius: 999px; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-soft); } .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--accent-bright); box-shadow: 0 0 10px rgba(64,118,234,0.7); } .text-muted { color: var(--text-muted); } .text-dim { color: var(--text-dim); } .gradient-text { background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gradient-text--accent { background: var(--gradient-text-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ──────────────────────────────────────────────────────────── 4. LAYOUT ──────────────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container-w); margin-inline: auto; padding-inline: var(--container-px); } .section { position: relative; padding-block: var(--space-3xl); overflow: hidden; } .section-header { text-align: center; max-width: 760px; margin-inline: auto; margin-bottom: var(--space-2xl); display: flex; flex-direction: column; gap: 16px; } /* Scroll reveal — editorial */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-reveal) var(--ease-editorial), transform var(--duration-reveal) var(--ease-editorial); } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } [data-reveal-delay="1"] { transition-delay: 100ms; } [data-reveal-delay="2"] { transition-delay: 200ms; } [data-reveal-delay="3"] { transition-delay: 300ms; } [data-reveal-delay="4"] { transition-delay: 400ms; } [data-reveal-delay="5"] { transition-delay: 500ms; } [data-reveal-delay="6"] { transition-delay: 600ms; } [data-reveal-group] [data-reveal-item] { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-reveal) var(--ease-editorial), transform var(--duration-reveal) var(--ease-editorial); } [data-reveal-group].is-revealed [data-reveal-item] { opacity: 1; transform: translateY(0); } [data-reveal-group].is-revealed [data-reveal-item]:nth-child(1) { transition-delay: 0ms; } [data-reveal-group].is-revealed [data-reveal-item]:nth-child(2) { transition-delay: 100ms; } [data-reveal-group].is-revealed [data-reveal-item]:nth-child(3) { transition-delay: 200ms; } [data-reveal-group].is-revealed [data-reveal-item]:nth-child(4) { transition-delay: 300ms; } [data-reveal-group].is-revealed [data-reveal-item]:nth-child(5) { transition-delay: 400ms; } [data-reveal-group].is-revealed [data-reveal-item]:nth-child(6) { transition-delay: 500ms; } /* Background decorations */ .bg-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, black 30%, transparent 80%); mask-image: radial-gradient(ellipse 80% 60% at center, black 30%, transparent 80%); } .glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, var(--accent-glow-strong) 0%, transparent 70%); filter: blur(100px); pointer-events: none; z-index: 0; } .glow--top { top: -180px; left: 50%; transform: translateX(-50%); } .glow--left { top: 15%; left: -200px; } .glow--right{ top: 15%; right: -200px; } /* ──────────────────────────────────────────────────────────── 5. COMPONENTS ──────────────────────────────────────────────────────────── */ /* Badge */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 100px; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); background: rgba(22,27,48,0.6); backdrop-filter: blur(8px); } .badge--accent { border-color: rgba(91,130,224,0.28); color: var(--accent-soft); background: rgba(30,79,204,0.08); } .badge--recommended { padding: 4px 10px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-color: rgba(91,130,224,0.30); color: var(--accent-soft); background: rgba(30,79,204,0.14); } /* Buttons — v6 */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 6px; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 280ms var(--ease-editorial), box-shadow 280ms var(--ease-editorial); border: none; } .btn--primary { background: linear-gradient(180deg,#4076EA 0%,#1E4FCC 100%); border: 1px solid rgba(255,255,255,0.08); color: #fff; box-shadow: 0 4px 16px rgba(30,79,204,0.28), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.04); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(30,79,204,0.42), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 1px rgba(255,255,255,0.08); } .btn--secondary { background: rgba(255,255,255,0.02); border: 1px solid var(--border-strong); color: var(--text); backdrop-filter: blur(10px); } .btn--secondary:hover { border-color: var(--accent-soft); background: rgba(30,79,204,0.06); transform: translateY(-2px); } .btn--lg { padding: 16px 32px; font-size: 1rem; } .btn--sm { padding: 10px 18px; font-size: 0.875rem; } /* Icon wrapper */ .icon-wrap { width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(30,79,204,0.12); border: 1px solid rgba(91,130,224,0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .icon-wrap svg { width: 20px; height: 20px; stroke: var(--accent-soft); fill: none; } /* Glass card — v6 refinado */ .glass-card { position: relative; background: var(--gradient-surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; transition: transform 320ms var(--ease-editorial), border-color 320ms, box-shadow 320ms; } .glass-card::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg,transparent,var(--accent-glow-edge),transparent); pointer-events: none; } .glass-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 24px 64px rgba(0,0,0,0.60), 0 0 60px var(--accent-glow); } /* ──────────────────────────────────────────────────────────── 5b. PRIMITIVOS EDITORIAIS v6 ──────────────────────────────────────────────────────────── */ /* Section Label (/00 — index.html) */ .section-label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--text-mono); letter-spacing: 0.02em; margin-bottom: 14px; } .section-label__slash { color: var(--accent-soft); opacity: 0.7; } .section-label__num { color: var(--text-muted); } .section-label__sep { color: var(--text-dim); } .section-label__name { color: var(--text-mono); } /* Tech Divider */ .tech-divider { display: flex; align-items: center; gap: 14px; margin: 40px auto; max-width: 480px; } .tech-divider__line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); } .tech-divider__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mono); white-space: nowrap; } /* Meta-bar */ .meta-bar { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-mono); } .meta-bar__item { display: inline-flex; align-items: center; gap: 5px; } .meta-bar__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px rgba(74,222,128,0.6); } .meta-bar__sep { color: var(--text-dim); opacity: 0.6; } /* Line-Number Gutter */ .line-gutter { display: flex; flex-direction: column; gap: 0; padding-right: 16px; border-right: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); user-select: none; text-align: right; min-width: 28px; } .line-gutter__num { line-height: 1.65; } /* Terminal Block */ .terminal-block { background: var(--surface-mono); border: 1px solid var(--border-mono); border-radius: 10px; overflow: hidden; font-family: var(--font-mono); font-size: 0.72rem; } .terminal-block__header { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(255,255,255,0.015); border-bottom: 1px solid var(--border-soft); } .terminal-block__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); } .terminal-block__title { margin-left: 8px; color: var(--text-mono); font-size: 0.7rem; } .terminal-block__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; } .terminal-block__prompt { color: var(--accent-soft); margin-right: 8px; } .terminal-block__line { color: var(--text); } .terminal-block__line.is-output { color: var(--ok); padding-left: 14px; } .terminal-block__line.is-dim { color: var(--text-mono); padding-left: 14px; } .terminal-block__cursor { display: inline-block; width: 6px; height: 13px; background: var(--accent-soft); vertical-align: middle; animation: blink 1.1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } /* Status Line (IDE-style) */ .status-line { display: flex; align-items: center; gap: 16px; padding: 7px 14px; background: rgba(2,3,8,0.6); border-top: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-mono); } .status-line__item.is-ok { color: var(--ok); } .status-line__item.is-right { margin-left: auto; } /* Inline Tag */ .inline-tag { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; color: var(--text-mono); letter-spacing: 0.04em; } /* Mono label (KPI label, stat label) */ .mono-label { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; color: var(--text-mono); letter-spacing: 0.04em; } .mono-caption { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-mono-soft); line-height: 1.5; } /* Floating card timestamp */ .floating-card__ts { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-mono); margin-bottom: 6px; display: block; } /* Page vignette (overlay alternativo para quem não usar body::before) */ .page-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 1; background: var(--vignette); mix-blend-mode: multiply; } /* Marquee eyebrow mono */ .marquee-label-mono { text-align: center; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mono); margin-bottom: var(--space-lg); } /* ──────────────────────────────────────────────────────────── 6. HEADER ──────────────────────────────────────────────────────────── */ /* Header meta-bar */ .header-meta-bar { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-mono); padding: 0 12px; border-left: 1px solid var(--border-soft); } .header-kbd-hint { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-mono-soft); opacity: 0.5; margin-left: 6px; } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; border-bottom: 1px solid transparent; transition: background 400ms var(--ease-out), backdrop-filter 400ms, border-color 400ms; } .site-header.scrolled { background: rgba(2,3,8,0.92); backdrop-filter: blur(24px) saturate(1.6); border-color: transparent; border-image: linear-gradient(90deg, transparent, var(--accent-glow-edge), transparent) 1; } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 32px; } .site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .site-logo__icon { width: 34px; height: 34px; } .site-logo__text { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--text); letter-spacing: -0.02em; } .nav-desktop { display: flex; align-items: center; gap: 32px; } .nav-desktop a { font-size: 0.9rem; font-weight: 500; color: var(--text-muted); transition: color 200ms; } .nav-desktop a:hover { color: var(--text); } .nav-cta-desktop { margin-left: 8px; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; cursor: pointer; } .nav-toggle span { display: block; height: 1.5px; background: var(--text-muted); border-radius: 2px; transition: transform 300ms, opacity 300ms; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .nav-mobile { display: none !important; overflow: hidden; } .nav-mobile.open { display: block !important; position: fixed; inset: 0; z-index: 200; background: rgba(5,6,21,0.6); backdrop-filter: blur(4px); } .nav-mobile__panel { position: absolute; top: 0; right: 0; width: min(340px, 88vw); height: 100%; background: var(--surface); border-left: 1px solid var(--border); padding: 24px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; } .nav-mobile__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .nav-mobile__close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; background: none; } .nav-mobile a { display: block; padding: 12px 16px; font-size: 0.95rem; font-weight: 500; color: var(--text-muted); border-radius: var(--radius-sm); transition: color 200ms, background 200ms; } .nav-mobile a:hover { color: var(--text); background: var(--surface-2); } .nav-mobile .btn { width: 100%; justify-content: center; margin-top: 16px; } /* ──────────────────────────────────────────────────────────── 7. HERO ──────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: 70px; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(30,79,204,0.10) 0%, transparent 68%); } .hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .hero__inner > * { min-width: 0; } .hero__content { display: flex; flex-direction: column; gap: 28px; min-width: 0; width: 100%; } .hero__eyebrow-wrap { display: flex; align-items: center; gap: 8px; } .hero__eyebrow-wrap .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); flex-shrink: 0; } .hero__title { margin-bottom: 0; } .hero__sub { max-width: 50ch; color: var(--text-muted); } .hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .hero__trust { display: flex; align-items: center; gap: 20px; padding-top: 8px; } .hero__trust-item { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--text-dim); font-weight: 500; } .hero__trust-dot { width: 6px; height: 6px; border-radius: 50%; background: #34D399; flex-shrink: 0; } .hero__trust-divider { width: 1px; height: 14px; background: var(--border); } /* Hero mesh gradient */ .hero { isolation: isolate; } .hero__mesh { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(60% 50% at 75% 20%, rgba(30,79,204,0.22), transparent 70%), radial-gradient(40% 35% at 15% 80%, rgba(91,130,224,0.12), transparent 70%), radial-gradient(50% 40% at 50% 50%, rgba(14,44,122,0.10), transparent 75%); filter: blur(20px); animation: mesh-shift 18s ease-in-out infinite alternate; } @keyframes mesh-shift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(2%, -1.5%, 0) scale(1.04); } } /* Visual */ .hero__visual { position: relative; z-index: 2; width: 100%; min-width: 0; } .hero__visual-wrapper { position: relative; width: 100%; } /* Dashboard */ .dashboard-mock { width: 100%; transform: perspective(1200px) rotateY(-10deg) rotateX(3deg); transform-style: preserve-3d; border-radius: var(--radius-card); border: 1px solid var(--border); overflow: hidden; background: var(--surface); box-shadow: 36px 48px 100px rgba(0,0,0,0.65), 0 0 70px rgba(30,79,204,0.09); transition: transform 600ms var(--ease-enter); } .hero__visual-wrapper:hover .dashboard-mock { transform: perspective(1200px) rotateY(-5deg) rotateX(1.5deg); } /* Floating cards */ .floating-card { position: absolute; background: var(--gradient-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); backdrop-filter: blur(16px); padding: 12px 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.40); z-index: 10; white-space: nowrap; } @keyframes float-glow { 0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(64,118,234,0.06); } 50% { box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 28px rgba(64,118,234,0.2); } } .floating-card--1 { top: -16px; left: -48px; animation: float-y 8s ease-in-out infinite, float-glow 6s ease-in-out infinite; } .floating-card--2 { bottom: 40px; left: -56px; animation: float-y 9s ease-in-out infinite, float-glow 6s ease-in-out infinite; animation-delay: -2.5s, -1.5s; } .floating-card--3 { top: 38%; right: -32px; animation: float-y 7.5s ease-in-out infinite, float-glow 6s ease-in-out infinite; animation-delay: -4s, -3s; } @keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .floating-card__label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; } .floating-card__value { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--text); } .floating-card__pulse { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 500; } .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 0 rgba(52,211,153,0.4); animation: pulse 2.5s ease-in-out infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(52,211,153,0.4); } 50% { box-shadow: 0 0 0 6px rgba(52,211,153,0); } } /* Dashboard internals */ .dash-topbar { background: var(--bg-elevated); border-bottom: 1px solid var(--border-soft); padding: 12px 16px; display: flex; align-items: center; gap: 10px; } .dash-dots { display: flex; gap: 6px; } .dash-dot { width: 10px; height: 10px; border-radius: 50%; } .dash-dot:nth-child(1) { background: #FF5F57; } .dash-dot:nth-child(2) { background: #FEBC2E; } .dash-dot:nth-child(3) { background: #28CA42; } .dash-url-bar { flex: 1; height: 24px; background: var(--surface-2); border-radius: 5px; border: 1px solid var(--border-soft); display: flex; align-items: center; padding-inline: 10px; gap: 6px; } .dash-url-indicator { width: 6px; height: 6px; border-radius: 50%; background: #34D399; flex-shrink: 0; } .dash-url-text { font-size: 0.625rem; color: var(--text-dim); } .dash-body { display: grid; grid-template-columns: 170px 1fr; min-height: 340px; } .dash-sidebar { background: var(--bg-elevated); border-right: 1px solid var(--border-soft); padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; } .dash-sidebar-group-label { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); padding: 8px 10px 4px; } .dash-nav-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; font-size: 0.71875rem; color: var(--text-dim); cursor: pointer; } .dash-nav-item.active { background: rgba(30,79,204,0.14); color: var(--accent-soft); } .dash-nav-dot { width: 12px; height: 12px; border-radius: 3px; background: var(--border); flex-shrink: 0; } .dash-nav-item.active .dash-nav-dot { background: var(--accent); } .dash-content { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); } .dash-content-header { display: flex; align-items: center; justify-content: space-between; } .dash-content-title { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; color: var(--text); } .dash-content-date { font-size: 0.625rem; color: var(--text-dim); } .dash-kpi-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; } .dash-kpi { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 10px; } .dash-kpi-label { font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 4px; } .dash-kpi-val { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .dash-kpi-delta { font-size: 0.5625rem; color: #34D399; margin-top: 2px; } .dash-chart-area { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 12px; flex: 1; } .dash-chart-label { font-size: 0.625rem; color: var(--text-muted); margin-bottom: 8px; display: flex; justify-content: space-between; } .chart-svg { width: 100%; height: 80px; overflow: visible; } .chart-line-path { fill: none; stroke: url(#chart-gradient); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .chart-area-path { fill: url(#chart-area-gradient); opacity: 0.25; } .dash-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--bg-elevated); border-top: 1px solid var(--border-soft); } .dash-status { display: flex; align-items: center; gap: 7px; font-size: 0.625rem; color: var(--text-muted); } .dash-progress-bar { display: flex; align-items: center; gap: 8px; font-size: 0.625rem; color: var(--text-dim); } .progress-track { width: 80px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; } .progress-fill { height: 100%; width: 72%; background: linear-gradient(90deg, var(--accent-bright), var(--accent-soft)); border-radius: 2px; } /* ──────────────────────────────────────────────────────────── 8. MARQUEE ──────────────────────────────────────────────────────────── */ .marquee-section { padding-block: var(--space-xl); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); background: var(--bg-elevated); overflow: hidden; } .marquee-label { text-align: center; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-dim); margin-bottom: var(--space-lg); } .marquee-wrapper { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%); } .marquee-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: marquee-scroll 50s linear infinite; } .marquee-wrapper:hover .marquee-track { animation-play-state: paused; } .marquee-item { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.05em; color: var(--text); opacity: 0.55; white-space: nowrap; user-select: none; transition: opacity 200ms; } .marquee-item:hover { opacity: 0.9; } .marquee-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ──────────────────────────────────────────────────────────── ANIMATION ENHANCEMENTS ──────────────────────────────────────────────────────────── */ /* Gradient text shimmer — passes highlight across accent text */ @keyframes gradient-shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .gradient-text--accent { background: linear-gradient(135deg, #6190E8 0%, #4076EA 25%, #a5bfff 50%, #4076EA 75%, #1E4FCC 100%); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-shimmer 5s ease-in-out infinite; } /* Nav desktop — sliding underline on hover */ .nav-desktop a { position: relative; } .nav-desktop a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: var(--accent-soft); transition: width 250ms var(--ease-editorial); } .nav-desktop a:hover::after { width: 100%; } /* Site logo icon — subtle rotate on hover */ .site-logo__icon { transition: transform 500ms var(--ease-editorial); } .site-logo:hover .site-logo__icon { transform: rotate(18deg) scale(1.06); } /* Hero eyebrow badge — shimmer sweep */ @keyframes badge-shimmer { 0% { transform: translateX(-150%); } 60% { transform: translateX(250%); } 100% { transform: translateX(250%); } } .hero__eyebrow-wrap .badge { position: relative; overflow: hidden; } .hero__eyebrow-wrap .badge::after { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent); animation: badge-shimmer 3.5s ease-in-out infinite; pointer-events: none; } /* Marquee logos — scale + brightness on hover */ .marquee-logo { transition: opacity 200ms ease, transform 200ms ease; } .marquee-logo:hover { opacity: 1; transform: scale(1.1); } /* Contact input — focus glow pulse */ @keyframes input-focus-pulse { 0% { box-shadow: 0 0 0 6px rgba(64,118,234,0.28), 0 0 0 3px var(--accent-glow-strong); } 100% { box-shadow: 0 0 0 3px var(--accent-glow-strong); } } .contact-input:focus { animation: input-focus-pulse 400ms ease-out forwards; } /* Method steps — hover lift + number glow */ .method-step { transition: transform 300ms var(--ease-editorial), border-color 300ms, box-shadow 300ms; } .method-step:hover { transform: translateY(-4px); border-color: var(--accent-soft); box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 40px var(--accent-glow); } .method-step__num { transition: color 300ms, text-shadow 300ms; } .method-step:hover .method-step__num { color: var(--accent-soft); text-shadow: 0 0 20px rgba(64,118,234,0.5); } /* Stat cards — hover accent glow */ .stat-card { transition: transform 300ms var(--ease-editorial), border-color 300ms, box-shadow 300ms; } .stat-card:hover { transform: translateY(-4px); border-color: rgba(64,118,234,0.3); box-shadow: 0 16px 48px rgba(0,0,0,0.5), 0 0 40px rgba(64,118,234,0.1); } /* Section label — slide in from left when parent reveals */ @keyframes label-slide-in { 0% { opacity: 0; transform: translateX(-14px); } 100% { opacity: 1; transform: translateX(0); } } [data-reveal].is-revealed .section-label { animation: label-slide-in 500ms var(--ease-editorial) 100ms both; } /* CTA contact form — pulsing accent border glow */ @keyframes form-border-pulse { 0%, 100% { border-color: var(--border); box-shadow: 0 24px 64px rgba(0,0,0,0.6); } 50% { border-color: rgba(64,118,234,0.3); box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 60px rgba(64,118,234,0.1); } } #contact-form { animation: form-border-pulse 5s ease-in-out infinite; } /* ──────────────────────────────────────────────────────────── 9. MÉTRICAS ──────────────────────────────────────────────────────────── */ .stats { background: var(--bg); } .stats__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } .stat-card { padding: 36px 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; overflow: hidden; min-width: 0; } .stat-number { font-family: var(--font-display); font-size: clamp(2.6rem, 4.4vw, 4rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; display: block; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; } .stat-label { font-size: 0.875rem; color: var(--text-muted); font-weight: 500; line-height: 1.4; } /* Stat v6 extras */ .stat-kpi-label { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; color: var(--text-mono); letter-spacing: 0.04em; margin-bottom: 6px; } .stat-footer-mono { font-family: var(--font-mono); font-size: 0.63rem; color: var(--text-mono-soft); margin-top: 8px; display: flex; align-items: center; gap: 8px; } .stat-footer-mono__delta { color: var(--ok); } .stat-number-wrap { display: flex; align-items: flex-start; } .stat-asterisk { font-family: var(--font-body); font-weight: 400; font-size: 1.25rem; color: var(--text-dim); margin-top: 0.35em; line-height: 1; } .stats-footnote { font-size: 0.75rem; color: var(--text-dim); line-height: 1.55; max-width: 64ch; margin-top: var(--space-lg); } /* Stat progress bar */ .stat-progress { width: 100%; height: 3px; background: var(--border-soft); border-radius: 2px; overflow: hidden; margin-bottom: 8px; } .stat-progress__fill { height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-soft) 100%); transition: width 1.2s cubic-bezier(0.16,1,0.3,1); } .stat-progress__fill.animated { width: var(--target-w, 70%); } /* ──────────────────────────────────────────────────────────── 10. SOBRE ──────────────────────────────────────────────────────────── */ .about { background: var(--bg-elevated); } .about__inner { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-3xl); align-items: center; } .about__label { margin-bottom: var(--space-md); } .about__title { margin-bottom: var(--space-md); } .about__sub { color: var(--text-muted); line-height: 1.65; margin-bottom: var(--space-lg); } .about__checks { display: flex; flex-direction: column; gap: 14px; } .about__check { display: flex; align-items: flex-start; gap: 12px; font-size: 0.9375rem; color: var(--text-muted); line-height: 1.5; } /* About bullet row with gutter */ .about__check-row { display: flex; align-items: flex-start; gap: 0; } .about__check-tag { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-mono-soft); margin-left: auto; padding-left: 12px; white-space: nowrap; align-self: center; } .about__check-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; } .about__visual { position: relative; } .about__card { padding: 32px; } .about__card-inner { display: flex; flex-direction: column; gap: 20px; } .about__metrics-row { display: flex; gap: 12px; } .about__metric { flex: 1; padding: 16px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-md); } .about__metric-val { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text); margin-bottom: 4px; } .about__metric-label { font-size: 0.75rem; color: var(--text-dim); } .about__activity-list { display: flex; flex-direction: column; gap: 12px; } .about__activity-item { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; } .activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .activity-dot--blue { background: var(--accent-bright); } .activity-dot--green { background: #34D399; } .activity-dot--purple { background: #A78BFA; } .activity-dot--orange { background: #FB923C; } .activity-text { color: var(--text-muted); flex: 1; } .activity-time { color: var(--text-dim); font-size: 0.75rem; white-space: nowrap; } /* ──────────────────────────────────────────────────────────── 11. SOLUÇÕES BENTO ──────────────────────────────────────────────────────────── */ .solutions { background: var(--bg); } .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .bento-card--wide { grid-column: span 2; } .bento-card--full { grid-column: span 3; } .bento-card { padding: 28px; display: flex; flex-direction: column; gap: 16px; } /* Bento svc header (mono) */ .bento-svc-header { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; color: var(--text-mono); letter-spacing: 0.04em; margin-bottom: -4px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); } .bento-card__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; } .bento-card__desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; } .bento-card__visual { flex: 1; margin-top: 4px; } /* Bento mini-chart */ .mini-chart-svg { width: 100%; height: 56px; overflow: visible; } .mini-chart-path { fill: none; stroke: var(--accent-soft); stroke-width: 1.5; stroke-linecap: round; opacity: 0.75; } .mini-chart-fill { fill: url(#mini-area-grad); opacity: 0.20; } /* Bento badges */ .bento-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .bento-badge { padding: 4px 10px; border: 1px solid var(--border); border-radius: 100px; font-size: 0.6875rem; font-weight: 500; color: var(--text-muted); background: rgba(22,27,48,0.5); } .bento-badge--accent { border-color: rgba(91,130,224,0.22); color: var(--accent-soft); background: rgba(30,79,204,0.07); } /* Flowchart */ .mini-flow { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .mini-flow-node { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.6875rem; font-weight: 600; color: var(--text-muted); background: var(--surface-2); white-space: nowrap; } .mini-flow-node--active { border-color: rgba(91,130,224,0.25); color: var(--accent-soft); background: rgba(30,79,204,0.10); } .mini-flow-arrow { color: var(--text-dim); font-size: 0.75rem; flex-shrink: 0; } /* Integration monograms */ .integration-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .integration-mono { width: 38px; height: 38px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.625rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.01em; } /* Pipeline */ .pipeline { display: flex; align-items: stretch; margin-top: 10px; } .pipeline-stage { flex: 1; padding: 7px 8px; text-align: center; font-size: 0.6rem; font-weight: 600; color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border-soft); border-right: none; position: relative; } .pipeline-stage:first-child { border-radius: 5px 0 0 5px; } .pipeline-stage:last-child { border-radius: 0 5px 5px 0; border-right: 1px solid var(--border-soft); } .pipeline-stage--active { background: rgba(30,79,204,0.16); border-color: rgba(91,130,224,0.22); color: var(--accent-soft); border-right: none; } .pipeline-stage:last-child.pipeline-stage--active { border-right: 1px solid rgba(91,130,224,0.22); } /* Chat bubbles */ .chat-bubbles { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .chat-bubble { padding: 8px 12px; border-radius: 10px; font-size: 0.75rem; line-height: 1.45; max-width: 85%; } .chat-bubble--user { background: rgba(30,79,204,0.16); border: 1px solid rgba(91,130,224,0.18); color: var(--accent-soft); align-self: flex-end; border-radius: 10px 10px 2px 10px; } .chat-bubble--ai { background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--text-muted); align-self: flex-start; border-radius: 10px 10px 10px 2px; } /* Compliance */ .compliance-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; } .compliance-badge { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: 0.75rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; } .compliance-badge svg { width: 14px; height: 14px; stroke: var(--accent-soft); fill: none; flex-shrink: 0; } /* ──────────────────────────────────────────────────────────── 12. PARA QUEM É (Photo cards) ──────────────────────────────────────────────────────────── */ .audiences { background: var(--bg-elevated); } .audiences__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .audience-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; transition: transform 300ms var(--ease-enter), border-color 300ms, box-shadow 300ms; } .audience-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 20px 60px rgba(0,0,0,0.50); } .audience-card__photo { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--surface-2); } .audience-card__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.80) brightness(0.85); transition: transform 600ms var(--ease-enter); } .audience-card:hover .audience-card__photo img { transform: scale(1.04); } .audience-card__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,9,26,0.20) 0%, rgba(7,9,26,0.75) 100%); } .audience-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--surface-2) 0%, var(--surface-3) 100%); font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: var(--text-dim); letter-spacing: -0.02em; user-select: none; } .audience-card__content { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); flex: 1; } .audience-card__label { font-size: 0.6875rem; } /* Audience card v6 */ .audience-card__tag { position: absolute; top: 12px; right: 12px; z-index: 3; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; color: var(--text-mono); letter-spacing: 0.04em; background: rgba(2,3,8,0.7); padding: 3px 7px; border-radius: 4px; } .audience-card__meta-bar { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-mono-soft); margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .audience-card__meta-bar span { color: var(--text-dim); } /* Deeper overlay */ .audience-card__overlay { background: linear-gradient(180deg, rgba(2,3,8,0.15) 0%, rgba(2,3,8,0.82) 100%) !important; } .audience-card__title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text); line-height: 1.3; } .audience-card__desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; } /* ──────────────────────────────────────────────────────────── 13. TIME ──────────────────────────────────────────────────────────── */ .team { background: var(--bg); } .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .team-card { position: relative; aspect-ratio: 3/4; border-radius: var(--radius-card); overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: transform 300ms var(--ease-enter), border-color 300ms; } .team-card:hover { border-color: var(--border-strong); transform: translateY(-4px); } .team-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.90); transition: transform 600ms var(--ease-enter); } .team-card:hover img { transform: scale(1.04); } .team-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(7,9,26,0.92) 100%); pointer-events: none; } .team-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--surface-2) 0%, var(--surface-3) 100%); font-family: var(--font-display); font-size: 3.5rem; font-weight: 700; color: var(--text-dim); letter-spacing: -0.02em; user-select: none; } .team-card__meta { position: absolute; bottom: 20px; left: 20px; right: 20px; z-index: 2; } .team-card__name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } .team-card__role { font-size: 0.8125rem; color: var(--text-muted); margin-top: 3px; } .team-card__linkedin { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 0.75rem; color: var(--accent-soft); opacity: 0.8; transition: opacity 200ms; } .team-card__linkedin:hover { opacity: 1; } /* ──────────────────────────────────────────────────────────── 14. COMO FUNCIONA ──────────────────────────────────────────────────────────── */ .how-it-works { background: var(--bg-elevated); } /* ── Flow wrap ── */ .flow-wrap { position: relative; padding-top: 40px; /* espaço para o conector ficar acima dos cards */ } /* ── Connector de progressão (horizontal, desktop) ── */ .flow-connector { position: absolute; top: 16px; left: calc(100% / 6); right: calc(100% / 6); height: 2px; pointer-events: none; z-index: 2; } .flow-connector__line { position: absolute; inset: 0; background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 50%, var(--accent-soft) 100%); transform-origin: left center; transform: scaleX(0); transition: transform 1100ms var(--ease-editorial); border-radius: 1px; } .flow-connector.is-visible .flow-connector__line { transform: scaleX(1); } .flow-connector__dot { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--border-strong); transform: translate(-50%, -50%); transition: border-color 400ms 800ms, box-shadow 400ms 800ms; z-index: 3; } .flow-connector.is-visible .flow-connector__dot { border-color: var(--accent-soft); box-shadow: 0 0 12px rgba(64,118,234,0.55); } /* ── Flow steps grid ── */ .flow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /* ── Flow card ── */ .flow-card { background: var(--gradient-surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 24px 22px 20px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; transition: transform 320ms var(--ease-editorial), border-color 320ms, box-shadow 320ms; } .flow-card:hover { transform: translateY(-4px); border-color: rgba(91,130,224,0.28); box-shadow: 0 20px 52px rgba(0,0,0,0.48), 0 0 24px rgba(30,79,204,0.08); } .flow-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(64,118,234,0.05) 0%, transparent 70%); opacity: 0; transition: opacity 320ms; border-radius: var(--radius-card); } .flow-card:hover::before { opacity: 1; } /* Card head: número compacto + label */ .flow-card__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; } .flow-card__num-row { display: flex; align-items: baseline; gap: 4px; } .flow-card__num { font-family: var(--font-display); font-size: clamp(1.75rem,2.8vw,2.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .flow-card__of { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-dim); letter-spacing: 0.04em; } .flow-card__phase { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500; color: var(--text-mono); letter-spacing: 0.08em; text-transform: uppercase; margin-left: auto; } .flow-card__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; line-height: 1.2; } .flow-card__desc { font-size: 0.8438rem; color: var(--text-muted); line-height: 1.58; flex: 1; } /* Mini-visual por fase */ .flow-card__visual { border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden; background: rgba(6,8,14,0.5); padding: 8px; margin-top: 4px; } .flow-card__visual svg { display: block; width: 100%; } /* Footer mono */ .flow-card__footer { display: flex; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-mono-soft); } .flow-card__footer-sep { color: var(--text-dim); opacity: 0.5; } /* legacy aliases (kept for reduced-motion rule) */ .steps-grid { display: none; } .step-card { display: none; } .step-number { display: none; } .step-title { display: none; } .step-desc { display: none; } /* Plan toggle */ .plan-toggle-wrap { display: flex; justify-content: center; margin-bottom: var(--space-xl); } .plan-toggle { display: inline-flex; align-items: center; gap: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px; } .plan-toggle__btn { padding: 8px 20px; border-radius: 999px; font-size: 0.875rem; font-weight: 500; color: var(--text-dim); cursor: pointer; transition: background 200ms, color 200ms; background: none; border: none; white-space: nowrap; } .plan-toggle__btn.active { background: var(--surface-3); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .plan-toggle__badge { padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; background: rgba(30,79,204,0.15); color: var(--accent-soft); border: 1px solid rgba(91,130,224,0.25); margin-left: 6px; } /* ──────────────────────────────────────────────────────────── 15. PLANOS ──────────────────────────────────────────────────────────── */ .plans { background: var(--bg); } .plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; } .plan-card { padding: 32px; display: flex; flex-direction: column; gap: 20px; transition: transform 300ms var(--ease-editorial), border-color 300ms, box-shadow 300ms; } .plan-card:not(.plan-card--featured):hover { transform: translateY(-5px); border-color: rgba(91,130,224,0.25); box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(30,79,204,0.08); } .plan-card--featured { transform: translateY(-10px); border-color: rgba(91,130,224,0.32); box-shadow: 0 0 60px rgba(30,79,204,0.16), 0 24px 60px rgba(0,0,0,0.40); } .plan-card--featured:hover { transform: translateY(-14px); box-shadow: 0 0 80px rgba(30,79,204,0.22), 0 32px 80px rgba(0,0,0,0.50); } .plan-card__header { display: flex; flex-direction: column; gap: 8px; } .plan-card__top { display: flex; align-items: center; justify-content: space-between; } .plan-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text); } .plan-desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; } .plan-engagement { font-size: 0.6875rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .plan-price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--accent-soft); margin-top: 4px; } .plan-divider { height: 1px; background: var(--border-soft); } .plan-features { display: flex; flex-direction: column; gap: 10px; } .plan-feature { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: var(--text-muted); line-height: 1.4; } .plan-feature svg { width: 16px; height: 16px; stroke: var(--accent-soft); fill: none; flex-shrink: 0; margin-top: 1px; } .plan-card .btn { margin-top: 8px; width: 100%; justify-content: center; } /* ──────────────────────────────────────────────────────────── 16. DEPOIMENTOS ──────────────────────────────────────────────────────────── */ .testimonials { background: var(--bg-elevated); } .testimonials-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; } .testimonials-stack { display: flex; flex-direction: column; gap: 16px; } .testimonial-card { padding: 28px; display: flex; flex-direction: column; gap: 16px; transition: transform 300ms var(--ease-editorial), border-color 300ms, box-shadow 300ms; } .testimonial-card:hover { transform: translateY(-4px); border-color: rgba(91,130,224,0.3); box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 36px rgba(30,79,204,0.1); } .testimonial-card:hover .testimonial-quotemark { opacity: 0.6; transition: opacity 300ms; } .testimonial-card--featured { padding: 36px; } .testimonial-quotemark { font-size: 2.5rem; font-family: Georgia, serif; color: var(--accent-soft); opacity: 0.35; line-height: 1; margin-bottom: -8px; } .testimonial-quote { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.65; font-style: italic; } .testimonial-card--featured .testimonial-quote { font-size: 1.0625rem; } .testimonial-author { display: flex; align-items: center; gap: 12px; } .testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--gradient-accent); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; color: #fff; flex-shrink: 0; } .testimonial-name { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; color: var(--text); } .testimonial-role { font-size: 0.8125rem; color: var(--text-dim); } /* Stars */ .testimonial-stars { display: flex; gap: 3px; margin-bottom: 4px; } .testimonial-stars svg { width: 14px; height: 14px; fill: var(--accent-soft); stroke: none; } /* ──────────────────────────────────────────────────────────── 17. FAQ ──────────────────────────────────────────────────────────── */ .faq { background: var(--bg); } .faq__inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-3xl); align-items: start; } .faq__left { position: sticky; top: 100px; } .faq__left .h2 { margin-bottom: var(--space-md); } .faq__left .body { color: var(--text-muted); } .faq__list { display: flex; flex-direction: column; } .faq-item { border-bottom: 1px solid var(--border-soft); } .faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text); text-align: left; background: none; border: none; cursor: pointer; transition: color 200ms; } .faq-trigger:hover { color: var(--accent-soft); } .faq-chevron { width: 20px; height: 20px; stroke: currentColor; fill: none; flex-shrink: 0; transition: transform 300ms var(--ease-enter); } .faq-item.open .faq-chevron { transform: rotate(180deg); } .faq-body { max-height: 0; overflow: hidden; transition: max-height 400ms var(--ease-enter); } .faq-item.open .faq-body { max-height: 400px; } .faq-body p { padding-bottom: 20px; font-size: 0.9375rem; color: var(--text-muted); line-height: 1.65; } /* About cards stack */ .about__cards-stack { position: relative; height: 420px; } .about__card-float { position: absolute; left: 0; right: 0; background: var(--gradient-surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px 24px; box-shadow: var(--shadow-lg); transition: transform 300ms var(--ease-enter); } .about__card-float:nth-child(1) { top: 0; transform: rotate(-2.5deg) translateX(-8px); z-index: 1; } .about__card-float:nth-child(2) { top: 88px; transform: rotate(1deg) translateX(8px); z-index: 2; } .about__card-float:nth-child(3) { top: 188px; transform: rotate(-0.5deg); z-index: 3; } .about__cards-stack:hover .about__card-float:nth-child(1) { transform: rotate(-2.5deg) translateX(-14px) translateY(-4px); } .about__cards-stack:hover .about__card-float:nth-child(3) { transform: rotate(-0.5deg) translateY(-4px); } .about__card-float__label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; } .about__card-float__row { display: flex; align-items: center; gap: 10px; } .about__card-float__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .about__card-float__text { font-size: 0.8125rem; color: var(--text-muted); } .about__card-float__val { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .about__card-float__sub { font-size: 0.75rem; color: var(--text-dim); margin-top: 2px; } /* CTA floating badges */ .cta-badge { position: absolute; padding: 7px 14px; border-radius: 8px; background: var(--gradient-surface); border: 1px solid var(--border); backdrop-filter: blur(16px); font-size: 0.75rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; opacity: 0.42; pointer-events: none; letter-spacing: 0.04em; } /* ──────────────────────────────────────────────────────────── 18. CTA FINAL ──────────────────────────────────────────────────────────── */ .cta-final { background: var(--bg-deeper); text-align: center; } .cta-final__inner { position: relative; z-index: 2; max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; } .cta-final .h2 { max-width: 22ch; } .cta-final__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; } .cta-final__sub { font-size: 0.9rem; color: var(--text-dim); } /* ──────────────────────────────────────────────────────────── 19. FOOTER ──────────────────────────────────────────────────────────── */ .site-footer { background: var(--bg-deeper); border-top: 1px solid var(--border-soft); padding-top: var(--space-3xl); padding-bottom: var(--space-2xl); position: relative; overflow: hidden; } .footer__watermark { position: absolute; bottom: -0.1em; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: clamp(8rem, 22vw, 22rem); font-weight: 700; letter-spacing: -0.04em; -webkit-text-stroke: 1px rgba(245,246,250,0.04); color: transparent; white-space: nowrap; pointer-events: none; user-select: none; line-height: 1; z-index: 0; } .footer__content { position: relative; z-index: 1; } .footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: var(--space-2xl); margin-bottom: var(--space-2xl); } .footer__brand { display: flex; flex-direction: column; gap: var(--space-md); } .footer__logo { display: flex; align-items: center; gap: 10px; } .footer__logo img { width: 32px; height: 32px; } .footer__logo-text { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } .footer__tagline { font-size: 0.875rem; color: var(--text-dim); line-height: 1.65; max-width: 28ch; } .footer__col h3 { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 16px; } .footer__col ul { display: flex; flex-direction: column; gap: 10px; } .footer__col a { font-size: 0.875rem; color: var(--text-dim); transition: color 200ms; } .footer__col a:hover { color: var(--text-muted); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: var(--space-lg); border-top: 1px solid var(--border-soft); } .footer__copy { font-size: 0.8125rem; color: var(--text-dim); } .footer__legal { display: flex; gap: 20px; } .footer__legal a { font-size: 0.8125rem; color: var(--text-dim); transition: color 200ms; } .footer__legal a:hover { color: var(--text-muted); } /* ──────────────────────────────────────────────────────────── 20. PÁGINA 404 ──────────────────────────────────────────────────────────── */ .error-page { min-height: 100svh; display: flex; align-items: center; justify-content: center; } .error-page__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px 24px; text-align: center; } .error-code { font-family: var(--font-display); font-size: clamp(6rem,18vw,14rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--surface-3); -webkit-text-stroke: 1px var(--border-strong); } .error-code span { color: var(--accent-soft); -webkit-text-stroke: 0; } /* ──────────────────────────────────────────────────────────── 20b. V6 — ADIÇÕES EDITORIAIS POR COMPONENTE ──────────────────────────────────────────────────────────── */ /* Como funciona — sub-label + duração mono */ .step-sublabel { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500; color: var(--text-mono-soft); letter-spacing: 0.06em; text-transform: uppercase; margin-top: -8px; } .step-footer-mono { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-mono-soft); display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-soft); } .step-footer-mono__sep { color: var(--text-dim); opacity: 0.5; } /* Planos — tier tag */ .plan-tier-tag { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; color: var(--text-mono); letter-spacing: 0.04em; background: rgba(6,8,14,0.7); border: 1px solid var(--border-soft); padding: 2px 7px; border-radius: 4px; } .plan-card--featured .plan-tier-tag { color: var(--accent-soft); border-color: rgba(91,130,224,0.2); background: rgba(30,79,204,0.08); } /* Planos — checkmark mono [✓] */ .plan-feature--check .plan-feature__glyph { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ok); flex-shrink: 0; width: 16px; text-align: center; margin-top: 1px; line-height: 1.4; } .plan-feature svg { display: none; } /* substituído pelo glyph mono */ .plan-feature--check { align-items: flex-start; } /* Planos — footer mono (prazo implementação) */ .plan-footer-mono { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-mono-soft); display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-soft); margin-top: 4px; } .plan-footer-mono__label { color: var(--text-dim); } .plan-footer-mono__val { color: var(--text-mono); } /* FAQ — número mono */ .faq-num { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-mono-soft); letter-spacing: 0.04em; margin-right: 10px; flex-shrink: 0; user-select: none; } /* FAQ — toggle glyph [+]/[-] */ .faq-glyph { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 400; color: var(--text-dim); flex-shrink: 0; width: 20px; text-align: center; transition: color 200ms; line-height: 1; } .faq-item.open .faq-glyph { color: var(--accent-soft); } /* ocultar chevron SVG se glyph presente */ .faq-trigger .faq-chevron { display: none; } /* Depoimentos — glifos quadrados */ .testimonial-squares { display: flex; gap: 3px; margin-bottom: 4px; } .testimonial-squares__glyph { font-family: var(--font-mono); font-size: 0.6rem; color: var(--accent-soft); opacity: 0.7; line-height: 1; } /* meta-bar por card */ .testimonial-meta-bar { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-mono-soft); display: flex; align-items: center; gap: 8px; margin-top: 2px; } .testimonial-meta-bar__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px rgba(74,222,128,0.5); flex-shrink: 0; } .testimonial-meta-bar__sep { color: var(--text-dim); opacity: 0.5; } /* CTA — glow reforçado */ .cta-final::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 55%, rgba(30,79,204,0.18) 0%, transparent 70%); z-index: 1; } .cta-final__inner { z-index: 2; } /* CTA — badges v6 com timestamp */ .cta-badge__ts { font-family: var(--font-mono); font-size: 0.58rem; color: var(--text-mono-soft); display: block; margin-top: 2px; } .cta-badge { opacity: 0.55; /* levemente mais visível */ } /* Footer — meta-bar superior */ .footer__meta-bar { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-2xl); font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-mono-soft); padding-bottom: var(--space-md); border-bottom: 1px solid var(--border-soft); } .footer__meta-bar .meta-bar__dot { width: 5px; height: 5px; } .footer__meta-bar__sep { color: var(--text-dim); opacity: 0.4; } /* Footer — watermark v6 (stroke mais fino) */ .footer__watermark { -webkit-text-stroke: 0.5px rgba(245,246,250,0.025); } /* ──────────────────────────────────────────────────────────── 20c. V7 — NOVOS ELEMENTOS (i18n, device-frame, chips, planos) ──────────────────────────────────────────────────────────── */ /* Lang switch toggle */ .lang-switch { display: inline-flex; align-items: center; gap: 2px; background: rgba(10,14,30,0.7); border: 1px solid rgba(91,130,224,0.4); border-radius: 100px; padding: 3px; cursor: pointer; transition: border-color 200ms, box-shadow 200ms; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(64,118,234,0.1), 0 2px 8px rgba(0,0,0,0.4); } .lang-switch:hover { border-color: rgba(91,130,224,0.7); box-shadow: 0 0 0 1px rgba(64,118,234,0.2), 0 2px 12px rgba(0,0,0,0.4); } .lang-switch__option { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 100px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.4); transition: background 200ms, color 200ms, box-shadow 200ms; letter-spacing: 0.05em; white-space: nowrap; } .lang-switch__flag { font-size: 1.1rem; line-height: 1; } .lang-switch[data-active="pt"] .lang-switch__option[data-lang="pt"], .lang-switch:not([data-active]) .lang-switch__option[data-lang="pt"] { background: linear-gradient(135deg, #4076EA, #1E4FCC); color: #fff; box-shadow: 0 2px 8px rgba(30,79,204,0.5); } .lang-switch[data-active="en"] .lang-switch__option[data-lang="en"] { background: linear-gradient(135deg, #4076EA, #1E4FCC); color: #fff; box-shadow: 0 2px 8px rgba(30,79,204,0.5); } /* Phone group with DDI */ .contact-phone-group { display: flex; gap: 0; align-items: stretch; } .contact-phone-group .contact-input--ddi { flex: 0 0 90px; width: 90px; padding-left: 10px; padding-right: 26px; border-right: 1px solid var(--border-soft); border-radius: var(--radius-md) 0 0 var(--radius-md); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B96AC' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; appearance: none; -webkit-appearance: none; cursor: pointer; } .contact-phone-group .contact-input--ddi:focus { z-index: 1; position: relative; } .contact-phone-group .contact-input--tel { flex: 1 1 0; width: auto; min-width: 0; border-left: none; border-radius: 0 var(--radius-md) var(--radius-md) 0; } /* Hero device frame */ .hero-device-frame { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-xl); background: var(--surface); margin: 0; } .hero-device-frame::before { content: ''; position: absolute; inset: -1px; border-radius: 15px; pointer-events: none; z-index: 2; background: linear-gradient(180deg, rgba(64,118,234,0.12) 0%, transparent 40%, transparent 70%, rgba(2,3,8,0.6) 100%); } .hero-device-frame__img { display: block; width: 100%; height: auto; border-radius: 13px; object-fit: cover; } .hero-device-frame__glow { position: absolute; inset: 0; border-radius: 14px; pointer-events: none; box-shadow: 0 0 80px rgba(30,79,204,0.22), 0 40px 120px rgba(0,0,0,0.60); } /* Hero device frame fallback (when no image yet) */ .hero-device-frame__img[src="/assets/img/hero-app.png"]:not([complete]) { min-height: 300px; background: var(--surface-2); } /* ── Visão Geral mockup (vg-mock) ── */ .vg-mock { background: #0F1117; border: 1px solid #1E2230; border-radius: 14px; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,.65), 0 0 60px rgba(30,79,204,.12); font-family: var(--font-body); color: #E2E8F0; width: 100%; } .vg-topbar { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 20px 10px; border-bottom: 1px solid #1A1F30; flex-wrap: wrap; gap: 8px; } .vg-topbar__left { display: flex; flex-direction: column; gap: 2px; } .vg-topbar__actions { display: flex; gap: 8px; align-items: center; } .vg-title { font-size: 0.9375rem; font-weight: 700; color: #F1F5F9; } .vg-subtitle{ font-size: 0.6875rem; color: #8B96AC; } .vg-btn { font-size: 0.72rem; font-weight: 500; padding: 5px 12px; border-radius: 6px; cursor: default; white-space: nowrap; background: #1E2638; border: 1px solid #2A3350; color: #94A3B8; } .vg-btn--outline { background: transparent; border-color: #2A3350; color: #94A3B8; } .vg-btn--full { width: 100%; margin-top: 12px; text-align: center; justify-content: center; } .vg-tabs { display: flex; gap: 0; padding: 0 20px; border-bottom: 1px solid #1A1F30; overflow-x: auto; } .vg-tab { font-size: 0.72rem; padding: 8px 12px; color: #8B96AC; border-bottom: 2px solid transparent; white-space: nowrap; cursor: default; } .vg-tab--active { color: #E2E8F0; border-bottom-color: #4076EA; font-weight: 500; } .vg-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #1A1F30; border-bottom: 1px solid #1A1F30; } .vg-kpi { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; background: #0F1117; } .vg-kpi__label { font-size: 0.58rem; letter-spacing: 0.06em; color: #8B96AC; font-weight: 500; } .vg-kpi__val { font-size: 0.9375rem; font-weight: 700; color: #F1F5F9; } .vg-kpi__val--neg { color: #F87171; } .vg-kpi__delta { font-size: 0.58rem; color: #8B96AC; } .vg-kpi__delta--down { color: #F87171; } .vg-kpi__delta--neutral { color: #8B96AC; } .vg-main { display: grid; grid-template-columns: 1fr 220px; gap: 1px; background: #1A1F30; } .vg-chart-area { padding: 14px 16px; background: #0F1117; } .vg-chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .vg-chart-title { font-size: 0.75rem; font-weight: 600; color: #CBD5E1; } .vg-chart-legend { display: flex; align-items: center; gap: 4px; font-size: 0.6rem; color: #8B96AC; } .vg-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .vg-legend-dot--green { background: #4ADE80; } .vg-legend-dot--red { background: #F87171; } .vg-chart-svg { width: 100%; height: 80px; display: block; } .vg-cards-panel { padding: 14px 14px 14px; background: #0F1117; display: flex; flex-direction: column; gap: 4px; } .vg-panel-title { font-size: 0.75rem; font-weight: 600; color: #CBD5E1; margin-bottom: 6px; } .vg-panel-label { font-size: 0.58rem; letter-spacing: 0.06em; color: #8B96AC; font-weight: 500; } .vg-panel-val { font-size: 1rem; font-weight: 700; color: #F1F5F9; } .vg-panel-sub { font-size: 0.6rem; color: #8B96AC; } .vg-panel-avail { font-size: 0.8125rem; font-weight: 700; color: #4ADE80; display: block; } .vg-panel-invoice { font-size: 0.8125rem; font-weight: 700; color: #F1F5F9; display: block; } .vg-panel-row { display: flex; gap: 16px; margin-top: 6px; } .vg-progress-bar { width: 100%; height: 5px; background: #1E2638; border-radius: 3px; overflow: hidden; margin: 6px 0; } .vg-progress-fill { height: 100%; background: #F87171; border-radius: 3px; } /* ── Nicho grid (3 colunas iguais) ── */ .bento-grid--nichos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 0; } /* Nicho card — identidade setorial */ .bento-card--nicho { position: relative; overflow: hidden; background: var(--gradient-surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 10px; transition: transform 320ms var(--ease-editorial), border-color 320ms, box-shadow 320ms; border-top: 2px solid rgba(64,118,234,0.35); } .bento-card--nicho:hover { transform: translateY(-5px); border-color: rgba(91,130,224,0.35); box-shadow: 0 24px 56px rgba(0,0,0,0.5), 0 0 32px rgba(30,79,204,0.10); } .nicho-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(64,118,234,0.06) 0%, transparent 70%); border-radius: var(--radius-card); } .nicho-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .nicho-tag { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; color: var(--text-mono); letter-spacing: 0.04em; } .nicho-icon { width: 18px; height: 18px; stroke: var(--accent-soft); fill: none; flex-shrink: 0; opacity: 0.75; } .nicho-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.1; letter-spacing: -0.015em; } .nicho-pain { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--accent-soft); line-height: 1.35; border-left: 2px solid rgba(64,118,234,0.4); padding-left: 10px; margin: 2px 0 4px; font-style: italic; } .nicho-desc { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.55; flex: 1; } /* ── Platform separator ── */ .bento-platform-sep { display: flex; align-items: center; gap: 16px; margin: 36px 0 24px; } .bento-platform-sep__line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); } .bento-platform-sep__label { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; color: var(--text-mono); letter-spacing: 0.06em; white-space: nowrap; } /* ── Platform grid (Analytics 2fr + Kron 1fr) ── */ .bento-grid--platform { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; } /* Platform card — estética terminal/técnica */ .bento-card--platform { background: var(--surface-mono); border: 1px solid var(--border-mono); border-radius: var(--radius-card); padding: 24px; display: flex; flex-direction: column; gap: 12px; transition: transform 320ms var(--ease-editorial), border-color 320ms; } .bento-card--platform:hover { transform: translateY(-5px); border-color: rgba(91,130,224,0.35); box-shadow: 0 24px 56px rgba(0,0,0,0.5), 0 0 40px rgba(30,79,204,0.12); } .platform-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .platform-header__left { display: flex; flex-direction: column; gap: 4px; } .platform-tag { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-mono-soft); letter-spacing: 0.04em; } .platform-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .platform-desc { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.55; } .platform-chart { margin-top: 4px; } .platform-chart__labels { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-dim); margin-bottom: 8px; } /* Kron terminal mockup */ .kron-terminal { background: var(--bg-deeper); border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden; margin-top: 4px; font-family: var(--font-mono); font-size: 0.68rem; } .kron-terminal__header { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: rgba(255,255,255,0.015); border-bottom: 1px solid var(--border-soft); } .kron-terminal__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); } .kron-terminal__title { font-size: 0.6rem; color: var(--text-mono); margin-left: 6px; letter-spacing: 0.04em; } .kron-terminal__body { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; } .kron-terminal__line { display: flex; align-items: center; gap: 8px; color: var(--text-mono); } .kron-terminal__prompt { color: var(--accent-soft); } .kron-terminal__line--out { color: var(--text-dim); padding-left: 14px; } .kron-terminal__line--ok { color: var(--ok); } .kron-terminal__cursor { display: inline-block; width: 5px; height: 11px; background: var(--accent-soft); animation: blink 1.1s steps(2) infinite; margin-left: 4px; vertical-align: middle; } /* Module chips */ .module-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .module-chip { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 8px; transition: border-color 200ms, transform 200ms, color 200ms; white-space: nowrap; } .glass-card:hover .module-chip { border-color: var(--border-strong); transform: translateY(-1px); color: var(--text); } /* Kron BETA badge */ .kron-beta-badge { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; color: var(--accent-soft); background: rgba(30,79,204,0.10); border: 1px solid rgba(91,130,224,0.22); border-radius: 4px; padding: 2px 7px; letter-spacing: 0.06em; flex-shrink: 0; } /* Kron pipeline pending node */ .mini-flow-node--pending { opacity: 0.4; border-style: dashed !important; } /* Plan price */ .plan-price { margin-top: 8px; display: flex; align-items: baseline; gap: 2px; } .plan-price__val { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--accent-soft); line-height: 1; } .plan-price__val--consult { font-size: 1.25rem; } .plan-price__period { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); margin-left: 2px; } /* Plan annual note */ .plan-anual-note { text-align: center; font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-mono); margin-top: -24px; margin-bottom: 24px; letter-spacing: 0.04em; } /* Implementation fee strip */ .plan-impl-fee { margin-top: var(--space-xl); padding: 18px 24px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-card); text-align: center; font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; } .plan-impl-fee__label { color: var(--text-dim); } .plan-impl-fee__val { color: var(--text); font-weight: 700; margin: 0 4px; font-family: var(--font-display); } .plan-impl-fee__desc { color: var(--text-dim); } /* ──────────────────────────────────────────────────────────── 21. RESPONSIVO ──────────────────────────────────────────────────────────── */ /* ── 1200px ── */ @media (max-width: 1200px) { .footer__top { grid-template-columns: 1.5fr 1fr 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } } /* ── 1024px (tablet landscape) ── */ @media (max-width: 1024px) { .hero__inner { grid-template-columns: 1fr; gap: 48px; overflow: hidden; } .hero__inner > * { min-width: 0; } .hero__visual { max-width: 600px; margin-inline: auto; } .stats__grid { grid-template-columns: repeat(2, 1fr); } .bento-grid--nichos { grid-template-columns: 1fr; } .bento-grid--platform { grid-template-columns: 1fr; } .about__inner { grid-template-columns: 1fr; gap: var(--space-2xl); } .about__cards-stack { height: 320px; } .testimonials-grid { grid-template-columns: 1fr; } .testimonials-stack { flex-direction: row; gap: 16px; } .faq__inner { grid-template-columns: 1fr; gap: var(--space-xl); } .faq__left { position: static; } .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } .flow-steps { grid-template-columns: 1fr; } .flow-connector { display: none; } .flow-wrap { padding-top: 0; } } /* ── 768px (tablet portrait / phablet) ── */ @media (max-width: 768px) { :root { --space-3xl: 72px; --space-2xl: 48px; --space-xl: 36px; } /* ── Nav ── */ .nav-desktop { display: none; } .nav-cta-desktop { display: none; } .nav-toggle { display: flex; } .header-meta-bar { display: none; } /* oculta meta no mobile header */ .lang-switch { display: none; } /* desktop toggle oculto; aparece no menu mobile */ .nav-mobile__lang { padding: 16px 0 0; border-top: 1px solid var(--border-soft); margin-top: 8px; } .lang-switch--mobile { display: inline-flex; font-size: 0.8125rem; } .lang-switch--mobile .lang-switch__option { padding: 6px 14px; } /* ── Hero ── */ .hero { padding-top: 70px; } .hero__title { font-size: clamp(2.2rem, 9.5vw, 3.2rem) !important; line-height: 1.0 !important; } .h2 { font-size: clamp(1.75rem, 6vw, 2.6rem) !important; } .body-lg { font-size: 0.9375rem; } .hero__actions { flex-direction: column; align-items: stretch; gap: 10px; } .hero__actions .btn { justify-content: center; width: 100%; } .hero__trust { flex-wrap: wrap; gap: 6px; } .hero__visual { min-width: 0; width: 100%; max-width: 100%; } .hero__visual-wrapper { width: 100%; overflow: hidden; } /* vg-mock mobile: simplificado */ .vg-mock { border-radius: 10px; } .vg-topbar { padding: 12px 14px 8px; } .vg-topbar__actions { display: none; } .vg-subtitle { display: none; } .vg-tabs { padding: 0 14px; overflow-x: auto; scrollbar-width: none; } .vg-tabs::-webkit-scrollbar { display: none; } .vg-kpi-row { grid-template-columns: repeat(2, 1fr); } .vg-kpi { padding: 10px 12px; } .vg-kpi__val { font-size: 0.875rem; } .vg-main { grid-template-columns: 1fr; } .vg-cards-panel { display: none; } .vg-chart-area { padding: 10px 12px; } /* Floating cards */ .floating-card--1 { display: none; } .floating-card--2 { display: none; } .floating-card--3 { display: none; } /* ── Stats ── */ .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .stat-card { padding: 20px 16px; } .stat-number { font-size: clamp(2rem, 7vw, 3rem) !important; } /* ── Sobre ── */ .about__inner { grid-template-columns: 1fr; gap: var(--space-xl); } .about__cards-stack { height: 280px; } /* ── Soluções nichos ── */ .bento-grid--nichos { grid-template-columns: 1fr; gap: 12px; } .bento-card--nicho { padding: 22px 18px 20px; } .nicho-title { font-size: 1.25rem; } .nicho-pain { font-size: 0.8125rem; } /* Platform separator */ .bento-platform-sep { margin: 28px 0 20px; } /* ── Platform cards ── */ .bento-grid--platform { grid-template-columns: 1fr; gap: 12px; } .bento-card--platform { padding: 20px 18px; } .kron-terminal { font-size: 0.65rem; } .kron-terminal__body { padding: 8px 10px; gap: 4px; } /* ── Como funciona ── */ .flow-wrap { padding-top: 0; } .flow-connector { display: none; } .flow-steps { grid-template-columns: 1fr; gap: 12px; } .flow-card { padding: 20px 18px 18px; gap: 8px; } .flow-card__num { font-size: clamp(1.5rem, 6vw, 2rem) !important; } .flow-card__visual { padding: 6px; } .flow-card__visual svg { max-height: 56px; } /* ── Plans ── */ .plan-toggle-wrap { margin-bottom: var(--space-lg); } .plans-grid { grid-template-columns: 1fr; gap: 12px; } .plan-card { padding: 24px 20px; } .plan-card--featured { transform: none; } .plan-card--featured:hover { transform: translateY(-4px); } .plan-price__val { font-size: 1.5rem !important; } .plan-impl-fee { padding: 14px 18px; font-size: 0.8125rem; } /* ── Depoimentos ── */ .testimonials-grid { grid-template-columns: 1fr; } .testimonials-stack { flex-direction: column; gap: 12px; } .testimonial-card { padding: 22px 18px; } .testimonial-card--featured { padding: 22px 18px; } /* ── FAQ ── */ .faq__inner { grid-template-columns: 1fr; gap: var(--space-lg); } .faq__left { position: static; } .faq-trigger { font-size: 0.9375rem; } /* ── CTA ── */ .cta-badge { display: none; } /* badges flutuantes off no mobile */ .cta-final__actions { flex-direction: column; align-items: stretch; } .cta-final__actions .btn { justify-content: center; width: 100%; } /* ── Footer ── */ .footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-md); } .footer__brand { grid-column: 1 / -1; } .footer__meta-bar { flex-wrap: wrap; gap: 6px; font-size: 0.6rem; } .footer__watermark { font-size: clamp(5rem, 18vw, 10rem); } .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; } /* Section labels */ .section-label { font-size: 0.6rem; } /* Legacy compat */ .bento-grid { grid-template-columns: 1fr; } .bento-card--wide, .bento-card--full { grid-column: span 1; } .steps-grid { grid-template-columns: 1fr; } .steps-grid::before { display: none; } } /* ── 480px (phones) ── */ @media (max-width: 480px) { :root { --space-3xl: 60px; --space-2xl: 40px; } .stat-card { padding: 18px 14px; } .stat-number { font-size: clamp(1.75rem, 9vw, 2.25rem) !important; } .stats__grid { gap: 8px; } /* nicho cards full padding reduction */ .bento-card--nicho { padding: 18px 16px 16px; gap: 8px; } .nicho-pain { font-size: 0.75rem; padding-left: 8px; } .module-chips { gap: 5px; } .module-chip { font-size: 0.6rem; padding: 2px 6px; } /* flow cards */ .flow-card { padding: 16px 14px; } .flow-card__visual { display: none; } /* mini-visuais off em telas muito pequenas */ /* plans */ .plan-card { padding: 20px 16px; } .plan-price__val { font-size: 1.35rem !important; } /* testimonials */ .testimonials-stack { flex-direction: column; } .testimonial-card { padding: 18px 16px; } /* footer */ .footer__top { grid-template-columns: 1fr; } .hero__trust { display: none; } /* vg-mock: esconde tabs no mobile muito pequeno */ .vg-tabs { display: none; } } /* ── 360px (mínimo) ── */ @media (max-width: 360px) { :root { --container-px: 14px; } .btn { padding: 12px 16px; font-size: 0.875rem; } .hero__title { font-size: 1.875rem !important; } .nicho-title { font-size: 1.125rem; } .plan-price__val { font-size: 1.2rem !important; } .stats__grid { grid-template-columns: 1fr; } } /* ──────────────────────────────────────────────────────────── 22. ACESSIBILIDADE / REDUCED MOTION ──────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-reveal], [data-reveal-group] [data-reveal-item] { opacity: 1 !important; transform: none !important; transition: none !important; } .marquee-track { animation: none; } .hero__mesh { animation: none; } } /* ════════════════════════════════════════════════════════════ v7 — Integrações reais, etiqueta de produto, redes sociais, perf ════════════════════════════════════════════════════════════ */ /* ── Marquee: logos das integrações (Valerium) ── */ .marquee-logo { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; user-select: none; opacity: 0.82; transition: opacity 200ms ease; } .marquee-logo:hover { opacity: 1; } .marquee-logo img { width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; } .marquee-logo span { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.03em; color: var(--text-dim); } /* ── Etiqueta "Valerium · by Grovic Data" sobre o dashboard do hero ── */ .hero__product-tag { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin: 0 0 14px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-soft); background: rgba(255,255,255,0.04); backdrop-filter: blur(8px); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; position: relative; z-index: 3; } .hero__product-tag img { width: 16px; height: 16px; border-radius: 4px; } .hero__product-tag__name { font-weight: 700; color: var(--text); letter-spacing: 0.02em; } .hero__product-tag__by { color: var(--text-mono); } /* ── Redes sociais no footer ── */ .footer__social { display: flex; gap: 12px; margin-top: 16px; } .footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border-soft); color: var(--text-dim); transition: color 180ms ease, border-color 180ms ease, background 180ms ease; } .footer__social a:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255,255,255,0.04); } /* ── Performance & rolagem ── */ html { scroll-behavior: smooth; scroll-padding-top: 88px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* isola camadas decorativas pesadas → menos repaint na rolagem */ .marquee-track { will-change: transform; } .hero__mesh, .page-vignette { backface-visibility: hidden; } /* rodapé fica fora da tela até ser necessário (não é alvo de âncora) */ .site-footer { content-visibility: auto; contain-intrinsic-size: 1px 600px; } /* ════════════════════════════════════════════════════════════ v7 — Páginas internas: Soluções · Produtos · História ════════════════════════════════════════════════════════════ */ /* nav: item ativo */ .nav-desktop a.is-active { color: var(--text); } .nav-desktop a.is-active::after { content: ""; display: block; height: 1px; margin-top: 3px; background: var(--accent-bright); } /* hero de subpágina (espaço pro header fixo) */ .subpage-hero { padding-top: calc(var(--space-3xl) + 40px); position: relative; } .subpage-hero__inner { max-width: 820px; } .subpage-hero__inner .h1 { margin: 18px 0 20px; } .subpage-hero .badge { margin-bottom: 4px; } /* marca do produto no topo (produtos.html) */ .product-hero__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .product-hero__brand img { border-radius: 8px; } .product-hero__brandname { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); } .product-hero__by { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-mono); } /* ── Timeline ── */ .timeline { list-style: none; margin: 0; padding: 0; position: relative; max-width: 760px; } .timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(180deg, var(--accent-bright), var(--border-soft)); } .timeline-item { position: relative; padding: 0 0 var(--space-xl) 38px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-item__dot { position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border-strong); } .timeline-item--current .timeline-item__dot { border-color: var(--accent-bright); box-shadow: 0 0 0 4px var(--accent-glow-strong); } .timeline-item__date { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--accent-soft); text-transform: uppercase; } .timeline-item__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 6px 0 6px; } .timeline-item__desc { color: var(--text-muted); line-height: 1.65; max-width: 60ch; } /* ── Fundadores ── */ .founder-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-top: var(--space-lg); } .founder-card { text-align: center; padding: var(--space-lg) var(--space-md); } .founder-card__avatar { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; color: var(--text); background: var(--gradient-accent); } .founder-card__name { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 4px; } .founder-card__role { font-size: 0.8rem; color: var(--text-muted); } /* ── Credenciais ── */ .company-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: var(--space-2xl); background: var(--border-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-card); overflow: hidden; } .company-facts__item { background: var(--surface-mono); padding: var(--space-md); display: flex; flex-direction: column; gap: 6px; } .company-facts__label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .company-facts__val { font-family: var(--font-display); font-weight: 600; color: var(--text); } .company-facts__val--ok { color: var(--ok); } /* ── Catálogo de produtos ── */ .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); margin-top: var(--space-lg); } .product-card { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); } .product-card__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; } .product-card__logo { border-radius: 10px; } .product-card__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--text); } .product-card__cat { font-size: 0.8rem; color: var(--text-muted); } .product-card__status { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; padding: 4px 8px; border-radius: 999px; white-space: nowrap; align-self: start; } .product-card__status--live { color: var(--ok); background: var(--ok-soft); } .product-card__status--beta { color: var(--warn); background: var(--warn-soft); } .product-card__desc { color: var(--text-muted); line-height: 1.65; } .product-card__chips, .product-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-mono); padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .product-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; } /* ── Pilares / nichos (grid de cards) ── */ .pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-top: var(--space-lg); } .pillar-card { padding: var(--space-lg); display: flex; flex-direction: column; gap: 10px; } .pillar-card__tag { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--accent-soft); } .pillar-card__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; } .pillar-card__desc { color: var(--text-muted); line-height: 1.6; font-size: 0.92rem; } .pill-badge { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; color: var(--accent-bright); border: 1px solid var(--accent-deep); border-radius: 999px; padding: 2px 6px; } /* ── Método (3 passos) ── */ .method-steps { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .method-step { padding: var(--space-lg); position: relative; } .method-step__num { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; color: var(--accent-deep); } .method-step__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 8px 0 8px; } .method-step__desc { color: var(--text-muted); line-height: 1.6; font-size: 0.92rem; } .method-step__dur { display: inline-block; margin-top: 14px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); border-top: 1px solid var(--border-soft); padding-top: 10px; } /* ── Planos resumidos ── */ .plans-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); } .plan-mini { padding: var(--space-lg); display: flex; flex-direction: column; gap: 10px; position: relative; } .plan-mini--featured { border-color: var(--accent-deep); } .plan-mini__badge { position: absolute; top: -10px; right: var(--space-md); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--text); background: var(--gradient-accent); padding: 3px 10px; border-radius: 999px; } .plan-mini__name { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-soft); } .plan-mini__price { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--text); } .plan-mini__price span { font-size: 0.85rem; font-weight: 500; color: var(--text-dim); } .plan-mini__desc { color: var(--text-muted); line-height: 1.6; font-size: 0.9rem; flex: 1; } .plan-mini .btn { margin-top: 6px; } .plans-mini__note { text-align: center; margin-top: var(--space-lg); font-size: 0.82rem; color: var(--text-dim); } /* ── Responsivo ── */ @media (max-width: 900px) { .founder-grid, .pillar-grid { grid-template-columns: repeat(2, 1fr); } .product-grid, .method-steps, .plans-mini { grid-template-columns: 1fr; } .company-facts { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .founder-grid, .pillar-grid { grid-template-columns: 1fr; } .product-card__head { grid-template-columns: auto 1fr; } .product-card__status { grid-column: 2; justify-self: start; } } /* ── Hero: badge do produto Valerium (eyebrow) ── */ .hero__valerium-badge { display: inline-flex; align-items: center; gap: 8px; } .hero__valerium-badge img { border-radius: 4px; flex-shrink: 0; } .hero__valerium-badge__sep { color: var(--text-dim); } .hero__valerium-badge__by { color: var(--text-mono); font-weight: 500; } /* ── Formulário de contato (#contato) ── */ .contact-form { width: 100%; max-width: 660px; margin: var(--space-lg) auto 0; padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); text-align: left; } .contact-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } .contact-field { display: flex; flex-direction: column; gap: 6px; } .contact-field__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } .contact-input { width: 100%; padding: 11px 14px; border-radius: var(--radius-md); background: var(--surface-mono); border: 1px solid var(--border); color: var(--text); font-family: var(--font-body); font-size: 0.95rem; transition: border-color 160ms, box-shadow 160ms; } .contact-input::placeholder { color: var(--text-dim); } .contact-input:focus { outline: none; border-color: var(--accent-bright); box-shadow: 0 0 0 3px var(--accent-glow-strong); } .contact-input--area { resize: vertical; min-height: 88px; } .contact-form__actions { display: flex; flex-wrap: wrap; gap: 12px; } .contact-form__actions .btn { flex: 1; min-width: 210px; justify-content: center; } .contact-form__hint { font-size: 0.78rem; color: var(--text-dim); text-align: center; } @media (max-width: 560px) { .contact-form__grid { grid-template-columns: 1fr; } } /* ── Página ProntuSMART: identidade roxa (override de tokens) ── */ .page-prontu { --accent: #7C3AED; --accent-bright: #9466F0; --accent-soft: #A78BFA; --accent-deep: #4C1D95; --accent-glow: rgba(124,58,237,0.07); --accent-glow-strong: rgba(124,58,237,0.16); --accent-glow-edge: rgba(148,102,240,0.32); --gradient-accent: linear-gradient(135deg,#9466F0 0%,#7C3AED 50%,#4C1D95 100%); --gradient-text-accent: linear-gradient(180deg,#A78BFA 0%,#7C3AED 100%); } .product-hero__brand img { border-radius: 8px; } /* grids variantes */ .pillar-grid--3 { grid-template-columns: repeat(3, 1fr); } .method-steps--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .pillar-grid--3 { grid-template-columns: repeat(2, 1fr); } .method-steps--4 { grid-template-columns: 1fr; } } @media (max-width: 520px) { .pillar-grid--3 { grid-template-columns: 1fr; } } /* ── Home mercados: 4 cards de nicho ── */ .bento-grid--nichos { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .bento-grid--nichos { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .bento-grid--nichos { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════ ROADMAP — Kanban board (home) ════════════════════════════════════════════════════════════ */ .roadmap-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; margin-top: var(--space-xl, 40px); } .roadmap-col { background: var(--surface-mono); border: 1px solid var(--border-soft); border-radius: var(--radius-card); padding: 14px; display: flex; flex-direction: column; gap: 10px; } .roadmap-col__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mono); padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; } .roadmap-col__dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; background: var(--text-dim); } /* per-column accents */ .roadmap-col--backlog .roadmap-col__dot { background: var(--text-dim); } .roadmap-col--next .roadmap-col__dot { background: var(--accent-bright); } .roadmap-col--cooking .roadmap-col__dot { background: var(--warn); } .roadmap-col--done .roadmap-col__dot { background: var(--ok); } /* subtle top accent bar per column */ .roadmap-col__head { border-top: 2px solid transparent; } .roadmap-col--backlog { box-shadow: inset 0 2px 0 0 rgba(107,116,147,0.25); border-radius: var(--radius-card); } .roadmap-col--next { box-shadow: inset 0 2px 0 0 rgba(64,118,234,0.35); } .roadmap-col--cooking { box-shadow: inset 0 2px 0 0 rgba(251,191,36,0.30); } .roadmap-col--done { box-shadow: inset 0 2px 0 0 rgba(74,222,128,0.30); } .roadmap-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; transition: transform 160ms ease, border-color 160ms ease; } .roadmap-card:hover { transform: translateY(-2px); border-color: rgba(91, 130, 224, 0.35); } .roadmap-card__title { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--text); line-height: 1.3; margin: 0; } .roadmap-card__desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; margin: 0; } .roadmap-card__tag { align-self: flex-start; margin-top: 2px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em; color: var(--text-mono); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; } /* horizontal scroll on narrow screens */ @media (max-width: 980px) { .roadmap-board { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 12px; -webkit-overflow-scrolling: touch; } .roadmap-col { min-width: 260px; scroll-snap-align: start; } } @media (prefers-reduced-motion: reduce) { .roadmap-card { transition: none; } .roadmap-card:hover { transform: none; } } /* ──────────────────────────────────────────────────────────── 23. OVERRIDES — TESTIMONIALS 2-COL GRID + ABOUT LOGOS ──────────────────────────────────────────────────────────── */ /* Depoimentos: 4 cards iguais em grade 2×2 */ .testimonials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: start; } @media (max-width: 760px) { .testimonials-grid { grid-template-columns: 1fr; } } /* Sobre: logo no eyebrow */ .about__label-wrap { display: inline-flex; align-items: center; gap: 8px; } .about__label-logo { border-radius: 4px; flex-shrink: 0; } /* Sobre: logos nas linhas do card de portfólio */ .about__card-float__logo { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; margin-right: 2px; } /* ── Responsividade: garante coluna única em telas pequenas ── */ @media (max-width: 560px) { .stats__grid { grid-template-columns: 1fr; } .company-facts { grid-template-columns: 1fr; } } /* ──────────────────────────────────────────────────────────── 24. PERF — render/paint optimizations (desktop scroll) ──────────────────────────────────────────────────────────── */ /* Off-screen below-the-fold sections skip rendering until near viewport */ #resultados, #sobre, #solucoes, #como-funciona, #roadmap, #depoimentos, #faq, #contato { content-visibility: auto; contain-intrinsic-size: 1px 760px; } /* Isolate large decorative layers onto their own compositor layer */ .hero__mesh, .page-vignette, .glow { transform: translateZ(0); }