/* Theme Name: Atmosfera Media Theme URI: https://atmosferamedia.com.br Author: Atmosfera Media Author URI: https://atmosferamedia.com.br Description: Tema institucional da Atmosfera Media - tecnologia que cria atmosfera. Convertido do prototipo aprovado e 100% editavel pelo Personalizador do WordPress: textos, imagens, cores, listas, secoes inteiras, produtos, cases e formulario de contato, sem tocar em codigo. Version: 1.4.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: atmosfera-media Tags: business, portfolio, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, two-columns, blog */ /* ════════════════════════════════════════════════════════════ ATMOSFERA MEDIA · HOME Display: Calendula Bold · Corpo: Mona Sans Escuro #171717 · Claro #F5F5F0 · Gradiente #53B7C5 → #8CC561 ════════════════════════════════════════════════════════════ */ /* Calendula Bold — gerada do .otf original do cliente (woff2 = 30KB) */ @font-face{ font-family:'Calendula'; src:url('assets/fonts/Calendula-Bold.woff2') format('woff2'), url('assets/fonts/Calendula-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } :root{ --dark:#171717; --dark-2:#101010; --light:#F5F5F0; --teal:#53B7C5; --lime:#8CC561; --ink:#282C20; --bone:#F5F7F7; --grad:linear-gradient(100deg,#53B7C5 0%,#8CC561 100%); --grad-r:linear-gradient(260deg,#53B7C5 0%,#8CC561 100%); --display:'Calendula','Playfair Display',Georgia,serif; --sans:'Mona Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --pad:clamp(24px,6vw,120px); --nav-h:88px; --gap-sec:clamp(56px,8vh,110px); /* ═══════════ GAPS AJUSTÁVEIS · BLOCOS CLAROS ═══════════ */ --gap-topo-diagnostico: clamp(12px,2vh,32px); --gap-titulo-texto: clamp(18px,2.4vh,28px); --gap-texto-leque: clamp(6px,1vh,16px); --gap-leque-empresas: clamp(180px,24vh,340px); --gap-empresas-faq: clamp(56px,8vh,120px); --gap-faq-contato: clamp(48px,7vh,100px); --leque-altura: calc(clamp(150px,17vw,250px) * 1.3667 + clamp(46px,5.5vw,105px)); --leque-transbordo: clamp(46px,7.4vw,112px); --ease:cubic-bezier(.22,.61,.36,1); --io:cubic-bezier(.16,1,.3,1); --dim-a:rgba(245,247,247,.62); --dim-b:rgba(40,44,32,.66); } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ background:var(--dark); color:var(--bone); font-family:var(--sans); font-size:15.8px; line-height:1.62; font-weight:400; overflow-x:hidden; -webkit-font-smoothing:antialiased; } body.no-scroll{ overflow:hidden; } a{ color:inherit; text-decoration:none; } img{ display:block; max-width:100%; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } ::selection{ background:var(--lime); color:var(--ink); } /* ─────────── tipografia base ─────────── */ .display{ font-family:var(--display); font-weight:700; letter-spacing:-.015em; line-height:1.02; } .heavy{ font-family:var(--sans); font-weight:800; letter-spacing:-.035em; line-height:1.02; } .grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .label{ display:inline-block; font-family:var(--sans); font-weight:700; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--lime); } .label.dark{ color:#4f8a3c; } /* ─────────── fundo global ─────────── */ #stars{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.55; transition:opacity .6s ease; } body.on-light #stars{ opacity:0; } #solar{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0; } #darkZone{ position:relative; z-index:2; margin-top:-1px; } .grain{ content:""; position:fixed; inset:0; z-index:60; opacity:.03; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } section{ position:relative; z-index:2; } section[id]{ scroll-margin-top:var(--nav-h); } .sec{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:var(--gap-sec) var(--pad); } /* ─────────── revelação ─────────── */ .reveal{ opacity:0; transform:translateY(38px); transition:opacity .9s var(--io), transform 1s var(--io); } .reveal.in{ opacity:1; transform:none; } .reveal[data-d="1"]{ transition-delay:.09s } .reveal[data-d="2"]{ transition-delay:.18s } .reveal[data-d="3"]{ transition-delay:.27s } .reveal[data-d="4"]{ transition-delay:.36s } .reveal[data-d="5"]{ transition-delay:.45s } .reveal[data-d="6"]{ transition-delay:.54s } /* ═══════════════════════════ NAV ═══════════════════════════ */ nav{ position:fixed; top:0; left:0; right:0; z-index:70; height:var(--nav-h); display:flex; align-items:center; transition:background .45s var(--ease), backdrop-filter .45s, transform .55s var(--ease), border-color .45s; border-bottom:1px solid transparent; } nav.scrolled{ background:rgba(23,23,23,.72); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom-color:rgba(245,247,247,.08); } nav.hide{ transform:translateY(-115%); } body.on-light nav.scrolled{ background:rgba(245,245,240,.8); border-bottom-color:rgba(40,44,32,.1); } .nav-in{ width:100%; padding:0 clamp(20px,4vw,64px); display:flex; align-items:center; justify-content:space-between; gap:26px; } .brand img{ height:38px; width:auto; transition:filter .4s; } body.on-light .brand img{ filter:invert(1) hue-rotate(180deg) brightness(.72); } .nav-links{ display:flex; align-items:center; gap:6px; list-style:none; } .nav-links a{ font-size:13px; font-weight:500; color:var(--dim-a); padding:9px 13px; border-radius:99px; position:relative; transition:color .28s; } body.on-light .nav-links a{ color:var(--dim-b); } .nav-links a::after{ content:""; position:absolute; left:13px; right:13px; bottom:6px; height:1.5px; border-radius:2px; background:var(--grad); transform:scaleX(0); transform-origin:left; transition:transform .42s var(--ease); } .nav-links a:hover{ color:var(--bone); } .nav-links a:hover::after{ transform:scaleX(1); } body.on-light .nav-links a:hover{ color:var(--ink); } .nav-cta{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink); background:var(--grad); padding:12px 22px; border-radius:99px 99px 99px 4px; transition:filter .3s, transform .3s; white-space:nowrap; } .nav-cta:hover{ filter:brightness(1.08); transform:translateY(-2px); } .burger{ display:none; flex-direction:column; gap:6px; padding:8px; } .burger span{ width:26px; height:2px; background:currentColor; border-radius:2px; transition:.3s var(--ease); } .burger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); } .burger.open span:nth-child(2){ opacity:0; } .burger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); } .mmenu{ position:fixed; inset:var(--nav-h) 0 auto 0; z-index:69; background:rgba(23,23,23,.98); backdrop-filter:blur(22px); display:flex; flex-direction:column; padding:22px 28px 34px; gap:2px; transform:translateY(-115%); transition:transform .55s var(--io); } .mmenu.open{ transform:translateY(0); } .mmenu a{ font-size:22px; font-weight:600; padding:13px 0; border-bottom:1px solid rgba(245,247,247,.09); } .mmenu a.cta{ color:var(--lime); border:0; margin-top:10px; } /* ═══════════════════════════ BOTÕES ═══════════════════════════ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:14px 26px; border-radius:99px 5px 99px 5px; cursor:pointer; border:1px solid transparent; white-space:nowrap; position:relative; overflow:hidden; /* o ::before do botao fantasma sobe em z-index:-1; sem um contexto de empilhamento proprio ele cai ATRAS do fundo da secao e o preenchimento do hover nunca aparece. O isolate prende a camada dentro do botao. */ isolation:isolate; transition:filter .3s var(--ease), transform .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .btn .arr{ transition:transform .38s var(--ease); } .btn:hover .arr{ transform:translateX(6px); } .btn-primary{ background:var(--grad); color:var(--ink); } .btn-primary:hover{ filter:brightness(1.09); transform:translateY(-3px); } .btn-ghost{ border-color:rgba(83,183,197,.4); color:var(--bone); } .btn-ghost::before{ content:""; position:absolute; inset:0; background:var(--grad); transform:translateY(101%); transition:transform .48s var(--io); z-index:-1; } .btn-ghost:hover{ color:var(--ink); border-color:transparent; } .btn-ghost:hover::before{ transform:translateY(0); } /* ═══════════════════════ ORB (bola que viaja) ═══════════════════════ */ #orb{ position:fixed; top:50%; left:50%; z-index:3; pointer-events:none; width:min(32vw,410px); aspect-ratio:1; margin:0; transform:translate3d(-50%,-50%,0); will-change:transform,opacity; } #orb::before{ content:""; position:absolute; inset:8%; border-radius:50%; background:radial-gradient(circle,rgba(83,183,197,.16),transparent 66%); } #orb canvas{ width:100%; height:100%; display:block; } .orb-rings{ position:absolute; inset:0; display:grid; place-items:center; } .orb-rings i{ position:absolute; border-radius:50%; border:1px solid rgba(83,183,197,.13); } .orb-rings i:nth-child(1){ width:74%; aspect-ratio:1; animation:orbspin 46s linear infinite; } .orb-rings i:nth-child(2){ width:98%; aspect-ratio:1; border-style:dashed; border-color:rgba(140,197,97,.11); animation:orbspin 74s linear infinite reverse; } @keyframes orbspin{ to{ transform:rotate(360deg); } } /* ═══════════════════════════ HERO ═══════════════════════════ */ #hero{ min-height:100vh; display:flex; align-items:center; padding:calc(var(--nav-h) + 4vh) var(--pad) 12vh; overflow:hidden; } .hero-bg{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center 38%; transform:scale(1.06); will-change:transform; } .hero-veil{ position:absolute; inset:0; z-index:1; background: linear-gradient(180deg,rgba(23,23,23,.88) 0%,rgba(23,23,23,.44) 38%,rgba(23,23,23,.50) 62%,rgba(23,23,23,.60) 82%,rgba(23,23,23,.68) 100%), linear-gradient(90deg,rgba(23,23,23,.8) 0%,rgba(23,23,23,0) 62%); } /* borda dissolvida: o vídeo se desfaz no #171717 do darkZone sem linha de corte. Curva em S (smootherstep) com 14 paradas — evita banding e emenda visível. */ #hero::after{ content:""; position:absolute; left:-1px; right:-1px; bottom:-1px; z-index:2; height:clamp(180px,30vh,420px); pointer-events:none; background:linear-gradient(180deg, rgba(23,23,23,0) 0%, rgba(23,23,23,.014) 9%, rgba(23,23,23,.055) 18%, rgba(23,23,23,.120) 27%, rgba(23,23,23,.205) 36%, rgba(23,23,23,.305) 45%, rgba(23,23,23,.415) 54%, rgba(23,23,23,.530) 63%, rgba(23,23,23,.645) 72%, rgba(23,23,23,.755) 80%, rgba(23,23,23,.850) 87%, rgba(23,23,23,.925) 93%, rgba(23,23,23,.975) 97%, #171717 100%); } .hero-in{ position:relative; z-index:4; width:100%; max-width:1560px; margin:0 auto; } .hero-title{ font-family:var(--display); font-weight:700; font-size:clamp(2.5rem,6.2vw,5.8rem); line-height:1.12; letter-spacing:-.02em; color:var(--bone); padding-bottom: 0.1em; } .hero-title .w{ display:inline-block; } .hero-desc{ margin-top:clamp(20px,2.4vh,34px); max-width:460px; font-size:clamp(.92rem,1vw,1.04rem); color:var(--dim-a); line-height:1.7; } .hero-actions{ margin-top:clamp(32px,4vh,52px); display:flex; gap:18px; flex-wrap:wrap; } .scroll-cue{ position:absolute; bottom:clamp(24px,4vh,46px); left:50%; transform:translateX(-50%); z-index:4; display:flex; flex-direction:column; align-items:center; gap:12px; font-size:10px; font-weight:700; letter-spacing:.42em; text-transform:uppercase; color:rgba(245,247,247,.42); } .scroll-cue i{ width:1px; height:52px; background:linear-gradient(var(--teal),transparent); animation:cue 2s var(--ease) infinite; } @keyframes cue{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} } /* ═══════════════════════ UNIVERSO · sistema orbital ═══════════════════════ */ #universo{ position:relative; min-height:112vh; overflow:visible; } .uni-pin{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--nav-h) + 4vh) var(--pad) 7vh; overflow:visible; } .uni-head{ position:relative; z-index:5; max-width:980px; margin:0 auto clamp(18px,3vh,34px); width:100%; text-align:center; } .uni-head h2{ font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,2.8vw,2.6rem); line-height:1.14; text-align:center; margin-inline:auto; max-width:34ch; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .uni-stage{ position:relative; flex:1; min-height:clamp(430px,58vh,640px); width:100%; max-width:1440px; margin:0 auto; overflow:visible; } .uni-orbit{ position:relative; width:100%; height:100%; min-height:inherit; isolation:isolate; overflow:visible; } .uni-orbit::before, .uni-orbit::after{ content:""; position:absolute; left:50%; top:50%; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; } /* as guias seguem o raio real da orbita, calculado no JS */ .uni-orbit::before{ width:calc(var(--rx,260px) * 2); height:calc(var(--ry,190px) * 2); border:1px solid rgba(83,183,197,.26); box-shadow:0 0 0 18px rgba(83,183,197,.022),inset 0 0 70px rgba(83,183,197,.05); } .uni-orbit::after{ width:calc(var(--rx,260px) * 1.44); height:calc(var(--ry,190px) * 2.2); border:1px dashed rgba(140,197,97,.15); transform:translate(-50%,-50%) rotate(-16deg); } .orbit-core{ position:absolute; z-index:-1; left:50%; top:50%; width:min(24vw,300px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(83,183,197,.18),rgba(140,197,97,.08) 40%,transparent 68%); filter:blur(2px); pointer-events:none; } /* Recolhido mostra so o titulo. No hover o card cresce e revela o texto — a orbita congela enquanto isso para o card nao fugir do cursor. */ .orbit-card{ --oc-w:clamp(104px,10.4vw,140px); --oc-open:clamp(196px,17vw,242px); position:absolute; left:50%; top:50%; z-index:var(--oz,2); width:var(--oc-w); transform:translate3d(-50%,-50%,0) translate3d(var(--ox,0px),var(--oy,0px),0) scale(var(--os,1)); padding:11px 14px; border-radius:18px 4px 18px 4px; border:0; color:var(--ink); background:var(--grad); opacity:var(--oo,1); box-shadow:0 10px 26px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.3); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; cursor:pointer; will-change:transform; transition:width .45s var(--io), padding .45s var(--io), box-shadow .4s var(--ease); } .orbit-card::before{ display:none; } .orbit-card h3{ margin:0; font-family:var(--display); font-weight:700; color:var(--ink); font-size:clamp(.86rem,.95vw,1.06rem); line-height:1.08; white-space:nowrap; transition:font-size .45s var(--io); } .orbit-card .oc-body{ display:grid; grid-template-rows:0fr; width:100%; margin-top:0; opacity:0; transition:grid-template-rows .45s var(--io), margin-top .45s var(--io), opacity .3s ease; } .orbit-card .oc-body > p{ overflow:hidden; margin:0; color:rgba(40,44,32,.86); font-size:clamp(.7rem,.78vw,.83rem); line-height:1.42; } .orbit-card.is-open{ width:var(--oc-open); padding:16px 18px; box-shadow:0 22px 52px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.36); } .orbit-card.is-open h3{ white-space:normal; font-size:clamp(.96rem,1.1vw,1.2rem); } .orbit-card.is-open .oc-body{ grid-template-rows:1fr; margin-top:8px; opacity:1; } @media (max-width:760px){ #universo{ min-height:0; } .uni-pin{ position:relative; height:auto; padding:var(--gap-sec) var(--pad); overflow:visible; } .uni-head{ margin-bottom:18px; } .uni-stage{ flex:none; min-height:0; height:auto; } /* sem espaco para orbitar: vira grade e o texto ja fica visivel */ .uni-orbit{ height:auto; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:9px; } .uni-orbit::before, .uni-orbit::after, .orbit-core{ display:none; } .orbit-card{ position:static; width:auto; transform:none; opacity:1; padding:13px 12px; text-align:left; align-items:flex-start; box-shadow:0 8px 20px rgba(0,0,0,.3); } .orbit-card h3{ white-space:normal; font-size:.92rem; } .orbit-card .oc-body{ grid-template-rows:1fr; margin-top:6px; opacity:1; } .orbit-card .oc-body > p{ font-size:.72rem; line-height:1.34; } } /* ═══════════════════════ PRODUTOS ═══════════════════════ */ #produtos-intro{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--gap-sec) var(--pad); } #produtos-intro h2{ font-family:var(--display); font-weight:700; margin-top:20px; font-size:clamp(1.9rem,4.5vw,4.1rem); line-height:1.06; max-width:16ch; } #produtos-intro p{ margin-top:22px; max-width:500px; color:var(--dim-a); font-size:.98rem; } /* trilho das partículas: começa em produtos e só termina no fim do método */ #webgl-zone{ position:relative; z-index:2; } #produtos{ position:relative; z-index:2; } #webgl{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; } #webgl canvas{ position:sticky; top:0; display:block; width:100%; height:100vh; } .panel{ position:relative; z-index:2; display:flex; align-items:center; padding:20px var(--pad); } .panel .p-in{ width:100%; max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.22fr .78fr; gap:clamp(16px,3vw,56px); align-items:center; } .panel.rev .p-in{ direction:rtl; } .panel.rev .p-in > *{ direction:ltr; } .p-art{ display:grid; place-items:center; perspective:1100px; height:clamp(280px,34vw,540px); min-height:280px; overflow:hidden; } .p-art img{ display:block; width:auto; height:auto; max-width:clamp(240px,29vw,420px); max-height:clamp(240px,29vw,420px); object-fit:contain; object-position:center; filter:drop-shadow(0 34px 70px rgba(0,0,0,.55)); transition:transform .55s var(--ease), filter .55s var(--ease); animation:artFloat 8s ease-in-out infinite; will-change:transform; cursor:pointer; } .p-art img:hover{ transform:translate3d(0,-8px,0) rotate(-1deg); filter:drop-shadow(0 42px 80px rgba(0,0,0,.62)); } @keyframes artFloat{ 0%,100%{ translate:0 -9px; } 50%{ translate:0 9px; } } .p-card{ display:block; border-radius:22px; padding:clamp(19px,2vw,32px); width:100%; max-width:440px; background:linear-gradient(165deg,rgba(30,33,30,.92),rgba(18,20,18,.86)); border:1px solid rgba(140,197,97,.1); box-shadow:0 40px 90px rgba(0,0,0,.5); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } .p-card h3{ font-family:var(--display); font-weight:700; font-size:clamp(1.45rem,2.5vw,2.4rem); margin-top:12px; line-height:1.05; } .p-card .lead{ margin-top:15px; color:var(--dim-a); font-size:.88rem; line-height:1.7; max-width:400px; } .tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; list-style:none; } .tags li{ font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(245,247,247,.72); border:1px solid rgba(83,183,197,.26); padding:6px 12px; border-radius:99px; transition:.3s var(--ease); } .tags li:hover{ color:var(--bone); border-color:rgba(140,197,97,.6); transform:translateY(-2px); } /* ═══════════ CASES · trilho horizontal preso ao scroll ═══════════ Estrutura em duas peças, como manda o padrao de pin horizontal: .horizontal-pin-spacer → so tem altura. E ela que "gasta" o scroll. .horizontal-pin → sticky no topo, altura de tela, e o palco. .cases-view → a janela por onde o trilho passa. .cases-track → a fita de pecas, movida no translateX. O desenho segue a mesma logica de uma galeria de portfolio: legenda em cima, imagem embaixo, nenhum veu ou selo por cima da foto, e cada peca com tamanho (--h/--ar) e altura de partida (--y) proprios. E o desencontro das alturas — mais o vao largo entre elas — que faz a fita respirar em vez de virar esteira. */ #cases{ position:relative; } .horizontal-pin-spacer{ position:relative; z-index:2; } .horizontal-pin{ position:sticky; top:0; height:100vh; height:100svh; display:flex; flex-direction:column; /* flex-start em vez de center: o cabeçalho e a fita encostam perto do topo (logo abaixo da nav) em vez de flutuar no meio da tela — era esse respiro grande em cima que sobrava quando o bloco era menor que os 100vh do palco. */ justify-content:flex-start; padding:calc(var(--nav-h) + 2.2vh) 0 6vh; /* o trilho entra e sai por fora da tela: sem isso ele empurraria a pagina */ overflow:hidden; } /* ── cabeçalho: so o titulo ── */ .cases-head{ padding:0 var(--pad); margin-bottom:clamp(14px,2vh,26px); } /* O título escala pela MENOR das duas medidas da tela. Só com 3.6vw ele ficava enorme num monitor largo e baixo, roubando a altura das fotos. */ .cases-head h2{ font-family:var(--display); font-weight:700; line-height:1.06; font-size:clamp(1.7rem, min(3.6vw, 5vh), 3.2rem); } /* ── janela e fita ── */ .cases-view{ position:relative; min-height:0; /* a altura do palco manda no tamanho de todo mundo: --h e --y de cada peca sao fracoes dela, entao a fita reequilibra sozinha em cada tela */ --stage:clamp(300px, calc(100vh - var(--nav-h) - 230px), 600px); height:var(--stage); max-height:100%; } .cases-track{ position:absolute; top:0; left:0; height:100%; display:flex; align-items:flex-start; gap:clamp(44px,6vw,150px); padding:0 var(--pad); padding-right:calc(var(--pad) + clamp(30px,5vw,120px)); width:max-content; will-change:transform; } /* ── peça: legenda em cima, imagem embaixo ── */ .case-card{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; margin-top:calc(var(--stage) * var(--y,0)); cursor:pointer; max-width:70vw; transition:opacity .7s var(--io); } .case-tag{ font-size:10px; letter-spacing:.24em; color:rgba(245,247,247,.46); transition:color .45s var(--ease); } .case-name{ font-family:var(--display); font-weight:700; line-height:1.14; font-size:clamp(.92rem,1.05vw,1.15rem); margin:7px 0 13px; max-width:26ch; transition:color .45s var(--ease); } .case-card:hover .case-tag{ color:var(--lime); } /* a moldura e o recorte; quem desliza e a imagem por dentro dela */ .case-frame{ display:block; position:relative; overflow:hidden; width:auto; height:calc(var(--stage) * var(--h,.5)); aspect-ratio:var(--ar,3/4); background:#1b1c1b; /* mesma assinatura diagonal dos botões (99px 5px 99px 5px), só que mais suave: valores bem menores, do tamanho de um quadro de foto em vez de uma pílula. O overflow:hidden acima já recorta a imagem por dentro. */ border-radius:clamp(16px,1.8vw,26px) 6px clamp(16px,1.8vw,26px) 6px; } .case-frame img{ width:100%; height:100%; object-fit:cover; display:block; /* --px vem do parallax (JS) e --sc do hover (CSS): separados em duas variaveis, os dois efeitos convivem no mesmo transform */ transform:translate3d(var(--px,0px),0,0) scale(var(--sc,1.07)); filter:saturate(.94) brightness(.9); transition:transform 1s var(--io), filter .6s var(--ease); } .case-card:hover .case-frame img{ --sc:1.13; filter:saturate(1.02) brightness(1); } /* case "Tour interativo" (Massaropi): o object-fit:cover cortava o lado esquerdo da foto, que e onde fica o conteudo importante. Desloca o recorte para a direita so nessa imagem, sem mexer na moldura. */ .case-frame img[src*="tour-interativo.jpg"]{ object-position:left center; } /* moldura da foto: o mesmo traço de 1px que os botões usam na borda, só que mais suave (opacidade baixa em vez da cor cheia). Duas camadas em anel (mask-composite) para poder trocar de cor sólida para o degradê da marca no hover com um crossfade — um "background" gradiente não anima de forma suave sozinho, então a troca é de opacidade entre elas. */ .case-frame::before, .case-frame::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; padding:1px; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .case-frame::before{ background:rgba(245,247,247,.46); } .case-frame::after{ background:var(--grad); opacity:0; transition:opacity .45s var(--ease); } .case-card:hover .case-frame::after{ opacity:1; } /* ── fecho do trilho: só o botão ── */ .case-todos{ flex:0 0 auto; align-self:flex-start; margin-top:calc(var(--stage) * .44); white-space:nowrap; } /* ═══════════════════════ MÉTODO ═══════════════════════ */ #metodo{ padding-top:clamp(8px,2vh,24px); } #metodo .m-head{ max-width:940px; margin:0 auto clamp(32px,4.5vh,58px); text-align:center; } #metodo h2{ font-family:var(--sans); font-weight:800; letter-spacing:-.035em; font-size:clamp(1.8rem,4vw,3.4rem); line-height:1.05; } .m-card{ position:relative; border-radius:32px; padding:clamp(34px,4vw,72px) clamp(26px,3.4vw,60px); background:linear-gradient(165deg,rgba(28,31,28,.9),rgba(17,19,17,.82)); border:1px solid rgba(140,197,97,.1); overflow:hidden; max-width:1560px; margin:0 auto; width:100%; } .m-card::before{ content:"ATMOS"; position:absolute; inset:0; display:grid; place-items:center; font-family:var(--sans); font-weight:800; font-size:clamp(5.5rem,14vw,12rem); letter-spacing:-.04em; color:rgba(245,247,247,.032); pointer-events:none; user-select:none; } .m-track{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(14px,2vw,32px); } .m-line{ position:absolute; left:6%; right:6%; top:25px; height:2px; background:rgba(245,247,247,.1); border-radius:2px; } .m-line i{ display:block; height:100%; width:0; background:var(--grad); border-radius:2px; transition:width 1.4s var(--io); } .m-step{ position:relative; } .m-node{ width:50px; height:50px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:1rem; color:var(--dim-a); border:1.5px solid rgba(83,183,197,.34); background:rgba(23,23,23,.9); transition:.6s var(--io); margin-bottom:20px; } .m-step.on .m-node{ background:var(--grad); color:var(--ink); border-color:transparent; box-shadow:0 0 34px rgba(83,183,197,.42); } .m-step h3{ font-size:1rem; font-weight:700; color:rgba(245,247,247,.5); transition:color .6s; } .m-step p{ margin-top:8px; font-size:.85rem; line-height:1.6; color:rgba(245,247,247,.3); transition:color .6s; max-width:24ch; } .m-step.on h3{ color:var(--bone); } .m-step.on p{ color:var(--dim-a); } /* ═══════════════ TRANSIÇÃO ESCURO → CLARO ═══════════════ */ .shift{ position:relative; z-index:2; overflow:hidden; /* a cor de emenda: o topo do PNG do planeta le como #1A1A1B, entao e essa a cor que amarra a secao escura ao inicio da imagem (ver .shift::before) */ --shift-seam:#1A1A1B; /* 26vw acompanha a proporcao do PNG (1536x1024): com height:260% no planeta, essa medida ja o deixa mais largo que a tela em qualquer monitor, sem precisar esticar a imagem. */ height:clamp(240px,26vw,900px); /* Fundo claro, nao escuro: assim o PNG do planeta le como recorte em vez de virar uma caixa escura em cima da secao clara. */ background:var(--light); } /* O planeta e dimensionado pela ALTURA do bloco, nao por vw: assim ele acompanha o bloco em qualquer largura, inclusive depois que o clamp trava a altura em telas muito largas. height:260% + top:-126% colocam a curva a ~22% da altura: o topo do bloco e a superficie escura do planeta, que encosta na secao escura de cima sem emenda, e o resto e o proprio alfa do PNG deixando o claro passar. */ .shift-planet{ /* -75% e o mesmo valor do prototipo: com -126% a curva do planeta subia para ~15% do bloco e a superficie escura ficava toda fora de quadro, deixando o degrade da divisa sem para onde ir. */ position:absolute; z-index:1; left:50%; top:-75%; height:260%; width:auto; min-width:100%; max-width:none; transform:translateX(-50%) rotate(180deg); pointer-events:none; } /* ── divisa #metodo → .shift ────────────────────────────────────────── O topo do planeta e azulado (#0d1a24 ~ #23272f) e batia direto no #171717 do bloco escuro: dava um risco horizontal visivel. Este veu sai de #171717 (mesma cor de quem esta em cima, entao a emenda some), passa por #1A1A1B e se dissolve dentro da imagem — a troca vira um degrade continuo em vez de uma linha. */ .shift::before{ content:""; position:absolute; z-index:2; left:0; right:0; top:-1px; height:44%; pointer-events:none; background:linear-gradient(180deg, #171717 0%, var(--shift-seam) 12%, rgba(26,26,27,.96) 26%, rgba(26,26,27,.82) 42%, rgba(26,26,27,.56) 58%, rgba(26,26,27,.28) 76%, rgba(26,26,27,.09) 90%, rgba(26,26,27,0) 100%); } /* ═══════════════════════ BLOCOS CLAROS ═══════════════════════ */ .light-zone{ background:var(--light); color:var(--ink); position:relative; z-index:2; } .light-zone .label{ color:#4f8a3c; } .light-zone .sec{ min-height:0; padding-top:clamp(40px,6vh,80px); padding-bottom:clamp(40px,6vh,80px); } /* ── Diagnóstico + leque ── */ #diagnostico{ text-align:center; min-height:0; padding-top:var(--gap-topo-diagnostico); padding-bottom:var(--gap-leque-empresas); } #diagnostico h2{ font-family:var(--sans); font-weight:800; letter-spacing:-.04em; font-size:clamp(2rem,5.4vw,4.8rem); line-height:.98; text-transform:uppercase; max-width:15ch; margin:0 auto; } #diagnostico .sub{ margin:var(--gap-titulo-texto) auto 0; max-width:560px; color:rgba(40,44,32,.76); font-size:.96rem; line-height:1.7; } .diag-actions{ margin-top:var(--gap-titulo-texto); margin-bottom:87px; display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; } .diag-actions .mini{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(40,44,32,.62); } .fan-wrap{ position:relative; margin-top:var(--gap-texto-leque); padding-bottom:var(--leque-transbordo); display:flex; justify-content:center; } /* Mascote do bloco de diagnostico — puramente decorativo, por isso fica fora do fluxo e sem captura de clique (o leque continua todo clicavel). */ .diag-medico{ position:absolute; z-index:20; pointer-events:none; user-select:none; height:auto; width:auto; } /* medico: colado a direita do titulo */ .diag-medico{ top:clamp(-8px,0vh,8px); right:clamp(4px,3.4vw,96px); height:clamp(230px,25vw,430px); filter:drop-shadow(0 26px 46px rgba(40,44,32,.24)); } .fan{ position:relative; width:min(1180px,96vw); height:var(--leque-altura); display:flex; align-items:flex-end; justify-content:center; } .fan-card{ position:absolute; bottom:0; left:50%; width:clamp(150px,17vw,250px); aspect-ratio:3/4.1; margin-left:calc(clamp(150px,17vw,250px) / -2); border-radius:24px; overflow:hidden; padding:0; cursor:pointer; transform-origin:50% 118%; box-shadow:0 22px 50px rgba(40,44,32,.28); transition:transform .62s var(--io), box-shadow .45s, filter .45s, z-index .45s; filter:saturate(.94); z-index:10; } .fan-card img{ width:100%; height:100%; object-fit:cover; } .fan-card::after{ content:""; position:absolute; inset:0; border-radius:24px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.32); pointer-events:none; } .fan-card:hover, .fan-card:focus{ z-index:1000 !important; position:absolute; box-shadow:0 34px 80px rgba(40,44,32,.4); filter:saturate(1.06); } /* ── Empresas / logos ── */ #empresas{ overflow:visible; padding-top:0; padding-bottom:var(--gap-empresas-faq); } .emp-mark{ position:absolute; left:-14%; top:50%; transform:translateY(-50%); width:min(64%,760px); opacity:.26; pointer-events:none; z-index:1; -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%); mask-image:radial-gradient(closest-side,#000 55%,transparent 100%); } .emp-grid{ position:relative; z-index:2; display:block; text-align:center; } #empresas h2{ font-family:var(--sans); font-weight:800; letter-spacing:-.04em; text-transform:uppercase; font-size:clamp(1.7rem,3.8vw,3.3rem); line-height:.98; margin:0 auto; text-align:center; } #empresas .txt{ color:rgba(40,44,32,.78); font-size:1.04rem; line-height:1.75; } .logo-belt{ position:relative; z-index:3; margin-top:clamp(30px,4vh,56px); overflow:hidden; padding:22px 0; border-radius:26px; background:rgba(245,245,240,.72); backdrop-filter:blur(6px); -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); } .logo-run{ display:flex; align-items:center; gap:clamp(48px,7vw,120px); width:max-content; animation:belt 42s linear infinite; } .logo-belt:hover .logo-run{ animation-play-state:paused; } @keyframes belt{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .logo-item{ flex:0 0 auto; height:clamp(34px,4vw,56px); display:flex; align-items:center; opacity:.62; filter:grayscale(1); transition:opacity .35s, filter .35s; } .logo-item:hover{ opacity:1; filter:grayscale(0); } .logo-item img{ height:100%; width:auto; object-fit:contain; } .logo-word{ font-weight:800; font-size:clamp(1.15rem,2vw,1.9rem); letter-spacing:-.02em; color:var(--ink); white-space:nowrap; } /* ── FAQ ── */ #faq{ padding-top:0; padding-bottom:var(--gap-faq-contato); } #faq h2{ font-family:var(--display); font-weight:700; font-size:clamp(1.7rem,3.6vw,3rem); text-align:center; } .faq-list{ margin-top:clamp(34px,5vh,60px); display:flex; flex-direction:column; gap:14px; width:50%; margin-inline:auto; } .faq-item{ border:1.5px solid transparent; border-radius:99px; background:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.62)) padding-box, var(--grad) border-box; transition:border-radius .4s var(--ease), box-shadow .35s; } .faq-item[open]{ border-radius:28px; background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box; box-shadow:0 16px 40px rgba(83,183,197,.16); } .faq-item summary{ list-style:none; cursor:pointer; padding:24px clamp(24px,3vw,40px); display:flex; align-items:center; justify-content:space-between; gap:24px; font-weight:700; font-size:clamp(.88rem,1vw,.98rem); } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:"+"; font-size:1.5rem; font-weight:400; color:#7ec06a; transition:transform .4s var(--ease); } .faq-item[open] summary::after{ transform:rotate(45deg); } .faq-item .ans{ padding:0 clamp(24px,3vw,40px) 28px; color:rgba(40,44,32,.74); line-height:1.75; max-width:78ch; } /* ═══════════════════════ FOOTER / CONTATO ═══════════════════════ */ #contato{ position:relative; z-index:2; background:var(--dark); color:var(--bone); padding:clamp(72px,10vh,132px) var(--pad) 0; margin-top:-2px; overflow:hidden; } .foot-wave{ position:absolute; left:0; right:0; top:-1px; width:100%; height:clamp(46px,6vw,96px); display:block; z-index:3; } .foot-glow{ position:absolute; left:50%; top:0; width:120%; height:clamp(180px,22vw,340px); transform:translateX(-50%); pointer-events:none; z-index:2; background:radial-gradient(ellipse at 50% 0%,rgba(140,197,97,.30),rgba(83,183,197,.14) 42%,transparent 72%); filter:blur(34px); } #footStars{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .4s ease; } .foot-tex{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .4s ease; background: radial-gradient(58% 42% at 16% 24%,rgba(83,183,197,.16),transparent 66%), radial-gradient(52% 44% at 84% 66%,rgba(140,197,97,.11),transparent 68%), radial-gradient(70% 50% at 50% 108%,rgba(83,183,197,.10),transparent 70%); } #contato.is-supernova #footStars, #contato.is-supernova .foot-tex { opacity:1; } .foot-grid{ position:relative; z-index:3; max-width:1560px; margin:0 auto; display:grid; grid-template-columns:minmax(180px, .72fr) minmax(360px, 1.7fr) minmax(140px, .58fr); gap:clamp(18px,3vw,46px); align-items:end; } .foot-nav { display:flex; align-items:flex-start; justify-content:flex-start; gap:16px; } .foot-nav-info { display:flex; flex-direction:column; align-items:flex-start; flex:0 0 auto; margin-bottom:0; } .foot-brand{ display:block; margin:0 0 18px; } .foot-brand img{ width:min(180px,80%); filter:drop-shadow(0 0 26px rgba(83,183,197,.28)); } .foot-main { display:flex; flex-direction:column; justify-content:flex-end; /* respiro grande no topo: a onda e o brilho terminam bem antes do titulo */ margin-top: clamp(56px, 13vh, 132px); } .foot-nav .k, .foot-social .k{ font-size:10px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:rgba(245,247,247,.34); margin-bottom:14px; } .foot-nav ul, .foot-social ul{ list-style:none; display:flex; flex-direction:column; gap:8px; } .foot-nav a, .foot-social a{ font-weight:800; font-size:clamp(.85rem,1vw,1.02rem); letter-spacing:-.01em; transition:color .3s; } .foot-nav a:hover, .foot-social a:hover{ color:var(--lime); } .foot-social{ text-align:right; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:12px; } .foot-social ul{ align-items:flex-end; } .mascote{ position:relative; width:auto; height:clamp(160px, 45vh, 400px); max-height:50%; margin:0 0 12px; } .mascote::before{ content:""; position:absolute; left:50%; top:-18%; width:132%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle,rgba(83,183,197,.16),transparent 64%); } .mascote img{ position:relative; display:block; height:100%; width:auto; max-width:100%; margin:0 auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.55)); object-fit:contain; } .foot-main h2{ font-family:var(--sans); font-weight:800; letter-spacing:-.04em; text-transform:uppercase; font-size:clamp(1.45rem,2.7vw,2.5rem); line-height:1.15; text-align:center; } .foot-pills{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; justify-content:center; } .pill{ display:inline-flex; align-items:center; justify-content:center; background:var(--grad); color:var(--ink); font-weight:800; font-size:11px; letter-spacing:.05em; padding:11px 18px; border-radius:99px 99px 99px 6px; text-transform:uppercase; transition:filter .3s, transform .3s; white-space: normal; text-align: center; } .pill:hover{ filter:brightness(1.08); transform:translateY(-2px); } .pill.alt{ text-transform:none; letter-spacing:.02em; } .form{ margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:12px 10px; } .field{ display:flex; flex-direction:column; gap:3px; } .field.full{ grid-column:1/-1; } .field label{ font-size:8px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(245,247,247,.5); } .field input, .field select, .field textarea{ font-family:var(--sans); font-size:.78rem; color:var(--ink); background:var(--light); border:0; border-radius:99px 5px 99px 5px; padding:12px 16px; outline:0; transition:box-shadow .3s; } /* A seta nativa encostava na curva da pilula e parecia sair da caixa. Trocamos por um chevron proprio, recuado para dentro da borda. */ .field select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; /* o canto superior esquerdo tem 99px de raio: com os 16px de padding herdados, a curva passava por cima da primeira letra. O texto entra mais para dentro e a pilula deixa de morder a palavra. */ padding-left:30px; padding-right:46px; cursor:pointer; text-indent:1px; background:var(--light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23282C20' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 22px center; background-size:12px 8px; } .field select::-ms-expand{ display:none; } .field textarea{ border-radius:26px 5px 26px 5px; min-height:72px; resize:vertical; } .field input:focus, .field select:focus, .field textarea:focus{ box-shadow:0 0 0 2px var(--teal); } .field input::placeholder, .field textarea::placeholder{ color:rgba(40,44,32,.45); } .field.err input, .field.err textarea, .field.err select{ box-shadow:0 0 0 2px #e06a5a; } .field .msg{ font-size:11.5px; font-weight:600; letter-spacing:.02em; color:#f0907f; min-height:0; } .field.err .msg{ min-height:16px; } input[name="_honey"]{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .form-status{ grid-column:1/-1; text-align:center; font-size:.95rem; line-height:1.6; min-height:1.4em; margin-top:-4px; } .form-status.ok{ color:#9fe08a; } .form-status.bad{ color:#f0907f; } .form-status a{ text-decoration:underline; } #formSend[disabled]{ opacity:.6; pointer-events:none; } .form .btn{ grid-column:1/-1; justify-self:center; } /* ── faixa legal: fecha o rodapé em 2 linhas — links numa, CNPJ noutra ── */ .foot-legal{ position:relative; z-index:3; max-width:1560px; margin:clamp(18px,3vh,34px) auto 0; padding:clamp(16px,2.4vh,26px) 0 0; border-top:1px solid rgba(245,247,247,.09); display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; } .foot-legal__links{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; } .foot-legal__links li{ position:relative; } /* ponto separando os links, sem depender de um caractere no texto */ .foot-legal__links li + li::before{ content:"·"; position:absolute; left:-15px; color:rgba(245,247,247,.28); } .foot-legal__links a{ font-size:11.5px; font-weight:700; letter-spacing:.02em; color:rgba(245,247,247,.5); transition:color .3s var(--ease); } .foot-legal__links a:hover{ color:var(--lime); } .foot-legal__cnpj{ font-size:11px; color:rgba(245,247,247,.34); letter-spacing:.01em; } /* Estático por decisão — o data-anim-off no footer.php já impede o motion.js de marcar este bloco para entrar animado, mas a garantia de "sem animação" não pode depender só de um atributo lido por JS (cache de arquivo antigo, ordem de carregamento etc.). O !important aqui fecha a porta de qualquer jeito: texto e links sempre estáticos. */ .foot-legal, .foot-legal *{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; } .foot-base{ position:relative; z-index:3; height:clamp(40px,1vh,64px); } .foot-strip{ position:relative; z-index:3; height:14px; background:linear-gradient(90deg,var(--teal),#37d3e6); } /* ═══════════════════════ POPUP DE CASE ═══════════════════════ */ .case-modal{ position:fixed; inset:0; z-index:210; display:grid; place-items:center; padding:clamp(14px,3vw,42px); background:rgba(10,10,10,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s; } .case-modal.open{ opacity:1; visibility:visible; } .cm-box{ position:relative; width:min(1240px,94vw); height:min(74vh,700px); max-height:90vh; border-radius:30px 8px 30px 8px; overflow:hidden; display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:0; padding:0; background:linear-gradient(#e8e9e8,#dfe0de) padding-box, linear-gradient(135deg, #53B7C5 0%, #8CC561 100%) border-box; border:10px solid transparent; box-shadow:0 42px 110px rgba(0,0,0,.6); transform:translateY(22px) scale(.97); transition:transform .55s var(--io); } .case-modal.open .cm-box{ transform:none; } .cm-text{ padding:clamp(22px,2.6vw,40px); min-height:0; overflow-y:auto; display:flex; flex-direction:column; justify-content:flex-start; color:#1a1a19; border-right:2px solid rgba(83,183,197,.35); } /* margens automáticas centralizam quando sobra espaço e liberam a rolagem quando falta — garante que "Veja o case completo" nunca some. */ .cm-text > :first-child{ margin-top:auto; } .cm-text > :last-child{ margin-bottom:auto; } .cm-text .label{ color:#2d8b8f; letter-spacing:.12em; font-size:clamp(9.5px,.8vw,11.5px); font-weight:600; } .cm-text h3{ font-family:var(--sans); font-weight:600; font-size:clamp(1.5rem,2.3vw,2.35rem); line-height:1.05; letter-spacing:-.02em; margin-top:11px; color:#1a1a19; } .cm-text .cm-sub{ margin-top:11px; font-size:clamp(.86rem,1vw,1rem); font-weight:600; color:#2a2a28; } .cm-text p{ margin-top:15px; color:#3a3a38; line-height:1.62; font-size:clamp(.84rem,.97vw,.95rem); } .cm-meta{ display:flex; flex-wrap:wrap; gap:7px; margin-top:17px; list-style:none; } .cm-meta li{ font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#5a7570; border:1px solid rgba(83,183,197,.45); padding:5px 11px; border-radius:99px; background:rgba(255,255,255,.4); } /* uma peça só por popup — o vídeo quando existe, senão a foto — ocupando a coluna inteira e sangrando até a moldura, padrão de popup grande */ .cm-media{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:0; align-self:stretch; padding:0; background:#111211; overflow:hidden; min-width:0; } .cm-media img{ flex:1 1 auto; width:100%; height:100%; min-height:0; border:0; object-fit:cover; object-position:center; display:block; border-radius:0; background:#111211; } .cm-media iframe{ flex:0 0 auto; width:100%; height:auto; aspect-ratio:16/9; min-height:0; border:0; display:block; border-radius:0; background:#111; } .cm-media video[hidden],.cm-media img[hidden],.cm-media iframe[hidden]{ display:none; } .cm-close{ position:absolute; top:clamp(9px,1.2vw,16px); right:clamp(9px,1.2vw,16px); z-index:8; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(83,183,197,.35); color:#2a5c60; font-size:17px; line-height:1; background:rgba(232,233,232,.88); transition:.3s var(--ease); } .cm-close:hover{ background:var(--grad); color:#fff; border-color:transparent; transform:rotate(90deg); } .cm-text .btn-primary{ margin-top:clamp(16px,2vh,24px); align-self:flex-start; flex:0 0 auto; padding:11px 20px; font-size:10.5px; letter-spacing:.08em; } /* ═══════════════════════ LIGHTBOX ═══════════════════════ */ .lightbox{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:clamp(20px,5vw,72px); background:rgba(12,12,12,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s; } .lightbox.open{ opacity:1; visibility:visible; } .lightbox img{ max-width:min(1100px,92vw); max-height:86vh; width:auto; border-radius:22px; object-fit:contain; box-shadow:0 40px 110px rgba(0,0,0,.7); transform:scale(.94); transition:transform .5s var(--io); } .lightbox.open img{ transform:scale(1); } .lb-close{ position:absolute; top:clamp(16px,3vw,34px); right:clamp(16px,3vw,34px); width:52px; height:52px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(245,247,247,.24); color:var(--bone); font-size:22px; line-height:1; transition:.3s var(--ease); } .lb-close:hover{ background:var(--grad); color:var(--ink); border-color:transparent; transform:rotate(90deg); } /* ═══════════════════════ RESPONSIVO ═══════════════════════ */ @media (max-width:1180px){ .nav-links{ display:none; } .burger{ display:flex; } .nav-cta{ display:none; } .uni-slide{ grid-template-columns:1fr 1fr; } .uni-spacer{ display:none; } } @media (max-width:900px){ :root{ --nav-h:74px; } #orb{ width:min(64vw,380px); opacity:.45; } .panel .p-in{ grid-template-columns:1fr; } .panel.rev .p-in{ direction:ltr; } .p-art img{ width:min(82%,440px); max-width:82%; max-height:100%; } .p-card{ max-width:none; } .m-track{ grid-template-columns:1fr; gap:26px; } .m-line{ display:none; } .m-node{ margin-bottom:14px; } .m-step p{ max-width:none; } .form{ grid-template-columns:1fr; } .foot-brand img{ width:min(150px,72%); } .foot-nav ul, .foot-social ul{ gap:6px; } #contato .foot-main{ max-width:680px; margin-inline:auto; width:100%; } } @media (max-width:760px){ body{ font-size:15px; } .uni-pin{ position:static; height:auto; padding:var(--gap-sec) var(--pad); } .uni-stage{ min-height:0; display:flex; flex-direction:column; gap:18px; } .uni-slide{ position:static; grid-template-columns:1fr; opacity:1; transform:none; pointer-events:auto; transition:none; } .uni-slide.is-past{ opacity:1; transform:none; } .uni-dots{ display:none; } .card-mini p{ max-width:none; } .card-mini .glyph{ display:none; } .fan-card{ width:clamp(120px,34vw,180px); } #orb{ display:none; } } /* ═══════════════════════ ACABAMENTO FINAL · UX/UI ═══════════════════════ */ :focus-visible{ outline:3px solid var(--lime); outline-offset:4px; } .btn, .nav-cta, .pill{ border:1px solid rgba(245,247,247,.20); border-radius:99px 5px 99px 5px; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.13); } .btn-primary, .nav-cta, .pill{ background:var(--grad); color:var(--ink); } .btn-ghost{ border-color:rgba(83,183,197,.54); box-shadow:inset 0 1px 0 rgba(255,255,255,.10); } .pill{ min-height:44px; padding:12px 20px; } .pill.alt{ text-transform:none; letter-spacing:.01em; } .faq-list{ margin-top:clamp(28px,4vh,46px); gap:10px; } .faq-item, .faq-item[open]{ border-radius:26px 5px 26px 5px; } .faq-item summary{ padding:17px clamp(20px,2.3vw,30px); gap:16px; } .faq-item .ans{ padding:0 clamp(20px,2.3vw,30px) 20px; font-size:.95rem; line-height:1.65; } /* o angulo precisa ser tipado para poder ser animado */ @property --pang{ syntax:""; initial-value:0deg; inherits:false; } .p-card{ --card-a:83,183,197; --card-b:140,197,97; position:relative; isolation:isolate; overflow:hidden; display:block; cursor:pointer; color:inherit; text-decoration:none; border:1.5px solid transparent; /* borda viva: o mesmo teal -> lime do botao Fazer diagnostico girando */ background: linear-gradient(155deg,rgba(25,33,33,.95),rgba(15,19,17,.93)) padding-box, conic-gradient(from var(--pang), rgba(83,183,197,.10) 0deg, rgba(83,183,197,.60) 62deg, rgba(140,197,97,.60) 122deg, rgba(140,197,97,.10) 186deg, rgba(83,183,197,.10) 236deg, rgba(83,183,197,.55) 300deg, rgba(140,197,97,.55) 346deg, rgba(83,183,197,.10) 360deg) border-box; /* 7s deixava a borda girando rapido demais e sete cards juntos viravam um piscante. Em 22s vira brilho lento, quase parado. */ animation:pcardBorder 22s linear infinite; box-shadow:0 26px 62px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.10); transition:transform .55s var(--io), box-shadow .55s var(--io), filter .55s var(--ease); } @keyframes pcardBorder{ to{ --pang:360deg; } } .p-card::before{ content:""; position:absolute; z-index:-1; width:56%; aspect-ratio:1; left:-14%; top:-20%; border-radius:50%; background:radial-gradient(circle,rgba(var(--card-a),.30),rgba(var(--card-b),.10) 38%,transparent 68%); filter:blur(8px); } /* dois fios correndo: um no topo da esquerda pra direita, outro embaixo ao contrario */ .p-card::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; background: linear-gradient(90deg,transparent,#53B7C5,#8CC561,transparent), linear-gradient(90deg,transparent,#8CC561,#53B7C5,transparent); background-size:46% 1.5px, 46% 1.5px; background-repeat:no-repeat; background-position:0% 0%, 100% 100%; /* parados enquanto o card so existe na tela: os fios sao um sinal de interacao, nao um enfeite permanente */ animation:none; opacity:0; transition:opacity .5s var(--ease); } @keyframes pcardLines{ 0% { background-position:0% 0%, 100% 100%; } 55%,100%{ background-position:100% 0%, 0% 100%; } } .p-card > *{ position:relative; z-index:1; } .p-card:hover{ transform:translateY(-6px); filter:saturate(1.06); box-shadow:0 34px 78px rgba(0,0,0,.5),0 0 30px rgba(var(--card-a),.16),inset 0 1px 0 rgba(255,255,255,.14); } .p-card:hover::after{ animation:pcardLines 3.6s var(--ease) infinite; opacity:.75; } #atmos-films .p-card, #atmos-ai .p-card{ --card-a:140,197,97; --card-b:83,183,197; } #atmos-xr .p-card, #atmos-lab .p-card{ --card-a:129,202,231; --card-b:140,197,97; } #atmos-launch .p-card{ --card-a:166,219,111; --card-b:83,183,197; } .p-card .label{ text-shadow:0 0 14px rgba(var(--card-b),.42); } .p-card .tags li{ background:rgba(var(--card-a),.08); border-color:rgba(var(--card-a),.34); } .m-line i{ transition:width 3s cubic-bezier(.16,1,.3,1); } .m-card.is-ready .m-line i{ width:100%; } /* volta do loop: zera a linha e os passos sem animar o caminho de volta */ .m-card.m-reset .m-line i, .m-card.m-reset .m-node, .m-card.m-reset .m-step h3, .m-card.m-reset .m-step p{ transition:none !important; } .orb-supernova{ position:fixed; inset:0; z-index:6; pointer-events:none; overflow:hidden; } .orb-supernova canvas{ display:block; width:100%; height:100%; } @media (max-width:1280px){ :root{ --pad:clamp(22px,4.5vw,64px); --gap-sec:clamp(48px,6vh,78px); } .hero-title{ font-size:clamp(2.85rem,5.5vw,5.5rem); } .hero-desc{ max-width:520px; font-size:clamp(.95rem,1.35vw,1.08rem); } #produtos-intro h2{ font-size:clamp(2rem,4.25vw,3.85rem); } #diagnostico h2{ font-size:clamp(2.1rem,4.8vw,4.25rem); } .foot-main h2{ font-size:clamp(1.85rem,3.3vw,3rem); } .panel{ padding-top:clamp(24px,3vh,42px); padding-bottom:clamp(24px,3vh,42px); } .p-card h3{ font-size:clamp(1.65rem,2.5vw,2.4rem); } .p-art{ height:clamp(320px,40vw,620px); min-height:320px; } .p-art img{ max-width:clamp(280px,34vw,470px); max-height:clamp(280px,34vw,470px); } .uni-pin{ padding-top:calc(var(--nav-h) + 2vh); padding-bottom:5vh; } .cases-pin{ padding-top:calc(var(--nav-h) + 1vh); padding-bottom:4vh; } .cm-box{ width:min(1080px,94vw); } } @media (max-width:1020px){ .hero-title{ font-size:clamp(2.1rem,6vw,3.6rem); } .hero-desc{ max-width:30ch; font-size:.94rem; } .uni-stage{ min-height:clamp(420px,56vh,580px); } #contato{ padding-top:clamp(46px,7vh,72px); } .foot-main h2{ font-size:clamp(1.5rem,4vw,2.5rem); } .foot-pills{ margin-top:18px; } .field input, .field select, .field textarea{ font-size:.74rem; } .form .btn{ padding:12px 16px; } } @media (max-width:1180px){ #contato .foot-main{ max-width:900px; margin-inline:auto; width:100%; } } @media (max-width:900px){ .faq-list{ width:min(92%,720px); } .m-line{ display:block; left:23px; right:auto; top:26px; bottom:18px; width:2px; height:auto; } .m-line i{ width:100%; height:0; transition:height 3s cubic-bezier(.16,1,.3,1); } .m-card.is-ready .m-line i{ width:100%; height:100%; } .m-step{ padding-left:64px; min-height:64px; } .m-node{ position:absolute; left:0; top:0; } .panel .p-in{ gap:18px; } .p-art{ height:clamp(180px,34vw,294px); min-height:180px; } .p-art img{ width:100%; height:100%; max-height:100%; } } @media (max-width:760px){ :root{ --pad:20px; --gap-sec:clamp(46px,7vh,68px); } #orb{ display:block; width:min(40vw,160px); opacity:.66; } .hero-desc{ margin-top:20px; max-width:34ch; font-size:.92rem; } .hero-actions{ margin-top:26px; } .btn, .nav-cta, .pill{ min-height:44px; padding:12px 17px; font-size:10px; } #produtos-intro h2{ font-size:clamp(1.75rem,8.5vw,2.8rem); } #diagnostico h2{ font-size:clamp(1.75rem,8.5vw,2.8rem); } .panel{ padding:22px var(--pad); } .panel .p-in{ gap:18px; } .p-art{ height:clamp(160px,48vw,240px); min-height:160px; } .p-art img{ width:100%; height:100%; max-width:100%; max-height:100%; } .p-card{ border-radius:18px; padding:17px 15px; } .p-card h3{ font-size:clamp(1.3rem,6.4vw,1.7rem); } .p-card .lead{ font-size:.84rem; line-height:1.58; } .tags{ margin-top:14px; gap:6px; } .tags li{ font-size:8.5px; padding:5px 9px; } .faq-list{ margin-top:24px; gap:9px; width:100%; } .faq-item, .faq-item[open]{ border-radius:22px 5px 22px 5px; } .faq-item summary{ padding:14px 16px; gap:12px; font-size:.9rem; line-height:1.3; } .faq-item summary::after{ font-size:1.15rem; } .faq-item .ans{ padding:0 16px 16px; font-size:.88rem; line-height:1.55; } .foot-pills{ gap:8px; } .pill{ width:100%; } /* celular: nao ha pin nem trilho — o espacador perde a altura extra, a fita vira lista vertical e o desencontro de alturas (--y) some. */ .horizontal-pin-spacer{ height:auto !important; } .horizontal-pin{ position:relative; height:auto; min-height:0; padding-top:var(--gap-sec); padding-bottom:var(--gap-sec); overflow:visible; } .cases-head{ margin-bottom:22px; } .cases-view{ position:static; height:auto; max-height:none; overflow:visible; } .cases-track{ position:static; display:grid; grid-template-columns:1fr; gap:34px; padding:0 var(--pad) 8px; width:auto; height:auto; transform:none !important; } .case-card{ width:100%; max-width:none; margin-top:0; opacity:1 !important; } .case-frame{ width:100%; height:auto; aspect-ratio:4/3; } .case-frame img{ transform:none !important; } .case-name{ font-size:1.02rem; max-width:none; } .case-todos{ width:100%; margin-top:6px; justify-content:center; } .fan-card{ width:clamp(120px,34vw,180px); } } @media (max-width:420px){ .hero-actions .btn{ width:100%; } .field input, .field select, .field textarea{ padding-left:20px; padding-right:20px; } .m-card{ padding:30px 21px; } } /* ═══════════════════════════════════════════════════════════════════ CONFORTO VISUAL · escalas para monitores menores, telas baixas e celular. Este bloco fica por último de propósito: ele afina o que os blocos acima definem, nunca o contrário. ═══════════════════════════════════════════════════════════════════ */ /* ── Notebooks e monitores 1366/1440: tudo um ponto menor ── */ @media (max-width:1560px){ :root{ --nav-h:80px; --pad:clamp(24px,5vw,88px); --gap-sec:clamp(46px,6.5vh,86px); } body{ font-size:15.2px; } .brand img{ height:34px; } .hero-title{ font-size:clamp(2.2rem,4.8vw,4.3rem); } .hero-desc{ max-width:420px; font-size:clamp(.88rem,.95vw,.98rem); } .uni-head h2{ font-size:clamp(1.2rem,2.4vw,2.05rem); } .uni-stage{ min-height:clamp(400px,52vh,580px); } #produtos-intro h2{ font-size:clamp(1.7rem,3.6vw,3.3rem); } #produtos-intro p{ margin-top:18px; max-width:470px; font-size:.93rem; } .p-art{ height:clamp(240px,28vw,430px); min-height:240px; } .p-art img{ max-width:clamp(210px,24vw,330px); max-height:clamp(210px,24vw,330px); } .p-card{ padding:clamp(16px,1.7vw,28px); max-width:390px; } .p-card h3{ font-size:clamp(1.3rem,2vw,1.95rem); } .p-card .lead{ margin-top:13px; font-size:.85rem; line-height:1.65; max-width:380px; } .cases-head h2{ font-size:clamp(1.55rem,3vw,2.6rem); } #metodo h2{ font-size:clamp(1.6rem,3.3vw,2.9rem); } .m-card{ padding:clamp(24px,2.6vw,46px) clamp(20px,2.3vw,38px); } .m-node{ width:46px; height:46px; margin-bottom:16px; } .m-line{ top:23px; } #diagnostico h2{ font-size:clamp(1.8rem,4.4vw,3.9rem); } .diag-medico{ height:clamp(170px,19vw,300px); right:clamp(4px,2.6vw,64px); } #empresas h2{ font-size:clamp(1.5rem,3.2vw,2.8rem); } #faq h2{ font-size:clamp(1.5rem,3vw,2.6rem); } .foot-main h2{ font-size:clamp(1.35rem,2.4vw,2.2rem); } } /* ── Telas baixas (768/800/900 de altura): nada mais estoura o viewport ── */ @media (max-height:860px) and (min-width:761px){ :root{ --gap-sec:clamp(38px,5.6vh,68px); } #hero{ padding-bottom:8vh; } .hero-title{ font-size:clamp(2rem,4vw,3.5rem); } .hero-desc{ margin-top:14px; font-size:.9rem; line-height:1.62; } .hero-actions{ margin-top:22px; } .uni-pin{ padding-top:calc(var(--nav-h) + 1.6vh); padding-bottom:3.6vh; } .cases-pin{ padding-top:calc(var(--nav-h) + .6vh); padding-bottom:2.6vh; } .uni-head{ margin-bottom:clamp(12px,2vh,24px); } .uni-stage{ min-height:0; } .cases-head{ margin-bottom:clamp(10px,1.4vh,20px); } /* Mexer no --stage, e não no height: as peças dimensionam por ele (--h e --y são frações do palco). Antes só o height encolhia — a janela ficava menor que o palco e as fotos saíam pequenas, com sobra de espaço em volta. Descontando menos altura fixa (o título e o respiro já encolheram acima), sobra mais palco para a imagem. */ .cases-view{ --stage:clamp(260px, calc(100vh - var(--nav-h) - 150px), 500px); } #produtos-intro h2{ font-size:clamp(1.6rem,3.3vw,2.8rem); } .p-art{ height:clamp(205px,23vw,335px); min-height:205px; } .m-node{ width:44px; height:44px; font-size:.95rem; margin-bottom:14px; } .m-line{ top:22px; } } /* ═══════════ POPUP DE CASE ═══════════ */ /* telas baixas: encolhe o texto para o CTA continuar à vista */ @media (max-height:780px){ .cm-box{ height:auto; min-height:min(88vh,560px); max-height:94vh; } .cm-text{ padding:clamp(16px,2vw,28px); } .cm-text h3{ font-size:clamp(1.35rem,2vw,1.95rem); margin-top:9px; } .cm-text .cm-sub{ margin-top:9px; font-size:.9rem; } .cm-text p{ margin-top:12px; font-size:.86rem; line-height:1.55; } .cm-meta{ margin-top:13px; } .cm-text .btn-primary{ margin-top:14px; } } /* empilhado: vídeo em 16/9 no topo, texto e CTA logo abaixo, tudo rolável */ @media (max-width:820px){ .cm-box{ width:min(600px,94vw); height:auto; min-height:0; max-height:90vh; grid-template-columns:1fr; overflow-y:auto; overscroll-behavior:contain; border-width:8px; border-radius:24px 7px 24px 7px; } .cm-media{ order:-1; align-self:start; padding:0; gap:0; } .cm-media img,.cm-media iframe{ height:auto; aspect-ratio:16/9; } .cm-text{ min-height:0; overflow:visible; padding:18px 16px 20px; border-right:0; border-bottom:0; border-top:2px solid rgba(83,183,197,.28); } .cm-text > :first-child{ margin-top:0; } .cm-text > :last-child{ margin-bottom:0; } .cm-text h3{ font-size:clamp(1.45rem,5.6vw,2rem); } .cm-text .btn-primary{ align-self:stretch; justify-content:center; margin-top:18px; } .cm-close{ width:34px; height:34px; font-size:16px; } } /* ═══════════ RODAPÉ · coluna única enxuta ═══════════ */ @media (max-width:1180px){ #contato{ padding-top:clamp(56px,9vw,92px); } .foot-grid{ display:grid; grid-template-columns:1fr; gap:clamp(20px,3.2vh,34px); align-items:start; max-width:760px; text-align:center; } .foot-nav{ flex-direction:column; align-items:center; gap:0; } .foot-nav-info{ align-items:center; width:100%; margin-bottom:0; } .mascote{ height:clamp(112px,17vh,168px); max-height:none; margin:0 0 4px; } .foot-brand{ margin:0 0 14px; } .foot-brand img{ width:min(158px,52vw); } .foot-nav .k,.foot-social .k{ text-align:center; margin-bottom:11px; } .foot-nav ul,.foot-social ul{ flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:9px; } /* links viram chips — organiza melhor em linha do que a lista vertical */ .foot-nav a,.foot-social a{ display:inline-flex; align-items:center; padding:9px 16px; border-radius:99px 6px 99px 6px; font-size:.86rem; font-weight:700; letter-spacing:.01em; border:1px solid rgba(140,197,97,.24); background:rgba(245,247,247,.045); transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease); } .foot-nav a:hover,.foot-social a:hover{ color:var(--lime); border-color:rgba(140,197,97,.55); background:rgba(140,197,97,.1); } .foot-main{ margin-top:clamp(38px,8vh,78px); } .foot-main h2{ font-size:clamp(1.5rem,4.4vw,2.2rem); } #contato .foot-main{ max-width:none; } .form{ text-align:left; } .foot-social{ position:relative; text-align:center; padding-bottom:0; padding-top:clamp(18px,2.6vh,28px); } /* fio de luz separando formulário e redes */ .foot-social::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(260px,62%); height:1px; background:linear-gradient(90deg,transparent,rgba(140,197,97,.55),rgba(83,183,197,.55),transparent); } } /* abaixo de 1024 o titulo ja ocupa a linha inteira e o medico brigaria com o texto — some ele */ @media (max-width:1024px){ .diag-medico{ display:none; } } /* "Páginas" sai do ar: em tela pequena o menu do topo já dá conta */ @media (max-width:900px){ .foot-nav-info .k,.foot-nav-info ul{ display:none; } .foot-brand{ margin-bottom:0; } } /* ═══════════ CELULAR ═══════════ */ @media (max-width:760px){ .hero-title{ font-size:clamp(1.95rem,8.6vw,2.9rem); line-height:1.12; } .uni-head h2{ font-size:clamp(1.15rem,5.2vw,1.55rem); -webkit-line-clamp:3; } .cases-head h2{ font-size:clamp(1.4rem,6.4vw,1.95rem); } #metodo h2{ font-size:clamp(1.4rem,6.6vw,1.95rem); } #empresas h2,#faq h2{ font-size:clamp(1.35rem,6.4vw,1.85rem); } #empresas .txt{ font-size:.95rem; line-height:1.68; } #diagnostico .sub{ font-size:.95rem; line-height:1.66; } /* sem altura minima: a secao passa a ocupar so o que o conteudo pede */ #produtos-intro{ min-height:0; padding-top:var(--gap-sec); padding-bottom:var(--gap-sec); } #contato{ padding-top:clamp(58px,14vw,96px); } .foot-wave{ height:clamp(34px,9vw,54px); } .foot-grid{ gap:clamp(16px,2.8vh,26px); max-width:none; } .mascote{ display:none; } .foot-brand img{ width:min(140px,46vw); } .foot-main h2{ font-size:clamp(1.35rem,6.4vw,1.9rem); line-height:1.22; } .foot-pills{ margin-top:15px; gap:8px; } .pill{ width:100%; min-height:46px; padding:12px 16px; font-size:11px; } .form{ margin-top:14px; gap:9px; } .field label{ font-size:8.5px; } .field input,.field select,.field textarea{ font-size:.85rem; padding:12px 16px; } .field textarea{ min-height:84px; } .form .btn{ width:100%; } .foot-social .k{ margin-bottom:10px; } .foot-social a{ font-size:.8rem; padding:8px 14px; } .foot-legal{ margin-top:20px; padding-top:16px; } .foot-legal__links{ gap:7px 18px; } .foot-base{ height:26px; } .foot-strip{ height:10px; } } /* o player do YouTube guarda 16/9 em qualquer tela */ #cmVideo{ height:auto; aspect-ratio:16/9; } @media (max-width:420px){ .foot-main h2{ font-size:1.3rem; } .foot-nav a,.foot-social a{ font-size:.78rem; padding:8px 13px; } .foot-social ul{ gap:7px; } } /* ═══════ Titulo de Produtos: sempre 2 linhas, em qualquer largura ═══════ Cada linha e um bloco proprio e nao quebra. O corpo escala so pela largura da viewport (5.4vw), entao a linha maior — 13.9em em Calendula — cabe folgada no respiro lateral (--pad) de 320px a 2560px. Vem depois de todos os media queries para vencer os ajustes por tela. */ #produtos-intro h2{ max-width:none; font-size:min(4.1rem, 5.4vw); } #produtos-intro h2 .ln{ display:block; white-space:nowrap; } /* ═══════════════════════════════════════════════════════════════════ PAGINA QUEM SOMOS Toda a midia da pagina usa um formato unico (retrato 9:16) — e o que deixa a pagina com cara de sistema em vez de colagem. Mudar as tres variaveis abaixo muda imagens e video de uma vez. ═══════════════════════════════════════════════════════════════════ */ .qs{ --midia-ratio:9/16; --midia-raio:24px 6px 24px 6px; --midia-sombra:0 30px 70px rgba(0,0,0,.45); background:var(--dark); color:var(--bone); } /* ── Capa ─────────────────────────────────────────────────────────── */ .qs-capa{ position:relative; min-height:82vh; display:flex; align-items:center; justify-content:center; padding:calc(var(--nav-h) + 20px) var(--pad) 60px; overflow:hidden; } .qs-capa__bg{ position:absolute; inset:0; z-index:0; background:var(--dark); } .qs-capa__bg img{ width:100%; height:100%; object-fit:cover; opacity:.42; animation:qsZoom 25s linear infinite alternate; } .qs-capa__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,var(--dark) 0%,rgba(23,23,23,.4) 45%,transparent 75%); } @keyframes qsZoom{ from{ transform:scale(1); } to{ transform:scale(1.1); } } .qs-capa__in{ position:relative; z-index:1; text-align:center; max-width:900px; } .qs-capa__in h1{ font-family:var(--display); font-size:clamp(3rem,10vw,7rem); line-height:1; letter-spacing:-.02em; margin-top:16px; text-shadow:0 10px 40px rgba(0,0,0,.5); } /* ── Blocos de secao ──────────────────────────────────────────────── */ .qs-sec{ padding:clamp(64px,11vw,140px) var(--pad); position:relative; z-index:2; background:var(--dark); } .qs-sec--alt{ background:var(--dark-2); } .qs-head{ max-width:820px; margin:0 auto clamp(38px,6vw,72px); text-align:center; } .qs-head h2{ font-family:var(--display); font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:1.12; letter-spacing:-.015em; margin-top:14px; } .qs-head p{ margin-top:20px; font-size:clamp(1.02rem,1.5vw,1.18rem); line-height:1.8; color:rgba(245,247,247,.72); } /* ── Manifesto ────────────────────────────────────────────────────── */ .qs-manifesto{ max-width:900px; margin:0 auto; text-align:center; } /* text-align herda para tudo aqui dentro; o auto nas margens centraliza a caixa e o balance evita uma ultima linha orfa no meio da coluna. */ .qs-manifesto .label,.qs-manifesto .qs-frase,.qs-manifesto p{ text-align:center; } .qs-manifesto .qs-frase{ font-family:var(--display); font-size:clamp(1.7rem,3.6vw,2.9rem); line-height:1.28; letter-spacing:-.015em; margin:18px auto 30px; max-width:860px; text-wrap:balance; } .qs-manifesto p{ font-size:clamp(1.02rem,1.5vw,1.2rem); line-height:1.82; color:rgba(245,247,247,.76); max-width:720px; margin:0 auto 20px; text-wrap:pretty; } .qs-manifesto p:last-child{ margin-bottom:0; } /* ── Midia: um unico formato para tudo ────────────────────────────── */ .qs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); max-width:1180px; margin:0 auto; } .qs-midia{ position:relative; aspect-ratio:var(--midia-ratio); border-radius:var(--midia-raio); overflow:hidden; background:#0e0e0e; box-shadow:var(--midia-sombra); } .qs-midia::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); pointer-events:none; } .qs-midia img,.qs-midia video{ width:100%; height:100%; object-fit:cover; display:block; } .qs-midia img{ transition:transform 1s var(--ease); } .qs-midia:hover img{ transform:scale(1.05); } .qs-legenda{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px 18px 16px; background:linear-gradient(to top,rgba(10,10,10,.9),transparent); font-size:13px; font-weight:700; letter-spacing:.04em; color:rgba(245,247,247,.92); } /* ── Video vertical ───────────────────────────────────────────────── */ .qs-video{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,6vw,88px); align-items:center; max-width:1180px; margin:0 auto; } .qs-video__quadro{ position:relative; width:100%; max-width:400px; justify-self:center; } .qs-video__quadro .qs-midia{ cursor:pointer; } .qs-video__play{ position:absolute; inset:0; z-index:3; display:grid; place-items:center; border-radius:var(--midia-raio); background:rgba(10,10,10,.28); border:0; cursor:pointer; transition:opacity .35s var(--ease), visibility .35s; } .qs-video__quadro.tocando .qs-video__play{ opacity:0; visibility:hidden; } .qs-video__play i{ width:74px; height:74px; border-radius:50%; background:var(--grad); display:grid; place-items:center; box-shadow:0 14px 40px rgba(83,183,197,.45); transition:transform .3s var(--ease); } .qs-video__play i::before{ content:""; border-left:20px solid var(--ink); border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:5px; } .qs-video__play:hover i{ transform:scale(1.09); } .qs-video__texto h2{ font-family:var(--display); font-size:clamp(1.9rem,4vw,3.2rem); line-height:1.1; letter-spacing:-.02em; margin-top:14px; } .qs-video__texto p{ margin-top:22px; font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.8; color:rgba(245,247,247,.78); max-width:520px; } .qs-video__texto .btn{ margin-top:32px; } /* ── Pilares ──────────────────────────────────────────────────────── */ .qs-pilares{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); max-width:1180px; margin:0 auto; } .qs-pilar{ padding:clamp(26px,3vw,40px); border-radius:22px 6px 22px 6px; background:linear-gradient(165deg,rgba(30,33,30,.92),rgba(18,20,18,.86)); border:1px solid rgba(140,197,97,.12); } .qs-pilar h3{ font-family:var(--display); font-size:clamp(1.3rem,2.2vw,1.8rem); margin:14px 0 12px; line-height:1.15; } .qs-pilar p{ font-size:.96rem; line-height:1.72; color:rgba(245,247,247,.7); } /* ── Chamada final ────────────────────────────────────────────────── */ .qs-cta{ background:var(--dark-2); padding:clamp(80px,12vw,150px) var(--pad); text-align:center; position:relative; overflow:hidden; } .qs-cta::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 120%,rgba(83,183,197,.15),transparent 60%); } .qs-cta__in{ position:relative; z-index:1; max-width:900px; margin:0 auto; } .qs-cta h2{ font-family:var(--display); font-size:clamp(2.2rem,5.4vw,4.6rem); line-height:1.06; letter-spacing:-.02em; margin-bottom:24px; } .qs-cta p{ font-size:clamp(1.02rem,1.6vw,1.25rem); color:rgba(245,247,247,.76); max-width:620px; margin:0 auto; } .qs-cta__acoes{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:36px; } /* Aqui existia uma segunda definicao de .btn-ghost que, por vir depois, valia para o site inteiro: no hover ela pintava o texto de lime e cancelava o "color:var(--ink)" do botao original. Com o preenchimento em degrade subindo por tras (o ::before), lime sobre lime ficava ilegivel. O botao fantasma tem uma definicao so, la em cima. */ /* ── Conteudo livre do editor dentro da pagina ────────────────────── */ .qs-editor{ max-width:820px; margin:0 auto; } .qs-editor p,.qs-editor li{ color:rgba(245,247,247,.78); line-height:1.8; } .qs-editor h2,.qs-editor h3{ font-family:var(--display); color:var(--bone); } .qs-editor a{ color:var(--lime); text-decoration:underline; text-underline-offset:3px; } @media (max-width:1120px){ .qs-video{ grid-template-columns:1fr; gap:40px; } .qs-video__quadro{ max-width:340px; } .qs-video__texto{ text-align:center; } .qs-video__texto p{ margin-left:auto; margin-right:auto; } } @media (max-width:860px){ .qs-pilares{ grid-template-columns:1fr; gap:14px; } /* Duas colunas mantem as pecas do mesmo tamanho; a ultima ocupa a linha inteira para nao sobrar um buraco no fim da grade. */ .qs-grid{ grid-template-columns:repeat(2,1fr); } .qs-grid > :last-child:nth-child(odd){ grid-column:1/-1; aspect-ratio:4/3; } } @media (max-width:768px){ .qs-capa{ min-height:70vh; } .qs-capa__in h1{ font-size:clamp(3rem,13vw,4.6rem); } .qs-manifesto .qs-frase{ font-size:clamp(1.45rem,6vw,2rem); } } @media (max-width:520px){ .qs-grid{ grid-template-columns:1fr; max-width:340px; } .qs-grid > :last-child:nth-child(odd){ aspect-ratio:var(--midia-ratio); } .qs-video__quadro{ max-width:300px; } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .reveal{ opacity:1; transform:none; } } /* ═══════════════════════════════════════════════════════════════════ WORDPRESS · acessibilidade, blog, comentarios e blocos do editor Tudo daqui para baixo nao existia no prototipo: sao os estilos que o WordPress precisa para paginas, artigos, busca, 404 e o editor. ═══════════════════════════════════════════════════════════════════ */ .screen-reader-text,.atm-sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link{ position:absolute; left:-9999px; top:0; z-index:400; background:var(--grad); color:var(--ink); font-weight:800; padding:12px 20px; border-radius:0 0 12px 0; } .skip-link:focus{ left:0; } :focus-visible{ outline:2px solid var(--teal); outline-offset:3px; } /* campo-armadilha do formulario (robos preenchem, humanos nao veem) */ .atm-hp{ position:absolute!important; left:-9999px; width:1px; height:1px; opacity:0; } /* ── Paginas internas (artigo, pagina, busca, 404) ────────────────── */ .atm-pagina{ background:var(--light); color:var(--ink); padding:calc(var(--nav-h) + clamp(40px,7vh,90px)) var(--pad) clamp(60px,9vh,120px); min-height:70vh; } .atm-pagina .atm-wrap{ width:min(820px,100%); margin:0 auto; } .atm-pagina .atm-wrap--largo{ width:min(1180px,100%); } .atm-pagina h1{ font-family:var(--display); font-weight:700; line-height:1.08; font-size:clamp(1.9rem,4vw,3.4rem); letter-spacing:-.01em; } .atm-pagina h2{ font-family:var(--display); font-size:clamp(1.4rem,2.6vw,2.1rem); margin:38px 0 14px; } .atm-pagina h3{ font-family:var(--display); font-size:clamp(1.15rem,2vw,1.55rem); margin:30px 0 12px; } .atm-pagina p,.atm-pagina li{ color:rgba(40,44,32,.82); line-height:1.78; } .atm-pagina p{ margin:0 0 18px; } /* O recuo dos marcadores e a folga entre itens valem para a lista ESCRITA NO EDITOR, nao para toda