:root{ --bg:#050505; --surface:#0E0E0D; --surface-2:#161613; --fg:#F2EFE9; --fg-dim:#8C8A82; --fg-mute:#807D73; --line:#201F1B; --line-2:#2B2A25; --signal:#FF5A2C; --signal-dim:#B23F1B; --teal:#3AA98C; --maxw:1320px; } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ background:var(--bg); color:var(--fg); font-family:'Inter',sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; cursor:default; overflow-x:hidden; } h1,h2,h3,h4{ font-family:'Bricolage Grotesque',sans-serif; letter-spacing:-0.01em; font-weight:600; color:var(--fg); } .mono{ font-family:'IBM Plex Mono',monospace; } a{ color:inherit; text-decoration:none; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; } ::selection{ background:var(--signal); color:#050505; } :focus-visible{ outline:2px solid var(--signal); outline-offset:3px; } /* nota: nesta fase de proposta/demo, o site NÃO desliga movimento por prefers-reduced-motion — decisão deliberada (ver conversa), porque isso estava impedindo o cliente de ver qualquer efeito pedido. Antes de produção de verdade, reavaliar e trazer de volta um fallback de acessibilidade (idealmente via uma classe no , não direto no media query, pra dar controle explícito em vez de depender só da preferência do sistema). */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; } .reveal.in{ opacity:1; transform:translateY(0); } /* ---------- NAV ---------- */ header{ position:fixed; top:0; left:0; right:0; z-index:200; padding:26px 0; mix-blend-mode:difference; background:rgba(5,5,5,0); border-bottom:1px solid rgba(255,255,255,0); transition:background-color .4s ease, border-color .4s ease, padding .3s ease; } /* nota: sem backdrop-filter de propósito — desfoque num header fixo é recalculado a cada frame de scroll e pesa muito em máquinas sem GPU forte (foi o que deixou o scroll lento). fundo quase opaco resolve a mesma sensação de "flutuando" sem esse custo. */ header.scrolled{ mix-blend-mode:normal; background:rgba(5,5,5,0.94); border-bottom:1px solid var(--line); padding:18px 0; } .nav{ display:flex; justify-content:space-between; align-items:center; position:relative; } .wordmark{ font-family:'Bricolage Grotesque'; font-weight:700; font-size:17px; letter-spacing:-.01em; display:inline-flex; align-items:center; } .wordmark .dot{ color:var(--signal); } .wordmark .logo-img{ height:30px; width:auto; display:block; } @media (max-width:600px){ .wordmark .logo-img{ height:24px; } } .navlinks{ display:flex; gap:36px; align-items:center; } .navlinks a{ font-size:13px; font-family:'IBM Plex Mono'; color:var(--fg-dim); letter-spacing:.02em; } .navlinks a:hover{ color:var(--fg); } .nav-dropdown{ position:relative; } .nav-dropdown .dropdown-trigger{ display:inline-flex; align-items:center; gap:5px; } .nav-dropdown .dropdown-trigger::after{ content:'▾'; font-size:9px; color:var(--fg-mute); transition:transform .2s; } .nav-dropdown.open .dropdown-trigger::after{ transform:rotate(180deg); } /* o .dropdown-menu é movido pelo JS (assets/cinematic.js) pra virar filho direto do , fora do header — o header usa mix-blend-mode:difference no topo da página, e sendo filho dele o menu herdava aquela inversão de cor e ficava ilegível/confuso em cima do conteúdo. position:fixed + coordenadas calculadas via JS o substituem. */ .dropdown-menu{ display:none; position:fixed; top:0; left:0; min-width:260px; background:rgba(10,10,9,.96); border:1px solid var(--line-2); padding:10px; z-index:250; box-shadow:0 20px 50px rgba(0,0,0,.55); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); } .dropdown-menu.open{ display:block; } .dropdown-menu a{ display:block; padding:11px 14px; font-size:13px; color:var(--fg-dim); white-space:nowrap; } .dropdown-menu a:hover{ background:var(--surface-2); color:var(--fg); } .nav-clock{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--fg-dim); display:flex; align-items:center; gap:8px; } .nav-clock .led{ width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 6px var(--teal); animation:blink 2.4s infinite; } @keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.25;} } .mobile-toggle{ display:none; background:none; border:1px solid var(--line-2); color:var(--fg); padding:8px 11px; } /* ---------- HERO ---------- */ .hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; position:relative; padding:140px 0 60px; } .hero-kicker{ font-family:'IBM Plex Mono'; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:28px; display:flex; align-items:center; gap:12px; } .hero-kicker::before{ content:""; width:26px; height:1px; background:var(--signal); flex:none; } .hero-kicker.two-line{ align-items:flex-start; } .hero-kicker.two-line::before{ margin-top:8px; } .hero-kicker-lines{ display:flex; flex-direction:column; gap:5px; } .hero-kicker-lines .k2{ color:var(--fg-mute); font-size:11px; letter-spacing:.08em; } .hero-kicker-lines .k3{ color:var(--fg-mute); font-size:11px; letter-spacing:.08em; } .hero h1{ font-size:clamp(46px,8.6vw,132px); line-height:0.94; font-weight:600; min-height:2.9em; } /* frases mais longas do rodízio (ex.: a pergunta de abertura) usam corpo menor — senão o texto ocupa espaço demais e empurra o resto da home pra fora da primeira dobra. */ .hero h1.h1-compact{ font-size:clamp(34px,6vw,86px); } .hero h1 .line{ display:block; overflow:hidden; } .hero h1 .line span{ display:block; transform:translateY(110%); animation:riseUp .9s cubic-bezier(.22,.8,.28,1) forwards; } .hero h1 .line:nth-child(1) span{ animation-delay:.05s; } .hero h1 .line:nth-child(2) span{ animation-delay:.15s; } .hero h1 .line:nth-child(3) span{ animation-delay:.25s; } @keyframes riseUp{ to{ transform:translateY(0); } } .hero h1 em{ font-style:normal; color:var(--signal); } /* rodízio de headlines — a frase entra dissolvendo (fade + leve desfoque); a saída é aplicada via estilo inline pelo JS (index.html), não por classe CSS — ver next() */ .hero h1 .line.slide span{ opacity:0; filter:blur(16px); transform:translateY(10px) scale(1.02); animation:dissolveIn .9s cubic-bezier(.22,.8,.28,1) forwards; animation-delay:0s; } @keyframes dissolveIn{ to{ opacity:1; filter:blur(0); transform:translateY(0) scale(1); } } .hero-headline-sub{ font-family:'Bricolage Grotesque',sans-serif; font-weight:600; letter-spacing:-0.01em; color:var(--fg); font-size:clamp(18px,2.3vw,32px); line-height:1.2; margin-top:20px; max-width:720px; } .hero-headline-sub em{ font-style:normal; color:var(--signal); } .hero-inner{ width:100%; } /* evita o filho direto do flex .hero encolher/centralizar via margin:auto do .wrap — mantém o conteúdo alinhado à esquerda como o resto do site */ .hero-foot{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:56px; flex-wrap:wrap; gap:28px; } .hero-sub{ max-width:380px; color:var(--fg-dim); font-size:16px; } .hero-connector{ flex:1; min-width:60px; max-width:220px; height:1px; background:var(--line-2); position:relative; overflow:hidden; align-self:center; } .hero-connector span{ position:absolute; top:0; left:-40%; width:40%; height:100%; background:var(--signal); animation:connectorPulse 2.8s ease-in-out infinite; } @keyframes connectorPulse{ 0%{ left:-40%; } 100%{ left:100%; } } @media (max-width:900px){ .hero-connector{ display:none; } } .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; } .btn{ display:inline-flex; align-items:center; gap:10px; font-family:'IBM Plex Mono'; font-size:13px; padding:15px 26px; border:1px solid var(--fg); color:var(--fg); transition:background .25s, color .25s, border-color .25s; } .btn:hover{ background:var(--signal); border-color:var(--signal); color:#050505; } .btn.filled{ background:var(--fg); color:var(--bg); } .btn.filled:hover{ background:var(--signal); color:#050505; } .scroll-cue{ position:absolute; left:40px; bottom:28px; font-family:'IBM Plex Mono'; font-size:11px; color:var(--fg-mute); display:flex; align-items:center; gap:10px; } .scroll-cue .bar{ width:1px; height:34px; background:var(--line-2); position:relative; overflow:hidden; } .scroll-cue .bar::after{ content:""; position:absolute; top:-34px; left:0; width:100%; height:34px; background:var(--signal); animation:scrollbar 2s ease-in-out infinite; } @keyframes scrollbar{ 50%{ top:0; } 100%{ top:34px; } } /* ---------- MARQUEE ---------- */ .marquee-strip{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding:20px 0; background:rgba(255,90,44,.05); } .marquee-track{ display:flex; gap:52px; white-space:nowrap; animation:marquee 32s linear infinite; width:max-content; } @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .marquee-track span{ font-family:'IBM Plex Mono'; font-size:13.5px; color:var(--fg-mute); display:flex; align-items:center; gap:52px; } .marquee-track span em{ font-style:normal; color:var(--signal); margin-right:52px; } /* ---------- CHAPTER ---------- */ .chapter{ padding:150px 0; border-bottom:1px solid var(--line); } .chapter-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:70px; gap:40px; flex-wrap:wrap; } .chapter-num{ font-family:'IBM Plex Mono'; font-size:13px; color:var(--signal); } .chapter-head h2{ font-size:clamp(30px,4.2vw,54px); line-height:1.1; max-width:680px; margin-top:14px; } .chapter-desc{ max-width:280px; color:var(--fg-dim); font-size:14.5px; text-align:right; } @media (max-width:700px){ .chapter-desc{ text-align:left; } } /* guia fino sob os títulos que rodam frase (0001/0002 da home institucional) — mostra visualmente o tempo até a próxima troca, a barra é resetada e reanimada pelo JS a cada ciclo. */ .phrase-timer{ width:64px; height:2px; background:var(--line); margin-top:18px; overflow:hidden; } .phrase-timer span{ display:block; height:100%; width:0%; background:var(--signal); } /* ---------- PROOF NUMBERS ---------- */ .proof-grid{ display:grid; grid-template-columns:repeat(4,1fr); } .proof-item{ padding:0 28px 0 0; border-left:1px solid var(--line); padding-left:28px; } .proof-item:first-child{ border-left:none; padding-left:0; } .proof-item .num{ font-size:clamp(42px,4.6vw,64px); font-weight:600; line-height:1; } .proof-item .num em{ font-style:normal; color:var(--signal); } .proof-item .label{ margin-top:16px; color:var(--fg-dim); font-size:14px; max-width:180px; } .proof-note{ margin-top:64px; font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--fg-mute); max-width:520px; } /* ---------- SERVICES LIST ---------- */ .service-row{ display:grid; grid-template-columns:70px 1fr 90px; align-items:center; gap:30px; padding:38px 0; border-top:1px solid var(--line); cursor:pointer; transition:padding-left .3s ease; } .service-row:last-child{ border-bottom:1px solid var(--line); } .service-row:hover{ padding-left:16px; } .service-row .si{ font-family:'IBM Plex Mono'; font-size:13px; color:var(--fg-mute); } .service-row h3{ font-size:clamp(22px,3vw,36px); font-weight:500; transition:color .25s; } .service-row:hover h3{ color:var(--signal); } .service-row .sd{ grid-column:2; font-size:14px; color:var(--fg-dim); margin-top:8px; max-width:520px; } .service-row .arrow{ justify-self:end; font-size:22px; color:var(--fg-mute); transition:transform .3s, color .3s; } .service-row:hover .arrow{ transform:rotate(45deg); color:var(--signal); } /* ---------- PILLAR CARDS (home institucional — frentes do grupo) ---------- */ .pillar-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); } .pillar-card{ display:flex; flex-direction:column; background:var(--bg); padding:48px 44px; color:inherit; transition:background .25s ease; } .pillar-card:hover{ background:var(--surface); } .pillar-num{ font-size:13px; color:var(--signal); margin-bottom:22px; } .pillar-top{ display:flex; align-items:center; gap:16px; margin-bottom:14px; } .pillar-icon{ width:38px; height:38px; color:var(--fg-mute); flex-shrink:0; transition:color .2s; } .pillar-card:hover .pillar-icon{ color:var(--signal); } .pillar-card h3{ font-size:clamp(23px,2.4vw,32px); font-weight:500; margin-bottom:0; transition:color .2s; } .pillar-card:hover h3{ color:var(--signal); } .pillar-card > p{ color:var(--fg-dim); font-size:14.5px; line-height:1.6; margin-bottom:24px; max-width:420px; } .pillar-card .chip-row{ margin-top:0; margin-bottom:28px; } .pillar-arrow{ font-size:12px; color:var(--fg-mute); display:inline-flex; align-items:center; gap:8px; transition:color .2s, gap .2s; margin-top:auto; padding-top:28px; } .pillar-card:hover .pillar-arrow{ color:var(--signal); gap:12px; } @media (max-width:900px){ .pillar-grid{ grid-template-columns:1fr; } } /* ---------- METHOD ---------- */ .method-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); } .method-cell{ background:var(--bg); padding:44px 30px; } .method-cell .mn{ font-family:'IBM Plex Mono'; font-size:46px; color:var(--line-2); font-weight:500; margin-bottom:24px; } .method-cell h4{ font-size:21px; margin-bottom:14px; } .method-cell p{ font-size:14px; color:var(--fg-dim); margin-bottom:18px; } .method-cell .tag{ font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--teal); } /* ---------- QUALIFY ---------- */ .qualify{ display:grid; grid-template-columns:1fr 1fr; gap:60px; } .qualify-col h3{ font-family:'IBM Plex Mono'; font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:26px; } .qualify-col.yes h3{ color:var(--teal); } .qualify-col.no h3{ color:var(--fg-mute); } .qualify-col li{ list-style:none; padding:16px 0; border-top:1px solid var(--line); font-size:16px; color:var(--fg-dim); display:flex; gap:14px; } .qualify-col li:last-child{ border-bottom:1px solid var(--line); } .qualify-col.yes li span{ color:var(--teal); } .qualify-col.no li span{ color:var(--fg-mute); } /* ---------- FOUNDER ---------- */ .founder{ display:grid; grid-template-columns:.7fr 1.3fr; gap:70px; align-items:center; } .founder-photo{ aspect-ratio:3/4; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--fg-mute); font-family:'IBM Plex Mono'; font-size:11.5px; overflow:hidden; } .founder-avatar-ph{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; width:100%; height:100%; } .founder-avatar-ph .initials{ font-family:'Bricolage Grotesque'; font-weight:700; font-size:clamp(44px,6vw,64px); letter-spacing:.02em; background:linear-gradient(135deg, var(--signal), var(--teal)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .founder-avatar-ph .ph-label{ font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--fg-mute); text-transform:uppercase; letter-spacing:.08em; } .founder-quote{ font-size:clamp(22px,2.6vw,32px); line-height:1.35; font-weight:500; margin-bottom:26px; } .founder-quote em{ font-style:normal; color:var(--signal); } .founder-name{ font-family:'IBM Plex Mono'; font-size:13px; } .founder-role{ color:var(--fg-dim); font-size:13px; margin-top:4px; } .founder-bio{ margin-top:26px; color:var(--fg-dim); font-size:15px; max-width:520px; } /* ---------- FAQ ---------- */ .faq-item{ border-top:1px solid var(--line); } .faq-item:last-child{ border-bottom:1px solid var(--line); } .faq-q{ display:flex; justify-content:space-between; align-items:center; padding:28px 0; cursor:pointer; font-size:18px; gap:20px; } .faq-q .plus{ font-family:'IBM Plex Mono'; color:var(--signal); flex-shrink:0; transition:transform .25s; } .faq-item.open .plus{ transform:rotate(45deg); } .faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; } .faq-item.open .faq-a{ max-height:200px; } .faq-a p{ padding-bottom:28px; color:var(--fg-dim); font-size:15px; max-width:600px; } /* ---------- CTA FINAL ---------- */ .cta-final{ padding:180px 0; text-align:center; } .cta-final .hero-kicker{ justify-content:center; } .cta-final .hero-kicker::before{ display:none; } .cta-final h2{ font-size:clamp(38px,6.4vw,86px); line-height:1; max-width:900px; margin:0 auto 40px; } .cta-final h2 em{ font-style:normal; color:var(--signal); } .cta-final-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } /* ---------- FOOTER ---------- */ footer{ padding:60px 0 40px; } .footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:60px; } .footer-block h5{ font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--fg-mute); text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; } .footer-block a, .footer-block p{ display:block; font-size:14px; color:var(--fg-dim); margin-bottom:9px; } .footer-block a:hover{ color:var(--fg); } .footer-block .social-row{ display:flex; gap:12px; margin-top:14px; } .footer-block .social-row a{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius:50%; margin-bottom:0; color:var(--fg-mute); } .footer-block .social-row a:hover{ color:var(--teal); border-color:var(--teal); } .footer-block .social-row svg{ width:16px; height:16px; display:block; } .footer-log{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--fg-mute); display:flex; align-items:center; gap:10px; } .footer-log .led{ width:6px; height:6px; border-radius:50%; background:var(--teal); animation:blink 2.4s infinite; } .footer-bottom{ display:flex; justify-content:space-between; padding-top:26px; border-top:1px solid var(--line); font-size:12px; color:var(--fg-mute); flex-wrap:wrap; gap:10px; font-family:'IBM Plex Mono'; } .version-tag{ opacity:.55; } /* ---------- RESPONSIVE ---------- */ @media (max-width:900px){ .navlinks{ display:none; } .mobile-toggle{ display:block; position:absolute; left:16px; top:50%; transform:translateY(-50%); z-index:10; } .nav-clock{ display:none; } .nav{ justify-content:center; } /* menu mobile aberto — painel cheio abaixo do header, escondido por padrão */ header.nav-open .navlinks{ display:flex; flex-direction:column; align-items:stretch; position:absolute; top:100%; left:0; right:0; background:rgba(5,5,5,0.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:6px 40px 32px; gap:0; border-bottom:1px solid var(--line); max-height:calc(100vh - 100%); overflow-y:auto; } header.nav-open .navlinks > a, header.nav-open .navlinks .dropdown-trigger{ padding:16px 0; font-size:15px; border-bottom:1px solid var(--line); color:var(--fg); display:flex; align-items:center; justify-content:space-between; } header.nav-open .nav-dropdown{ display:contents; } .dropdown-menu{ min-width:0; } .proof-grid{ grid-template-columns:1fr 1fr; row-gap:44px; } .proof-item{ border-left:none !important; padding-left:0 !important; } .method-strip{ grid-template-columns:1fr 1fr; } .qualify{ grid-template-columns:1fr; gap:40px; } .founder{ grid-template-columns:1fr; gap:40px; } .service-row{ grid-template-columns:40px 1fr 40px; } } @media (max-width:600px){ .chapter{ padding:90px 0; } .method-strip{ grid-template-columns:1fr; } .proof-grid{ grid-template-columns:1fr 1fr; column-gap:20px; row-gap:38px; } .proof-item .num{ font-size:clamp(28px,9vw,42px); } .proof-item .label{ max-width:none; } .hero{ padding-top:110px; } .footer-top{ flex-direction:column; gap:36px; } } /* ============ EXTRA — PÁGINAS INTERNAS ============ */ /* breadcrumb */ .crumb{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--fg-mute); padding:150px 0 0; display:flex; gap:10px; align-items:center; } .crumb a:hover{ color:var(--fg); } /* page hero (subpágina) */ .page-hero{ padding:36px 0 90px; border-bottom:1px solid var(--line); } .page-hero-grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:60px; align-items:end; } .page-hero h1{ font-size:clamp(38px,5.6vw,84px); line-height:0.98; } .page-hero h1 em{ font-style:normal; color:var(--signal); } .page-hero .lede{ color:var(--fg-dim); font-size:16.5px; margin-top:26px; max-width:480px; } .page-hero-meta{ display:flex; flex-direction:column; gap:18px; } .meta-row{ border-top:1px solid var(--line); padding-top:14px; } .meta-row .k{ font-family:'IBM Plex Mono'; font-size:11px; color:var(--fg-mute); text-transform:uppercase; letter-spacing:.05em; } .meta-row .v{ font-size:15px; margin-top:6px; } /* platform chip row */ .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; } .chip{ font-family:'IBM Plex Mono'; font-size:12.5px; border:1px solid var(--line-2); padding:9px 15px; color:var(--fg-dim); } .chip-more{ border-style:dashed; color:var(--fg-mute); } /* scope columns */ .scope-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); } .scope-col{ background:var(--bg); padding:38px 32px; } .scope-col h4{ font-family:'IBM Plex Mono'; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--signal); margin-bottom:22px; } .scope-col li{ list-style:none; padding:10px 0; border-top:1px solid var(--line); font-size:14.5px; color:var(--fg-dim); } .scope-col li:first-child{ border-top:none; } .note-box{ border:1px solid var(--line); border-left:3px solid var(--teal); padding:16px 20px; margin-top:32px; font-size:14.5px; color:var(--fg-mute); background:var(--surface); } .note-box strong{ color:var(--fg-dim); } .press-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); } .press-item{ background:var(--bg); padding:32px; } .press-outlet{ font-size:12px; color:var(--signal); text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; } .press-item p{ color:var(--fg-dim); font-size:14.5px; line-height:1.6; } @media (max-width:700px){ .press-grid{ grid-template-columns:1fr; } } .feature-callout{ display:flex; gap:32px; align-items:flex-start; padding:36px; margin-top:32px; border:1px solid var(--line); background:var(--surface); } .feature-callout .fc-icon{ flex:none; width:44px; height:44px; color:var(--teal); } .feature-callout h4{ font-size:18px; font-weight:500; margin-bottom:10px; } .feature-callout p{ color:var(--fg-dim); font-size:14.5px; line-height:1.65; } @media (max-width:600px){ .feature-callout{ flex-direction:column; gap:18px; } } /* range bar (investment range) */ .range-block{ padding:50px 0; } .range-bar{ height:2px; background:var(--line-2); position:relative; margin:34px 0 18px; } .range-bar .fill{ position:absolute; left:0; top:0; height:100%; width:100%; background:linear-gradient(90deg,var(--fg-mute),var(--signal)); } .range-labels{ display:flex; justify-content:space-between; font-family:'IBM Plex Mono'; font-size:13px; color:var(--fg-dim); } .range-labels .hi{ color:var(--signal); } .range-note{ margin-top:22px; color:var(--fg-dim); font-size:15px; max-width:560px; } .range-note strong{ color:var(--fg); font-weight:500; } /* pull quote (founder style reused inline) */ .pull-quote{ font-size:clamp(22px,2.8vw,32px); line-height:1.35; font-weight:500; max-width:820px; } .pull-quote em{ font-style:normal; color:var(--signal); } .pull-cite{ margin-top:20px; font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--fg-mute); } /* box estrutural reutilizavel dentro do corpo do post — reforca o tipo de texto (tese/contraponto, causa->efeito, passo a passo, comparacao, definicao, analise) */ .essay-box{ border:1px solid var(--line); border-left:3px solid var(--signal); padding:24px 28px; margin:36px 0; background:var(--surface); } .essay-box .label{ font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--signal); margin-bottom:12px; } .essay-box p{ font-size:16px; line-height:1.7; color:var(--fg-dim); margin-bottom:12px; } .essay-box p:last-child{ margin-bottom:0; } .essay-box strong{ color:var(--fg); } .essay-box .chain{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-family:'IBM Plex Mono'; font-size:13px; color:var(--fg); margin-bottom:14px; } .essay-box .chain span.arrow{ color:var(--signal); } .essay-box .chain b{ background:var(--bg); border:1px solid var(--line-2); padding:6px 12px; border-radius:2px; font-weight:500; } /* blocos de conteúdo histórico preservado (home + páginas de legado) — orgânico já ranqueado */ .google-partner-block{ display:flex; align-items:center; gap:48px; padding:44px; margin-top:56px; border:1px solid var(--line); background:var(--surface); } .google-partner-badge{ flex:none; } .google-partner-badge img{ display:block; width:120px; height:auto; } .google-partner-copy .hero-kicker{ margin-bottom:10px; } .google-partner-copy h3{ font-size:clamp(20px,2.4vw,28px); line-height:1.2; margin-bottom:10px; } .google-partner-copy p{ color:var(--fg-dim); font-size:15.5px; line-height:1.7; max-width:560px; } .google-partner-copy a{ color:var(--teal); white-space:nowrap; } @media (max-width:680px){ .google-partner-block{ flex-direction:column; align-items:flex-start; gap:24px; padding:32px 24px; } } .legacy-block{ max-width:760px; } .legacy-cards{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:0 0 56px; } .legacy-card{ background:var(--bg); padding:36px 34px; } .legacy-card h3{ margin:0 0 18px; font-size:clamp(19px,2.2vw,24px); color:var(--fg); } .legacy-card ul{ margin:0; padding-left:20px; } .legacy-card li{ color:var(--fg-dim); font-size:15px; line-height:1.65; margin-bottom:8px; } .legacy-card li strong{ color:var(--fg); } @media (max-width:900px){ .legacy-cards{ grid-template-columns:1fr; } } .legacy-lede{ font-family:'IBM Plex Mono'; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:8px; } .legacy-block h3{ font-size:clamp(20px,2.4vw,28px); line-height:1.25; margin:56px 0 18px; color:var(--fg); } .legacy-block h3:first-of-type{ margin-top:0; } .legacy-block p{ color:var(--fg-dim); font-size:16px; line-height:1.75; margin-bottom:18px; } .legacy-block ul{ margin:0 0 22px; padding-left:22px; } .legacy-block li{ color:var(--fg-dim); font-size:15.5px; line-height:1.7; margin-bottom:8px; } .legacy-block li strong{ color:var(--fg); } .section-cta{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:48px; padding-top:32px; border-top:1px solid var(--line); } .section-cta p{ margin:0; font-size:17px; color:var(--fg); max-width:520px; } .section-cta p em{ color:var(--signal); font-style:normal; } @media (max-width:640px){ .section-cta{ flex-direction:column; align-items:flex-start; } } /* grid de cards da página /legado/ — hub de páginas históricas preservadas */ .legado-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .legado-card{ display:flex; flex-direction:column; background:var(--bg); padding:36px 34px; color:inherit; transition:background .25s ease; } .legado-card:hover{ background:var(--surface); } .legado-card .legado-num{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--fg-mute); margin-bottom:14px; } .legado-card h3{ font-size:clamp(18px,2vw,21px); line-height:1.25; margin-bottom:10px; transition:color .2s; } .legado-card:hover h3{ color:var(--signal); } .legado-card p{ color:var(--fg-dim); font-size:14px; line-height:1.6; margin-bottom:20px; } .legado-card .arrow{ margin-top:auto; font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--fg-mute); transition:color .2s, gap .2s; } .legado-card:hover .arrow{ color:var(--signal); } @media (max-width:900px){ .legado-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .legado-grid{ grid-template-columns:1fr; } } /* botão flutuante padrão WhatsApp — leva até a seção/página de contato */ .whatsapp-float{ position:fixed; right:22px; bottom:22px; z-index:999; width:58px; height:58px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 22px rgba(0,0,0,.4); transition:transform .2s ease, box-shadow .2s ease; } .whatsapp-float:hover{ transform:scale(1.08); box-shadow:0 8px 28px rgba(0,0,0,.5); } .whatsapp-float svg{ width:30px; height:30px; display:block; } @media (max-width:600px){ .whatsapp-float{ right:14px; bottom:14px; width:52px; height:52px; } .whatsapp-float svg{ width:26px; height:26px; } } /* CTA de "como a Last Rocket ajuda" dentro do corpo do artigo do blog */ .post-cta{ background:var(--surface); border:1px solid var(--line); border-left:2px solid var(--signal); padding:32px 36px; margin:48px 0; border-radius:2px; } .post-cta h3{ font-size:19px; margin:0 0 12px; color:var(--fg); } .post-cta p{ font-size:16px; line-height:1.7; color:var(--fg-dim); margin-bottom:20px; max-width:640px; } .post-cta p:last-of-type{ margin-bottom:0; } .post-cta .btn{ margin-top:4px; } /* related services list */ .related-row{ display:flex; justify-content:space-between; align-items:center; padding:24px 0; border-top:1px solid var(--line); font-size:17px; } .related-row:last-child{ border-bottom:1px solid var(--line); } .related-row a{ display:flex; justify-content:space-between; align-items:center; width:100%; } .related-row a:hover{ color:var(--signal); } .related-row .arrow{ font-family:'IBM Plex Mono'; } @media (max-width:900px){ .page-hero-grid{ grid-template-columns:1fr; gap:30px; } .scope-grid{ grid-template-columns:1fr; } } /* ============ EXTRA — BLOG / CONTEÚDO ============ */ .blog-filter{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:50px; } .blog-filter button{ font-family:'IBM Plex Mono'; font-size:12.5px; background:none; border:1px solid var(--line-2); color:var(--fg-dim); padding:9px 16px; cursor:pointer; transition:border-color .2s, color .2s; } .blog-filter button.active, .blog-filter button:hover{ border-color:var(--signal); color:var(--fg); } /* lista horizontal (imagem à esquerda, título/meta à direita) — layout padrão em qualquer tamanho de tela */ .post-featured{ display:grid; grid-template-columns:96px 1fr; column-gap:16px; align-items:center; gap:0; padding:20px 0; margin-bottom:0; border-bottom:1px solid var(--line); } .post-featured .thumb{ aspect-ratio:1/1; background:var(--surface); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--fg-mute); font-family:'IBM Plex Mono'; font-size:11.5px; overflow:hidden; } .post-featured .thumb img{ width:100%; height:100%; object-fit:cover; object-position:68% 42%; display:block; transition:transform .4s; } .post-featured:hover .thumb img{ transform:scale(1.035); } .post-tag{ font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--signal); text-transform:uppercase; letter-spacing:.05em; margin-bottom:16px; } .post-featured h2{ font-size:16px; line-height:1.3; margin-bottom:6px; } .post-featured p{ display:none; } .post-featured .post-tag{ margin-bottom:6px; font-size:10.5px; } .post-meta{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--fg-mute); } .post-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:60px; } .post-card{ background:var(--bg); display:grid; grid-template-columns:90px 1fr; grid-template-rows:auto auto auto; column-gap:16px; align-items:center; padding:16px 0; min-height:0; transition:background .2s; } .post-card:hover{ background:var(--surface); } .post-card .thumb{ grid-column:1; grid-row:1 / -1; aspect-ratio:1/1; overflow:hidden; margin-bottom:0; align-self:center; } .post-card .thumb img{ width:100%; height:100%; object-fit:cover; object-position:68% 42%; display:block; transition:transform .4s; } .post-card:hover .thumb img{ transform:scale(1.035); } .post-card .post-tag, .post-card h3, .post-card .post-meta{ grid-column:2; padding-left:0; padding-right:0; } .post-card .post-tag{ margin-bottom:6px; font-size:10.5px; } .post-card h3{ font-size:15.5px; line-height:1.3; margin-bottom:6px; flex:none; } .post-card:hover h3{ color:var(--signal); } .post-card .post-meta{ padding-top:0; padding-bottom:0; border-top:none; font-size:11px; } .stat-callout{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; padding:60px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:80px; } .stat-callout .item .n{ font-size:clamp(28px,3vw,40px); font-weight:600; } .stat-callout .item .n em{ font-style:normal; color:var(--signal); } .stat-callout .item .l{ margin-top:10px; font-size:13px; color:var(--fg-dim); max-width:180px; } /* telas maiores: mesma lista, so com imagem e texto um pouco maiores pra aproveitar o espaco */ @media (min-width:700px){ .post-featured{ grid-template-columns:140px 1fr; column-gap:24px; padding:24px 0; } .post-featured h2{ font-size:22px; margin-bottom:8px; } .post-featured .post-tag{ margin-bottom:8px; font-size:11.5px; } .post-card{ grid-template-columns:120px 1fr; column-gap:24px; padding:20px 0; } .post-card .post-tag{ margin-bottom:8px; font-size:11.5px; } .post-card h3{ font-size:19px; margin-bottom:8px; } .post-card .post-meta{ font-size:12px; } } @media (max-width:900px){ .stat-callout{ grid-template-columns:1fr 1fr; } } /* ============ EXTRA — SOBRE (timeline + selos) ============ */ .badges-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; } .badge{ font-family:'IBM Plex Mono'; font-size:12px; border:1px solid var(--line-2); padding:12px 18px; color:var(--fg-dim); display:flex; align-items:center; gap:10px; } .badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal); flex-shrink:0; } /* ============ EXTRA — CONTATO ============ */ .contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; } .contact-info .info-row{ border-top:1px solid var(--line); padding:22px 0; } .contact-info .info-row:last-child{ border-bottom:1px solid var(--line); } .contact-info .info-row .k{ font-family:'IBM Plex Mono'; font-size:11px; color:var(--fg-mute); text-transform:uppercase; letter-spacing:.05em; } .contact-info .info-row .v{ font-size:17px; margin-top:8px; } .contact-info .info-row a:hover{ color:var(--signal); } .form-panel{ border:1px solid var(--line); background:var(--surface); padding:40px; } .form-intro{ margin-bottom:32px; } .form-intro h3{ font-size:clamp(19px,2vw,23px); font-weight:500; margin:8px 0 10px; } .form-intro p{ color:var(--fg-dim); font-size:14.5px; line-height:1.6; } .form-field{ margin-bottom:24px; } .form-field label{ display:block; font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--fg-mute); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; } .form-field input, .form-field textarea{ width:100%; background:var(--surface-2); border:1px solid var(--line-2); color:var(--fg); border-radius:6px; font-family:'Inter',sans-serif; font-size:15.5px; padding:13px 15px; transition:border-color .2s, background .2s; } .form-field input::placeholder, .form-field textarea::placeholder{ color:var(--fg-mute); } .form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--signal); background:var(--bg); } .form-field textarea{ resize:vertical; min-height:90px; } .form-note{ font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--fg-mute); margin-top:18px; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; } .form-row .form-field{ margin-bottom:0; } .form-check{ display:flex; align-items:center; gap:14px; } .form-check input{ width:80px; flex:none; } .form-check label{ margin-bottom:0; white-space:nowrap; } @media (max-width:560px){ .form-row{ grid-template-columns:1fr; gap:24px; } } /* ============ EXTRA — TRABALHE CONOSCO ============ */ .job-row{ display:flex; justify-content:space-between; align-items:center; padding:30px 0; border-top:1px solid var(--line); gap:20px; flex-wrap:wrap; } .job-row:last-child{ border-bottom:1px solid var(--line); } .job-row h3{ font-size:19px; font-weight:500; } .job-meta{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--fg-mute); margin-top:6px; } .job-row .arrow{ font-family:'IBM Plex Mono'; font-size:22px; color:var(--fg-mute); transition:transform .3s, color .3s; } .job-row:hover .arrow{ transform:rotate(45deg); color:var(--signal); } .job-empty{ padding:70px 0; text-align:center; color:var(--fg-dim); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } /* ============ EXTRA — PRODUTO PRÓPRIO (Dash Analytics) ============ */ .product-feature{ border:1px solid var(--line-2); padding:60px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; } .product-badge{ display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono'; font-size:11px; color:var(--teal); text-transform:uppercase; letter-spacing:.06em; border:1px solid var(--teal); padding:7px 13px; margin-bottom:24px; } .product-badge .dot{ width:5px; height:5px; border-radius:50%; background:var(--teal); } .product-feature h3{ font-size:clamp(24px,2.6vw,34px); margin-bottom:18px; } .product-feature > div > p{ color:var(--fg-dim); font-size:15px; margin-bottom:28px; max-width:440px; } .mock-dash{ background:var(--surface); border:1px solid var(--line); padding:26px; font-family:'IBM Plex Mono'; } .mock-dash-head{ display:flex; justify-content:space-between; font-size:11px; color:var(--fg-mute); margin-bottom:20px; } .mock-dash-head .led{ width:6px; height:6px; border-radius:50%; background:var(--teal); display:inline-block; margin-right:6px; animation:blink 2.4s infinite; } .mock-dash-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); } .mock-stat{ background:var(--surface); padding:18px; } .mock-stat .l{ font-size:10.5px; color:var(--fg-mute); text-transform:uppercase; } .mock-stat .v{ font-size:22px; margin-top:8px; color:var(--fg); } .mock-stat .v.up{ color:var(--teal); } /* ============ EXTRA — CALCULADORA ============ */ .calc-block{ border:1px solid var(--line-2); padding:56px; } .calc-row{ display:grid; grid-template-columns:1fr 190px; gap:30px; align-items:center; padding:22px 0; border-top:1px solid var(--line); } .calc-row:first-child{ border-top:none; } .calc-row label{ font-size:15.5px; } .calc-row input[type=range]{ width:100%; accent-color:var(--signal); } .calc-val{ font-family:'IBM Plex Mono'; font-size:13px; color:var(--fg-dim); margin-top:8px; text-align:right; } .calc-result{ margin-top:44px; padding-top:44px; border-top:1px solid var(--line); text-align:center; } .calc-result .big{ font-family:'IBM Plex Mono'; font-size:clamp(36px,5vw,60px); color:var(--signal); font-weight:600; } .calc-result .lbl{ color:var(--fg-dim); font-size:14px; margin-top:12px; } /* ============ EXTRA — TIMELINE (reaproveita padrão de método) ============ */ .timeline-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); } @media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:50px; } .product-feature{ grid-template-columns:1fr; padding:40px; } .calc-block{ padding:36px; } .calc-row{ grid-template-columns:1fr; gap:10px; } .timeline-strip{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .timeline-strip{ grid-template-columns:1fr; } } /* ============ CINEMATIC — CANVAS DE FUNDO DO HERO ============ */ .hero{ position:relative; } .hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block; } .hero > *:not(.hero-canvas){ position:relative; z-index:1; } /* ============ CINEMATIC — TRILHO DE CAPÍTULOS ============ */ .chapter-rail{ position:fixed; right:30px; top:50%; transform:translateY(-50%); z-index:150; display:flex; flex-direction:column; gap:18px; align-items:center; } .chapter-rail button{ width:6px; height:6px; border-radius:50%; background:var(--line-2); border:none; padding:0; cursor:pointer; transition:background .3s, transform .3s; position:relative; } .chapter-rail button::after{ content:attr(data-label); position:absolute; right:16px; top:50%; transform:translateY(-50%); font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--fg-mute); white-space:nowrap; opacity:0; transition:opacity .2s; pointer-events:none; } .chapter-rail button:hover::after{ opacity:1; } .chapter-rail button.active{ background:var(--signal); transform:scale(1.9); } @media (max-width:1180px){ .chapter-rail{ display:none; } } /* nota: .chapter-rail não tem CSS de bloqueio por reduced-motion — só existe no DOM quando o próprio JS (assets/cinematic.js) decide criá-lo, então o gate de acessibilidade já acontece lá */